Cours 1

Introduction HTML
HTML est le langage de balisage standard pour la création de pages Web.

Qu’est-ce que HTML ?
• HTML signifie Hyper Text Markup Language (langage de balisage hypertexte)
• HTML est le langage de balisage standard pour la création de pages Web
• HTML décrit la structure d’une page Web
• HTML se compose d’une série d’éléments
• Les éléments HTML indiquent au navigateur comment afficher le contenu
abbassi walid _ mohidinet@gmail.com

Navigateurs Web
Le but d’un navigateur web (Chrome, Edge, Firefox, Safari) est de lire des documents HTML et de les afficher correctement.
Un navigateur n’affiche pas les balises HTML, mais les utilise pour déterminer comment afficher le document :

HTML Page Structure
Vous trouverez ci-dessous une visualisation d’une structure de page HTML :

Note: Le contenu à l’intérieur de la section <corps> (la zone blanche ci-dessus) sera affiché dans un navigateur.
Le contenu à l’intérieur de l’élément <title> sera affiché dans la barre de titre du navigateur ou dans l’onglet de la page.
Historique HTML
Depuis les débuts du World Wide Web, il existe de nombreuses versions de HTML :

HTML Documents
Tous les documents HTML doivent commencer par une déclaration de type de document : .<!DOCTYPE html>
Le document HTML lui-même commence par et se termine par .<html></html>
La partie visible du document HTML est comprise entre et . <body></body>
Exemple
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
Le <! Déclaration DOCTYPE>
La déclaration représente le type de document et aide les navigateurs à afficher correctement les pages
Web.<!DOCTYPE>
Il ne doit apparaître qu’une seule fois, en haut de la page (avant les balises HTML).
La déclaration n’est pas sensible à la casse.<!DOCTYPE>
La déclaration pour HTML5 est :<!DOCTYPE>
Éléments HTML
Un élément HTML est défini par une balise de démarrage, du contenu et un balise end.
Éléments HTML
L’élément HTML est tout, de la balise start à la balise end :
<tagname> Le contenu va ici... </tagname>
Exemples de certains éléments HTML :
<h1> Mon Première rubrique</h1>
<p> Mon premier paragraphe. </p>

Éléments HTML imbriqués
Les éléments HTML peuvent être imbriqués (cela signifie que les éléments peuvent contenir d’autres éléments).
Tous les documents HTML sont constitués d’éléments HTML imbriqués.
L’exemple suivant contient quatre éléments HTML (, et ) :<html><body><h1><p>
Exemple
<!DOCTYPE html>
<html>
<body>

</body>
</html>
Exemple expliqué
L’élément est l’élément racine et il définit l’ensemble du document HTML.<html>
Il a une balise de début et une balise de fin .<html></html>
Ensuite, à l’intérieur de l’élément, il y a un élément :<html><body>
<body>

</body>
L’élément définit le Corps du document.<body>
Il a une balise de début et une balise de fin .<body></body>

Puis, à l’intérieur de l’élément, il y a sont deux autres éléments : et :<body><h1> <p>
L’élément définit un en-tête.<h1>
Il a une balise de début et une balise de fin :<h1></h1>
L’élément définit un paragraphe.<p>
Il a une balise de début et une balise de fin :<p></p>

Ne jamais sauter la balise de fin

En-têtes HTML
Les en-têtes HTML sont définis avec les balises to.<h1><h6>
<h1> définit la rubrique la plus importante. définit le moins important rubrique: <h6>
Exemple
<h1>This is heading 1</h1>
Paragraphes HTML
Les paragraphes HTML sont définis avec la balise :<p>
Exemple
<p>This is a paragraph.</p>
<p>This is another paragraph.</p> abbassi walid _ mohidinet@gmail.com
Liens HTML
Les liens HTML sont définis avec la balise :<a>
Exemple
<a href="https://www.schools.com">This is a link</a>
La destination du lien est spécifiée dans l’attribut. href
Les attributs sont utilisés pour fournir des informations supplémentaires sur les éléments HTML.
Vous en apprendrez plus sur les attributs dans un chapitre ultérieur.
HTML Images
Les images HTML sont définies avec la balise.<img>
Le fichier source (), le texte de remplacement (), et sont fournis sous forme d’attributs :srcaltwidthheight
Exemple
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

Comment afficher la source HTML
Avez-vous déjà vu une page Web et vous êtes-vous demandé « Hé! Comment ont-ils fait cela?
Afficher le code source HTML :

Cliquez avec le bouton droit de la souris dans une page HTML et sélectionnez « Afficher la source de la
page » (dans Chrome) ou « View Source » (dans Edge), ou similaire dans d’autres navigateurs. Cela
ouvrira une fenêtre contenant le code source HTML de la page.

Attributs HTML
Les attributs HTML fournissent des informations supplémentaires sur les éléments HTML.
Tous les éléments HTML peuvent avoir des attributs
Les attributs fournissent des informations supplémentaires sur les éléments
Les attributs sont toujours spécifiés dans la balise de début
Les attributs viennent généralement dans des paires nom/valeur comme: name="value »
L’attribut href
La balise définit un lien hypertexte. L’attribut spécifie l’URL de la page Le lien mène à :<a>href
Exemple
<a href="https://www.w3schools.com">Visit W3Schools</a>
Vous en apprendrez plus sur les liens dans nos liens HTML chapitre.
L’attribut src
La balise est utilisée pour incorporer un image dans une page HTML. L’attribut Spécifie le chemin d’accès à l’image à
afficher :<img>src

Exemple
<img src="img_girl.jpg">
Il existe deux façons de spécifier l’URL dans l’attribut :src
1. URL absolue - Liens vers une image externe hébergée sur un autre site Web. Exemple :
src="https://www.w3schools.com/images/img_girl.jpg ».
Notes: Les images externes peuvent être protégées par le droit d’auteur. Si vous le faites Si vous n’obtenez pas
la permission de l’utiliser, vous pourriez enfreindre les lois sur le droit d’auteur. Dans De plus, vous ne pouvez
pas contrôler les images externes; il peut être soudainement enlevé ou changé.
2. URL relative - Liens vers une image hébergée dans le site Web. Ici, l’URL n’inclut pas le nom de domaine.
Si l’URL commence Sans barre oblique, il sera relatif à la page actuelle. Exemple : src="img_girl.jpg ». Si
l’URL commence par une barre oblique, elle sera relative au domaine. Exemple : src="/images/img_girl.jpg ».
Pourboire: Il est presque toujours préférable d’utiliser des URL relatives. Ils ne se cassera pas si vous changez
de domaine.

Les attributs de largeur et de hauteur
La balise doit également contenir les attributs et, qui spécifient la largeur et Hauteur de l’image (en pixels) :<img>width
height
Exemple
<img src="img_girl.jpg" width="500" height="600">
L’attribut alt
L’attribut obligatoire de la balise spécifie un Texte de remplacement pour une image, si, pour une raison quelconque, l’image
ne peut pas être affichée. Cela peut être dû à une connexion lente, ou une erreur dans l’attribut, ou si l’utilisateur utilise un
écran lecteur.alt<img>src
Exemple
<img src="img_girl.jpg" alt="Girl with a jacket">

L’attribut style
L’attribut est utilisé pour ajouter des styles à un élément, tel que la couleur, la police, la taille, etc.style
Exemple
<p style="color:red;">This is a red paragraph.</p>
Vous en apprendrez plus sur les styles dans notre chapitre Styles HTML.
L’attribut lang
Vous devez toujours inclure l’attribut à l’intérieur de la balise, pour déclarer le langue de la page Web. Ceci est destiné à aider les
moteurs de recherche et les navigateurs.lang<html>
L’exemple suivant spécifie l’anglais comme langue :
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Les codes de pays peuvent également être ajoutés au code de langue dans l’attribut. Ainsi, les deux premiers caractères définissen
la langue de la page HTML, et les deux derniers caractères définissent le pays.lang
L’exemple suivant spécifie l’anglais comme langue et les États-Unis comme langue Le pays:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
L’attribut title
L’attribut définit quelques Informations sur un élément.title
La valeur de l’attribut title s’affiche sous forme d’info-bulle lorsque Vous passez la souris sur l’élément :
Exemple
<p title="I'm a tooltip">This is a paragraph.</p>

Résumé
Tous les éléments HTML peuvent avoir des attributs
L’attribut de spécifie l’URL de la page vers laquelle le lien mène href <a>
L’attribut de spécifie le chemin d’accès à l’image à afficher src <img>
Les attributs et de fournir des informations sur la taille des images width height<img>
L’attribut de fournit un texte de remplacement pour une image alt <img>
L’attribut est utilisé pour ajouter des styles à un élément, tel que la couleur, la police, la taille, etc.style
L’attribut de la balise déclare le langue de la page Weblang<html>
L’attribut définit quelques Informations sur un élémenttitle

créer le titre dans la page a-propos.html: "À propos de Robbie Lens" ;
créer le paragraphe associé : "Photographe depuis plus de 5 ans, je réalise des reportages aux
photos dynamiques et pertinentes pour vos projets de communication. Créativité, qualité, et
sérénité pour vous ! Je gère tout, depuis la direction artistique, la réalisation du reportage,
jusqu’à la livraison de vos photos retouchées, prêtes à l’emploi." ;
créer un titre de niveau 2 pour ajouter une section nommée : "Services" ;
créer une liste non ordonnée pour lister les spécialités de Robbie Lens :
Portrait seul ou à plusieurs,
Shooting mode,
Retouches sur mesure,
Développement.

Créez un lien hypertexte avec la balise <a> et l'attribut href
Pour faire un lien hypertexte :
1.on utilise la balise<a>(pour "anchor") pour indiquer qu'on va rediriger vers un autre endroit,
2.puis, on ajoute l'attribut href suivi de=pour annoncer l'endroit vers lequel on veut rediriger,
3.on indique explicitement entre " " l'endroit vers lequel le lien doit rediriger,
4.enfin, on écrit le texte qui doit s'afficher sur l'hyperlien.
À partir de là, il y a des subtilités selon l'endroit où l'on veut rediriger l'utilisateur.
Créez un lien hypertexte vers l'URL d'une page disponible sur internet
Si vous voulez faire un lien vers un autre site existant en ligne, rien de plus simple, il suffit d'utiliser la méthode de copier
l'URL du site entre " "à la suite de l'attribut, comme ceci :
<a href="https://page.com/fr/">Accédez à page</a>
Ce type de lien hypertexte s'appelle un lien absolu : il indique une adresse complète.
Nous allons maintenant voir que l'on peut écrire les liens d'une façon un peu différente, ce qui va nous être utile pour faire
des liens entre les pages de notre site.

Créez un lien hypertexte d'une page à une autre sur votre site
Souvenez-vous : pour l’instant nous n’avons pas d’URL disponible car le site n’est pas
encore en ligne. On va donc créer des liens entre nos pages en utilisant leur nom, et en indiquant leur arborescence dans
notre dossier en local.
Ce type de lien hypertexte s'appelle un lien relatif : il indique où trouver notre fichier HTML.
Cas n°1 : les deux pages sont situées dans un même dossier en local
Si les pages sont dans le même dossier, il suffit d'écrire comme cible du lien hypertexte le nom du fichier vers lequel on
veut amener, par exemple le fichier nommé page2.html.
Si on veut aller de la page 1 à la page 2, voici ce que nous écrirons dans le fichier de page1.html :
<a href="page2.html">Page 2</a>
Mais comment faire si on veut créer un fichier page 3 et le déplacer dans un dossier `/contenu` : comment indiquer le
chemin relatif ?
Justement, la réponse est dans la question : en indiquant le chemin !
Cas n°2 : les deux pages sont situées dans deux dossiers différents en local
Si on veut créer un fichier page 3 et le déplacer dans un autre dossier, par exemple un dossier /contenu , on va donc
indiquer le chemin à suivre pour trouver ce fichier :
<a href="contenu/page3.html">Page 3</a>
Et s'il y a plusieurs sous-dossiers, on écrira ceci :
<a href="contenu/autredossier/page3.html">Page 3</a>
Et si le fichier ne se trouve pas dans un sous-dossier, mais dans un dossier “parent”, on fait comment ?
Si votre fichier cible est placé dans un dossier qui se trouve “plus haut” dans l'arborescence, il faut écrire deux points .. , comme
ceci :
<a href="../page3.html">Page 3</a>
Créez une ancre avec les attributs id et href
Une ancre est un repère que l'on peut mettre dans une page HTML si elle est très longue, cela aide à la navigation et rend un contenu
plus facile à parcourir. Cela permet par exemple aux visiteurs d'un site web d'aller directement à la partie qui les intéresse.
Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors servir de repère. Ce peut être n'importe quelle balise,
une balise de titre par exemple. Voyons comment faire :
La première étape consiste à ajouter l'attribut id suivi de = pour donner un nom à l'ancre entre " " :
<h2 id="mon_ancre">Titre</h2>
L'attribut id sert à donner un nom “unique” à une balise, pour s'en servir de repère. Et, croyez-moi, vous n'avez pas fini d'entendre
parler de cet attribut. Ici, on s'en sert pour faire un lien vers une ancre mais, en CSS, il pourra nous être utile pour repérer une balise
précise, vous verrez. abbassi walid _ mohidinet@gmail.com
Évitez de créer des id avec des espaces ou des caractères spéciaux ; utilisez simplement, dans la mesure du possible, des
lettres et des chiffres pour que la valeur soit reconnue par tous les navigateurs.
La seconde étape consiste à indiquer où se situe l'ancre. La méthode pour se faire varie selon que :
l'ancre est plus bas sur la même page
l'ancre est située sur une autre page
Cas n°1 : l'ancre est plus bas sur la même page
Dans ce premier cas, on crée un lien avec l'attribut href (il contient un dièse # suivi du nom de l'ancre) :
<a href="#mon_ancre">Aller vers l'ancre</a>
Cas n°2 : l'ancre est située dans une autre page
Dans ce cas-là, on tape le nom de la page cible avant le dièse # et enfin le nom de l'ancre :
<a href="index.html#jardin">Le jardin</a>

Voici une nouvelle page qui contient trois liens, chacun amenant vers une des ancres de la page de l'exemple précédent :
<h1>Le Mégamix</h1>
<p>
Rendez-vous quelque part sur la page :<br>
<a href="index.html#cuisine">La cuisine</a><br>
<a href="index.html#jardin">Le jardin</a><br>
<a href="index.html#salon">Le salon</a><br>
</p>

Et voilà pour tout ce que vous devez savoir sur les liens !
Sachez qu'il est possible de configurer un lien pour qu'il ait un comportement un peu particulier.
target="_blank" fait en sorte que le lien hypertexte ouvre un nouvel onglet :
<p>Bonjour. Souhaitez-vous apprendre sur <a href="https://openclassrooms.com"

target="_blank">OpenClassrooms</a> ?</p>
href="mailto:NOMDUMAIL@MAIL.COM" crée un lien hypertexte qui ouvre la boîte mail avec un
nouveau message vide.
href="NOMDEFICHIER.EXTENSION" crée un lien hypertexte qui permet de télécharger un fichier que

vous avez placé au préalable dans le même dossier que votre page web.

En résumé
Un lien hypertexte (ou hyperlien) permet de changer de page. Par défaut, il est en bleu et souligné dans le
navigateur mais on peut modifier ce style en CSS.
Pour faire un lien hypertexte vers un site web existant, on utilise la balise <a> avec l'attribut href pour
indiquer l'adresse de la page web cible. Il s'agit d'un lien absolu. Exemple : <a
href="https://openclassrooms.com"> .
Pour faire un lien hypertexte vers une autre page de son site, on utilise la balise <a> avec l'attribut href
pour indiquer le nom du fichier en local. Il s'agit d'un lien relatif. Exemple : <a href="page2.html"> .
Un lien hypertexte peut aussi permettre d'amener vers un endroit précis d'une page. Il faut créer une
ancre avec l'attribut id pour “marquer” cet endroit dans la page, puis faire un lien vers l'ancre comme
ceci : <a href="#ancre"> .
On se retrouve tout de suite pour le dernier chapitre de la partie, qui vous permettra d'insérer de
magnifiques images dans vos pages web !

Cours 1

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours 1

Transféré par

Droits d'auteur :

Formats disponibles

Introduction HTML

HTML est le langage de balisage standard pour la création de pages Web.

abbassi walid _ mohidinet@gmail.com

abbassi walid _ mohidinet@gmail.com

abbassi walid _ mohidinet@gmail.com

abbassi walid _ mohidinet@gmail.com

Le document HTML lui-même commence par et se termine par .<html></html>

La partie visible du document HTML est comprise entre et . <body></body>

<h1>My First Heading</h1>

abbassi walid _ mohidinet@gmail.com

<h1>My First Heading</h1>

<h1>My First Heading</h1>

abbassi walid _ mohidinet@gmail.com

<p>My first paragraph.</p>

abbassi walid _ mohidinet@gmail.com

abbassi walid _ mohidinet@gmail.com

Afficher le code source HTML :

abbassi walid _ mohidinet@gmail.com

abbassi walid _ mohidinet@gmail.com

abbassi walid _ mohidinet@gmail.com

abbassi walid _ mohidinet@gmail.com

L’exemple suivant spécifie l’anglais comme langue :

abbassi walid _ mohidinet@gmail.com

abbassi walid _ mohidinet@gmail.com

créer un titre de niveau 2 pour ajouter une section nommée : "Services" ;

Portrait seul ou à plusieurs,

Retouches sur mesure,

abbassi walid _ mohidinet@gmail.com

abbassi walid _ mohidinet@gmail.com

<a href="index.html#jardin">Le jardin</a>

abbassi walid _ mohidinet@gmail.com

target="_blank" fait en sorte que le lien hypertexte ouvre un nouvel onglet :

<p>Bonjour. Souhaitez-vous apprendre sur <a href="https://openclassrooms.com"

href="NOMDEFICHIER.EXTENSION" crée un lien hypertexte qui permet de télécharger un fichier que

abbassi walid _ mohidinet@gmail.com

abbassi walid _ mohidinet@gmail.com

Vous aimerez peut-être aussi