TD2 HTML Et CSS 1

Publication sur Internet : HTML et CSS
HTML : Hypertext Markup Language : formatage du texte
CSS : Cascading Style Sheets : présentation graphique harmonieuse
HTML
HTML 4.01, XHTML 1.1 et HTML 5
Aujourd’hui, 2 langages cohabitent:
HTML 4.01 : permissivité mais manque de portabilité
XHTML 1.1 (syntaxe XML) : meilleures portabilité mais très rigide :
<!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">
</html>
Demain : HTML5 :
<!DOCTYPE HTML>
<html>
</html>
Le HTML 5 est déjà supporté par la plupart des navigateurs.
Le type de fichier HTML et les éditeurs
Un document HTML est un simple fichier texte (ACSII) qui porte l’extension .html au lieu de .txt
Il peut être édité avec le bloc note, un éditeur simple comme notepad++ (configuration :
langage=>H=>HTML) ou avec des éditeurs avancé (Dreamweaver, CoffeeCup HTML editor…).
Attention : les espaces sont à proscrire en HTML, tant le nom des pages que des styles, des
attributs, des étiquettes, des images…
Le concept de base : les balises
Le HTML est un langage (Hypertext Markup Language) dans lequel la syntaxe joue un rôle primordial,
que ce soit pour la portabilité (navigateur pour malvoyants), le référencement, l’interopérabilité, la
compréhension, …
Le HTML est donc un langage descriptif basé sur des balises ouvrantes et fermantes indiquant la
façon de traiter l’information :
<html></html>, <head></head>, <title></title>, <body></body>, <a></a>, <strong></strong>…
On note que les balises s’écrivent en minuscule.
Attention : il faut toujours « fermer » les balises !
Exception : <br />, <hr />, <img />, <input />… : on note le « / » à la fin
Les balises portent des attributs :
<citation auteur="Neil Armstrong" date="21/07/1969">C'est un petit pas pour l'homme, mais un

bond de géant pour l'humanité.</citation>
Liste des balises : http://www.w3schools.com/tags/
Imbrication des balises

Il faut toujours fermer une balise enfant avant la balise parent :
<parent> <enfant> </enfant> </parent> (et non pas <parent> <enfant> </parent></enfant>)
Structure d’un document HTML
<!DOCTYPE HTML>
<html>
<head>
<title>Mon titre</title>
[balises Meta et autres]
</head>
<body>
Mon contenu
</body>
</html>
Les balises de formatage de texte
Liste : http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-
html5-et-css3/organiser-son-texte
Principales :
<strong> [texte] </strong> : texte en gras
<em> [texte] </em> : italique (texte mis en valeur : embedded)
<h1> [texte] </h1> : titre de niveau 1
<h2> [texte] </h2>, … <h6> [texte] </h6> : titres de niveau 2 à 6
<br /> : retour à la ligne
<hr /> : ligne de séparation horizontale
<p> [texte] </p> : paragraphe
Les liens hypertexte
<a> [texte] </a>
Attribut href
Nom de domaine externe au site

<a href="http://www.google.fr">lien vers Google</a>
Page externe au site à l’intérieur d’un autre site

<a href="http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-
html5-et-css3">lien vers le tutoriel sur Open Classrooms</a>
Page interne au site

<a href="mapage.html">lien vers mapage.html</a>
Attribut name : les ancres

<a name="etiquette">Je pose une ancre</a>
Ou encore : <a name="etiquette"> </a> (ancre vide mais donne tout de même un point d’ancrage)
Puis on fait le lien :
<a href="#etiquette">lien vers mon ancre à l’intérieur de la page</a>
<a href="mapage.html#etiquette">lien vers mon ancre depuis une autre page du même site</a>
<a href="http://www.monsite.com/mapage.html#etiquette">lien vers mon ancre depuis un autre

site</a>
La cible : target
_blank : nouvelle page / nouvel onglet
_top : frame de plus haut niveau
_parent : frame parent
_self : frame active
<a href="mapage.html " target="_blank">lien vers mapage.html dans une nouvelle fenêtre</a>
Mailto : les emails

<a href="mailto:contact@monsite.com">envoie un mail à contact@monssite.com </a>
Subject, cc et bcc :
<a href="mailto:contact@monsite.com"?Subject=test>envoie un mail à contact@monssite.com avec
test en sujet</a>
<a
href="mailto:contact@monssite.com"?cc=contact@autre.com&bcc=contact@encoreautre.com&Sub
ject=test>envoie un mail à contact@monssite.com avec test en sujet et copie à contact@autre.com
et copie cachée à contact@encoreautre.com </a>
On mixe le tout !
L’attribut « name » n’est pas nécessaire pour un lien, mais il apporte un plus syntaxique !
<a href="mapage.html " name="mon_lien" target="_blank">un lien nommé en vaut 2 !</a>
Les images
<img />
Attributs principaux HTML 5:

Src="URL de l’image avec extension (type http://www.prepolino.ch/sprache/trennen/bilder/test.gif)
alt="texte descriptif"
height="nombre de pixels de haut"
width="nombre de pixels de large"
Anciens attributs supplémentaires (remplacés par CSS dans HTML 5 mais fonctionnent
encore avec HTML 4 et XHTML : sert pour les emailings) :
align="top| bottom|middle| left|right"
border="nombre de pixels de bordure"
hspace="nombre de pixels de marge horizontale"
vspace="nombre de pixels de marge verticale"

Les listes
Les listes sont très importantes en HTML et permettent par exemple la mise en page des menus
(besoin de CSS)
Les listes sans ordres :

<ul>
<li>1er élément</li>
<li>2ème élément</li>
</ul>
Les listes avec ordres :

<ol>
</ol>
Les listes imbriquées :

<ul>
<li>
<ul>
<li>1er sous-élément</li>
<li>2ème sous-élément</li>
</ul>
</li>
</ul>
Les tableaux
Tableau : <table></table>
Ligne : <tr></tr>
Cellule : <td></td>
Syntaxe globale :
<table>
<tr>
<td>Carmen</td>
<td>33 ans</td>
<td>Espagne</td>
</tr>
<tr>
<td>Michelle</td>
<td>26 ans</td>
<td>États-Unis</td>
</tr>
</table>
Attributs principaux HTML 5:

border="1" : bordure
Anciens attributs supplémentaires (remplacés par CSS dans HTML 5 mais fonctionnent
encore avec HTML 4 et XHTML – cf emailings) :
align=" left|right |center" alignement
cellpadding="marge intérieure des cellule en pixels"
cellspacing="espacement des cellules en pixels"
width="largeur en pixel ou en pourcentage"
bgcolor= "#ref couleur hexadécimale"

Les fusions de cellules
colspan="…" : fusion de 2 cellules horizontalement
rowspan ="…" : fusion de 2 cellules verticalement
Plus loin avec les tableaux

<th></th> : idem <td></td> mais pour les cellules d’en-tête
<thead></thead>, <tfooter></tfooter>, <tbody></tbody> : définit les zones en-tête, pied et contenu

du tableau
Références détaillées :
http://www.siteduzero.com/tutoriel-3-13584-les-tableaux.html
Références et tutoriels
Site officiel :
http://www.whatwg.org/
Tutoriels :
www.w3schools.com/
http://fr.html.net/tutorials/html/
http://www.salemioche.net/tutorial-html.php
http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-html5-et-
css3
http://www.w3.org/standards/webdesign/htmlcss
http://slaout.linux62.org/html_css/
Références : http://www.htmldog.com/

TD2 HTML Et CSS 1

Transféré par

Informations du document

Titre original

Copyright

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

TD2 HTML Et CSS 1

Titre original :

Transféré par

Droits d'auteur :

Publication sur Internet : HTML et CSS

HTML : Hypertext Markup Language : formatage du texte

CSS : Cascading Style Sheets : présentation graphique harmonieuse

HTML 4.01, XHTML 1.1 et HTML 5

Aujourd’hui, 2 langages cohabitent:

HTML 4.01 : permissivité mais manque de portabilité

XHTML 1.1 (syntaxe XML) : meilleures portabilité mais très rigide :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

Le HTML 5 est déjà supporté par la plupart des navigateurs.

Le type de fichier HTML et les éditeurs

<html></html>, <head></head>, <title></title>, <body></body>, <a></a>, <strong></strong>…

On note que les balises s’écrivent en minuscule.

Attention : il faut toujours « fermer » les balises !

Les balises portent des attributs :

<citation auteur="Neil Armstrong" date="21/07/1969">C'est un petit pas pour l'homme, mais un

Liste des balises : http://www.w3schools.com/tags/

Imbrication des balises

Structure d’un document HTML

[balises Meta et autres]

<strong> [texte] </strong> : texte en gras

<em> [texte] </em> : italique (texte mis en valeur : embedded)

<h1> [texte] </h1> : titre de niveau 1

<h2> [texte] </h2>, … <h6> [texte] </h6> : titres de niveau 2 à 6

<br /> : retour à la ligne

<hr /> : ligne de séparation horizontale

<p> [texte] </p> : paragraphe

Les liens hypertexte

<a> [texte] </a>

Nom de domaine externe au site

Page externe au site à l’intérieur d’un autre site

Page interne au site

Attribut name : les ancres

Puis on fait le lien :

<a href="#etiquette">lien vers mon ancre à l’intérieur de la page</a>

<a href="http://www.monsite.com/mapage.html#etiquette">lien vers mon ancre depuis un autre

_top : frame de plus haut niveau

_parent : frame parent

_self : frame active

Mailto : les emails

<a href="mapage.html " name="mon_lien" target="_blank">un lien nommé en vaut 2 !</a>

Attributs principaux HTML 5:

height="nombre de pixels de haut"

width="nombre de pixels de large"

border="nombre de pixels de bordure"

hspace="nombre de pixels de marge horizontale"

vspace="nombre de pixels de marge verticale"

Les listes sans ordres :

Les listes avec ordres :

Les listes imbriquées :

Attributs principaux HTML 5:

cellpadding="marge intérieure des cellule en pixels"

cellspacing="espacement des cellules en pixels"

width="largeur en pixel ou en pourcentage"

bgcolor= "#ref couleur hexadécimale"

rowspan ="…" : fusion de 2 cellules verticalement

Plus loin avec les tableaux

<thead></thead>, <tfooter></tfooter>, <tbody></tbody> : définit les zones en-tête, pied et contenu

Centres d'intérêt liés

Vous aimerez peut-être aussi