HTML5 et CSS3
Ce cours condensé est issu d'un tutoriel dont l'auteur n'est autre que le créateur du Site du Zéro.
Bon courage dans
l'écriture de votre première page web.
HTML5 - BasesPréalable :
Créez sur votre PC :
- Un dossier nommé Web_html5_css3 ainsi
que les 5 sous-dossiers suivants : Images
- Multimedia - Pages
- Scripts-java - Styles.
- Un fichier page_test.html dans le
dossier Pages ainsi qu'un fichier style_test.css dans le dossier Styles.
Utilisez un éditeur de textes libre tel que PSPad ou Notepad ++ pour écrire au format UTF-8 ( Important ) les codes du cours.
Vous écrirez le Code HTML à l'intérieur du fichier page_test.html, le Code CSS à l'intérieur du fichier style_test.css .
Le résultat visuel de votre page Web sera vérifiable en ouvrant le fichier page_test.html depuis le menu du navigateur Web de votre PC.
Commencez par écrire dans page_test.html le code constituant la structure de base de votre page web ( Commentaires en gris facultatifs ).
Code HTML :
<!DOCTYPE html> <!--
doctype signifiant la nature html5 de la page -->
<html>
<head>
<!--
balise html head - Encadre des informations utiles concernant le
contenu de la page -->
<meta
charset="utf-8" /> <!-- Encodage utilisé pour
l'affichage des caractères -->
<link
rel="stylesheet" href="../Styles/style_test.css" />
<!--
Chemin et nom du fichier css lié á la page html courante -->
<title>Cours
HTML5 et CSS3 Page test</title>
<!--
Titre de la page affiché par les navigateurs Web -->
</head>
<!--
balise html head - Fermeture -->
<body>
<!--
balise html body - Encadre le corps de la page html -->
<p>Votre
navigateur web affiche 3 lignes qui sont le résultat du code HTML
écrit à l'intérieur de votre page html.</p>
<p>Comme
pour ces 3 lignes, le code HTML du cours devra être écrit à
l'intérieur de l'élément body sauf exceptions précisées.</p>
<p>Vous
pouvez supprimer ces 3 lignes de code HTML avant de commencer.</p>
</body>
<!--
balise html body - Fermeture -->
</html>
Ouvrez depuis votre navigateur le fichier page_test.html pour observer le résultat.
Au travail maintenant !!!
1 - Afficher un titre avec la balise h2 et sélectionner un groupe de mots avec la balise span
Code HTML :
<p>-
Utilisation des balises h2 ( Affichage d'un titre de niveau 2 ) et
span ( Sélection d'un groupe de mots )</p>
<h2> Bonjour
<span class="orange">
et bienvenue</span>
sur ce cours condensé HTML5 et CSS3 !</h2><br />
Résultat >>
Bonjour et bienvenue sur ce cours condensé HTML5 et CSS3 !
La couleur orange issue de l'attribut class="orange"
est gérée depuis le fichier style_test.css associé á la page html.
La bordure arrondie et en pointillé ainsi que les ombres sont
également gérées depuis le fichier style_test.css ( Ce code sera
traité plus loin ).
Code CSS associé :
.orange /* l'appel d'un
attribut class commence par un point, celui d'un attribut id
commence par un # */
{
color: #FFA500; /*
Couleur orange exprimée en valeur hexadécimal, #FFA500 = nuance
d'orange */
}
2 - Afficher un paragraphe avec la balise p, surligner avec la balise mark, passer á la ligne suivante avec la balise br
Code HTML :
<p>-
Utilisation des balises p ( paragraphe ), mark ( surlignage ) et br
( passage à la ligne )</p>
<p class="introduction">Bonjour
et bienvenue <mark>sur
ce cours condensé HTML5 et CSS3</mark>
!<br />
Ce paragraphe est en violet car la balise p encadre
l'attribut class="introduction" géré depuis le fichier style.css .<br />
Le style inclut la propriété color dont la valeur
rgb(183,26,194) correspond à une nuance de violet.<br
/>
Le passage d'une ligne á l'autre est traitée par la
balise br.<br />
L'ascenceur sur la droite provient de la propriété CSS
overflow affectée à la classe "introduction" et gérée depuis le
fichier style_test.css .
</p><br
/>
Résultat >>
Bonjour et bienvenue sur ce cours
condensé HTML5 et CSS3 !
Ce paragraphe est en violet car la balise p encadre l'attribut
class="introduction" géré depuis le fichier style_test.css .
Le style inclut la propriété color dont la valeur rgb(183,26,194)
correspond à une nuance de violet.
Le passage d'une ligne á l'autre est géré par la balise br.
L'ascenceur sur la droite provient de la propriété CSS overflow
affectée à la classe "introduction" et gérée depuis le fichier
style_test.css .
Code CSS associé :
.introduction /* l'appel
d'un attribut class commence par un point, celui d'un attribut id
commence par un # */
{
color: rgb(183,26,194);
/* Une couleur peut s'exprimer au format rgb, rgb(183,26,194)=
nuance de violet */
width: 700px; /*
Largeur du bloc paragraphe 700 pixels */
height: 45px; /*
Hauteur du bloc paragraphe 45 pixels */
overflow: auto; /*
Affichage à droite de l'ascenseur à l'initiative du navigateur, la
hauteur du paragraphe dépassant 45 pixels */
word-wrap: break-word;
/* Les mots éventuellement trop larges seront coupés et contenus à
l'intérieur du bloc paragraphe */
}
3 - Appuyer du texte avec les balises em ( italique par défaut ) et strong ( gras par défaut )
Code HTML :
<p>-
Utilisation des balises em ( italique par défaut ) et strong ( gras
par défaut )</p>
<p>La balise
em encadre "<em>Utilisation
des balises</em>"
et la balise strong encadre "<strong>em
et strong</strong>".</p><br
/>
Résultat >>
- Utilisation des balises em ( italique par défaut ) et strong ( gras par défaut )
La balise em encadre "Utilisation des balises" et la balise strong encadre "em et strong".
Le texte du paragraphe encadré par la balise em est en vert car géré ainsi depuis le fichier style_test.css .
Code CSS associé :
em
{
color: #2DBD47; /*
Couleur verte exprimée en valeur hexadécimal, #2DBD47 = nuance de
vert */
}
4 - Afficher une liste :
4.1 - non ordonnée avec les balises ul et li
Code HTML :
<p>-
Affichage d'une liste non ordonnée</p>
<ul>
<li>Fraises</li>
<li>Framboises</li>
<li>Cerises</li>
</ul><br
/>
Résultat >>
- Affichage d'une liste non ordonnée
- Fraises
- Framboises
- Cerises
4.2 - ordonnée avec les balises ol et li
Code HTML :
<p>-
Affichage d'une liste ordonnée</p>
<ol>
<li>Je
me lève.</li>
<li>Je
mange et je bois</li>
<li>Je
retourne me coucher</li>
</ol><br
/>
Résultat >>
- Affichage d'une liste ordonnée
- Je me lève.
- Je mange et je bois.
- Je retourne me coucher.
5 - Ouvrir une page html :
5.1 - située sur le Web avec la balise a et l'attribut href="http://..."
Code HTML :
<p>- Ouvrir
une page html située sur le web avec l'attribut href="http://..."</p>
<p>Souhaitez-vous
visiter le site <a
href="http://www.google.fr">Google.fr</a>
?</p><br
/>
Résultat >>
- Ouvrir une page html située sur le web avec l'attribut href="http://..."
Souhaitez-vous visiter le site Google.fr ?
5.2 - située dans le même dossier avec la balise a et l'attribut href="nom_fichier.html"
Créez dans le dossier Pages une nouvelle page web page_test_2.html en respectant le code de la structure de base présenté plus haut.
Code HTML :
<p>- Ouvrir
une page html située dans le même dossier avec l'attribut
href="nom_fichier.html"</p>
<p>Ouvrez le
fichier <a
href="page_test_2.html">page_test_2.html</a> créé dans le
dossier Pages.</p><br />
Résultat >>
- Ouvrir une page html située dans le même dossier avec l'attribut href="nom_fichier.html"
Ouvrez le fichier page_test_2.html créé dans le dossier Pages.
5.3 - située dans un sous-dossier avec la balise a et l'attribut href="nom_sous-dossier/nom_fichier.html"
Créez dans le dossier Pages un sous-dossier Pages-bis, copiez y le fichier page_test_2.html et renommez le en page_test_3.html.
Code HTML :
<p>- Ouvrir
une page html située dans un sous-dossier avec l'attribut
href="nom_sous-dossier/nom_fichier.html"</p>
<p>Ouvrez le
fichier <a
href="Pages-bis/page_test_3.html">page_test_3.html</a> situé dans le
sous-dossier Pages-bis.</p><br />
Résultat >>
- Ouvrir une page html située dans un sous-dossier avec l'attribut href="nom_sous-dossier/nom_fichier.html"
Ouvrez le fichier page_test_3.html situé dans le sous-dossier Pages-bis.
5.4 - située dans un dossier parent avec la balise a et l'attribut href="../nom_fichier.html"
Copiez le fichier page_test_2.html
dans le dossier parent Web_html5_css3
et renommez le en page_test_4.html .
Modifiez à l'intérieur de la balise <link
......./> le chemin de la feuille de style vers
href="/Styles/style_test.css".
Code HTML :
<p>- Ouvrir
une page html située dans un dossier parent avec l'attribut
href="../nom_fichier.html"</p>
<p>Ouvrez le
fichier <a
href="../page_test_4.html">page_test_4.html</a> situé dans le
dossier parent Web_html5_css3.</p><br />
Résultat >>
- Ouvrir une page html située dans un dossier parent avec l'attribut href="../nom_fichier.html"
Ouvrez le fichier page_test_4.html situé dans le dossier parent Web_html5_css3.
6 - Accéder à une ancre :
6.1 - située sur la page html active avec la balise a et l'attribut href="#nom_ancre"
Créez le titre <h2
id="mon_ancre">Titre avec pour attribut
id="mon_ancre"</h2>
et maintenez par la suite celui-ci en bas juste avant </body>.
Code HTML :
<p>- Accéder
à une ancre située sur la page html active avec l'attribut
href="#nom_ancre"</p>
<p>Joindre
la balise h2 contenant l'attribut <a
href="#mon_ancre">id="mon_ancre"</a></p><br
/>
Résultat >>
- Accéder à une ancre située sur la page html active avec l'attribut href="#nom_ancre"
Joindre la balise h2 contenant l'attribut id="mon_ancre"
Votre navigateur Web pointera en bas de page sur le titre 'Titre avec pour attribut id="mon_ancre"...'
6.2 - située sur une page html externe avec la balise a et l'attribut href="chemin/nom_fichier.html#nom_ancre"
Créez le même titre qu'en 6.1 dans le fichier page_test_3.html.
Code HTML :
<p>- Accéder
à une ancre située sur une page html externe avec l'attribut
href="chemin/nom_fichier.html#nom_ancre"</p>
<p>Joindre
l'ancre <a
href="Pages-bis/page_test_3.html#mon_ancre">id="mon_ancre"</a> située sur la
page_test_3.html .</p><br />
Résultat >>
- Accéder à une ancre située sur une page html externe avec l'attribut href="chemin/nom_fichier.html#nom_ancre"
Joindre l'ancre id="mon_ancre" située sur la page_test_3.html .
7 - Affichage d'une info bulle à l'aide de l'attribut title="texte de l'info bulle"
Code HTML :
<p>-
Affichage d'une info bulle à l'aide de l'attribut title="texte de
l'info bulle"</p>
<p>Info
bulle visible avec la souris pointée sur : <a
href="http://www.google.fr" title="info bulle">Google.fr</a> ?</p><br />
Résultat >>
- Affichage d'une info bulle à l'aide de l'attribut title="texte de l'info bulle"
Info bulle visible avec la souris pointée sur : Google.fr .
8 - Ouvrir une page html dans une nouvelle fenêtre à l'aide de l'attribut target="_blank"
Code HTML :
<p>- Ouvrir
une page html dans une nouvelle fenêtre à l'aide de l'attribut
target="_blank"</p>
<p>Ouvrez <a href="http://www.google.fr"
title="info bulle" target="_blank">Google.fr</a> dans une
nouvelle fenêtre.</p><br />
Résultat >>
- Ouvrir une page html dans une nouvelle fenêtre à l'aide de l'attribut target="_blank"
Ouvrez Google.fr dans une nouvelle fenêtre.
Notez cependant qu'il est déconseillé d'abuser de cette technique
car elle perturbe la navigation.
Le visiteur lui-même peut décider s'il veut ouvrir le lien dans une
nouvelle fenêtre.
Il fera Maj + Clic sur le lien pour ouvrir dans une nouvelle fenêtre
ou Ctrl + Clic pour ouvrir dans un nouvel onglet.
9 - Envoyer un email avec la balise href="mailto:votre adresse mail"
Code HTML :
<p>- Envoyer
un email avec la balise href="mailto:votre adresse mail"</p>
<p>Envoyez-vous
un <a
href="mailto:votre_adresse@operateur.fr">e-mail !</a></p><br />
Résultat >>
- Envoyer un email avec la balise href="mailto:votre adresse mail"
Envoyez-vous un e-mail !
Une fenêtre d'envoi de courrier générée par le client mail ( Outlook ou autre ) de votre PC apparait á l'écran.
10 - Télécharger un fichier avec la balise href="chemin/nom_fichier"
Créez un fichier document.rtf ( format de l'éditeur Wordpad ) dans le dossier Web_html5_css3 et mettez y le texte que vous voulez.
Code HTML :
<p>-
Télécharger un fichier avec la balise href="chemin/nom_fichier"</p>
<p>Télécharger
le fichier <a
href="../document.rtf">document.rtf</a>
.</p><br
/>
Résultat >>
- Télécharger un fichier avec la balise href="chemin/nom_fichier"
Télécharger le fichier document.rtf .
11 - Insertion d'une image avec la balise img et l'attribut src="chemin/nom_image"
Privilégiez de préférence pour l'affichage d'une image les formats suivants :
jpeg pour les photos, png pour les graphiques et gif pour les animations.
La balise img concernant l'image ci-dessous encadre 2 attributs supplémentaires :
- alt qui permet d'afficher un texte alternatif lorsque l'image ne s'affiche pas dans le navigateur Web.
- title qui affiche une info bulle lors du survol de la photo avec la souris.
Placez une photo quelconque de taille plus petite que l'original dans le dossier Images et adaptez le code html selon l'exemple ci-dessous :
Code HTML :
<p>- Insertion d'une image avec la balise img et l'attribut src="chemin/nom_image"</p>
<p><img src="../Images/manchot.jpg" alt="Img Manchots" title="Majestueux" /></p><br />
Résultat >>
- Insertion d'une image avec la balise img et l'attribut src="chemin/nom_image"
12 - Agrandir une image à l'aide d'un lien hypertexte placé devant la balise img
Placez l'original de votre photo dans le dossier Images.
Code HTML :
<p>-
Agrandir une image à l'aide d'un lien hypertexte placé devant la
balise img</p>
<p>Cliquez
sur la photo pour voir l'original :
<a
href="../Images/manchot1.jpg"><img
src="../Images/manchot.jpg" style="vertical-align:middle"
alt="Photo" title="Agrandir" /></a>
</p><br
/>
Résultat >>
Cliquez sur la photo pour voir l'original :
13 - Affichage d'une image ou figure avec la balise figure et ajout d'une légende avec la balise figcaption
Si une image ou figure apporte une information au texte associé: placez la balise img à l'intérieur d'une balise figure.
Placez une figure quelconque dans le dossier Images et adaptez le code html selon l'exemple ci-dessous :
Code HTML :
<h5>- Affichage d'une figure avec légende.</h5>
<figure>
<img src="../Images/z-index.png" alt="Figure z-index" />
<figcaption>Capture 1</figcaption>
</figure><br /><br />
<br />
Résultat >>
- Affichage d'une figure avec légende.
- Gagné, la balise h2 du titre affiché ci-dessous contient l'attribut id="mon_ancre"
Titre avec pour attribut id="mon_ancre"...
Un clic sur le lien du paragraphe "Joindre la balise h2 contenant
l'attribut...." situé plus haut dans cette page affichera ce texte á
l'écran.
La bordure arrondie et en pointillé ainsi que les ombres sont gérées
depuis le fichier style_test.css ( Ce code sera traité plus loin ) .
Suite...
