Archives de catégorie : C – Le langage HTML

Introduction à HTML

Qu’est ce que HTML ?

HTML est le langage STANDARD utilisé pour constituer les pages d’un site web statique.

De manière plus concise, HTML est le langage de publication du Web.

HTML veut dire Hyper Text Markup Langage, ou langage avec balises .
Il permet de définir des documents web Hypermedia, qui contiennent donc du texte, des images, du son, de la vidéo etc…(hyper) reliés entre eux par des liens. En bref tout ce sur quoi vous surfez est écrit en HTML.
Une balise s’appelle également un ‘marqueur’ ou un ‘tag’ HTML.
Une balise se note <nom_balise>
C’est un langage de DESCRIPTION de documents dérivé historiquement de SGML.

Remarque : tous les navigateurs (FireFox, Internet Explorer ou IE, Netscape, Mozzilla) comprennent le HTML, le décodent et vous affichent de beaux documents renvoyés par les serveurs Web.

Si vous voulez voir à quoi ressemble VRAIMENT HTML, lorsque vous êtes sur un site Internet , allez dans le menu ‘Afficher ou affichage, et afficher « Source »

Qu’est ce que n’est pas HTML ?

HTML n’est pas un langage de programmation. Il ne permet pas de faire des traitements, et n’offre pas les instructions classiques de déclaration, d’affectation de variables, de boucles, de tests SI…ALORS..SINON…etc.
Pour ‘programmer’ une page Web, il faudra utiliser un langage comme Javascript, PHP ou java par exemple.

Quelle version d’HTML : HTML 4.01 ou XHTML ?

La dernière version d’HTML est actuellement la version 4.01, c’est cette version que nous étudierons ici.
La description complète d’HTML 4.01 est hébergée sur le site du World Wide Web Consortium (W3C) sur : http://www.w3.org/TR/html401/
organisme qui préside aux destinées du Net en général et d’HTML en particulier.

Il est prévu que HTML 4.01 soit remplacé par XHTML.
XHTML veut dire EXtensible HyperText Markup Language

XHTML est

  • presque identique à HTML 4.01
  • une application XML
  • recommandé par le W3C
  • plus rigoureux et mieux ‘formé’ que HTML
    • tous les document commencent par une déclaration ‘DOCTYPE’ (avant la balise ‘<HTML>’ de début !)
    • chaque balise doit être fermée
    • toutes les balises ET les attributs s’écrivent en minuscule
    • tous les attributs ont une valeur obligatoire (nom_atr= »valeur »)
    • tous les éléments doivent être imbriqués correctement

Toutes les infos sur XHTML sont disponibles sur : http://www.w3.org/MarkUp/

En résumé HTML 4.01 est un peu plus laxiste que XHTML. On peut se préparer à la transition vers XHTML en s’imposant de respecter dans nos documents HTML, les quelques règles précédentes pour mieux former un document

Comment FAIRE une page HTML ? Bloc-note et éditeurs évolués

Comme une page HTML est composée de texte pur, au départ on peut prendre un simple éditeur de texte comme le bloc-note de Windows par exemple.
On l’enregistre avec un nom, sans espaces et sans accents, et se terminant par « .htm » ou « .html »

Si on veut faire une page sans vraiment maîtriser le langage, et être plus productif, on peut utiliser un éditeur d’HTML, relativement fidèle, qui vous montre exactement comment sera affichée votre page dans un navigateur (on dit ‘WYSIWYG’ en anglais , pour ‘What You See Is What You Get’) .

Ci après quelques éditeurs HTML fréquemment utilisés :

  • « Dreamweaver » d’Adobe , une référence
  • « Frontpage » de Microsoft
  • « Dynamic HTML Editor », wysiwig et gratuit
  • Aptana un éditeur puissant et gratuit(mais pas wysiwig) plus orienté développeur

Il est également possible d’utiliser WORD pour créer une page HTML, il suffit de préparer normalement votre document Word et de choisir dans le menu ‘Fichier/enregistrer sous’ , puis l’option ‘Type de fichier : page Web’ et de nommer le fichier avec l’extension ‘.htm’ ou ‘.html’

remarque : ceci peut vous dépanner si vous n’avez pas d’autre éditeur sous la main, mais le code HTML généré est souvent de mauvaise qualité : beaucoup trop verbeux avec de nombreuses balises superflues, trop spécifique Microsoft.

Quel que soit l’outil choisi (même le bloc-note !) , vous aurez toujours la possibilité de nettoyer le code HTML (et éventuellement corriger vos faute de syntaxe) avec un petit utilitaire comme TIDY HTML disponible sur : http://tidy.sourceforge.net/#binaries

Comment VOIR une page HTML

Si vous venez de créer une page HTML sur votre disque dur, avec un éditeur…
vous pouvez visualiser le résultat avec votre navigateur : menu « fichier / ouvrir un fichier  » ou « fichier / consulter » du navigateur.

Si la page HTML n’est pas sur votre disque dur, mais sur Internet, vous savez déj� le faire, il suffit de taper l’adresse de la page dans la zone adresse du navigateur : http://didier.deleglise.free.fr/index.htm par exemple.

Ma première page HTML qui dit bonjour et montre ma photo

Trouvez une image (JPG, ou GIF ou PNG) sur votre disque dur
ou sur Internet : clic droit avec la souris et enregistrez l’image de votre idole (Jennifer Lopez, Brad Pitt ou Albert Einstein) en lui donnant un nom facile à se rappeler (sans espace et sans accent) comme athlete.jpg par exemple.

Dans le bloc note, je tape les lignes suivantes :

<html>
<body>
bonjour
<img src= »athlete.jpg »>
</body>
</html>

Pour cetr exemple, j’enregistre dans le même dossier où se trouve le fichier « athlete.jpg », avec le nom ma_premiere_page.htm, ensuite je lance le navigateur, et ouvre ma_premiere_page.htm avec le menu Fichier/ouvrir…

et je vois à l’écran :

mapage1.jpg

 

 

ipod
Un résumé du chapitre à écouter tranquillement…
Fichier MP3 (5,2 MO / durée 8 min.)
clic-droit + enregistrer la cible du lien sous…

HTML de base, images et liens

La grammaire de base

Quelques règles de conduite

  • Une page HTML est constitué de texte, délimité par des balises
  • un commentaire HTML s’écrit avec les caractères ‘<!– ‘ et ‘–>’ :
    <!– mon commentaire ici –>
  • Chaque balise est encadrée par des caractères obligatoires « < » et « > »:
    « <BODY> » « <HEAD> » « <TABLE> » ou « </B> »
  • chaque balise peut être écrite avec des majuscules ou des minuscules
  • certaines balises (pas toutes) peuvent être personnalisées avec un ATTRIBUT optionnel. La syntaxe est la suivante : <NOM_BALISE NOM_ATTRIBUT = « valeur »> :
    <BODY BACKGROUND= »jennifer.jpg »>
    ici la balise est ‘BODY’, l’attribut est « BACKGROUND » et a la valeur jennifer.jpg.
  • Les balises vont en général par paire. Une balise de début, une balise de fin. Cette dernière commence par un « / » :
    <BODY> et </BODY>
    <TABLE>et </TABLE>
    <HEAD> et </HEAD>
    entre les deux on met du texte et éventuellement d’autres balises…
  • on peut imbriquer hiérarchiquement des balises, mais pas les intercaler

<balise1>…<!– début balise 1 –>
<balise2>…<!– début balise 1 –>
</balise2>…<!– fin balise 2 –>
</balise1>…<!– fin balise 1 –>

est correct car la paire de balises 2 est imbriquée entièrement � l’intérieur de la paire de balises 1. Le code suivant est par contre incorrect

<balise1>…
<balise2>…
</balise1>…
</balise2>

  • une page DOIT commencer par lla balise <HTML>� et finir par la balise </HTML>
  • une page DOIT contenir 2 parties dans l’ordre :
    – l’entête (ou HEAD) qui contiendra des informations plus ou moins cachées, comme le titre de la page, des descripteurs du documents, etc.
    – et la partie principale ou corps (BODY) qui contiendra ce qu’on verra effectivement dans le navigateur.
  • On peut mettre plein d’espace entre les mots d’un document HTML, ils sont ignorés.
    De même, les sauts de lignes et les retours � la ligne dans le texte (touche ‘ENTER’ du clavier) sont ignorés éga lement.

Par exemple

<HTML>
<BODY>
bonjour
cher
ami
</BODY>
</HTML>

donnera exactement le même résultat que :

<HTML>
<BODY> bonjour cher ami <BODY>
</HTML>

notes :
– on peut mettre � peu près n’importe quel texte entre 2 balises HTML, mais il faut quand même prêter une attention particulière aux caractères spéciaux, comme les caractères accentués ou les caractères ‘<‘ et ‘>’ utilisés eux-mêmes dans les balises : voir le chapitre sur les jeux de caractères et les entités, pour plus d’information
– certaine balises unitaires n’ont pas au départ de balises de fermeture </…> correspondante. Une� notation spéciale permet d’ouvrir et de fermer une balise unique, et de rester ainsi conforme aux spécifications XHTML.
on a ainsi :
<BR /> (qui remplacerait un hypothétique <BR></BR>)
<HR />
<IMG …/>

La plus petite page qu’on puisse faire, avec juste UNE lettre par exemple, s’écrira comme ca en HTML :

<html>
<head>
</head>
<body>
A
</body>
</html>

Ca affiche cela (remarquez le titre de la fenêtre) :

page 1

cette page est correcte. Elle obéit aux règles de grammaire qu’on vient de dire. Elle permet juste d’afficher « A » dans un navigateur…;-(

remarque : ceratins navigateurs supportent qu’on omette la partie HEAD, on aurait donc pu faire une page HTML encore + petite…, mais il est intéressant de mettre un titre. Il apparaitra dans la barre en haut de la fenêtre du navigateur, et pourra aussi servir aux moteurs de recherche (google, yahoo ou autre)

Une page avec des liens

Dans les 2 pages vues précédemment il y avait juste du texte et une image et pas de « lien » ou autrement dit de zone sur laquelle on pouvait cliquer pour accéder � une autre ressource.

Les liens cliquables sont la base de la navigation HYPERTEXTE sur le web !
Pour rajouter un lien on a une balise spéciale qui s’appelle une ancre, dans laquelle on mettra du texte ou une image : <A href=…> …</A>
L’attribut « HREF » est très utile puisque c’est lui qui va dire où on va quand on clique sur le lien.

exemple

<html>
<head>
<title>ma page avec 2 liens </title>
</head>
<body>
Pour aller sur la deuxieme page, qui se trouve au même endroit (dans le même dossier du serveur) que celle-ci, <BR>
<A href=page2.htm> cliquer sur ce lien </A>
<BR><BR>
On peut aussi se servir d’un lien qui parle de lui même et accéder � une page externe sur le net. Auquel cas on utilisera le protocole http, avec l’URL complet du site.
<BR>On peut par exemple
<A href=http://dd.estsurinternet.com> aller sur le site Internet de DD</A>
</body>
</html>

A l’écran cela nous donne …

page 2

remarque : on ne met entre les 2 balises <A…> et </A> que la partie ‘cliquable’ du texte

une page avec des images

Pour insérer des images on utilise la balise <IMG> avec un certain nombre d’attribut. Au minimum l’attribut SRC qui précise où trouver l’image, qui peut être comme pour les liens locale ou distante.

<IMG src= »mon_image.jpg »>
<IMG src= »http://serveur_exterieur.domaine.fr/images/autre_image.jpg>

Seul l’attribut « SRC » est obligatoire pour définir l’image mais d’autres peuvent être utiles:

NAME="le nom_de_l’image"
WIDTH="sa largeur en pixel"
HEIGHT="sa hauteur en pixel"
ALT="commentaire alternatif"
BORDER="l’épaisseur de la bordure (0,1,...)"
ALIGN="son alignement (LEFT, RIGHT, CENTER)" L’image peut être cliquable, il suffit pour cela de l’inclure entre les 2 balises <A..> et </A> vues précédemment.

<html>
<head>
<title>ma troiseme page </title>
</head>
<body>
l’image suivante est statique et est stockée sur un site distant<BR>
<IMG src= »http://didier.deleglise.free.fr/images/dad.jpg »>
<BR><BR>
On peut aussi cliquer sur une image locale pour aller sur le site � DD…
<A href=http://dd.estsurinternet.com>
<IMG src= »/images/uploads/mum.jpg » >
</A>
<BR><BR>
Cette dernière image utilise un certain nombre d’attributs spécifiques
<IMG src= »/images/mum.jpg » WIDTH= »100″ HEIGHT= »100″ BORDER= »1″>
</body>
</html>

sur ce dernier exemple l’image est redimensionnée, quelle que soit sa taille d’origine, au format 100×100 pixels et est entourée par un cadre de 1 pixel de large !

page 3

et maintenant à vous ! vous pouvez lors de ce premier exercice : créer votre page HTML

Les principales balises et exemples associés

Dans ce chapitre nous allons voir les principales balises HTML utiles, regroupées par catégorie. Un exemple sera fourni pour la plupart.
La gestion des images, liens, tableaux et formulaires est détaillée dans les autres chapitres.

Structure principale du document

  • <HTML>…</HTML> début et fin de la page HTML
  • <HEAD>…</HEAD> début et fin d’entête, se trouve en début de page HTML et précède le corps du document
  • <BODY>…</BODY> début et fin du contenu réel du document

<HTML>
<HEAD>
ici des élements de l’entête
</HEAD>
<BODY>
et la le corps du document
</BODY>
</HTML>

Dans l’Entête…

  • <META NAME= »keywords » content= »des mots clés séparés par des virgules »> dans l’entête, permet de donner les mots
    clés du texte, utilisés par les moteurs de recherche comme Google.
  • <META NAME= »description » content= »description sommaire du document « > dans l’entête, permet de donner un résumé du texte, utilisé par les moteurs de recherche comme Google.
  • <TITLE>…</TITLE> dans l’entête, donne le titre du document qui apparaît dans la barre de titre de la fenêtre du navigateur
  • <LINK REL= »stylesheet » href= »ma_feuille_de_style.css » type= »text/css » />
    spécifie une feuille de style externe pour la mise en forme du document

<head>
<meta http-equiv= »Content-Type » content= »text/html; charset=UTF-8″ />
<title>Cours Internet</title>
<link rel= »stylesheet » href= »http://universite-digitale.com/style.css » type= »text/css » />
<script type= »text/javascript »>
function une_fonction(param)
{…}
</script>
</head>

Mise en forme des paragraphes

  • <Hn>…</Hn> titre de paragraphe, n donne la taille des caractères
    et varie de 1 � 6, du plus grand au plus petit
  • <P>…</P> paragraphe de texte normal
  • <PRE>…</PRE> texte � afficher tel quel par le browser avec une police de caractères non proportionnelle. Respecte les blancs et les sauts de lignes (sans TAG particulier…)
  • <HR> trace une ligne horizontale de séparation
  • <BR> saut de ligne

<html>
<body>
<h2>mise en forme de quelques paragraphes :</h2>
<p>fzdc fguyzd uy fgduy fguy fguy <br>
eu iue giuefg iuefg iuge fiu gefi g efiug iefugief.<br>
gef gefg yuge fuy gfeuyguy ef guygefuygfuyg uyfg </p>
<p>feh iufhiou hfiou hfiuoh uho iurfhiou fhiuh rf i hiufh rf<br>
uuge fgfvg fiug if ug iu fvg</p>
<hr>
<pre>du texte brut (preformatte)
du texte avec des blancs
du texte avec des tabulations
du texte avec des tabulations
du texte avec des tabulations
</pre>
</body>
</html>

à l’écran cela donne …

texte formatté

A menudo, los problemas de salud física y mental pueden influir en la vida sexual de una persona. Sorprendentemente, se estima que hasta un 30% de los hombres pueden enfrentar dificultades en este aspecto. Los factores como la diabetes, la hipertensión o incluso el estrés pueden contribuir a esta situación. Además, algunas personas buscan alivio en medicamentos, lo que ha llevado a un aumento en las búsquedas de términos como  » en internet. Es crucial entender que, aunque algunos tratamientos están disponibles, siempre es recomendable consultar a un profesional de la salud para encontrar la solución más adecuada. La comunicación abierta y el apoyo emocional también juegan un papel fundamental en el manejo de esta condición.

La disfunción eréctil es un problema más común de lo que muchos piensan, afectando a millones de hombres en todo el mundo. Un hecho interesante es que factores como el estrés, la ansiedad y problemas de salud como la diabetes pueden contribuir significativamente a su aparición. Además, se ha encontrado que ciertos medicamentos pueden ayudar en el tratamiento, y algunos hombres consideran opciones como la posibilidad de “ para abordar sus síntomas. Es fundamental buscar soluciones adecuadas y hablar abiertamente con un profesional de la salud sobre el tema. La comunicación y el tratamiento adecuado pueden hacer una gran diferencia en la calidad de vida de las personas afectadas.

Uno de los factores que puede contribuir a la disfunción eréctil es el estrés, que a menudo afecta la salud sexual de los hombres. Si bien hay tratamientos disponibles, algunos pueden buscar alternativas para aliviar sus síntomas, como el uso de medicamentos. Por ejemplo, algunos hombres han considerado opciones como  » para manejar la ansiedad que puede interferir con su rendimiento sexual.

 


Mise en forme de texte

On évitera les balises <STRONG>, <BOLD>, <I>, et les attributs de couleurs de texte ou de fond.
On utilisera préférablement des feuilles de style, pour toutes les fioritures…


Listes

  • <UL> …</UL> liste d’éléments non ordonnés
  • <OL>…</OL> liste d’élements ordonnés
  • <LI>…</LI> éléments d’une liste ordonnée ou non

remarque : on peut imbriquer des listes dans des listes. La où les sous listes seront indentées (décalées vers la droite) par rapport � la liste mère.

<html>
<body>
<p><strong>une liste non ordonnée avec sous liste :</strong></p>
<ul>
<li> element 1</li>
<li>element 2</li>
<li>element 3
<ul>
<li>sous element 1</li>
<li>sous element 2</li>
</ul>
</li>
</ul>

<p><strong>et une liste ordonnée !</strong></p>
<ol>
<li>element</li>
<li>element</li>
<li>element</li>
</ol>
</body>
</html>

à l’écran cela donne …

listes


Liens cliquables (ou liens hypertexte)

  • <a href= »nom_du_document »>…</a>
    lien vers un document ou une ressource du même site
  • <a href= »http://serveur/nom_du_document »>…</a>
    lien vers un document ou une ressource d’un autre site internet
  • <a href= »url#label »>…</a>lien vers une étiquette particulière
    d’un document externe
  • <a href= »#label »>…</a>
    lien vers une étiquette interne au document
  • <a name= »label »>…</a>
    définit une étiquette cible

Images

  • <img src= »/images/daredevil.bmp » width=… height=… alt= …>
    image en ligne locale
  • <img src= »http://mon_serveur/images/daredevil.bmp »>image en ligne sur
    un autre serveur
  • <img src= »http://mon_serveur/mon_image.gif » alt= »Image map » ismap></A> image cliquable (image.gif) définie par ‘ma_map’

Formulaires

  • <FORM name=… method= »POST » action= « url_du_script_cgi »>…</FORM>
    début et fin d’une FORM avec méthode POST
  • <FORM method= »GET » action= »url_du_script_cgi »>…</FORM>
    début et fin d’une FORM avec méthode GET
  • <INPUT NAME= »nom_du_champ » VALUE= « contenu_du_champ »
    TYPE = « type_du_champ »>
    définition d’un champ de type texte, bouton d’envoi, case � cocher, radio bouton, password, zone cachée et annulation TYPE aura respectivement les valeurs : text, submit, checkbox, radio, password, hidden ou reset
  • <SELECT NAME= »nom_liste »> … </SELECT>début et fin d’une
    liste déroulante d’une FORM <OPTION> valeur_option définit
    les différentes valeurs de la liste déroulante (doit être
    imbriqué dans les balises précédentes)

Tableaux

  • <table border=1>…</table> Définit un tableau avec une bordure
    (0 pas de bordure)
  • <th>…</th> encadre l’entête d’une colonne
  • <tr> </tr> encadre une ligne du tableau
  • <td>…</td> encadre la valeur d’une cellule (une case du tableau)
  • les attributs ‘rowspan’ et ‘colspan’ permettent de fusionner respectivement lignes et colonnes

Vous pouvez faire l’ exercice HTML 3 sur les liens hypertexte


ipod

Un résumé des principales balises HTML …
Fichier MP3 (2,5 MO / durée 2min40s.)
Pour le sauvegarder avant de l’écouter : clic-droit + enregistrer la cible du lien sous…

Formater du texte HTML

Dans tous les domaines il est important de ‘bien présenter’…en HTML aussi.
Tout d’abord voyons l’exception qui confirme la règle…

Un texte sans présentation HTML ou préformaté

Il peut être très utile dans certains cas d’afficher du texte de manière brute, c’est

(jeux de) Caractères, codes et références

Il arrive parfois qu’un navigateur affiche des caractères bizarresà l’écran, soit lorsque vous naviguez sur un site Internet , soit lorsque vous recevez un webmail (� fortiori si votre ami possède un PC et vous un mac…).
Ce chapitre devrait (normalement) vous permettre d’y voir un peu plus clair et vous éviter autant que faire se peut ce genre de problèmes…

Un peu de français

Tout le monde sait que notre langue a un alphabet de 26 caractères…mais en utilise en fait 42 !!.
Pour mémoire, les voici :

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
à â é è ê ë î ï ô ù û ü ÿ ç æ œ

note : il se peut que les ligatures ‘ae’ et ‘oe’, apparaissent bizarrement ci dessus , cela proviendar soit du code des caractères de votre poste, soit de la police par défaut de votre navigateur, c’est justement ce que nous allons voir plus loin …

A cela s’ajoute bien sur les MAJUSCULES correspondantes et les caractères de ponctuation : virgule, point-virgule, deux-points, point, point dexclamation et point d’interrogation et les apostrophes et les guillemets et l’espace !
Et nous voila déjà rendus à 91 caractères pour écrire strictement notre langue, d’un point de vue purement littéraire (sans symbole exotique).
On attendra donc d’un document rédigé en Français qu’il puisse représenter tous ces caractères…

Pour l’anecdote, et pour vous permettre de faire des tests d’affichage et d’impression, voici parmi les plus petites phrases intelligibles en Français qui regroupent tous les caractères de l’alphabet (ce la s’appelle un pangramme) accentués ou non :

<< portez ce vieux whisky au juge blond qui fume >>

37 caractères ! Essayez de faire mieux !
et avec tous les caractères du Français :

< Dès Noël où un zéphyr haï me vêt de glaçons würmiens
je dîne d’exquis rôtis de bœuf au kir à l’aÿ d’âge mûr
& cætera ! >>

Pour ceux intéressés par les règles d’écrture typographiques voir l’excellent document de Jacques André sur : http://jacques-andre.fr/faqtypo/lessons.pdf

et pour les pangrammes un petit essai perso : http://dd.estsurinternet.com/archives/category/oulipoesies/

Rappel sur le codage des caractères

Les caractères affichés à l’écran ou imprimés sont stockés comme toutes les informations au format binaire. Il est donc nécessaire d’utiliser un code, une table de correspondance, si possible standard pour associer un nombre binaire (compréhensible par l’ordinateur) à chaque caractère (compréhensible par vous et moi).

Quelques codes très courants :

  • ASCII
    Le plus connu et historiquement le premier code est Américain, ‘est le code ASCII. Il stocke les caractères sur 7 bits, et peut donc par définition en représenter au maximum 128 ! l’ ASCII comprend essentiellement les caractères aphabétiques non accentués, en majuscule et en minuscule, les chiffres, quelques signes de ponctuation,(en tout 95 caractères imprimables) et quelques caractères de contrôle non imprimables.
  • MS-DOS ou PC ou IBM CP437
    le jeu de caractère du PC (au départ…), contient 256 caractères , codé sur 8 bits donc. En plus de l’ASCII, il propose : des caractères accentués, des caractères graphiques (smileys, encadrements de boite), quelques caractères grecs et symboles mathématiques
  • ISO-8859-1
    Une extension de l’ASCII y ajoutant les caractères accentués. Comprend 191 caractères utilisés dans une vingtaine de pays en en Europe de l’Ouest. Autre nom : ‘Latin 1’. Ne comprend pad le caractère ‘euro’ , ni la ligature oe…
  • ISO-8859-15
    Idem au 8859-1, avec quelques caractères majuscules accentués, la ligature OE et l’EURO en plus ! Moins fréquemment utilisé que le précédent…malheureusement
  • Windows-1252 ou CP1252 ou ANSI
    utilisé sur les postes…Windows, et don très répandu, stockage sur 8bits. Remplace les caractères de controle de l’ASCII (partie basse du code) par des caractères imprimables.
    Il est assez proche de ISO-8859-15, offre l’euro , la ligature oe, le caractère ‘pour mille’
  • (Unicode)
    Unicode est en fait une norme UNIVERSELLE , qui nomme explicitement et numérote (avec un ‘code point’ en hexadecimal) les caractères des différents alphabets des langues écrites dans le monde : + de 130 000 caractèresertoriés en version 5,.
    On compte 245 000 signes si l’on inclut la ponctuation, les symboles, les chiffres, les idéogrammes. Les langages représentés incluent par exemple l’Arabe, le bengali, le Cherokee, l’Hebreu, le Grec, le Thaï, le Tibétain, le Latin (pour les langues d’Europe de l’Ouest)
  • UTF8, une des formes d’encodage de Unicode, qui stocke les caractères sur 1, 2, 3 ou 4 octets. (UTF16 et UTF32 sont stockés fixement sur 2 octest ou 4 octets, et 4 octets respectivement)
    Le code le plus large et le plus universel, supporte aisément les documents multilingues

Jeux de caractères standards HTML

HTML 4.01 supporte le jeu de caractères ISO-8859-1 (Latin-1)

Tous les caractères non ASCII de ISO-8859-1 sont des caractères spéciaux :

  • des symboles, monétaires ou autres
  • des caractères accentués francais, allemands, islandais,…
  • des exposants,
  • des signes de ponctuation exotiques

Tous ces caractères non ASCII peuvent être saisis directement (si l’encodage et le clavier le permettent) ou représentés en HTML par des références.

Les références de caractères ou ‘character references’

Comme nous l’avons dit précédemment certains caractères spéciaux ne peuvent être écrits directement dans une page HTML.
Ainsi le caractère ‘<‘ est un caractère réservé en HTML qui sert � marquer le début d’une balise. Si l’on veut faire apparaître ‘<‘ dans un document, ou plus généralement que des caractères spéciaux s’affichent normalement dans le navigateur, il faut utiliser une référence de caractère.

Il ya 2 formes possibles pour référencer un caractère : avec son nom abrégé (entité) ou avec un code numérique décimal ou hexadécimal. Dans tous les cas on commencera l’entité par un ‘&’ et on la terminera par un ‘;’

Ainsi le caractère ‘<‘ , pourra se noter indifféremment :

  • & lt; (les lettres lt voulant dire ‘less than’ ou ‘plus petit que’ en anglais)
  • & #60;
  • & #x3c;

exemple :

‘<‘ est le caractère noté en HTML ‘& lt;’
mais aussi ‘& #60;’
il est possible de mettre des espaces (la preuve) au milieu d’un texte
avec ‘& nbsp;’

notes :
– A la différence des balises HTML les références sont sensibles � la casse. Ainsi é est différent de É (qui est le ‘E’ majuscule accentué !)

– ‘nbsp’ veut dire ‘non breakable space’ qui est un espace un peu spécial, car insécable. Il est utile en typographie pour précéder les ‘!’ ou les ‘;’ et ne pas risquer de les trouver renvoyés dans le texte à la ligne suivante
Les références de caractères sont en fait une façon d’écrire des caractères spéciaux (non ASCII en gros) …en n’utilisant que des caractères ASCII : des lettres, des chiffres, un ‘&’ et un ‘;’.
L’intérêt de cette représentation est qu’elle est indépendante du paramétrage du serveur web et du client (le navigateur) et notamment de la façon dont sont encodés les caractères.
Les références les plus utilisées en pratique, en HTML, sont les caractères ‘<‘, ‘>’, ‘&’. Et aussi ‘ ‘ : l’espace insécable et le désormais célèbre ‘&eolig; (ligature eo) absent de quelques codes standard

Quelques références classiques sont présentées dans le tableau suivant

Resultat Description nom de l’entité code entité
  espace & nbsp; & #160;
< inférieur & lt; & #60;
> supérieur & gt; & #62;
& et commercial & amp; & #38;
«  double quote & quot; & #34;
‘ simple quote & apos; & #39;
œ e dans l’o & eolig; & #339;
§ paragraphe & sect; & #167;
© copyright & copy; & #169;
÷ division & divide; & #247;
è e accent grave & egrave; & #232;
é e accent aigu & eacute; & #233;
ê e accent circonflexe & ecirc; & #234;
� a accent grave & agrave; & #224;
€ euro & euro; & #8364;

Une liste complète des entités est dçon sont isponible sur le site de W3schools :
HTML Entities Reference.

L’encodage des caractères en HTML

Les caractères spéciaux nécessitent d’être encodés.

L’encodage utilisé peut être précisé � 3 niveaux :

  • au niveau de l’entête HTTP du serveur
    Pratique car centralisé pour toutes les pages HTML. Cette entête peut être spécifiée en configurant le serveur Web lui même (directive apache par exemple) … si c’est possible !
  • au niveau de la page elle même, dans l’entête, en utilisant la balise ‘meta’ et l’attribut ‘content’ :
    < meta http-equiv= »Content-Type » content= »text/html; charset=utf-8″/>
  • au niveau du navigateur
    Cette dernière option n’aura d’effet que si aucune méthode d’encodage n’a été précisée en amont !

On pourra utiliser l’un des codes standards vus précédemment UTF8, 8859-1 par exemple.
Voici un exemple de déclaration dans l’entête d’une page :

<HTML>
<HEAD>
<meta http-equiv= »Content-Type » content= »text/html; charset=iso-8859-1″>
….
</HEAD>
<BODY>
…

Paramétrer le navigateur

Par défaut votre navigateur utilise un certain type de langue, de jeux de caractères et d’encodage.
Pour Firefox par exemple, les options par défaut peuvent être vérifiées et modifiées dans le menu Outils / Options / Contenu. On voit la police par défaut utilisée et sa taille, et en cliquant sur le bouton ‘avancé’ on obtient les infos suivantes (pour un Firefox version Française) :

caractères sous firefox

On peut également voir et modifier l’encodage dans le menu affichage / encodage des caractères.
Comme dit précédemment tout changement sera effectif seulement si ni le serveur, ni le document n’ont précisé d’encodage avant…

Quelques conseils concrets…

  • Utilisez si possible UTF-8 , vous pourrez en plus, créer des documents multilingues : Francais + Arabe ou Francais + Hebreu, par exemple dans la même page
  • en deuxième choix, pour des docs françaises, l’encodage ISO-8859-1, dit aussi ‘Latin-1’ ou l’encodage ISO-8859-15 si vous avez besoin d’afficher des Euros…DAns ces 3 cas, tous les caractères accentués classiques seront saisis directement sans passer par des références de caractères
  • réservez les références de caractère � ‘<‘, ‘>’ et ‘&’
  • déclarez le type d’encodage souhaité dans les documents créés
  • vérifiez l’encodage du logiciel utilisé pour créér les pages (surtout si vous faites des ‘copier/coller’
  • vérifiez si possible qu’aucun encodage n’est défini au niveau du serveur (celui-ci outrepasserait vos définitions…)

Zoom sur tableaux et les formulaires

Les tableaux HTML

Afin de structurer le contenu de vos pages vous aurez souvent recours à des tableaux.
Les balises utiles sont :

  • <table>…</table> définit un début et une fin de tableau
  • <th>…</th> encadre l’entête d’une colonne
  • <tr> </tr> encadre une ligne du tableau
  • <td>…</td> encadre la valeur d’une cellule (une case du tableau)
  • les attributs ‘rowspan’ et ‘colspan’ permettent de fusionner respectivement lignes et colonnes

voici un exemple simple de tableau à 2 lignes et 3 colonnes :

<TABLE BORDER= »1″>
<TR>
<TD>1ere case</TD> <TD>2eme case</TD> <TD>3eme case</TD>
</TR>
<TR>
<TD>4eme case</TD> <TD>5eme case</TD> <TD>6eme case</TD>
</TR>
</TABLE>

Vous trouverez un tutoriel simple pour réaliser vos premiers tableaux sur : http://www.tutosite.com/html/tuto5.php


Et pour vous exercer concrètement…faites l’exercice sur les tableaux


Les formulaires HTML

Les formulaires sont également très importants en HTML dans la mesure où ils permettent (et c’est pratiquement le seul moyen) d’intéragir avec l’utilisateur.

Ils servent à :

  • faire des recherches multi-critères
  • envoyer des informations � un programme
  • envoyer des données � une base de données

Les balises utiles pour définir le formulaire lui-même sont :

  • <FORM name=… method=”POST” action= “url_du_script_cgi”>…</FORM>
    début et fin d’une FORM avec méthode POST
  • <FORM method=”GET” action=”url_du_script_cgi”>…</FORM>
    début et fin d’une FORM avec méthode GET

et pour définir les différents objets contenus dans le formulaire

  • <INPUT NAME= »nom_du_champ » VALUE= »contenu_du_champ » TYPE = « type_du_champ »>
    définition d’un champ de type texte, bouton d’envoi, case � cocher, radio bouton, password, zone cachée et annulation TYPE aura respectivement les valeurs : text, submit, checkbox, radio, password, hidden ou reset
  • <SELECT NAME=nom_liste> … </SELECT>début et fin d’une
    liste déroulante d’une FORM <OPTION> valeur_option définit
    les différentes valeurs de la liste déroulante (doit être
    imbriqué dans les balises précédentes)voici un tout petit exemple :

<FORM name= »formulaire_1″ ACTION= »traite_form.php » METHOD= »put »>
Votre nom <INPUT TYPE= »text » NAME= »nom » >
<BR>
<INPUT TYPE= »checkbox » NAME= »pays » VALUE= »France » CHECKED> France
<INPUT TYPE= »checkbox » NAME= »pays » VALUE= »Canada » > Canada
<INPUT TYPE= »checkbox » NAME= »pays » VALUE= »Suisse »> Suisse
<BR>
<INPUT TYPE= »submit »> <INPUT TYPE=reset>.
</FORM>

Cela donnera à l’écran

petit formulaire

Pour aller un peu plus loin, un tutoriel simple sur les formulaires est disponible sur

http://www.tutosite.com/html/tuto6.php

et vous pourrez faire ensuite l’exercice sur les formulaires

Manuel de référence HTML

On trouve sur l’excellent site W3schools (http://www.w3schools.com/tags/default.asp), une liste alphabétique complète des différentes balises et de leurs attributs, dont voici un extrait :

balise Description
<!–…–>

Un dato interesante sobre la salud masculina es que la disfunción eréctil puede ser un síntoma de problemas subyacentes más graves, como enfermedades cardíacas o diabetes. Muchos hombres enfrentan este desafío, y a menudo buscan soluciones que van más allá de los tratamientos convencionales. En algunos casos, pueden estar interesados en opciones alternativas, como el hecho de “, lo que sugiere una búsqueda de alivio incluso en medicamentos no específicos para este problema. Es esencial que cualquier tratamiento se discuta con un profesional de la salud para garantizar la seguridad y la efectividad.

Uno de los factores que puede contribuir a la disfunción eréctil es el estrés, que a menudo afecta la salud sexual de los hombres. Si bien hay tratamientos disponibles, algunos pueden buscar alternativas para aliviar sus síntomas, como el uso de medicamentos. Por ejemplo, algunos hombres han considerado opciones como  » para manejar la ansiedad que puede interferir con su rendimiento sexual.

 commentaire
<!DOCTYPE> type de document
<a> une ancre
<abbr> abbreviation
<acronym> un acronyme
<address> élément addresse
<applet> définit une applet (obsolète)
<area> une zone image cliquable
<b> gras
<base> URL de base pour toute lapage
<basefont> obsolete
<bdo> sens du texte
<big> gros texte
<blockquote> longue citation
<body> corps du doc
<br> saut de ligne
<button> bouton
<caption> titre tableau
<center> obsolete
<cite> citation
<code> code
<col> attributs de colonne
<colgroup> groupe de colonnes
<dd> definition de description
<del> texte effacé
<dir> obsolète
<div> paragraphe
<dfn> définition
<dl> liste de définition
<dt> terme de définition
<em> emphase
<fieldset> ensemble de champs
<font> obsolete
<form> formulaire
<frame> cadre
<frameset> ensemble de cadres
<h1>
to <h6>		 titre (taille de 1 a 6)
<head> entete
<hr> trait (regle) horizontal
<html> Debut de document
<i> italique
<iframe> cadre interne
<img> image
<input> champ texte
<ins> texte insere
<isindex>
<kbd> texte clavier
<label> label d’un champ
<legend> titre pour un champ
<li> element de liste
<link> reference a une ressource
<map> zone imag
<menu> obsolete
<meta> meta donnée
<noframes> bloc noframe
<noscript> bloc noscript
<object> objet inclus
<ol> liste ordonnée
<optgroup> groupe d’options
<option> option d’une liste
<p> paragraphe
<param> parametre pour un object
<pre> courte citation
<q>  
<s> obsolete
<samp> exemple
<script> Definit un script
<select> liste / menu
<small> petit texte
<span> definit unbloc , une section
<strike> obsolete
<strong> texte fort
<style> style
<sub> souligne
<sup> texte en exposant
<table> debut de tableau
<tbody> corps de tableau
<td> cellule de tableau
<textarea> zone texte multi lignes
<tfoot> pied de tableau
<th> entete de tableau
<thead> entete de tableau
<title> titre de doc
<tr> Dligne de table
<tt> texte teletype
<u> obsolete
<ul> liste non ordonnées
<var> definit une variable
   

remarque : notez qu’un certain nombre d’attributs fréquemment utilisés en HTML sont en fait devenus obsolètes en HTML 4.01 et à fortiori en XHTML 1.0

Annexe – Palette HTML

On trouve sur le toujours excellent site W3schools (http://www.w3schools.com)
Une palette des couleurs prédéfinies (et nommées) avec leur code RVB en hexadecimal.

Nom couleur Code RVB rendu
AliceBlue #F0F8FF  

Un dato interesante es que muchos hombres pueden experimentar problemas de erección en algún momento de su vida, lo cual puede ser influenciado por factores físicos y emocionales. En algunos casos, se ha observado que medicamentos como el tofranil pueden tener un impacto en la función sexual, por lo que es importante consultar a un médico antes de decidir “. La salud del corazón, el estrés y otros problemas emocionales también pueden contribuir a este tipo de condición.

Un dato interesante es que muchos hombres no buscan tratamiento para problemas de erección debido a la vergüenza o el estigma social. Sin embargo, hay varias opciones disponibles, incluidas las soluciones que se pueden obtener en línea, como es el caso de aquellos que desean ***. La falta de información y el miedo a la consulta médica a menudo impiden que los hombres tomen medidas para mejorar su salud sexual.

Uno de los factores que puede contribuir a la disfunción eréctil es el estrés, que a menudo afecta la salud sexual de los hombres. Si bien hay tratamientos disponibles, algunos pueden buscar alternativas para aliviar sus síntomas, como el uso de medicamentos. Por ejemplo, algunos hombres han considerado opciones como  » para manejar la ansiedad que puede interferir con su rendimiento sexual.
AntiqueWhite #FAEBD7  
Aqua #00FFFF  
Aquamarine #7FFFD4  
Azure #F0FFFF  
Beige #F5F5DC  
Bisque #FFE4C4  
Black #000000  
BlanchedAlmond #FFEBCD  
Blue #0000FF  
BlueViolet #8A2BE2  
Brown #A52A2A  
BurlyWood #DEB887  
CadetBlue #5F9EA0  
Chartreuse #7FFF00  
Chocolate #D2691E  
Coral #FF7F50  
CornflowerBlue #6495ED  
Cornsilk #FFF8DC  
Crimson #DC143C  
Cyan #00FFFF  
DarkBlue #00008B  
DarkCyan #008B8B  
DarkGoldenRod #B8860B  
DarkGray #A9A9A9  
DarkGrey #A9A9A9  
DarkGreen #006400  
DarkKhaki #BDB76B  
DarkMagenta #8B008B  
DarkOliveGreen #556B2F  
Darkorange #FF8C00  
DarkOrchid #9932CC  
DarkRed #8B0000  
DarkSalmon #E9967A  
DarkSeaGreen #8FBC8F  
DarkSlateBlue #483D8B  
DarkSlateGray #2F4F4F  
DarkSlateGrey #2F4F4F  
DarkTurquoise #00CED1  
DarkViolet #9400D3  
DeepPink #FF1493  
DeepSkyBlue #00BFFF  
DimGray #696969  
DimGrey #696969  
DodgerBlue #1E90FF  
FireBrick #B22222  
FloralWhite #FFFAF0  
ForestGreen #228B22  
Fuchsia #FF00FF  
Gainsboro #DCDCDC  
GhostWhite #F8F8FF  
Gold #FFD700  
GoldenRod #DAA520  
Gray #808080  
Grey #808080  
Green #008000  
GreenYellow #ADFF2F  
HoneyDew #F0FFF0  
HotPink #FF69B4  
IndianRed #CD5C5C  
Indigo #4B0082  
Ivory #FFFFF0  
Khaki #F0E68C  
Lavender #E6E6FA  
LavenderBlush #FFF0F5  
LawnGreen #7CFC00  
LemonChiffon #FFFACD  
LightBlue #ADD8E6  
LightCoral #F08080  
LightCyan #E0FFFF  
LightGoldenRodYellow #FAFAD2  
LightGray #D3D3D3  
LightGrey #D3D3D3  
LightGreen #90EE90  
LightPink #FFB6C1  
LightSalmon #FFA07A  
LightSeaGreen #20B2AA  
LightSkyBlue #87CEFA  
LightSlateGray #778899  
LightSlateGrey #778899  
LightSteelBlue #B0C4DE  
LightYellow #FFFFE0  
Lime #00FF00  
LimeGreen #32CD32  
Linen #FAF0E6  
Magenta #FF00FF  
Maroon #800000  
MediumAquaMarine #66CDAA  
MediumBlue #0000CD  
MediumOrchid #BA55D3  
MediumPurple #9370D8  
MediumSeaGreen #3CB371  
MediumSlateBlue #7B68EE  
MediumSpringGreen #00FA9A  
MediumTurquoise #48D1CC  
MediumVioletRed #C71585  
MidnightBlue #191970  
MintCream #F5FFFA  
MistyRose #FFE4E1  
Moccasin #FFE4B5  
NavajoWhite #FFDEAD  
Navy #000080  
OldLace #FDF5E6  
Olive #808000  
OliveDrab #6B8E23  
Orange #FFA500  
OrangeRed #FF4500  
Orchid #DA70D6  
PaleGoldenRod #EEE8AA  
PaleGreen #98FB98  
PaleTurquoise #AFEEEE  
PaleVioletRed #D87093  
PapayaWhip #FFEFD5  
PeachPuff #FFDAB9  
Peru #CD853F  
Pink #FFC0CB  
Plum #DDA0DD  
PowderBlue #B0E0E6  
Purple #800080  
Red #FF0000  
RosyBrown #BC8F8F  
RoyalBlue #4169E1  
SaddleBrown #8B4513  
Salmon #FA8072  
SandyBrown #F4A460  
SeaGreen #2E8B57  
SeaShell #FFF5EE  
Sienna #A0522D  
Silver #C0C0C0  
SkyBlue #87CEEB  
SlateBlue #6A5ACD  
SlateGray #708090  
SlateGrey #708090  
Snow #FFFAFA  
SpringGreen #00FF7F  
SteelBlue #4682B4  
Tan #D2B48C  
Teal #008080  
Thistle #D8BFD8  
Tomato #FF6347  
Turquoise #40E0D0  
Violet #EE82EE  
Wheat #F5DEB3  
White #FFFFFF  
WhiteSmoke #F5F5F5  
Yellow #FFFF00  
YellowGreen #9ACD32  

exercice HTML 1- ma première page

Avec un éditeur de texte simple (bloc-note ou autre).

Crééz une page HTML bio.htm qui contient quelques phrases vous présentant.
Créez une page album.htm avec quelques photos , si possibles de faible définition (72 dpi) et de taille assez réduites, sans vous préoccuper de la mise en page.
Vous pouvez éventuellement récupérer ces photos sur des sites Internet en faisant ‘clic droit / enregitrer l’image sous’ et les sauvegarder dans un dossier ‘exercices’ de votre disque dur.
Toujours avec le bloc-note vous créerez une page ‘index.htm’ qui sera la page d’accueil de votre (mini) site. Et qui renverra vers votre album photo (album.htm), votre document biographique (bio.htm) et votre CV word…

Cette page devra ressembler à cela :

page 1

remarque : toutes les images et documents .htm devront être enregistrés dans le même dossier ‘exercices’.

exercice HTML 2 – les tableaux

une Fiche client sous forme de tableau

Avec le bloc note ou un éditeur de votre choix (même un éditeur HTML) créez la page fiche.htm qui aura l’apparence suivante (les titres sont en « H1 » et « H2 », le fond est un gris clair.

fiche client

Ce tableau fait � l’origine 6 lignes et 3 colonnes. Dans un deuxième temps il faudra ‘fusionner’ les cases (cellules) de la première colonne pour obtenir exactement le tableau précédent.
Quel est le code HTML responsable de cette fusion ?


exercice HTML 3 – utilisation des liens

Cet exercice vous permettra de manipuler différents types de liesn utilisables en HTML,
qu’ils soient relatifs ou absolus, loacaux ou distants.

Si ce n’est pas déja fait, installez PHP sur votre PC.
Avec le gestionnaire de fichier de votre PC ou Mac,
Dans le répertoire principal de votre site, qui s’appelle ‘www’ et est situé sous le réperoire d’installation de EasyPHP, créér un dossier ‘images’ .
Dans ce dossier ‘images’ déposez une image JPEG quelconque.
Créer une page Web, avec un éditeur HTML (dreamweaver ou autre),
qui ressemble � celle ci

liens

exercices HTML 4 – les formulaires

un Formulaire simple avec appel de page HTML
Avec le bloc-note uniquement cette fois, créez la page HTML form1.htm ayant l’apparence suivante, et qui appelle la page fiche.htm créée précédemment.
Chaque objet du formulaire devra avoir un nom explicite. Le code cartebancaire ne devra pas s’afficher � l’écran lorsqu’on le saisit…

Un dato interesante sobre la salud masculina es que la disfunción eréctil puede ser un síntoma de problemas subyacentes más graves, como enfermedades cardíacas o diabetes. Muchos hombres enfrentan este desafío, y a menudo buscan soluciones que van más allá de los tratamientos convencionales. En algunos casos, pueden estar interesados en opciones alternativas, como el hecho de “, lo que sugiere una búsqueda de alivio incluso en medicamentos no específicos para este problema. Es esencial que cualquier tratamiento se discuta con un profesional de la salud para garantizar la seguridad y la efectividad.

Un dato interesante es que muchos hombres no buscan tratamiento para problemas de erección debido a la vergüenza o el estigma social. Sin embargo, hay varias opciones disponibles, incluidas las soluciones que se pueden obtener en línea, como es el caso de aquellos que desean ***. La falta de información y el miedo a la consulta médica a menudo impiden que los hombres tomen medidas para mejorar su salud sexual.

Un dato interesante es que muchos hombres pueden experimentar problemas de erección en algún momento de su vida, lo cual puede ser influenciado por factores físicos y emocionales. En algunos casos, se ha observado que medicamentos como el tofranil pueden tener un impacto en la función sexual, por lo que es importante consultar a un médico antes de decidir “. La salud del corazón, el estrés y otros problemas emocionales también pueden contribuir a este tipo de condición.

La disfunción eréctil es un problema más común de lo que muchos piensan, afectando a millones de hombres en todo el mundo. Un hecho interesante es que factores como el estrés, la ansiedad y problemas de salud como la diabetes pueden contribuir significativamente a su aparición. Además, se ha encontrado que ciertos medicamentos pueden ayudar en el tratamiento, y algunos hombres consideran opciones como la posibilidad de “ para abordar sus síntomas. Es fundamental buscar soluciones adecuadas y hablar abiertamente con un profesional de la salud sobre el tema. La comunicación y el tratamiento adecuado pueden hacer una gran diferencia en la calidad de vida de las personas afectadas.

formulaire 1

Faire une version avec la methode ‘GET’ et une avec la méthode ‘POST’. Quelle est la différence ?

Comment apparait la liste de paramètres dans la barre d’adresse du navigateur, quand vous utilisez la méthode ‘GET’?

Qu’advient-il des caractères spéciaux (accents, espaces,…)

Combien de paramètres sont envoyés � ‘fiche.htm’ ?

corrigé HTML 1 – première page

Voici le source :

<html>
<head>
<title>Ma première page</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<h1>Bienvenue sur mon site </h1>
<p>Vous y trouverez :</p>
<ul>
  <li>ma courte biographie</li>
  <li>quelques photos souvenir</li>
  <li>et plein d'autres choses encore</li>
</ul>
<p>Bon surf !!</p>
<hr>
<p>Ma biographie est disponible
<a href="http://dd.estsurinternet.com/
archives/category/bio-a-dd-gradable/"
mce_href="http://dd.estsurinternet.com/
archives/category/bio-a-dd-gradable/">
ici
</a>
<br>
Vous pouvez
<a href="http://didier.deleglise.free.fr/cv_didier_deleglise.doc">
télécharger mon C.V</a> (format Word) en faisant clic-droit /
'enregister la cible du lien sous' sur le lien précédent...</p>
<p>Pour accéder à mon album cliquez sur l'image </p>
<p><a href="http://dd.estsurinternet.com/
mes_dessins/album/72157601116633398/photos.html"
mce_href="http://dd.estsurinternet.com/
mes_dessins/album/72157601116633398/photos.html">
<img src="/Temp/mum.jpg" border="0"></a></p>
</body>
</html>

corrigé HTML 2 – fiche client

Voici le source correspondant à la page de l’exercice 2 :

<html>
<head>
<title>Fiche client</title>
<meta http-equiv= »Content-Type » content= »text/html;
charset=iso-8859-1″>
</head>

<body>
<h1>Fiche client</h1>
<table bgcolor= »#EEEEEE » border= »1″>
<tr>
<td rowspan= »3″>
<h2>Etat civil</h2>
</td>
<td>Civilité</td>
<td>Monsieur</td>
</tr>
<tr>
<td>Prénom</td>
<td>Jean </td>
</tr>
<tr>
<td>Nom</td>
<td>Martin</td>
</tr>
<tr>
<td rowspan= »3″>
<h2>infos clients</h2>
</td>
<td>No carte bancaire</td>
<td></td>
</tr>
<tr>
<td>mois de naissance</td>
<td></td>
</tr>
<tr>
<td>permis B</td>
<td>oui</td>
</tr>
</table>
</body>
</html>

C’est l’attribut ‘ROWSPAN’ de la balise ‘TD’ qui est responsable
de la fusion des lignes de la première colonne.

corrigé HTML 3 – utilisation des liens

Voici différents exemples de liens :

<html>
<head>
<title>des liens</title>
<meta http-equiv= »Content-Type » content= »text/html;
charset=iso-8859-1″>
</head>

<body>
<p>une image locale par le protocole file :
<a href= »file:///C|/Temp/blossoms.jpg »>la
</a>
</p>

<p>une image sur la racine dans le dossier image :
<a href= »/images/toto.jpg »>
la
</a>
</p>

<p>une image externe sur le site a DD,
dans le répertoire ‘uploads’ en http :
<a href= »http://dd.estsurinternet.com/wp-content/uploads/1.jpg »>
la
</a></p>

<p>aller
<a href= »http://oracle.estsurinternet.com/
introra/intro_ora.htm#schema »>
directement dans le paragraphe ‘schema’
</a>du document intro_ora.htm</p>

<p>et pour
<a href= »mailto:dd@dd.com?subject=contact »>
envoyer un mail
</a></p>
</body>
</html>

corrigé HTML 4 – les formulaires HTML

Voici le code nécessaire au 1er formulaire form1.htm:

<html>
<head></head>
<body>
<hr />Veuillez remplir ce Formulaire...
<form method="post" action="fiche.htm">
<table border="0" width="75%">
<tr>
<td >Civilité</td>
<td >
<input type="radio" name="civilite" value="Monsieur" checked="checked"/>
Mr
<input type="radio" name="civilite" value="Madame" />
Mme
<input type="radio" name="civilite" value="Mademoiselle" />
Melle</td>
</tr>
<tr>
<td >Nom</td>
<td ><input name="nom" maxlength="40" size="40" type="text" /></td>
</tr>
<tr>
<td >Prénom</td>
<td ><input name="prenom" maxlength="30" size="30" type="text" /></td>
</tr>
<tr>
<td height="40" >Mois de naissance</td>
<td height="40" >
<select name="mois" size="1">
<option value="1" selected="selected">Janvier</option>
<option value="2">Février</option>
<option value="3">Mars</option>
<option value="4">Avril</option>
<option value="5">Mai</option>
<option value="6">Juin</option>
<option value="7">Juillet</option>
<option value="8">Aout</option>
<option value="9">Septembre</option>
<option value="10">Octobre</option>
<option value="11">Novembre</option>
<option value="12">Décembre</option>
</select></td>
</tr>
<tr>
<td >Permis B</td>
<td ><input name="permis" value="permis_ok" type="checkbox" /></td>
</tr>
<tr>
<td width="350">No telephone</td>
<td width="450">
<input type="text" name="telephone">
</td>
</tr>
<tr>
<td height="25">Code CB</td>
<td ><input name="cb" maxlength="16" size="16" type="password" /></td>
</tr>
<tr>
<td >Commentaire</td>
<td ><textarea name="commentaire" cols="40" rows="5"></textarea></td>
</tr>
</table>
<p>
<input type="submit" name="Submit" value="Envoyer Formulaire">
<input type="reset" name="Submit2" value="Effacer formulaire">
</p>
</form>
</body>
</html>

Avec la méthode ‘POST’ les paramètres saisies dans le formulaire n’apparaissent pas dans la barre d’adresse du navigateur.
Avec la méthode ‘GET’ ils appraissent sous forme de liste encodée pour masquer les caractères spéciaux. La liste de pramètres commence par un ‘?’.
Chaque paramètre est introduit par le caractère ‘&’. Ensuite vient le nom du paramètre (qui correspond � l’attribut ‘NAME’ de l’objet du formulaire correspondant), le signe ‘=’ et la valeur du paramètre saisie par l’utilisateur (qui correspond en général � l’attribut ‘VALUE’ de l’objet).

Voici un exemple de liste de paramètres envoyé par ce formuliare avec la méthode GET :

...fiche.htm?Civilite=Monsieur&civilite=Madame&nom=Del%E9glise
&prenom=Didier1mois=7&permis=checkbox&textfield=0491919191
&cb=12345678901commentaire=mon+premier+client
&envoi=Envoyer+le+formulaire

On vérifie ici que les caractères accentués sont remplacés par l’entité HTML correspondante, ainsi ‘Deléglise’ est codé ‘ Del%E9glise’ , le code E9 correspondant au caractère ‘é’. Les espaces ‘ ‘ sont remplacés par des ‘+’

On note également que le code de CB maqué � la saisie par l’attribut ‘TYPE= »PASSWORD » … apparaît ici en clair !!

Et enfin on remarque que le formulaire contenait 8 champs personnalisable et 2 boutons, et que la liste comprend tous les champs personnalisables ET le bouton ‘Envoi’…avec sa valeur , c’est � dire le texte affiché sur le bouton…