C'est quoi HTML et son rôle dans le développement web ?
HTML (Hypertext Markup Language) est un langage de balisage utilisé pour structurer et présenter le contenu d'une page web. Son rôle principal dans le développement web est de décrire la structure et la sémantique du contenu, permettant ainsi aux navigateurs web et aux moteurs de recherche de comprendre et d'afficher correctement les informations.
Autrement dit, HTML signifie « HyperText Markup Language » qu'on peut traduire par « langage de balises pour l'hypertexte ». Ce langage a été inventé par un amécain en 1990 qui est Tim Berners-Lee, qui est également considéré comme l'inventeur du World Wide Web. Il a développé HTML en tant que langage de balisage pour structurer les documents et permettre le partage d'informations à travers les navigateurs web. D'autres technologies sont utilisées avec HTML pour décrire la présentation d'une page (CSS) et/ou ses fonctionnalités interactives (JavaScript). Depuis sa création, HTML a connu plusieurs versions et évolutions, avec la version HTML5 étant la plus récente et largement utilisée à ce jour.
L'« hypertexte » désigne les liens qui relient les pages web entre elles, que ce soit au sein d'un même site web ou entre différents sites web. Les liens ont un aspect fondamental du Web. Ce sont eux qui forment cette « toile » (ce mot est traduit par web en anglais).
Le langage HTML utilise des « balises » pour annoter du texte, des images et d'autres contenus afin de les afficher dans un navigateur web. Le balisage HTML comprend des « éléments » spéciaux tels que : <head>, <title>, <body>, <article>, <header>, <section>, <p>, <div>, <span>, <footer>, <ol>, <li>, <img>, <ul>, <video>,<audio> etc.
En HTML, les balises sont insensibles à la casse et peuvent aussi bien être écrites en minuscules, en majuscules voire avec un mélange des deux. Autrement dit, la balise <title> pourrait très bien être écrite comme<TitLe>,<tITle> ou d'une autre façon.
Dans la balise <html>, on définit deux zones qui
sont : la « tête » en anglais « head » et le « Coprs ».en anglais « body ».
Head: Dans cette
balise là , on met en général toutes les informations qui sont relatives à notre
page mais qui restent au titre d’informations qui ne font pas partie d’un
contenu d’une page web.La balise la plus populaire dans le head est le title
dans le quel on met le titre de la page sur l’onglet.
Body : La balise <body> définit le corps du document.L’élément <body> contient tout le contenu d’un document HTML, comme le texte, des hyperliens, des images, des tableaux, des listes, etc.
Les bases du balisage : les balises, les éléments et les attributs
Les bases du balisage HTML comprennent les balises, les éléments et les attributs. Voici une explication de chacun de ces concepts :
1. C'est quoi les balises HTML ?
Les balises sont des éléments de base utilisés pour marquer et délimiter le contenu dans un document HTML. Elles sont constituées de deux parties : une balise d'ouverture et une balise de fermeture. La balise d'ouverture est représentée par "<" suivi du nom de la balise, tandis que la balise de fermeture est représentée par "</" suivi du nom de la balise. Par exemple, la balise d'ouverture pour un paragraphe est "<p>", et la balise de fermeture correspondante est "</p>". Les balises délimitent le début et la fin d'un élément spécifique dans le document HTML.
Autrement dit, les balises HTML sont les éléments de base du codage HTML. Elles sont utilisées pour mettre en forme un texte, structurer et hiérarchiser le contenu d'une page. Les balises indiquent également au navigateur comment afficher la page en question.
Il existe deux types de balises : balise paire et balise impaire (orpheline)
1.1. Balise paire et balise impaire
Les balises paires (aussi appelées balises d'ouverture et de fermeture) et les balises impaires (ou auto-fermantes).
1.1.1. Balises paires : Les balises paires sont composées d'une balise d'ouverture et d'une balise de fermeture correspondante. Elles entourent le contenu qu'elles affectent. Par exemple :
Dans cet exemple, la balise "<p>" est la balise d'ouverture et la balise "</p>" est la balise de fermeture. Le contenu du paragraphe, c'est-à -dire "Ceci est un paragraphe.", est placé entre ces deux balises.
1.1.2. Balises impaires (auto-fermantes) : Les balises impaires ne nécessitent pas de balise de fermeture distincte. Elles sont auto-fermantes et se terminent avec "/>". Ces balises sont utilisées pour marquer des éléments qui ne contiennent pas de contenu interne, comme les images, les liens, les sauts de ligne, etc. Par exemple :
Dans cet exemple, la balise "<img>" est une balise impaire. Elle est utilisée pour insérer une image dans la page. Les attributs, tels que "src" et "alt", sont spécifiés à l'intérieur de la balise.
Il est important de noter que toutes les balises paires doivent être correctement ouvertes et fermées pour assurer la validité du code HTML. Les balises impaires, quant à elles, peuvent être utilisées seules et n'ont pas besoin d'une balise de fermeture distincte.
En résumé, les balises paires (d'ouverture et de fermeture) sont utilisées pour encadrer le contenu, tandis que les balises impaires (auto-fermantes) sont utilisées pour marquer des éléments sans contenu interne.
2. C'est quoi les éléments ?
Les éléments HTML sont formés par l'utilisation de balises, qui entourent le contenu spécifique. Par exemple, pour créer un paragraphe, on utilise la balise "<p>" pour l'ouverture et "</p>" pour la fermeture, et le contenu du paragraphe est placé entre ces balises. Les éléments sont la combinaison d'une balise d'ouverture, du contenu à l'intérieur et d'une balise de fermeture correspondante. Par exemple :
Dans cet exemple, "<p>" est la balise d'ouverture, "Ceci est un paragraphe." est le contenu, et "</p>" est la balise de fermeture.
3. C'est quoi les attributs ?
Les attributs fournissent des informations supplémentaires sur les éléments HTML. Ils sont spécifiés dans la balise d'ouverture et fournissent des instructions aux navigateurs ou d'autres outils de traitement. Les attributs sont constitués d'un nom et d'une valeur, séparés par un signe égal (=) et encadrés par des guillemets. Par exemple, l'attribut "src" est utilisé pour spécifier la source d'une image :
Dans cet exemple, "src" est l'attribut, "image.jpg" est la valeur de l'attribut, et "alt" est un autre attribut utilisé pour spécifier un texte alternatif pour l'image.
Les balises, les éléments et les attributs sont les éléments de base du balisage HTML. Ils permettent de structurer et de marquer le contenu d'un document HTML, fournissant ainsi des instructions aux navigateurs web sur la façon d'interpréter et d'afficher le contenu.
La structure de base d'une page HTML.
La structure de base d'une page HTML comprend les éléments suivants :
1. Doctype : Il s'agit de la première ligne d'un document HTML qui indique au navigateur quel type de document est utilisé. Par exemple, <!DOCTYPE html> déclare que le document est un document HTML5.
2. Balise HTML : La balise <html> est la balise racine de tout document HTML. Elle englobe tout le contenu de la page.
3. Balise head : La balise <head> contient les métadonnées et les informations sur la page. Cela inclut le titre de la page, les liens vers les feuilles de style CSS, les scripts JavaScript, les balises de méta-description, etc.
4. Balise body : La balise <body> contient le contenu visible de la page web. C'est là que vous placez tous les éléments tels que les titres, les paragraphes, les images, les liens, les tableaux, les formulaires, etc.
Voici un exemple de structure de base d'une page HTML :
<!DOCTYPE html>
<html>
<head>
<title>Titre de la page</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<h1>Titre principal</h1>
<p>Ceci est un paragraphe.</p>
<img src="image.jpg" alt="Image de démonstration">
<a href="https://www.example.com">Lien vers Example.com</a>
</body>
</html>
Dans cet exemple, la balise <html> englobe toute la structure de la page. La balise <head> contient les métadonnées et les références aux fichiers CSS et JavaScript. La balise <body> contient le contenu visible de la page, tel que le titre principal, le paragraphe, l'image et le lien.
<title>titre de la page</title>: qui est le titre du document.
<meta charset="utf-8">: permet de définir l’encodage de caractère de la page.
Cette structure de base doit être respectée pour que le navigateur puisse interpréter correctement la page HTML et afficher son contenu de manière appropriée.
Pour pratiquer le HTML, il faut avoir un éditeur de texte ou un IDE et un navigateur sur votre ordinateur.
Editeur de texte ou éditeur de code
Un éditeur de texte est un logiciel
utilisé pour créer et modifier du texte brut. Les éditeurs de texte offrent
généralement une interface simple et minimale, avec des fonctionnalités de base
telles que l'ouverture, la modification et l'enregistrement de fichiers texte.
Ils sont souvent utilisés pour écrire du code source, rédiger des scripts,
prendre des notes, ou effectuer des tâches d'édition simples où un formatage
plus complexe n'est pas nécessaire.
Exemple : Notepad++, Sublime Text, Visual Studio Code, Atom et Vim.
IDE
Un environnement de développement
intégré (IDE) est un logiciel qui regroupe plusieurs outils destinés Ã
faciliter le développement de logiciels. Il fournit un ensemble complet de
fonctionnalités et d'outils regroupés dans une interface unifiée, permettant
aux développeurs d'écrire, de tester, de déboguer et de déployer leur code de
manière plus efficace.
Exemples : Visual Studio (pour le développement .NET), Eclipse (pour Java), IntelliJ IDEA (pour Java, Kotlin), Xcode (pour le développement iOS), Android Studio (pour le développement Android) et PyCharm (pour Python).
Navigateur
Un navigateur web, également connu sous le nom de navigateur, est une application logicielle conçue pour permettre aux utilisateurs d'accéder et de visualiser des pages web sur Internet. Il agit en tant qu'interface entre l'utilisateur et les sites web, permettant la navigation, l'affichage et l'interaction avec les contenus en ligne.
Exemple : Google Chrome, Mozilla Firefox, Microsoft Edge, Safari et Opera.
Sublime text:
https://www.sublimetext.com/download
Notepad++:
https://notepad-plus-plus.org/downloads/
Brakets:
https://brackets.en.softonic.com/download
Dans le cadre du cours nous allons utiliser sublime text pour faire des exemples, mais vous avez le choix d'utiliser un éditeur ou un IDE.
Comment créer votre premier projet HTML ?
Pour créer un projet HTML, il faut créer un dossier(fichier,folder) pour pouvoir inserer vos pages, vos image, etc.
Etape 1: créer un dossier sur votre ordinateur
Pour créer un dossier sur votre ordinateur, vous pouvez suivre ces étapes générales :
1. Une fois dans l'emplacement
désiré, cliquez avec le bouton droit de la souris sur un espace vide de la
fenêtre de l'explorateur de fichiers. Dans le menu contextuel qui apparaît,
sélectionnez l'option "Nouveau"
si votre pc est en anglais appuyez sur ‘’new’’
et choisissez "Dossier" suivant
la lange de votre pc.
2. Nommez le dossier : Le nouveau
dossier sera créé et apparaîtra avec un nom générique tel que "Nouveau
dossier". Vous pouvez cliquer une fois sur le nom générique et le renommer
en tapant le nom souhaité pour le dossier.
3. Appuyez sur la touche Entrée : Une
fois que vous avez entré le nom souhaité, appuyez sur la touche Entrée pour valider
le nouveau nom du dossier.
Le nouveau dossier sera créé Ã
l'emplacement spécifié et vous pourrez y ajouter des fichiers ou d'autres
dossiers selon vos besoins.
Voici un exemple :
Etape 2: Ouvrir ce dossier avec votre éditeur de texte
Pour ouvrir un dossier avec un éditeur de texte, vous pouvez suivre ces étapes :
1. Ouvrez votre éditeur(sublime text par exemple) : Lancez Sublime Text en cliquant sur son icône dans votre barre des tâches ou en utilisant le raccourci approprié.
2. Accédez à l'option "Open Folder" (Ouvrir un dossier) : Dans la barre de menu supérieure de Sublime Text, cliquez sur "File" (Fichier), puis sélectionnez "Open Folder" (Ouvrir un dossier).
3. Sélectionnez le dossier contenant les fichiers HTML : Parcourez votre système de fichiers pour trouver et sélectionner le dossier qui contient les fichiers HTML que vous souhaitez ouvrir. Cliquez sur le bouton "OK" ou "Open" (Ouvrir) pour confirmer votre sélection.
4. Affichage des fichiers HTML dans la barre latérale : Sublime Text affichera maintenant la structure du dossier que vous avez ouvert dans une barre latérale à gauche de l'interface. Vous devriez voir les fichiers HTML et autres fichiers contenus dans ce dossier.
Voici un exemple:
Etape 3: Créer une premiere page HTML
1. 1. Cliquez avec le bouton droit
de la souris sur le dossier puis appuyez sur ‘’new file’’.
2. 2. Pressez la touche ‘’Ctrl + s’’ pour sauvegarder la page. Entrez le nom de la page.html . Exemple : index.html
N.B : ".html"
est une extension de fichier utilisée pour les fichiers HTML, qui est le
langage de balisage utilisé pour créer des pages web. Il est obligatoire de
mettre le .html après avoir nommé votre page ou votre fichier html.
Voici un exemple:
Etape 4:
Entrer la structure minimale
du document html et un message de présentation
Voici l’exemple
Etape 5: Afficher votre page web dans un navigateur
Cliquez avec le bouton droit de la souris sur le fichier contenant les codes sources puis appuyez sur ‘’ open in bwoser ’’.
N.B : A chaque modification, il faut toujours faire un ‘’
Ctrl + s’’ pour enregistrer les données.
Devoir chapitre 1
Créer une page html , présentez vous normalement en indiquant votre nom complet, votre ville actuelle et votre niveau d’étude. En suite mettez votre photo au-déssous de la présentation.
Vous pouvez mettre n’importe
quelle image, ce n’est pas obligatoire d’insérer votre photo.
Votre commentaire svp...