Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Licence Math-Informa1que 1ère année Olivier Glück Université LYON 1 / Départeme

Licence Math-Informa1que 1ère année Olivier Glück Université LYON 1 / Département Informa=que Olivier.Gluck@univ-lyon1.fr hEp://perso.univ-lyon1.fr/olivier.gluck Par$e 2 Copyright ! Copyright © 2017 Olivier Glück; all rights reserved ! Ce support de cours est soumis aux droits d’auteur et n’est donc pas dans le domaine public. Sa reproduc=on est cependant autorisée à condi=on de respecter les condi=ons suivantes : ! Si ce document est reproduit pour les besoins personnels du reproducteur, toute forme de reproduc=on (totale ou par=elle) est autorisée à la condi=on de citer l’auteur. ! Si ce document est reproduit dans le but d’être distribué à des =erces personnes, il devra être reproduit dans son intégralité sans aucune modiﬁca=on. CeEe no=ce de copyright devra donc être présente. De plus, il ne devra pas être vendu. ! Cependant, dans le seul cas d’un enseignement gratuit, une par=cipa=on aux frais de reproduc=on pourra être demandée, mais elle ne pourra être supérieure au prix du papier et de l’encre composant le document. ! Toute reproduc=on sortant du cadre précisé ci-dessus est interdite sans accord préalable écrit de l’auteur. Olivier Glück L1 Math-info UCBL - LIFASR2 : Introduc=on aux réseaux et au web 2 Plan du cours ! CM1 : Internet, les réseaux et le web ! CM2 : Pages HTML et feuilles de styles CSS ! CM3 : Web interac=f, formulaires, pages dynamiques et PHP ! CM4 : Protocole HTTP, méthodes GET et POST ! CM5 : Les applica=ons d’Internet ! CM6 : La couche transport : les protocoles TCP et UDP ! CM7 : Le protocole IP ! CM8 : Les protocoles Ethernet, ARP et ICMP. Synthèse des échanges entre un client et serveur Web Olivier Glück L1 Math-info UCBL - LIFASR2 : Introduc=on aux réseaux et au web 3 CM2 : Pages HTML et feuilles de styles CSS Principe du HTML, balises et aEributs Les feuilles de styles Olivier Glück L1 Math-info UCBL - LIFASR2 : Introduc=on aux réseaux et au web 4 Plan du CM2 ! Principes du HTML, balises et aEributs ! Principes du HTML, le langage, structure d’un document ! Les paragraphes, les =tres et sauts de ligne ! Formatage du texte ! Les listes, les liens ! Les images ! Les tableaux ! Les feuilles de styles ! Principes des feuilles de styles ! Les classes et sous-classes ! Posi=onner des éléments dans une page Olivier Glück L1 Math-info UCBL - LIFASR2 : Introduc=on aux réseaux et au web 5 Principes du HTML, balises et a@ributs Principes du HTML, le langage, structure d’un document Les paragraphes, les =tres et sauts de ligne Formatage du texte Les listes, les liens Les images Les tableaux Olivier Glück L1 Math-info UCBL - LIFASR2 : Introduc=on aux réseaux et au web 6 Principes du HTML (1) Olivier Glück L1 Math-info UCBL - LIFASR2 : Introduc=on aux réseaux et au web 7 bla bla bla bla bla bla bla bla bla bla bla bla bla ref bla bla bla bla bla bla ref bla bla bla bla ref bla Page HTML serveur de news aux USA serveur HTTP au Japon serveur ftp en Australie fichier local au serveur Ici, 4 liens hyper-textes Principes du HTML (2) ! Hyper Text Markup Language ! Déﬁnit la structure logique d’un document WEB ! Composé d’un ensemble de commandes de formatage ! Basé sur la no=on d’environnement possédant un début et une ﬁn ! les délimiteurs : on parle de balises ou marqueurs ! Pour meEre en œuvre du HTML, il suﬃt ! d'un éditeur de texte pour taper le code de la page, ! d'un navigateur WEB pour aﬃcher la page formatée. Olivier Glück L1 Math-info UCBL - LIFASR2 : Introduc=on aux réseaux et au web 8 Le langage HTML (1) ! Les balises sont déﬁnies entre <> ! <BALISE>…</BALISE> ! La plupart des environnements peuvent être imbriqués selon des règles bien déﬁnies ! <H1><B>Mon =tre</B></H1> ! Il n’est pas permis de faire chevaucher des environnements ! <H1><B>Mon =tre</H1></B> ! Les minuscules/majuscules n’interviennent pas dans la déﬁni=on des balises Olivier Glück L1 Math-info UCBL - LIFASR2 : Introduc=on aux réseaux et au web 9 Le langage HTML (2) ! Les balises dénotent des "construc=ons" documentaires ! styles de paragraphe (normal, énuméra=ons, =tres…) ! tableaux ! styles de caractères (gras, italique, souligné…) ! références à des images ! références hyper-texte ! formulaires ! etc… ! Si aucun document n’est spéciﬁé dans l’URL, le document par défaut est généralement index.html Olivier Glück L1 Math-info UCBL - LIFASR2 : Introduc=on aux réseaux et au web 10 Les règles de "bonne concep$on" ! Mise en page et styles : maintenir une certaine uniformité sur l'ensemble du site ! Clarté : éviter la confusion, présenter de façon simple avec des menus, éviter les textes longs… ; l'informa=on doit être trouvée dès les premières secondes ! Hyperliens : ne pas en abuser, faire en sorte qu'ils indiquent clairement où ils mènent ! Iden1té : le visiteur doit savoir facilement sur quel site il est (quelle que soit la page visitée) et savoir à qui s'adresser --> logos, @mail, date de dernière mise à jour de la page… ! Réac1vité : ne pas abuser des images, exécu=ons de code… (temps de chargement/exécu=on) ! Navigateurs : faire aEen=on à leurs par=cularités, s’adapter à la taille de la fenêtre, au type du terminal u=lisé par le client… Olivier Glück L1 Math-info UCBL - LIFASR2 : Introduc=on aux réseaux et au web 11 Structure «minimale» d’un document <HTML> <HEAD> <TITLE>=tre-fenetre</TITLE> </HEAD> <BODY> corps du document </BODY> </HTML> HEAD : pour diﬀérencier du reste du texte, con=ent les =tres TITLE : aﬃché en haut de la fenêtre, u=lisé dans les favoris (bookmarks) BODY : con=ent le document Les commentaires :  Olivier Glück L1 Math-info UCBL - LIFASR2 : Introduc=on aux réseaux et au web 12 Respectez l’indentation ! Balise <P>, <Hn> et <BR /> ! Balise <P>...</P> ! Début d'un nouveau paragraphe ! AEribut align="center/lew/right/jus=fy" (jus=fy pas toujours interprété) ! Balises <Hn>…</Hn>, n varie de 1 à 6 ! Déﬁnissent la taille des caractères (taille décroissante) ! Texte en caractères gras et suivi d'un saut de ligne ! AEribut align="center/lew/right" ! <Hn> est considéré comme un paragraphe et ne doit pas être placé dans <P>…</P> ! Balise <BR /> ! Saut de ligne Olivier Glück L1 Math-info UCBL - LIFASR2 : Introduc=on aux réseaux et au web 13 Balises de $tres <HTML><HEAD> <TITLE>=tre-fenetre</TITLE> </HEAD><BODY> <H1>Titre "H1"</H1> <P>Texte sous le =tre.</P> <H2>Titre "H2"</H2> <P>Texte sous le =tre.</P> <H3>Titre "H3"</H3> <P>Texte sous le =tre.</P> </BODY></HTML> Olivier Glück L1 Math-info UCBL - LIFASR2 : Introduc=on aux réseaux et au web 14 Balises de formatage de texte (1) ! Balise <PRE>…</PRE> ! Texte pré-formaté ! Permet de conserver le formatage du texte tel qu'il a été saisi dans le ﬁchier source HTML (respect de la mise en page précise : espacement, saut de ligne...) ! U=le par exemple pour faire un tableau "manuellement » ou pour aﬃcher un code indenté ! Styles physiques indépendants du navigateur u=lisé et de sa conﬁgura=on ! <B>...</B> : gras ! <I>...</I> : italique ! <TT>...</TT> : machine à écrire (police largeur ﬁxée) ! <STRIKE>...</STRIKE> : texte barré ! <U>...</U> : souligné ! <SUB>...</SUB> : indice ! <SUP>...</SUP> : exposant ! <SMALL>...</SMALL> : pe=te police ! <BIG>...</BIG> : grande police Olivier Glück L1 Math-info UCBL - LIFASR2 : Introduc=on aux réseaux et au web 15 Balises de formatage de texte (2) ! Styles logiques qui peuvent dépendre du navigateur u=lisé et de sa conﬁgura=on ! <STRONG> : gras ! <EM> : meEre un texte en valeur (italique) ! <DFN> : déﬁni=on ! <CITE> : cita=on bibliographique ! <CODE> : programme informa=que ! <BLOCKQUOTE> : tabula=on+espaces paragraphes ! ... Olivier Glück L1 Math-info UCBL - LIFASR2 : Introduc=on aux réseaux et au web 16 Les caractères spéciaux ! Pour être sûr qu'ils soient correctement interprétés par tous les navigateurs : ! caractères accentués : &<leRre><accent>; accent : acute (aigu), grave (grave), circ (^), uml (¨) exemples : é (é), Î (Î), ü (ü) ! autres caractères : ñ (ñ), ç (ç), ß (ß), © (©) æ (æ), & (&), (espace), " (") > (>), < (<) Olivier Glück L1 Math-info UCBL - LIFASR2 : Introduc=on aux réseaux et au web 17 Balises <UL> <OL> <LI> : les listes ! Non numérotées <UL> : Unnumbered List <LI>…</LI> : List Item </UL> ! aEribut type="square/circle/disc" pour <UL> ou <LI> ! Numérotées <OL> <LI>…</LI> </OL> ! aEribut type="1/A/a/I/i" pour <OL> ! aEribut start="valeur" pour <OL> (valeur de départ) ! aEribut value="valeur" pour <LI> (réini=alise le séquencement à la nouvelle valeur) Olivier Glück L1 Math-info UCBL - LIFASR2 : Introduc=on aux réseaux et au web 18 Balises pour les liens hyper-texte (1) <HTML><HEAD> <TITLE>=tre-fenetre</TITLE> </HEAD><BODY> <P>texte avec un <A href="cible.html"> lien hyper-texte</A>.</P> </BODY></HTML> Olivier Glück L1 Math-info UCBL - LIFASR2 : Introduc=on aux réseaux et au web 19 ! Déﬁni=on d’un hyperlien <A href="nom">texte</A> ! href="nom" Le nom du document à lier peut être : ! une URL standard : http://www.univ-lyon1.fr ! une uploads/Ingenierie_Lourd/ 0650-pages-html-et-feuilles-de-styles-css.pdf