Exercices HTML TP 022018
Sommaire
- 1- Objectifs
- 2- Indications pour les exercices
- 3- Rappel
- 4- Énoncé de l'exercice
- 4.1.1- Les textes et les paragraphes
- 4.1.2- Espaces et retours à la ligne
- 4.1.3- Le surlignage, ou mise en évidence, d’un mot ou expression
- 5- Liste des codes HTML des lettres grecques minuscules et majuscules
- 5.1.1- Sommaire du cours HTML
HTML TP 022018
-
Objectifs
- ِSavoir écrire le code minimum en HTML pour créer une page Web.
-
Indications pour les exercices
- Créer un dossier “cours html” (s’il n’était pas crée dans le TP01) sur le bureau, puis un sous dossier "HTMLTP03".
- On nommera les fichiers HTML comme suit : tp03Ex01.html, tp03Ex02.html, tp03Ex03.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
-
Énoncé de l’exercice
-
Les textes et les paragraphes
- Dans votre répertoire de travail (HTML TP03)
- Créer une page HTML (tp03Ex01.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.
- Une balise META pour rediriger la page vers apcpedagogie.com après 20 secondes
- Les balises META 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").
- Une balise META pour indiquer aux robots d’indexation des moteurs de recherche comment se comporter.
- Un titre qui s’affiche dans 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. Titrer votre paragraphe “Les compétences acquises à l’ELITE” avec la balise
h3 - Créer un nouveau paragraphe contenant les lignes suivantes :
- L’équation du second degré est de la forme : ax2 + bx + c = 0.
- Le théorème de Pythagore est souvent exprimé par l’équation suivante : a2 + b2 = c2
- Voici la fonction exponentielle : ex.
- Robert a présenté son rapport à Mlle Bernard.
- La molécule d’eau est symbolisée par : H2O.
- La molécule préférée de presque tous les développeurs est C8H10N4O2, également connue sous le nom de « caféine ».
- Aligner ce paragraphe à droite et l’ajouter une couleur d’arrière plan.
- Réalisez en HTML le système d’équations suivant, sous le titre “Système d’équations”:
- X2 = X1 cos(α + β) – Y1 sin(α + β)
- Y2 = X1 sin(a + b) + Y1 cos(a + b)
- Enregistrer le fichier sous le nom "tp03Ex01.html"
- A l’aide d’un navigateur, ouvrir 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>
-
Liste des codes HTML des lettres grecques minuscules et majuscules
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>.
Texte en Gras
Texte en italique, ou emphasis
Texte passé au marqueur
Terme à définir
Portion de codeTouche de clavier
Variable
| SYMBOLE | CODE CLAVIER | CODE HTML ISO | CODE HTML NOMMÉ | DESCRIPTION |
|---|---|---|---|---|
| α | ALT+ 945 | α | α | Alpha minuscule |
| β | ALT+ 946 | β | β | Beta minuscule |
| γ | ALT+ 947 | γ | γ | Gamma minuscule |
| δ | ALT+ 948 | δ | δ | Delta minuscule |
| ε | ALT+ 949 | ε | ε | Epsilon minuscule |
| ζ | ALT+ 950 | ζ | ζ | Zeta minuscule |
| η | ALT+ 951 | η | η | Eta minuscule |
| θ | ALT+ 952 | θ | θ | Theta minuscule |
| ι | ALT+ 953 | ι | ι | Iota minuscule |
| κ | ALT+ 954 | κ | κ | Kappa minuscule |
| λ | ALT+ 955 | λ | λ | Lambda minuscule |
| μ | ALT+ 956 | μ | μ | Mu minuscule |
| ν | ALT+ 957 | ν | ν | Nu minuscule |
| ξ | ALT+ 958 | ξ | ξ | Xi minuscule |
| ο | ALT+ 959 | ο | ο | Omicron minuscule |
| π | ALT+ 960 | π | π | Pi minuscule |
| ρ | ALT+ 961 | ρ | ρ | Rho minuscule |
| σ | ALT+ 963 | σ | σ | Sigma minuscule |
| τ | ALT+ 964 | τ | τ | Tau minuscule |
| υ | ALT+ 965 | υ | υ | Upsilon minuscule |
| φ | ALT+ 966 | φ | φ | Phi minuscule |
| χ | ALT+ 967 | χ | χ | Chi minuscule |
| ψ | ALT+ 968 | ψ | ψ | Psi minuscule |
| ω | ALT+ 969 | ω | ω | Omega minuscule |
| Α | ALT+ 913 | Α | Α | Alpha majuscule |
| Β | ALT+ 914 | Β | Β | Beta majuscule |
| Γ | ALT+ 915 | Γ | Γ | Gamma majuscule |
| Δ | ALT+ 916 | Δ | Δ | Delta majuscule |
| Ε | ALT+ 917 | Ε | Ε | Epsilon majuscule |
| Ζ | ALT+ 918 | Ζ | Ζ | Zeta majuscule |
| Η | ALT+ 919 | Η | Η | Eta majuscule |
| Θ | ALT+ 920 | Θ | Θ | Theta majuscule |
| Ι | ALT+ 921 | Ι | Ι | Iota majuscule |
| Κ | ALT+ 922 | Κ | Κ | Kappa majuscule |
| Λ | ALT+ 923 | Λ | Λ | Lambda majuscule |
| Μ | ALT+ 924 | Μ | Μ | Mu majuscule |
| Ν | ALT+ 925 | Ν | Ν | Nu majuscule |
| Ξ | ALT+ 926 | Ξ | Ξ | Xi majuscule |
| Ο | ALT+ 927 | Ο | Ο | Omicron majuscule |
| Π | ALT+ 928 | Π | Π | Pi majuscule |
| Ρ | ALT+ 929 | Ρ | Ρ | Rho majuscule |
| Σ | ALT+ 931 | Σ | Σ | Sigma majuscule |
| Τ | ALT+ 932 | Τ | Τ | Tau majuscule |
| Υ | ALT+ 933 | Υ | Υ | Upsilon majuscule |
| Φ | ALT+ 934 | Φ | Φ | Phi majuscule |
| Χ | ALT+ 935 | Χ | Χ | Chi majuscule |
| Ψ | ALT+ 936 | Ψ | Ψ | Psi majuscule |
| Ω | ALT+ 937 | Ω | Ω | Omega majuscule |
|
|
