14 pages

Français

Les bases du langage HTML

Force_IT - Patrick Jayet

Le téléchargement nécessite un accès à la bibliothèque YouScribe
Tout savoir sur nos offres

14 pages

Français

Le téléchargement nécessite un accès à la bibliothèque YouScribe
Tout savoir sur nos offres

A propos
Informations
Extrait

Description

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 ».

Informations

Publié par	Force_IT
Nombre de lectures	24
Licence :	En savoir + Paternité, pas d'utilisation commerciale, partage des conditions initiales à l'identique
Langue	Français

Extrait




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





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.





… 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



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


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

Univers
Ebooks
Livres audio
Presse
Podcasts
BD
Documents

Les bases du langage HTML

YouScribe

Le catalogue

Le service

Les conditions