dimanche 28 août 2011

JAVA

 

JAVA


 

Applet

<APPLET></APPLET>

 

 

Nom de fichier applet

<APPLET CODE="***">

 

 

Paramètres

<APPLET PARAM NAME="***">

 

 

Position de l'applet

<APPLET CODEBASE="URL">

 

 

Identificateur Applet

<APPLET NAME="***">

(pour faire référence ailleurs dans une page)

 

Alternative en texte

<APPLET ALT="***">

(pour les navigateurs non-java)

 

Alignement

<APPLET ALIGN="LEFT|RIGHT|CENTER">

 

 

Grandeur

<APPLET WIDTH=? HEIGHT=?>

(en pixels)

 

Espacement

<APPLET HSPACE=? VSPACE=?>

(en pixels)

mercredi 24 août 2011

DIVERS HTML

DIVERS





 
Commentaires
<!--***-->
(n'est pas affiché par le lecteur WWW)



 
Prologue HTML 3.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD W3
HTML 3.2//EN">
[*]



 
Indicateur de recherche
<ISINDEX>
(indique un index de recherche)


N1.0
Ligne de commande
<ISINDEX PROMPT="***">
(texte pour indiquer l'entrée de données)


 
Envoie de la recherche
<A HREF="URL?***"></A>
(utiliser un point d'interrogation)


 
URL de ce fichier
<BASE HREF="URL">
(doit être dans l'en-tête du document)


 
Nom de base de la fenêtre
<BASE TARGET="***">
(doit être dans l'en-tête du document)


 
Relation
<LINK REV="***" REL="***"
HREF="URL">

(dans l'en-tête du document)


 
Information META
<META>
(dans l'en-tête du document)

HTML- FORMAT DE PRÉSENTATION


DÉFINITION STRUCTURALE


 

En-tête <H?></H? > (6 niveaux d'en-têtes)

 

En-tête alignée <H? ALIGN=LEFT|CENTER|RIGHT></H?> [*]

 

Division <DIV></DIV>

 

Division alignée <DIV
ALIGN=LEFT|CENTER|RIGHT|JUSTIFY></DIV>
Bloc en retrait <BLOCKQUOTE></BLOCKQUOTE>[
*]

 

 

Emphase <EM></EM> (habituellement présenté en italique)

 

Forte emphase <STRONG></STRONG> (habituellement présenté en gras)

 

Citation <CITE></CITE> (habituellement en italique)

 

Code <CODE></CODE> (pour l'affichage de fichier de programmation)

 

Échantillon de sortie <SAMP></SAMP>

 

 

Entrée au clavier <KBD></KBD>

 

 

Variable <VAR></VAR>

 

 

Définition <DFN></DFN> (non officiel)
Adresse de l'auteur(e) <ADDRESS></ADDRESS>

 

 

Grande police de caractères <BIG></BIG>

 

 

Petite police de caractères <SMALL></SMALL>

 

CODE GÉNÉRAL DE HTML



GÉNÉRAL


 

Type de document <HTML></HTML> (au début et à la fin du document)
Titre <TITLE></TITLE> (nom du fichier; doit être dans l'en-tête)
En-tête <HEAD></HEAD> (titre de description)
Corps <BODY></BODY> (corps du document)

code GÉNÉRAL de html

dimanche 14 août 2011

La table des couleurs

Le codage des couleurs

Les couleurs en HTML sont définies par 3 nombres hexadécimaux représentant les tons de Rouge, de Vert et de Bleu (selon le codage RGB (Red Green Blue, en français : RVB) de la couleur choisie. Ainsi la syntaxe de codage d'une couleur en HTML est la suivante :
couleur="#RRVVBB"
RR, VV et BB représentent respectivement un nombre hexadécimal entre 00 et FF pour le Rouge, le Vert et le Bleu.


Ainsi, plus de 16 millions de couleurs sont disponibles pour colorer les pages web. Toutefois, étant donné que tous les navigateurs ne reconnaissent pas les couleurs de la même façon, le W3C conseille l'utilisation des couleurs ci-dessous, pour lesquelles un nom intelligible a été donné. Il est donc possible (et conseillé) d'appeler une couleur de la façon suivante :
couleur="nom_de_la_couleur"


Nom de la couleurAperçuCodage RVB
aliceblue███████ aliceblue#F0F8FF
antiquewhite███████ antiquewhite#FAEBD7
aqua███████ aqua#00FFFF
aquamarine███████ aquamarine#7FFFD4
azure███████ azure#F0FFFF
beige███████ beige#F5F5DC
bisque███████ bisque#FFE4C4
black███████ black#000000
blanchedalmond███████ blanchedalmond#FFEBCD
blue███████ blue#0000FF
blueviolet███████ blueviolet#8A2BE2
brown███████ brown#A52A2A
burlywood███████ burlywood#DEB887
cadetblue███████ cadetblue#5F9EA0
chartreuse███████ chartreuse#7FFF00
chocolate███████ chocolate#D2691E
coral███████ coral#FF7F50
cornflowerblue███████ cornflowerblue#6495ED
cornsilk███████ cornsilk#FFF8DC
crimson███████ crimson#DC143C
cyan███████ cyan#00FFFF
darkblue███████ darkblue#00008B
darkcyan███████ darkcyan#008B8B
darkgoldenrod███████ darkgoldenrod#B8860B
darkgray███████ darkgray#A9A9A9
darkgreen███████ darkgreen#006400
darkkhaki███████ darkkhaki#BDB76B
darkmagenta███████ darkmagenta#8B008B
darkolivegreen███████ darkolivegreen#556B2F
darkorange███████ darkorange#FF8C00
darkorchid███████ darkorchid#9932CC
darkred███████ darkred#8B0000
darksalmon███████ darksalmon#E9967A
darkseagreen███████ darkseagreen#8FBC8F
darkslateblue███████ darkslateblue#483D8B
darkslategray███████ darkslategray#2F4F4F
darkturquoise███████ darkturquoise#00CED1
darkviolet███████ darkviolet#9400D3
deeppink███████ deeppink#FF1493
deepskyblue███████ deepskyblue#00BFFF
dimgray███████ dimgray#696969
dodgerblue███████ dodgerblue#1E90FF
firebrick███████ firebrick#B22222
floralwhite███████ floralwhite#FFFAF0
forestgreen███████ forestgreen#228B22
fuchsia███████ fuchsia#FF00FF
gainsboro███████ gainsboro#DCDCDC
ghostwhite███████ ghostwhite#F8F8FF
gold███████ gold#FFD700
goldenrod███████ goldenrod#DAA520
gray███████ gray#808080
green███████ green#008000
greenyellow███████ greenyellow#ADFF2F
honeydew███████ honeydew#F0FFF0
hotpink███████ hotpink#FF69B4
indianred███████ indianred#CD5C5C
indigo███████ indigo#4B0082
ivory███████ ivory#FFFFF0
khaki███████ khaki#F0E68C
lavender███████ lavender#E6E6FA
lavenderblush███████ lavenderblush#FFF0F5
lawngreen███████ lawngreen#7CFC00
lemonchiffon███████ lemonchiffon#FFFACD
lightblue███████ lightblue#ADD8E6
lightcoral███████ lightcoral#F08080
lightcyan███████ lightcyan#E0FFFF
lightgoldenrodyellow███████ lightgoldenrodyellow#FAFAD2
lightgreen███████ lightgreen#90EE90
lightgrey███████ lightgrey#D3D3D3
lightpink███████ lightpink#FFB6C1
lightsalmon███████ lightsalmon#FFA07A
lightseagreen███████ lightseagreen#20B2AA
lightskyblue███████ lightskyblue#87CEFA
lightslategray███████ lightslategray#778899
lightsteelblue███████ lightsteelblue#B0C4DE
lightyellow███████ lightyellow#FFFFE0
lime███████ lime#00FF00
limegreen███████ limegreen#32CD32
linen███████ linen#FAF0E6
magenta███████ magenta#FF00FF
maroon███████ maroon#800000
mediumaquamarine███████ mediumaquamarine#66CDAA
mediumblue███████ mediumblue#0000CD
mediumorchid███████ mediumorchid#BA55D3
mediumpurple███████ mediumpurple#9370DB
mediumseagreen███████ mediumseagreen#3CB371
mediumslateblue███████ mediumslateblue#7B68EE
mediumspringgreen███████ mediumspringgreen#00FA9A
mediumturquoise███████ mediumturquoise#48D1CC
mediumvioletred███████ mediumvioletred#C71585
midnightblue███████ midnightblue#191970
mintcream███████ mintcream#F5FFFA
mistyrose███████ mistyrose#FFE4E1
moccasin███████ moccasin#FFE4B5
navajowhite███████ navajowhite#FFDEAD
navy███████ navy#000080
oldlace███████ oldlace#FDF5E6
olive███████ olive#808000
olivedrab███████ olivedrab#6B8E23
orange███████ orange#FFA500
orangered███████ orangered#FF4500
orchid███████ orchid#DA70D6
palegoldenrod███████ palegoldenrod#EEE8AA
palegreen███████ palegreen#98FB98
paleturquoise███████ paleturquoise#AFEEEE
palevioletred███████ palevioletred#DB7093
papayawhip███████ papayawhip#FFEFD5
peachpuff███████ peachpuff#FFDAB9
peru███████ peru#CD853F
pink███████ pink#FFC0CB
plum███████ plum#DDA0DD
powderblue███████ powderblue#B0E0E6
purple███████ purple#800080
red███████ red#FF0000
rosybrown███████ rosybrown#BC8F8F
royalblue███████ royalblue#4169E1
saddlebrown███████ saddlebrown#8B4513
salmon███████ salmon#FA8072
sandybrown███████ sandybrown#F4A460
seagreen███████ seagreen#2E8B57
seashell███████ seashell#FFF5EE
sienna███████ sienna#A0522D
silver███████ silver#C0C0C0
skyblue███████ skyblue#87CEEB
slateblue███████ slateblue#6A5ACD
slategray███████ slategray#708090
snow███████ snow#FFFAFA
springgreen███████ springgreen#00FF7F
steelblue███████ steelblue#4682B4
tan███████ tan#D2B48C
teal███████ teal#008080
thistle███████ thistle#D8BFD8
tomato███████ tomato#FF6347
turquoise███████ turquoise#40E0D0
violet███████ violet#EE82EE
wheat███████ wheat#F5DEB3
white███████ white#FFFFFF
whitesmoke███████ whitesmoke#F5F5F5
yellow███████ yellow#FFFF00
yellowgreen███████ yellowgreen#9ACD32

Gestion des images en HTML

Comment afficher des images sur une page web?

Quelques images sur un site Web peuvent le rendre plus attractif et plus convivial, cependant il est important de ne pas sombrer dans l'excès car les images peuvent impliquer un temps de chargement assez long et peuvent dans certains cas nuire à la lisibilité.


La balise IMG du langage HTML permet d'insérer des images dans une page HTML. L'image peut être située sur le même serveur que la page dans laquelle elle est insérée mais également sur un autre serveur en spécifiant son URL complète.

seuls les formats d'images suivants sont acceptés en standard dans les spécifications du W3C :
Les images JPEG (.JPG)</gras> : les images ayant un grand nombre de couleurs seront bien compressées, c'est-à-dire qu'elles prendront moins de place, donc nécessiteront un temps de chargement moindre)
Les images PNG : Leur taille est faible dans le cas d'images avec peu de couleurs avec des tons uniformes, ce format permet en outre d'avoir des images entrelacées (qui s'affichent progressivement) avec une profondeur de couleurs de 24 bits et des images dont on définit une couleur comme transparente.
Les images GIF : Elles possèdent les mêmes atouts que les images PNG, si ce n'est que le format GIF est limité à 256 couleurs maximum et que ce format n'est pas totalement libre.

Comment afficher des images sur une page web?

Les principaux attributs de la balise IMG sont les suivants :
SRC: Indique l'emplacement de l'image (il est obligatoire)
ALIGN: Spécifie l'alignement de l'image par rapport au texte adjacent. Il peut prendre les valeurs: TOP, MIDDLE, et BOTTOM (au-dessus, au milieu et en-dessous)
ALT: Permet d'afficher un texte alternatif lorsque l'image ne s'affiche pas.
TITLE: Permet d'afficher une infobulle lors du survol de l'image par le curseur.
WIDTH: Permet de spécifier la largeur de l'image.
HEIGHT: Permet de spécifier la hauteur de l'image.




Ainsi pour insérer une image, il faudra saisir une balise du type suivant :
<IMG SRC="url_de_l_image"
ALT="Texte remplaçant l'image"
TITLE="Texte à afficher">



Les liens hypertextes

Présentation des ancrages

Les liens hypertextes (ancrages) sont des éléments d'une page HTML (soulignés lorsqu'il s'agit de texte) permettant aux internautes de naviguer vers une nouvelle adresse lorsque l'on clique dessus. Ce sont les liens hypertextes qui permettent de lier des pages Web entre elles. Ils permettent notamment de naviguer :
vers un autre endroit du document
vers un fichier HTML situé à un emplacement différent sur la machine qui héberge la page
vers une autre machine

L'attribut principal des ancrages est href. Il s'écrit sous la forme suivante :
<a href="Adresse ou URL"> .. </a>
 
Lien externe
 Un lien externe est un lien vers une page pointée par son URL
Par exemple :

<a href="http://www.commentcamarche.net"> Comment ça marche? </a>

Lien local

On peut créer un lien vers une page située sur le même ordinateur en remplaçant l'URL par le fichier cible.


Ce lien peut être fait de façon relative, en repérant le fichier cible par rapport au fichier source. Si le fichier cible est "index.html" situé dans le répertoire parent, son lien s'écrira:

<a href="../index.html"> ... </a>



Ce lien peut aussi être défini de façon absolue, en écrivant l'adresse du fichier cible de façon locale:

<a href="file:///lecteur:/répertoire/index.html"> ... </a>

Les signets

Il est également possible de créer un signet dans une page, c'est-à-dire marquer un endroit précis d'une page pour s'y rendre par un lien hypertexte. Les signets se définissent grâce à l'attribut NAME ou ID. La syntaxe est la suivante :
<balise id="signet"> ... </balise>



L'appel d'un signet se fait de la manière suivante :
<a href="#signet"> ... </a>



Il est ainsi possible de permettre à l'utilisateur de se déplacer au sein d'une même page ou bien d'accéder à une section particulière d'une autre page :
<a href="url/nom_du_fichier.html#signet"> ... </a>

Les listes dans HTML



Les listes


Une liste est un paragraphe structuré contenant une suite d'articles.
Le langage HTML définit trois types de listes :





Liste ordonnée


Conteneur Type de liste Effet Visuel
<ol>

<li> article 1 </li>

<li> article 2 </li>


</ol>
Liste ordonnée
  1. article 1
  2. article 2
  3. article 3


Liste non ordonnée


Conteneur Type de liste Effet Visuel
<ul>

<li> article 1 </li>

<li> article 2 </li>


</ul>
Non ordonnée
  • article 1
  • article 2
  • article 3


Liste de définition




Conteneur Type de liste Effet Visuel
<dl>

<dt>Terme</dt>




<dd>Définition</dd>



</dl>
De définition
article 1
définition 1
article 2
définition 2


Attributs


Attribut Valeur Effet Visuel
COMPACT resserre l'interligne
PLAIN supprime les puces
SEQNUM définit le premier numéro
START définit le premier numéro
CONTINUE repart du numéro où il s'était arrété
à la
liste précédente
TYPE (pour les listes ordonnées) 1
A

a

I

i
numérotation chiffrée (par défaut)
numérotation en capitales

numérotation en bas de casse

numérotation en chiffres romains (I, II, III, IV ...)

numérotation en chiffres romains en bas de casse
TYPE (pour les listes non-ordonnées) circle
square

disc
  • puce circulaire
  • puce carrée
  • puce en disque

Paragraphes html


Paragraphes

Le langage HTML considère les paragraphes comme des blocs de texte. Les navigateurs répartissent au mieux leur contenu dans la fenêtre à moins qu'=un attribut NOWRAP ou NOBR soit spécifié explicitement.

A l'intérieur d'un paragraphe, les espaces, tabulations et retours chariot comptent pour un seul espace.


La mise en page par blocs de texte est réalisée par l'intermédiaire de la paire de balises <p> et </p>. Cette balise accepte n'importe lequel des attributs vus précédemment.


Le retour chariot (retour à la ligne simple) est réalisé grâce à la balise <br>


On peut aussi insérer une ligne horizontale grâce à la balise <hr>.


BaliseAttributEffet Visuel
<br>   retour à la ligne
<p> et </p>  paragraphe
<hr size=5 width=20% align=left>  SIZE
WIDTH

ALIGN
Séparateur horizontal



Conteneurs

Les balises servant à indenter le texte sont appelées des conteneurs.



ConteneurEffet Visuel
<blockquote> et </blockquote>Texte indenté
<address> et </address>Pour écrire une adresse
<note> et </note>Permet de rédiger une note
<fn> et </fn>Permet de réaliser une note de fin de page
<banner> et </banner>Fixe un bloc de texte par rapport à la page
<pre> et </pre>
Permet d'écrire un texte
  préformatté en conservant les espaces,
  les retours à la ligne et les tabulations.

Qu'est-ce qu'une balise de style?

Les balises de style modifient la typographie du texte. Elles peuvent être imbriquées dans d'autres balises de style de la même façon qu'on le ferait avec un traitement de texte.
Voici une liste de balises de style reconnues par la plupart des navigateurs (chacun à sa façon si bien que certains ne font pas la différence entre ces styles).



   Balise de style    Effet Visuel
   <ABBREV> Abréviation
<ACRONYM> Acronyme
<AU> L'auteur
<B> Met la police en gras
<BIG> Police plus grande
<BLINK> Clignote (propre à Netscape)
<CITE> Citation
<CODE> Instruction
<DEL> Texte supprimé mais qui reste présent
<DFN> Définition d'instance
<EM> Emphase
<I> Italique
<INS> Nouveau texte inséré a cet endroit
<KBD> Clavier - Suite de caractères devant être tapés
tel quel
<PERSON> Accentuation du nom d'une personne
<Q> Encadre le texte par des guillemets
<S> Comme strike (barré)
<SAMP> Exemple
<SMALL> Police plus petite
<STRONG> Forte accentuation rendue par du gras
<STRIKE> Texte barré (comme S)
<SUB> Texte en Indice
<SUP> Texte en Exposant
<TT> Caractère de machine à écrire
<VAR> Nom d'une variable

Caractères spéciaux HTML

Codage des caractères spéciaux

Le standard HTML demande de respecter le codage des caractères ASCII 7 bits, c'est-à-dire que les caractères accentués ne sont pas autorisés. Il faut pour cela utiliser un codage particulier.


Pour coder un caractère accentué, il suffit de saisir une combinaison précédée du caractère & et terminée par un point-virgule (;). Voici la liste représentations HTML des caractères ASCII de 128 à 255 :


CaractèreCode ISOCode HTML
"&#34;&quot;
&&#38;&amp;
&#128;&euro;
&#129;
'&#130;
ƒ&#131;
"&#132;
&#133;
+&#134;
#&#135;
^&#136;
&#137;
Š&#138;
<&#139;&lt;
Œ&#140;
&#141;
Z&#142;
&#143;
&#144;
'&#145;
'&#146;
"&#147;
"&#148;
*&#149;
-&#150;
--&#151;
~&#152;
&#153;
š&#154;
>&#155;&gt;
œ&#156;&oelig;
&#157;
z&#158;
Y&#159;&Yuml;
Space&#160;&nbsp;
¡&#161;&iexcl;
¢&#162;&cent;
£&#163;&pound;
¤&#164;&curren;
¥&#165;&yen
¦&#166;&brvbar;
§&#167;&sect;
¨&#168;&uml;
©&#169;&copy;
ª&#170;&ordf;
«&#171;&laquo;
¬&#172;&not;
­&#173;&shy;
®&#174;&reg;
¯&#175;&masr;
°&#176;&deg;
±&#177;&plusmn;
²&#178;&sup2;
³&#179;&sup3;
'&#180;&acute;
µ&#181;&micro;
&#182;&para;
·&#183;&middot;
¸&#184;&cedil;
¹&#185;&sup1;
º&#186;&ordm;
»&#187;&raquo;
¼&#188;&frac14;
½&#189;&frac12;
¾&#190;&frac34;
¿&#191;&iquest;
À&#192;&Agrave;
Á&#193;&Aacute;
Â&#194;&Acirc;
Ã&#195;&Atilde;
Ä&#196;&Auml;
Å&#197;&Aring;
Æ&#198&Aelig
Ç&#199;&Ccedil;
È&#200;&Egrave;
É&#201;&Eacute;
Ê&#202;&Ecirc;
Ë&#203;&Euml;
Ì&#204;&Igrave;
Í&#205;&Iacute;
Î&#206;&Icirc;
Ï&#207;&Iuml;
Ð&#208;&eth;
Ñ&#209;&Ntilde;
Ò&#210;&Ograve;
Ó&#211;&Oacute;
Ô&#212;&Ocirc;
Õ&#213;&Otilde;
Ö&#214;&Ouml;
×&#215;&times;
Ø&#216;&Oslash;
Ù&#217;&Ugrave;
Ú&#218;&Uacute;
Û&#219;&Ucirc;
Ü&#220;&Uuml;
Ý&#221;&Yacute;
Þ&#222;&thorn;
ß&#223;&szlig;
à&#224;&agrave;
á&#225;&aacute;
â&#226;&acirc;
ã&#227;&atilde;
ä&#228;&auml;
å&#229;&aring;
æ&#230;&aelig;
ç&#231;&ccedil;
è&#232;&egrave;
é&#233;&eacute;
ê&#234;&ecirc;
ë&#235;&euml;
ì&#236;&igrave;
í&#237;&iacute;
î&#238;&icirc;
ï&#239;&iuml;
ð&#240;&eth;
ñ&#241;&ntilde;
ò&#242;&ograve;
ó&#243;&oacute;
ô&#244;&ocirc;
õ&#245;&otilde;
ö&#246;&ouml;
÷&#247;&divide;
ø&#248;&oslash;
ù&#249;&ugrave;
ú&#250;&uacute;
û&#251;&ucirc;
ü&#252;&uuml;
ý&#253;&yacute;
þ&#254;&thorn;
ÿ&#255;&yuml;



Codage des signes HTML propres

Certains caractères ont une signification particulière en HTML, ayant une incidence forte sur le formatage de la page; il s'agit des caractères <, >, " et &<ital></ital>. Le caractère < possède une importance particulière, dans la mesure où il représente pour le navigateur l'ouverture d'une nouvelle balise HTML.


Lorsque ces caractères sont utilisés dans un texte contenu dans une page web, il est donc impératif de les coder en HTML, au risque sinon de provoquer une erreur d'affichage dans le navigateur.



CaractèreCode ISOCode HTML
"&#34;&quot;
&&#38;&amp;
<&#8249;&lsaquo;
>&#8250;&rsaquo;


Notez toutefois que les navigateurs actuels reconnaissent les caractères accentués, ainsi vous pouvez entrer des caractères accentués directement sous votre éditeur de texte, mais votre page HTML risque d'être illisible depuis l'étranger ou à partir de certains navigateurs.

Structure d'un document HTML

Notion de document HTML
 Une page HTML est un simple fichier contenant du texte formatté avec des balises HTML. Par convention l'extension donnée au fichier est .htm ou .html, mais une page web peut potentiellement porter n'importe quelle extension.


Une page web peut être construite à partir du plus basique des éditeurs de texte (une application bloc-note par exemple), mais il existe des éditeurs beaucoup plus évolués.


Les éditeurs WYSIWYG («What You See Is What You Get», littéralement «ce que vous voyez est ce que vous obtenez») sont des éditeurs graphiques permettant de travailler sur une page web telle qu'elle sera affichée sur un navigateur à quelques détails près. Grâce à ce genre d'éditeurs il est possible d'ajouter des balises par simple clic et d'en modifier les attributs en éditant leur propriétés dans un formulaire. Pour autant, afin d'utiliser au mieux ce genre d'éditeur, une connaissance préalable du HTML est tout de même très utile.


Il existe également des éditeurs permettant d'éditer le code HTML en affichant les balises, les attributs et leurs valeurs avec différentes couleurs pour une meilleure lecture et proposant parfois des outils pour vérifier la validité du code HTML.


Par convention l'extension donnée à une page HTML est .htm ou .html mais une page web peut potentiellement porter n'importe quelle extension notamment les suivantes :
.asp pour une page générée dynamiquement en ASP (Active Server Pages) ;
.cgi pour une page générée dynamiquement avec des CGI (Common gateway Interface) ;
.php, .php3 ou .php4 pour une page générée dynamiquement en PHP ;
.pl pour une page générée dynamiquement en Perl (Practical Extraction and Report Language) ;
etc.

Structure du document HTML

Un document HTML commence par la balise <HTML> et finit par la balise </HTML>. Il contient également un en-tête décrivant le titre de la page, puis un corps dans lequel se trouve le contenu de la page.


L'en-tête est délimité par les balises <HEAD> et </HEAD>. Le corps est délimité par les balises <BODY> et </BODY>.


Voici par exemple une page HTML minimaliste :
<HTML>
<HEAD>
<TITLE>Titre de la page</TITLE>
</HEAD>

<BODY>
Contenu de la page
</BODY>
</HTML>

Déclaration du type de document

Il est conseillé d'indiquer dans la page HTML le prologue du type de document, c'est-à-dire une référence à la norme HTML utilisée, afin de spécifier le standard utilisé pour le codage de la page. Cette déclaration se fait par une ligne du type :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>...</HEAD>
<BODY>Contenu de la page</BODY>
</HTML>

La déclaration du document indique la DTD (Document Type Definition) utilisée, c'est-à-dire la référence des caractéristiques du langage utilisé. Le tableau ci-dessous récapitule les déclarations pour les principales version du langage HTML :





Les balises HTML

HTML, un langage à balises
---------------------------------------------------------------
Le HTML n'est pas un langage de programmation. Il s'agit d'un langage permettant de décrire la mise en page et la forme d'un contenu rédigé en texte simple.


Une page HTML est ainsi un simple fichier texte contenant des balises (parfois appelées marqueurs ou repères ou tags en anglais) permettant de mettre en forme le texte, les images, etc.


Comment utiliser les balises HTML ?
---------------------------------------------------------------
Une balise est un élément de texte (un nom) encadrée par le caractère inférieur (<) et le caractère supérieur (>). par exemple « <H1> ».


Les balises HTML ne sont pas sensibles à la casse, c'est-à-dire qu'elles peuvent être saisies indifféremment en minuscules ou en majuscules !


Les balises HTML fonctionnent par paire afin d'agir sur les éléments qu'elles encadrent. La première est appelée « balise d'ouverture » (parfois balise ouvrante) et la seconde « balise de fermeture » (ou fermante). La balise fermante est précédé du caractère /) :
<marqueur> Votre texte formaté </marqueur>



A titre d'exemple, les balises <b> et </b> permettent de mettre en gras le texte qu'elles encadrent :
<b> Ce texte est en gras </b>



Les balises HTML peuvent parfois être uniques : la balise <br> représente par exemple un retour à la ligne.


Afin d'être le plus proche possible du standard XHTML (beaucoup plus stricte que le standard HTML), il est conseillé d'utiliser la notation suivante : <br />.

Imbrication des balises
---------------------------------------------------------------
Les balises HTML ont la particularité de pouvoir être imbriquées de manière hiérarchique afin de permettre le cumul de leur propriétés. En contrepartie le chevauchement de balises n'est pas toléré par le standard HTML. Voici un exemple de texte formaté avec des balises imbriquées :
<i><u>Comment ça Marche</u>, encyclopédie informatique libre</i>

L'exemple ci-dessus donne le résultat suivant :
<u>Comment ça Marche</u>, encyclopédie informatique libre

En contrepartie l'exemple ci-dessous n'est pas correct :
<i><b>Comment ça Marche</i>, encyclopédie informatique libre</b>

Notion d'attribut
---------------------------------------------------------------
Un attribut est un élément, présent au sein de la balise ouvrante, permettant de définir des propriétés supplémentaires. Les attributs se présentent la plupart du temps comme une paire clé=valeur, mais certains attributs ne sont parfois définis que par la clé.


Voici un exemple d'attribut pour la balise <p> (balise définissant un paragraphe), permettant de spécifier que le texte doit être aligné sur la droite :
<p align="right">Exemple de paragraphe</p>



Chaque balise peut comporter un ou plusieurs attributs, chacun pouvant avoir (aucune,) une ou plusieurs valeurs.


Espaces, saut de ligne et tabulations
---------------------------------------------------------------

Le langage HTML ne tient pas compte des espaces, des tabulations et des sauts de ligne (ci-après appelés) ou plus exactement il considère une suite d'un ou plusieurs espaces/tabulations/saut de ligne comme une seule espace. Cela permet notamment d'indenter le code HTML pour plus de lisibilité, sans modifier l'apparence de la page HTML dans le navigateur. Il existe une exception pour le code contenu dans des balises
, dont l'objectif est justement de conserver le formatage du texte (espaces, sauts de lignes, etc.) !


A noter: il existe une exception pour le code contenu dans des balises
<PRE>, dont l'objectif est justement de conserver le formatage du texte (espaces, sauts de lignes, etc.) !


Les deux codes HTML suivants donnent ainsi le même résultat :

<pre class="code">Exemple de
code
HTML


Exemple de code HTML

Le langage HTML possède par contre des éléments permettant expressément de définir chacun de ces éléments de mise en forme :
Espace insécable : il s'agit d'une espace ne pouvant être brisée par une fin de ligne. Sa représentation en HTML est &nbsp;.
Saut de ligne manuel : il s'agit d'un saut de ligne explicite. Sa représentation en HTML est <br> (<br /> pour être conforme au XHTML).

A noter: La balise <NOBR> </NOBR> permet à l'inverse d'empêcher le retour automatique à la ligne réalisé par le navigateur !

Commentaires
---------------------------------------------------------------
Il est possible d'ajouter des éléments d'information dans une page web sans que ceux-ci soient affichés à l'écran grâce à un jeu de balises spécifique, appelé balises de commentaires.
<!-- Voici un commentaire -->

Les balises de commentaires permettent de mettre en commentaire du texte mais peuvent également servir à commenter du code HTML.

Présentation du HTML

Le HTML (« HyperText Mark-Up Language ») est un langage dit de « marquage » (de « structuration » ou de « balisage ») dont le rôle est de formaliser l'écriture d'un document avec des balises de formatage. Les balises permettent d'indiquer la façon dont doit être présenté le document et les liens qu'il établit avec d'autres documents.

Le langage HTML permet notamment la lecture de documents sur Internet à partir de machines différentes, grâce au protocole HTTP, permettant d'accèder via le réseau à des documents repérés par une adresse unique, appelée URL.

On appelle World Wide Web (noté WWW) ou tout simplement Web (mot anglais signifiant toile) la "toile virtuelle" formée par les différents documents (appelés « pages web ») liés entre-eux par des hyperliens.

Les pages web sont généralement organisées autour d'une page d'accueil, jouant un point central dans la navigation à l'aide des liens hypertextes. Cet ensemble cohérent de pages web liées par des liens hypertextes et articulées autour d'une page d'accueil commune est appelée site web.

Le Web est ainsi une énorme archive vivante composée d'une myriade de sites web proposant des pages web pouvant contenir du texte mis en forme, des images, des sons, des vidéo, etc.

Infographie 3D

Les images sont créées par des techniques d'infographie 3D. Les principales étapes de création des images 3D sont :
  • la modélisation des objets de la scène en trois dimensions,
  • la position et la trajectoire de la caméra et de la cible,
  • le positionnement et le réglage des lumières,
  • la création et l'affectation des textures,
  • le choix du mode de rendu,
  • le calcul des images. 

Infographie 2D

Ces images sont créées par des techniques travaillant directement sur les deux dimensions de l'image, que ce soit :
  •   en créant des formes ex nihilo (dessin, peinture, etc),
  • ou par des processus algorithmiques divers (images fractales),
     
  • ou par traitement d'images, c’est-à-dire modification des propriétés de chaque pixel d'une image d'origine (photographique ou dessinée, etc.). Ces modifications peuvent porter sur les dimensions des formes, leur luminance, leur couleur. Elles passent en particulier par un certain nombre de filtres (opérations mathématiques) dont les fondamentaux sont apparus avec Photoshop.

Histoire d'infographie

Le terme infographie est un mot-valise formé à partir d’informatique et de graphie. Originalement il s'agit d'une appellation déposée en France par la société Benson en 19742,3,4. Mais on le mentionne au moins depuis 1973 (IBM Systems Journal) et, à intervalles irréguliers, depuis la création expérimentale d'hologrammes par ordinateur5.

Dès 1978, le laboratoire central de physique appliquée de l'université Johns-Hopkins diffuse un cours qui sera traduit dans l'ouvrage de David F. Rogers Mathematical elements for computer graphics (adapté en français 10 ans plus tard par Jacques J. Lecœur sous le titre Algorithmes pour l'infographie).

Elle devient dès lors une discipline majeure tant dans le dessin au trait que dans le rendu d'objets naturels. L'infographie s'empare de la gestion, la médecine, la télévision, l'industrie du spectacle (jeux vidéo) et du film (Tron) ainsi que toutes les disciplines scientifiques, mathématiques, aéronautiques, mécaniques et tous les domaines de conception en général, alors que l'informatique sortait tout juste du stade de la programmation sur carte perforée.

L'infographie originelle s'attache davantage aux techniques de traitement d'images (balayage de trame, fenêtrage, algorithme du peintre et autres de suppression de parties cachées, compression, recadrage, ombrage, couleur) qu'à la sémiologie graphique. Son évolution ne peut se comprendre que dans l'analyse de sa production numérique, tant dans ses traitements statiques ou dynamiques (animation) que dans ses résultats.

Au début des années 1990, presque tous les outils techniques étaient prêts pour être confiés aux graphistes. Les nouveaux artistes numériques se sont approprié le terme d'infographiste alors réservé aux ingénieurs concepteurs de ces outils.hop.