Apprenez à coder en HTML5: Partie 2 Les balises HTML


spécifie un titre pour la page.</div><div>L'élément <body> contient le contenu de la page visible c'est à dire le corps même de la page. Tout ce que vous devez afficher sur votre page doit être écris à l'intérieur de cette balise.</div><div>L'élément <h1> définit le grand titre de la page.</div><div>L'élément <p> définit un paragraphe.</div><div><br></div><div>Ces éléments sont délimitées par les balise que nous avons vu ci-dessus.</div><div><br></div><div><b>Exemple :</b></div><div><br></div><div><nomdebalise> le contenu va ici ... </nomdebalise></div><div><br></div><div>Les balises HTML viennent normalement par paires comme <p> et </p></div><div>La première balise d'une paire est la balise de début ou balise ouvrante, la deuxième balise est la balise de fin ou balise fermante.</div><div>La balise de fin est écrite comme la balise de début, mais avec une barre oblique insérée avant le nom de la balise.</div><div><br></div><div><b>Que font les navigateurs web?</b></div><div><br></div><div>Le but d'un navigateur Web (Chrome, Edge, Firefox, Safari) est de lire des documents HTML et de les afficher. Tout les navigateurs dispose donc de la faculté de lire notre code html.</div><div><br></div><div>Le navigateur n'affiche pas les balises HTML, mais les utilise pour déterminer comment afficher le document.</div></div><div><br></div><div>Voici sur cette image l'architecture d'une page html:</div><div><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQd3B15rHDIh4FCxetDUdFA9X9CIIXNC_MbLAu7TWJDyjNN0UjCocn7zSCgiRrHkXEkYGQha8tom5uuN4FvKiAGc4Xg0yEq_ITLf-ZOLp4pfS4UJsYUyIW20c9u5mYRIztao1JNDe5z9oj/s1600/Screenshot_20200824-220925.png" imageanchor="1" style=" margin-right: 1em;margin-left: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQd3B15rHDIh4FCxetDUdFA9X9CIIXNC_MbLAu7TWJDyjNN0UjCocn7zSCgiRrHkXEkYGQha8tom5uuN4FvKiAGc4Xg0yEq_ITLf-ZOLp4pfS4UJsYUyIW20c9u5mYRIztao1JNDe5z9oj/s1600/Screenshot_20200824-220925.png" border="0" data-original-width="720" data-original-height="1118" width="544" height="844" class=" " title="" alt=""></a></div><div class="separator" style="clear: both; text-align: center;"><br></div><div class="separator" style="clear: both; text-align: center;">Dans l'article suivant nous verrons beaucoup plus sur les balises. Pour l'instant essayons de modifier le contenu de notre code. </div><div class="separator" style="clear: both; text-align: center;"><br></div><div class="separator" style="clear: both; text-align: center;">Pour cela nous ferons un petit exercice. Essayons juste de reproduire ce qu'on vois sur l'image ci-dessous.</div><div class="separator" style="clear: both; text-align: center;"><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj06isOYqAtGsxrM5ZkuIFKjjnCNqDNrwdefnQFKRmaoTsEclKGBl2C5-ka8-5dx9vVHAOFKhY3GSAvut7qalAUNqRy-ZuYqr5z3wLfA-Q0pV_OR8ix6w3Hdzkbbo2pSg7Z8waH3xMBgOo3/s1600/Screenshot_20200824-221656.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj06isOYqAtGsxrM5ZkuIFKjjnCNqDNrwdefnQFKRmaoTsEclKGBl2C5-ka8-5dx9vVHAOFKhY3GSAvut7qalAUNqRy-ZuYqr5z3wLfA-Q0pV_OR8ix6w3Hdzkbbo2pSg7Z8waH3xMBgOo3/s1600/Screenshot_20200824-221656.png" border="0" data-original-width="720" data-original-height="545" width="320" height="242"></a></div><div class="separator" style="clear: both; text-align: center;">Essayez de faire cela. Noté bien que j'ai changé le titre de la page. Très simple n'est-ce pas ? Amusez vous bien en attendant la suite.</div><div class="separator" style="clear: both; text-align: center;"><br></div><div class="separator" style="clear: both; text-align: center;">C'est tout pour cette partie. Rendez-vous très bientôt pour la suite. Laissez moi vos commentaires. Merci!😊</div><br></div><br></div><p dir="ltr"><br></p></div><div><br></div></div>
Salut ! et bienvenue sur la deuxième partie du cours sur le html. dans la première partie que je vous invite à lire si vous ne l'avez pas encore fait, nous avons déjà installé les outils dont nous aurons besoin, c'est à dire l'ide. Nous avons aussi créer notre premier projet de page web.


Rappelez-vous, dans l'introduction on avait dit que le html permet de structurer une page web. il est donc le langage de balisage standard pour la création de pages web. Un code html se compose d'une série d'éléments.

Les éléments HTML indiquent au navigateur comment afficher le contenu de votre page. ces éléments sont représentés par ce qu'on appelle des balises.
Les balises html étiquettent les éléments du contenu tels que "titre", "paragraphe", "tableau", etc.
les navigateurs n'affichent pas les balises html, mais les utilisent pour rendre le contenu de la page.


Je vous invite à reouvrir notre ide (webcode). Nous allons essayez de comprendre le code qu'on avait obtenu.

Code HTML5 :

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>hello, world!</title>
    </head>
    <body>
        <h1>
            hello, world!
        </h1>
    </body>
</html>


Dans ce code vous avez remarquer au début <! doctype html>. cette ligne permet de savoir qu'il s'agit d'un document de type html5. Vous avez aussi certainement remarquer des  <> ou </> délimitant des mots. En html un élément d'une page est encadré par une balise ouvrante et un balise fermante.

EX: <body>.....</body>

Si vous analyser bien le code ci-dessous, vous pourrez comme moi relevé les balise suivantes.

<html>...</html>

<head>...</head>

<body>...</body>

etc...

L'élément <html> est l'élément racine d'une page html.

L'élément <head> contient des méta-informations sur le document.

L'élément <title> spécifie un titre pour la page.

L'élément <body> contient le contenu de la page visible c'est à dire le corps même de la page.

L'élément <h1> définit le grand titre de la page.

L'élément <p> définit un paragraphe.


Ces éléments sont délimitées par les balise que nous avons vu ci-dessus.


Exemple :


<nomdebalise> le contenu va ici ... </nomdebalise>


Les balises html viennent normalement par paires comme <p> et </p>

La première balise d'une paire est la balise de début, la deuxième balise est la balise de fin.

La balise de fin est écrite comme la balise de début, mais avec une barre oblique insérée avant le nom de la balise.


Que font les navigateurs web?


Le but d'un navigateur web (chrome, edge, firefox, safari) est de lire des documents html et de les afficher. Tout les navigateurs dispose donc de la faculté de lire notre code html.


Le navigateur n'affiche pas les balises html, mais les utilise pour déterminer comment afficher le document.


Voici sur cette image l'architecture d'une page html:




Dans l'article suivant nous verrons beaucoup plus sur les balises. Pour l'instant essayons de modifier le contenu de notre code. 

Pour cela nous ferons un petit exercice. Essayons juste de reproduire ce qu'on vois sur l'image ci-dessous.

Essayez de faire cela. Noté bien que j'ai changé le titre de la page. Très simple n'est-ce pas ? Amusez vous bien en attendant la suite.

C'est tout pour cette partie. Rendez-vous très bientôt pour la suite. Laissez moi vos commentaires. Merci!😊




Enregistrer un commentaire

2 Commentaires