HTML n'est pas un langage de programmation. C'est un langage de balises qui définit la structure de votre contenu. HTML se compose d'une série d'éléments, utilisés pour entourer, ou envelopper, les diverses parties du contenu pour les faire apparaître ou agir d'une certaine façon. Les balises entourantes peuvent être rendues par un mot ou une image lien hypertexte vers quelque chose d'autre, un texte en italique, une police plus grande ou plus petite, et ainsi de suite. source
Pour afficher ce texte sur votre page: "il fait beau aujourd'hui" faudra mettre un balise c'est a dire un chevron "<...>" . Pour ecrire un paragraphe, on va utiliser une balise: p. Pour indiquer la fin d'une balise: "< /...>", si vous fermer pas la balise, rien ne se passera. Le code juste en dessous:
<p> il fait beau aujourd'hui <p>
Ca saffichera comme ce ci: Exemple
Pour commencer un site, il vous faut une balise HTML. Comme ci dessous:
<!DOCTYPE html> <html> <head> <title> "titre de votre onglet" </title> </head> <body> </body> </html>
Dans mon cas, je vais mettre site exemple.
<!DOCTYPE html> <html> <head> <title> site exemple </title> </head> <body> </body> </html>
En suite, pour que tout les caratères soit interprété par le naviagteur, on mettera une balise <meta>. Comment ouvir votre site?
<html> <head> <title> site exemple </title> <meta charset="utf-8"> </head> <body> </body> </html>
La balise <p>: La balises P va servir a mettre des paragraphe.
La balise <h>: Les balises H vont servir a mettre des titres. Il existe 6 niveaux de H possible : du H1 au H6. Ces différents niveaux de titres servent à structurer une page et à indiquer au moteur quels sont les titres et sous titres. Le h1 est le titre principale de votre page. Ca sera le plus gros titre. Plus qu'on va vers le h6, plus votre titre sera plus petit.
Les balises <header> et < footer >: La balise hearder ca sera le haut de page la où y aura les menus etc. La balise < footer > ca sera le bas de page contient habituellement des informations sur l'auteur de la section, les données relatives au droit d'auteur (copyright) ou les liens vers d'autres documents en relation.
La balise <a>: La balise a va pemettre un lien vers d'autre page de votre site ou vers un autre site.
La balise <img>: La balise img va pemettre de mettre une image sur votre site. L'image doit etre en format jpg pour être sur que votre image s'affiche.
* A chaque fois que vous commencer a écrire une balise et que le nom de la balise s'affiche en dessous faites entré. Ca pemettera de generé la balise complete. C'est a dire le debut et la fin de votre balise. Exemple: <p> </p>.
On va commencer par mettre un haut de page avec la balise header, un titre avec la balise h1 (hésitez pas à essayer les autres h 😀), puis on va mettre un texte (paragraphe) avec la balise p. Hésitez pas a espacer vos balise pour mieu vous retrouver. Pour voir l'affichage du code htlm juste en dessous.
<!DOCTYPE html> <html> <head> <title> site exemple </title> <meta charset="utf-8"> </head> <body> <header>Bonjour!</header> <h1>Bienvenue sur mon site!</h1> <p>C'est mon premier site.</p> </body> </html>
Maintenant, on va voir comment mettre un lien vers un page de votre choix avec la balise <a>. La balise <a> va générer cette balise: <a href="vous allez mettre votre lien ici (faites un copier/coller du lien que vous voulez mettre"> ici, c'est le texte qui sera afficher sur votre site </a>. Un petit exemple?
Pour voir l'affichage du code htlm juste en dessous.
<!DOCTYPE html> <html> <head> <title> site exemple </title> <meta charset="utf-8"> </head> <body> <header>Bonjour!</header> <h1>Bienvenue sur mon site!</h1> <p>C'est mon premier site.</p> <a href="https://www.google.com"> lien vers google </a> </body> </html>
Enfin, on verra comment mettre une image avec la balise <img>. Il existe deux methodes pour mettre une image, nous on verra la façon la plus simple et la plus utilisé. La balise <img> va générer cette balise: <img src=""> . Entre les "", vous allez mettre le nom du dossier où vous avez placé votre image. Si vous avez suivi les étapes précédentes, votre dossier s'appel img, sinon vous mettez le nom que vous avez mis: si cest image vous mettez image etc. Une fois le nom du dossier mis vous mettez un / puis le nom de votre image au format jpg. Moi mon image se nomme yoda.jpg. Un petit exemple?
Pour voir l'affichage du code htlm juste en dessous.
<!DOCTYPE html> <html> <head> <title> site exemple </title> <meta charset="utf-8"> </head> <body> <header>Bonjour!</header> <h1>Bienvenue sur mon site!</h1> <p>C'est mon premier site.</p> <a href="https://www.google.com"> lien vers google </a> <img src="img/yoda.jpg"> </body> </html>