Créer une Première Page HTML5 avec Sublime Text 2

Réaliser une structure de page HTML5 de base
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Cours HTML5 et CSS3 / Part 1
Revoir le teaser Je m'abonne
5,0
Transcription

39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
5,0
39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Les objectifs de cette vidéo sont de comprendre la structure de base d'une page HTML, de learning l'utilisation des balises essentielles HTML5 et d'apprendre les bonnes pratiques de nommage et d'enregistrement des fichiers web.

Découvrez les fondements de la création d'une page HTML avec Sublime Text 2 en suivant cette leçon sur la déclaration de DOCTYPE, les balises HTML, HEAD, BODY et TITLE.

Dans cette leçon, nous allons explorer les étapes essentielles pour créer une page HTML de base en utilisant Sublime Text 2. Nous commencerons par la déclaration de DOCTYPE, indispensable pour définir la version HTML de la page, en l'occurrence HTML5. Ensuite, nous allons introduire les balises HTML qui contiennent toute la structure de la page, suivies des balises HEAD et BODY. La balise HEAD comprendra des éléments comme META et TITLE, apportant des informations supplémentaires au serveur et aux moteurs de recherche. La balise BODY, quant à elle, contiendra le contenu visible pour l'internaute. Nous mettrons en lumière l'importance de la balise TITLE tant pour le référencement que pour une navigation fluide. Enfin, nous verrons comment enregistrer correctement cette page en respectant les conventions de nommage des fichiers web, afin d'éviter les problèmes lors de la mise en ligne.

Voir plus
Questions réponses
Pourquoi est-il important de déclarer un DOCTYPE dans une page HTML?
La déclaration de DOCTYPE est importante car elle indique au navigateur quelle version HTML la page utilise, assurant ainsi une interprétation correcte des balises HTML.
Quels sont les éléments principaux contenus dans la balise HEAD?
Les éléments principaux de la balise HEAD sont les balises META, TITLE, et éventuellement des liens vers des feuilles de style ou des scripts. Ils fournissent des informations supplémentaires au navigateur et aux moteurs de recherche.
Que voit l'internaute dans le BODY d'une page HTML?
L'internaute voit tout le contenu visible défini dans la balise BODY, y compris les textes, images, vidéos, et les éléments de mise en page.
Nous allons à présent réaliser une première page, donc une structure de page de base. J'ai ouvert le logiciel Sublime Text 2, qui est un logiciel qui ne comporte pas d'artifice particulier, et je vais réaliser les différentes balises qui permettront de réaliser une page de base. Une page HTML commence toujours par une déclaration de DOCTYPE. Le DOCTYPE, c'est en gros la grammaire des différentes balises HTML. On l'écrit de cette manière, un chevron inférieur, un point d'exclamation. On écrit DOCTYPE et puis HTML. Le DOCTYPE que j'ai écrit là est un DOCTYPE pour une base de page HTML5. C'est ce que nous utiliserons par la suite des différentes leçons. Nous sommes résolument modernes et donc aujourd'hui la majorité des navigateurs acceptent ce type de page HTML5. Ensuite, nous créons une première balise qui s'appelle HTML, c'est-à-dire c'est le début de la page. Un petit conseil, lorsque vous créez une balise d'ouverture, c'est-à-dire c'est la première balise, tout de suite, un peu plus bas, vous réalisez la balise de fermeture. De cette manière, cela vous évitera d'oublier sa fermeture. De nombreux navigateurs affichent mal les pages si elles n'ont pas l'ouverture et la fermeture, s'il leur manque l'une des deux. HTML constitue l'ensemble de la page. A l'intérieur de la zone HTML, il y a une zone qui se nomme HEAD, que l'on pourra appeler en tête. Alors pareil, HEAD et puis fin de HEAD. Nous y reviendrons dans quelques instants. Cette partie HEAD étant invisible pour l'internaute. Et ensuite, une autre partie, la plus importante certainement, qui est une partie qui s'appelle BODY. Pareil, je vais mettre une fin de BODY. Voici, alors tout ce qu'il y a à l'intérieur de BODY, c'est en fait votre page. L'internaute verra ce qu'il y a ici, à l'intérieur de la zone BODY. Bien entendu, nous allons créer les différentes balises par la suite. Mais ce mot bonjour sera vu lorsque nous afficherons cette page dans un navigateur. Alors je n'ai pas tout à fait terminé. A l'intérieur de la zone d'en tête, il y a un certain nombre de balises qui permettront de donner des informations supplémentaires à la page. Des informations qui seront utiles pour le serveur. Il y a notamment une balise qui se nomme META. Nous consacrerons une leçon sur les balises de la zone d'en tête, sur ces META. Alors, balise META avec cet attribut, ChartSet, égale UTF-8. Alors la balise META est une balise particulière, un tout petit peu comme celle que nous avons vu tout à l'heure concernant les balises. Une balise qui s'autoferme. Et enfin, une autre balise très importante, elle est même obligatoire. Une balise qui se nomme TITLE. Je vais mettre PAGE DE BASE. Voilà, nous avons terminé la structure. Je reviens quelques instants sur ce TITLE. Le TITLE, c'est le titre de votre page. C'est une balise extrêmement importante, puisque finalement, si l'on prend la ligne 1, la ligne 2, la ligne 3, la ligne 4, tout ça ce sont des balises. Sur cette ligne 5, il y a également une balise TITLE. Mais là, c'est la première chose que vous avez réellement écrit. Au niveau d'un moteur de recherche, c'est quelque chose qui est théoriquement très important, puisque ce que vous avez écrit là, c'est ce que représente le contenu de votre page. Normalement, on y écrit véritablement le contenu. Donc ça, c'est une première chose. Ce TITLE est très important pour cette raison. Deuxième raison, lorsque l'internaute aime votre page et qu'il souhaite la mettre en tant que favori, c'est ce que vous avez écrit là, dans TITLE, qui sera placé dans les favoris. Donc si vous avez écrit UNTITLE ou PAGE SON NOM ou autre chose, c'est ce que verra l'internaute, ce qui n'est pas une très bonne indication. Moi, j'ai écrit PAGE DE BAGE parce que nous réutiliserons cette page par la suite, mais il serait judicieux d'écrire véritablement le nom du futur site. D'autant plus que cette balise TITLE est également une balise obligatoire. Il y a peu de balises obligatoires, mais celle-ci en est l'une. Alors à présent, je vais enregistrer cette page. Je veux l'enregistrer à l'intérieur du dossier concentré à cette leçon, donc RÉALISER UNE PREMIÈRE PAGE, et je l'enregistre sous le nom INDEX.html parce que nous considérons que c'est la première page de notre site. Petite précision, le nom d'une page ne doit jamais comporter d'accent, ni d'espace, ni de lettre particulière. La seule lettre particulière autorisée étant le petit tiré ou l'underscore, donc le tiré bas. C'est quelque chose de très très important. Pas d'espace. Si vous devez écrire PAGE DE BASE, par exemple, parce que vous souhaitez un mot composé, il est judicieux d'écrire de cette manière PAGE, tout en minuscules, le premier lettre du deuxième mot avec une majuscule, DE, et puis BASE. C'est ce que l'on appelle la nomenclature en chameaux, donc avec des majuscules placées à l'intérieur du même mot. Mais ici, je n'ai pas mis d'espace, ni aucun autre signe. Certaines personnes préfèrent écrire UNDERSCORE, BASE, par exemple, avec ou sans majuscule. Ici, ce n'est pas l'importance. On peut l'écrire également de cette manière, ou encore avec des petits tirés, si vous le souhaitez. Retenez bien cela, parce qu'autrement, lorsque vous allez mettre en ligne, vos pages ne marcheront plus, étant donné qu'un serveur remplace généralement les espaces, que vous voyez ici, par un signe propre au serveur, qui est %20. Et du coup, le serveur cherchera quelque chose qui s'appelle %20, alors que vous lui proposez une page qui est avec un espace tout simple. Donc, jamais d'espace, ni d'accent, ni de lettres particulières, telles que point d'interrogation, point d'exclamation, etc. Index pour notre page. Enregistration. Et donc, dans Sublime Text, l'ensemble des balises a pris une couleur par rapport à l'enregistrement. Alors, nous allons simplement regarder cette page dans le navigateur. Voilà, c'est une page très simple, puisqu'elle n'a qu'un mot, mais ce mot est correctement affiché dans Chrome.
8 commentaires
5,0
8 votes
5
4
3
2
1
Polyores
Il y a 11 months
Commentaire
Bravo et bravo encore. Belle méthodologie. Hâte de voir la suite de la démystification du Html
ralahoul
Il y a 1 year
Commentaire
Une formation très intéressante et très bien construite.
eric.gk78
Il y a 3 years
Commentaire
excellent, compréhensible pour les débutants
alexwebtv
Il y a 3 years
Commentaire
Très bonne formation .
gabamano85
Il y a 3 years
Commentaire
Très belle présentation et facile à comprendre même pour un novice.
olivier_89
Il y a 3 years
Commentaire
explication très organisée et simple de comprendre pour les débutants
a.platiau_1
Il y a 3 years
Commentaire
Super formation. Très claire et très bien organisée.
ezerrou
Il y a 3 years
Commentaire
est ce la 2éme partie existe sur ce cours?
Nos dernières formations XHTML/CSS
  • Créer un site web avec HTML/CSS
    Découvrir
    Avant d'apprendre à développer et mettre en ligne votre propre site Internet, il est important de bien connaître les bases du HTML et du CSS. Dans cette formation en vidéo et cours en ligne, vous découvrez ce qu'est le HTML et CSS ? Le fonctionnement des sites web ainsi que la structure d'une page HTML.  Vous êtes guider pas à pas pour apprendre à intégrer des images, de l'audio et des vidéo. Vous apprenez à gérer et ajuster les polices en CSS, à comprendre la structure du CSS, les tableaux, boutons et formulaires en CSS.  Vous suivez la méthodologie de mise en page CSS et à styliser une page web avec le CSS. Formation pratique vous créez et stylisez les éléments principaux d'un site web avant de mettre en ligne et indexer un site, d'ajouter des éléments graphiques en CSS et d'animer un site en CSS
    16h20 14 leçons
  • Apprendre CSS 3
    Découvrir
    14h58 172 leçons 4,50 / 5
  • Apprendre HTML 5 - Les fondamentaux
    Découvrir
    Maîtriser les fondamentaux du language HTML5.
    5h11 101 leçons 3,67 / 5
  • Maîtriser Materialize CSS - Le framework pour le Material Design
    Découvrir
    Maîtriser le framework Materialize CSS pour faire du Material Design
    2h22 20 leçons
  • Maîtrisez les Flexbox CSS - La mise en page responsive
    Découvrir
    Maîtriser la mise en page grâce à la flexbox issue du CSS 3
    46min 9 leçons 4,33 / 5