ِSavoir écrire le code minimum en HTML pour créer une page Web.
Indications pour les exercices
Créer un dossier “html” sur le bureau, puis un sous dossier "HTML TP 022018".
On nommera les fichiers HTML comme suit : exercice1.html, exercice2.html etc. Pour les images on crée un dossier images, dans lequel on déposera l’ensemble des images nécessaires aux exercices.
Rappel
HTML est un langage imbriqué : les balises sont des instructions qui, insérées dans le document, indiquent au
navigateur comment afficher leur contenu. Les balises sont donc interprétées par le navigateur, elles ne sont
pas affichées à l’écran. Formellement, une balise HTML est un nom encadré par les caractères < (inférieur) et
> (supérieur). Par exemple, <html>.
Énoncé de l’exercice
Les textes et les paragraphes
Créez un sous-répertoire dans le répertoire public_html pour ce TP
Créer une page HTML de base, à l’aide du “Bloc-notes” de Windows. Cette page comportera :
Une balise META pour fournir une description courte (deux à trois phrases courtes) de la page web.
Les balises adéquates pour fournir le nom de l’auteur de la page et une information sur les droits d’auteurs (auteur, année, mention de licence ou mention de type "tous droits réservés").
Un titre qui s’affichedans la barre du navigateur soit “apcpedagogie”.
Ce même titre doit être le titre du document
Le texte suivant (à saisir) : "Les textes et les paragraphes".
Mettre ce texte en gras, souligné, couleur bleu, centré.
Dans un nouveau paragraphe, d’écrire la liste des compétences acquises à l’ILITE en utilisant les listes à puces.
Créer un nouveau paragraphe contenant les lignes suivantes :
L’équation du second degré est de la forme : ax2 + bx + c = 0.
H2O est la formule chimique de l’eau.
Mettre ce paragraphe en italique puis l’aligner à droite.
Réalisez en HTML le système d’équations suivant :
X2 = X1 cos(α + β) – Y1 sin(α + β)
Y2 = X1 sin(a + b) + Y1 cos(a + b)
Enregistrer le fichier sous le nom "TP022018.html"
A l’aide d’un navigateur, ouvrer le fichier que vous venez d’écrire
Espaces et retours à la ligne
A la fin de la page créer un nouveau paragraphe contenant les lignes suivantes :
Un titre de paragraphe: Espaces et retours à la ligne
Texte du premier paragraphe : La balise <br> insère un saut de ligne unique. Elle permet un retour à la ligne sans séparer le paragraphe.
Texte du deuxième paragraphe: La balise <br> est une balise vide, ce qui signifie qu’elle n’a pas de balise de fermeture . Elle s’écris <br /> (avec un espace devant le /).
Le surlignage, ou mise en évidence, d’un mot ou expression
A la fin de la page créer un nouveau paragraphe contenant les lignes suivantes :
Un titre de paragraphe: Espaces et retours à la ligne
Texte du premier paragraphe : Ils existent plusieurs raisons de mettre un mot, une expression ou même une phrase en évidence. L’exemple le plus simple est la mise en GRAS d’un ou plusieurs mots. Ainsi, grâce au contraste généré, ces mots sauteront plus facilement aux yeux de vos lecteurs.
Texte du deuxième paragraphe: Pour mettre en évidence un mot ou groupe de mots, vous disposez de plusieurs balises : Gras, Italique … Une nouvelle balise est apparu en HTML5 : <mark>. La balise <mark> correspond à un coup de surligneur sur une feuille papier.
Texte du troisième paragraphe: Recopier le texte suivant
<strong> Texte en Gras </strong>
<em> Texte en italique, ou emphasis </em>
<mark> Texte passé au marqueur </mark>
<dfn> Terme à définir </dfn>
<code> Portion de code </code>
<kbd> Touche de clavier </kbd>
<var> Variable </var>
Résultat attendue Texte en Gras Texte en italique, ou emphasis
Texte passé au marqueur
Terme à définir Portion de code Touche de clavier Variable