les bases du code html

3^ème

Création et mise à jour de sites internet

Activité : principe de la programmation en HTML

L'objectif de ce fichier est de vous faire connaître les principes de base du code "html". Il existe différents éditeurs de pages (Editeurs html), qui vous permettent de créer des pages facilement. Il est cependant nécessaire, lorsqu'on crée des pages, de "toucher" au moins une fois à la programmation "html" pour comprendre les fichiers que créent ces editeurs.

Activité : Vous aller créer un fichier "essai.htm" (dans votre dossier) dans lequels vous effectuerez une vingtaine de petit travaux à la suite.

Durée : de 1 - 4h.

N'hésitez pas à me faire part de vos commentaires..

Table des matières

INTRODUCTION ET DEFINITION :		*Travail1*
	Les balises
	La structure d'une page
LES OPTIONS DU DOCUMENT:
	Mettre un fond de page coloré :	travail2
	Choisir la couleur du texte :	*`travail3`*
	Mettre une image en fond de page :
MISE EN FORME DU TEXTE
	Ecrire en caractère Gras, Italique, Souligné, texte défilant...:	travail4
	Changer la police de caractère (style, taille, couleur) :	travail5
	Ecrire un titre :	travail6
	Creer un paragraphe (gauche, droite, centrer, justifier) :	travail7
	Sauter une ligne et retour à la ligne	travail8
	Insérer une ligne séparatrice	travail9
	Les simples retraits de paragraphes :	travail10
	Les retraits numérotés :	travail11
	Les retraits à puces (symboles) :	travail12
Les Images :
	Insérer une image	travail13
	Ajuster la largeur et la hauteur :	travail14
	Donner un titre à l'image :	travail15
Créer des liens
	vers un paragraphe	travail16
	vers une page :	travail17
	vers un autre site internet	travail18
	vers une adresse électronique	travail19
	Lien sur une image :	travail20

Créer des tableaux:
	Créer des tableaux	travail21
	Mise en forme de tableaux	travail22 travail23
Nouveauté :	Cellules de tableaux de tailles différentes	travail23 bis
	Utilisation de tableaux

INTRODUCTION ET DEFINITION :

Le langage HTML (Hyper Text Mark-up Language) permet de créer des fichiers compréhensibles par n'importe lequel des navigateurs (Internet Explorer, Netscape...) .

Le code est interprété par le navigateur , qui affiche la page internet tel que le concepteur l'a voulu. (mise en forme, images, liens hypermédia...)

Les bases de ce langage sont très simples à assimiler. Il se compose de balises (tags en anglais), qui agissent sur le texte qu'ils encadrent.

Les balises

balise d'ouverture	ce qui sera affecté par les balises	balise de fin
<BALISE>	texte affecté	</BALISE>

par exemple le code : <B> texte affecté </B> texte non affecté donnera :

Texte affecté texte non affecté

Le code B indiquant au navigateur que le texte est en gras.

Ainsi le texte est encadré par deux balises (en bleu dans le texte): une balise de début <BALISE>et une de fin </BALISE> où BALISE correspondra à un code de mise en forme que l'on appliquera au 'texte à mettre en forme'.

Cetaines balises peuvent accepter des options ( en vert dans le texte ) qui précisent les choses :

balise d'ouverture	option	ce qui sera affecté par les balises	balise de fin
<BALISE	Option1="valeur" Option2="valeur">	texte affecté	</BALISE>

par exemple le code : <FONT FACE="Comic Sans MS" COLOR="FF0000"> texte affecté </FONT>

précisera la police et la couleur du texte : texte affecté

Remarque : D'autres balises, comme les balises de saut de ligne <BR> ou d'insertion de ligne <HR SIZE="5" WIDTH="100"> , ne nécessitent pas de balise de fin .

Un programme HTML comporte deux grandes sections :

La section d'entête délimitée, par deux balises <HEAD> et </HEAD>, intègre le descriptif de la page (son titre dans le cas de cette page" petit cours de html", le nom de l'auteur, etc...)

La section délimitée par deux balises <BODY> et </BODY> pour le corps du programme.

Voici la structure type :

<HTML> /* Indique que le codage est en html) */

<HEAD> /* debut des balises d'en tete */

<TITLE> TITRE DE MA PAGE </TITLE> /* Le titre de la page qui apparait ( (Ici TITRE DE MA PAGE )*/

<META NAME="Author" CONTENT="leo heleba"> /* définit le nom de l'auteur ( ici Leo Heleba) */

</HEAD> /* fin de l'en tete */

<BODY> /* Le corps de la page */

...blablabla...

</BODY> /* fin du corps de la page */

</HTML> /* fin de la page */

Le fichier devra être enregistré sous un nom de fichier se terminant par .html ou .htm de façon à ce qu'il puisse être lu par les navigateurs (Netscape, Internet Explorer, etc...).

Travail 1

Ouvrez le programme bloc note de microsoft windows. copier et coller la structure classique dans la nouvelle feuille . supprimer tous les commentaires qui ne servent à rien (texte en vert)

Changer le nom de l'auteur , le titre de la page et le blablabla a votre convenance.

Enregistrer (sans le fermer) le fichier sous le nom essai.htm.( attention verirfier que le type est "tout fichier") dans votre dossier personnel.

Aller dans votre dossier personnel ( par poste de travail) et ouvrez votre fichier pour voir le résultat. (cliquer 2 fois dessus). laissez le ouvert pour la suite.

FFFFFF	Blanc
FFFF00	Jaune
FF0000	Rouge
00FF00	Vert
00FFFF	Bleu Ciel
0000FF	Bleu Marine
000000	Noir
FF9900	Orange
FF99CC	Rose
CC00CC	Violet

Code	Exemple	Résultat
B	<B>ce texte est en Gras</B>	ce texte est en Gras
CENTER	<CENTER> ce texte est centré </CENTER>	ce texte est centré
I	<I>ce texte est en italique</I>	ce texte est en Italique
U	<U>ce texte est Souligné</U>	ce texte est Souligné
SUP	<SUP> ce texte est en exposant </SUP>	^{ce texte est en exposant}
SUB	<SUB> ce texte est indicé </SUB>	_{ce texte est indicé}
STRIKE	<STRIKE> ce texte est barré </STRIKE>	~~ce texte est barré~~
MARQUEE	<MARQUEE> texte défilant < /MARQUEE>	texte défilant

Code Balise	Exemple	Résultat
H1	<H1>TITRE 1</H1>	TITRE 1
H2	<H2>TITRE 2</H2>	TITRE 2
H3	<H3> TITRE 3 </H3>	TITRE 3
H4	<H4> TITRE 4 </H4>	TITRE 4
H5	<H5> TITRE 5 </H5>	TITRE 5
H6	<H6> TITRE 6 </H6>	TITRE 6

Pour obtenir l'affichage ci-dessous	Le code est :
PREMIER CHAPITRE titre 1 titre 2 sous titre a du titre 2 sous titre b du titre 2 DEUXIEME CHAPITRE	</dl> <dd> PREMIER CHAPITRE <dl> <dd>titre 1 <dd>titre 2 <dl> <dd>sous titre a du titre 2 <dd>sous titre b du titre 2 </dl> </dl> <dd>DEUXIEME CHAPITRE </dl>

cette structure	donnera
<ol> <li type="A"> PREMIER CHAPITRE <ol> <li type="1" >titre 1 <li type="1" > titre 2 <ol> <li type="a" >sous titre a du titre 2 <li type="a" >sous titre b du titre 2 </ol> <li type="1" > titre 3 <ol> <li type="a" >sous titre a du titre 3 </ol> </ol> <li type="A" >DEUXIEME CHAPITRE </ol>	PREMIER CHAPITRE titre 1 titre 2 sous titre a du titre 2 sous titre b du titre 2 titre 3 sous titre a du titre 3 DEUXIEME CHAPITRE

cette structure	donnera
<ul> <li> PREMIER CHAPITRE <ul> <li>titre 1 <li> titre 2 <ul> <li >sous titre a du titre 2 <li >sous titre b du titre 2 </ul> <li> titre 3 <ul> <li>sous titre a du titre 3 </ul> </ul> <li>DEUXIEME CHAPITRE </ul>	PREMIER CHAPITRE titre 1 titre 2 sous titre a du titre 2 sous titre b du titre 2 titre 3 sous titre a du titre 3 DEUXIEME CHAPITRE

TITRE 1

TITRE 2

TITRE 3

TITRE 4

TITRE 5

TITRE 6