HTML et CSS
Modèle de page HTML
Sous Windows, créez un nouveau sous-dossier dans votre espace de stockage et appelez-le 'essais_HTML_et_CSS'.
Lancer Notepad++ et faire Fichier/Nouveau. Dans le menu langage, choisir H/HTML. Dans le menu Encodage, choisir "Encoder en UTF-8 (sans BOM)" (Unicode 8 bits). Entrer le contenu suivant :
<!doctype html> <html> <head> </head> <body> </body> </html>Enregistrer le fichier dans votre dossier 'essais_HTML_et_CSS', sous le nom "nouveau.html" (par exemple).
Dans le menu "Exécuter" de Notepad++ choisir "launch with..." et le navigateur de votre choix (vous pouvez aussi ouvrir directement le fichier nouveau.html depuis le navigateur). Le navigateur affiche pour le moment une page blanche car votre fichier html ne contient que des balises et aucun contenu affichable
Si vous êtes un brin observateur vous aurez remarqué que les balises HTML vont par deux (il existe quelques rares exceptions, "les balises vides"). Une balise ouvrante comme <body> est associée à une balise fermante , commençant par / comme </body>.. Le code écrit dans la balise ouvrante s'applique au contenu, écrit entre la balise ouvrante et la balise fermante.
Le fichier nouveau.html contient pour l'instant les balises indispensables dans toute page HTML :
- <html> signale le début d'une page html, </html> sa fin
- <head> marque le début de l'en-tête (partie contenant des renseignements utiles au navigateur mais n'apparaissant pas dans la page) , </head> marque la fin de l'en-tête.
- <body> marque le début de la partie affichable de la page (son "corps") </body> sa fin. (L'indication <!doctype> est facultative, elle permet au navigateur de savoir qu'il doit interpéter le HTML comme du HTML 5. Ce nest pas une balise à proprement parler.)
Les balise HTML peuvent s'emboîter selon le principe "dernière ouverte, première fermée". C'est le cas ici pour les balises <head></head> et <body></body> emboîtées entre <html> et </html>.
Que met-on dans l'en-tête, entre <head> et </head>?
On peut par exemple donner un titre à la page, entre les balises <title> et </title> : ajouter la ligne <title> Ma page à moi </title> entre <head> et </head>C'est également dans l'en-tête qu'on peut donner des informations qui ne sont pas du contenu affichable (nom de l'auteur, mots-clé pour l'indexation par les moteurs de recherche ...) introduites par la balise meta.
Ajouter par exemple entre <head> et</head>
<meta name="author" content="mon nom"> <meta charset="UTF-8">La seconde ligne de ce code permettra d'être sûr que le navigateur interpétera bien le contenu comme de l'UTF-8 (important pour les caractères accentués).
name, content et charset sont des attributs possibles de la balise meta, "author","content","UTF-8" sont les valeurs de ces attributs.
On peut également indiquer dans l'en-tête des styles, des scripts, tout ce dont le navigateur peut avoir besoin afin d'interpréter correctement le "corps" du fichier html.
Que met-on dans le "corps" du fichier, entre <body> et </body> ?
Le corps décrit le contenu affichable de la page. Par exemple ajouter "Bonjour tout le monde !" entre <body> et </body>Pour visualiser l'effet de ces changements dans le code, enregistrez votre fichier et actualisez l'affichage du navigateur.
