[PDF] [PDF] Introduction Web - Moodle - IUT de Villetaneuse

Un essai Titre section-1 bla bla bla bla Titre section-2 bli bli bli bli bli Titre 



Previous PDF Next PDF





[PDF] Introduction - LIPN

Université Paris 13 IUT de Villetaneuse Savoir modifier les attributs de présentation d'une page Web Savoir adapter un Un serveur est un ordinateur ( et/ou un programme informatique) offrant un service ou Recherche de nouveaux nombres premiers de Mersenne (GIMPS, Great Internet Chemin local ▻



[PDF] Introduction Web - Moodle - IUT de Villetaneuse

Un essai Titre section-1 bla bla bla bla Titre section-2 bli bli bli bli bli Titre 



[PDF] Introduction à linformatique - Cours complet - Cours, examens et

IUT de Villetaneuse S1 2016 G Santini, J -C Dubacq la fin de l'exécution du programme avant de pouvoir taper une nouvelle commande (connecté) L' adresse du web-mail de l'IUT est : /bin:/usr/bin:/usr/local/bin:/home/chez_moi/ bin



[PDF] Initiation au développement Web Partie 2

IUT de Villetaneuse DUT R&T S1 Cours M1106 Initiation au développement Web Partie 2 HTML Étienne André Etienne Andre (à) univ-paris13



[PDF] Module M1101 IUT de Villetaneuse Département R&T - Luca Saiu

Attention Vous êtes censés contrôler réguli`erement le site web du module et lire Introduction `a l'administration des syst`emes Plan ET, OU et NON utilisés pour certains calculs sur les adresses IP (voir cours Elle utilise alors l' adresse de diffusion locale pour envoyer un paquet `a découvrir de nouvelles routes



[PDF] Rapport dévaluation de luniversité Paris 13

13 nov 2018 · Présentation 5 Elle est localisée sur cinq campus (Villetaneuse, Bobigny, CNRS qui n'étaient pas présents à la réunion programmée au cours de la visite dans la création de licences professionnelles avec les IUT de Paris 13 et a recherche dans de nouveaux locaux sur le site d'Aubervilliers



[PDF] Diplôme Universitaire de Technologie RESEAUX ET

permettre à l'étudiant d'apprendre à maîtriser les Nouvelles Technologies de l' Information et de la La formation DUT R&T permet à l'étudiant une insertion professionnelle concertation avec les professionnels et en tenant compte du contexte local et universitaire Modifier les attributs de présentation d'une page Web



[PDF] INTRODUCTION À LA SOCIOLOGIE SUPPORT DE COURS

Université Paris 13 – Villetaneuse Licence AES 1 Le cours est organisé en trois parties : une partie d'introduction générale à la En résultera une nouvelle grille d'observation plus restreinte, mais à faire de toute métropole urbaine le centre local d'une économie mondiale et d'une civilisation dans laquelle les cultures

[PDF] INTRODUCTION Wine and food are two elements that go

[PDF] Introduction XAMPP

[PDF] Introduction XML XML comparé à SGML XML comparé à HTML XML - Javascript

[PDF] Introduction `a Freefem++

[PDF] Introduction `a HTTP - Javascript

[PDF] Introduction `a la géométrie algébrique Olivier Debarre

[PDF] Introduction `a la théorie du contrˆole

[PDF] Introduction `a la Topologie - Ajouter.

[PDF] Introduction `a l`algorithmique avec Python - La Pollution

[PDF] Introduction `a l`analyse Devoir surveillé n 3 Vendredi 16 janvier 2015

[PDF] Introduction `a l`apprentissage automatique Exemples de probl

[PDF] Introduction `a l`optimisation : aspects théoriques, numériques et

[PDF] Introduction `a Mathematica

[PDF] Introduction `a Matlab - Anciens Et Réunions

[PDF] introduction `a R - La terre vue d`ailleurs

Marcel BoscIntroduction Web

Université Paris-13Département informatiqueIUT de Villetaneuse2010-20111ère année, cours - 2/5

table des matières rappels et précisions programmation coté client

CSS - sélecteurs

Affichage HTML

interactions client serveur1ère partie rappel : page html simple clientmachine site.org navigateur internetserveur web (logiciel) protocole http protocole http très simplifié...bonjour site.org, je voudrais la page page.html ok, voici la page, au format html1 2 requêtes - autres fichiers

Un titre!

bla bla

fichiers : page.html style.css photo.jpgpage.html client (navigateur)machine internetrequêtes - autres fichiers page.htmlapache photo.jpgsite.org affichagepage.html http://site.org/photo.jpg photo.jpgapache

6http://site.org/page.html

1 2 photo.jpg nécessaire pour afficher!3 54
même chose pour fichiers:

CSS, javascript, flash, ...

requêtes - autres fichiersexemple : yahoo.com : 49 requêtes firebug : net firebug : net firebug : net firebug : net html : 40 Ko html : 40 Ko image : 4 Ko image : 4 Ko image : 11 Ko image : 11 Ko nombre de requêtes performance : vitesse de chargement de la page + requêtes = + long concaténation CSS concaténation JS concaténation Images (sprites) exemple : sprites CSS: background-position4 images

1 image

développement : fichier local clientmachine site.org navigateur internetserveur web (logiciel) très simplifié...page.htmlfile:///home/toto/page.html clientsite.org navigateurinternet très simplifié...hébergement web classique serveur web

4affichage

htmlpage.html2apache 1 3 serveur ftpdéveloppeur 0 clientvotre poste de TPmachine aquanux navigateurintranet très simplifié...développement à l'IUT serveur web

5affichage

html serveur de fichierspage.htmlpage.html2apache 1 4 3 0 développement à l'IUT url :file:///home/usager/123/exemple/page.html fichier :~/public_html/page.htmlfichier :~/exemple/page.html url : http://aquanux/~123/page.html!ne pas confondre local et serveur! répertoire spécialrépertoire spécial droits d'accès (groupe www): chmod g+r page.htmllocal serveur

Divers3ème partie

Visiteurs d'un site web

site.org page.html moteur de recherchenavigateur mal voyant autres " robots »images, couleurs, taille de texte, images, couleurs, taille de texte,

Bonjour

HTML h1 font-size : 200%; }CSS " Ce texte ("Bonjour") est un titre important »" Les titres importants sont affichés en grand »Séparation du fond et de la forme fondforme moteur de recherchemal voyant autres " robots »(contenu, sens, structure)(présentation, apparence) contenu et structure logiquemise en formehtmlcss html simple et facile à maintenir séparation de métiers (graphiste / dev. web) html compréhensible par - malvoyants - moteurs de recherche - autres logiciels présentation facile à changer

Pingouins

Les pingouins sont des oiseaux...

Pingouins

Les pingouins sont des oiseaux...

titre???titre???Séparation du fond et de la forme

Moteurs de recherche

google.com toto.orgtiti.com xyz.net123 " cinéma paris »crawlindexationrecherche résultats

Recherche, référencement

Arriver dans les premiers résultats !

PageRank

" importance » de chaque page plus de liens vers une page meilleur PageRank

CSS - sélecteurs3ème partie

Rappels

Ceci est un titre

Un paragraphe de texte avec un

lien vers une autre page. Les mots suivants sont importants

h1 font-size: 200%; strong color: red; }Feuille de style: sélecteur: quels éléments ont veut affecter "h1" tous les éléments de type h1HTML ".toto" tous les éléments ayant class="toto"

Rappels : sélecteurs

p {color: red;}

Un essai

Titre section-1

bla bla bla bla

Titre section-2

bli bli bli bli bli

Titre section-3

Qu'est qu'on s'amuse!

Titre section-4

abc def ghi jkl mno

Titre section-5

.actu {color: blue;}#para1 {color: green;}#unID nombalise .uneClasse définition sélecteur proprieté1: valeur1; proprieté2: valeur2; }table #principal table.actu table a, .urgent a background-color width margindéfinitionexemples green 10em

30px 20px

sélecteurs : descendants p a a img strong imgid="intro" p imgsel1 sel2 espace sélectionne les sel2 qui sont des descendants de sel1 exemples:les "img" descendants d'un "p" #intro imgles "img" descendants de l'élément ayant id="intro" sélecteurs : d'une classe sel.maclasse point, pas d'espace sélectionne les sel dont l'attribut classe est maclasse class="maclasse"

Titre section-1

bla bla bla bla

Titre section-2

bla bla bla bla

Titre section-4

abc def ghi jkl mno

Titre section-5

h2.actu sélecteurs multiples sel1, sel2, sel3 virgule les propriétés/valeurs s'appliquent à la fois

à sel1, sel2 et sel3

titre

petit titre

sous titre

abc

xyz

.important,h3,h2 color: red; autres sélecteurs

E > F : p > .important E:first-child : p:first-child E:hover: tr:hoverexemples

Attention: problèmes compatibilité navigateurssyntaxe http://www.w3.org/TR/CSS21/selector.html priorités

xyz

les sélecteurs plus spécifiques sont prioritaires strong {color: red; } p strong {color: green; } .c1 {color: yellow;} strong.c1 {color: blue; } p strong.c1 {color: black; } #id1 {color: white; } p #id1 {color: orange;}firebug: color: black; color: white;

Boites / HTML3ème partie

Type de boite : display

inline: a, img, strong, span ... block: p, h1, div ...inline: dans le flux du texte block: occupe toute la ligne Titre exemple lien important, h2 p astronginline block.lienMenu display: block; }Changer:

HTML : élément " div »

div: élément block pour regrouper plusieurs éléments inline ou block exemples:

bla bla

bla bla bla

bla bla

bla bla bla

texte principal d'une page: block navigation d'une page:(souvent : id ou class)

HTML : élément " span »

div: élément inline pour regrouper plusieurs éléments inline exemples:

01.49.40.12.34

1/1/2010

regrouper du texte:(souvent : id ou class) formulaire : exemple simple

21

12form.htmlsimplifié...

formulaire : exemple 2



21 53
4 12 34

5form.html

L'avenir : CSS 3

nouveaux sélecteurs coins arrondis : border-radius dégradés : gradient ombres plusieurs images de fond transparences ...

Problèmes de compatibilité: ie5,6,7,8

http://www.quirksmode.org

L'avenir : HTML 5

... : structurer doc. formulaires : champs date, heure, email... SVG ...

Positionnement4ème partie

Positionnement

flux normal (inline, block) float absolute3 algorithmes : .exemple2 float: left; .exemple3 position: absolute; }p, a, h1 ... positions ordinaires Float img{float: right; }

bla bla bla bla bla...

bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blanormal

Position : absolute

img{position: absolute;} bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blanormal bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blaposition: absolute ... les éléments sont retirés du flux normal. On peut les placer ou on veut.

Position : absoluteimg

position: absolute ; top: 20px ; right: 40px; bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blanormal bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla20px

40pxcontaining block

Exemple de mise en page

entete principalbarre
...
...
...
body {width: 750px;} #principal float: left; width: 500px; #barre float: right; width: 250px; }simplifié... ce document est distribué librement : sous licence GNU FDL : http://www.gnu.org/copyleft/fdl.html les originaux sont disponibles aux formats OpenOffice et powerpointquotesdbs_dbs17.pdfusesText_23