D o m i n i q u e   G u e b e y    J u n g l e      Bazar informatique

Tutorial HTML

Sommaire :


Premières notions

<Position "début" de la page.>

Remarques préliminaires

- HTML : Hyper Text Markup Language.

- Les noms de fichiers doivent porter une extension ".htm" ou ".html". Exemple : mapage.htm

- Etre très attentif à la casse (i.e. la distinction majuscule/minuscule) pour les noms de fichiers. Une cause fréquente de l'erreur "404" (page non trouvée) sur internet est la simple différence de casse entre le nom indiqué dans un lien, et le nom réel du fichier. Tester les pages avec un système sensible à la casse comme UNIX/GNU-Linux résoud le problème…

- Pour créer/modifier ("éditer") un fichier html, utiliser un éditeur de texte simple (Notepad, Bloc-note, Wordpad, Vi…) ou mieux, un éditeur évolué (comme Jext, Emacs, Vim ou Notetab). Eviter les "traitements de texte" (Word…).

- Une page destinée à Internet doit être testée avec plusieurs navigateurs, et pas seulement Microsoft Internet Explorer ; utiliser au moins Netscape Navigator. Très recommandés : OPERA, et Amaya, le navigateur du W3C. Afficher les pages avec plusieurs résolutions d'écran (800x600 et 1024x768 au moins).

La plus simple page html

<html>
	<head>
		<title>la plus simple page</title>

	</head>
	<body>
		Bonjour !
	</body>
</html>	

Remarques générales :

Dans ce document, on a deux informations : le titre ("la plus simple page"), purement informatif, et "bonjour !", qui apparaîtra sur l'écran. Les autres éléments sont des BALISES (ou "TAGS"). Noter le "/" qui différencie les balises d'ouverture et de fermeture (cf <html> et </html>, par exemple).

On remarque la séparation en deux grandes parties : l'entête ("HEAD") et le corps ("BODY").

Les tabulations ne sont là que pour la clarté du listing, on aurait le même résultat avec :

<html><head><title>la plus simple page</title>
</head><body>Bonjour !</body></html>

Afficher la page résultante

Une page web avec des liens, images et commentaires

Le html serait peu intéressant sans la possibilité d'appeler d'autres pages ou fichiers : ce sont les liens hypertextes.

Les liens permettet aussi de se déplacer dans une même page, ce qui est utile et souvent utilisé dans les longues pages de documentation technique du Web.

Des images peuvent être insérées dans le corps ("body"). Les fichiers sont en général de type jpg/jpeg, ou png. Le format gif, étant propriété d'Unisys, doit être évité.

Les commentaires sont entre les balises "<!---" et "--->". Il s'agit de texte non utilisé mais utile à la compréhension.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!--- La premiere ligne ci-dessus, pas indispensable aux navigareurs 
mais nécessaire si on veut respecter strictement les normes du W3C --->
<HTML>
<HEAD>
<META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<!--- La ligne ci-dessus, également facultative mais recommandée --->
<!--- TITLE : le titre sera utilisé par le navigateur --->

	<TITLE>Tutorial html 02</TITLE>
<!--- les tags META facultatifs mais utiles --->
	<META name="description" content="HTML explique par etapes">
<!--- keyword = mots clef, très utile pour être indexé 
automatiquement par les moteurs de recherche --->
	<META name="keywords" content="html,tutorial,commentaires,lien">

	<META name="generator" content="vi">
	<META name="author" content="Dominique Guebey">
	<META name="created" content="20020217;434444">
</HEAD>
<!-- entre les balises "body" et "/body" : ce qui sera affiché --->
<BODY>

Bonjour. Il est possible d'afficher le fichier source d'une page html 
pendant l'affichage par le navigateur : par exemple en appuyant sur le 
bouton droit de la souris et en choissant "source de la page" (Netscape 
Navigator) ou "Afficher la source" (Internet Explorer).
<!--- br : saut a la ligne --->
	<br>
<!--- img : image ; src indique le fichier utilisé (source) 
width est la largeur en pixels --->
        <img src="html00.jpg" width=120 alt="Photo Patrick Somelet">
	<br>
Voici une autre image, avec indication de la hauteur (height), et de marges 
verticales (vspace) et horizontales (hspaces)
        <img src="html00.jpg" height=120 hspace=50 vspace=40 
        alt="Photo Patrick Somelet">

	<br>
<!--- un lien vers une autre page --->
	<a href="html01.htm">Texte où figurera le lien 
        (ici renvoi à la "plus simple page")</a>
	<br>

<!--- un lien vers internet --->
	<A href="http://www.w3.org">The World Wide Web Consortium.</A>
	<br>
<!--- un lien pour envoyer un e-mail --->
	<A href="mailto:serviceinformatique@bigfoot.com">Cliquer ici pour
 envoyer un email à serviceinformatique@bigfoot.com</A>

<br>
<!--- un lien vers une autre page ; une image a la place du texte --->
<!--- (#lienbis : fera afficher à partir d'un point précis de la page ; 
         voir plus bas "Complément sur les liens") --->
	<A href="html00.htm#lienbis">
<!--- Ligne ci-dessous : le fichier image utilisé se trouve quatre 
niveaux de répertoire au-dessus. --->

	<IMG src="../../../images/previous.png" alt="retour" border=0>
<!--- "retour" apparaîtra à l'écran si le navigateur 
n'affiche pas les images, ou ne trouve pas celle qui est indiquée --->
	</A>
<br>
</BODY>

</HTML>

Illustration : Cliquez sur ce lien pour afficher la page résultante

Complément sur les liens : déplacement dans une page :

<a name="debut">position "début" de la page.</a>

<a href="#debut">Cliquer sur ce lien pour aller à "debut"</a>
<a href="#fin">Cliquer sur ce lien pour aller à "fin"</a>

<a name="fin">position "fin" de la page.</a>

Cliquer sur ce lien pour aller à "debut"

Cliquer sur ce lien pour aller à "fin"

Quelques éléments de présentation

<b>Balise b : texte en gras</b> donne : Balise b : texte en gras

<i>Balise i : texte en italique</i> donne : Balise i : texte en italique

<b><i>Balises b+i : texte en gras et en italique</i></u></b> donne : Balises b+i : texte en graset en italique

<big>Balise big : taille des caractères augmentée</big> donne :

Balise big : taille des caractères augmentée

<big><big>Encore plus gros.</big></big> donne : Encore plus gros.

<small>Balise small : taille des caractères diminuée</small> donne : Balise small : taille des caractères diminuée

<div align="center">Centrage</div> donne :

Centrage

Les titres (balises h1 à h6) centrés par DIV

La balise DIV permet de conférer des attributs à des blocs de texte. Dans cet exemple, il s'agit de centrage.
        <div align="center">
	<h4>Titre de niveau 4</h4>

	<h5>Titre de niveau 5</h5>
	<h6>Titre de niveau 6</h6>
        </div>
Affichage :

Titre de niveau 4

Titre de niveau 5
Titre de niveau 6

Les listes

Une liste simple :

        <ul>
		<li>Ligne 1</li>
		<li>Ligne 2</li>
		<li>Ligne 3</li>

	</ul>
Une autre liste, numérotée :
        <ol>
		<li>Ligne 1</li>

		<li>Ligne 2</li>
		<li>Ligne 3</li>
	</ol>

Affichage :

  1. Ligne 1
  2. Ligne 2
  3. Ligne 3

Listes de descriptions

<dl> : description list ; <dt> : description title ; <dd> : description data. ; les "data" sont affichées avec un retrait.

Exemple :
<dl>
	<dt>Cobol</dt>
	<dd>Un langage ancien, 
                orienté gestion</dd>

	<dt>RPG</dt>
	<dd>Un langage répandu 
                sur mini IBM (AS400, eServers…)</dd>
	<dt>Java</dt>
	<dd>Un langage visant la 
                portabilité maximale</dd>

</dl>

Affichage :

Cobol
Un langage ancien, orienté gestion
RPG
Un langage répandu sur mini IBM (AS400, eServers…)
Java
Un langage visant la portabilité maximale
Maj : 07 fev 2003

A propos de ces pages / about these pages : http://www.dg77.net/about.htm
Gen : 22/04/2017-17:56:53,50