Les bases du langage HTML
14
pages
Français
Documents
Le téléchargement nécessite un accès à la bibliothèque YouScribe Tout savoir sur nos offres
14
pages
Français
Documents
Le téléchargement nécessite un accès à la bibliothèque YouScribe Tout savoir sur nos offres
Publié par
Nombre de lectures
24
Licence :
Langue
Français
XHTML : c'est l'abréviation de « eXtensible HyperText Markup Language ».
Publié par
Nombre de lectures
24
Licence :
Langue
Français
1
Les langages du Web
Les bases du HTML---- Module 1
ère
1 partie: Préambule
Préambule:J’ai rédigé ce petit condensé àl’intention de ceux qui souhaitent s’initier aux langages du
Web. La connaissance des langages du Web n’est pas indispensable même pour réaliser un site Web….
Maisavec la pratique, elle devient une nécessité….!
Définition
Le langage de base du Web, c’est XHTML, connu également sous le nom de HTML
XHTML : c'est l'abréviation de « eXtensible HyperText Markup Language ».
Ilest complété par un autre langage: Le CSS…. Que nous verrons ultérieurement.
Le langage HTML est désigné aussi sous l’appellation « code source ».
Le langage Web sera traduit par votre navigateur (Internet Explorer, Firefox, Google Chrome…)
En résuméHTML va gérer le fond de la page Web alors que le CSS va en gérer la forme.: Le
A quoi ressemble le HTML
Voici ci-dessous un texte destiné à faire l’objet d’une futurerédigé en « visuel », c'est-à-dire enpage Web. Il est
WYSIWYG ce qui signifie :«What you see is what you get»…. Ce qui se traduit par : «Ce que vous voyez est ce
que vous obtenez».
Multiactivitésde Villers-Bocage–Les bases du HTMLModule 1–Cours Patrick JAYET
2
Première conséquence: Il n’est pas nécessaire de savoir rédiger des pages Web en langage HTML… Il suffit
d’utiliser un éditeur de texte qui fera la transcription!
ème
2 Partie: Comment créer sa première page Web
Nousallons utiliser un logiciel Editeur de Texte pour travailler en WYSIWYG. De nombreux logiciels
« Open source » sont proposésj’utilise KOMPOZER.: Personnellement,
Pour télécharger Kompozer en français :http://www.clubic.com/telecharger-fiche36476-kompozer.html
Lecode source est composé par du texte et des balises.
Unebalise commence par un chevron ouvrant <balise> et se termine par un chevron fermant <balise>
Labalise de fermeture comporte un / inséré de la manière suivante :</balise>
<title>Les langages du Web</title>
<p>Bienvenue sur le cours destiné au HTML</p>
Voyons maintenant comment articuler ces deux éléments dans du code source :
La portion de code <p> pour « paragraphe sera placée entre les deux balises<body> et </body>
Multiactivitésde Villers-Bocage–Module 1Les bases du HTML–Cours Patrick JAYET
Précision : le mot « head » signifie« tête »en anglais, et « body » signifie « corps »
<head> On y trouvera des informations générales sur la page : son titre, le type de caractères utilisé, etc.
<body> Partie principale de la page: ce qui sera écrit à l’intérieur sera affiché sur l’écran.
3
… Problème: dans le code source,j’ai effectué un retour chariot après HTML? … En visuel, cette mise en forme
n’est pas prise en compte.
Il va me falloir insérer une nouvelle balise <br />….. Mais cette balise doit se trouver à l’intérieur d’un paragraphe
Multiactivitésde Villers-Bocage–Les bases du HTMLModule 1–Cours Patrick JAYET
Remarque : Il existe deux types de balises : celles qui fonctionnent par paire (ouvrante et fermante) et une
seconde catégorie : unique dite auto-fermante.
<title>Les langages duWeb</title> …….. balises en paire
<br /> Balise de retour à la ligne de type auto-fermante.
Rappelons nous: La balise <br /> doit toujours être placée dans un paragraphe <p>…. <br /> …..</p>
On constate donc qu’il est possiblede construire un texte en imbriquant plusieurs balises…
Mais une question se pose : Y a-t-il un ordre à respecter pour organiser l’ordre des balises?...
Réponse: Oui…. Pour faire simple, il suffit de se souvenir d’une règle d’or:
«« Il faut toujours fermer en premier la balise que vous avez ouverte en dernier » »
Code incorrect :<b><i>Mon texte en gras italique</b></i>
Code correct :<b><i>Mon texte en gras italique</i></b>
ème
3 Partie: La mise en valeur du texte
Nousallons mettre notre texte en valeur au moyen de deux balises :
<strong> … </strong> …..texte en gras
Multiactivitésde Villers-Bocage–Les bases du HTMLModule 1–Cours Patrick JAYET
4
5
onse » ont
été placés entre deux balises intermédiaires <em>
>>>> Les balises <strong> et <em> doivent être placées à l’intérieur d’un paragraphe <p>…</p>
but de ce cours et d’abord d’en comprendre leIl existe bien entendu d’autres balises… Mais le
fonctionnement.
Nousallons maintenant hiérarchise notre texte en créant des titres, sous-titre, sous-sous titre, etc.… Les
balises sont <h1> <h2> <h3> <h4< <h5> <h6> par ordre décroissant.
Attention : les balises de titre<h…>devront être placées en dehors des balises de paragraphe.
Si cette règle n’est pas respectée, il n’y aura aucune incidence sur le «visuel » mais cela va générer des
<h1> …. Pour Thème général: les langages du Web
<h2>…. Pour «» et « Un autre langage du Web : le CSS »Le HTML
Multiactivitésde Villers-Bocage–Module 1Les bases du HTML–Cours Patrick JAYET
ème
4 partie: Lerésultat !
Je vais ouvrir le fichier que je viens de créer; Vous constatez qu’il s’agit d’un fichier .html
Et voilà le résultat affiché par mon navigateur :
Multiactivitésde Villers-Bocage–Module 1Les bases du HTML–Cours Patrick JAYET
6
7
Félicitationspremière page Web à partir du code source HTM ….! Vous venez de créer votre
ème
5 Partie: Comment créer un lien vers une autre page Web
Pourréaliser cet exercice, nous allons créer une deuxième page HTML et créer un lien de la première à le
deuxième.
L’extension .html sera automatiquement ajoutée.
ui donner le nom « de page2»….
Multiactivitésde Villers-Bocage–Les bases du HTMLModule 1–Cours Patrick JAYET
C’est ici qu’il peut être intéressantd’activer l’option permettant d’afficher les extensions de fichiers.
Pourquoi ? Parce que si je nomme mon fichier « page2.html »
Il apparaitra sous le nom de « page2.html.html »
Donc un fichier différent …? Le lien href ne sera plus valable.
Nous allons maintenant insérer un lien dans la page 1 pour accéder directementà la page 2.
Nous allons utiliser une nouvelle balise <a> …. </a>
<a>Cliquez ici</a> pour aller à la page 2 !
Mais la balise <a> à elle seule ne suffit pas…. Illui indiquer le nom de la page vers lequel elle devranous faut
pointer.
Nous allons donc lui ajouter un « attribut »….. il s’agit de l’attributhref
<a href= « page2.html »>Cliquez ici<a/> pour aller sur la page 2 !
Le terme « Cliquez ici » est donc inséré entre deux balises <a>… </a>
La première balise étant dotée d’un attribut lui conférant la fonction de lien…!
Voyons le résultat
Multiactivitésde Villers-Bocage–Module 1Les bases d
