Bienvenue à ce nouveau cours 🙂 🙂 . Dans ce tuto , nous allons apprendre comment créer un fichier html.
accès rapide
La démo
Structure d’un fichier HTML
HTML est le squelette de notre page Web, il doit être très organisé et bien structuré pour permettre au navigateur de l’afficher facilement.
HTML est représenté comme un arbre de balises. L’élément racine de cet arbre est toujours la balise <html>.
La page web HTML est toujours constituée d’une balise ouvrante <html> située au début de la page et d’une balise fermante </html> située en fin de page.
Dans la balise <html>on ajoute la balise <head> qui est la zone d’en-tête, dans laquelle on peut inscrire les métadonnées et on peut donner un titre à notre page via la balise <title>
Après la balise <head> (en-tête de la page), vient la balise <body> qui est le corps de notre page. Cette balise va contenir tous les éléments de contenus d’une page web, comme des paragraphes, des titres, des listes,des images,des vidéo …
ci-dessous un exemple de structure de page web :
<!DOCTYPE HTML>
<html>
<head>
<title>Ma première page Web</title>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8">
</head>
<body>
Salut !
</body>
</html>
Le résultat de ces lignes de code va nous donner le résultat suivant :
Comment créer un fichier HTML ?
Vous n’avez pas besoin d’avoir de grandes connaissances en informatique pour créer un fichier HTML. Les étapes à effectuer sont très simples.
- ouvrir un éditeur de texte ( si vous n’e connaissez pas’avez pas un éditeur de texte vous pouvez suivre ce tuto )
- Créez un nouveau fichier :
- copier le code suivant et le coller dans le corps de votre fichier :
<!DOCTYPE html>
<head>
<title>Titre de votre page</title>
</head>
<body>
Bienvenue !!!
</body>
</html>- Enregistrez le fichier dans un dossier au format .html.
Pour visualiser le résultat , il suffit juste de double cliquer sur le fichier 🙂
Dans ce tuto , nous avons découvert la structure d’un fichier HTML et comment le créer.
Espérons bien que ce tuto vous a plu. Rattachez vos ceinture pour commencer à coder avec ce langage à partir des tutos suivants 🙂 🙂