Scribd
Importer
6 vues26 pages

Infobulles HTML et balises W3Schools

Transféré par

joseph kouamé
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
6 vues26 pages

Infobulles HTML et balises W3Schools

Transféré par

joseph kouamé
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

HTML

Historique du web

SGML à HTML

Balise Html 5
Structure d’une balise HTML
Balise, expression, chevron, élément, attribut, valeur
HTML est un langage de marquage ou balisage. Il est donc composé de balises (tag ou marqueurs).

Editeurs html

Css3 Styles

Javascript/vbscript

Texte
fonction

Applet java

Système de Gestion des contenus : CMS (Content Management System)

Trois cms de référence : WordPress, Zoomla, Drupal

PHP/mysql

PHP

1
HTML dérive de SGML.

SGML standarddized generalised markup language


HML : hypertext markup language= Langage de balisage
XHTML extended hypertext markup language
WML: Wireless Markup Language
XML : extended markup language

Figure 1 : Provenance double de XHTML (voir figure).

Ils sont tous visualisables au moyen d’un navigateur ou browser (Internet explorer (IE) de Microsoft,
firefox mozilla, chrome ....).

Cette visualisation dans le navigateur doit indiquer une URI (URL ou/et URN)

URI, URL et URN

URI : Uniform Resource Identifier


URL : Uniform Resource Locator
URN : Uniform Resource Name

Figure 2 : URI

Relations entre URI, URL et URN

2
La notion la plus générale est celle d'URI. Les URI comprennent les URL et les URN même si
certains URI peuvent être simultanément des URL et des URN. Les liens entre ces différents termes
sont illustrés à la figure. Un URI est un identifiant qui permet de désigner sans ambiguïté un
document ou plus généralement une ressource. Cet identifiant doit donc être unique de manière
universelle. Une URL identifie un document en spécifiant un mécanisme pour le retrouver. Elle est
composée d'un protocole suivi d'une adresse permettant de récupérer le document avec le protocole.
Un URN est, au contraire, un nom donné à un document indépendamment de la façon d'accéder au
document. Un exemple typique d'URN est l'URN formé à partir du numéro ISBN d'un livre comme
urn:isbn:978-2-7117-2077-4. Cet URN identifie le livre Langages formels, calculabilité et
complexité mais n'indique pas comment l'obtenir.

La syntaxe générale des URI prend la forme scheme:ident où scheme est un schéma d'URI et où
ident est un identifiant obéissant à une syntaxe propre au schéma scheme. Chaque schéma
définit un sous-espace des URI. Dans le cas d'une URL, le schéma est un protocole d'accès au
document comme http, sip, imap ou ldap. Le schéma utilisé pour tous les URN est urn. Il est
généralement suivi de l'identificateur d'un espace de noms comme isbn. Des exemples d'URI
sont donnés ci-dessous. Les deux derniers URI de la liste sont des URN.

[Link]
s[Link]
[Link]
sip:0957279254@[Link]
[Link]
urn:oasis:names:tc:docbook:dtd:xml:docbook:5.1
urn:publicid:-:W3C:DTD+HTML+4.0:EN

Dans la pratique, la plupart des URI utilisées sont des URL et les deux termes peuvent
pratiquement être considérés comme synonymes.

(A)

(B)

Structure d’un URL (uniform resource locator)

Langages à balisage

3
Arborescence des balises (tag) :

HTML et XHTML

Xhtml est plus rigoureux que html surtout dans la définition des balises (les entêtes y sont obligatoires :
<html>, <head>, <title>, and <body>)

Html commence souvent par :

<html>

Plus rigoureux avec xhtml, avec plus de spécifications on

<!DOCTYPE html>
<HTML>

En plus rigoureux :

<!DOCTYPE html public ".//w3c/DTD XHTML 1.0 Strict // EN"


"[Link]
<HTML xmlsns=[Link] lang="fr" xml:lang="fr">

Bref.

 XHTML stands for EXtensible HyperText Markup Language


 XHTML is almost identical to HTML
 XHTML is stricter than HTML
 XHTML is HTML defined as an XML application
 XHTML is supported by all major browsers

Avec html5 et xhtml on a l’obligation d’indiquer <!DOCTYPE html> DTD.

html5 sémantiquement plus riche et plus expressif.

Figure2 : Généalogie des Langages web (Markup languages) et leurs structures propriétaire et
habilitantes correspondantes :

4
SVG: Scalable Vector Graphics
SMIL : Synchronized Multimedia Integration Language
HDML : Handheld Device Markup Language for mobile phone
EOB ...

Figure3

Figure4

5
De html à html5 la syntaxe intègre de manière progressive de balises de plus en plus formelles et
rigoureuses dans leur écriture. Le nombre de balises augmente également.

Ainsi par exemple avec html5, Le Doctype s’insère en tout début de page et ce de manière obligatoire. Il
sert à définir le type du document afin qu’il soit correctement interprété par le navigateur. La balise
correspondante est à la première ligne du code HTML. Plus précisément, Le Doctype (type of document),
<!DOCTYPE html>, doit toujours se situer avant la balise <HTML>.

Styles et scripts

Deux possibilités d’utiliser un Styles ou un scripts :


- Par un fichier de sorte que plusieurs fichiers html peuvent faire usage de ce même fichier.
- Sans usage de fichier de style ou de script, il faut écrire par incrustation directe de styles ou/et de
scripts.

Styles
Il y a plusieurs possibilités : style comme attribut ou style comme balise de head.

Déclarés comme attribut style d’un élément (comme l’élément h1)


Exemple : style comme attribut
---
<h1 style="font-family: Arial; font-style: italic;”>
Un texte qui se retrouvera en arial italique
<h1>
---

Par exemple dans le <head>

Style peut être directement introduit dans le corps html via <span>

La feuille de style est déclarée dans l’en-tête. Dans la balise <head> comme le schéma suivant :

<head> <head>
<style type="text/xsl"> <style type="text/css">
Style xsl Style css
</style> </ style>
</head> </head>

Scripts

Dans la balise <head>


<script type="text/javascript">
Structure d’une balise HTML
java Script
</script>
6
Il est possible d’admettre des fichiers de script (javascript) et de style (cf entête du code html ci-après.

Structure de base pour html5


<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="[Link]">
<!--ou link rel="stylesheet" href="[Link]"-->
<script type="text/javascript" src="[Link]"></script>
</head>
<body>
...
<!-- Le reste du contenu -->
...
</body>
</html>

Explication

(prologue )

<!doctype html> DTD

<html lang="fr"> ou <HTML>

(entête)

<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="[Link]">
<!--ou link rel="stylesheet" href="[Link]"-->

<script src="[Link]"></script>

</head>

(corps)

<body>
...
<!-- Le reste du contenu -->
...
</body>

</html>

7
Les balises <!doctype html> (DTD : définition de type de document),
<HTML>, <head> et <body> sont obligatoires en html5. Ce qui n’est pas le
cas pour html où il est seulement tenu obligatoire la deuxième et la
quatrième.

IDÉE D’ARBRE EN HTML : structure arborescente ou hiérarchique des balises.

Syntaxe HTML et approche arborescente

Ponction de code html (arbre)

Aperçu d’arbre 2

8
Approche de structure corrélative des pages arbre (graphe)

On a une page par nœud. Le nœud racine est pour la page d’accueil, comme le montre le cas transport ci-
après.

On a une corrélation (bidirectionnelle ou non) par href de liens hiérarchique comme le montre la figure
juste au-dessus. On peut y rajouter également des liens horizontaux ou de tout ordre vu l’intérêt.
En outre, on peut établir des liens de référencement de sites (lien hors site vers un par exemple moins visité
ou plus visité). (Intérêt de vitrine et de visibilité des activités, découvertes, offres commerciales, de
recherche, partage, apprentissage, projet, propagande.....).

Syntaxe à Balises ou Tags


Balise, expression, chevron, élément, attribut, valeur

Le HTML est un langage de marquage ou balisage. Il est donc composé de balises (tag ou
marqueurs).

Une balise est délimitée par des chevrons ouvrant (<) et fermant (>) à l’intérieur desquels est
disposé une expression.

L’expression est constituée du nom de la balise (chaîne de caractères) appelé élément suivi
éventuellement d’un espace et d’un couple couples (attribut, valeur) tel que attribut = " valeur " ou
de plusieurs couples. Soit n tel que pour chaque i de 1 à n on a (attribut_i, valeur_i) traduit en
pratique par attribut_i = valeur_i.

Ces couples sont séparés entre eux par des espaces. Ainsi une valeur est associée à chaque attribut.
De manière plus explicite, une balise HTML est constituée :
 d’un chevron ouvrant (<) ;
 du nom de la balise (chaîne de caractères) appelé élément ;
 éventuellement suivi d’un couple attribut_1="valeur_1" ou de plusieurs couples
attribut_i = "valeur_i" (un espace sépare l’élément et le premier couple

9
attribut_1="valeur_1" ainsi que les couples attribut_i="valeur_i" entre eux) qui servent à
préciser des caractéristiques.
Les attributs sont également appelés propriétés ou paramètres ;
 D’un chevron fermant (>).
Ainsi, la syntaxe minimale d’une balise est : <élément>
Et la syntaxe générale d’une balise est :

<élément attribut1="valeur1" attribut2="valeur2" … attribut_i="valeur_i" …>

L’élément est donc la chaîne de caractères qui se retrouve entre le chevron ouvrant (<) et le
chevron fermant (>) ou un espace (" ") (le premier des deux).

Un fichier html a pour extension de fichier .html ou htm


Un fichier xhtml a pour extension de fichier .xhtml
Un fichier xml a pour extension de fichier .xml

" Xml" s’affiche dans un navigateur au moyen d’une feuille de style (.css ou .xsl).
.css et .xsl sont des extensions de fichier correspondantes aux feuilles de styles.

Les feuilles de style classiques sont :


- Classic Style Sheet ou Cascading Style Sheets (CSS);
- et eXtensible Style sheet Language (XSL).

Précision concernant les Attributs (propriétés)

Quelques aspects des attributs des balises HTML, relatifs aux arguments peuvent désormais être
facilement être remplacés par une feuille de style (XSL ou CSS).

Chaque balise HTML, qu’elle soit du type marqueur ou conteneur, peut recevoir ce qu’on
appelle un attribut. Un attribut, c’est en quelques sortes une propriété. Et comme toute propriété,
on peut leur affecter une valeur.

Marqueur est un élément contenant d’autres éléments (div, span, spam ..)
Exemple div

Se référant au couple (attribut, valeur), pour affecter une valeur à un attribut, on utilise le signe =
(égal). Ce qui donne attribut="valeur", avec pour attribut le nom de l’attribut et pour valeur,
la valeur que l’on souhaite lui affecter. Selon le type d’attribut, la valeur peut être soit du texte,
soit numérique, soit un des deux, soit un peu des deux, soit ne pas avoir de valeur du tout et se
suffire à lui-même.
Les attributs (ou paramètres) qui sont inclus dans la balise précisent des caractéristiques en leur
attribuant des valeurs.

Les attributs s’insèrent après l’élément de la balise et avant le chevron (>). Les attributs ne se
placent que dans la balise d’ouverture, jamais dans celle de fermeture.

10
< > balise d’ouverture
...... corps
......
</ > ou < /> balise de fermeture

Certains attributs sont indispensables comme par exemple le nom du fichier-image pour
l’élément image img :
<img src = "nom_image.gif" /> : src est un attribut de l’élément img.

Quand il y a plusieurs attributs, ils sont séparés par un espace les uns à la suite des autres, dans un
ordre quelconque, par exemple :

<img src="nom_image.gif" width="100" height ="250" alt="Ceci est la description de l'image">

La valeur de l’attribut est entourée par des guillemets. Le XHTML nécessite obligatoirement des
guillemets alors qu’en HTML, ils pouvaient être omis dans certains cas (nombres, alignements,
noms de fichiers…). Le guillemet peut-être double (code décimal ASCII 34) ou simple (code
décimal ASCII 39). En faisant alt +34.

Les nombres expriment en général des valeurs en pixels. Si l’unité est le pourcentage de la
fenêtre, il faut le préciser en mettant le signe % après le chiffre.

<hr width = "50" /> pour une ligne horizontale de 50 pixels


<hr width = "50%" /> pour une ligne horizontale de 50% de la largeur de fenêtre de l'utilisateur.

Les attributs les plus courants sont align, width, height et color :
 align="center" (ou « right » ou « left » ou « justify ») : alignement de ligne,
paragraphe, tableau, cellule…
 width="120" ou width="80%" : longueur de ligne, largeur d’image, de cellule…
 height="100" : hauteur d’image
 color="#FF3399" ou color="white" : couleur de bordure, de police, de cellule…

Les attributs génériques (communs)


Ce sont des attributs que toutes les balises HTML (sauf exception, bien sûr) peuvent recevoir.
Ainsi, on a par exemple les trois attributs style, class et id spécifiques aux CSS :
 style : Cet argument permet d’appliquer un style directement sur l’élément.
 class : Cet argument contient le nom d’une classe qui a été définie à l’aide de feuilles de
styles.
 id : Cet argument définit un identificateur, un peu ce que l’on appelle une étiquette dans
les langages de programmation. Cet identificateur servira notamment pour les liens.
Ainsi que les trois attributs dir, lang et title :
 dir : Il indique dans quel sens doivent être écrit les mots (gauche-doite, droite-gauche).
 lang : identificateur de langue. Cet attribut spécifie dans quelle langue de base sont écrits
les valeurs d’attribut et le contenu textuel d’un élément. La valeur par défaut de cet
attribut est inconnue.

11
 title : à ne pas confondre avec la balise <TITLE>. Il affiche dans une infobulle le texte
placé à sa suite. L’infobulle, c’est le petit texte qui s’affiche lorsque l’on reste un certain
temps en stationnement au-dessus d’un élément.

Ainsi, sur un titre de niveau 5, on peut par exemple utiliser l’attribut title pour afficher une
infobulle lorsque le lecteur de vos pages stationnera un temps plus ou moins long sur votre titre :

<HTML>
<HEAD>
<TITLE>Exemple d'utilisation d'un attribut commun</TITLE>
</HEAD>

<BODY>
<H5 title="Ceci est une infobulle">Placez votre souris sur ce titre pour voir l'infobulle</H5>
</BODY>
</HTML>

Attributs de la balise <BODY>


BGCOLOR
L’attribut bgcolor fixe la couleur d’arrière-plan de la page.
Exemple :.
<HTML>
<HEAD>
<TITLE>L'attribut BGCOLOR dans BODY</TITLE>
</HEAD>

<BODY bgcolor=”black”>
</BODY>
</HTML>

TEXT
<HTML>
<HEAD>
<TITLE>L'attribut TEXT dans BODY</TITLE>
</HEAD>

<BODY bgcolor=black text=white>


Ceci est du texte blanc écrit sur un fond noir
</BODY>
</HTML>

BACKGROUND
L’attribut background permet d’afficher une image en arrière-plan. Il faut pour cela indiquer
l’URL de l’image correspondante ou chemin.

12
<HTML>
<HEAD>
<TITLE>L'attribut BACKGROUND dans BODY</TITLE>
</HEAD>

<BODY background="[Link]
</BODY>
</HTML>

L’image mise ainsi est multipliée de sorte à couvrir toute la page.

LINK, ALINK, VLINK

L’attribut link permet de fixer la couleur que l’on veut attribuer au lien de la page. L’attribut
alink fixe celle des liens actifs, vlink concerne les liens visités.

<HTML>
<HEAD>
<TITLE>Les attributs LINK, ALINK et VLINK dans BODY</TITLE>
</HEAD>

<BODY link=red alink=blue vlink=black>


</BODY>
</HTML>

Attributs des balises <H1> à <H6>

Il n’existe qu’un seul et unique argument pour les titres et sous-titres (hormis les attributs
communs, bien sûr) : l’attribut align (Aligne un titre à gauche, au centre, à droite ou le justifie). Il
définit l’alignement horizontal du titre. Il peut prendre quatre valeurs :
 left aligne le titre à gauche (option par défaut)
 center aligne le titre au centre
 right aligne le titre à droite
 justify justifie le titre

Syntaxe
<H1 Align=left|center|right|justify> ... </H1>
(left est la valeur par défaut).

Exemple :

<H3 align="right">Titre à droite</H3>

13
D’une manière générale, l’attribut align s’applique aux balises des éléments h1 à h6, p div, sub,
sup, tab, hr, img, fig, table, tr, th, td, caption, input, select, textarea, array, item, div, …

Attributs des balises HTML en général : se référer aux manuels HTML.


Le nombre de balise

Codage des couleurs en HTML

Notation hexadécimale standard

Les chiffres hexadécimaux (base 16) vont de 0 à F (16 valeurs).


 Les chiffres de 0 à 9 correspondent à nos chiffres décimaux.
 Les lettres de A, B, C, D, E à F correspondent respectivement à 10, 11, 12, 13, 14, 15 en
décimal.
Les couleurs sont codées en HTML sous la forme d’un dièse # suivi de 6 chiffres hexadécimaux.
Les 6 chiffres se composent de 3 groupes de 2 chiffres selon le principe de la synthèse additive
(composition à partir de 3 couleurs fondamentales) RVB (Rouge Vert Bleu) ou RGB ( Red
Green Blue). Les 2 premiers chiffres codent le canal rouge, les 2 suivant le canal vert, les 2
derniers le canal bleu, soit #RRVVBB (ex : #528F0B).
Le codage d’une couleur fondamentale (R ou V ou B) avec deux chiffres hexadécimaux permet
d’obtenir 16 x 16, soit 256 valeurs d’intensité différente (de 0 à 255) de cette couleur ce qui
permet de coder environ 16 millions de couleurs différentes (256 x 256 x 256). 00 correspond à
l’intensité minimale de la couleur fondamentale considérée (R ou V ou B), FF à l’intensité
maximale de cette couleur. Considérons ces deux valeurs extrêmes:
 RR=00 soit une valeur du canal Rouge = 0 donc une couleur noire, RR = FF soit une
valeur du canal Rouge = 255 donc une couleur rouge.
 VV=00 soit une valeur du canal Vert = 0 donc une couleur noire, VV = FF soit une une
valeur du canal Vert = 255 donc une couleur verte.
 BB=00 soit une valeur du canal Bleu = 0 donc une couleur noire, BB = FF soit une valeur
du canal Bleu = 255 donc une couleur bleue.

Notation hexadécimale abrégée

Break pour rappel très succinct

Notation binaire {01,1] avec deux symboles. C’est le langage binaire ou encore langage machine
Deuxième génération de langage à même de mapper le binaire est l’assembler ou langage
d’assemblage (add jump, move .... ) on programme avec les Objets directement liés aux
processeurs registre (accumulateurs), flag (drapeaux)...
Troisième langage générationnel (compilateurs, interpréteurs) : les langages évolués qui mappent
à leur tour l’assembleur. Quelques instances de langage évolués : ada, pascal, cobol, c, lisp,
prolog, langages de programmation objet (simula, smalltalk), delphi ....
Les langage de quatrième génération (graphique , les RAD) : VB
Après les langages de troisième génération, on a une multiplication de langages alliant
convivialité, complexité, et simulation de la réalité au mieux, tout en étant conscient de ne jamais
l’atteindre. Mais un effort sans cesse es fait pour s’en rapprocher.

14
On a les langages de programmation orientés objet (Poo) comme (Java interpréteur et compilateur),
c++, j++, python (procédural et Poo).
Java est créé par Sun Microsystem racheté dans les années 2010 (date à vérifier) par oracle
(leader SGBD).
Langages graphique : Vb, sybase
Les RAD
Les langages du web (interpréteur la plupart) et les scripts (vbscript, javascript)
Technologies jsp et asp (Microsoft)
Voir code ascii et système de numération
Décimal 10 chiffres ou digits B= {0 ;1 ;2 ;3 ;4 ;5 ;6 ;7 ;8 ;9 }

Binaire ou base 2 avec B={0 ;1) 2 chiffres ou digits


Octal ou base 8 avec B={0 ;1 ;2 ;3 ;4 ;5 ;6 ;7 } 8 chiffres ou digits

Hexadécimal base 16 avec B={0 ;1 ;2 ;3 ;4 ;5 ;6 ;7 ;8 ;9 ; A, B, C, D, E ; F } 16 chiffres ou digits

Voir cours système de numération :


Bref !!!!

Notation hexadécimale abrégée suite

Il existe aussi une notation abrégée #RVB qui correspond en fait à #RRVVBB (#7D4 correspond à
#77DD44).
Les couleurs communes aux navigateurs Internet Explorer et Netscape Navigator, sur PC ou
Macintosh sont dites Web-safe.
Cette palette de base comporte 216 couleurs en théorie (212 en pratique) qui utilise
exclusivement des combinaisons de 00 33 66 99 CC FF pour le codage RVB.
Certaines couleurs peuvent être aussi désignées par leur nom en langue anglaise : aqua, black,
blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver,
teal, white et yellow.

Quelques exemples de codage de couleurs

Couleurs web-safe Couleurs non web-safe


Noir : black = Blanc : white = Gris : gray = Pourpre : purple =
"#000000" "#FFFFFF" "#808080" "#800080"
Rouge : red = Cyan : aqua (ou Argent : silver = Marron : maroon =
"#FF0000" cyan) = "#C0C0C0" "#800000"
"#00FFFF"
Vert-jaune : lime = Magenta : fuchsia Vert olive : olive = Vert : green =
"#00FF00" = "#FF00FF" "#808000" "#008000"
Bleu : blue = Jaune : yellow = Bleu foncé : navy Turquoise : teal =
"#0000FF" "#FFFF00" = "#000080" "#008080"

Codage des couleurs en CSS

15
En CSS, les deux codages précédents restent valables, de plus on peut coder la couleur par la
fonction rgb(x,y,z) qui précise la valeur de chaque canal de couleur RVB de deux manières
différentes :
 par un pourcentage (de 0% à 100%) : rgb(0.5%,52.5%,100%)
 par un nombre de 0 à 255 : rgb (1,129,255)

Une vision synthétique du codage des couleurs pour les CSS : cinq manières de spécifier
les valeurs d’une couleur sont à noter:
 #RRVVBB
 #RVB
 #rgb([Link]%,[Link]%,[Link]%)
 rgb (rrr,vvv,bbb)
 keyword : l’un des 16 mots-clés reconnus pour désigner une couleur empruntée à la
palette VGA originale de Windows : aqua, black, blue, fuchsia, gray, green,
lime, maroon, navy, olive, purple, red, silver, teal, white et yellow.

The table tag displays information in rows and columns.

The following code:

<table>
<tr>
<td>Row 1 - Col 1</td>
<td>Row 1 - Col 2</td>
</tr>
<tr>
<td>Row 2 - Col 1</td>
<td>Row 2 - Col 2</td>
</tr>
</table>

Produces a table that looks like:

Row 1 - Col 1 Row 1 - Col 2


Row 2 - Col 1 Row 2 - Col 2

Inside the <table> tag are <tr> or table row tags which in turn contain <td> or table cell tags.

Data goes in the <td> cell. That data can be text, other tags or whatever. Remember that first
comes <table>, then <tr>, then <td>, then and only then, data.

See good tutorials via :

[Link]
[Link]

16
[Link]

Below I added some CSS and the border attribute (border="1") to better display the rows and
columns.

Row 1 - Col 1 Row 1 - Col 2


Row 2 - Col 1 Row 2 - Col 2

Here's the rub. There has to be the same number of cells in each row unless you indicate a table
cell spans multiple columns and/or rows.

Multiple columns:
<table border="1">
<tr>
<td colspan="2">Row 1 - Col 1 & Col 2</td>
</tr>
<tr>
<td>Row 2 - Col 1</td>
<td>Row 2 - Col 2</td>
</tr>
</table>
Row 1 - Col 1 & Col 2
Row 2 - Col 1 Row 2 - Col 2

Multiple rows:
<table border="1">
<tr>
<td>Row 1 - Col 1</td>
<td rowspan="2">Row 1 & Row 2 - Col 2</td>
</tr>
<tr>
<td>Row 2 - Col 1</td>
</tr>
</table>
Row 1 - Col 1
Row 1 & Row 2 - Col 2
Row 2 - Col 1

Or a combination of both:

<table border="1">
<tr>
<td>Row 1 - Col 1</td>
<td>Row 1 - Col 2</td>
<td>Row 1 - Col 3</td>
<td rowspan="4">Row 1, 2, 3 & 4 - Col 4</td>
</tr>
<tr>

17
<td>Row 2 - Col 1</td>
<td colspan="2" rowspan="3">Row 2, 3 & 4 - Col 2 & 3</td>
</tr>
<tr>
<td>Row 3 - Col 1</td>
</tr>
<tr>
<td>Row 4 - Col 1</td>
</tr>
<tr>
<td colspan="2">Row 5 - Col 1 & 2</td>
<td colspan="2">Row 5 - Col 3 & 4</td>
</tr>
<tr>
<td colspan="4">Row 6 - Col 1, 2, 3 & 4</td>
</tr>
</table>
Row 1 - Col 1 Row 1 - Col 2 Row 1 - Col 3
Row 2 - Col 1
Row 1, 2, 3 & 4 - Col 4
Row 3 - Col 1 Row 2, 3 & 4 - Col 2 & 3
Row 4 - Col 1
Row 5 - Col 1 & 2 Row 5 - Col 3 & 4
Row 6 - Col 1, 2, 3 & 4

As I said, tables can get tricky – and I'm not done. In addition to the <tr> and <td> tags there
are:

 <th> - Table header


 <colgroup> - Column Group
 <thead> - Table head
 <tbody> - Table body
 <tfoot> - Table foot

Also, you should know that in HTML 4.01 tables could have various attributes. The opening
table tag looked something like this:

<table cellpadding="5" cellspacing="5" border="1">

In HTML5 most attributes (eg. cellpadding="5") have been eliminated.

NB : Pour application de HTML, HTML avec CSS, XSL puis XHTML, XML et plus, il existe de
nombreux exercices avec parser. Voir site [Link]
Bootstrap ; amorcage
XML

18
XML et toutes les technologies autour de XML font un grand usage des URI et plus
particulièrement des URL. Ceux-ci sont, par exemple, employés pour référencer des documents
externes comme des DTD ou pour identifier des espaces de noms. Les URL sont bien connues car
elles sont utilisées au quotidien pour naviguer sur le WEB. La terminologie XML distingue
également les URI et les URN. Les significations exactes de ces trois termes dans la terminologie
XML sont les suivantes.

Travaux du F:\cours\php\html css php jqury javacript\tdtp

Page web, Web, html et balises tous sont intrinsèquement liées.

Via <Style>, le style a pour but d’améliorer la mise en forme.


<script> pour incruster des programmes exécutable dans le navigateur

Infobulle

<BODY>
<H5 title="Ceci est une infobulle">Placez votre souris sur ce titre pour voir l'infobulle</H5>
</BODY>
Title dans ce context réci, n’est plus une balise mais un attribut. Nettement, infobulle va avec title qui n’a rien à avoir
avec <title> contenu</title>

Css xsl : Div, Class, id,

Style styleA :

Mise en forme pour une balise (e.g : H5 )


H5 {
background-color: Blue;
color : orange;
margin: 20px 0 20px 0;
padding: 20px;
}

Une seule mise en forme pour plusieurs balises (H3 et B) :


H3, B {
background-color: Blue;
color : orange;
margin: 20px 0 20px 0;
padding: 20px;
}
L’écriture « H3, B » peut être remplacé par « H3 B »

#ideef {
background-color: Blue;
}

19
On crée une classe (via .idee2) de mise de forme qui s’appliquera à plusieurs éléments (balises).

.idee2 {
background-color: Blue;
color : orange;
margin: 20px 0 20px 0;
padding: 20px;
}

[Link] {
background-color: Blue;
color : orange;
margin: 20px 0 20px 0;
padding: 20px;
}

[Link] {
background-color: greenyellow;
color : blue;
margin: 20px 0 20px 0;
padding: 20px;
}
div.cities2 {
background-color: greenyellow;
color : white;
margin: 20px 0 20px 0;
padding: 20px;
}

H5 balise
Partout où il y a :
<H5> contenu</H5>, s’appliquera le style pour h5 défini dans styleA

Cities et cities2 sont des classes de mise en forme. Pour appliquer par exemple cities on fera

<div class="cities2">
contenu
</div>

<p class="cities">
contenu
</p>

<div id="ideef">
contenu
</div>

20
<p class="idee">
contenu
</p>

-idee2 prend plusieurs bases


<p class="idee2">
contenu
</p>

<a class="idee2">
contenu
</a>
<a > est inscrutable partout : dans les blocks, les inline et à la fois les deux

Les conteneurs sont les balises. Les contenus constituent ce qui est attendu d’être affiché dans le
navigateur aux yeux de l’utilisateur (internaute).

Liaison par href : ancrage de lien hypertexte, ancre (lien singulier).


Le lien hypertexte est la raison principale d’un texte hyper différent des textes classiques.
Quelle est la longueur limite d’une seule page web ? On peut en faire un débat. Mais ce n’est pas
essentiel tant que nous avons de la mémoire.

L’ancrage consiste en un repère vers un autre endroit d’une page web

Alors un lien hypertexte, pour dire texte géant presque sans limite.

Il basé sur l’élément balise <a> avec comme attribut href. Href (hyper référence) crée un ancrage.

On a quatre liens de base pour créer un ancrage :

-lien entre deux parties d’une même page web par le moyen d’une ancre.
-lien entre pages web (entre deux fichiers). C’est un lien binaire.
-lien entre deux parties dont l’une est sur une page et l’autre sur une deuxième page web par le moyen
d’une ancre.
-lien entre deux pages web avec une page par sites (référencement)

Ancre sur la même page

L’ancre est un repère vers un autre endroit d’une page web : elle concerne une seule page ou deux pages
web.

Sur la même page web : l’exemple de l’ancre intro.


<ol type="1">
<li><a href="#intro">Pourquoi les formulaires ?</a></li> (aa1)
<li><a href="#form">La balise principale</a></li>
<li><a href="#txt">Champ de saisie simple</a></li>

21
<li><a href="#txt2">Champ de saisie multi-lignes</a></li>
<li><a href="#hidden">Champ caché</a></li>
<li><a href="#radio">Bouton radio</a></li>
<li><a href="#checkbox">Bouton checkbox</a></li>
<li><a href="#list">Listes</a></li>
<li><a href="#jointe">Pièces jointes</a></li>
<li><a href="#button">Boutons de fonction</a></li>
<li><a href="#plus">Encore plus...</a></li>
</ol>

En cliquant sur « Pourquoi les formulaires ? » comme l’indique la première ligne, on est conduit en
conséquence dans le texte à l’endroit où il est indiqué intro. Autrement dit, l’ancre est créée avec la
balise <a> comme indiqué dans le code correspondant : (aa2)

<a name ="intro">Pourquoi les formulaires ?</a>


Ou
<a id="intro">Pourquoi les formulaires ?</a>

Par clic sur (Pourquoi les formulaires) de (aa1) , on a accès au contenu de la page à l’endroit où
est définie l’ancre intro (aa2)

Ancre sur une autre page : Indication vers un endroit d’une autre page

Pour créer l’ancre, on ajoute l’attribut id=”nom_de_l_ancre” dans presque n’importe quelle balise
de la page cible (par exemple [Link]).
◮ On crée un lien vers l’ancre (nom_de_l_ancre ) dans notre page comme suit :

a href=”[Link]# nom_de_l_ancre ”> mon lien </a >


<

Ancrage pour indication vers un fichier, autre page web

<!-- Menu de navigation du site -->


<ul class="navbar">
<li><a href="[Link]">Home page</a>
<li><a href="[Link]">Réflexions</a>
<li><a href="[Link]">Ma ville</a>
<li><a href="[Link]">Liens</a>
</ul>

Par clic sur (Home page), on a accès au contenu du fichier [Link] via un navigateur.

Indication vers un autre site (référencement)

<a href="[Link] title="">Forums</a>

Liens relatifs (suite)


◮ Si mes pages sont dans le dossier page1.
◮ <a href=”[Link]”>signifie qu’on va chercher le fichier t dans page1.
◮ Si page1 contient un dossier truc contenant le fichier [Link], pour y accèder : :
<a href=”truc/[Link]”>

22
◮ Si [Link] est contenu dans un dossier contenant page1, on tape <a href=”../[Link]”>

Liens absolus
◮ Il faut connaître l’adresse complète de la page cible.
◮ Pour les pages extérieurs à votre notre site.
◮ url : adresse du site, dossier et sous-dossiers.

Les images

◮ Plusieursformats. Oubliez bmp, pr ´ef ´erez jpg, jpeg, png, gif.


◮ Balise img >.
<

<img src=”mon image” alt=”descriptif” />

2 attributs obligatoires :
◮ src la source de l’image (extension comprise) en chemin
absolu ou relatif.
◮ alt le texte alternatif `a l’image en cas de non affichage. Il
est de taille limit ´ee et peut ˆetre vide : ””

On peut mettre une info bulle avec l’attribut title.


◮ <img scr=”mon image” alt=”descriptif” title=”info bulle” / >

images liens (ancrage)

◮ On peut faire d’une image un lien.


◮ Il suffit d’imbriquer la balise <a >et la balise <img/ >
◮ <a href=”mon lien”><img src=”mon image” alt=”descriptif”
title=”info bulle” /></a >

Caractères spéciaux

◮é : &eacute ;
◮É : &Eacute ;
◮ è : &egrave ;

23
◮È : &Egrave ;
◮à : &agrave ;
◮ À : &Agrave ;
◮ ê : &ecirc ;
◮ ë: &euml ;
◮ ç : &ccedil ;
◮ > : &lt ;
◮ > : &gt ;
◮ & : &amp ;
◮ ” : &quot ;

Indice, exposant

◮ <sub en indice </sub >


>

◮ <sup en exposant </sup >


>

<html>
<body>
<p> 1 <sup>&egrave;re </sup>mol&egrave;cule : H <sub>2</sub>O</P>
</body>
</html>

l ère molècule : H 2O

Basiques : in-line (em), les block (div)


Les in-ligne restent dans le texte et s’appliquent en général sur un seul élément.
Les block vont au-delà pour prendre en compte plusieurs éléments (balises).

Les caractéristiques d'un élément de type block :

 Les éléments de type block peuvent contenir à la fois d'autres éléments de type block, des éléments
de type inline ou du texte1.
 Il est possible de fixer une largeur et une hauteur à ces éléments
 Par défaut, la largeur d'un élément de type block est aussi grande que celle de son conteneur.

 Ils s'empilent naturellement les uns au-dessus des autres, dans l'ordre du flux HTML (Dans un flux de
texte, ils passent à la ligne et forcent le retour à la ligne des éléments qui les suivent, les caractères
invisibles présents avant et après sont ignorés)

Les caractéristiques d'un élément de type inline :

 Les éléments de type inline ne peuvent contenir que d'autres éléments de type inline ou du
texte
 Il n'est pas possible de définir une largeur et une hauteur explicite pour ces éléments
 Par défaut, leur largeur et leur hauteur dépendent du contenue de l'élément

24
 Ils s'écoulent selon le flux du texte HTML

inline-block, un mélange des deux

Avec cette valeur de la propriété display, vous allez avoir des éléments qui vont se comporter à
la fois comme s'ils étaient de type block et de type inline les caractéristiques de inline-block
sont les suivantes :

 Les éléments de type inline-block peuvent contenir à la fois d'autres éléments de type
block, des éléments de type inline ou du texte.
 Il est possible de fixer une largeur est une hauteur à ces éléments
 Par défaut, leurs largeurs et leurs hauteurs dépendent du contenu de l'élément
 Ils s'écoulent selon le flux du texte HTML

Exemple de in-line

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[Link]


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.inline, .inline-block {
width:100px;
height:100px;
border:1px solid #000;
background:red;
display:inline-block;
}
.inline { display:inline }
</style>
</head>

<body>
<h1>Inline elements</h1>
<div class="inline"> I am an element with a display of inline </div>
<div class="inline"> I am an element with a display of inline</div>
<div class="inline"> I am an element with a display of inline</div>
<div class="inline"> I am an element with a display of inline</div>
<h2>Inline-block elements</h2>
<div class="inline-block"> I am an element with a display of inline-block</div>
<div class="inline-block"> I am an element with a display of inline-block</div>
<div class="inline-block"> I am an element with a display of inline-block</div>
<div class="inline-block"> I am an element with a display of inline-block</div>
</body>
</html>

Tutorial de références de travail, site :


 [Link]
 [Link]

[Link]

Embedding : incrustation

25
Canvas........

26

Vous aimerez peut-être aussi