Concepts et outils pour une initiation au web Multimédia niveau 1 Pélissier C. 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, Nvu (gratuit), Hotdog Pro, Easy Web Editor, Média Dreamweaver, Mozilla Composer Pélissier C.
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.
Principes XHTML <b> <i> Bonjour </b> </i> 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.
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.
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.
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.
Caractères spéciaux Espace <p> Recette     Temps de préparation </p> 2) é : é <p> Temps de préparation </p> 3) è : è 4) à : à 5) ç : ç Pélissier C.
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.
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 black= #000000 blanc = #FFFFFF red= #FF0000 maroon : #800000 navy : #000080 purple : #800080 green = #00FF00 blue = #0000FF fuchsia = #FF00FF yellow= #00FFFF silver : C0C0C0 white : #FFFFFF violet : #8000FF TD 1 fin Pélissier C.
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.
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.
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.
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.
Formats des images TD 2 Formats Compression Codage Couleur Transparence Animation Bmp Non 24 bits 16,7 mil. Tiff 32 bits Pour le web Gif Sans perte 8 bits 256 maxi Oui Jpeg Avec perte Png 48 bits Toutes pos. TD 2 Pélissier C.
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.
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.
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.
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.
Listes de définitions Dictionnaire, index, glossaire… <DL> (Definition List) <DT> (Definition Term) <DD> (Definition Data) Pélissier C.
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.
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.
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.
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.
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.
Attributs de frames <frameset rows="x%,y%,z%"> <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.
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.
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.
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.
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.
Zones réactives Fichier2.html Fichier.html <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"/> Pélissier C.
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. …
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.
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.
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.
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> Inconvénient ? Obligé de copier les règles d’un document à un autre Pélissier C.
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.
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.