La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Concepts et outils pour une initiation au web

Présentations similaires


Présentation au sujet: "Concepts et outils pour une initiation au web"— Transcription de la présentation:

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

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

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

11 Déclaration html <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <html xmlns=" 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 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.

16 Les liens (1/2) 1) <a href =«  <img src="lion.gif »/> </a> 2) <p> <a href =«  en savoir plus </a> </p> 3) <p> <a href 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 = </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 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 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 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 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.

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> Inconvénient ? Obligé de copier les règles d’un document à un autre 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.


Télécharger ppt "Concepts et outils pour une initiation au web"

Présentations similaires


Annonces Google