HEI3 : TD HTMLcolasapoil.free.fr/HEI/HEI3%20TC/Informatique/TD/... · HEI P. Biela Enberg - F. Le Floc'h Notion de Balise Les balises indiquent la structure d'une page Web au navigateur,

HEI P. Biela Enberg - F. Le Floc'h

HEI3 : TD HTMLObjectif :

construction d’un document hypertexte sur Internet

Moyens :

- Internet : notions d’échanges sur le réseau - Langage : présentation d’HTML- Mise en œuvre d’HTML : TD_HEI3_HTML_CV.html


Le réseau Internet


HTML : Le langage

HTML (HyperText Markup Language) est un langage informatique utilisé pour la création de pages Web.

HyperText indique que les page peuvent être en liaison les unes des autres.

Markup Language signifie qu'il s'agit d'un langage utilisant des balises.


Documents HTML

Les pages Web sont des documents HTML. Ces derniers se composent de texte et d'instructions spéciales, appelées balises. Les documents HTML portent l'extension .html ou .htm, comme par exemple default.htmlUn navigateur Web interprète les balises figurant dans un document HTML et affiche ce dernier sous la forme d'une page Web.

Un document HTML peut être afiché sur n'importe quel type d'ordinateur, notamment un Macintosh ou un poste compatible IBM. Conséquence : vous n'avez pas à créer de documents HTML différents pour les divers types d'ordinateurs (standard). Par ailleurs, les documents HTML renfermant exclusivement du texte, leur chargement sur le Web est rapide.


Notion de BaliseLes balises indiquent la structure d'une page Web au navigateur, mais n'en spécifient pas précisément le mode d'affichage. Chaquenavigateur Web peut interpréter des balises HTML différemment, de sorte qu'une page Web présentée dans des navigateurs distincts n'a pas forcément la même apparence.

Chaque balise donne une instruction spéciale, encadrée par des chevrons < >. La plupart d'entre elles se présente sous la forme d'une balise d'ouverture et d'une de fermeture, qui affectent le texte situé entre elles. La balise de fermeture inclut une barre oblique (/). Pour certaines balises, il n'en existe qu'une d'ouverture. Il est possible de saisir les balises en majuscules ou en minuscules


Entête (HEAD)Aussitôt après l'instruction d'introduction, on trouve généralement un en-tête résumant les informations générales de la page. L'entête est délimitée par les balises <head> et </head>.

Titre (TITLE)L'une des informations les plus importantes de l'en-tête est le titre. Chaque page Web devrait en être dotée. II est rédigé entre les balises <title> et </title>. Dans le navigateur, le titre apparaît dans la barre de titre de la fenêtre, souvent aussi dans une barre d'état séparée. C'est le nom que le programme donnera au signet ou lorsqu'il affiche la liste des pages déjà visitées (historique).

Corps (BODY)Tout le contenu de la page Web, du moins son apparence, se situe dans le corps qui est délimité par les balises <body> et </body>. On retrouvera dans cette partie, qui est la partie principale, tout ce qui est visible dans le navigateur, avec notamment du texte, des images, des liens hypertextes, des titres en grosses lettres, etc…

Ossature d’une page HTML


Mise en œuvre d’HTML : étape 1

<HTML> <!-- debut code html ->

<HEAD> <!-- debut de l'en-tête ->

<META NAME= "keywords" Content="HEI, Ingénieur, Informatique Industrielle"><!-- mots clés pour les moteurs de recherche ->

<TITLE>Pierre DUPOND - CV </TITLE> <!-- contenu de la barre du titre ->

</HEAD> <!-- FIN de l'en-tête ->

<BODY BGCOLOR =#C0C0C0> <!-- couleur arriere plan -> 

</BODY> <!-- fin de corps de page ->

</HTML> <!-- fin de code html ->

Ecrire le code HTML associé à la structure globale d’une page web en utisant les balises du paragraphe « Structure générale d’une page HTML simple »


Résultat étape 1


Etape 2 : création d’un tableau

Entre les balises <BODY> et </BODY> de l’étape 1 :Insertion d’un tableau à 1 ligne et 3 colonnes

Utiliser les balises du paragraphe « Création d’un tableau »

1er cellule : largeur 300 ; y inscrire Nom prénom et adresse2eme cellule : vide3eme cellule : largeur 100 ; vide


Extrait code HTML étape 2

 <!-- ce qui suit est aligné par rapport au centre ->

<TABLE BORDER=1> <!-- creation d'un tableau avec un cadre->

<TR> <!-- Debut de la 1er ligne ->

<TD WIDTH = 300> <!-- 1er cellule avec largeur specifié->

<CENTER> <!-- le contenu est centré ->

Pierre DUPOND <!-- texte en gras (B) et passage à la ligne (BR) ->

13 rue de Toul 

59036 LILLE CEDEX - France 

</CENTER> <!-- fin du centrage ->

</TD> <!-- fin de la 1er cellule ->

<TD> <!-- nouvelle cellule ->

<!-- insertion d'une image en precisant les dimensions et infos pour la souris ->

</TD>

<TD WIDTH = 100> <!-- nouvelle cellule ->

</TD>

</TR> <!-- FIN de la 1er ligne ->

</TABLE> <!-- fin de tableau->

 <!-- fin de texte aligné->


Résultat étape 2


Etape 3 : insertion photo et liens

Utiliser les balises du paragraphes « Insertion d’image »Pour positionner dans la case centrale du tableau une image « PIERRE_DUPOND.GIF » de taille 139 x 143

Insérer 2 liens dans la 3eme case intitulés « Expérience » et « Loisirs » en utilisant les balises du paragraphe « Liens hyper – texte »


<TD> <!-- nouvelle cellule ->

<!-- insertion d'une image en precisant les dimensions et infos pour la souris ->

<IMG SRC = "PhotoEleve_HEI.gif" WIDTH =139 HEIGHT=143 BORDER=1 ALT= "Pierre DUPOND">

</TD>

Code HTML de la 2eme cellule :

Code HTML de la 3eme cellule :

<TD WIDTH = 100>

<CENTER> <!-- texte centré en italique et souligné ->

<A HREF="Stages.html">Exp&eacuterience <!-- ref pour renvoi vers la page html spécifiée ->

</A> <!-- fin de balise pour renvoi->

<A HREF="#Loisirs">Loisirs</A> <!-- ref pour renvoi vers l'ancre spécifiée ->

</CENTER> 

</TD>


Résultat étape 3


Etape 4 : Insertion de rubriques

Insérer dans la suite du code HTML 3 rubriques intitulés :« Etat Civil » , « Connaissances » et « Langues »

Personnalisez vos rubriques à l’aide des balises « Mise en formes du texte » et « Format des caractères » (liste, couleur, taille du texte, etc.)


 <!-- taille de police +2 / precedent et couleur VERT->

 Etat Civil : 



<UL TYPE = disk> <!-- debut d'une liste non numérotée avec type de puce spécifiée (disque) ->

<LI> Pierre Roger Raoul DUPOND

<LI> 22 ans

<LI> C&eacutelibataire

</UL> <!-- fin de liste non numérotée-> 

 <!-- taille de police +2 / precedent et couleur VERT->

 Connaissances : 



<UL TYPE = square> <!-- debut d'une liste non numérotée avec type de puce spécifiée (carrée) ->

<LI> Informatique&nbspIndustrielle

<LI> Monde&nbspde&nbspl'entreprise

<LI> Communication

</UL> <!-- fin de liste non numérotée-> 

 <!-- modif de la taille de la police :+2 et de la couleur->

 Langues : <!-- texte à afficher en gras->

 

<OL TYPE = 1> <!-- debut d'une liste numérotée avec type de marque spécifié (nombre)->

<LI> Anglais

<LI> Allemand

<LI> Chinois

</OL> <!-- fin de liste numérotée ->

Code HTMLétape 4


Résultat étape 4


Etape 5 : envoi de mail

A la suite des rubriques déjà écrites, ajouter une 4ème rubrique intitulée « Contact » suivie de votre email avec lien associé pour l’ouverture de la messagerie. Vous utiliserez pour cela les balises du paragraphe « Lien hyper-texte ».


Code HTML étape 5



<!-- modif de la taille de la police :+2 et de la couleur ->

 Contact : <!-- texte à afficher en gras ->

 <!-- fin de la nouvelle fonte ->

<!-- ref vers une adresse internet ->

<A HREF="mailto:[email protected]"> Pierre DUPOND </A>


Etape 6 : liens d’ancrage

Enrichir la rubrique « Loisirs » de la 3ème colonne du tableau en spécifiant un lien vers une balise d’ancrage.

En fin de votre page web : déclarer un paragraphe sur vos loisirs et le repérer à l’aide d’une ancre « Loisirs »


Code HTML étape 6

 

<A NAME="Loisirs">

 

LOISIRS :

 

Ping&nbspPong

 

Astronomie

 

Cin&eacutema

</A>


Résultats étapes 5 & 6


Etape 7 : lien vers une page web

Ecrire une nouvelle page web « Stages.html » décrivant votre expérience professionnelle (Stages jobs d’été, etc.)

Référencer cette nouvelle page au niveau du lien hyper-texte « Expérience » réalisé à l’étape 3

Prévoir un lien « Retour à la page d’accueil » en fin de page pour permettre un retour vers la page initiale (TD_HEI3_HTML_CV.html)


Code HTML étape 7

<HTML>

<HEAD>

<META NAME= "keywords" Content="HEI, Ingénieur, Informatique Industrielle">

<TITLE>Stages - Robert DUPOND </TITLE>

</HEAD>

<BODY BGCOLOR =#C0C0D0>

 <!-- taille de police +2 / precedent et couleur VERT ->

 Stages en entreprise : 



 

 

 

RENAULT

 

juin - juillet 2003

 

Technicien de surface

 

<A HREF ="TD_HEI3_HTML_CV.html"> Retour &agrave la page d'accueil </A>

</BODY>

</HTML>


Résultat étape 7