TD1 Initiation Au HTML

[Tapez ici] [Tapez ici] [Tapez ici]
TD1 Initiation au HTML

Exercice 1 : création de votre première page html
*
Nous allons commencer par créer un document html très petit, et nous l'enrichirons au fur et à mesure.
1. Préparez votre espace de travail en créant un

dossier "public_html_local_votreGroupe" dans lequel vous allez
créer un sous-dossier "TD1_exercice1".
2. Encoder Le schéma de base d’une page HTML, en respectant bien
l'écriture des balises.
En vous aidant, prenez un éditeur de texte (VSCODE) et copiez la
totalité du code (sans numéro de ligne), de l'exemple Ci-contre.
3. Enregistrez votre document sous le nom de "mapage.html".
Attention à bien renseigner l'extension en .html et non en .txt
4. Visualisez le résultat dans votre navigateur Internet (Google chrome,
Internet Explorer, Firefox, Safari...)
Exercice 2 : Modification du fichier html
1. Ajoutez à l'intérieur de <body>...</body>, la phrase « Ma première page en html. » dans le fichier mapage.html
et visualisez le résultat sur votre navigateur.
Pour voir les changements dans votre navigateur il faut rafraîchir (actualiser) la page.
Méthode : Pour rafraîchir la page vous pouvez utiliser une de ces méthodes:
 Cliquer sur la flèche ronde de votre navigateur

 Appuyer sur la touche F5
 Appuyer sur les touches ctrl+r
Dans certains cas, ce rafraîchissement ne suffit pas (images en cache), essayez alors:
 Cliquer sur la flèche ronde de votre navigateur tout en appuyant sur "maj"
 Maj+F5
 Maj+ctrl+r
1. Modifier maintenant la ligne <meta charset="utf-8"> en la ligne <meta charset="iso-8859-1">

2. Inscrire dans le fichier mapage.html une autre phrase de votre choix contenant des accents et visualisez le
résultat sur votre navigateur.
Rappel : Permet la configuration de la fenêtre d'affichage pour que votre site Web ait une belle apparence sur tous
les appareils, (Permet de contrôler les dimensions et la mise à l'échelle de la page.)

1. Ajoutez la ligne ci-dessus à l'intérieur de la balise <head>...</head>, puis inspectez votre document en mode
Toggle device pour simuler une navigation avec un téléphone ou une tablette
D’autres cas :
 Définissez des mots-clés pour les moteurs de recherche :

<meta name="keywords" content="HTML, CSS, JavaScript">
 Définissez une description de votre page Web :
<meta name="description" content="Free Web tutorials for HTML and CSS">
 Définir l'auteur d'une page :
<meta name="author" content="John Doe">
 Actualiser le document toutes les 30 secondes :
<meta http-equiv="refresh" content="30">
Exercice 5 : La mise en forme

1. Ecrivez l'extrait de code HTML qui réalise ce titrage toujours dans le même fichier (mapage.html), en conservant
toutes les modifications antérieures.
Titre 1 : Infos perso

Titre 2 : Objectif de carrière
Titre 3 : Expérience
Titre 4 : Formation
Titre 5 : Références
Titre 6 : Intérêt
Avez-vous besoin d'ajouter la balise <br> après une balise d'entête <h1-6> ou un paragraphe <p> ? Pourquoi ?
2. Rajoutez l'extrait de code HTML qui réalise ces lignes :
a. « Tu ne sais jamais à quel point tu es fort, jusqu'au jour où être fort reste ta seule option. », Bob Marley.
b. ax2 + bx + c = 0
c. a2 + b2 = c2
3. Encodez les mises en forme proposées ci-dessous.

a. <i> </i> Italique
b. <sub> </sub> Indice
c. <sup> </sup> Exposant
Exercice 6 :
Écrire une page HTML5, qu'il y ait exercice6 comme nom de document et titre, et qui affiche :
Remarque : Ajoutez une barre (ligne) entre chaque élément, et vérifier l'affichage (<hr/>)
a. Un texte important (strong), j. Un texte en mode abréviation (abbr),

b. Un texte sur lequel on met l'accent (em), k. Un texte en mode variable (var),
c. Un texte en télétype (tt), l. Un texte en mode saisie clavier (kbd),
d. Un texte en mode échantillon de code (samp), m. Un texte contenant des mots séparés par
e. Un texte en mode citation (cite), plusieurs espaces,
f. Un texte en mode apostrophe (q), n. Un texte contenant des mots séparés par
g. Un texte en mode insertion (ins), plusieurs espaces insécables,
h. Un texte en mode suppression (del), o. Un texte préformaté (pre),
i. Un texte en mode acronyme (acronym),
p. Un texte en mode apostrophe en bloc q. Un texte en mode adresse (address),
(blockquote), r. Un texte en mode code source (code),
Exercice 7 :
Vous allez créer une page, appelée exercice7.html, dans laquelle on va manipuler quelques attributs.
1. Remplacez la ligne <body> par la suivante : <body bgcolor="#00C0FF" text=red>

2. Copiez une image dans le répertoire de ce TD, et essayez à la place
<body background="nomImage.ext">
3. Ecrivez ces deux paragraphes :
<p align="justify">Contenu de votre choix.</p>
<p align="center">Contenu de votre choix.</p>
4. Ajoutons ce texte à notre page, pour quelque chose comme :
<h1 align=center>Voici un titre</h1>

<h2>Maintenant un sous-titre</h2>
<h3>Et on peut continuer</h3>
<h4>La profondeur est limitée</h4>
<h5>Pénultième</h5>
<p align=right>Un petit texte aligné à droite pour introduire cette partie, elle le mérite bien, et puis il serait
dommage de se
priver. </p>
<h6>Un vraiment petit paragraphe</h6>
On ajoute encore :
<blockquote>
Mignonne, allons voir si la rose<br>Qui ce matin avoit desclose<br>
Sa robe de pourpre au Soleil,<br>A point perdu ceste vesprée<br>
Les plis de sa robe pourprée,<br>Et son teint au vostre pareil.
</blockquote>
<pre><html> <body></body></html></pre>
5. Essayez le code suivant :
<p>Barre horizontale simple, </p>

<hr>
<p>avec une longeur relative limitée, </p>
<hr width=50%>
<p>avec une longueur absolue, </p>
<hr width=100>
<p>avec d'autres positions dans la page, </p>
<hr width=50% align=right>
<hr width=50% align=left>
<p>avec une épaisseur modifiée, </p>
<hr size=3>
<p>sans l'ombré, </p>
<hr noshade>
<p>avec une longueur dépendant de la taille des caractères, </p>
<hr style="width: 10em;">

N'oubliez pas de changer la taille de votre fenêtre pour voir comment évoluent les traits. Changez aussi la taille des
caractères (dans le menu affichage, ou en appuyant sur CONTROL et + ou -).
Exercice 8 : Mises en forme de paragraphes
Vous allez créer une page, appelée exercice8.html, qui fera apparaître plusieurs mises en forme de paragraphes et
de titres.
La page comprendra 3 parties. Il est conseillé d’aller vérifier dans le navigateur votre travail entre chaque partie.
Description de la page à créer :
 Le fond de la page sera bleu et le texte blanc.

 Le titre de la page sera : Mise en forme de base
1ère partie :
 Un titre de niveau 1 centré : PREMIERE PARTIE

 Un paragraphe avec le texte suivant en rouge :
Je suis le premier paragraphe, je suis rouge…
Une ligne séparatrice de taille 2 et de couleur rouge
2ème partie :
 Un titre de niveau 2 centré : DEUXIEME PARTIE

 Un paragraphe centré constitué des 3 lignes suivantes avec le texte jaune et de taille 5 :
Je suis le 2ème paragraphe au centre en taille 5 et en jaune
 Une ligne séparatrice de taille 7, de 300 pixels de longueur et de couleur noire
3ème partie :
 Un titre de niveau 3 centré : TROISIEME PARTIE

 Un paragraphe, à droite comprenant le texte suivant en taille 7 et la police Arial :
Je suis le dernier paragraphe, je suis en taille 7 avec la police Arial et à droite…
Exercice 9 : Les listes HTML
Ecrivez le code HTML permettant de réaliser la page (exercice9.html) qui représente les figure ci-dessous.
L’image correspond à un fichier nommé dessin.png. Elle se trouve dans le sous répertoire images qui est au même
niveau que la page html.

Exercice1
https://perso.univ-rennes1.fr/virginie.sans/l2pw/TP%201%20Initiation%20au%20HTML.htm
Exercice3
http://iamjmm.ovh/NSI/ressourcesHTMLCSS/cours/htmlCss/ex3.html
exercice 4
https://www.alsacreations.com/article/lire/628-balises-meta.html
https://developers.google.com/search/docs/advanced/crawling/special-tags?hl=fr
https://www.w3schools.com/tags/tag_meta.asp
Exercice 5
https://apcpedagogie.com/html-tp-022018/
Exercice 6
https://toulibre.org/pub/2012-02-29-rencontre/presentation/exercices/
parse_html_files.php@dir=exos_01_html5%252F040_texte&nocrypt&solution&langage=html5.html
https://helios2.mi.parisdescartes.fr/~osalem/CSWD/TP1/TP1.html
exercice 7

https://geometrica.saclay.inria.fr/team/Marc.Glisse/enseignement/html/
https://www.cours-gratuit.com/exercices-html/exercice-html-mises-en-forme-de-paragraphes
https://enacit.epfl.ch/cours/html/exercices/ex_base.html
https://enacit.epfl.ch/cours/html/exercices/ex_attrib_page.html
exercice 8
https://www.cours-gratuit.com/exercices-html/exercice-html-mises-en-forme-de-paragraphes
exercice 9
http://www.exelib.net/html/lister-des-mots-et-leurs-descriptions-en-utilisant-les-listes-de-definitions.html#enonce-tab
https://enacit.epfl.ch/cours/html/exercices/ex_listes.html
https://www.exelib.net/html/les-listes-numerotes-et-les-listes-a-puce.html#enonce-tab

TD1 Initiation Au HTML

Transféré par

Droits d'auteur :

Formats disponibles

TD1 Initiation Au HTML

Transféré par

Informations du document

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

TD1 Initiation Au HTML

Transféré par

Droits d'auteur :

Formats disponibles

[Tapez ici] [Tapez ici] [Tapez ici]