1-3 : Créez votre première page web en HTML ici.
‹!DOCTYPE html› :
Indique qu'il s'agit d'une page HTML.
‹html lang="fr"› le contenu ‹/html› :
Englobe tout le contenu de la page web, lang="fr" pour le français.
‹head› contenu ‹/head› :
Ceci correspont à l'en-tête qui contient des balises qui donnent des informations au navigateur dont le contenu peut être : l'encodage, le titre de la page, les pages css et autres.
‹meta charset="utl-8" /› :
Encodage utilisé dans le fichier .html : cela détermine comment les caractères spéciaux s'affichent (lettres, chiffres, accents...).
‹meta charset="utl-8" /› :
• meta : c'est ce qui donne des informations au navigateur sur la manière d'interpréter le code html.
• charstet : c'est un atribut qui précise ce que fait la balise, ex : meta le "=", c'est l'atribut est égal à quelque chose.
"utf-8" : utf-8 est la table d'encodage des caratères. Voir Plus de détails ici.
‹title› contenu ‹/title› :
Indique au navigateur le titre de la page web dans l'onglet du navigateur, pas sur la page et en fonction du contenu choisi.
‹body› contenu ‹/body›:
C'est le corps de la page qui contient tout le contenu qui sera affiché à l'écran sur la page web.
Les balises :
‹balise› est une balise orpheline, exemple pour insérer une image , à un endroit précis. Elles sont parfois accompagnées d'attribut pour donner des indications supp ou paramètrer un élément, exemple ‹img src=“photo.jpg”›.
‹balise›...‹/balise› est une balise en paires : elles s'ouvre et se ferment pour délimiter le contenu, exemple : début et fin d'un titre.
Base d'écriture à retenir :
• Balises paires :
‹X›‹/X ›
X peut être "p", "h1" "div" et autres qui seront vu plutard.
• Balises orphelines :
‹X›
X peut être "img", "input" et autres qui seront vu plutard.
• Attribut: A (bleu claire) et valeur : V (orange) :
Valable dans la première balise paire et la balise orpheline.
‹X A= "V"›
A représente l'attribut qui peut être divers, par exemple "href", "class" et autres qui seront vu plutard, qui donnent l'ordre d'une action .
V représente la valeur qui peut être divers, par exemple "un lien html" "une valeur" qui seront vu plutard, qui donnent la référence de l'action à éffectuer. La valeur indiquer en référence au CSS correspond au selecteur. il peut y avoir plusrieur valeurs séparer par un espace.
Codes couleur, caratères :
Les couleurs indiqué par la suite, ne sont valable que pour cette page, avec CSS on pourait les changer.
• ‹meta› en bleu foncé est une balise, un code HTML qui dit quoi faire avec le contenu.
• "html" en bleu clair, tous comme "lang" et "charset" sont des attributs qui permettent de préciser ce que va faire une balise.
• ‹"...."› en orange se sont des valeurs dont les guillemets sont obligatoire. c'est la syntaxe du langage. Exemple "fr", "utf-8". Ce sont des informations encoder dans le navigateur, elles sont inclus dedans.
Transformer un code en commentaire :
Appuyer sur "CTRL" + "/", selectionner la zone de code en restant appuyé, puis lacher. La zone est transformer en commentaire, ‹!-- le contenu --›, non visible sur la page.
‹p› contenu ‹/p› :
"p" pour paragraphe. Le contenu peut être un paragraphe, une phrase...