Obligement - L'Amiga au maximum

Mercredi 18 octobre 2017 - 20:24  

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


Contact

David Brunet

Courriel

 


En pratique : HTML - définition
(Article écrit par Jean-François Richard - novembre 2007)


Le HTML (ou HyperText Markup Language) est, après une traduction littérale de l'anglais, un langage hypertexte à balises (ou marqueurs). Cela veut dire que l'on va gérer la façon dont un texte va s'afficher au sein du navigateur. Ainsi, on peut voir dans tout code source HTML en comparaison d'un éditeur de texte (comme Word pour le plus connu), des différences marquantes, comme des balises (ou marqueurs) dans le texte d'une page Web.

Les images, sons et autres contenus multimédias ne se retrouvent pas dans une page Web visualisée sous forme de code. Par contre, si on visualise dans un navigateur cette page Web, alors les images et les sons la composant seront là. La différence entre les deux réside dans le simple fait que les contenus multimédias comme les paramètres de formatage du document sont sous la forme de texte inclus au sein de ces balises précédemment citées.

Donc, HTML n'est pas un langage de programmation au sens classique du terme, mais est essentiellement un langage de formatage du texte, permettant l'habillage de pages Web qui sans celui-ci seraient bien dénuées d'intérêt.

Les éléments du langage

Les spécifications HTML font la différence entre les types d'éléments et les balises (ou marqueurs). Exemple : l'élément page HTML et ses balises.

Les signes < et > délimitent la balise. Ici <html> est une balise d'ouverture et </html> une balise de fermeture. L'élément HTML est, quant à lui, encadré par une balise d'ouverture de l'élément HTML <html> et une balise de fermeture de l'élément HTML </html> contenant elle aussi le nom de l'élément et précédée par un slash (/) spécifiant la balise comme une balise de fermeture. La balise d'ouverture peut avoir divers attributs lui étant incorporé si nécessaire.

Attention, les éléments ou textes contenus entre ces deux balises sont considérés comme le contenu de l'élément HTML (ici le contenu de la page Web). On peut faire le même raisonnement avec tout type d'élément du langage, hormis le fait que certains éléments ne possèdent pas de contenu et ne possèdent pas de balises de fermeture, ce sont les balises orphelines (voir tableau 1 : les éléments).

Une autre notion importante de HTML est qu'il est basé sur la technique de l'hypertexte, cette technique permet de spécifier des URL au sein d'une même page ou entre des pages différentes. Si l'on prend la globalité des liens existant sur Internet on aurait un aperçu de ce qu'est le World Wide Web, une gigantesque toile sur laquelle des noeuds sont en fait des serveurs de contenus multimédias et les centaines de fils composants la toile les câbles reliant les machines au réseau.

Tableau 1 : les éléments

 

Exemple de balise sans attributs

Exemple de balise avec attributs

Exemple de balise orpheline

Marqueur d'ouverture de l'élément contenant :
le nom de l'élément
les attributs associés à cet élément

<html>

<p width=”150”>

<br>

Contenu de l'élément

Code de la page Web

Le texte affiché dans un paragraphe

Pas de contenu

Marqueur de fermeture de l'élément

</html>

</p>1

Pas de marqueur de fermeture


1 : facultatif dans la pratique, mais obligatoire selon les spécifications.

Le futur de HTML

HTML n'est pas voué à disparaître soudainement, c'est un standard qui rayonne sur la toile et n'a pas fini d'être d'actualité, la version 4.01 est la plus aboutie et ne sera plus modifiée.

Par contre, HTML évolue vers XML et ce dernier étant plus indigeste pour les internautes novices en programmation, une nouvelle application émerge de cette recherche de passerelle entre le HTML et le XML, le bien nommé XHTML (HTML se retrouve englobé et modularisé dans XML par la spécification XHTML).

HTML et XHTML ont des bases communes, les différences spécifiques à XHTML seront précisées plus tard dans ce cours. Pour être simple, XHTML est une reformulation de HTML pour qu'il soit aux normes de XML. Mais le futur, HTML est en cours de formulation par le W3C et sera sans doute mis en place comme recommandation vers les années 2010. Alors "Back to the Future", nous étudierons le HTML 4.0.1 dans cette série d'articles, le HTML 5.0 sera détaillé dans un article ultérieur.

Lancement de l'éditeur

Pour lancer l'éditeur de texte

Sous AmigaOS 4, cliquez sur le raccourci Notepad (bloc-notes) du dock pour qu'il se lance. Le Notepad sera votre éditeur de page HTML, vous pourrez créer vos pages avec.

Sous AmigaOS 3.x ou MorphOS, vous pouvez utiliser Ed (inclus au système) ou des éditeurs de texte comme CygnusEd ou NoWInEd.

Maintenant lancez votre navigateur Web

Sous AmigaOS 4 : AWeb, IBrowse.
Sous MorphOS : AWeb, IBrowse, Voyager, Sputnik.
Sous AmigaOS 3.x : AWeb, Voyager, IBrowse.

Le démarrage de votre navigateur va provoquer la recherche d'une connexion à distance avec un FAI (Fournisseur d'Accès à Internet). Vous pouvez aussi travailler hors connexion, si vous êtes en cours de test et de débogage de vos sources HTML.

Astuce : si vous voulez vous éviter d'essayer de vous connecter à chaque démarrage sur la page d'accueil de votre FAI, il faut, dans le menu de votre navigateur, sélectionner une adresse en local (comme sur la page de démarrage d'AWeb sous AmigaOS). Ici dans l'image 1, on remarque que l'adresse locale est "file:///Work:Documentation/english.html".

HTML
Image 1

Pour un confort de code plus agréable, configurer une bonne fois votre éditeur et votre navigateur pour pouvoir avoir l'un et l'autre sous les yeux simultanément et ne pas jongler avec les deux onglets dans la barre des programmes.

Pour éditer une page ".html", il suffit d'ouvrir le fichier et vous obtenez un texte ASCII lisible, avec des éléments plus mystérieux entourant ce texte ou selon le navigateur (ici AWeb) que vous utilisez sous AmigaOS, choisir "Edit Source" (pour modifier) ou View Source (pour le visualiser seulement) comme montré sur l'image 2.

HTML
Image 2

Pour visualiser une page HTML, il existe plusieurs façons :
  • Soit cliquer dessus et la page va s'ouvrir dans l'application à laquelle elle est liée (le navigateur Web).
  • Soit aller dans le navigateur, choisir le menu "Fichier" et le sous-menu "Ouvrir" (puis parcourir le disque dur ou tout autre support pour trouver le fichier .html à visualiser).
  • Soit glisser-déposer le fichier .html dans la fenêtre du navigateur.
En résumé :
  • Les balises ont toujours le nom de l'élément comme premier mot de la balise et les mots supplémentaires sont les attributs de cet élément.
  • Les balises sont de deux types : les balises d'ouverture (par exemple: <html>) et les balises de fermeture (</html>). Elles définissent et affectent une région du document HTML par la balise d'ouverture et continue jusqu'à la balise de fermeture correspondant à l'élément. <…> Une balise de fermeture ne contient jamais d'attributs. Seules les balises orphelines (ou éléments ouverts ou balises vides) ne possèdent qu'une balise d'ouverture sans balise de fermeture.
Bref survol des possibilités de HTML 4.01

HTML 4.01 est un langage de formatage de documents diffusés par le biais du World Wide Web. Son créateur est Tim Berners-Lee, aussi inventeur du protocole http.

Attention le langage HTML n'est pas un langage de programmation au sens strict du terme, c'est un langage de description de page web. Il décrit la façon de mettre en forme le contenu de la page au sein d'un navigateur Web. Ce langage a été standardisé et cela le rend portable sur l'ensemble des systèmes le prenant en compte.

Le langage HTML octroie au créateur de pages Web diverses possibilités :
  • De mise en page par la présence de...
    • Séparateurs
    • Divisions
    • Paragraphes
    • Règles
  • De mise en forme par l'existence de...
    • Titres
    • Caractères en gras, en italique, souligné, biffé
  • De navigation sur une même page, un même site, vers d'autres pages d'autres sites, grâce...
    • Aux ancres
    • Aux liens internes, externes, vers d'autres protocoles
  • D'afficher des images et de les rendre interactives
    • Images statiques
    • Images cliquables
    • Images liens, mappés
  • De présentation sous forme de listes, de tableaux
    • Tableaux pour la présentation de résultats
    • Tableaux pour l'affichage d'une page
    • Différents types de listes
  • De séparation de la page en plusieurs cadres distincts
    • Les cadres et la hiérarchie de l'affichage des pages d'un site
  • D'interaction avec les visiteurs de votre site par le biais de formulaires
    • Les différents types de champs utiles dans un cadre
    • Ajout d'interaction avec l'utilisateur par le biais de champ de saisie
    • Validation d'envoi d'un formulaire par un champ particulier
    • Les différentes méthodes de récupération d'un formulaire HTML
Nous allons voir tout cela dans la suite de ce cours jusqu'au chapitre traitant des images. Et ce sera dans un cours de notions avancées du langage HTML, que nous poursuivrons avec les listes, les tableaux, les cadres et pour finir avec les formulaires.


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