1 / 38

Concepts et outils pour une initiation au web

Concepts et outils pour une initiation au web. Multimédia niveau 1. C. Pélissier - IUT Montpellier, site de Béziers. Contenu du cours (6 semaines). Composition de documents XHTML. Editeurs de texte : bloc notes. WYSIWYG (What You See Is What You Get) : MS Front Page, Adobe Golive,

ruby
Download Presentation

Concepts et outils pour une initiation au web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Concepts et outils pour une initiation au web Multimédia niveau 1 C. Pélissier - IUT Montpellier, site de Béziers Pélissier C.

  2. Contenu du cours (6 semaines) Composition de documents XHTML Editeurs de texte : bloc notes WYSIWYG (What You See Is What You Get) : MS Front Page, Adobe Golive, Nvu (gratuit), Hotdog Pro, Easy Web Editor, Média Dreamweaver, Mozilla Composer Pélissier C.

  3. Définitions • HTML(HyperText Markup Language) • XHTML (eXtensible HyperText Markup Language) • - Langages de marquage (du texte brut en texte stylisé) • Permet d’écrire les documents sur le World Wide Web • Balises : titres, paragraphes, images, formulaires, liens, etc… • Convention universelle du World Wide Web Consortium (ou W3C) • Regroupement de sociétés, Tim Berners-Lee (inventeur du web) Pélissier C.

  4. Principes XHTML • Chevrons : > et < • Balises (conteneurs) : une ouvrante <i> et une fermante </i> (contre balise) • Conteneurs vides. Ex : img pour les images • Syntaxe : <i> Bonjour </i> <b> Bonjour </b> <u> Bonjour </u> ou <ins> <b> <i> Bonjour </b> </i> Pélissier C.

  5. Principes de base <html> <head> on écrit les propriétés du document <title> titre du document </title> <meta name="keywords" content="association"> <meta name="description" content="Voiture de course"> </head> <body> on écrit le contenu de la page <p align= « center »>Bienvenue sur notre site </p> <h1> Titre de niveau 1 </h1> </body> </html> fichier texte .html .htm de window 3.1 Pélissier C.

  6. HTML  XHML  XML XHTML pour les faiblesses du HTML : - Head et Body est obligatoire - Les balises, éléments et attribut sont toutes en minuscules - Il faut toujours fermer une balise ouverte - Ajouter une barre oblique avant le chevron fermant un élément vide - Les valeurs d’attribut sont encadrées par des guillemets Contrôle des erreurs  : www.w3.org/Poeple/Raggett/tidy Pélissier C.

  7. Premières balises 1) <p> Bonjour </p> 2) <b>, <i>, <u> 3) <hx> (avec x=1 à 6) 4) <font> 4) <center> 5) <br> : break 6) <title> : dans la barre de navigation 7) < !--Un commentaire --> 8) <hr> (Horizontal Rule, filet) TD 1 Pélissier C.

  8. Caractères spéciaux Espace <p> Recette &nbsp &nbsp Temps de préparation </p> 2) é : &#233 <p> Temps de pr&#233paration </p> 3) è : &#232 4) à : &#224 5) ç : &#231 Pélissier C.

  9. Propriétés ou Attributs (1/2) <hr> - <hr size =10> : valeur de 1 à 10 - <hr width = « 50% »> : % de la largueur - <hr width = « 50% » align = rightIleftIcenter> - <p align=«valeur»> <font> - <font size ="x"> valeur de 1 à 7 - <font color ="grey"> - <font face ="arial"> « arial » ou « sérif » ou « sans sérif » - deux polices : « arial, times » Pélissier C.

  10. Propriétés ou Attributs (2/2) Couleur : <font color= « green »> <body> bgcolor =«couleur» text =«couleur» description : - par son nom - par sa valeur, «#rrvvbb», de 00 à FF TD 1 fin Pélissier C.

  11. Déclaration html <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > Pélissier C.

  12. Balises de texte • <strike> ou <del> : Barrer le texte • <sup> : Mettre en exposant • <sub> : Mettre en indice • Mis en retrait : <h1> Beethoven </h1> • <ul> Né en 1970, à Bonn </ul> • <blockquote> citation </blockquote> • 5) <address> italique en bas à gauche </address> 6) <pre> : preformatted text <pre >  P r a t i q u e comédie radio Michel 4F TF1 Télé Marc 3F </pre> Aligner les données au moyen d’espace et non de tabulations. Pélissier C.

  13. Balises d’images (1/2) <body> Attributs : - background=« tapisserie.jpg » - text=«red» 2) <img src="calv01.gif">: insertion d’une image  Chemin : « animaux/guepard.jpg » Attributs : - taille : height, width=45 - border=20 - alt= « photo.jpg»> 3) <img src="calv01.gif" align=left> : habiller le texte 4) <br clear=left> : cesser l’habillage d’une image par un texte  5) Aligner un texte par rapport à une image <p> <img src=«tigre.jpg» align=topImiddleIbottom> Texte image </p> Pélissier C.

  14. Balises d’images (2/2) 6) Mettre un texte entre deux images <h1> Aventure plein air <h1> <img src = « tigre.jpg » align=left> <img src = « lion.jpg » align=righ> <p> Texte mis entre les deux images</p> <h2> Par h2 le texte n’est plus entre les deux images</h2> 7) Distance entre l'image et le texte à côté <img src = « tigre.jpg » align=left hspace=30> <img src= « tigre.jpg » align=left vspace=30> Valeurs sont exprimées en pixels 8) Lien sur image : <a href =«grande»> <img src=«petite»> </a> Pélissier C.

  15. Formats des images TD 2 Pélissier C.

  16. Les liens (1/2) 1) <a href =«  http://zoo.fr »> <img src="lion.gif »/> </a> 2) <p> <a href =«  http://zoo.fr »> en savoir plus </a> </p> 3) <p> <a href =« mailto:chrysta.pelissier@voilà.fr »> webmaster</p> 4) <p> <a href = « grande.jpg »> <img src= « petite.jpg »> </a> petite image deviendra grande si tu cliques dessus </p> 5)<a href = « mailto :chrysta.pelissier@atilf.fr »>contact </a> 6)<a href = « fichier.pdf »> Clique là pour avoir le fichier </a> 7)<a href = « ski.html » target= « _blank »>Skier</a> 8)<body link = « #00FFFF »>, alink, vlink Pélissier C.

  17. Les ancres (2/2) Ancre : 1. <p> Etape 1 : Pourquoi réaliser cette recette </br> <a href="#etape2"> Etape 2 : La préparation</a> </p> 2. <p> Etape 1 : Pourquoi réaliser cette recette </p> <p> <a name="etape2"> </a> Etape 2 : La préparation </br> 1. la première opération est de beurrer </p> Pélissier C.

  18. Les listes à puces <UL> </UL> (Unordered List) <LI> </LI> (List Item) Structure d’une liste de 5 éléments : <UL><LI> </LI> <LI> </LI> <LI> </LI> <LI> </LI> <LI> </LI> </UL> Attribut type avec les valeurs : disk (par défaut), circle ou square Pélissier C.

  19. Listes ordonnées <OL> </OL> (Ordered List) <LI> </LI> (List Item) <OL><LI> </LI> <LI> </LI> <LI> </LI> </OL> Attribut de OL : - type : A (lettres majuscules), a (lettres minuscules), i (petits chiffres romains), I (grands chiffres romains) 1 par défaut - start : à partir numéro on commence TD 3 Pélissier C.

  20. Listes de définitions Dictionnaire, index, glossaire… <DL> (Definition List) <DT> (Definition Term) <DD> (Definition Data) Pélissier C.

  21. Définitions <dl> (Definition List) <dt> (Definition Term) <dd> (Definition Data) <dl><dt><dd> </dd>    <dd> </dd></dt><dt><dd> </dd>      <dd> </dd></dt> </dl> Pélissier C.

  22. Tableaux <table> <tr> (Table Row) ligne <th> (Table Head) en-tête <td> (Table Data) données <caption> <table><tr><th> </th>    <th> </th></tr><tr><td> </td>      <td> </td></tr> </table> Pélissier C.

  23. Attributs de tableaux 1) border=« 0 »  2) image arrière plan : background= « fete.jpg » 3) couleur de tableau : bgcolor= « #FF0000 » 4) alignement horizontal : align=« left|center|rigth » 5) aligner verticalement : valign=« top|middle|bottom » 6) largeur de cellule : width=33%, hauteur : height=300 7) rowspan : définit la hauteur des lignes (fusion de rangées) 8) colspan : définit la largeur des colonnes (fusion de colonnes) 9) cellspacing : espace entre chaque cellule 10) cellpadding : espace entre bord cellule et contenu TD 4 Pélissier C.

  24. Les frames • Différencier : • Page de frame : définir les différentes zones de l'écran • Pages de contenu : afficher à l'intérieur de la coquille vide. <frameset> : frames <frame> : contenu <html> <head> <title></title> </head> <frameset><frame> <frame>   </frameset></html> Pélissier C.

  25. Exemple de frame <html> <head> <title>Titre ds la barre de navigation</title> </head> <frameset cols="30%,70%"> <frame src="autrepage.html" name="frame1"> <frame src="index.html" name="frame2"> </frameset> </html> Pélissier C.

  26. Attributs de frames <frameset rows="x%,y%,z%"> <frameset rows="50,*"> <frameset cols="x%,y%,*"> Barre de défilement : scrolling=« noIyes » Espace bord de la frame et le contenu : marginwidth = 55 marginheight = 55 Pélissier C.

  27. Fenêtres flottantes <html> <head> <title> Fenêtre flottante </title> </head> <body onload="javascript:window.open('tableau2.htm','tableau2', ‘height=250', ‘width=250')"> <h1> Vins et raisins </h1> <p> Un guide du vin français </p> </body> </html> tableau2.htm : page qui va s’ouvrir Pélissier C.

  28. Formulaires <html> <head> c’est un formulaire </head> <body> <p> salut </p> <form action="mailto:pelissier@voilà.fr" method="post" entype="text/plain"> <p align="left">Veuillez entrer votre mot de passe : <input type="password" name="pass" size="9"> <br> Votre date de naissance : <input type="date" name="Naissance" size="8" maxlenght="8" value="jj/mm/aa"> <br> </form> <p> au revoir et a bientot </p> Pélissier C.

  29. Formulaires <html> <head> c’est un formulaire </head> <body> <p> salut </p> <form action="mailto:pelissier@voilà.fr" method="post" entype="text/plain"> <p align="left">Veuillez entrer votre mot de passe : <input type="password" name="pass" size="9"> <br> Votre date de naissance : <input type="date" name="Naissance" size="8" maxlenght="8" value="jj/mm/aa"> <br> </form> <p> au revoir et a bientot </p> salut Veuillez entrer votre mot de passe : Votre date de naissance : au revoir et a bientot jj/mm/aa Pélissier C.

  30. Formulaires <textarea name="Comment" cols="30" rows="10"> Entrez ici votre commentaire </textarea > <p align="left">Veuillez indiquer votre état civil : </br><input type="Radio" name="EC" value="Monsieur" checked>Monsieur </br><input type="Radio" name="EC" value="Madame">Madame </br><input type="Radio" name="EC" value="Mademoiselle">Mademoiselle Veuillez indiquer votre état civil : Monsieur  Madame Mademoiselle TD 5 Pélissier C.

  31. Zones réactives <img src="guitariste.bmp" width=1000 height=1200 usemap="#toto"/> <map name="toto"> <area shape="circle" border="10" coords="500,100,100" href="liste.html"/> Fichier2.html Fichier.html Pélissier C.

  32. Feuilles de style CSS XHTML est un langage impur Différentes présentations Différentes documents Un document Une présentation Contenu Feuille de style … … Pélissier C. …

  33. Définition CSS • Cascading Style Sheets : feuille de style en cascade = un ensemble de règles • Initialement conçues pour les documents HTML • Peuvent être utilisées avec des documents XML • CSS 1  CSS 2 (media)  CSS 3 • La norme s’adresse • Aux utilisateurs • Aux développeurs Pélissier C.

  34. Feuilles de style CSS <style> dans le <head> <head> <title>CDthèque </title> <style type="text/css"> h4 {background-color:#FFCCCC;} h2 {font-family:Verdana, Arial, sans-serif;} body {font-family:sans-serif;font-size:10pt;} </style> </head> Pélissier C.

  35. Définition et structure CSS Syntaxe : Balise d’application {propriété : valeur; propriété : valeur; …} Sélecteur {ensemble de bloc de déclaration} Sélecteur { propriété : valeur; /* une déclaration */ propriété : valeur; /* une 2ième déclaration */ } Caractères blancs (espace, tabulation ou retour à la ligne…) n’ont pas d’importance. Exemple : h4{background-color:#FFCCCC;} h2{font-family:Verdana, Arial, sans-serif; color:red;} body{font-family:sans-serif; font-size:10pt;} Couleur bleu à la balise p et h1 : p, h1 {color:blue;} Espace avant ou après la , n’a pas d’importance Pélissier C.

  36. XHTML et CSS interne <head> <title>CDthèque </title> <style type="text/css"> h4 {background-color:#FFCCCC;} h2 {font-family:Verdana, Arial, sans-serif;} body {font-family:sans-serif;font-size:10pt;} </style> </head> Obligé de copier les règles d’un document à un autre Inconvénient ? Pélissier C.

  37. Propriétés et valeurs en CSS font-family : Times, sans-serif ; font-size : 14pt font-style : italic, oblique font-weight : bold, bolder (plus gras), lighter (moins gras), normal text-décoration :blink (texte clignotant), overline (texte surligné), underligne (texte souligné) letter-spacing :-0.1em (espace entre les lettres) word-spacing :+0.2em (espace entre les mots) margin-left : 2% (+ -, + - avec %) margin-right : 2% (+ -,+ - avec %) margin-top : 2% (+ -,+ - avec %) (marge du haut) margin-bottom : 2% (+ -, + - avec %) (marge du bas) line-height (interligne) : 2.0 em color :red (couleur rouge) body {background-color :black body {background-image : url(bg-image.gif) body {color : black a :link {color : blue a :active {color :red a :visited {color :green Pélissier C.

  38. XHTML et CSS externe <head> <title>CDthèque </title> <link rel=«stylesheet» href=«style1.css» type=«text/css»/> </head> Fichier css : style1.css body {font-family:sans-serif;font-size:10pt;} TD 6 Pélissier C.

More Related