VIA Centrale Réseaux -

Créer sa Page Perso HTML HyperText Markup Language

Créer une page sans se poser de questions

On utilise un éditeur WYSIWYG ou on convertit un autre format (.doc, .ppt, latex,...) en HTML. Le fichier risque d'être plus gros que nécessaire et surtout, si on ne comprend pas la syntaxe produite, on ne peut fusionner HTML et programmation.

Donner accès à sa page

Une fois une page HTML écrite, il faut la rendre accessible sur Internet. Pour les Centraliens, le CTI et le Serveur des Élèves proposent l'hébergement de pages Web. On transfère alors ses pages par FTP.

HTML à la main

Un fichier HTML comporte un texte et une série d'annotations destinées au navigateur, correspondant à une gestion de styles.

EXEMPLE 1

<HTML>
Ceci est un document HTML un peu trivial.
</HTML>

Les annotations, ou balises, sont notées entre < et >. En général, une paire de balises, l'une ouvrante , l'autre fermante délimitent une zone de texte.

Il suffit donc d'un éditeur de fichier texte pour réaliser une page HTML. Styles L'exemple suivant présente les balises de base.

EXEMPLE 2

<HTML>
Ceci est un document HTML illustrant les principales balises.
HTML permet d'ecrire en gras, en italique et en souligne.
Passer a la ligne dans le fichier HTML n'a pas d'effet sur le resultat affiche par le navigateur. Il faut utiliser la balise de retour chariot ou la delimitation de nouveau paragraphe pour marquer un paragraphe.
<H1>Ceci est un titre principal</H1>
<H2>Ceci est un titre secondaire</H2>
<H3>Ceci est un sous-titre</H3>
<H4>Ceci est un texte mis en evidence</H4>
<H5>De plus en plus petit</H5>
<H6>Ceci est une note</H6>
<H7>Ceci est du texte normal</H7>
</HTML>

Attention : il faut se méfier de l'ordre logique des structures : texte....

LISTE PLUS COMPLÈTE DES BALISES DE STYLES

B: pour mettre en gras (2)
STRONG: pour insister (2)
EM: pour mettre en valeur (2)
VAR: pour définir des variables (2)
CITE: pour reprendre une citation (2)
U: pour souligner (2)
STRIKE: pour barrer (2)
TT: pour la machine à écrire (2)
CODE: pour mettre du code (2)
I: pour l'italique (2)
SAMP: pour des exemples (2)
KBD: pour le clavier (2)
BIG: en gros (2)
SMALL: en petit (2)
SUP: pour les exposants (2)
SUB: pour les indices (2)
PRE: respect des retours chariots (2)
Hi [ALIGN=*]: pour les titres et sous titres (i=1..6) (2)

(1) balise célibataire (2) balise délimitante, nécessitant une ouverture et une fermeture

Certaines balises peuvent être garnies d'attributs. Elles prennent alors la forme <BALISE attribut=valeur>.
Ainsi, la balise peut définir l'alignement du paragraphe comme c'est le cas dans l'exemple 2.

LISTE PLUS COMPLÈTE DES BALISES DE PARAGRAPHES

BR: pour passer à la ligne (1)
P [ALIGN=left/center/right/justify]: pour délimiter un paragraphe (2) (1 admis)
HR [NOSHADE SIZE=* WIDTH=100/20%]: pour tracer un trait horizontal (1)
DIV [ALIGN=*]: délimiteur de zone (2)

Caractères diacritiques L'exemple 2 n'utilise pas d'accents. Initialement, le HTML ne reconnaissait qu'un jeu de caractères restreint, n'incluant pas les caractères accentués. Les navigateurs récents acceptent les accents (jeu de caractères ISO-Latin). Néanmoins, les codes des caractères diacritiques restent valides. Les codes d'accents sont formés d'une lettre à accentuer (a, c, e, i, U,...), d'un code d'accent (acute, grave, circ, cedil, uml ou lig) et d'un point-virgule (;). D'autres caractères spéciaux peuvent être obtenus à l'aide des &codes;.

EXEMPLE 3

<HTML>
Voici quelques exemples de caractères diacritiques : 
é 
ç 
À 
&oelig; 
Ü 
¿ 
µ 
© 
</HTML>

Structure Un nouvel exemple va nous permettre d'introduire les notions d'en-tête et de corps de page.

EXEMPLE 4

<HTML>
<HEAD>
<TITLE>Cette page porte cette phrase pour titre</TITLE>
</HEAD>
<BODY BGCOLOR=#00FF00 TEXT=#FF0000 LINK=#0000FF VLINK=#000022>
Ceci est le corps de la page.
Il propose un lien vers l'<A HREF="ex2.html">exemple 2</A>.
<IMG src="image.gif">
</BODY>
</HTML>

LISTE PLUS COMPLÈTE DES BALISES DE STRUCTURE

HEAD: marqueur d'en-tête (2)
BODY [BGCOLOR=* BACKGROUND=* TEXT=* LINK=* VLINK=* ALINK=*]: marqueur de corps (2)

Images et liens

La valeur d'une couleur prend la forme #RRGGBB (rouge, vert, bleu). Il existe des sites qui aident à choisir!

LISTE PLUS COMPLÈTE DES BALISES APPARAISSANT DANS L'EN-TETE

TITLE: titre de la page et du favori (2)
META [AUTHOR=*] / [NAME=* CONTENT=*]: information supplementaire (1)

RECAPITULATIF LIENS & IMAGES

IMG [SRC=* ALIGN=* WIDTH=* HEIGHT=* BORDER=* ALT=* HSSPACE=* USEMAP="#URL"]: pour afficher une image (1)
A [HREF=* TARGET=*] / [NAME=*]: pour créer un lien ou une référence (2) (1 selon le cas)

Les images sont généralement dans un des deux formats GIF ou JPG. Une image peut être utilisée comme lien. BORDER est alors mis à 0 pour éviter un filet bleu. Exemple...

EXEMPLE 5

<HTML>
<HEAD>
<TITLE>Exemple 5 de la formation VIA sur HTML</TITLE>
<META NAME="keywords" CONTENT="exemple, HTML, VIA">
<META NAME="description" CONTENT="cette page fait ci fait ca">
</HEAD>
<BODY BACKGROUND="fond.jpg" TEXT=#000000 LINK=#FF0000>
<A NAME="haut">
<A HREF="#bas"><IMG SRC="image.gif" WIDTH=88 ALT="cow boy"></A>
 
 
 
<A NAME="bas">
<A HREF="#haut"><IMG SRC="image.gif" BORDER=0></A>
</BODY>
</HTML>

L'URL (Uniform Ressource Locator) peut pointer vers http://, file://, mailto: (courriel mailto:goretc2@cti.ecp.fr), gopher://, news:, telnet://,... Le fichier pointé peut aussi être un fichier son, vidéo,... mais tous les formats ne sont pas reconnus par toutes les plateformes. Idée : <A HREF="ex5.html#bas">. Essayer. Attention : casse du nom de fichier image.

( ! ) Fatal error: Call to undefined function subsubtitle() in /var/www/local/www.via.ecp.fr/html/viaform/1999-00/html/index.html on line 261
Call Stack
#	Time	Memory	Function	Location
1	0,0000	92800	{main}( )	../template.php:0
2	0,0073	344400	require_once( '/var/www/local/www.via.ecp.fr/html/viaform/1999-00/html/index.html' )	../template.php:84

Admin

Créer sa Page Perso HTML HyperText Markup Language