l’HTML (= HyperText Markup Language) est un langage qui permet de
structurer le contenu d’une page web.
HTML n’est pas un langage de programmation, mais un langage de
balisage. C'est-à-dire qu’elle utilise des balises pour fonctionner.
Voici un exemple de code HTML :
Ce document HTML est décomposé en 2 parties :
● <Head> : la partie invisible de la page, possédant des informations
que la page n’affichera pas sur le navigateur, si on devait faire un
exemple avec vous, la partie Head serait l’équivalent de votre
nom, prénom, âge, ce sont des informations importantes mais que
personne ne voit directement.
● <Body> : la partie visible sur le navigateur, c’est ici qu’on va écrire
et afficher des informations ou des images. Chez vous, il s’agirait
de votre physique, votre visage, vos vêtements, etc.
L’HTML s’utilise à l’aide de BALISE, la plupart des balises se font en
duo, une balise et toujours entre < >.
Vous avez par exemple la balise <p> (paragraphe), elle permet d’afficher
du texte basique sur la page web. dans son utilisation vous allez écrire
votre texte en commençant par “<p> mon texte “ et vous le terminerez
par </p> qui permet de fermer votre texte. (Regardez l’image du
document pour mieux comprends)
Travail
Premièrement allez dans le commun, dans technologie, vous aurez un dossier appelé
“Travail HTML”, vous pouvez le copier et le coller dans votre H-Travail
Vous irez ensuite dans le dossier “outils” sur votre bureau et vous ouvrirez Notepad++
Sur Notepad, cliquez en haut à gauche sur “ouvrir”
Allez dans votre H-Travail et ouvrez le document “Base.html”, vous aurez le code vu sur la
page de présentation.
Petit conseil, n’oubliez pas de sauvegarder régulièrement quand vous faites des
modifications avec le logo
Si vous voulez voir les modifications que vous avez fait, allez dans votre H-Travail et double
cliqué sur le document “Base.html” une page va alors se lancer sur votre navigateur,
montrant les changements réalisés, si rien n’a changé, c’est que vous avez possiblement
oublié de sauvegarder votre travail.
Votre objectif, faire votre CV sur une page HTML, un CV par personne, donc si vous êtes à
2, il faudra faire 2 CV.
Dans le CV il me faut :
● Changer le titre de la page (le texte sur l’onglet si vous préférez)
● Un titre en H1 appelé “Identité”
● Votre nom en gras
● Votre prénom en italique
● Votre age
● Un paragraphe vous décrivant simplement
● Un titre H3 appelé “Ecole”
● Mettre l’image dans le dossier de travail
● Faire un paragraphe sur votre passion en expliquant avec vos mots en quoi il
consiste ou ce qui vous plait dedans.
Vous trouverez dans la page suivante un tableau vous donnant des balises vous permettant
de faire le travail demandé.
Pour changer le titre de la page, regardez la balise <Title> dans la partie <Head> de votre
projet.
Structure de texte
Balise Fonction Exemple
<h1> à <h6> Titres. <h1> est le plus grand, <h2>Mes passions</h2>
<h6> le plus petit.
<p> Paragraphe de <p>J’aime le vélo.</p>
texte.Paragraphe de texte.
<br> Saut de ligne (sans besoin de Texte ligne 1<br>Texte ligne 2
fermeture).
<strong> Met le texte en gras. <strong>Important</strong>
<em> Met le texte en italique. <em>Doucement</em>
<hr> Ligne horizontale <hr>
(séparation).
Médias et liens
Balise Fonction Exemple
<a href=""> Crée un lien cliquable. <a
href="https://www.google.com"
>Google</a>
<img> Affiche une image (besoin d’un <img src="image.jpg"
attribut src). alt="Description">
Pour la balise <img>, il faudra télécharger votre image et la mettre dans
le même dossier que votre projet.
A côté de src= vous devez mettre le nom de votre image qui se situe
dans votre dossier avec le nom exact.
