Introduction au (x)HTML

Transcription

Introduction au (x)HTML
Qu'est qu'un fichier HTML
●
HTML : Hyper Text Markup Language
●
Un fichier HTML contient des balises
–
Indique au navigateur comment afficher la page
●
Extension de fichier : htm ou html
●
Utilisation d'éditeurs simples (emacs, vi, ...)
Exemple
<html>
<head>
<title>Titre de la page</title>
</head>
<body>
Premier exemple de page HTML. <b>Ce
texte est en gras.</b>
</body>
</html>
html
head
title
texte1
link
body
style
h1
p
texte5
texte2
texte3
br
img
ul
li_1
texte4
li_2
Tags HTML et éléments
●
Les tags HTML sont utilisés pour définir des
éléments d'un document HTML
●
On utilise < et > pour définir un tag
●
Toujours par deux ils vont (ex. <b>...</b>)
–
●
Tag de début, contenu de l'élément, tag de fin
En HTML : <B> et <b> représentent les mêmes
tags
–
On utilisera les minuscules pour écrire les tags
Tags HTML de base
●
Titres :
●
Paragraphes : <p>Ceci est un paragraphe</p>
<h1>Ceci est un titre</h1>
<p>Ceci est un autre paragraphe</p>
●
A ne pas faire ->
<p>Un paragraphe
<p>Un autre paragraphe
Tags HTML de base
●
Retour à la ligne :
<br> mais on préfère <br />
<p>Ceci <br/> est un para <br/>graphe avec des
retours à la ligne</p>
●
Commentaires :
●
Ligne horizontale :

<hr> mais on préfère <hr />
Attributs HTML
●
●
Les attributs donnent des informations
supplémentaires sur les éléments HTML
Exemples :
<h1 align="center"> Un titre centré </h1>
<body bgcolor="yellow"> une couleur de fond jaune </body>
●
On utilise les minuscules pour écrire les noms
des attributs et les valeurs sont entre '' ... ''
Tags pour formatter le texte
●
Quelques exemples :
<b>
<big>
<em>
<i>
<small>
<strong>
<sub>
<sup>
<strike>
texte en gras (style physique)
texte en gros
texte en valeur (style logique)
texte en italique (style physique)
texte en petit
texte important (style logique)
texte en indice
texte en exposant
texte clignotant (balise propriétaire)
Citations, quotations
●
Des exemples :
<abbr>
définit une abbréviation
<acronym> définit un acronyme
<address> définit une adresse mél
<blockquote> définit une quotation sur plusieurs lignes
<q>
définit une petite quotation (texte entre '' '')
<cite>
définit une citation
<bdo>
définit le sens d'écriture
<html>
<body>
<p>
If your browser supports bi-directional override (bdo),
the next line will be written from the right to the left (rtl):
</p>
<bdo dir="rtl">
Here is some text
</bdo>
</body>
</html>
If your browser supports bi-directional override (bdo),
the next line will be written from the right to the left
(rtl):
txet emos si ereH
Caractères entités HTML
●
Certains caractères sont réservés pour écrire du
code HTML ( < >, plusieurs espaces )
Caract.
<
>
&
¢
£
¥
€
§
©
®
●
Description
non-breaking space
less than
greater than
ampersand
cent
pound
yen
euro
section
copyright
registered trademark
Nom
 
<
>
&
¢
£
¥
€
§
©
®
n° d'entité
 
<
>
&
¢
£
¥
€
§
©
®
D'autres : http://w3schools.com/tags/ref_entities.asp
Liens HTML
●
Syntaxe : <a href="url">texte pour le lien</a>
●
Exemple : <a href="http://www.w3schools.com/">Visit W3Schools!</a>
●
URL : Uniform ressource Locator
●
–
Chemin permettant d'identifier une ressource dans le monde du
WEB
–
Syntaxe : type://serveur:port/un/chemin/possible/fichier#etiquette?
paramêtres
–
Exemple http://http://www.w3schools.com/index.html#section2
Attribut 'name' pour définir une ancre :
–
Syntaxe : <a name=''section2''> </a>
–
Pour y faire référence : <a href=''index.html#section2'' > vers la
section 2 </a>
Frames en HTML
●
●
Permet un découpage de la page en différents
documents (chaque page est indépendante)
Inconvénient :
–
Plusieurs fichiers pour une même page (eg. En tête,
menu, principal, pied de page)
–
Pas de possibilité d'impression de la page
Frames en HTML
●
Le tag <frameset> indique comment diviser la
page (verticalement ou horizontalement)
–
●
●
Les attributs 'cols' et 'rows' indiquent la valeur de la
division (en pixel, en %)
Le tag <frame> spécifie la source du document à
afficher
Exemple :
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
Tableaux en HTML
●
Le tag <table> permet de définir un tableau
●
Un tableau est définit ligne par ligne
–
●
●
On utilise le tag <tr> pour définir une ligne
Pour chaque ligne, on définit le contenu de
chaque cellule (case du tableau) par le tag <td>
Exemple :
<table border="1">
<tr>
<td>ligne 1, col. 1</td>
</tr>
<tr>
</tr>
</table>
Tableaux en HTML
●
On peut définir des entêtes par le tag <th>
●
Exemple :
<table border="1">
<tr>
<th>Entête Col1</th>
<th>Entête Col2</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
Listes en HTML
●
Listes non ordonnées :
<ul>
●
Listes ordonnées :
<ol>
<li>Café</li>
<li>Lait</li>
</ul>
<li>Café</li>
<li>Lait</li>
</ol>
●
Définitions :
<dl>
<dt>Café</dt>
<dd>Boisson chaude noire</dd>
<dt>Lait</dt>
<dd>Boisson froide blanche</dd>
</dl>
Images en HTML
●
Tag <img> couplé attribut src :
<img src="maison.gif" alt="une maison" />
●
Attribut 'alt' : pour l'accessibilité
●
D'autres attributs : http://w3schools.com/tags/default.asp
Images Réactives en HTML
●
●
●
●
Permet de définir des zones réactives
(rectangles, cercles, polygones) dans une image
Le tag <map> permet de définir les zones
réactives (couplé au tag <area>)
On utilisera l'attribut 'usemap' de la balise <img>
pour associer les zones réactives à l'image
L'attribut 'ismap' permet facilement de repérer
les coordonnées sur l'image
Images réactives en HTML
●
Exemple
<img src="planetes.gif" width="145" height="126" usemap="#planetemap">
<map id="planetemap" name="planetemap">
<area shape="rect" coords="0,0,82,126" alt="Soleil" href="soleil.htm">
<area shape="circle" coords="90,58,3" alt="Mercure" href="mercure.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
Formulaires en HTML
●
●
Un formulaire est une zone contenant différents
éléments de formulaires :
–
Zones de texte
–
Boutons
–
...
Un formulaire se déclare par l'utilisation du tag <form>
<form>
Nom:
<input type="text" name="nom">
<br>
Prénom:
<input type="text" name="prenom">
</form>
Formulaires en HTML
●
●
Chaque élément du formulaire se déclare par le
tag <input>
L'attribut 'type' associé définit le type d'élément :
–
Text
–
Radio
–
Checkbox
–
Button
–
...
Boutons radio
●
Un bouton radio permet à l'utilisateur de choisir
une unique case parmis un ensemble possible
<form>
<input type="radio" name="sexe" value="masculin"> Masculin
<br>
<input type="radio" name="sexe" value="feminin"> Féminin
</form>
●
Les éléments appartenant au même groupe
devront obligatoirement avoir le même identifiant
(attribut 'name')
Cases à cocher
●
Cet élément permet à l'utilisateur de cocher ou
non un choix
<form>
Je possède un vélo:
<input type="checkbox" name="vehicule" value="velo">
<br>
Je possède une voiture:
<input type="checkbox" name="vehicule" value="voiture">
<br>
Je possède un avion:
<input type="checkbox" name="vehicule" value="avion">
</form>
Listes déroulantes
●
●
●
Le tag <select> permet de créer une liste
déroulante
Le tag <option> permet de définir une entrée de
la liste
Exemple :
<form>
<select name="voitures">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
Zone de texte
●
●
●
Le tag <textarea> permet de définir une zone de
texte sur plusieurs lignes
Les attributs 'rows' et 'cols' permettent de définir
la taille de la zone en nombre de caractères
Exemple :
<textarea rows="10" cols="30">
Ce texte apparaitra dans la zone
de texte qui a une taille de 10
lignes par 30 caractères.
Le contenu de la zone n'est pas
interprété par le navigateur ainsi
le tag <br> sera affiché comme il
est écrit et non interprété comme
un retour à la ligne
</textarea>
Formulaire en HTML
●
Le tag <form> possède deux attributs permettant
de dire comment envoyer les informations et à
qui (quelle page) les envoyer
–
'action' désigne la page qui se chargera de
récupérer les informations du formulaire
–
'method' désigne la façon de les envoyer :
●
●
'' get '' : les informations (nom=valeur) s'affichent dans la
barre d'adresse (et on est limité)
'' post '' : les informations ne s'affichent plus (mais sont
quand même envoyées)
Formulaire en HTML
●
Pour envoyer les données :
–
●
Pour réinitialiser le formulaire :
–
●
●
<input type="submit" />
<input type="reset" />
Ces deux types de contrôles permettent de créer
des boutons
Pour créer un bouton :
–
<input type="button" />
Vers le XHTML
●
XHTML : EXtensible HyperText Markup Language
●
XHTML : pratiquement identique à HTML 4.01
●
XHTML : version plus propre et plus stricte que le
HTML
●
XHTML se base sur le XML
●
XHTML est une recommandation du W3C
Respect de règles d'écritures
●
●
●
●
●
Les éléments doivent être combiné proprement :
–
En HTML :
<b><i> Texte en gras et italique </b></i>
–
En XHTML :
<b><i> Texte en gras et italique </i></b>
Tout tag ouvert doit être refermé
–
En HTML :
<p> ca passe en html
–
En XHTML :
<p> c 'est mieux </p>
Le nom des éléments en minuscule, les attributs aussi
(avec les valeurs entre '' ... '') et plus d'attributs vides
Un élément racine
L'attribut 'id' remplace 'name'
Contenu XHTML
●
●
3 parties :
–
Une définition de DTD (grammaire du document)
–
Une partie <head>
–
Une partie <body>
Exemple :
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Un simple document XHTML</title>
</head>
<body>
<p>Un paragraphe</p>
</body>
</html>
Les différentes DTD
●
XHTML 1.0 Strict :
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
●
XHTML 1.0 Transitional :
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
●
XHTML 1.0 Frameset :
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Validation des pages XHTML
●
Aller à l'adresse :
http://validator.w3.org/check/referer
●
●
Si tout se passe bien vous devriez voir
apparaître un bout de code en XHTMH a ajouter
à votre page pour montrer que votre page est
valide
Sinon : corriger les erreurs :-)
Table périodique des éléments
html
col
table
head
span
div
fieldset
form
body
h1
section
colgroup
tr
title
a
pre
meter
select
aside
h2
header
caption
td
meta
rt
dfn
em
i
small
ins
s
br
p
optgroup
adress
h3
nav
menu
th
base
rp
abbr
time
b
strong
del
kbd
hr
ol
dl
label
option
datalist
h4
article
command
tbody
link
noscript
q
var
sub
mark
bdi
wbr
figcaption
ul
dt
input
output
keygen
h5
footer
summary
thead
style
script
cite
samp
sup
ruby
bdo
code
figure
li
dd
textarea
button
progress
h6
hgroup
details
tfoot
img
area
map
embed
object
param
source
iframe
canvas
track
audio
video
Elément racine
Sémantique (texte)
Sections du document
Métadata et scripting
Contenu (groupement)
Données tableau
Contenu encapsulé
Formulaires
Eléments interactifs
blockquote legend

Introduction au (x)HTML

Transcription

Documents pareils

Règlement du concours

1 Validation des documents HTML et XHTML Qu`est

Fiche5TechnoWeb xml dtd xsl

Le défi de Serge T.

Les entités html

Html et html5 1 - pierre

Latvia / Lettonie Riga 64,589 km² Latvian / Letton Andris Berzins

Anibal Cavaco Silva Tower of Belem/Tour de Bélem

VP236 Rue Aïn Oulmes, Casablanca, Maroc 2 200 000 Dhs Classe

SCHWEIZERISCHER BEARDED - COLLIE