Marcel Bosc Introduction Web Université Paris-13Département informatiqueIUT de Villetaneuse ère année, cours - 2/5

table des matières rappels et précisions programmation coté client CSS - sélecteurs Affichage HTML

interactions client serveur 1ère partie

rappel : page html simple client machine site.org navigateur internet serveur web (logiciel) protocole http très simplifié... bonjour site.org, je voudrais la page page.html ok, voici la page, au format html 1 2

requêtes - autres fichiers Un titre! bla bla fichiers : ● page.html ● style.css ● photo.jpg page.html

client (navigateur) machine internet requêtes - autres fichiers page.html apache photo.jpg site.org affichage page.html photo.jpg apache photo.jpg nécessaire pour afficher! même chose pour fichiers: CSS, javascript, flash,...

requêtes - autres fichiers exemple : yahoo.com : 49 requêtes firebug : net html : 40 Ko image : 4 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-position 4 images 1 image

développement : fichier local client machine site.org navigateur internet serveur web (logiciel) très simplifié... page.html file:///home/toto/page.html

client site.org navigateur internet très simplifié... hébergement web classique serveur web 4 affichage html page.html 2 apache ~/travail/page.html serveur ftp développeur 0

client votre poste de TP machine aquanux navigateur intranet très simplifié... développement à l'IUT serveur web 5 affichage html serveur de fichiers page.html 2 apache ~/public_html/page.html

développement à l'IUT url :file:///home/usager/123/exemple/page.html fichier : ~/public_html/page.html fichier : ~/exemple/page.html url : ! ne pas confondre local et serveur! répertoire spécial droits d'accès (groupe www): chmod g+r page.html local serveur

Divers 3ème partie

Visiteurs d'un site web site.org page.html moteur de recherche navigateur 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 fond forme moteur de recherche mal voyant autres « robots » (contenu, sens, structure) (présentation, apparence)

contenu et structure logique mise en forme html css ● 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... titre??? Séparation du fond et de la forme

Moteurs de recherche google.com toto.org titi.com xyz.net 123 « cinéma paris » crawl indexation recherche 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électeurs 3è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 h1 HTML ".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 margin définition exemples green 10em 30px 20px

sélecteurs : descendants p a a img strong img id="intro" p img sel1 sel2 espace sélectionne les sel2 qui sont des descendants de sel1 exemples: les "img" descendants d'un "p" #intro img les "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:hover exemples Attention: problèmes compatibilité navigateurs syntaxe

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 / HTML 3è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 a strong inline 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: Sites amis... block navigation d'une page: (souvent : id ou class)

HTML : élément « span » span: élément inline pour regrouper plusieurs éléments inline exemples: /1/2010 regrouper du texte: (souvent : id ou class)

formulaire : exemple simple form.html simplifié...

formulaire : exemple 2 termes à chercher: en francais? form.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

L'avenir : HTML 5 ● ● : dessiner en js ●... : structurer doc. ● formulaires : champs date, heure, ... ● SVG ●...

Positionnement 4ème partie

Positionnement flux normal (inline, block) float absolute 3 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 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla normal

Position : absolute img{position: absolute;} bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla normal 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 position: absolute... les éléments sont retirés du flux normal. On peut les placer ou on veut.

Position : absolute img { position: absolute ; top: 20px ; right: 40px; } bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla normal 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 20px 40px containing block

Exemple de mise en page entete principal barre... body {width: 750px;} #principal { float: left; width: 500px; } #barre { float: right; width: 250px; } simplifié...

ce document est distribué librement : sous licence GNU FDL : les originaux sont disponibles aux formats OpenOffice et powerpoint