Obligement - L'Amiga au maximum

Vendredi 26 mai 2017 - 13:04  

Translate

En De Nl Nl
Es Pt It Nl


Rubriques

 · Accueil
 · A Propos
 · Articles
 · Galeries
 · Glossaire
 · Hit Parade
 · Liens
 · Liste jeux Amiga
 · Quizz
 · Téléchargements
 · Trucs et astuces


Articles

 · Actualité (récente)
 · Actualité (archive)
 · Comparatifs
 · Dossiers
 · Entrevues
 · Matériel (tests)
 · Matériel (bidouilles)
 · Points de vue
 · En pratique
 · Programmation
 · Reportages
 · Tests de jeux
 · Tests de logiciels
 · Tests de compilations
 · Articles divers

 · Articles in english
 · Articles in other languages


Twitter

Suivez-nous sur Twitter




Liens

 · Sites de téléchargements
 · Associations
 · Pages Personnelles
 · Moteurs de recherche
 · Pages de liens
 · Constructeurs matériels
 · Matériel
 · Autres sites de matériel
 · Réparateurs
 · Revendeurs
 · Presse et médias
 · Programmation
 · Développeurs logiciels
 · Logiciels
 · Développeurs de jeux
 · Jeux
 · Autres sites de jeux
 · Scène démo
 · Divers
 · Informatique générale


Jeux Amiga

0, A, B, C, D, E, F,
G, H, I, J, K, L, M,
N, O, P, Q, R, S, T,
U, V, W, X, Y, Z


Trucs et astuces

0, A, B, C, D, E, F,
G, H, I, J, K, L, M,
N, O, P, Q, R, S, T,
U, V, W, X, Y, Z


Glossaire

0, A, B, C, D, E, F,
G, H, I, J, K, L, M,
N, O, P, Q, R, S, T,
U, V, W, X, Y, Z


Partenaires

Annuaire Amiga

Amedia Computer

Relec

Hit Parade


Soutien

N'hésitez pas à soutenir le projet Obligement



Contact

David Brunet

Courriel

 


En pratique : HTML - base et mise en page
(Article écrit par Denis Bucher et Philippe Gauthier et extrait d'Amiga News - janvier 1998)


Si vous avez toujours voulu créer un site sur Internet, sans jamais oser ou avoir le temps d'essayer, ou plus simplement si vous désirez commencer à présenter votre passion ou votre magasin, Amiga News a pensé à vous ! Durant ces prochains mois nous allons vous proposer cette introduction qui par la suite s'adressera aux experts que vous serez devenus ou que vous êtes déjà.

Avant tout il faut savoir que le format des documents que vous mettrez sur votre site Web, le HTML (voir lexique), permet de faire déjà beaucoup de choses de manière très simple.

Ce qu'il faut

Pour commencer, nous allons créer une petite page Web toute simple, que tous les navigateurs actuels pourront afficher (AWeb, Voyager, IBrowse sur Amiga, Netscape et MSIE sur d'autres plates-formes, Lynx, etc.). En effet, vous avez peut-étre déjà vu quelque part des standards HTML différents : 1.0, 2.0, 3.0, 3.2... Nous en reparlerons plus tard, car ça n'est pas nécessaire de connaître cela tant que l'on fait des choses simples.

Pour démarrer il vous faut simplement un éditeur de texte : soit un de ceux offerts avec AmigaOS comme Ed, Edit ou mieux, MEmacs ; soit un éditeur commercial comme GoldEd, vi, ou le meilleur selon moi, CygnusEd. Ça serait bien d'avoir aussi un navigateur Web (AWeb, Netscape, IBrowse...) pour admirer et vérifier vos créations.

Les balises de base

Tout document HTML doit commencer par un "tag" (ou balise, sorte de commande au milieu du texte) "<HTML>" et se terminer par une balise "</HTML>". En clair, notre document doit donc ressembler à :

<HTML>
</HTML>

Puis, le contenu de notre document HTML se divisera en deux parties :
  • L'entête, qui sera délimitée par "<HEAD>" "</HEAD>". Elle contiendra par exemple le titre du document (qui en général apparaîtra comme titre de la fenêtre) entre "<TITLE>" et "</TITLE>".
  • Le corps du document qui sera délimité par "<BODY>" "</BODY>". Le corps de notre document contiendra tout ce qui devra être affiché, par exemple un titre, du texte ou une image.
Essayons de modifier notre exemple ainsi :

<HTML>
<HEAD>
<TITLE>Petit exemple</TITLE>
</HEAD>
<BODY>
<H1>Petit exemple</H1>
<P>
Ce document contient une seule phrase.
</P>
</BODY>
</HTML>

Arrivé à ce point, vous pouvez le sauver sous "exemple.html" et admirer le résultat dans AWeb, par exemple (fig.1).

HTML

Vous aurez aussi peut-être quelques questions :
  • Oui, vous pouvez mettre un retour à la ligne où vous voulez, au milieu d'une phrase ou entre n'importe quelles balises, le résultat sera le même.
  • La balise <H1> signifie "Heading 1", donc "Titre 1". Plus le nombre est petit, plus le titre est gros.
  • La balise <P> signifie "début de paragraphe", et introduit un espace, car le texte est formaté avant la balise. On peut signaler la fin de paragraphe avec </P> mais ce n'est pas obligatoire. Vous pouvez aussi introduire artificiellement un retour à la ligne avec <BR>.
Voici d'ailleurs une petite démonstration de la différence : reprenez le document de tout à l'heure et effacez tout ce qui se trouve entre "<BODY>" et "</BODY>", et insérez-y ce qui suit. Vous pouvez le sauver sous "exemple2.html" (fig.2).

<H1>Autre petit exemple</H1>
<P>
test test
test test
</P>
<P>
test<BR>test<BR>test<BR>test<BR>
</P>

HTML

Arrivé à ce point, on ne peut plus éviter de parler d'hypertexte (voir lexique). Pour illustrer le principe, créons un document appelé "index.html" et tentons ceci entre "<BODY>" et "</BODY>"

<H1>Choisissez :</H1>
<P>
<A HREF="exemple1.html">Page 1</A>
</P>
<P>
<A HREF="exemple2.html">Page 2</A>
</P>
<P>
<A HREF="http://www.amiga.de">Site Amiga</A>
</P>

Le "A" vient de "ancrage" et en cliquant sur les hyperliens que vous venez de créer (fig.3), vous comprendrez vite comment ça marche.

HTML

Nous n'avons pas donné à notre fichier principal ce nom "index.html" par hasard : c'est le fichier par défaut du répertoire. Ainsi, http://www.amiga-news.com/ signifie en réalité http://www.amiga-news.com/index.html.

Pour finir cette première leçon donnons une dernière touche à notre page : on va ajouter un copyright en fin de page. Cela protégera vos droits d'auteur, mais permettra surtout à ceux qui consultent votre page de vous contacter. Reprenez le premier exemple (ou le second, si vous préférez ;-)) et ajoutez ceci à la fin, mais bien sûr avant </BODY> :

<HR>
<P>
1997 <A HREF="mailto:dbucher@amiganews.ch">Denis Bucher</A> - Dernières modifications le 25 octobre 1997
</P>

Le <HR> ajoute une belle ligne de délimitation (fig.4) et le "mailto:" signifie que l'hyperlien ne pointe pas sur une page mais sur une adresse électronique (la mienne en l'occurrence, alors n'hésitez pas à me poser des questions si quelque chose n'est pas clair :-)).

HTML

Lexique

HTML : HyperText Markup Language. Il s'agit du format de texte utilisé pour créer les sites WWW. Comme son nom l'indique, il s'agit d'hypertexte (comme AmigaGuide).

Hypertexte : format de texte, dont certaines parties sont cliquables et pointent plus loin, notamment sur d'autres documents.

WWW : World Wide Web (toile d'araignée mondiale) définit à la fois un site proposant des pages HTML et l'ensemble des sites sur Internet. Ces pages sont constituées de texte et d'images et parfois (de plus en plus) d'objets animés ou de sons.

"Web" : Abréviation de WWW.

Le mois prochain

Le mois prochain, nous verrons les commandes de ce mois plus en détail et les alignements de texte. Nous apprendrons aussi comment ajouter des images et les rendre plus adaptées au contexte, ainsi que quelques techniques pour accélérer leur transfert... Et peut-être d'autres choses encore !


[Retour en haut] / [Retour aux articles] [Article suivant]