Formation HTML

HTML	eric@liege.com
Présentation du cours HTML signifie Hyper Text Markup Language. Le terme markup se réfère aux marques, aux annotations manuscrites placées par l'auteur sur un document pour préciser à l'imprimeur comment il doit être présenté. HTML est l'outil de réalisation de pages hyperliens pour le World Wide Web. World Wide Web , littéralement la toile d'araignée d'envergure mondiale, est un vaste système distribué d'informations de type hypertexte. On l'appelle aussi en abrégé Web, WWW ou W3. World Wide Web est devenu un immense service d'information mondial, un système hypertexte global où l'information est distribuée aux quatre coins du monde par des ordinateurs communiquant au moyen des mêmes protocoles. Dans un système hypertexte, certains mots ou images d'un document renvoient à d'autres informations contenues dans d'autres documents distants. Le simple fait de pointer et cliquer avec la souris sur un de ces hyperliens provoque l'affichage du nouveau document qui lui-même contient des pointeurs vers d'autres informations et ainsi de suite à l'infini. Ce sont de tels documents que vous pourrez réaliser au moyen du langage HTML. Prérequis Un minimum de connaissances informatiques de base est indispensable : manipulation d'un ordinateur, utilisation de disquettes, lancement de programmes, copie ou suppression de fichiers, répertoires arborescents etc Durée 6 demi journées soit 24 H Chaque module de cours comprend à peu près deux heures de présentation technique et deux heures de travaux pratiques et exercices en situation réelle	Découpage du cours Historique du HTML Héritage SGML Historique World Wide Web Universal Resource Locator Hyper Text Transport Protocol Mise en page HTML 2.0 Emphase Listes Créations d’hyperliens Insertion de graphiques et fond Tables Masques de saisie Scripts CGI Frames Feuilles de style Eléments de style contenu d’une homepage habillage global, modèle de navigation rapport qualité/performance lisibilité et surcharge Graphisme - Multimédia ImageMap Gif JPEG fond transparent son, animations, vidéo HTML 3.x , HTML 4.x Extensions Netscape et Internet Explorer Plugin - sons, vidéo, 3D, JavaScript, VBScript, ActiveX, Active Server Pages Le futur Java - introduction VRML - démo HTML dynamique : survol de VBScript, Java, Javascript, ActiveX,Active Server Page
	La dernière version du manuel de cours
001.htm	document de travail
002.htm	heading
003.htm	listes ordonnées
004.htm	A proscrire
005.htm	Préférable
006.htm	Anchor
007.htm	URL
008.htm	Bookmark
009.htm	Image map
010.htm	Référencement et PICS
11	Alignement
12	Sobriété
13	Marge
14	TopMargin
15	Table et image de fond
16	Frames flottants
17	Layers
18	Layer
19	Style
20	Style
21	Style
22	Form validation
23	Effet DHTML rollover
24	Click me
25	On event
26	onclick javascript
27	événements HTML 4
28	Formulaire
29	216 couleurs Web palette
30	dhtm
31	Java applet
32	Url validation
33	Shockwave
34	Date ASP
Iframe	Iframe content refresh banner
Word	Nettoyage code WORD HTML
CSS	Cascading Style Sheet Definitive Guide
AllHtml	Script Frame Fenetre
AllHtml	Scripts Images
AllHtml	Scripts textes
DHtml	DHTML Definitive Guide
JScript	Javascript Definitive Guide
AllHTML	Intoduction Javascript
Browser	Browser detection
Dreamweaver4	FrontPage 2000 Special Directories
Extending Dreamweaver
Fenetre secondaire	La liste de tous les tags
Couleurs fond blanc	Rafraichissement
Couleurs fond noir	216 couleurs
Balises HTML	Couleurs
Frontpage2000	Advanced HTML Reference
	Dernière minute

XHTML
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Introduction à ASP 1. Premier aperçu ASP : Active Server Pages Ce langage, propriété de Microsoft, se veut très proche de Visual Basic. Ce n'est donc pas une surprise si VBScript est utilisé pour développer en ASP. Le langage permet, bien entendu, d'exécuter des Scripts côté serveur, de rendre vos pages dynamiques et, ainsi, de posséder un site toujours renouvelé, avec une mise à jour constante. 2. Intégration d'un script ASP Le langage de base pour développer en ASP est le VBScript (version light du célèbre JavaScript). Il a quelques ressemblance avec JavaScript... Avant toute chose il faut : - Que votre serveur accepte les ASP (!) - Que vos pages portent l'extension .asp Le début de votre document doit toujours commencer avec : <%@ LANGUAGE="VBScript"%> : Pour une utilisation de VBScript ou <%@ LANGUAGE="Jscript"%> : Pour une utilisation de JavaScript L'ASP utilise les balises <% et %> (principe identique au PHP avec <? et ?>), ce qui permet au serveur de repérer le script et de l'éxecuter avant le chargement de la page (principe identique avec les SSI - .shtml). Exemple d'un script ASP La fonction Request est utilisée ici pour un simple retour à la page précédente (referer). <A HREF="<%= Request.ServerVariables("HTTP_REFERER") %>">Précédente</A> 3. Les objets ASP Le langage ASP fournit des objets qui permettent de repousser les limites du VBScript et ainsi de décupler la puissance de ce langage. Pour la plupart d'entre eux, ces objets sont facilement utilisables. Ils permettent de gérer les multiples paramètres des Scripts ASP ou variables et sont appelés directement d'un Script : ils sont la base même du langage. Exemples d'objets (objets les plus utilisés) : - Request : Récupère des informations - Response : Gère le contenu envoyé aux navigateurs - Application : Permet d'instaurer une interactivité avec les visiteurs - Session : Stocke des informations - Server : Permet le paramétrage d'exécution de Script ObjetContext, Filesystemobject, Folder, Textstream, Dictionary, Drive, File, Err... sont également des objets.
	Règles de construction d'un fichier XML 1. Structure XML La mise en place d'une structure XML, sur un ensemble de données, suit quelques règles (déterminées et standardisées par le W3). >> Spécification XML : http://www.w3.org/TR/REC-xml Face aux réticences que certains peuvent ressentir devant les White Paper du consortium W3 (!), vous trouverez ci-dessous les principales règles de construction d'un fichier XML. Les informations doivent être : soit encadrées par des balises ouvrantes(ex. <Texte>) et fermantes (ex. </Texte>). Cette structure est définie sous le nom d'élément. soit incluses à l'intérieur des balises : <Texte type= "Gras"> : ici "type" est un attribut, qui a pour valeur Gras. soit définies sous forme d'entités. Les entités sont des constantes, des variables de stockages. Ainsi, si "texte" est déclaré comme une entité associée à la variable "txt", dans tout le document XML, l'usage de la notation &txt équivaut à utiliser la chaîne de caractères "texte". Mais une entité peut représenter également un fichier XML en entier. Ainsi, un fichier XML peut contenir des fichiers XML externes. Un ensemble assez restreint d'entités est défini par XML : ces entités sont une réponse aux ambiguïtés qui pourraient apparaître lors du traitement d'un élément, dont le texte serait par exemple : <A HREF="">.Nous aurions alors <Balise><A HREF=""></balise> ce qui porte à confusion lors du traitement du document XML qui ne peut déterminer si <texte> est un élément non fermé ou le texte d'un élément. < ----> < > ----> > & ----> & " ----> " ' ----> ' Note : les éléments vides sont permis, <Texte></Texte> est équivalent à <Texte/>. Les éléments (définis précédemment) doivent suivre des règles déjà connues par les utilisateurs de Well-formed HTML (HTML bien formé) : Les balises ne doivent pas se recouvrir : le XML impose une hiérarchie stricte. Les valeurs des entités ou des attributs doivent toujours être encadrées par des guillemets (simples " ' " ou doubles " " "). Un document XML peut être associé à une DTD (Définition de Type de Document). La structure du document XML (intitulé des balises, imbrications des balises, …) peut être déclarée formellement dans le corps du document XML ou dans un fichier à part. Cette déclaration s'appelle une Définition de Type de Document (DTD). Elle s'effectue selon un formalisme particulier, défini lui aussi dans la spécification XML.Cette déclaration est facultative. Lorsqu'un document XML possède une DTD associée et la respecte, on dit qu'il est valide. Lorsqu'il respecte seulement les règles de la grammaire XML (balises fermées, correctement imbriquées…), on dit qu'il est bien formé. Note : un document XML admet une racine unique. La structure ci-dessous n'est pas acceptée : <couleur type= "teinte">rouge</couleurl> <couleur type= "teinte">verte</couleurl> <couleur type= "teinte">bleue</couleurl> <couleur type= "teinte">noire</couleurl> Il faut définir une racine unique comme ci-dessous : <root sujet="palette"> <couleur type= "teinte">rouge</couleurl> <couleur type= "teinte">verte</couleurl> <couleur type= "teinte">bleue</couleurl> <couleur type= "teinte">noire</couleurl> </root> Note : Il va de soi que la représentation, à travers une structure XML d'un ensemble de données, n'est pas unique : c'est aux utilisateurs de choisir celle qui leur convient le mieux (les deux exemples ci-dessous sont identiques). 2. Exemples exemple 1 : <site sujet="Guide HTML"> <titre nom="ALL HTML"> <url>www.allhtml.com</url> </titre> <titre nom="W3C"> <url>www.w3.org</url> </titre> </site> exemple 2 : <site>Guide HTML <titre url="www.allhtml.com">All HTML</titre> <titre url="www.w3.org">W3C</titre> </site>
1. Naissance et évolution du XHTML a ) Naissance XHTML (the eXtensible Hyper Text Markup Language) signifie langage de balisage hypertexte extensible. Il est la conséquence de l'incompatibilité des fichiers HTML et XML que certains navigateurs n'arrivaient pas à déchiffrer. C'est une extension du HTML qui, en outre, reprend les caractéristiques les plus interréssantes du XML, telles que la structuration et l'extensibilité des données (il est possible d'étendre les fonctions standards du langage, en employant des bibliothèques externes chargeables sous forme de module par le biais du DTD). Le w3c avait pour objectif de créer un langage, compatible avec les nombreuses pages disponibles sur le Web, qui intègre les technologies qui s'imposent, comme par exemple l'accès au web via les périphériques mobiles (CGM, Palm, Pocket PC) : XHTML 1.0 sera le successeur du HTML 4.0. L'XHTML permet de reprendre les éléments familiers du HTML avec une syntaxe XML (un fichier source XHTML prendra en en-tête le DTD (Document Type Définition) propre à la syntaxe XML, qui définit la structure des attributs et éléments qui sont utlisés dans le fichier source. b ) Evolution XHTML fournit les bases d'une famille de types de documents qui étendront et définiront des sous-ensembles XHTML, de façon à maintenir une large variété de nouveaux matériels et d'applications, en définissant des modules et en spécifiant le mécanisme pour combiner ces modules. Ce mécanisme permettra l'extension et la construction de sous-ensembles XHTML1.0 de façon unique à travers la définition de nouveaux modules. Car XHTML est composé en interne de modules ! Il est possible de remplacer les modules existant ou d'en rajouter. Chaque module existant est décrit par un "abstract module" qui définit l'usage et le pourtour. Malheureusement, pour le momment, aucun éditeur HTML classique (ou presque) ne permet de sauver son travail au format XHTML. Mais, il existe une exception : Amaya, qui est l'éditeur/browser mis au point par le w3c et qui intègre et gère efficacement la plupart des améliorations les plus récentes : feuilles de styles, modules additionnels,XML, HTML 4.0, et XHTML. Il est l'outil idéal pour tester les dernièrs raffinements sur le web et est téléchargeable sur ALL HTML (rubrique éditeurs XML). 2. Différences du XHTML par rapport au HTML et XML a ) HTML : Le HTML est un dévelopement du langage SGML (Structured Generalized Markup Language). Il s'agit d'un langage de description et de formatage de document. Ce n'est pas un langage de programmation proprement dit, il est un type de document spécial de SGML, correspondant à une définition de type de document particulière. Il devient le fondement du WWW (World Wide Web). Le texte du document repose sur des données non structurées. a ) XML : Il conserve les éléments les plus utiles de SGML sans tout ce qui est compliqué. On peut le considerer comme du "SGML-LIGHT". Tout comme SGML, XML est un métalangage de définition de type de documents. Il définit la syntaxe de tout nouveau type de document. La structure d'un document XML est intermédiaire entre celle extrêmement rigoureuse d'une base de données et celle pratiquement inexistante d'un texte. a ) XHTML : Il est une normalisation et une extension du HTML et est le véritable successeur du HTML4. Il intègre toutefois les caractéristiques les plus intéressantes du XML : données structurées, extension des fonctions. Il est codé comme du HTML sauf la première balise, qui doit obligatoirement être du type : <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML1.0 Strict//EN" "DTD/xhml1.strict.dtd"> 3. Premières balises du XHTML <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML1.0 Transitional " "DTD/xhml1.transitional.dtd"> C'est une balise de forme DTD (Document Type Définition). Le DTD définit le type de langage utilisé et sa version. Il existe 3 balises différentes pour un code XHTML, afin de respecter le niveau de compatibilité de certains navigateurs : a ) Navigateurs reconnaissants les feuilles de style CSS(Cascading Style Sheet) : Dans ce cas, on utilise un code dit "XHTML strict", et on est obligé de mettre en en-tête de nos fichiers la balise suivante : <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML1.0 Strict//EN " "DTD/xhml1.strict.dtd"> b ) Navigateurs de première génération Dans cet exemple, on utilise un code dit "XHTML de transition", à part les feuilles de styles, le code est proche du précédent : <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML1.0 Transitional//EN " "DTD/xhml1.transitional.dtd"> c ) Cas de Frameset Les frames sont gérées de manière spécifique (idem avec du HTML). On utilise alors la balise suivante : <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML1.0 Frameset//EN " "DTD/xhml1.frameset.dtd"> 4. Les différentes types de balises XHTML En XHTML, l'écriture des balises se fait obligatoirement en minuscule, contrairement au HTML où on peut alterner les deux sans gravité. De même en HTML, certaines balises sont facultatives (comme les balises de début et de fin de fichier) vu que les navigateurs s'en passent très bien (à tort !). Elles sont obligatoires en XHTML. a ) Balises de base <html> < head> ...... </head> < body> ...... </body> </html>
	How to read the HTML DTD Each element and attribute declaration in this specification is accompanied by its document type definition fragment. We have chosen to include the DTD fragments in the specification rather than seek a more approachable, but longer and less precise means of describing an element's properties. The following tutorial should allow readers unfamiliar with SGML to read the DTD and understand the technical details of the HTML specification. 3.3.1 DTD Comments In DTDs, comments may spread over one or more lines. In the DTD, comments are delimited by a pair of "--" marks, e.g. <!ELEMENT PARAM - O EMPTY -- named property value --> Here, the comment "named property value" explains the use of the PARAM element type. Comments in the DTD are informative only. 3.3.2 Parameter entity definitions The HTML DTD begins with a series of parameter entity definitions. A parameter entity definition defines a kind of macro that may be referenced and expanded elsewhere in the DTD. These macros may not appear in HTML documents, only in the DTD. Other types of macros, called character references, may be used in the text of an HTML document or within attribute values. When the parameter entity is referred to by name in the DTD, it is expanded into a string. A parameter entity definition begins with the keyword <!ENTITY % followed by the entity name, the quoted string the entity expands to, and finally a closing >. Instances of parameter entities in a DTD begin with "%", then the parameter entity name, and terminated by an optional ";". The following example defines the string that the "%fontstyle;" entity will expand to. <!ENTITY % fontstyle "TT \| I \| B \| BIG \| SMALL"> The string the parameter entity expands to may contain other parameter entity names. These names are expanded recursively. In the following example, the "%inline;" parameter entity is defined to include the "%fontstyle;", "%phrase;", "%special;" and "%formctrl;" parameter entities. <!ENTITY % inline "#PCDATA \| %fontstyle; \| %phrase; \| %special; \| %formctrl;"> You will encounter two DTD entities frequently in the HTML DTD: "%block;" "%inline;". They are used when the content model includes block-level and inline elements, respectively (defined in the section on the global structure of an HTML document). 3.3.3 Element declarations The bulk of the HTML DTD consists of the declarations of element types and their attributes. The <!ELEMENT keyword begins a declaration and the > character ends it. Between these are specified: The element's name. Whether the element's tags are optional. Two hyphens that appear after the element name mean that the start and end tags are mandatory. One hyphen followed by the letter "O" indicates that the end tag can be omitted. A pair of letter "O"s indicate that both the start and end tags can be omitted. The element's content, if any. The allowed content for an element is called its content model. Element types that are designed to have no content are called empty elements. The content model for such element types is declared using the keyword "EMPTY". In this example: <!ELEMENT UL - - (LI)+> The element type being declared is UL. The two hyphens indicate that both the start tag <UL> and the end tag </UL> for this element type are required. The content model for this element type is declared to be "at least one LI element". Below, we explain how to specify content models. This example illustrates the declaration of an empty element type: <!ELEMENT IMG - O EMPTY> The element type being declared is IMG. The hyphen and the following "O" indicate that the end tag can be omitted, but together with the content model "EMPTY", this is strengthened to the rule that the end tag must be omitted. The "EMPTY" keyword means that instances of this type must not have content. Content model definitions The content model describes what may be contained by an instance of an element type. Content model definitions may include: The names of allowed or forbidden element types (e.g., the UL element contains instances of the LI element type, and the P element type may not contain other P elements). DTD entities (e.g., the LABEL element contains instances of the "%inline;" parameter entity). Document text (indicated by the SGML construct "#PCDATA"). Text may contain character references. Recall that these begin with & and end with a semicolon (e.g., "Hergé's adventures of Tintin" contains the character entity reference for the "e acute" character). The content model of an element is specified with the following syntax. Please note that the list below is a simplification of the full SGML syntax rules and does not address, e.g., precedences. ( ... ) Delimits a group. A A must occur, one time only. A+ A must occur one or more times. A? A must occur zero or one time. A* A may occur zero or more times. +(A) A may occur. -(A) A must not occur. A \| B Either A or B must occur, but not both. A , B Both A and B must occur, in that order. A & B Both A and B must occur, in any order. Here are some examples from the HTML DTD: <!ELEMENT UL - - (LI)+> The UL element must contain one or more LI elements. <!ELEMENT DL - - (DT\|DD)+> The DL element must contain one or more DT or DD elements in any order. <!ELEMENT OPTION - O (#PCDATA)> The OPTION element may only contain text and entities, such as & -- this is indicated by the SGML data type #PCDATA. A few HTML element types use an additional SGML feature to exclude elements from their content model. Excluded elements are preceded by a hyphen. Explicit exclusions override permitted elements. In this example, the -(A) signifies that the element A cannot appear in another A element (i.e., anchors may not be nested). <!ELEMENT A - - (%inline;)* -(A)> Note that the A element type is part of the DTD parameter entity "%inline;", but is excluded explicitly because of -(A). Similarly, the following element type declaration for FORM prohibits nested forms: <!ELEMENT FORM - - (%block;\|SCRIPT)+ -(FORM)> 3.3.4 Attribute declarations The <!ATTLIST keyword begins the declaration of attributes that an element may take. It is followed by the name of the element in question, a list of attribute definitions, and a closing >. Each attribute definition is a triplet that defines: The name of an attribute. The type of the attribute's value or an explicit set of possible values. Values defined explicitly by the DTD are case-insensitive. Please consult the section on basic HTML data types for more information about attribute value types. Whether the default value of the attribute is implicit (keyword "#IMPLIED"), in which case the default value must be supplied by the user agent (in some cases via inheritance from parent elements); always required (keyword "#REQUIRED"); or fixed to the given value (keyword "#FIXED"). Some attribute definitions explicitly specify a default value for the attribute. In this example, the name attribute is defined for the MAP element. The attribute is optional for this element. <!ATTLIST MAP name CDATA #IMPLIED > The type of values permitted for the attribute is given as CDATA, an SGML data type. CDATA is text that may contain character references. For more information about "CDATA", "NAME", "ID", and other data types, please consult the section on HTML data types. The following examples illustrate several attribute definitions: rowspan NUMBER 1 -- number of rows spanned by cell -- http-equiv NAME #IMPLIED -- HTTP response header name -- id ID #IMPLIED -- document-wide unique id -- valign (top\|middle\|bottom\|baseline) #IMPLIED The rowspan attribute requires values of type NUMBER. The default value is given explicitly as "1". The optional http-equiv attribute requires values of type NAME. The optional id attribute requires values of type ID. The optional valign attribute

HTML

Présentation du cours

Découpage du cours

Dernière minute

Introduction à ASP

Règles de construction d'un fichier XML

1. Naissance et évolution du XHTML

How to read the HTML DTD