HTML
HTML
HTML
MIAGE Casa
AMARY Soufiane
amasoufiane@gmail.com
Qu'est ce que l'HTML
• L'HTML (Hyper Text Markup Language) est un
langage qui permet de développer des site
web statique .
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
Version HTML
• HTML 4 :
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
• XHTML 1.0
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• XHTML 1.1
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
• HTML5 :
• <!DOCTYPE html>
Les balises
• Exemple :
• <head>
<title> ISTA</title> Titre du document
• </head>
Quelques balises utiles…
<h6> Titre de niveau 6
<h5> Titre de niveau 5
<h4> Titre de niveau 4
<h3> Titre de niveau 3
<h2> Titre de niveau 2
<h1> Titre de niveau 1
<strong> Mise en valeur (forte)
Le texte est généralement mis en gras.
<em> Mise en valeur (faible)
Et <i> Le texte est généralement mis en italique.
<B> Gras
<U> souligne le texte
Quelques balises utiles…
<PRE>
MATIERES PROFESSEUR NB d'heures
-------------------------------------
HTML AMARY 20
Css AMARY 20
javascript AMARY 20
</PRE>
FONT
La taille dans <FONT SIZE=?> peut être indiquée avec un nombre de 1 à 7. La
valeur par défaut étant 3.
<FONT SIZE=5>texte</FONT>
couleur code
Bleu #0000FF
Vert #00FF00
Blanc #FFFFFF
Violet #8000FF
Rouge #FF0000
Jaune #FFFF00
Gris clair #C0C0C0
Noir #000000
Encore….
<img /> Inline Insère une image.
Utilisez les attributs src (pour indiquer l'adresse de l'image) et
alt (pour indiquer un texte de remplacement). Ces 2 attributs
sont obligatoires. Exemple :
<img src="Templates/images/smiley.png" alt=":)" />
<!–-
Voici un commentaire HTML qui
peut se placer sur plusieurs lignes
-->
Les couleurs utilisées dans BODY
• BGCOLOR=c pour le fond du document
• TEXT=c pour la couleur des caractères
• LINK=c pour la couleur des prises d'hypertextes non
utilisées
• VLINK=c pour la couleur des prises d'hypertextes
utilisées
• ALINK=c pour la couleur des prises d'hypertextes à
l'instant de la sélection
Les attributs de la balise <table>
1. align
2. Bgcolor
3. Border
4. Cellpadding
5. Cellspacing
6. Frame
7. rules
8. Width
align (alignement horizontal)
Item 1 Item 2
Item 3 Item 4 Item 5
ROWSPAN
<TABLE >
<TR>
<TH COLSPAN=2>Titre 1</TH>
<TH COLSPAN=2>Titre 2</TH>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD> Titre 1 Titre 2
<TD>C</TD>
</TR>
<TD>D</TD> A B C D
<TR>
<TD>E</TD>
E F G H
<TD>F</TD>
<TD>G</TD>
<TD>H</TD>
</TR>
</TABLE>
Exercice 3: Les tableaux
36
multi-fenêtres
un document multi-fenêtres a la même structure
qu'un document HTML normal, à cette différence
près que les balises d'encadrement <BODY> sont
remplacées par des balises <FRAMESET> qui
encadrent la description des sous-documents
HTML qu'elles contiennent.
• <FRAMSET> : C'est la balise d'encadrement
d'une fenêtre.
• Entre les balises <FRAMESET> et
</FRAMESET> ne peuvent apparaître que les
balises <FRAME>, <NOFRAME> ou un autre
jeu de balises FRAMSET
• Exemples
<FRAMESET ROWS="20%,60%,20%">
<FRAMESET ROWS="100,*,100">
<FRAMESET COLS="20%,80%">
Exemple n°1
<FRAMESET COLS="20%,80%">
<FRAME SRC="frame1.html" NAME="gauche">
<FRAME SRC="frame2.html" NAME="droite">
</FRAMESET>
frame1.html frame2.html
Exemple n°2
<FRAMESET ROWS="20%,80%">
<FRAME SRC="frame1.html" NAME="haut">
<FRAME SRC="frame2.html" NAME="bas">
</FRAMESET>
frame1.html
frame2.html
Exemple n°3
<FRAMESET COLS="20%,80%">
<FRAME SRC="frame1.html" NAME="gauche">
</FRAMESET>
frame2.html
frame1.html
frame3.html
Les formulaires
L'élément <form> permet de créer des formulaires, qui peuvent contenir des cases
à cocher, des boutons radio, des listes déroulantes … les données recueillies sont
transmises à un programme qui s'exécutera sur le serveur web et vous retournera
le résultat.
<form action="mon_programme.pl">
… éléments du formulaire
</form>
Zone de texte
</FORM>
Zone de texte ( password)
</FORM>
Bouton Submit
</FORM>
Bouton Reset
</FORM>
Zone de texte ( password)
</FORM>
checkbox
</FORM>
radio
</FORM>
SELECT
Cet élément sert à définir des listes (menus déroulant ou
ascenseurs). Elle s'utilise avec l'élément OPTION.
</select >
</FORM>
TEXTAREA
name = "chaine", associe un nom aux données entrées dans cet élément input ( ex:
civilite pour un choix Mme, Mlle, Mr de type radio, on affectera dans le CGI la valeur
cochée à la variable civilite, ce qui donne en Perl:
$civilite=$CGI->param(civilite)
input=cgi.parse()
input[civilite]
type = "button, checkbox, file, hidden, image, radio, reset, submit, text …"
HTML5 Input Types
•color
•date
•datetime-local
•email
•month
•number
•range
•search
•tel
•time
•url
•week
Le champ <input type=color>
• Choisissez une couleur: <input type="color"
name="favcolor" />
<input type=date>
• Anniversaire: <input type="date" name="bday"
/>
<input type=datetime-local>
• Permet de choisir la date et l’heure
• Support idem type=date
• Anniversaire : <input type="datetime-local"
name="bdaytime" />
<input type=time>
• Heure du rendez-vous :
<input type="time" name=“rdv_time" />
• Et lors de la soumission
<input type=number>
• <input type="number" name="quantity"
min="1" max="5" />
oninput="o.value=parseInt(ht.value)+
parseInt(tva.value)+parseInt(remise.v
alue)"
Le champ <datalist>
• Cette balise sert à créer une liste de
suggestions associée à un champ (comme
dans Google Suggest).
• L'id du tag <datalist> doit être identique à la
valeur de l’attribut "list " du champ <input>
associé.
Le champs <datalist>, exemple
<input list="langage_programmation" name="pr" />
<datalist id="langage_programmation">
<option value="JAVA">
<option value="C#">
<option value="VB">
<option value="ASP">
<option value="PHP">
</datalist>
<form action="demo_form.asp">
Nom:<input type="text" name="nom"
autofocus="autofocus"/><br />
Prénom: <input type="text" name="pre"/><br />
<input type="submit"/>
</form>
Pseudo classes CSS
<input type="text" value="optional"><br/>
<br/>
<input type="text" value="required" required>
<input type="time" value="06:06" required><br/>
<br/>
<input type="text" value="lettres9" pattern="[ a-zA-Z]*">
Effacez le chiffre, pour rendre ce champ valide.
</script>
placeholder
placeholder est un attribut qui permet de renseigner un
texte indicatif par défaut dans un champ de formulaire.
C'est une valeur qui s'efface dès que l'utilisateur active le
champ de formulaire
http://w3c.github.io/html/sections.html#the-article-
element
<detail> et <summary>
• On clique sur la flèche et « ça s’ouvre » :
<details>
<summary>développement informatique </summary>
<p> - Le développeur multimédia</p>
<p> - Le développeur logiciel</p>
<p> - concepteur de logiciel</p>
</details>
<detail> et <summary> suite…
</audio>
loop
<audio controls loop>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
YouTube Videos
<iframe width="420" height="315"
src="https://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>