View
1
Download
0
Category
Preview:
Citation preview
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
HEI P. Biela Enberg - F. Le Floc'h
Le réseau Internet
HEI P. Biela Enberg - F. Le Floc'h
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.
HEI P. Biela Enberg - F. Le Floc'h
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.
HEI P. Biela Enberg - F. Le Floc'h
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
HEI P. Biela Enberg - F. Le Floc'h
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
HEI P. Biela Enberg - F. Le Floc'h
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 -> <BR>
</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 »
HEI P. Biela Enberg - F. Le Floc'h
Résultat étape 1
HEI P. Biela Enberg - F. Le Floc'h
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
HEI P. Biela Enberg - F. Le Floc'h
Extrait code HTML étape 2
<P ALIGN=CENTER> <!-- 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é ->
<B>Pierre DUPOND </B><BR> <!-- texte en gras (B) et passage à la ligne (BR) ->
13 rue de Toul <BR>
59036 LILLE CEDEX - France <BR>
</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->
</P> <!-- fin de texte aligné->
HEI P. Biela Enberg - F. Le Floc'h
Résultat étape 2
HEI P. Biela Enberg - F. Le Floc'h
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 »
HEI P. Biela Enberg - F. Le Floc'h
<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> <I> <U> <!-- texte centré en italique et souligné ->
<A HREF="Stages.html">Expérience <!-- ref pour renvoi vers la page html spécifiée ->
</A><BR> <!-- fin de balise pour renvoi->
<A HREF="#Loisirs">Loisirs</A><BR> <!-- ref pour renvoi vers l'ancre spécifiée ->
</CENTER> </I> </U>
</TD>
HEI P. Biela Enberg - F. Le Floc'h
Résultat étape 3
HEI P. Biela Enberg - F. Le Floc'h
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.)
HEI P. Biela Enberg - F. Le Floc'h
<FONT SIZE = +2 COLOR = #00FF00 > <!-- taille de police +2 / precedent et couleur VERT->
<B> Etat Civil : </B>
</FONT>
<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élibataire
</UL> <!-- fin de liste non numérotée-> <BR>
<FONT SIZE = +2 COLOR = #00FF00 > <!-- taille de police +2 / precedent et couleur VERT->
<B> Connaissances : </B>
</FONT>
<UL TYPE = square> <!-- debut d'une liste non numérotée avec type de puce spécifiée (carrée) ->
<LI> Informatique Industrielle
<LI> Monde de l'entreprise
<LI> Communication
</UL> <!-- fin de liste non numérotée-> <BR>
<FONT SIZE = +2 COLOR = #00FF00 > <!-- modif de la taille de la police :+2 et de la couleur->
<B> Langues : </B> <!-- texte à afficher en gras->
</FONT> <BR>
<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
HEI P. Biela Enberg - F. Le Floc'h
Résultat étape 4
HEI P. Biela Enberg - F. Le Floc'h
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 ».
HEI P. Biela Enberg - F. Le Floc'h
Code HTML étape 5
<FONT SIZE = +2 COLOR = #00FF00 >
<!-- modif de la taille de la police :+2 et de la couleur ->
<B> Contact : </B> <!-- texte à afficher en gras ->
</FONT> <!-- fin de la nouvelle fonte ->
<!-- ref vers une adresse internet ->
<A HREF="mailto:Pierre.Dupond@hei.fr"> Pierre DUPOND </A>
HEI P. Biela Enberg - F. Le Floc'h
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 »
HEI P. Biela Enberg - F. Le Floc'h
Code HTML étape 6
<BR><BR><BR><BR><BR><BR><BR><BR>
<A NAME="Loisirs">
<BR>
LOISIRS :
<BR><BR>
Ping Pong
<BR>
Astronomie
<BR>
Cinéma
</A>
HEI P. Biela Enberg - F. Le Floc'h
Résultats étapes 5 & 6
HEI P. Biela Enberg - F. Le Floc'h
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)
HEI P. Biela Enberg - F. Le Floc'h
Code HTML étape 7
<HTML>
<HEAD>
<META NAME= "keywords" Content="HEI, Ingénieur, Informatique Industrielle">
<TITLE>Stages - Robert DUPOND </TITLE>
</HEAD>
<BODY BGCOLOR =#C0C0D0>
<FONT SIZE = +2 COLOR = #F0FF00 > <!-- taille de police +2 / precedent et couleur VERT ->
<B> Stages en entreprise : </B>
</FONT>
<BR>
<BR>
<BR>
RENAULT
<BR>
juin - juillet 2003
<BR>
Technicien de surface
<BR><BR>
<A HREF ="TD_HEI3_HTML_CV.html"> Retour à la page d'accueil </A>
</BODY>
</HTML>
HEI P. Biela Enberg - F. Le Floc'h
Résultat étape 7
Recommended