Cours HTML pas à pas complet

Cours HTML

Unité d’enseignement IMTC

Date : 24 Novembre 2006

Auteur : Olivier Hansen

Extrait du programme des cours :

24 novembre	TD 1:Initiation à HTML - Premiers pas de pratique du langage HTML	O. Hansen 14-16h	101
	TD 2 : Réalisation d'un site Web élémentaire: maîtrise d'un éditeur de pages, liens hypertextes, image, son, vidéo	O. Hansen 16-18h	101
1er  décembre	TD 3 : Intégration de différents outils : serveur Apache, langage PHP et SGBD MySQL pour la réalisation de base de données médicales accessible par Internet (1)	V. Douzal 14-16h	101

Sommaire

1        

Ce cours a pour objectif de présenter les éléments de base du langage HTML.

Après une présentation de l’environnement du web et de l’historique du web, l’essentiel du cours portera sur la création de pages HTML présentant ces différents éléments de base.

2        

• Quels sont les différents moyens pour afficher un texte à l’écran ?

• Comment est présenté un texte ?

• Comment indique-t-on le style des caractères, leur format, leur couleur … ?

• Quelle est la taille du fichier ?

3        

Html émane du World Wide Web Consortium, abrégé W3C. C’est un consortium fondé en octobre 1994 pour promouvoir la compatibilité des technologies du World Wide Web telles que HTML, XHTML, XML, CSS, PNG, SVG et SOAP. Le W3C n'émet pas des normes au sens européen, mais des recommandations à valeur de standards industriels.

Quelques abréviations:

• SGML : Standard Generalized Markup Language (langage normalisé de balisage généralisé) – est un langage de description à balises, de norme ISO (ISO 8879:1986).
• HTML : l'Hypertext Markup Language est le langage informatique créé et utilisé pour écrire les pages Web. HTML permet en particulier d'insérer des hyperliens dans du texte, donc de créer de l'hypertexte, d'où le nom du langage.
• XML : Extensible Markup Language, « langage de balisage extensible ») est un langage informatique de balisage générique. Le W3C recommande XML pour exprimer des langages de balisages spécifiques (exemples : XHTML, SVG, XSLT). Son objectif initial est de faciliter l'échange automatisé de contenus entre systèmes d'informations hétérogènes, notamment, sur Internet. XML est un sous-ensemble de SGML dont il retient plusieurs principes dont : la structure d'un document XML est définissable (DTD) et validable par un schéma, un document XML est entièrement transformable dans un autre document XML. Cette syntaxe est reconnaissable par son usage des chevrons (< >), elle s'applique à de plus en plus de contenus.
• XHTML est le successeur de HTML (de l'anglais HyperText Markup Language), XHTML respectant la syntaxe définie par XML, plus récente et plus simple que la syntaxe définie par SGML respectée par HTML.
• CSS : Cascading Style Sheets, ce sont les feuilles de style en cascade utilisées pour décrire la présentation d'un document structuré écrit en HTML ou en XML
• DTD : La Document Type Definition, ou Définition de Type de Document, est un document permettant de décrire un modèle de document SGML ou XML
• PNG : Portable Network Graphics est un format d'images numériques ouvert, qui a été créé pour remplacer le format propriétaire GIF, dont la compression était soumise à un brevet.
• SVG : Scalable Vector Graphics est un format de fichier basé sur XML permettant de décrire des ensembles de graphiques vectoriels.
• SOAP : Simple Object Access Protocol est un protocole de RPC orienté objet bâti sur XML.
• RPC : Remote Procedure Call est un protocole permettant de faire des appels de procédures sur un ordinateur distant à l'aide d'un serveur d'application (modèle client-serveur)

4        

• L’hypertexte : l’idée est de réaliser automatiquement le renvoi qu’un texte un peu élaboré fait à d’autres parties de lui-même ou à d’autres textes. Cela se fait en activant des zones particulières du document, les liens hypertexte (hyperlinks). On fait remonter cette idée à un article de 1945, qui a frappé des imaginations qui l’ont mise en œuvre au SRI (Stanford research institute) et au Xerox Parc. On l’a trouvée un peu plus tard chez Apple avec Hypercard (mais au sein d’une seule application sur une machine, pas à travers des réseaux interconnectés). Une bonne idée a sans doute été de décliner une catégorie de documents (très) simple à partir de SGML (Standard generalized markup language), un système de balisage généralisé permettant de construire de façon très ouverte des structures dans du texte. Des séquences particulières de caractères codent, au sein même du texte, sa structure. L’HTML est une catégorie de texte SGML, spécifiée, standardisée par une DTD (Document type definition). La simplification permettait d’avoir des interpréteurs viables, qui puissent assurer un fonctionnement interactif.
• L’interopérabilité : permettre aux documents HTML d'être accessibles sur des plates-formes et des navigateurs différents est fondamental dans la conception de ce langage. L'ambition était d'avoir un langage de description de documents au format ouvert qui soit indépendant de ce qui servirait à lire les pages. Par conséquent, il n'est pas prévu que telle ou telle police de caractère soit utilisée explicitement, ni que le moniteur du client utilise telle ou telle résolution. Le logiciel exploité pour la navigation devrait lui aussi ne pas être une source de discrimination.
  Parvenir à l'interopérabilité permet de baisser les coûts des fournisseurs de contenus parce qu'ils n'ont à développer qu'une seule version d'un document. Si cet effort n'est pas fait, le risque est grand de voir le Web régresser vers un monde propriétaire de formats incompatibles, en réduisant en fin de compte son potentiel commercial au détriment de tous ses participants.
  Le langage HTML a été développé avec l'intuition que les appareils de toutes sortes devaient pouvoir utiliser les informations sur le Web : les ordinateurs personnels avec des écrans de résolution et de profondeur de couleurs variables, les téléphones cellulaires, les appareils portables, les appareils de synthèse et de reconnaissance de la parole, les ordinateurs avec une bande passante faible comme élevée, et ainsi de suite.
• Séparer la structure de la présentation : L'expérience montre que la séparation de la structure d'un document de sa présentation permet de réduire les coûts de diffusion vers un grand éventail de plates-formes, de médias, etc., et facilite la mise à jour des documents.

Différentes versions de HTML ont été implémentées. La version la plus à jour actuellement est HTML 4.

5        

Appelé aussi le web, la toile …

5.1     

Les applications sur le web fonctionnent selon un environnement client/serveur, cela signifie que des machines clientes (des machines faisant partie du réseau) contactent un serveur, une machine généralement très puissante, qui leur fournit des services, l’accès aux sites

5.2     

Il existe une énorme quantité d'informations sur Internet (plusieurs millions ou milliards de documents, sur les milliers ou millions de serveurs), et ces informations sont pour la plupart renouvelées quotidiennement. Le moteur de recherche est un élément indispensable pour s'y retrouver !

Un moteur de recherche (Searchbot en anglais) est une machine spécifique (matérielle et logicielle) chargée d'indexer des pages web afin de permettre une recherche à l'aide de mots-clés dans un formulaire de recherche.

Les principaux : AltaVista, Google, Yahoo …

5.3     

L'élément clé pour la navigation au sein des pages web est le navigateur (en anglais browser). Utilisé sur le client, ce logiciel est capable d'interroger les serveurs web, d'exploiter leurs résultats et de mettre en page les informations grâce aux instructions contenues dans la page HTML.

Les deux principaux navigateurs utilisés sur Internet :

• Mozilla Firefox,
• Microsoft Internet Explorer.

ATTENTION : malgré la volonté du W3C d’uniformiser les langages pour assurer une compatibilité optimale entre tous les intervenants sur le web. Les implémentations des normes ne sont jamais parfaites. Lors de l’affichage d’une page html, il est donc fréquent de ne pas obtenir exactement le même comportement suivant le navigateur utilisé.

6        

HTML est un langage à balises. Les documents écrits dans un langage à balises contiennent essentiellement deux choses : des données, et des meta-données. Pour faire simple : la meta-donnée est une information supplémentaire qui ajoute un contexte ou une signification particulière à une donnée. Un exemple, prenons le texte :

Ma première page en HTML

Bonjour, voici mapremière page web !

Un humain sait que « Ma première page en HTML» est le titre du texte, et « Bonjour, voici ma première page web !» son contenu avec des polices de caractères différentes. Toutefois, les programmes d'ordinateurs ne sont pas humains et ne savent pas tout ça. Nous utilisons donc des meta-données exprimées par des balises pour ajouter un sens à la donnée.

Un fichier HTML doit être suivi de l’extension « .html » ou  « .htm ».

6.1     

Exemple, créons le fichier avec ce contenu :

<HTML>

<HEAD>

<TITLE>Ma première page en HTML</TITLE>

</HEAD>

<BODY>

Bonjour, voici ma première page web !

</BODY>

</HTML>

Ouvrons le fichier avec un navigateur et regardons ce qu’il affiche.

Explications des balises utilisées :

<FONT color="red">Rouge</FONT> <BR>

<FONT color="#FFFF00">Jaune</FONT> <BR>

<BODY bgcolor="#000000">

<FONT color="#FFFFFF">texte blanc sur fond noir</font>

Et actualisons la page dans le navigateur.

Explications des nouvelles balises utilisées :

• <br> : cette balise permet de faire un saut de ligne. Lorsque vous écrivez du texte dans une page web, il y a un retour automatique à la ligne lorsque le texte atteint le bord droit de l'écran. Avec la balise <br>, vous pourrez faire des sauts de ligne à votre guise. Un "BR" correspond à un saut de ligne, pour laisser une ligne blanche entre 2 paragraphes par exemple il faut placer 2 "BR" (==> <BR><BR>). Il n'y a pas de balise de fin !
• <font> et </font> : elles permettent de modifier l'apparence du texte. Elle doit recevoir des informations provenant d'attribut(s) pour connaître la mise en forme à appliquer. Pour l'instant, nous avons juste vu l'attribut "color" qui permet de mettre le texte en couleur. Les couleurs les plus fréquentes peuvent être nommées explicitement en anglais (red, green, blue, ) sinon il faut placer le code Hexadécimal de la couleur voulue. Essayez "green", "#008000", "blue", "#0000FF", "yellow", "#FFFF00". Vous trouverez la liste des principaux codes couleurs sur notre page Codes couleurs. La couleur du texte est par défaut noir (#000000 ou black).
• Nous avons également vu l'attribut "bgcolor" dans <BODY> : "bgcolor" (==>background color : couleur de fond) permet de mettre le fond de l'écran en couleur tout comme le fait "color" pour le texte. C'est le même principe pour le code des couleurs. La couleur du fond est par défaut blanc (#FFFFFF).

Petites "définitions" :

<FONT size=7>Taille 7</FONT> <BR>

<FONT size="-2">Taille -2</FONT> <BR>

<FONT size=4 face="Verdana">Taille 4 en Verdana</FONT> <BR>

<FONT size=2 face="Comic sans MS">Taille 3 en Comic sans MS</FONT> <BR>

<FONT face="Arial, Times New Roman" color="#336699">Taille normal en Arial si la police existe sinon en Times New Roman en couleur #336699</FONT> <BR>

Explications des nouveaux attributs utilisés :

• l'attribut "size" : "size" (==> taille) permet de modifier la taille du texte compris entre <font> et </font>. Vous avez le choix entre donner un nombre entre 1 et 7 (par défaut => 3) ou bien donner une valeur de "décalage" par rapport à la taille par défaut du navigateur ("-2", "-1", "+1", "+2", "+3", "+4").
• l'attribut "face" : "face" (==> apparence) permet de choisir la police dans laquelle le texte sera affiché.Vous pouvez préciser plusieurs noms de police séparés par des ','. Si la navigateur ne reconnaît pas le premier nom, il essayera avec le suivant S’il ne reconnaît aucun nom, il utilisera la police par défaut du navigateur utilisé.

Petites remarques :

• Vous pouvez tout à fait cumuler les attributs dans une balise (séparés par un espace) !
• Inutile d'utiliser des polices très spéciales car si les visiteurs ne l'ont pas sur leur ordi, le navigateur ne la reconnaîtra pas et donc ne l'utilisera pas.

6.2.3    

Ajoutons :

<B>texte en ???</B> <BR>

<CENTER>texte centre</CENTER> <BR>

Explications des nouvelles balises utilisées :

• Attention à bien refermer vos balises sinon la suite du texte aura également les propriétés de la balise non refermée. Par exemple si vous oubliez de refermer la balise pour placer des commentaires (<!-- -->), la fin de votre code ne s'affichera pas !
• On peut cumuler les balises, pour par exemple mettre un texte en gras, en italique et centré. Il faut bien faire attention à l'ordre des balises pour les refermer (dans l'ordre inverse de l'ouverture) !

6.2.4    

Ajoutons :

<P align="right">texte aligné</P> <BR>

<BLOCKQUOTE>texte en retrait</BLOCKQUOTE> <BR>

<H1>Titre en 1</H1>

Explications des nouvelles balises utilisées :

• <p> et </p> avec l'attribut "align" : permet de créer un paragraphe avec du texte aligné soit à gauche ("left"), à droite ("right"), au centre ("center") ou en justifié ("justify").
• <blockquote> et </blockquote> : permet de décaler un bloc de texte par rapport au bord gauche.
• <h1> et </h1> : permet de définir des titres. Il existe 6 types de titres numérotés de 1 à 6. Vous pouvez utiliser le même attribut "align" que celui de <p>.

6.2.5    

Ajoutons :

<UL type="disc">

<LI>Page 1</LI>

<LI>Page 2</LI>

</UL>

<br>

<OL>

<LI>Page 3</LI>

<LI>Page 4</LI>

<LI>Page 5</LI>

</OL>

Explications des nouvelles balises utilisées :

• <ul> et </ul> avec l'attribut "type" : indique le début et la fin d'une liste de puces (disc, circle, square).
• <ol> et </ol> : indique le début et la fin d'une liste numérotée (avec des lettres : attribut type="a").
• <li> : désigne un nouvel élément d'une liste.

6.2.6    

Ajoutons :

<HR size=10 align="right" color="#FF0000" width="60%"> <BR>

Explications de la nouvelle balise utilisée :

Quel chemin emprunter pour accéder à ce fichier ?

Il y a deux types de chemins d'accès : les chemins absolus et les chemins relatifs :

• Les chemins relatifs permettent d'accéder à des fichiers qui se trouvent sur la même machine que le fichier (la page web) qui les appelle.
  • Pour utiliser un fichier image qui se trouve dans le même répertoire que votre page web, il suffira simplement de préciser le nom de ce fichier : (le .ext remplace l'extension du fichier dans cet exemple théorique, dans la pratique, nous aurons .gif, .html, .js, )
  • Si le fichier se trouve dans un sous-répertoire du répertoire qui contient notre page web, il faudra accéder au fichier comme ceci :
  • Si le fichier se trouve dans un autre répertoire, voici comment procéder :
    Le "../" permet de remonter d'un "étage" dans l'arborescence des répertoires.
    Si vous devez remonter de 2 "étages" =>
• Les chemins absolus utilisent l'URL du fichier, donc pour accéder à des fichiers qui se situent sur une autre machine (pour les liens hypertextes vers des sites extérieures par exemple), il faut utiliser des chemins absolus et donc des URLs (par exemple :

Définition : Une URL (Uniform Resource Locator) est un format de nommage universel pour désigner une ressource sur Internet.

6.3.1    

Ajoutons dans notre fichier :

<CENTER><IMG src="/" border=10 width=88 height=31 alt="Logo"></CENTER>

Explications de la nouvelle balise utilisée :

• Ce dernier attribut "alt" est très important pour le référencement de votre site. Il vaut donc mieux ne pas le négliger et l'utiliser dans chacune de vos balises <IMG>.
• Si vos images ne s'affichent pas (une croix rouge les remplace), c'est certainement une erreur dans le chemin d'accès vers le fichier image. Vérifier bien le nom du fichier, le nom du répertoire Il arrive également que les certains éditeurs HTML vous insèrent des chemins du style c:/mes documents/ , les images s'afficheront donc en local (chez vous) mais par sur le web. C'est normal vu que ce chemin n'existe pas sur la machine où se trouvent vos pages web. Il faudra donc modifier ces chemins par des chemins relatifs.
• Pour mettre une image comme fond d'écran, il faut utiliser l'attribut "background" de la balise <BODY>. Il veut toujours mieux utiliser un fond d'écran fixe (pas une image animée).

6.3.2    

Les liens portent bien leur nom. Ils permettent de faire la liaison entre les pages web. Pour changer de page, il faut cliquer sur un lien, le navigateur chargera alors la nouvelle page.

Il y a 3 types de liens :

• Les liens internes à un site (=> utilisation très fréquente des chemins relatifs car plus court à taper).
• Les liens internes à une page (ou ancre) (=> utilisation de chemins absolus ou relatifs).
• Les liens externes (=> uniquement des chemins absolus !)

Ajoutons d’abord quelque part au milieu de notre page, la définition d’une ancre :

<BR> <CENTER><FONT color="green" size=4><A name="ancre1">Renvoi ici</A></FONT></CENTER> <BR> <BR>

Puis à la fin, avant </body> :

<A href="/">Lien vers la page 2</A> <BR>

<A href="#ancre1">Lien vers l'ancre 1</A> <BR>

<A href="/">Lien vers un site externe</A> <BR>

<A href="/ ">Lien vers une ancre sur une page d'un site externe</A> <BR>

<A href="/">

Explications des nouvelles balises utilisées :

• <a> et </a> : permettent de créer un lien hypertexte. Son attribut principal est "href". En effet, il permet de préciser l'adresse de la page de destination du lien qui sera créé. Cette adresse peut être soit absolue soit relative.
  Si vous souhaitez faire un lien interne à une page, il faut créer une ancre.

Quelques remarques :

Pour l'ouvrir hors de la page avec windows media player il suffit de faire un lien vers la vidéo de la même façon que l’on insert un lien.

Pour l'insérer directement dans la page, exemple :

<embed src="/" border="1" widht="300" height="300" loop="1" controls="false" autostart="true" autoload="true">

Ou pour du son :

<embed src="/" volume="75">

Explications de la nouvelle balise utilisée :

• <embed> avec l'attribut src (obligatoire) spécifiant l'url de la vidéo. Ses attributs sont nombreux :
  • border : De 1 à 6 spécifie la bordure.
  • widht et height : Largeur et hauteur de "l'écran", en pixels.
  • loop : Spécifie le nombre de fois qu'est jouée la vidéo (pour infini, mettre -1).
  • controls : Active ou désactive la présence des boutons (lecture, pause, stop ) sous l'image "true" (défaut) pour oui et "false" pour non.
  • autostart : Active (true : défaut) ou désactive (false) le démarrage automatique. Si les boutons ne sont pas activés ne mettez pas false à cet attribut au quel cas votre visiteur ne pourrait pas voir la vidéo.
  • autoload : Active (true : défaut) ou désactive (false) le chargement automatique de la vidéo.

Remarque :

• Attention lors des développements dans le répertoire « Documents and Settings » : ce nom de répertoire contient des espaces qui peuvent être mal interprétés et faire échouer les liens. Placez vous de préférence dans un répertoire dont le nom ne contient pas d’espaces.

Pour insérer un fond sonore à sa page, testons :

<bgsound src="/ loop="1">

Explications de la nouvelle balise utilisée :

• <bgsound> possède seulement deux attributs:
  • src Indique l'url du morceau (obligatoire)
  • loop Spécifie le nombre de nombre de fois qu'est joué le morceau (-1 pour infini)

6.4     

6.4.1    

Ajoutons pour notre premier tableau :

<BR><BR>

<TABLE border=1>

<TR>

<TD width=200>Cellule 1</TD>

</TR>

<TR>

<TD>Cellule 3</TD>

<TD width=60%>Cellule 4</TD>

</TR>

</TABLE>

 Explications des nouvelles balises utilisées :

• <table> et </table> : création d'un tableau. Nous avons dans notre exemple précisé, au moyen de l'attribut "border" (0 par défaut), la taille de la bordure autour des cellules de notre tableau. (la balise de fin est obligatoire !)
• <tr> : débute une nouvelle ligne dans la tableau. La balise de fin (</TR>) n'est pas obligatoire. Chaque fois que le navigateur tombera sur une balise <TR>, il considérera que la ligne précédente est terminée et commencera une nouvelle. Toutes les lignes d'un même tableau doivent contenir le même nombre de cellules.
• <td> : crée une nouvelle cellule dans un tableau. Cette cellule doit être contenue dans une ligne et donc une balise "TR" doit être déjà ouverte Vous pouvez ensuite créer autant de cellules que vous voulez dans un même ligne. Une cellule peut contenir un peu tout et n'importe quoi. On peut y mettre du texte, des images La cellule va s'adapter automatiquement aussi bien en largeur qu'en hauteur au contenu le plus haut et le plus large. Et pour finir, toutes les cellules d'une même colonne ont la même largeur (celle de la cellule la plus large), idem pour la hauteur des cellules d'une même ligne.
  Comme pour "TR", la balise de fin (</TD>) est optionnelle.

Remarque :

• Même si les balises de fin </td> et </tr> sont optionnelles, il veut quand même mieux les utiliser pour éviter des problèmes de compatibilité ou de mise en page avec certains vieux navigateurs.

6.4.2    

Ajoutons :

<BR><BR>

<TABLE border=2 bgcolor="#000000" cellpadding=5 cellspacing=3 align="center">

<TR>

<TD width=100 height=100 bgcolor="#CCCCCC" valign="top" align="left">#CCCCCC</TD>

<TD rowspan=2 bgcolor="#333333"><FONT color="#0099FF">Fusion de 2 lignes</FONT></TD>

</TR>

<TR>

<TD bgcolor="#FFFFCC" colspan=2 valign="middle" align="center">Fusion de 2 colonnes</TD>

</TABLE>

 Explications des nouveaux attributs utilisés :

• "bgcolor" permet de donner un fond de couleur à un tableau ou à une cellule.
• "width" permet de préciser la largeur d'un tableau ou d'une cellule. La largeur peut être donnée en pixel ou en pourcentage.
• "height" permet de donner la hauteur d'une cellule. Il n'est pas possible de préciser la hauteur d'un tableau. Attention, si vous donnez une certaine hauteur X à une cellule et que vous placez par exemple une image dont la hauteur est plus grande, la cellule s'adaptera à la taille de l'image en "oubliant" son attribut hauteur ! (idem en largeur).
• "cellpadding" définit l'espace en pixel entre le bord d'une cellule et son contenu. (1 par défaut).
• "cellspacing" définit l'espace entre les cellules du tableau. (1 par défaut).
• "colspan" permet de faire fusionner des cellules d'une même ligne. Il faut y préciser le nombre de cellules à fusionner.
• "rowspan" permet de faire fusionner des cellules d'une même colonne. Il faut y préciser le nombre de cellules.
• "align" précise l'alignement sur un axe horizontal du tableau ou du contenu de la cellule. (valeur possible : "left" par défaut, "right", "center").
• "valign" précise l'alignement du contenu des cellules sur un axe vertical. (valeurs possible : "middle", "bottom", "top").

Petits plus :

Il y a plusieurs moyens pour récupérer ces informations. Soit vous utilisez un script coté serveur (voir ), ce script est interprété sur un serveur chez votre hébergeur et pourra traiter les informations. Soit vous pouvez recevoir les infos directement sur votre adresse email au moyen d'un "mailto".

6.5.1    

Ajoutons encore à notre fichier :

<BR><BR>

<FORM action="mailto:" method="post" enctype="text/plain">

<INPUT type="hidden" name="intro" value="Voici les infos récoltées via la formulaire : ">

Entrez votre nom : <INPUT type="text" name="nom" size=25>

<BR>

Entrez l'adresse de votre site : <INPUT type="text" name="url" size=40 value="http://">

<BR>

Entrez un mot de passe : <INPUT type="password" name="pass" size=10 maxlenght=10>

<BR>

<INPUT type="submit" value="Envoyer" name="submit">   <INPUT type="reset" value="Effacer les données" name="reset">

</FORM>

Explications des nouvelles balises utilisées :

L'attribut "maxlenght" quant à lui définit le nombre maximal de caractères pouvant être tapés dans un champ. Si vous essayez de taper un caractère supplémentaire, il ne sera pas pris dans le champ.

6.5.2    

Ajoutons maintenant :

<BR><BR>

<FORM>

Comment trouvez-vous ce cours jusqu'à présent :

<SELECT name="liste" size="3"></option>

<OPTION value="excellent">Excellent</option>

<OPTION value="bon" selected>Bon</option>

<OPTION value="moyen">Moyen</option>

<OPTION value="faible">Faible</option>

<OPTION value="nul">Pitoyable</option>

</SELECT>

</FORM>

<BR><BR>

<FORM>

Entrez votre texte : <BR>

<TEXTAREA name="texte" cols=40 rows=5>Texte de départ</TEXTAREA>

</FORM>

<BR><BR>

<FORM>

Quels sont vos hobbys : <BR>

Le sport : <INPUT type="checkbox" name="hobby1" value="sport" checked> <BR>

Internet : <INPUT type="checkbox" name="hobby2" value="internet"> <BR>

La télévision : <INPUT type="checkbox" name="hobby3" value="tv" checked>

</FORM>

<BR><BR>

<FORM>

Quel est votre niveau en HTML : <BR>

<INPUT type="radio" name="niveau" value=3>Excellent <BR>

<INPUT type="radio" name="niveau" value=2 checked>Moyen <BR>

<INPUT type="radio" name="niveau" value=1>Débutant

</FORM>

Explications des nouvelles balises utilisées :

Pour sélectionner la valeur par défaut, comme pour les cases à cocher, il faut ajouter le mot 'checked' dans la balise du bouton par défaut.

6.6     

Très pratiques au début d’Html, l’utilisation des frames (voir aussi <iframe>) est aujourd’hui controversée. Dans la logique de départ, les frames servaient à structurer l'interface d'une page Internet de manière à avoir plusieurs éléments distincts pouvant défiler indifféremment les uns des autres. Bien vite cette balise fût détournée pour afficher d'autres informations non voulues par le visiteur, allant même jusqu'à masquer son contenu (taille à 0 par exemple).

De plus les frames ne sont pas compatibles avec tous les navigateurs. Prenons comme exemple, les navigateurs en mode texte. On dira "mais personne ne les utilise ! " personne sauf les déficients visuels ou autres handicapés. D'autres catégories de navigateurs existent, citons par exemple PocketIE pour Windows CE, la taille de l'écran n'étant pas toujours adapté à la lecture d'une page comportant des frames, c'est pourquoi ces navigateurs ne les reconnaissent pas !

Pour ceux qui iront plus loin, la solution consiste en fait à utiliser les balises DIV.

6.6.1    

Les frames ne sont pas compatibles avec <BODY>, il faut créer un fichier à part :

<HTML>

<FRAMESET COLS="25%,*">

<FRAME SCROLLING="yes"  NAME="cel-g" SRC="">

 <FRAMESET ROWS="50%,50%">

 <FRAME SCROLLING="yes" NAME="cel-d-h" SRC="">

 <FRAME SCROLLING="yes" NAME="cel-d-b" SRC="">

 </FRAMESET>

</FRAMESET>

<NOFRAME>

Dommage, votre <I>Browser</I> ne permet pas les <I>frames</I>.

</NOFRAME>

</HTML>

7        

Définition:

L'intérêt de réaliser une charte graphique est double :

• L'identité graphique reste intacte quelles que soient les réalisations graphiques, afin que l'organisation, le projet ou l'entreprise (qui sont une somme d'individualités) parle «d'une seule voix». Les anglophones parlent de corporate design (littéralement : dessin de l'entreprise).
• La charte graphique permet au récepteur (par opposition à l'émetteur) d'identifier facilement cet émetteur et, par habitude si la cohérence est respectée, de se repérer visuellement dans les différentes réalisations graphiques - y compris au sein même d'un même support graphique - facilitant sa lecture.

Le concept de feuilles de style est apparu en 1996 avec la publication par le W3C d'une nouvelle recommandation intitulée « Cascading StyleSheets » (feuilles de style en cascade), notée CSS.

Le principe des feuilles de style consiste à regrouper dans un même document des caractéristiques de mise en forme associées à des groupes d'éléments. Il suffit de définir par un nom un ensemble de définitions et de caractéristiques de mise en forme, et de l'appeler pour l'appliquer à un texte. Il est ainsi possible de créer un groupe de titres en police Arial, de couleur verte et en italique.

Les feuilles de style ont été mises au point afin de compenser les manques du langage HTML en ce qui concerne la mise en page et la présentation. En effet, le HTML offre un certain nombre de balises permettant de mettre en page et de définir le style d'un texte, toutefois chaque élément possède son propre style, indépendamment des éléments qui l'entourent. Grâce aux feuilles de style, lorsque la charte graphique d'un site composé de plusieurs centaines de pages web doit être changée, il suffit de modifier la définition des feuilles de style en un seul endroit pour changer l'apparence du site tout entier !

Les feuilles de style permettent notamment :

• d'obtenir une présentation homogène sur tout un site en faisant appel sur toutes les pages à une même définition de style ;
• de permettre le changement de l'aspect d'un site complet entier par la seule modification de quelques lignes ;
• une plus grande lisibilité du HTML, car les styles sont définis à part ;
• des chargements de page plus rapides, pour les mêmes raisons que précédemment ;
• un positionnement plus rigoureux des éléments.

Vous trouverez plusieurs cours sur les feuilles de style sur internet : ,  , …

8        

Nous avons vu comment fonctionnait une page html. On peut légitimement penser que c’est quand même laborieux et qu’il serait pratique de disposer d’un logiciel permettant directement d’éditer une page comme on désire la voir s’afficher. Quand on édite un document avec Word, c’est lui qui se charge des styles, ça nous est transparent et c’est bien pratique.

C’est la notion « tel-tel » : tel affichage, tel résultat. WYSIWYG en anglais, acronyme de la locution anglaise « What you see is what you get » signifiant littéralement « ce que vous voyez est ce que vous obtenez ». Cette notion est utilisée en informatique pour désigner les interfaces utilisateur graphiques permettant de composer visuellement le résultat voulu. Elle désigne, de fait, une interface « intuitive » : l'utilisateur voit directement à l'écran à quoi ressemblera le résultat final.

Pourquoi ne pas avoir commencé par là ?

Parce qu’il est très souvent utile de comprendre le code généré par l’éditeur. Quand on n’arrive pas à générer ce qu’on veut :

• soit parce qu’il peut être plus compliqué de se servir de l’interface que de générer le code soit même,
• soit parce que la fonction que vous cherchez n’a pas été implémentée,
• soit parce qu’il y a tout simplement un bug dans l’éditeur.

Quels éditeurs sont disponibles ?

• Payants :
  • Adobe Dreamweaver
  • Microsoft FrontPage
  • Webexpert
  • …
• Gratuits
  • Nvu
  • HTML Kit
  • …

Annexe 1           

Le web est la meilleure source de renseignements pour la recherche d’informations à propos du web :

• Une encyclopédie libre issue d’un effort de collaboration des internautes : ().
• La définissant HTML ().
• Quelques cours et tutoriels :
• Comment ça marche ? 

Tous les exemples de ce cours proviennent d’un cours en ligne :

Livres : Beaucoup de livres traitent d’HTML et du développement de sites Web. Pas tous de bonne qualité ni faciles à utiliser. De plus en informatique le plus souvent, on ne lit pas un livre du début à la fin, on cherche la solution d’un problème qui vient de se présenter lors d’un développement quelconque. Il est important donc que le livre soit rédiger avec de bons sommaire, index, glossaire … Il n’est possible de se rendre compte de la qualité du livre que en essayant justement quelques recherches.

Quelques références tous disponibles à la BU de sciences :

• Cas pratiques, initiation aux langages HTML et XML de Cassagne et Rampnoux chez Ellipses. Petit et concis.
• Guide de l’utilisateur HTML 4 XML chez Micro application. Un peu vieux mais en couleur, plein d’exemples et de copies d’écran.
• HTML entraînez-vous pour maîtriser le code source chez Eni. Plein d’exercices.
• HTML et XHTML la référence de Musciano et Kennedy chez O’Reilly. Un pavé mais il y a tout, plus pour les experts.

Un site écrit en pur HTML :

Annexe 2           

Alors qu'HTML est un langage à part entière, son vocabulaire est figé (Balises imposées). Il ne concerne que la mise en page, pas la syntaxe ni la signification. XML peut être considéré comme un méta-langage (Balises non imposées => définies par le concepteur). Permettant de définir d'autres langages, permettant de décrire des protocoles.

Eléments de syntaxe XML :

• Toute balise ouvrante doit donner lieu à une balise fermante <maBalise> Bonjour </maBamise>
• Certaines balises peuvent être uniques => terminées par / : <maBaliseUnique/>
• Les espaces, en dehors du balisage, sont préservés
• Le nom des attributs sont écrits en minuscule
• Les valeurs d'attributs sont entre guillemets
• XML utilise entièrement UNICODE (norme ISO 10646)
• «Casse dépendant »(minuscules ?majuscule)
• les données peuvent contenir presque tous les caractères UNICODE : cadre général pour définir des tables de caractères.

Annexe 3