Le langage html :
Hyper Text Markup Language

J.Mirabaud a résumé pour vous le cours proposé sur le site
http://www.ccim.be/ccim328/html
à consulter pour en savoir plus

L'apparence du texte
Les liens
Les tableaux
Les frames
Les images animées et les zones cliquables
Publier son site

Les éditeurs de type "Dreamwaever" se chargent de créer l'html sous-jacent aux documents tapés comme dans un traitement de texte. Connaître l'html n'a d'interêt que si on veut comprendre et modifier à volonté le travail automatique de ce type de logiciel, ou si on désire tout faire de a jusqu'à z !

I : L'apparence du texte :

Ces informations déterminent l'apparence du document. Chaque information est encadrée par des balises dont la casse est sans importance (HTML = Html = html) :

zone concernée par l'information

balise de début de zone

balise de fin de zone

page html

<HTML>

</HTML>

en tête non visible mais consulté par le moteur de recherche

<HEAD>

</HEAD>

titre de la page

<TITLE>

</TITLE>

paragraphe

<BODY>

</BODY>
Ces balises tapées dans bloc-notes s'enchaînent comme des poupées gigognes dans l'ordre :
Exemple :<HTML><HEAD><TITLE>titre machin</TITLE></HEAD><BODY> </BODY></HTML>
Le document correspondant est vide (et c'est normal) mais tout à fait opérationnel! Il suffit d'écrire à l'intérieur des balises <BODY> </BODY>. Remarquez que votre "TITLE" est présent dans la fenêtre du navigateur utilisé.
Chaque page web a ce type d'informations accessibles en cliquant "affichage", "source"

Information concernant la zone :

balise de début :

balise de fin :

paragraphe tout simple (par défaut) : pas de balises !

 

 

paragraphe précédé d'une ligne vierge

<P>

</P>

à la ligne (action ponctuelle séparant 2 paragraphes)

<BR>

 

ligne visible de séparation par défaut (=taille2, centrée, 100%)

<HR>

 

paragraphe à caractères gras

<B>

</B>

paragraphe à caractères italiques

<I>

</I>

paragraphe à caractères soulignés

<U>

</U>

paragraphe à caractères de taille (?=-3,-2,-1,0,1,2,3)

<FONT SIZE=?>

</FONT>

en-tête de taille précise (?=1 à 6)

<H?>

</H?>

paragraphe à caractères en indice

<SUB>

</SUB>

paragraphe à caractères en exposant

<SUP>

</SUP>

paragraphe à caractères de couleur (?=bleu #0000FF, rouge #FF0000, vert #00FF00, jaune #FFFF00, noir #000000…)

<FONT COLOR=?>

</FONT>

paragraphe aligné à gauche

<DIV align=left>

</DIV>

paragraphe centré

<DIV align=center>

</DIV>

paragraphe aligné à droite

<DIV align=right>

</DIV>

retrait à gauche et à droite marquant une citation

<BLOCKQUOTE>

</BLOCKQUOTE>

liste non ordonnée avec retrait à gauche

<UL>

</UL>

liste ordonnée avec retrait à gauche

<OL>

</OL>

élément de liste

<LI>

 

texte clignotant

<BLINK>

</BLINK>

commentaire (de scénario) non apparent

<!--***à

 
Comme pour les limites de zones, dés qu'un paragraphe est concerné par plusieurs informations, les balises sont emboîtées : <B><I>…</I></B>. Voici un autre exemple :

aperçu dans le bloc-note

aperçu dans la page web

<H1>les mois du printemps</H1>
<UL><LI>avril
<LI>mai
<LI>juin</UL>
<P>
<H3>Les mois d'automne</H3>
<OL><LI>octobre
<LI>novembre
<LI>d&eacute;cembre</OL>

Les mois du printemps
· avril
· mai
· juin

Les mois d'automne
  1. octobre
  2. novembre
  3. décembre

 

 II : Les liens :
L'HTML vous transporte d'un clic sur un mot souligné ou sur une image, vers un autre endroit de la page, ou une autre page dans le site ou même dans un autre site.
Les balises indiquant un lien sont <A HREF="URL ou adresse">…</A>

le type de lien

exemples

lien externe vers un autre site

<A HREF="URL ou adresse"> www.ac-versailles.fr/etabliss/Lyc-mansart-stcyr/</A>

lien externe vers une boîte aux lettres

<A HREF="URL ou adresse"> mailto:joelle.mirabaud@orange.fr</A>

lien interne entre 2 pages

<A HREF="URL ou adresse">fichier.html</A>

lien interne dans une longue page

<A name="**">…</A> indique la cible
<A HREF="**">…</A> est le point de départ vers la cible

lien vers une image (le mieux : jpg 16 couleurs)

<A HREF="MaVille.htm"><IMG SRC="STAQUET.gif"></A>

(nom du fichier lié à l'image puis nom de l'image dans le dossier)


III : Les tableaux :
Les balises de base sont : pour définir le tableau : <TABLE></TABLE> ; pour définir la ligne : <TR></TR> ; pour définir une cellule : <TD></TD>
 

aperçu dans le bloc-notes

aperçu dans la page web

Un tableau à 2 lignes et 2 colonnes donne ceci :

<TABLE>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>

1
2
3
4

le même tableau avec bordures

<TABLE border=2>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>

1
2
3
4

 

 IV : Les frames :
 

Début

Fin

Zone avec des fenêtres

<FRAMESET>

</FRAMESET>

Agencement des fenêtres horizontales

<FRAMESET ROWS="...">

 

Agencement des fenêtres verticales

<FRAMESET COLS="...">

 

Il faut employer les balises suivantes : <HTML> <HEAD> </HEAD> <FRAMESET ROWS="30%,70%"> <FRAME> <FRAME> </FRAMESET> </HTML>
Attention! <FRAMESET> </FRAMESET> remplace <BODY> </BODY>
L'attribut ROWS = "hauteur1,hauteur2,...,hauteurN" définit la hauteur des différentes fenêtres en cas de division horizontale.
La hauteur s'exprime en pixels ou en %. Dans ce cas, on veillera à ce que le total soit égal à100%.

V : les images animées et zones cliquables :
=> Les images animées qui agrémentent les pages Web sont des images GIF, composées un peu comme les dessins animés, par des logiciels conçus à cet effet. Des Gifs animées sont disponibles sur le Web. Vous pouvez aussi en créer vous-même assez facilement grâce à de petits programmes comme Microsoft Gif Animator, Gif Construction Set, Cel Assembler ou Animation Shop de Paint Shop Pro. A utiliser avec modération car cela fatigue les yeux !
Les balises sont :<IMG SRC="image.gif" USEMAP="#nom">
=> Les images cliquables sont divisées en zones sur lesquelles il est possible de cliquer et d'ouvrir ainsi une page située à une adresse (URL) déterminée. On apppelle aussi cette propriété l'hypergraphique par rapport à l'hypertexte.
Ici aussi de petits logiciels comme Mapedit, Map This, CrossEye, Web Hotspots... vous seront d'une grande utilité.
Les balises sont : <MAP NAME="nom"> <AREA SHAPE=RECT COORDS="X1,Y1,X2,Y2" HREF="URL"> … </MAP>

 

 VI : Publier son site :
Si vous avez une connexion internet, il y a de grandes chances que vous ayez déjà un espace disque compris dans votre abonnement. Sinon demandez le ou alors changez de provider...
Un méga est un minimum mais il y a déjà moyen de faire quelque chose de bien à condition de ne pas être trop gourmand en images. Avec votre espace disque, vous aurez aussi votre adresse internet, du genre : www.nom_du_provider/votre répertoire.
Avec des logiciels comme Filezilla, par exemple, une fois connecté avec votre provider et votre mot de passe reconnu, le chargement de votre site est une opération aisée correspondant au déplacement de fichiers d'un répertoire à un autre répertoire dans l'Explorateur de Windows.
Pour faire connaître son site, il suffit d'aller sur le site du moteur de recherche en question. Trouver le lien "Ajouter un site" ou "Référencement" et de suivre scrupuleusement les instructions présentées à l'écran. Préparer à l'avance vos mots-clés ainsi qu'un bref descriptif de votre site. Pour ce dernier, il faut en quelques mots (150 à 250 mots) décrire votre site mais surtout donner envie aux surfeurs de venir le visiter.
En plus de l'élément <TITLE> (titre), l'en-tête de votre page contient bien d'autres informations importantes qui intéressent le navigateur. Le tag META sera particulièrement utile pour faire reconnaître votre page par les moteurs de recherche.
<META NAME="description" CONTENT="description de votre page"> Cette balise indique au robot de recherche que le contenu de CONTENT est la description de votre page Html, contenu qu'il pourra afficher comme résultat d'une recherche d'un utilisateur.
<META NAME="keywords" CONTENT="mot-clé, mot-clé, mot-clé..."> Cette balise indique au robot de recherche que le contenu de CONTENT est une série de mots-clés qui définira plus finement votre page. Il peut être utile de prévoir quelques mots-clés en anglais si vos pages sont en français.
<META Name="author" Content="Nom"> Cette balise permet d'indiquer le nom de l'auteur