Notes NSI : HTML
et CSS
Vous pouvez facilement changer l’apparence
de ce document.
Points importants
Pour enregistrer, donner au fichier le nom que vous voulez, en terminant par .html.
Il est conseillé de créer un dossier du même nom du fichier pour y mettre tous les documents
en lien.
On distingue deux types de balises : les balises en paires et les balises orphelines. Les
balises en paires s'ouvrent, contiennent du texte, et se ferment plus loin. (On distingue une
balise ouvrante et une balise fermante). Les balises orphelines servent le plus souvent à
insérer un élément à un endroit précis (par exemple une image).
Les attributs sont un peu les options des balises. Ils viennent les compléter pour donner des
informations supplémentaires. L'attribut se place après le nom de la balise ouvrante et a le
plus souvent une valeur. Ex: On pourrait rajouter un attribut qui indique le nom de l'image à
afficher : <image nom="[Link]" />
Balises
La toute première ligne s'appelle le doctype. Elle est indispensable car c'est elle qui
indique qu'il s'agit bien d'une page web HTML (ici HTML5) : <!DOCTYPE html>
C'est la balise principale du code. Elle englobe tout le contenu de votre page. <html>
</html>
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. Cette section est
généralement assez courte. Les informations que contient l'en-tête ne sont pas affichées sur la
page, ce sont simplement des informations générales à destination de l'ordinateur. Elles sont
cependant très importantes !
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.
L'encodage ( charset ) Exemple : <meta charset="utf-8" />
Le titre ne s'affiche pas dans votre page mais en haut de celle-ci (souvent dans l'onglet
du navigateur). <title>.
Un commentaire est une balise HTML avec une forme bien spéciale : <!-- Ceci est
un commentaire -->
<p> et </p> pour écrire un paragraphe.
<br/> pour faire un retour à la ligne.
<br /> pour aller à la ligne sans la sauter.
<h1> et </h1> pour écrire des titres (peut aller jusqu’à h6 en fonction de l’importance
du titre)
<mark> et </mark> surligne le texte (par défaut en jaune).
<em> et </em> pour mettre en valeur le texte(par défaut en italique)
<strong> et </strong> pour mettre très en valeur le texte (par défaut en gras)
<ul> et </ul> (en début de ligne chaque) pour former une liste à puces.
<li> et </li> pour créer une puce/un point/un nombre...
<ol> et </ol> (en début de ligne chque) pour former une liste ordonnée
Le Concepteur vérifie automatiquement les problèmes de mise en forme et de style, et
propose des suggestions qui aident à maintenir la cohérence de votre document de haut en
bas. Cliquez sur Accueil > Concepteur pour revoir et appliquer les suggestions.