Le langage HTML
Le HTML est le langage permettant de structurer une page Web, c'est un composant essentiel du Web. Je vous propose ici de créer votre propre page web en utilisant les langages appropriés. Dans l'idéal, cette activité doit être fait par deux ou avec deux ordinateurs afin de suivre le diaporama sur un écran et programmer sur l'autre.
II/ Les langages du web
Le document HTML
Le langage HTML n'est pas un langage de programmation mais de balisage. On assemble des éléments pour former une page HTML. On utilise des balises pour mettre en forme son texte. Nous allons réaliser ensemble une page HTML affichable via un navigateur. On vous présente ici l'architecture de base d'une page HTML.
II/ Les langages du web
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Ma page test</title>
</head>
<body>
<p>Voici ma page web</p>
</body>
</html>
<!doctype html> : permet de déclarer que notre page sera du HTML. <html> </html> : élément racine contenant l'ensemble de notre code. <head></head> : on insère dedans toutes les informations utiles pour décrire notre page. (exemple : le CSS) <meta charset="utf-8"/> : On déclare utiliser ici le jeu de polices (de lettre) UTF-8. UTF-8 gère la quasi-totalité des écritures humaines. <title>Ma page test</title> : détermine ce que vous allez afficher dans l'onglet en haut du navigateur. C'est le titre de votre page HTML. Il est déclaré dans l'élément head. <body> </body> : Dans cet élément, on retrouvera l'ensemble du contenu affiché sur la page.
Le document HTML
- Sur votre ordinateur, clique droit pour créer un nouveau dossier, puis le renommer [débuter HTML]
- Dans ce dossier, cliquer droit pour créer un nouveau [Fichier Texte] puis renommer le document [index].
- Ouvrir le document, puis faire [Enregistrer sous] renommer le document [index.html] et sélectionner [Type : Tous les fichiers]
II/ Les langages du web
Normalement, le document s'ouvre maintenant avec un navigateur. Il faut supprimer le document texte de base.
Le document HTML
- Clique droit puis [ouvrir avec] choisir [bloc-note] afin de modifier la page.
- Copier dans cette page, le texte ci-joint.
- Enregistrer puis ouvrir le document sur son navigateur.
- Si cela fonctionne, fermer votre page.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Ma page test</title>
</head>
<body>
<p>Voici ma page web</p>
</body>
</html>
II/ Les langages du web
Anatomie d'un élément HTML
- Un élément HTML, possède une balise ouvrante et une balise fermante. Les éléments permettent de cadrer le format du contenu d'une page Web. (comme l'exemple ci-dessous).
- Ici on utilise l'élément <p></p> pour décrire au navigateur qu'il s'agit d'un paragraphe.
II/ Les langages du web
Sur votre page HTML [index] : Repérer l'élément <p> puis remplacer le texte par celui de l'exemple.
Le langage HTML : Imbrication
Dans le langage HTML, on utilise l'imbrication pour modifier un mot ou une phrase avec des balises à l'interieur d'autres balises. Dans l'exemple suivant, on utilise la balise <strong> </strong> pour mettre en évidence le mot [très]
<p>Mon chat est <strong>très</strong> grincheux.</p>
II/ Les langages du web
Retournez sur votre page HTML pour copier l'exemple.
Le langage HTML : Les types de balises.
Il existe 2 grandes catégories de balises :
- les balises blocs permettent de structurer le texte, elles doivent être fermées ex : <body> ouvre et </body> ferme.
- les balises en ligne, elles s'incorporent dans les balises blocs et permettent de modifier son texte sans sauter de ligne.
On va structure notre premier texte en page HTML en suivant les étapes suivantes : Dans votre page HTML dans l'élément <body></body> je vous demande de faire les manipulations suivantes :
- Utiliser l'élément <h1> Les collines </h1> pour créer un titre.
- Utiliser l'élément <h2> par Guillaume Apollinaire </h2> pour créer un sous-titre.
- Sur le web retrouver, la première strophe du poème Les collines de Guillaume Apollinaire
- Dans l'élément <p></p> copier/coller la première strophe.
- Utiliser la balise [<br>]Un vers[</br] pour sauter une ligne entre chaque phrase de la strophe.
- Utiliser les éléments suivants comme vous le souhaitez pour mettre en forme votre texte : [<em></em>] - [<b></b>]- [<u></u>]
II/ Les langages du web
Le langage HTML : les éléments vides.
Certaines balises n'ont pas besoin d'être fermées. C'est le cas notamment de la balise pour rajouter une image. Nous allons d'ailleurs insérer une image trouvée sur le web dans note page HTML.
II/ Les langages du web
- Entre les balises <body> </body>, utiliser la balise suivante :
- <img src= (noter ici l'adresse URL d'une image sur le web) />
- Enregistrer le document.
- Actualiser le document sur votre navigateur.
- Normalement l'image doit apparaitre.
Le langage HTML : les attributs
Les attributs permettent d'apporter des informations supplémentaires sur les éléments. Ils sont notamment utiles pour l'utilisation du CSS, un autre langage que l'on pourra voir plus tard. Pour la démonstration, on utilisera la balise d'ancrage et trois attributs différents. A noter que la balise d'ancrage est très présente sur le web car elle permet d'insérer un hyperlien.
II/ Les langages du web
Dans votre page HTML suivre la procédure suivante :
- Créer un nouvel élément <p> Suite du poème ici</p>
- On veut mettre en hyperlien "ici":
- On utilise donc la balise [<a href="https://www.poetica.fr/poeme-1044/guillaume-apollinaire-les-collines/"] juste devant ici.
- On souhaite aussi préciser au lecteur, où nous emmène le lien :
- après le lien vers le site on rajoute l'attribut [title="Les collines"]
- On aimerait également que quand on clique sur le lien, on ouvre une nouvelle page :
- à la suite de l'attribut titre on note [target="_blank"]
- Il faut ensuite penser à refermer l'attribut avec [>] puis fermer l'élément avec [</a>] après[ici] évidemment.
Le langage CSS :
- Là où HTML vient structurer la page web, CSS la met en forme. CSS permet de donner un rendu visuel plus soigné et homogène. Il fonctionne sur un principe similaire à HTML. Nous allons voir à présent comment l'utiliser.
- Pour commencer je vais vous demander de créer dans votre dossier [débuter le HTML] une nouvelle page txt à transformer en page HTML. (comme dans la diapo n°2).
- Vous nommerez cette page [Index2]
UTILISER LE LANGAGE HTML et CSS
Le langage CSS : Créer sa page HTML
Copier-coller dans cette page HTML [Index2] le contenu HTML suivant, il ne faudra pas oublier d'[enregistrer sous] en modifiant l'extension [Index2.html] :
<!doctype html> <html lang="fr"> <head> <meta charset="utf-8" /> <title>Démarrer avec CSS</title> </head> <body> <h1>Je suis un titre de niveau un</h1> <p>
Ceci est un paragraphe. Dans ce texte il y a un
<span>élément span</span> et aussi un
<a href="http://example.com">lien</a>.
</p> <p>
Ceci est un second paragraphe. On y trouve un élément
<em>mis en valeur</em>.
</p> <ul> <li>Item un</li> <li>Item deux</li> <li>Item <em>trois</em></li> </ul> </body> </html>
UTILISER LE LANGAGE HTML et CSS
Le langage CSS : Créer sa page CSS
Pour appliquer à une page HTML du CSS, il faut au préalable créer une page CSS dans laquelle on notera l'ensemble des règles de mise en forme de notre page HTML.
Dans le dossier [Débuter le html] : - Créer un nouveau document txt
- Enregistrer sous puis le renommer :
UTILISER LE LANGAGE HTML et CSS
Le langage CSS : Lier page HTML et CSS
Il faut par la suite permettre le lien entre votre page HTML et votre page CSS. POur cela dans la section <head> de votre page html [index2] rajouter l'élément suivant :
<link rel="stylesheet" href="styles.css" />
UTILISER LE LANGAGE HTML et CSS
A partir de maintenant le navigateur comprendra que votre page html est liée à un style css. On va vérifier tout de suite si cela fonctionne :
Dans votre feuille [styles.css] copier/coller ces lignes :
h1 {
color: red;
}
Enregistrer puis cliquer sur [index2] normalement le titre est en rouge. Pour aller plus loin, on peut même dire qu'à partir de maintenant l'ensemble des éléments h1 sont affichés en rouge.
Le langage CSS : Changer la mise en page par défaut.
Sans demande de notre part, nos navigateurs vont afficher les documents HTML avec un style par défaut. Il est possible de personnaliser l'affichage de notre page comme avec l'exemple suivant : On va modifier les puces de notre liste en déclarant sur la feuille [styles.css] :
UTILISER LE LANGAGE HTML et CSS
li {
list-style-type: square;
}
Enregistrer votre page [styles.css] puis actualiser votre page html [index2].
Changer uniquement certains éléments avec les attributs.
On peut en effet mettre en forme des éléments comportant le même nom. Cependant si on souhaite modifier un seul élément, comment faire ? On utilisera la fonction attributs
UTILISER LE LANGAGE HTML et CSS
- Tout d'abord, il faut ajouter l'attribut class sur votre page HTML [index2.html] On va essayer de modifier uniquement le deuxième item de la liste :
- transformer l'élément <li> Item deux </li> en <li class="special"> Item deux </li>
- Enregistrer votre document.
- Dans votre feuille CSS, on va déclarer que l'attribut special est égal à la couleur orange et l'écriture en gras :
.special {color: orange; font-weight: bold; }
Restitution travail
UTILISER LE LANGAGE HTML et CSS
Sur votre Google doc, copier/coller votre feuille de style CSS puis votre page HTML afin que je puisse vérifier votre travail.
Cours
Une page web, est un document constitué de différents langages. Dans ces langages, les principaux sont : Le Html : pour décrire le contenu de la page. Le CSS : pour mettre en forme le langage. La simplicité de ces langages permettent à chacun de s'exprimer sur le web.
UTILISER LE LANGAGE HTML et CSS
Tuto HTML-CSS
Joss Raveleau
Created on November 4, 2023
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Fill in Blanks
View
Countdown
View
Stopwatch
View
Unpixelator
View
Break the Piñata
View
Bingo
View
Create a Secret Code
Explore all templates
Transcript
Le langage HTML
Le HTML est le langage permettant de structurer une page Web, c'est un composant essentiel du Web. Je vous propose ici de créer votre propre page web en utilisant les langages appropriés. Dans l'idéal, cette activité doit être fait par deux ou avec deux ordinateurs afin de suivre le diaporama sur un écran et programmer sur l'autre.
II/ Les langages du web
Le document HTML
Le langage HTML n'est pas un langage de programmation mais de balisage. On assemble des éléments pour former une page HTML. On utilise des balises pour mettre en forme son texte. Nous allons réaliser ensemble une page HTML affichable via un navigateur. On vous présente ici l'architecture de base d'une page HTML.
II/ Les langages du web
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>Ma page test</title> </head> <body> <p>Voici ma page web</p> </body> </html>
<!doctype html> : permet de déclarer que notre page sera du HTML. <html> </html> : élément racine contenant l'ensemble de notre code. <head></head> : on insère dedans toutes les informations utiles pour décrire notre page. (exemple : le CSS) <meta charset="utf-8"/> : On déclare utiliser ici le jeu de polices (de lettre) UTF-8. UTF-8 gère la quasi-totalité des écritures humaines. <title>Ma page test</title> : détermine ce que vous allez afficher dans l'onglet en haut du navigateur. C'est le titre de votre page HTML. Il est déclaré dans l'élément head. <body> </body> : Dans cet élément, on retrouvera l'ensemble du contenu affiché sur la page.
Le document HTML
II/ Les langages du web
Normalement, le document s'ouvre maintenant avec un navigateur. Il faut supprimer le document texte de base.
Le document HTML
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>Ma page test</title> </head> <body> <p>Voici ma page web</p> </body> </html>
II/ Les langages du web
Anatomie d'un élément HTML
II/ Les langages du web
Sur votre page HTML [index] : Repérer l'élément <p> puis remplacer le texte par celui de l'exemple.
Le langage HTML : Imbrication
Dans le langage HTML, on utilise l'imbrication pour modifier un mot ou une phrase avec des balises à l'interieur d'autres balises. Dans l'exemple suivant, on utilise la balise <strong> </strong> pour mettre en évidence le mot [très]
<p>Mon chat est <strong>très</strong> grincheux.</p>
II/ Les langages du web
Retournez sur votre page HTML pour copier l'exemple.
Le langage HTML : Les types de balises.
Il existe 2 grandes catégories de balises :
On va structure notre premier texte en page HTML en suivant les étapes suivantes : Dans votre page HTML dans l'élément <body></body> je vous demande de faire les manipulations suivantes :
II/ Les langages du web
Le langage HTML : les éléments vides.
Certaines balises n'ont pas besoin d'être fermées. C'est le cas notamment de la balise pour rajouter une image. Nous allons d'ailleurs insérer une image trouvée sur le web dans note page HTML.
II/ Les langages du web
Le langage HTML : les attributs
Les attributs permettent d'apporter des informations supplémentaires sur les éléments. Ils sont notamment utiles pour l'utilisation du CSS, un autre langage que l'on pourra voir plus tard. Pour la démonstration, on utilisera la balise d'ancrage et trois attributs différents. A noter que la balise d'ancrage est très présente sur le web car elle permet d'insérer un hyperlien.
II/ Les langages du web
Dans votre page HTML suivre la procédure suivante :
Le langage CSS :
UTILISER LE LANGAGE HTML et CSS
Le langage CSS : Créer sa page HTML
Copier-coller dans cette page HTML [Index2] le contenu HTML suivant, il ne faudra pas oublier d'[enregistrer sous] en modifiant l'extension [Index2.html] :
<!doctype html> <html lang="fr"> <head> <meta charset="utf-8" /> <title>Démarrer avec CSS</title> </head> <body> <h1>Je suis un titre de niveau un</h1> <p> Ceci est un paragraphe. Dans ce texte il y a un <span>élément span</span> et aussi un <a href="http://example.com">lien</a>. </p> <p> Ceci est un second paragraphe. On y trouve un élément <em>mis en valeur</em>. </p> <ul> <li>Item un</li> <li>Item deux</li> <li>Item <em>trois</em></li> </ul> </body> </html>
UTILISER LE LANGAGE HTML et CSS
Le langage CSS : Créer sa page CSS
Pour appliquer à une page HTML du CSS, il faut au préalable créer une page CSS dans laquelle on notera l'ensemble des règles de mise en forme de notre page HTML.
Dans le dossier [Débuter le html] :- Créer un nouveau document txt
- Enregistrer sous puis le renommer :
- [styles.css]
UTILISER LE LANGAGE HTML et CSS
Le langage CSS : Lier page HTML et CSS
Il faut par la suite permettre le lien entre votre page HTML et votre page CSS. POur cela dans la section <head> de votre page html [index2] rajouter l'élément suivant :
<link rel="stylesheet" href="styles.css" />
UTILISER LE LANGAGE HTML et CSS
A partir de maintenant le navigateur comprendra que votre page html est liée à un style css. On va vérifier tout de suite si cela fonctionne :
Dans votre feuille [styles.css] copier/coller ces lignes :
h1 { color: red; }
Enregistrer puis cliquer sur [index2] normalement le titre est en rouge. Pour aller plus loin, on peut même dire qu'à partir de maintenant l'ensemble des éléments h1 sont affichés en rouge.
Le langage CSS : Changer la mise en page par défaut.
Sans demande de notre part, nos navigateurs vont afficher les documents HTML avec un style par défaut. Il est possible de personnaliser l'affichage de notre page comme avec l'exemple suivant : On va modifier les puces de notre liste en déclarant sur la feuille [styles.css] :
UTILISER LE LANGAGE HTML et CSS
li { list-style-type: square; }
Enregistrer votre page [styles.css] puis actualiser votre page html [index2].
Changer uniquement certains éléments avec les attributs.
On peut en effet mettre en forme des éléments comportant le même nom. Cependant si on souhaite modifier un seul élément, comment faire ? On utilisera la fonction attributs
UTILISER LE LANGAGE HTML et CSS
.special {color: orange; font-weight: bold; }
Restitution travail
UTILISER LE LANGAGE HTML et CSS
Sur votre Google doc, copier/coller votre feuille de style CSS puis votre page HTML afin que je puisse vérifier votre travail.
Cours
Une page web, est un document constitué de différents langages. Dans ces langages, les principaux sont : Le Html : pour décrire le contenu de la page. Le CSS : pour mettre en forme le langage. La simplicité de ces langages permettent à chacun de s'exprimer sur le web.
UTILISER LE LANGAGE HTML et CSS