Les bases du HTML - Clips-Imag

Transcription

TD Informatique Semestre 2 : Réseaux - HTML
Université Stendhal, Grenoble III
Partie HTML
TD 1 : Les bases du HTML
1
Introduction
HTML = HyperText Marked Language
•
HTML est un langage permettant de décrire des données affichables sous forme de page par
un navigateur Web.
•
HTML peut être édité à l'aide de n'importe quel traitement de texte
•
HTML permet d'établir des liens de navigation entre plusieurs pages Web
•
HTML est également un langage d'intégration. Il permet, à l'aide de commandes spécialisées,
d'incorporer des éléments non purement textuels (graphismes mais également formulaires,
programmes interactifs, animations, etc.)
•
HTML est un langage riche et sa manipulation avec un simple éditeur de texte s'avère
rapidement complexe. D'où la nécessité pour les développeurs d'utiliser une gamme d'outils
prenant en charge la génération automatique du code HTML.
•
Il repose sur le protocole http et est compris par tous les navigateurs.
Ce n’est pas un langage de programmation.
Il est constitué de balises qui permettent de mettre en forme du texte et des images sur une
page Web avec des possibilités de navigation (liens hypertextes) au sein de ces pages.
Il suffit de posséder un simple éditeur de texte pour définir une page Web en HTML (le fichier
aura l’extension .html) et un navigateur pour la visualiser.
2
Un premier exemple pour commencer : la page de
l’Autruche
2.1 Lancer une page Web
Récupérez le dossier Page web autruche sur le poste enseignant (rappel : poste 11).
Dans votre navigateur, Internet Explorer ou Netscape, ouvrez index.html (Fichier/Ouvrir) :
vous tombez sur une page web. Naviguez-y un peu…
è Combien de pages comporte ce site ?
2.2 Ce qui se cache derrière ces pages…
2.2.1
Pour voir le code HTML d’une page
Placez-vous sur la page d’accueil de notre site de l’autruche.
Page 1 sur 6
•
Dans Internet Explorer, faites Affichage / Source.
•
Dans Netscape, ouvrez Netscape Composer (Communicator / Composer), puis faites
Affichage / Source de la page . Si aucun éditeur de texte n’est choisi pour voir le code HTML,
faites Parcourir, et sélectionnez C:/ Windows/ Notepad.
Vous voyez ainsi le code HTML : langage composé de balises et servant à afficher des
pages contenant des liens hypertextes.
2.2.2
C’est quoi une balise ?
2.2.2.1
Deux types de balises et leurs rôles
Il existe 2 types de balises :
−
−
des balises de structure (ex : texte du paragraphe pour définir un paragraphe)
des balises de mises en forme (ex : texte en italique pour mettre un texte en italique).
Une balise sert dans une page HTML à mettre en forme le texte, c’est-à-dire comme dans un
traitement de texte classique, type Word, à :
-
mettre le texte en gras
changer sa taille
faire des tableaux
-
insérer des images
changer les couleurs (texte et fond d’écran), etc.
Mais aussi à créer des liens hypertextes pour pouvoir surfer sur le web !
2.2.2.2
Construction d’une balise
Une balise est une "instruction" comprise entre crochets < … > qui possède un nom et parfois
des attributs. Elles se construisent de la façon suivante :
<balise ouvrante> Texte qu’on verra sur la page </balise fermante>
Où la balise de fin porte le même nom que la balise de début précédé du signe /. (ex :
texte du paragraphe )
Certaines de ses balises peuvent contenir des attributs qui fournissent une précision sur la
balise. Ils se rajoutent dans la balise de début et sont souvent de la forme nom=valeur.
ex : <BODY text="red" bgcolor="green">…..</BODY> : le texte sera en rouge et le fond sera vert
3
La structure d’une page Web en HTML
3.1
Structure de base
<HTML>
<HEAD>
<TITLE> Titre de la page </TITLE>
<META name= « auteur » content= « Dupont »>
….
</HEAD>
<BODY>
….
</BODY>
</HTML>
Page 2 sur 6
L’entête comprise entre <HEAD> et </HEAD> regroupe des informations qui ne seront pas
affichées dans la page par le navigateur.
Elle contient le titre du document entre <TITLE> et </TITLE> qui apparaîtra sur la barre de
titre de la fenêtre.
Des métadonnées comme le nom de l’auteur, des mots-clés, un résumé, etc.
Des scripts complémentaires écrits en Javascript ou Java ou VBScripts qui complètent les
fonctionnalités de base du HTML
Le corps du document compris entre <BODY> et </BODY> représente ce qui apparaîtra dans
la fenêtre du navigateur.
3.2
4
Exemple
Des balises repères
4.1
<HTML>…</HTML>
C’est elle qui nous montre qu’on est bien sur une page HTML. Elle débute et clôt une page.
4.2
<HEAD>…</HEAD>
On y retrouve des informations qui ne seront pas affichées dans la page par le navigateur :
•
le texte qui apparaîtra dans la barre de titre du navigateur, entre les balises
</TITLE>, ici c’est index.html.
<TITLE> et
•
Des métadonnées comme le nom de l’auteur, des mots-clés, un résumé, etc.
•
Des scripts complémentaires éc rits en Javascript ou Java ou VBScript qui complètent les
fonctionnalités de base du HTML.
4.3
<BODY>…</BODY>
Cette balise nous indique qu’on passe au texte de la page proprement dit.
Voilà pourquoi elle contient des indications de couleur :
à de la police :
text="#000000" (texte en noir)
Page 3 sur 6
à du fond d’écran :
bgcolor="#FFFFFF" (sur fond blanc).
Mais on y trouve aussi la couleur des liens :
à LINK : couleur des liens hypertextes de la page (LINK="#0000FF", c’est bleu).
à VLINK : couleur des liens hypertextes visités de la page.
à ALINK : couleur des liens hypertextes actifs, c’est-à-dire en train d’être visités.
4.4
Attention à l’ordre des balises
Les balises peuvent être imbriquées : attention à bien les refermer dans l’ordre de leur
ouverture.
Exemple : <CENTER>mon texte</CENTER>
Exercice : Observez bien dans quel ordre on ouvre et on ferme les balises, et remettez le texte
HTML suivant dans l’ordre :
<li><center>Joli comme tout !</li></center>
5
Quelques balises de base et leurs attributs
5.1
•
Balises de structure
…
paragraphe
Constitue
un
•
nouveau
Attributs : align= "center" ou "left" ou
Attributs : align
ex : <H1 align="center">Ceci est un
titre de niveau 1 centré</H1>
"righ"t
ex : Paragraphe
centre 
5.2
•
Balises de mise en forme
<HR> Place une ligne séparatrice
horizontale
Attributs : align, size, width, color
ex :
<HR
size="2"
align="center" color="red">
•
width="250"
 Place un saut de ligne à
l’intérieur d’un paragraphe
ex :
ligne1
 
ligne2
•
<H1>…</H1> définit un titre de niveau
1(possibilité de 6 niveaux de titres)
<CENTER>…</CENTER> Centre le
texte
Cet effet peut être obtenu par un
attribut de la balise 
ex :
<CENTER>Voici
un
texte
centré</CENTER>
•
… Permet de
modifier le texte (couleur, taille, police)
Attributs : color= "nom de la couleur"
(Les couleurs les plus fréquentes
peuvent être nommées explicitement en
anglais (red, yellow, blue,...) sinon il faut placer
le code Hexadécimal de la couleur voulue)
face= "nom de la police"
size="taille de la police"
(nombre entre 1 et 7)
ex : texte écrit en taille 2 en bleu
avec la police Verdana
•
… Met le texte en italique
•
… Met le texte en gras
Page 4 sur 6
•
… Souligne le texte
•
… Texte en exposant
6
•
 : Met des commentaires. Le
texte compris entre ces balises ne
sera pas pris en compte par le
navigateur ( ==> pas affiché !). Le
commentaire peut s'étendre sur
plusieurs lignes.
Exercices de synthèse
6.1 Exercice 1
Vous allez créer une page, appelée Base_HTML.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. Pour cela, enregistrez votre fichier avec le bloc-notes et réactualisez la page
dans le navigateur.
•
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
Un paragraphe centré constitué des 3
lignes suivantes avec le texte jaune et
de taille 5 :
2eme
Je suis le
paragraphe
au centre
1ère partie :
en taille 5 et en jaune
•
Un titre de niveau 1 centré :
PREMIERE PARTIE
Un paragraphe avec le texte suivant
en rouge :
Je suis le premier paragraphe, je suis
3ème partie :
•
rouge…
•
•
Une ligne séparatrice de taille 2 et de
couleur rouge
2ème partie :
•
Une ligne séparatrice de taille 7, de
300 pixels de longueur et de couleur
noire
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…
DEUXIEME PARTIE
6.2 Exercice 2 : site de l’autruche
•
Ouvrez index.html avec le logiciel Scite. Modifiez donc le texte de la barre de titre en :
« Bienvenue », qui apparaîtra en haut à gauche de la barre de titre du navigateur.
•
Après l’avoir modifié, pour voir sur le navigateur ce que cela donne, faites Fichier /
Enregistrer dans l’éditeur de texte où se trouve le code HTML pour le mettre à jour, puis sous
Internet Explorer, Affichage / Actualiser, ou F5 ou icône Actualiser dans la
barre d’outils.
•
Faites en sorte que « Le must du Web » apparaisse sans italique et en taille 5.
•
Le fond de la page sera vert et le texte blanc.
•
A la fin du texte de cette page, vous mettrez une ligne séparatrice de taille 7, de 300 pixels de
longueur et de couleur grise ou jaune.
•
Sur autruche.html, rajoutez le titre de niveau 1 « Les avis », qui sera centré, rose et placé
avant le paragraphe Liens.
Page 5 sur 6
•
Créez une ligne séparatrice de taille 2 et de couleur rouge entre ce paragraphe et le
précédent.
•
Créez 2 paragraphes de niveau 2 juste après, intitulés : « Pour :» et « Contre :»
•
Ecrivez du texte pour et contre les autruches au bon endroit, dans 2 paragraphes centrés, en
police Tahoma et en gras.
•
Transformez « Liens » en titre de niveau 2 et changez l’intitulé du lien proprement dit sur la
page en « Autre site sur les autruches ».
Pour avoir le code des couleurs (noms et codes hexadécimaux) voir les sites suivants :
http://entries.the5k.org/171/visualizer.html
http://www.webcolors.freeserve.co.uk/names140.htm
Page 6 sur 6

Les bases du HTML - Clips-Imag

Transcription

Documents pareils

Partie 1: Le web et le langage HTML

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

le rallye photo

Créer une page HTML5

HTML : que cachent donc ces quatre lettres ?

Structure de base d`une page HTML - html - css

Fiche BALISES - JCM Distribution

Langage HTML 5

Roadbook parcours découverte