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

Présentation au sujet: "Marcel Bosc Introduction Web Université Paris-13Département informatiqueIUT de Villetaneuse 2011-2012 1ère année, cours - 2/5."— Transcription de la présentation:

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

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

3 interactions client serveur 1ère partie

4 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

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

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

7 requêtes - autres fichiers exemple : yahoo.com : 49 requêtes firebug : net html : 40 Ko image : 4 Ko image : 11 Ko

8 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

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

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

11 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 http://aquanux/~10612/page.html 1 4 3 0

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

13 Divers 3ème partie

14 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,....

15 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)

16 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

17 Moteurs de recherche google.com toto.org titi.com xyz.net 123 « cinéma paris » crawl indexation recherche résultats

18 Recherche, référencement Arriver dans les premiers résultats ! PageRank « importance » de chaque page plus de liens vers une page meilleur PageRank

19 CSS - sélecteurs 3ème partie

20 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"

21 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

22 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

23 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"

24 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

25 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; }

26 autres sélecteurs ● E > F : p >.important ● E:first-child : p:first-child ● E:hover: tr:hover exemples Attention: problèmes compatibilité navigateurs syntaxe http://www.w3.org/TR/CSS21/selector.html

27 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;

28 Boites / HTML 3ème partie

29 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:

30 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)

31 HTML : élément « span » span: é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)

32 formulaire : exemple simple 2 1 12 form.html simplifié...

33 formulaire : exemple 2 termes à chercher: en francais? 2 1 5 3 4 1 2 3 4 5 form.html

34 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

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

36 Positionnement 4ème partie

37 Positionnement flux normal (inline, block) float absolute 3 algorithmes :.exemple2 { float: left; }.exemple3 { position: absolute; } p, a, h1... positions ordinaires

38 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

39 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.

40 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

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

42 ce document est distribué librement : sous licence GNU FDL : http://www.gnu.org/copyleft/fdl.html les originaux sont disponibles aux formats OpenOffice et powerpoint http://www-info.iutv.univ-paris13.fr/~bosc