HTML - Free

Transcription

HTML - Free

HTML
Jean-François Ramiara
FAD Réseau Pyramide
17/01/2012
Toulouse
1
HTML
Sommaire
 Introduction
 Généralités
 Les balises
 Exercices
 Démonstration
2
HTML
Introduction
3
HTML
Introduction
La page web
 Un site web est constitué de X pages web
 Une page web = 1 fichier .htm
 Une page web est construite avec des balises HTML
 Une page web est constituée de plusieurs éléments :
 paragraphe de texte
 images
 liens
 boutons
 ...
HTML = Hypertext Markup Language (Langage de balisage d'hypertexte)
4
HTML
Introduction
Fond et forme
 HTML = le fond de la page
 CSS = la forme de la page
HTML (avec CSS par défaut)
HTML + CSS
5
HTML
Introduction
Un fond
plusieurs formes
 En séparant fond et forme, on peut modifier la présentation d'un
page web (presque) à l'infini
HTML
CSS-1
CSS-2
http://www.csszengarden.com/tr/francais/
CSS-3
6
HTML
Introduction
HTML : langage de description
 Pour représenter le fond, on utilise un langage descriptif fondé
sur un jeu de « balises »
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Hello</title>
</head>
<body>
<p>Hello world</p>
<p>Aller à <a href="www.google.fr" >Google</a></p>
</body>
</html>
7
HTML
Introduction
Les versions HTML
 1993 : HTML 1.0
 Première version
 Insertion d'images
 Formulaire
 1995 : HTML 2.0
 Tableaux
 1997 : HTML 4.0
 Feuilles de style (CSS)
 Cadres (frames)
 2000 : XHTML 1
 Basé sur XML et non SGML
 2008 : HTML 5 (working draft)
 1997 : HTML 3.2
 Lecteur son/video
 Standardisation des tableaux
 Drag and Drop
 Eléments de présentation
 Dessin 2D
 ...
8
HTML
Introduction
Le W3C
 Le World Wide Web Consortium :
 Organisme chargé de définir les standards utilisés sur le Web
 Définit des « recommandations » plutôt que des normes
 Chargé des normes HTML, XHTML, CSS, PNG, SVG...
 Souvent critiqué par la communauté des développeurs Web
pour son caractère fermé
 On peut tester sa page avec le « validator » du W3C
 http://validator.w3.org/
9
HTML
Généralités
10
HTML
Généralités
2 types de balises
 Les balises en paires
Balise
fermante
Balise
ouvrante
Bonjour le monde
<p>Bonjour le monde</p>
Rendu sur la page
HTML
Balise
auto fermante
 Les balises auto-fermantes
Bonjour
le monde
<p>bonjour<br />le monde</p>
Rendu sur la page
HTML
11
HTML
Généralités
La balise
 Un balise contient :
 son nom
 0..n attribut(s)
 0..n valeur(s)
Attribut 1
Valeur 1
<img src="mr_bean.jpg" alt="Mr Bean" />
Nom
<br />
Rendu sur la page
Attribut 2
Valeur 2
balise SANS attribut
HTML
12
HTML
Généralités
Espaces et sauts de ligne
 En HTML, on ne tient pas compte :
 des espaces
 des sauts de ligne
<body>
<p>Je
suis
à Pyramide</p>
</body>
</html>
Rendu sur la page
HTML
HTML, ce n'est pas du Word !
13
HTML
Généralités
Imbrication des balises
 Les balises peuvent s'imbriquer (selon des règles)
 On les nomme selon le cas :
 balise parent
 balise enfant
<html>
...
<body>
Rendu sur la page
<p>Je suis à <strong>Pyramide</strong></p>
<p>
<a href="http://tempsreel.nouvelobs.com/">Nouvel Obs</a>
</p>
</body>
Les balise NE doivent PAS se chevaucher
</html>
HTML
14
HTML
Généralités
Les principales règles en XHTML
 Balises toujours fermantes
<img src="mr_bean.jpg" />
<p>Bonjour le monde</p>
 Nom des balises et attributs
TOUJOURS en minuscules
OUI
NON
<IMG SRC="mr_bean.jpg" />
 Guillemets pour les valeurs et
pas apostrophes
 " = guillemet
 ' = apostrophe
OUI
NON
<img src='mr_bean.jpg' />
15
HTML
Généralités
HTML entities
 Certains caractères doivent être codés en HTML/XHTML
 < au lieu de <
 > au lieu de >
 & au lieu de &
 …
 la liste complète des HTML entities
 www.w3schools.com/tags/ref_entities.asp
16
HTML
Généralités
La tolérance des navigateurs
 Malgré des règles stricts, les navigateurs :
 interprètent « au mieux » le code HTML
 n'affichent pas d'erreurs
La balise <p> n'est pas fermée
<html>
<body>
<p>Je suis à <strong>Pyramide</strong>
<p>
<a href="http://tempsreel.nouvelobs.com/">Nouvel Obs</a>
</p>
</html>
Rendu sur la page
HTML
La balise <body> n'est pas fermée
17
HTML
Les balises
18
HTML
Les balises
La page XHTML minimale
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ma première page Web</title>
</head>
<body>
<p>hello Pyramide</p>
</body>
</html>
 Ce qui est dans la balise <head> n'est jamais visible dans la page
 La balise <title> est TRES importante !
 Attention à l'UTF-8
19
HTML
Les balises
Les balises principales
 <!DOCTYPE>
 La seule balise qui n'est pas du XHTML
 Importante pour définir le type de document XML utilisé
<head>
</head>
<body>
<p> hello Pyramide</p>
</body>
</html>
20
HTML
Les balises
Les balises principales (suite)
 <html></html>
 Tout le code sera entre ces deux balises
 Xmlns : description des balises XHTML
 xml:lang : langue utilisée
<head>
</head>
<body>
</body>
</html>
21
HTML
Les balises
 <head></head>
 L'entête de la page XHTML
 Aucun contenu des balises n'est affiché dans le navigateur
 Balise <title></title> très importante
 Balise <meta> pour définir le charset
 On définit le fichier CSS ici
<head>
</head>
<body>
</body>
</html>
22
HTML
Les balises
<body></body>
 Corps de la page
 Le contenu des balises est affiché
 Les autres balises s'imbriquent dans <body>
<head>
</head>
<body>
</body>
</html>
23
HTML
Les balises
Paragraphe et retour à la ligne
 <p></p>
 Paragraph
 Définit un paragraphe avec saut de ligne et retour à gauche
 <br />
 Break
 Définit un retour à la ligne
<p>bonjour<br />le monde</p>
24
HTML
Les balises
Titres
 <h1></h1> … <h6></h6>
 Heading
 Définit un niveau de titre
 Ne pas confondre avec <title> qui définit le titre de la page
 Important pour le référencement
<h1>Le monde</h1>
<h2>La France</h2>
<h3>Midi-Pyrénées</h3>
<h4>La Haute-Garonne</h4>
<h3>La Corse</h3>
<h4>Corse du Sud</h4>
25
HTML
Les balises
Mises en valeur
 <strong></strong>
 Renforcement d'un mot
 Les navigateurs l'interprètent généralement par une mise en gras
 <em></em>
 emphasized text
 Mise en évidence d'un mot
 Les navigateurs l'interprètent généralement par une mise en italique
<p>texte <strong>renforcé</strong></p>
<p>texte en <em>évidence</em></p>
26
HTML
Les balises
Citations
 <q></q>
 Quotation mark
 Citation courte
 Des guillemets sont placés en début et fin de phrase
 Doit toujours être entouré par <p></p>
<p><q>Agissez comme s'il était impossible d'échouer.</q></p>
27
HTML
Les balises
Citations (suite)
 <blockquote></blockquote>
 Citation longue
 Des sauts sont insérés avant et après le texte
 Le texte est décalé vers la droite
 Doit contenir <p></p>
<blockquote><p>On ne devrait jamais tourner le dos à un danger
pour tenter de le fuir. Si vous le faites, vous le multiplierez
par deux. Mais si vous l'affrontez rapidement et sans vous
dérober, vous le réduirez de moitié. </p></blockquote>
28
HTML
Les balises
Les liens
 <a></a>
 Anchor
 Lien hypertexte
 Lien vers une autre page du même site
<a href="contact.htm">Page contact</a>
 Lien vers un autre site
<a href="http://www.google.fr">Lien vers Google</a>
« http:// » est important !
29
HTML
Les balises
Les liens (suite)
 Lien vers un autre endroit de la même page
<body id="top">
<a href="#top">Remonter en haut de page</a>
 Lien vers une adresse email
 Le navigateur ouvre le client mail par défaut
<a href="mailto:[email protected]?subject=important">email</a>
30
HTML
Les balises
Les liens (suite)
 A noter :
 En XHTML strict, l'attribut target est déprécié
 La tradition veut qu'un lien hypertexte soit souligné
 Par défaut, un lien non visité est bleu et un lien visité est violet
 Attention aux liens morts !
Lien non visité
Lien visité
La coloration se fait par analyse
de l'historique du navigateur
31
HTML
Les balises
Les images
 <img />
 Image
 Insertion d'une image
 Balise auto-fermante
 Les attributs src et alt sont obligatoires
<img src="img/avion.jpg" alt="avion" width="32" height="32"/>
 Image cliquable
<a href="http://www.google.com">
<img src="google.jpg" alt="logo Google" width="32" height="32" />
</a>
32
HTML
Les balises
Les formats d'image
 * .jpg
 Image JPEG
 adapté aux photos (plusieurs millions de couleurs)
 Pas de couleur de transparence
 *.gif
 256 couleurs maxi.
 adapté aux logos (nombre de couleurs limité)
 une couleur de transparence
 Seul format permettant des animations
JPEG = Joint Photographic Expert Group
GIF = Graphics Interchange Format
PNG = Portable Network Graphics
33
HTML
Les balises
Les formats d'image (suite)
 *.png
 PNG 8 bits
 256 couleurs maxi
 Format libre
 PNG 24 bits
 16 millions de couleurs
 256 niveaux de transparence
 JPG, GIF et PNG sont les seuls formats adaptés pour le web !
JPEG = Joint Photographic Expert Group
GIF = Graphics Interchange Format
PNG = Portable Network Graphics
34
HTML
Les balises
Les listes
 <ul></ul>
 Unordered List
 Définit une liste non-ordonnée
 <ol></ol>
 Ordered List
 Définit une liste ordonnée
 La ligne est précédée d'un nombre
 <li></li>
 Définit une ligne de la liste
35
HTML
Les balises
Les listes (suite)
<ul>
<li>café</li>
<li>thé</li>
<li>lait</li>
</ul>
<ol>
<li>Se réveiller doucement</li>
<li>Déjeuner tranquillement</li>
<li>Aller dare dare à Pyramide</li>
</ol>
HTML
Rendu sur la page
36
HTML
Les balises
Les commentaires
 
 jamais visibles dans une page web
 toujours visibles dans le « source » de la page
 permet de se retrouver plus rapidement dans le code

Rendu sur la page
HTML
37
HTML
Les balises
Quelques sites
 www.w3schools.com/html/
 giminik.developpez.com/xhtml/
 fr.selfhtml.org/
 www.w3schools.com
 www.alsacreations.com/
 openweb.eu.org/
38
HTML
Exercices
39
HTML
Exercices
Prise en main
 Notepad++: éditeur de texte
 Firefox : navigateur
 Firebug : extension pour le développement web
40
HTML
Exercices
Exercices
 html1 : mise en forme d'un texte
 html2 : menu et liaisons entre page
41
HTML
Démonstration
42
HTML
Démonstration
Le validateur W3C
 Valider son code HTML avec l'outil du W3C
 http://validator.w3.org/
43
HTML
Démonstration
Firefox
 Voir le source d'une page html
 Clic-droit sur la page
 Code source de la page
Pour voir le code HTML
La fenêtre du code HTML
44
HTML
Démonstration
Firefox (suite)
 Voir le source d''une sélection
 Sélectionnez la zone
 Clic-droit
 Code source de la sélection
La fenêtre du code HTML
de la sélection
45
HTML
Démonstration
Firebug
 Télécharger Firebug
 Extension à télécharger sur :
https://addons.mozilla.org/fr/firefox/addon/firebug/
Cliquez en bas à droite
« l'insecte »
Cliquez ici
pour le télécharger
et l'installer
46
HTML
Démonstration
Firebug (suite)
 Vérifier que Firebug est installé
 Outils/modules complémentaires
 Onglet « Extensions »
Firebug est installé
47
HTML
Démonstration
Firebug (suite)
 Lancer Firebug
Cliquez en bas à droite du navigateur
Cliquez en bas à droite
« l'insecte »
48
HTML
Démonstration
Firebug (suite)
 Fenêtres de Firebug
Page Web
HTML
CSS
49
HTML
Démonstration
Firebug (suite)
 Inspecter un élément
2
Clic-droit
1
Se placer
sur l'élément
3
Inspecter
4
Le code HTML est
mis en valeur (gris)
50
HTML
Démonstration
Firebug (suite)
 Espace occupé par un élément
1
Se placer
sur l'élément
2
La place occupée
par l'élément est colorée
3
Le style CSS
correspondant
est affiché
51
HTML
Démonstration
W3school
 Rechercher une balise
2
Taper le nom de la balise
dans le moteur de recherche
1
Aller sur le site
3
Sélectionner
le résultat
52
HTML
Démonstration
W3school (suite)
 Afficher la page de la balise
Pour essayer
du code
53
HTML
Démonstration
W3school (suite)
 Essayer le code HTML
2
Cliquer
3
Voir le résultat !
1
Taper le code
54
HTML
Démonstration
Quelques sites
 http://giminik.developpez.com/xhtml/
 http://fr.selfhtml.org/
 http://www.w3schools.com
 http://www.alsacreations.com/
 http://openweb.eu.org/
55
HTML
56

HTML - Free

Transcription

Documents pareils

Structure de base d`un document XHTML 1.0 Strict (Balises de

AVANTAGES BALISES 406 MHz

BALISES DE DETRESSE KANNAD 406 AF

HTML2PDF v4.03

XML (eXtensivble Markup Language)

DUT SRC - Webchronique

Les entités html

structure d`une page html/css

saturn - Piscines du Monde