Comment créer un site en HTML?
Qu'est ce que le HTML
L'Hypertexte Markup Language ou "HTML" est un langage de balises inventé par Tim Berners-Lee à la création d'internet,
c'est l'une des trois inventions issus du World Wide Web avec l'Hypertext Transfert Protocol (HTTP) et les adresses web.
Le HTML est basé sur le SMGL (Standard Generalized Markup Language) qui est un langage généralisé des balises afin d'attirer les entreprises.
Tim Berners-Lee, son créateur, l'annonce en publiquement en août 1991.
à quoi sert le langage HTML
Le langage HTML permet de créer et structurer des pages web simples. La première version comprend le titre du document, la structuration du texte en titres, sous-titres, listes ou texte brut. Jusqu'à la fin des années 90 le html est défini par les implémentations des navigateurs. L'arrivé du navigateur NCSA Mosaic amène deux éléments majeurs : l'insertion des images et l'introduction des formulaires.
historique des versions
HTML 1.0
Sortie en 1992, c'est une version simple qui permet de faire une structure de page très basique.
Comme le langage est hypertextuel il permet de passer d'une page à une autre grâce aux hyperliens mais elle est obsolète de nos jours.
HTML 2.0
Cette version du langage à été validée par le W3C en septembre 1995.
Elle a apportées de nouvelles balises de structure pour le document comme les entêtes, lignes de titres, différents niveaux de titres etc.
Elle a également apporté l'insertion de graphiques, de tableaux et de formulaires pour interagir avec l'utilisateur.
HTML 3.0
Apparue en 1997 HTML 3.0 a été introduit afin de fournir aux créateurs de sites web de meilleurs moyens pour créer des pages web.
HTML 3.2
Version 3 la plus célèbre du HTML, la 3.2 a introduit des nouveautés concernant les polices d'écritures et les images. Mais surtout la grande nouveauté reste l'introduction des applets JavaScript.
HTML 4.0
Introduite en 1998, elle contient des améliorations des propriétés précédentes et permet également une plus grande démarcation entre la présentation d'un document et sa structure ainsi que des formulaires et des tableaux plus complexes.
HTML 5.0
Finalisée en octobre 2014, HTML 5.0 est la dernière version majeur du langage HTML.
Le langage comprend un couche application avec de nombreuses API
Principe du serveur Web
Un serveur web est un ordinateur qui stocke les fichiers composant le site web et les envoie à l'appareil de l'utilisateur visitant le site en question.
Le serveur HTTP le plus utilisé le plus utilisé à ce jour est Apache HTTP Server.
La plus part du temps, un serveur web exécute continuellement d'autres logiciels qui fonctionnent en collaboration avec le logiciel du serveur HTTP.
Notamment MySQL (serveur de base de données) installé et exécuté en parallèle du serveur HTTP ainsi que le script d'interprétation et d'exécution de PHP.
Créer une page web en html
Avant de commencer, il faut déjà savoir que HTML fonctionne comme dit précédemment, avec un système de balises.
Il existe des balises ouvrantes (exemple <body>) et des balises fermantes (exemple </body>), les balises fermentes sont les mêmes que les ouvrantes mais comportent un "/" pour fermer la balise.
Prérequis
Tout d'abord il faudra un éditeur de texte, il y a plein disponible gratuitement sur internet, les plus populaires sont Visual Studio Code et Sublime Texte.
fichier
Pour commencer votre page web il faut créer un dossier dédier à au site puis ouvrir ce dossier dans un éditeur de texte, une fois ceci fait on peut créer votre 1ère page web.
On la nomme comme on veut, mais la première page se nomme généralement index.html.
L'extension est très importante car c'est elle qui définira le type de fichier.
programmation
Une fois le fichier crée, vous pouvez déjà écrire dedans
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>titre de la page</title>
</head>
<body>
</body>
</html>
Ce code est le début de votre page.
<!DOCTYPE html> définit que le fichier est un html et donc la façon d'être lu.
Tout le code de la page est écrit entre les balises <html> et </html> car c'est le point d'entrée de notre code, tout ce qui est écrit en dehors de ces balises ne sera pas lu par le navigateur !!
<head></head> est l'en tête de votre page quand celle ci est ouverte dans un navigateur.
<meta charset="UTF-8"> permet d'avoir une page comportant des accents si elle est en français par exemple.
La balise <title></title> est le titre, le titre de votre page sera ce qui est écrit entre ces 2 balises et
<body></body> est le corps de la page web dans laquelle toute la page sera écrite.
!DOCTYPE html : Indique au navigateur que le document est de type HTML5.
html lang="fr" : Ouvre l'élément HTML et spécifie que la langue du document est le français.
head : Contient les méta-informations sur le document, comme les métadonnées et le titre.
meta charset="UTF-8" : Spécifie l'encodage des caractères en UTF-8 pour supporter la plupart des caractères.
meta name="viewport" content="width=device-width, initial-scale=1.0" : Assure que la page s'affiche correctement sur tous les appareils et tailles d'écran.
title Page Web Simple /title : Définit le titre de la page, affiché dans l'onglet du navigateur.
/head : Ferme la section head.
body : Ouvre l'élément body, qui contient le contenu principal de la page.
header : Ouvre l'élément header pour le titre de la page.
h1 Bienvenue sur ma page web /h1 : Un titre de niveau 1 à l'intérieur du header.
/header : Ferme l'élément header.
nav : Ouvre l'élément nav pour la navigation.
ul : Ouvre une liste non ordonnée.
li a href="#section1" Section 1 /a /li : Un élément de liste avec un lien vers la première section.
li a href="#section2" Section 2 /a /li : Un élément de liste avec un lien vers la deuxième section.
li a href="#section3" Section 3 /a /li : Un élément de liste avec un lien vers la troisième section.
/ul : Ferme la liste non ordonnée.
/nav : Ferme l'élément de navigation.
main : Ouvre l'élément main pour le contenu principal.
section id="section1" : Ouvre une section avec l'identifiant "section1".
h2 Section 1 /h2 : Un titre de niveau 2 pour la première section.
p Ceci est le contenu de la première section. /p : Un paragraphe de texte dans la première section.
/section : Ferme la première section.
section id="section2" : Ouvre une section avec l'identifiant "section2".
h2 Section 2 /h2 : Un titre de niveau 2 pour la deuxième section.
p Ceci est le contenu de la deuxième section. /p : Un paragraphe de texte dans la deuxième section.
/section : Ferme la deuxième section.
section id="section3" : Ouvre une section avec l'identifiant "section3".
h2 Section 3 /h2 : Un titre de niveau 2 pour la troisième section.
p Ceci est le contenu de la troisième section. /p : Un paragraphe de texte dans la troisième section.
/section : Ferme la troisième section.
/main : Ferme l'élément main.
/body : Ferme l'élément body.
/html : Ferme l'élément html.
Créer une mini site web en html
Le site web d'exemple comportera 3 pages en tout
index.html
!DOCTYPE html : Indique au navigateur que le document est de type HTML5.
html lang="fr" : Ouvre l'élément HTML et spécifie que la langue du document est le français.
head : Contient les méta-informations sur le document, comme les métadonnées et le titre.
meta charset="UTF-8" : Spécifie l'encodage des caractères en UTF-8 pour supporter la plupart des caractères.
meta name="viewport" content="width=device-width, initial-scale=1.0" : Assure que la page s'affiche correctement sur tous les appareils et tailles d'écran.
title Accueil - Mon Site Web /title : Définit le titre de la page, affiché dans l'onglet du navigateur.
body : Ouvre l'élément body, qui contient le contenu principal de la page.
header : Ouvre l'élément header pour le titre de la page.
h1 Bienvenue sur Mon Site Web /h1 : Un titre de niveau 1 à l'intérieur du header.
nav : Ouvre l'élément nav pour la navigation.
ul : Ouvre une liste non ordonnée.
li a href="index.html" Accueil /a /li : Un élément de liste avec un lien vers la page d'accueil.
li a href="about.html" À propos /a /li : Un élément de liste avec un lien vers la page "À propos".
li a href="contact.html" Contact /a /li : Un élément de liste avec un lien vers la page de contact.
/ul : Ferme la liste non ordonnée.
/nav : Ferme l'élément de navigation.
main : Ouvre l'élément main pour le contenu principal.
h2 Page d'Accueil /h2 : Un titre de niveau 2 pour la page d'accueil.
p Ceci est la page d'accueil de mon site web. Vous trouverez ici des informations intéressantes. /p : Un paragraphe de texte.
img src="lien de l'image" alt="Image d'accueil" : Une image avec une source et un texte alternatif.
/main : Ferme l'élément main.
footer : Ouvre l'élément footer pour les informations de pied de page.
p © 2024 Mon Site Web /p : Un paragraphe avec un symbole de copyright.
/footer : Ferme l'élément footer.
/body : Ferme l'élément body.
/html : Ferme l'élément html.
about.html
!DOCTYPE html à title À propos - Mon Site Web /title : Similaire à la page d'accueil, avec un titre différent.
body à nav : Identique à la page d'accueil.
header : Un titre de niveau 1 pour la section "À propos".
main : Ouvre l'élément main pour le contenu principal.
h2 Mon Histoire /h2 : Un titre de niveau 2 pour la section "Mon Histoire".
p Voici l'histoire de notre site web./p : Un paragraphe de texte.
img src="liens du site" alt="Image de notre histoire" : Une image avec une source et un texte alternatif.
/main à /html : Identique à la page d'accueil.
contact.html
!DOCTYPE html à title Contact - Mon Site Web/title : Similaire à la page d'accueil, avec un titre différent.
body à nav : Identique à la page d'accueil.
header : Un titre de niveau 1 pour la section "Contact".
main : Ouvre l'élément main pour le contenu principal.
h2 Nos Coordonnées/h2 : Un titre de niveau 2 pour la section "Nos Coordonnées".
p Vous pouvez nous contacter par email à .../p : Un paragraphe de texte.
img src="liens de l'image" alt="Image de contact" : Une image avec une source et un texte alternatif.
/main à /html : Identique à la page d'accueil.
CCS
Les feuilles de style en cascade, ou CSS, sont un langage informatique qui définit la présentation des documents HTML et XML.
Introduit au milieu des années 1990, le CSS est devenu un outil largement utilisé dans la conception de sites web, avec un fort support des navigateurs web dans les années 2000.
L'histoire du CSS remonte aux débuts du web, où le concept de feuille de style était déjà présent, mais sous forme de styles utilisateur définis par les navigateurs eux-mêmes.
Cependant, avec la pression croissante des auteurs pour contrôler la présentation de leurs pages web, des propositions de styles externes ont émergé dans les années 1990.
L'apparition du CSS était une réponse à la question de savoir si HTML devait rester un langage de structuration ou évoluer vers un langage de présentation, ainsi qu'à la question de savoir si les choix de présentation de l'auteur devaient primer sur ceux de l'utilisateur.
Ces débats ont conduit à plusieurs propositions de styles, dont les CSS, qui offraient une alternative à l'évolution du HTML vers un langage mixte de structuration et de présentation.
design du site
Le site va avoir un design assez simpliste
Définit la police générale du site à Arial, ou une police sans-serif par défaut.
Enlève les marges et le padding par défaut pour éviter les espaces indésirables.
Définit un fond gris clair pour toute la page.
Définit un fond vert pour l'entête.
Définit la couleur du texte en blanc.
Ajoute un padding de 1em pour un espacement intérieur uniforme.
Centre le texte.
Enlève les puces des listes et le padding.
Définit un fond gris foncé pour la barre de navigation.
Affiche les éléments de la liste en ligne (horizontale).
Définit la couleur des liens en blanc et enlève la décoration par défaut des liens (soulignement).
Ajoute un padding intérieur pour les liens pour améliorer l'espacement.
Change le fond des liens en gris très foncé lorsqu'on passe la souris dessus pour un effet de survol.
Ajoute un padding de 1em autour du contenu principal pour un espacement intérieur uniforme.
Centre le texte.
Aller plus loin
Cette page parle de créer un site web basique en HTML et CSS mais on peux aller plus loin en créant des site "dynamique" qui changent en fonction de l'utilisateur. Ceci est possible grâce au PHP (voir Comment créer un site en PHP?) et table de données avec des requêtes SQL