HTML 5 et CSS 3
HTML : Hyper Text Markup Language.
Gère et organise le contenu de la page web.
(Titres, liens, images, paragraphes………).
CSS : Cascading Style Sheets (appelées aussi Feuilles de style)
Gère l’apparence de la page web
(Agencement, positionnement, décoration, couleurs, taille du texte…).
Dans ce tutoriel on va réaliser un site statique avec HTML et CSS pour débutant :
Pour commencer à travailler vous avez besoin d’un éditeur de texte et un navigateur.
1-L’éditeur de texte
On va utiliser Visual studio code
2-Les navigateurs
1er Partie (Html 5)
1-Structure Documents HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>HTML 5</title>
</head>
<body>
</body>
</html>- La balise <!DOCTYPE html> permet au navigateur de connaitre la norme HTML que vous utilisez, ici vous indiquez simplement la plus récente (HTML 5.1)
- la balise <html> doit englober tout votre code et être la dernière balise à se fermer dans votre page
- la balise <head> permet de définir certaines informations qui ne seront pas directement affiché sur la page (fichier CSS ou JavaScript lié, métadonnées, titre …)
- La balise <meta> permet de donner des indications complémentaire sur votre page, ici le charset permet de définir que votre site utilise un jeu de caractère Unicode standard.
- la balise <title> permet de définir le titre de votre page
- la balise <body> contiendra tout le contenu de votre site
Une page web est constituée de deux parties :
- L’en-tête <head>: cette section donne quelques informations générales sur la page comme son titre, l’encodage (pour la gestion des caractères spéciaux), etc.
- Le corps <body>: c’est là que se trouve la partie principale de la page. Tout ce que nous écrirons ici sera affiché à l’écran. C’est à l’intérieur du corps que nous écrirons la majeure partie de notre code.
2-Les Balises HTML
2-1-Titres HTML
Les titres HTML sont définis avec les balises de l’adresse <strong><h1></strong> à <strong><h6></strong>.
<strong><h1></strong> le titre le plus important. <strong><h6></strong> titre le moins important :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tutoriel HTML et CSS</title>
</head>
<body>
<h1>Titre h1 :Qu'est-ce que le Lorem Ipsum?</h1>
<h2>Titre h2 :D'où vient-il?</h2>
<h3>Titre h3 :Pourquoi l'utiliser?</h3>
<h4>Titre h4 :Où puis-je m'en procurer?</h4>
<h5>Titre h5</h5>
<h6>Titre h6</h6>
</body>
</html>
Résultat dans le Navigateur
2-2-Paragraphes HTML
Les paragraphes HTML sont définis avec l’étiquette <strong><p></strong> l’article :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML et CSS</title>
</head>
<body>
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500,
</p>
</body>
</html>
Résultat dans le Navigateur
2-3-Balise pour revenir à la ligne
<br />
2-4-Balises de mise en valeur
<em> </em>
<strong> </strong>
<mark> </mark>
N’oubliez pas : HTML pour le fond, CSS pour la forme
2-5-Liens HTML
Les liens HTML sont définis avec la balise <strong><a></strong> :
2-5-a- Un lien vers un site
<a href="https://www.google.fr">lien google</a>La destination du lien est href spécifiée dans l’attribut href.
Les attributs sont utilisés pour fournir des informations supplémentaires sur les éléments HTML.
2- 5-b-Un lien vers une autre page de son site
<a href="contact.html">Contact</a>On dit que c’est un lien relatif.
2-5-c- Un lien vers une ancre
Une ancre est une sorte de point de repère que vous pouvez mettre dans vos pages HTML lorsqu’elles sont très longues.
En effet, il peut alors être utile de faire un lien amenant plus bas dans la même page pour que le visiteur puisse sauter directement à la partie qui l’intéresse.
Pour créer une ancre, il suffit de rajouter l’attribut id à une balise qui va alors servir de repère. Ce peut être n’importe quelle balise, un titre par exemple.
Utilisez l’attribut id pour donner un nom à l’ancre. Cela nous servira ensuite pour faire un lien vers cette ancre. Par exemple :
<h2 id="mon_ancre">Titre</h2>Ensuite, il suffit de créer un lien comme d’habitude, mais cette fois l’attribut href contiendra un dièse (#) suivi du nom de l’ancre. Exemple :
<a href="#mon_ancre">Aller vers l'ancre</a>2-6-Images HTML
Les images HTML sont définies avec la balise <img>
Le fichier source (src), texte alternatif (alt), width, et height sont fournis comme attributs:
<img src="image.jpg" alt="texte image" width="200" height="200">2-7-Boutons HTML
Les boutons HTML sont définis avec le <button>
<button>Click </button>
2-8-Listes HTML
Liste non ordonnée
<ul>
<li>HTMLli>
<li>CSSli>
<li>PHPli>
</ul>
Liste ordonnée
<ol>
<li>HTMLli>
<li>CSS.</li>
<li>PHP.</li>
</ol>
Liste <dl> de description
<dl>
<dt>HTML</dt>
<dd> HTML signifie « HyperText Markup Language »</dd>
<dt>CSS</dt>
<dd>CSS est l'un des langages principaux du Web </dd>
<dt>Javascript</dt>
<dd>JavaScript est un langage de programmation de scripts</dd>
</dl>
Remarque :
Les balises HTML ne sont pas sensibles aux casses.
3-Attributs HTML
Les attributs fournissent des informations supplémentaires sur les éléments HTML.
- Tous les éléments HTML peuvent avoir des attributs
- Les attributs fournissent des informations supplémentaires sur un élément
- Les attributs sont toujours spécifiés dans l’étiquette de début
- Les attributs viennent généralement dans les paires de nom/valeur comme :
<balise attribut= « valeur « >
3-1-L’ Attribut href
Les liens HTML sont définis avec l’étiquette de l’étiquette <a> L’adresse de lien est spécifiée dans l’attribut href :
<a href="https://www.google.fr">lien Google</a>Vous en apprendrez plus sur les liens et le <a> plus tard dans ce tutoriel.
3-2-L’attribut src
Les images HTML sont définies avec l’étiquette <img>
<img src="image.jpg">3-3-La largeur et la hauteur Attributs
Les images HTML ont également des attributs de width et de height qui spécifie la largeur et la hauteur de l’image :
<img src="image.jpg" width="200" height="200">La largeur et la hauteur sont spécifiées en pixels par défaut ; donc largeur « 200 » signifie 200 pixels de large.
Vous en apprendrez plus sur les images dans notre chapitre Images HTML.
3-4-L’attribut alt
L’attribut alt spécifie un texte alternatif à utiliser, si une image ne peut pas être affichée.
La valeur de l’attribut alt peut être lue par les lecteurs d’écran. De cette façon, quelqu’un qui « écoute » la page Web, par exemple une personne ayant une déficience visuelle, peut « entendre » l’élément.
<img src="image.jpg" alt="texte image">L’attribut alt est également utile si l’image ne peut pas être affichée (par exemple si elle n’existe pas) :
<img src="image.jpg" alt="texte image">3-5-L’attribut de style
L’attribut style est utilisé pour spécifier le style d’un élément, comme la couleur, la police, la taille , ect..
<p style= »color :red »>This is a paragraph.</p>Vous en apprendrez plus sur le style plus tard dans ce tutoriel, et dans notre tutoriel CSS.
3-6-L’attribut lang
La langue du document peut être déclarée dans le tag de l’article <html>
La langue est lang déclarée avec l’attribut lang.
Déclarer une langue est important pour les applications d’accessibilité (lecteurs d’écran) et les moteurs de recherche :
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>Les deux premières lettres précisent la langue (en). S’il y a un dialecte, ajoutez deux autres lettres (US).
4-Structurez votre page
En général, une page web est constituée d’un en-tête (tout en haut), de menus de navigation (en haut ou sur les côtés), de différentes sections au centre… et d’un pied de page (tout en bas).
Dans ce chapitre, nous allons nous intéresser aux nouvelles balises HTML dédiées à la structuration du site. Ces balises ont été introduites par HTML5 (elles n’existaient pas avant) et vont nous permettre de dire : « Ceci est mon en-tête », « Ceci est mon menu de navigation », etc.
Je vais vous présenter ici les nouvelles balises introduites par HTML5 pour structurer nos pages. Vous allez voir, cela ne va pas beaucoup changer l’apparence de notre site pour le moment, mais il sera bien construit et prêt à être mis en forme ensuite !
<Header> : l’en-tête
<header>
<!-- Placez ici le contenu de l'en-tête de votre page -->
</header><footer> : le pied de page
<footer>
<!-- Placez ici le contenu du pied de page -->
</footer><nav> : principaux liens de navigation
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="forum.html">Forum</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav><section> : une section de page
<section>
<h1>Titre</h1>
<p>lorem </p>
</section><aside> : informations complémentaires
<aside>
<!-- Placez ici des informations complémentaires -->
</aside><article> : un article indépendant
<article>
<h1>Mon article</h1>
<p>lorem</p>
</article>5-Les Tableaux en HTML
1-Structure d’un tableau en HTML 5
Les trois « zones » du tableau :
- l’en-tête (en haut) : il se définit avec les balises <thead></thead>;
- le corps (au centre) : il se définit avec les balises <tbody></tbody>;
- le pied du tableau (en bas) : il se définit avec les balises <tfoot></tfoot>.
Exemple d’un tableau structuré :
<table>
<caption>Liste des amis</caption>
<thead> <!--En-tête du Tableau-->
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Ville</th>
</tr>
</thead>
<tbody> <!--Corps du Tableau-->
<tr>
<td>Azize</td>
<td>33 ans</td>
<td>fes</td>
</tr>
<tr>
<td>Mohamed</td>
<td>25 ans</td>
<td>Rabat</td>
</tr>
<tr>
<td>Ali</td>
<td>40 ans</td>
<td>Casa</td>
</tr>
</tbody>
<tfoot><!--Pied du Tableau-->
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Ville</th>
</tr>
</tfoot>
</table>
Balise : <capltion> : Titre du tableau
Balise : <th> : La ligne d’en-tête
Balise <<tr> et <td> la ligne et colonne
2- Fusion
Dans certains tableaux complexes, vous aurez besoin de « fusionner » des cellules entre elles.
Pour effectuer une fusion, on rajoute un attribut à la balise <td>. Il faut savoir qu’il existe deux types de fusion :
- La fusion de colonnes : c’est ce que je viens de faire dans cet exemple. La fusion s’effectue horizontalement. On utilisera l’attribut colspan.
- La fusion de lignes : là, deux lignes seront groupées entre elles. La fusion s’effectuera verticalement. On utilisera l’attribut rowspan .
Comme vous le savez, vous devez donner une valeur à l’attribut (que ce soit colspan ou rowspan ). Il faut indiquer le nombre de cellules à fusionner entre elles.
<td colspan="2">Qui signifie : « Cette cellule est la fusion de deux cellules ». Il est possible de fusionner plus de cellules à la fois (trois, quatre, cinq… autant que vous voulez).
<td rowspan="2">Les Formulaire en HTML5
Un formulaire est une zone interactive de la page, dans laquelle vos visiteurs peuvent saisir des informations.
Pour créer un formulaire en html, on utilise la balise <form> :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Formulaire en html</title>
</head>
<body>
<form>
</form>
</body>
</html>Les données saisies dans le formulaire doivent être envoyé pour traitement, if faut ajouter deux attributs :
method : mode d’envoi des données.
Action : page vers laquelle le visiteur sera redirigé après envoi du formulaire et qui traitera les informations.
<form method="post" action="traitement.php">
</form>Une grande partie des éléments du formulaire peut s’insérer avec la balise <input/>.
La valeur de son attribut type permet d’indiquer quel type de champ doit être inséré :
- text : zone de texte ;
- password : zone de texte pour mot de passe ;
- tel : numéro de téléphone ;
- checkbox case à cocher ;
- etc.
- La balise <label> permet d’écrire un libellé. On l’associe à un champ de formulaire avec l’attribut for, qui doit avoir la même valeur que l’id du champ de formulaire.
- On peut rendre un champ obligatoire avec l’attribut required, faire en sorte qu’il soit sélectionné par défaut avec autofocus, donner une indication dans le champ avec placeholder …
- Pour récupérer ce que les visiteurs ont saisi, le langage HTML ne suffit pas. Il faut utiliser un langage « serveur » comme PHP…
<!--Zone de texte monoligne-->
<label for="pseudo">Votre pseudo :</label>
<input type="text" name="pseudo" id="pseudo" placeholder="Ex : pseudo" size="30" maxlength="10" />
<!--Zone de mot de passe-->
<label for="pass">Votre mot de passe :</label>
<input type="password" name="pass" id="pass" />
<!--Zone de texte multiligne-->
<label for="ameliorer">Comment pensez-vous que je pourrais améliorer mon site ?</label><br />
<textarea name="ameliorer" id="ameliorer"></textarea>
<!--email-->
<label for="email">Votre email</label>
<input type="email" id="email" nom="email">
<!--téléphone-->
<label for="tel">Votre Téléphone</label>
<input type="tel" id="tel" name="tel">
<!--nombre-->
<label for="nombre">Votre Age</label>
<input type="number" id="nombre" name="nombre">
<!--date-->
<label for="datenaissance">date naissance</label>
<input type="date" id="datenaissance" name="datenaissance">
<!--Les cases à cocher-->
Cochez les aliments que vous aimez manger :<br />
<input type="checkbox" name="frites" id="frites" /> <label for="frites">Frites</label><br />
<input type="checkbox" name="steak" id="steak" /> <label for="steak">Steak haché</label><br />
<input type="checkbox" name="epinards" id="epinards" /> <label for="epinards">Epinards</label><br />
<input type="checkbox" name="huitres" id="huitres" /> <label for="huitres">Huitres</label>
Veuillez indiquer la tranche d'âge dans laquelle vous vous situez :<br />
<input type="radio" name="age" value="moins15" id="moins15" /> <label for="moins15">Moins de 15 ans</label><br />
<input type="radio" name="age" value="medium15-25" id="medium15-25" /> <label for="medium15-25">15-25 ans</label><br />
<input type="radio" name="age" value="medium25-40" id="medium25-40" /> <label for="medium25-40">25-40 ans</label><br />
<input type="radio" name="age" value="plus40" id="plus40" /> <label for="plus40">Encore plus vieux que ça ?!</label>
<!--Les listes déroulantes-->
<label for="pays">Dans quel pays habitez-vous ?</label><br />
<select name="pays" id="pays">
<option value="france">France</option>
<option value="espagne">Espagne</option>
<option value="italie">Italie</option>
<option value="royaume-uni">Royaume-Uni</option>
<option value="canada">Canada</option>
<option value="etats-unis">États-Unis</option>
<option value="chine">Chine</option>
<option value="japon">Japon</option>
</select>