Le langage HTML

Transcription

Le langage HTML

Fiche 6 - Le langage HTML
I – Introduction
HTML …………………………………………………………… est un langage universel utilisé pour communiquer sur le Web.
C’est un langage dit de « marquage » (de « structuration » ou de « balisage ») qui permet d’écrire un
document avec des balises de formatage. Ces balises indiquent la façon dont doit être présenté le document
et les liens établis avec d’autres documents.
Vos informations seront ainsi transportées sur cette gigantesque toile de réseaux interconnectés qu'est
Internet, pour aboutir sur n’importe quel ordinateur grâce à un programme appelé ……………………………. ou
…………………….. Tout ceci grâce au protocole http qui permet d’accéder via le réseau à des documents
repérés par une adresse unique (appelée URL).
Ce programme vous permet de surfer sur le Net et d'afficher sur votre écran les «pages » qu'il a
interceptées.
Il y a beaucoup de marques et de types de navigateurs différents.
Des plus simples au plus sophistiqués.
Les plus connus sont Mozilla Firefox ainsi que Internet Explorer de Microsoft mais il en existe beaucoup
d'autres.
Citer ici d’autres navigateurs que vous connaissez ou utilisez :
1 – .............................
2 – …………………..
3 – ..........................
4 – …………………..
Chaque navigateur a sa propre façon de travailler.
A la différence d’un traitement de texte qui restitue exactement votre document sur une feuille de papier
avec votre police de caractères et votre mise en page, vous ne saurez jamais exactement ce que le
navigateur d’un internaute affichera sur son écran.
En HTML, vous n'avez pas la maîtrise totale de votre document.
Pour transiter le plus rapidement possible sur le réseau (notion de bande passante), un format de texte très
compact mais aussi (par conséquence) peu sophistiqué a été adopté.
C'est un format de texte réduit à sa plus simple expression. Et de plus ce format ASCII a été amputé d'un bit
(7 bits au lieu de 8) !
Vous serez donc privés de certains caractères spéciaux comme le « é » pour lesquels il faudra passer par des
codes particuliers.
C’est le prix à payer pour que le langage universel Html s'adapte à toutes les plate-formes (Windows,
Macintoch, smartphone …)
En plus du texte publié sur vote site, il vous faudra inclure des instructions pour le navigateur chargé de le
lire. Ces instructions seront différenciées de votre texte par les signes < et >.
Par exemple <html>
Ces "instructions s'appellent des tags ou des balises.
Quand vous écrirez les balises de votre page HTML, il faudra garder à l'esprit :
- qu'une balise marque une action pour le navigateur (ce qu'il doit faire...).
- que les attributs précisent les modalités de cette action (comment il doit le faire...).
Il existe d’autres langages et des codes plus poussés (jsp, php, javascript …) qui permettent d’accéder à des
fonctions plus évoluées mais dont la complexité ne nous permet pas d’envisager leur étude dans le cadre de
l’horaire réduit d’une séance de l’option ISN.
OPTION ISN – Lycée La Trinité - Fiche 6 Langage_HTML_Elèves
Page 1
II – LES OUTILS NECESSAIRES
Pour réaliser la programmation d’une page en HTML, un simple éditeur de texte (wordpad, bloc-notes) est
suffisant.
Le ficher, enregistré au format .html pourra alors être lu par n’importe quel navigateur.
L’accès à internet ne sera absolument pas nécessaire pour pouvoir visualiser votre page.
Il n’est pas nécessaire, pour l’instant, de travailler avec des logiciels spécialisés même si, nous le verrons plus
loin, leur utilisation nous simplifie grandement la tâche.
III – Création d’une page HTML par programmation
1 – Prise en main
Voici nos premières balises ou tags :
<HTML> Ceci est le début d'un document de type HTML.
</HTML> Ceci est la fin d'un document de type HTML.
<HEAD> Ceci est le début de la zone d'en-tête
(prologue au document proprement dit contenant
des informations destinées au navigateur).
</HEAD> Ceci est la fin de la zone d'en-tête.
<TITLE> Ceci est le début du titre de la page.
</TITLE> Ceci est la fin du titre de la page.
<BODY> Ceci est le début du document proprement dit.
</ BODY> Ceci est la fin du document proprement dit.
- Vous aurez remarqué qu'à chaque balise de début d'une action, soit <...>, correspond (en toute logique)
une balise de fin d'une action </...>.
- Vous noterez aussi que les balises ne sont pas sensibles aux majuscules ou minuscules.
Il est donc équivalent d'écrire <HTML>, <html>, <Html>, etc.
-Pour une meilleure lisibilité et pouvoir reprendre plus facilement un code, il peut être utile d’incrémenter
l’écriture des différents blocs.
2 – Première étape
Ecriture d’un premier document Html:
- Ouvrir l'éditeur de texte (bloc-notes) dans le dossier Démarrer/Programmes/Accessoires
- Ecrire les codes Html suivants:
<HTML>
<HEAD>
<TITLE>OPTION ISN Lycée La Trinité</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
- Enregistrer le document avec l'extension .html ou .htm.
Page 2
- Ouvrir le navigateur.
- Afficher le document via le menu File/Open file...
- Et voilà votre premier (pour certains peut-être) document Html.
Celui-ci est vide (et c'est normal) mais tout à fait opérationnel cependant.
Il faudra maintenant lui fournir du contenu à l'intérieur des balises <BODY></BODY>. Remarquez que votre
"TITLE" est présent dans la fenêtre de l’explorateur.
Pour vos éventuelles modifications, il n'est pas nécessaire de rouvrir à chaque fois le navigateur.
· Retourner dans l'éditeur de texte (sans fermer le navigateur).
· Modifier les codes Html (changer le titre en BIENVENUE à l’option ISN Lycée La Trinité)
· Enregistrer le fichier.
· Utiliser la commande « rafraichir » du navigateur accessible notamment avec la touche F5
3 – Le texte
Tout document Html contiendra en majorité du texte.
Voyons comment l'agrémenter par quelques balises élémentaires.
Gras
[Bold]
...
ou
Début et fin de zone en gras
...
Italique
[Italic]
...
ou
Début et fin de zone en italique
...
Taille de caractère [Font size]
...
taille
Couleur de
caractère
[Font color]


Début et fin de zone en couleur
A la ligne
[Line break]
 
Aller à la ligne
Ligne horizontale
[Horizontal <HR>
Line]
Commentaires
[Comments] 
Centrage
[Center]
<CENTER></CENTER>
Pour séparer 2 paragraphes par
une ligne horizontale
Ne pas afficher
Centrer
Page 3
Ouvrir l'éditeur de texte puis taper les lignes suivantes :
<HTML>
<HEAD>
<TITLE> BIENVENUE à l’option ISN Lycée La Trinité </TITLE>
</HEAD>
<BODY>
exemple de texte simple 
exemple de texte en gras 
exemple de texte en gras 
exemple de texte en italique 
exemple de texte en italique 
exemple de texte en gras et en italique 
texte
en bleu
<!—Et voilà, c'est fini, commentaire visible dans le code mais pas sur l’écran du navigateur-->
</BODY>
</HTML>
Observons le résultat : collez ici le résultat obtenu
Quelques commentaires s'imposent :
- Le texte tout simple s'écrit sans balise. Il sera repris par le navigateur avec la police et taille de caractères
choisis dans sa configuration par défaut.
- Le navigateur affiche le texte qu'on lui "dicte" en passant à la ligne lorsque celui-ci atteint le bord de la
fenêtre. Pour le forcer à passer outre à cette règle de conduite et à faire un saut à la ligne comme vous le
souhaitez, il faut une instruction particulière. C'est la balise . Celle-ci représente une action ponctuelle
et n'a donc pas besoin de balise de fin.
- Le même navigateur ne tient compte que d'un seul espace entre les mots. Ainsi pour lui
texte
en bleu est équivalent à
texteen bleu
- Il n'est pas rare d'utiliser plusieurs balises pour un même élément de texte. Il faut veiller à bien les
imbriquer. Ainsi ... est correct et ... risque de vous créer des ennuis.
- La taille dans peut être indiquée de deux façons :
1. avec un nombre de 1 à 7. La valeur par défaut étant 3.
2. de façon relative par rapport à la valeur par défaut (ici 0). Soit -3 -2 -1 0 +1 +2 +3.
Page 4
- Pour les puristes, les balises et , et ne sont pas totalement équivalentes.
Vous verrez en poussant plus avant votre étude du langage Html que et appartiennent aux
définitions structurales (style logique) dont l'apparence dépend des options reprises dans la configuration du
browser. Les balises et appartiennent aux formats de présentation (style physique) dont l'apparence
dépend de la volonté de l'auteur.
Voici les codes de quelques couleurs basiques.
Bleu #0000FF
Blanc #FFFFFF
Rouge #FF0000
Gris clair #C0C0C0
Vert #00FF00
Violet #8000FF
Jaune #FFFF00
Noir #000000
Afin de mieux comprendre les codes couleurs à utiliser, veuillez visiter cette page :
http://html-color-codes.info/Codes-couleur-HTML/
Application :
Afficher sur votre page : Ce texte est gras, italique non gras et bleu, et rouge.
Ecrire ou collez ici le code HTML que vous avez écrit :
4 – D’autres balises de mise en forme du texte ... ou autres utiles…
-Titres : Les balises <H1>, <H2>, …, <H6> permettent de définir la taille des titres du plus grand au plus petit.
- Police de caractères : Les balises <big>…</big>, …, permettent d’écrire avec une taille plus
grande ou plus petite quand à … permet avec les attributs face, color et size de définir la
police de caractères utilisée, sa couleur et sa taille. Si l’un des trois attributs ou aucun n’est précisé, la valeur
par défaut est celle du système hôte.
Faire un essai de texte avec face= arial color= red size= 20 .
- Retrait : La balise <BLOCKQUOTE>...</BLOCKQUOTE> introduit une citation avec un retrait.
Ce qui est bien pratique pour agrémenter la présentation d’une page.
Ecrire sur votre page html : Voici un texte normal sans blockquote puis Voici un texte avec blockquote.
Remarquez le retrait.
- Vous savez déjà que les navigateurs ne reconnaissent qu'un espace entre les mots.
Ce qui peut se révéler gênant dans certaines situations.
La balise <PRE>...</PRE> affiche un texte dit préformaté. Le navigateur prend ainsi en compte tous les
espaces et sauts de ligne définis à l'écran. P R A T I Q U E !
Page 5
Avant que les tableaux ne soient reconnus par les browsers, les braves pionniers du Html devaient employer
cette balise pour faire des tableaux.
- Adresse : La balise <ADDRESS>...</ADDRESS> indique une adresse (généralement en fin de document).
- Souligne : La balise ... souligne le texte.
Comme, par convention, les éléments servant d'hyperlien sont soulignés (c'est le même que dans les fichiers
d'aide), on évitera le souligner des éléments de texte pour lui donner de l'importance. On préfèrera la
mettre en gras ou dans un format ou une couleur de police différent. Il ne faut donc pas en abuser.
- Clignotement : On peut placer un texte clignotant par la balise <BLINK>...</BLINK>. Cette balise est un peu
tournée en dérision car elle est rapidement ennuyeuse. On lui préfèrera une image animée qui peut être
débranchée après quelques clignotements.
-Barré : La balise <S>…</S> barre le texte entre les pointillés.
- Alignement : Pour aligner du texte, on a utilisé l'attribut ALIGN ou la balise <CENTER>. Il existe une balise
permettant d'aligner différents éléments. C'est :
<DIV align=left>...</DIV>
<DIV align=center>...</DIV>
<DIV align=right>...</DIV>
Cette alternative pour l'alignement horizontal du texte est parfois bien utile pour définir l'alignement d'une
portion de texte.
-Paragraphe : La balise …, pour délimiter un paragraphe. Cette balise supporte l’attribut ALIGN qui
permet de choisir l’alignement utilisé pour l’affichage du paragraphe. Les valeurs autorisées pour ALIGN
sont : left, center, right.
5 – Balises d’insertion d’une image
C'est la balise img qui permet d'insérer une image dans une page HTML. Elle n'a pas besoin d'être refermée
mais certains de ses attributs sont obligatoires.
Attributs obligatoires :
src= Nom_du_fichier.jpg : Pour afficher une image, il faut évidemment indiquer au navigateur le fichier
image qu'il doit traiter. Classiquement, ce fichier doit être au format png, jpg ou gif.
Si le fichier image se trouve dans le même dossier que le fichier HTML, il suffit d'indiquer son nom (en
respectant la casse et avec son extension) sinon il faut indiquer le chemin. Par exemple, si l'image est dans
un dossier images, il faut écrire src= images/ Nom_du_fichier.jpg .
Il est également possible d'utiliser une image Internet mais il faut alors préciser l'URL complète de cette
image.
Par exemple : src= http://www.fenelon-trinite.fr/tl_files/groupe_scolaire/theme/images/trinite.jpg .
alt= Description : Cet attribut permet d'afficher un texte qui s'affiche si l'image n'est pas disponible pour une
raison ou pour une autre. Il est également utile pour les navigateurs qui fonctionnent en mode texte. Bien
que cette balise puisse paraître futile au premier abord, elle est indispensable si vous voulez que votre page
Internet soit validée par le World Wide Web Consorcium (W3C). Plus d'informations à l'adresse
http://www.w3.org/.
Page 6
Attributs optionnels :
border= nombre . Cet attribut permet de définir la taille de la bordure de l'image en pixels. La valeur 0
correspond à l'absence de bordure.
width= largeur
height= hauteur . Ces deux attributs permettent de préciser la taille de l'image. En ne donnant qu'un seul de
ces attributs on conserve les proportions.
title= texte . Cet attribut permettra d'afficher un texte dans une bulle qui apparaîtra au survol de l'image
avec le pointeur de la souris.
align= alignement . Cet attribut permet de définir la façon dont la légende de l'image doit s'afficher. Les
valeurs possibles pour "alignement" sont top, middle, et bottom. La légende se termine par la balise.
Exemple : <img src= http://www.fenelon-trinite.fr/tl_files/groupe_scolaire/theme/images/trinite.jpg align=
top >Légende en haut.
usemap= #nom. Cet attribut permet de faire référence à une structure définissant des zones de l’image
jouant un rôle de liens hypertexte et donc sensibles à un clic de souris. On la définie entre les balises <map>
et </map> où <map> a comme attribut name= ‘’nom’’.
Sur une même page html, insérez une image du lycée de La Trinité et une image du collège Fénelon en
mettant faisant afficher une légende une fois centrée dessous l’image et une autre fois excentrée au-dessus
de l’image, et en faisant apparaître le nom de la photo lorsqu’on la survole avec la souris.
6 – Balises d’insertion d’un lien hypertexte
D'après Wikipédia : « Un hyperlien ou lien hypertexte ou simplement lien, est une
…………………………………………………………………………………………………………………………………………………………………..
permettant de passer automatiquement d'un document consulté à un document lié. Les hyperliens sont
notamment utilisés dans le ……………………………………. pour permettre le passage d'une page Web à une autre
d'un clic ».
La balise suivante peut donc pointer vers deux types de liens :
une URL ou une ancre définie à l'intérieur du fichier HTML lui-même.
Vers une URL :
Exemple à traiter : <a href= http://www.fenelon-trinite.fr/accueil.html>Informations</a>
Vers une ancre : Une ancre est un endroit particulier de votre page web où vous voulez que le navigateur
aille quand on clique sur le lien. Ce peut être intéressant de placer une ancre au début d'un paragraphe
important, par exemple. Il faut donc définir l'ancre au préalable.
Exemple à traiter : <a name= paragraphe1 >Début du premier paragraphe</a>
Et ensuite, on peut faire le lien avec :
<a href= TP1.html#paragraphe1 >Aller au début du premier paragraphe</a. >
Remarquez bien qu'il faut préciser avant la dièse dans quel fichier HTML est définie l'ancre.
Il existe une ancre un peu particulière, #top, qui permet de remonter tout en haut de la page :
<a href= #top >Revenir en haut</a. >
Page 7
Image réactive : Il également possible de faire en sorte qu'une image dissimule un lien hypertexte (vers une
URL ou vers une ancre). Pour cela, il faut utiliser une combinaison de la balise <a> et de la balise <img> :
Exemple à traiter :
<a href="http://www.fenelon-trinite.fr/accueil.html"><img src="http://www.fenelontrinite.fr/tl_files/groupe_scolaire/theme/images/trinite.jpg" alt="Image
réactive" title="Le Lycée !" /></a>
7 – Balises d’insertion de listes
Les listes permettent un affichage structuré d'items. Elles peuvent être ordonnées ou non et peuvent
également être imbriquées (une liste peut contenir d'autres listes).
Les listes ordonnées :
Dans une liste ordonnée, chaque élément de la liste sera numéroté (par un chiffre ou une lettre). Les balises
utilisées sont les suivantes :
<ol>...</ol> : ouverture et fermeture de la liste ordonnée.
<lh>...</lh> : balise optionnelle qui permet de définir le titre d'une liste.
<li>...</li> : élément de la liste. Cette balise possède un attribut optionnel type qui permet de définir
la façon dont sont numérotés les différents éléments de la liste. Cet attribut peut prendre les valeurs
suivantes : 1(chiffres ; valeur par défaut), a (lettres minuscules), A (lettres majuscules), i (chiffres
romains minuscules), I(chiffres romains majuscules). Un autre attribut optionnel de la balise <li> est
l'attribut value qui permet de définir le numéro de départ de la liste.
Exemple à traiter en affichant tous les prénoms du groupe d’élèves:
<HEAD>
<TITLE>Liste des élèves d’ISN</TITLE>
</HEAD>
<BODY>
<OL>
<LH>Liste ordonnée des prénoms des élèves d’ISN</HL>
<LI TYPE= ’’1’’value= ’’4’’>Louis</LI>
<LI>Adrien</LI>
<LI>Thomas</LI>
<LI>Maya</LI>
</OL>
</BODY>
Les listes non ordonnées :
C'est grossièrement le même fonctionnement sauf que chaque élément n'est plus numéroté mais précédé
d'une puce.
<ul>...</ul> : Ouverture et fermeture d'une liste non ordonnée.
<li>...</li> : élément de la liste non ordonnée. Un attribut type peut également être utilisé mais, cette
fois, pour définir la forme de la puce qui précède chaque élément. L'attribut type peut prendre les
valeurs suivantes : disc (disque plein,valeur par défaut), circle (disque vide), square (carré plein).
Page 8
8 – Balises d’insertion de tableaux
HTML offre la possibilité de créer des tableaux. Il s'agit de la principale possibilité de maîtriser la mise en
page globale d'un document (disposition en colonnes, respect des alignements, insertion d'images au milieu
du texte...) si on ne veut pas utiliser de CSS (Cascading Style Sheets).
Les balises à utiliser sont les suivantes :
<table>...</table> : Ouverture et fermeture du tableau. Il est très important de penser à fermer un
tableau sous peine de voir votre page HTML avec un affichage complètement changé ! Cette balise a une
balise optionnelle border permettant de définir l'épaisseur en pixels du cadre du tableau. Sa valeur par
défaut est de 1.
<tr>...</tr> : Ouvre et ferme une ligne dans le tableau.
<td>...</td> : Ouvre et ferme une case dans une ligne.
Exercice : Recopiez le code suivant dans le Bloc-Notes et, par essais successifs, essayez le comprendre le
fonctionnement du codage des tableaux et, en particulier, des balises non décrites précédemment. Vous
enregistrerez votre fichier HTML commenté.
<table border="1" cellpadding="2">
<caption align="bottom">Titre</caption>
<tr>
<th align="left">Script</th>
<th align="left" colspan="2">Exécution</th>
</tr>
<tr>
<td>CGI</td>
<td rowspan="2">par le</td>
<td>serveur</td>
</tr>
<tr>
<td>Javascript</td>
<td>Client</td>
</tr>
</table>
Il existe encore bien d’autres balises …. à vous de les découvrir via internet !
IV – Création d’une page HTML a l’aide d’un logiciel spécialisé
1 – Présentation
Afin de faciliter et automatiser la création de pages internet, il existe des logiciels permettant de transformer
automatiquement en code l’agencement d’une page réalisée sur un écran à l’aide de la souris. Un peu
comme si les images et les lignes tapées avec le traitement de texte Word étaient transformées en lignes de
code HTML.
Page 9
2 – Logiciels d’aide à la création …
Dreamweaver : Ce logiciel polyvalent et extrêmement puissant, permet de créer des pages et de les
transférer sur un serveur. Mais il est très couteux, et ne sera donc pas utilisé ici…
2 - Les lignes de code
sont générées
1 - Création d’un tableau
NVU ( prononcer « N-view »), BlueGriffon : logiciels gratuits assez performants … à vous de vous faire une
idée et de choisir en cherchant sur le net.
V – Travail à effectuer
Réaliser une page HTML (l’ensemble étant le plus esthétique possible du point de vue graphique) qui devra
contenir les codes nécessaires à l’affichage de :
• Un titre dans la fenêtre du navigateur
• Un titre dans le corps de la page
• Une ligne horizontale de séparation
• Un lien vers le site du lycée La Trinité
• Une image du lycée de La Trinité d’une hauteur de 50 pixels
• Un texte de bienvenue
• Une ligne horizontale
• Une image « personnelle » qui vous caractérise avec un texte au passage de la souris
• Le code pour lier cette image à son emplacement sur internet
• Un texte décrivant vos motivations à choisir la spécialité ISN.
• Les prénoms sous forme de liste ordonnée des élèves inscrits à cette spécialité
• Une ligne séparatrice
• Un texte mis en forme (gras, souligné, italique, couleur, clignotant,…) précisant que la page est
inachevée
• Ce fichier doit contenir un titre
• Puis créer un deuxième fichier HTML (avec un titre) contenant un lien vers la page précédente et
votre emploi du temps sous forme de tableau.
• Modifiez le premier fichier HTML pour y inclure un lien vers le second.
Page 10

Le langage HTML

Transcription

Documents pareils

La Course d`Orientation ou comment joindre nature, sport et réflexion

Le langage « HTML »

LISTE DES PRINCIPALES BALISES HTML

L3 info Techno Web Fiche html5 / css3 Exercice 1 Insérer une

TP5 : Introduction au langage HTML I) Présentation II) Les outils

TP HTML n°1 : Annexe

BALISES DE DETRESSE KANNAD 406 AF

BASES DU LANGAGE HTML5

AVANTAGES BALISES 406 MHz

CSS-balises-html - Technomultimedia