[PDF] Introduction à HTML 5 ressource de formation approfondie | Cours INFORMATIQUE

(1)

Support de cours 1 : Langage HTML Racine Marrakech

(I) - Introduction

(2)

HTML (H

yper

T

ext

M

arkup

L

angage

)

Langage qui permet la création de document hypertextes sur le réseau Internet.

 Développé au CERN (Centre d’Etude et de Recherche

Nucléaire) en 1989 par Tim Bernes Lee.

 Implémentation relativement simple de SGML (Standard Generalized Markup Langage)

 Code Source du document hypertexte : ➣ écrit sous un Editeur quelconque

➣ sauvegardé avec une extension .htm ou .html ➣ interprété par un Browser

(3)

Modèle Client-Serveur

 Le Client ou Browser :

 Logiciel de consultation et d’éxécution du code html  Dialogue avec le serveur selon un Protocole

spécifique : (HTTP Hyper Text Transfert Protocol)  Nestcape - Internet Explorer

 Le Serveur :

 Valider les requêtes du client  Autoriser l’accès à un client

 Exécuter les liens et programmes

(4)

URL ( U

niform

R

essource

L

ocator

)

Adresse d’un document composée de :

 Protocole d’échange Serveur/Client (HTTP)  Adresse Internet du serveur :

➣ adresse TCP/IP de la machine

(Transmission Control Protocol / Internet Protocol)

➣ nom de la machine avec un lien adresse-nom : annuaire DNS (Domain Name server)

 l’arborescence des répertoires (chemin au document)  le nom du document

et complétée éventuellement par :  le port

 des informations d’authentification (username et password)

(5)

 des arguments passés à un programme pour les liens éxécutables

(6)

Environnement de Travail

Document source (.htm ou .html)

Editer / Modifier / Sauver Lire / Interpréter / Exécuter

Editeur de texte Browser

(7)

(II) - Le langage HTML

(8)

Les balises

HTML est un langage balisé :

chaque zone de texte est délimité par des balises encadrées par les signes "

<

" et "

>

".

texte courant <BALISE > texte affecté par la balise </BALISE> texte courant

Balise ouvrante

Balise fermante

(9)

Remarque : <BALISE> texte affecté par la balise  balise Vide

(10)

Les Attributs de balise

Chaque balise peut posséder un ou plusieurs attributs pouvant prendre une valeur numérique ou alphanumérique.

attribut = valeur numérique attribut = " valeur alphanumérique "

Syntaxe complète d’une balise :

<BALISE attribut=… attribut= " … " … > ... </BALISE>

(11)

Les accents et Symboles

Codage du code HTML : code ASCII sur 7 bits  accents et symboles non représentés. Les accents :

Les symboles : < représenté par

\<

et > par

\>

é è ê à â ù ô ç

(12)

Structure d’un document

<HTML> <HEAD> </HEAD> <BODY> En-tête Corps du document </BODY> </HTML>

(13)

L’entête d’un document

<HEAD> Meta informa1ons

<META NAME= "author" CONTENT="nom">

<META NAME= "keywords" CONTENT="mots clés">

<META NAME="classification" CONTENT="catégorie">

Titre du document

<TITLE> Titre du document </TITLE> </HEAD>

(14)

Adresse et Commentaires

Adresse :

<ADDRESS> adresse, téléphone, e-mail de l’auteur </ADDRESS>

Commentaires :

(15)

Les attributs de la balise

<BODY>

 Fond d’ écran :

Couleur : BGCOLOR="#RGB"

Image : BACKGROUND="fichier image"  Couleur du texte : TEXT="#RGB"

 Liens :

Liens non-visités : LINK="#RGB" Liens visités : VLINK="#RGB" Liens actifs : ALINK="#RGB"

(16)

Quelques Styles

 T exte en gras : <B> … </B>  T exte en italique : <I> … </I>  T exte souligné : <U> … </U>

(17)

Les Styles de caractère

 Balise prinicipale : <FONT> ... </FONT>

Attributs :

 Taille : SIZE=n SIZE=

±

n

 Couleur : COLOR="#RGB"  Police : FACE="nom police"

(18)

Les Divisions 1/2

HTML dispose de 6 divisions de paragraphes

sans numérotation automatique. <Hn> . . . </Hn>

Avec n=1 (gros caractères), … , n=6 (petits caractères)

<BR> : force le passage à la ligne

<P> : passage au paragraphe suivant

(19)

 Ligne horizontale : <HR> Attributs :

SIZE= valeur (épaisseur en pixel)

WIDTH=valeur (longueur en pixel) ou % (largeur fenêtre) ALIGN= LEFT ou RIGHT ou CENTER

NOSHADE : supprime le relief

(20)

Les Mises en Page

 Texte centré : <CENTER> … </CENTER>

 Multi colonnes : <MULTICOL> … </MULTICOL> Attributs :

COLS= valeur (nbre de colonnes)

WIDTH=valeur (largeur en pixel colonne)

(21)

Les Listes Descriptives

<DL> <DT> Mot <DD> Descrip1on du mot </DL>

avec l’attribut COMPACT de la balise <DL> :

(22)

Les Listes Régulières

Non-Ordonées

<UL>

<LI> Elément de la liste

</UL>

Attribut de puce : avec valeur =

affecté aux balises <UL> et <LI>

DISC TYPE=valeur

(23)

Les Listes Régulières

Ordonées

<OL>

<LI> Elément de la liste

</OL>

Attributs :

(24)

<DT> Les Fractals :

<DD> Un fractal est un objet de représentation dont la dimension n'est pas entière et dont chaque fraction prise sur le contour de la représentation générale est elle-même une représentation de la forme

générale. <DT> Dimension fractale :

<DD> La dimension fractale d'un objet fractal est le rapport du logarithme du nombre d'itération du processus de construction par le logarithme du rapport d'homothétie utilisé.

<DT> Modèles fractals :

<DD> les poussières de Cantor, les courbes de Von Koch, les triangles de Sierpinski, les

mosaïques de carrés ou cubes, les courbes de Hilbert, les ensembles de Julia, les configurations cristalines ou encore les arborescences de type fougère.

Listes Descriptives

Exemple

(25)

<UL>

<LI> Fractals de dimension comprise entre 0 et 1 <UL>

Listes Non-Numérotées

Exemple

<LI> Les poussières de Cantor <LI> Certaines structures cristalines </UL>

<LI> Fractals de dimension comprise entre 1 et 2 <UL>

<LI> Les triangles de Sierpinski <LI> les courbes de Von Koch

<UL>

<LI> La côte de Bretagne <LI> Le Flocon de neige </UL>

<LI> Les mosaïques de carrés </UL>

(26)

<OL TYPE="A"> <LI> Les courbes

<OL TYPE="a"> <LI> Hilbert

<LI> Les carrés

Listes Numérotées

Exemple

<LI> Von Koch

<LI> Les cubes

<LI> Les Flocons de neige <OL TYPE="i">

<LI> Les cristallins <LI> Les boules </OL>

<LI> Les triangles </OL>

<LI> Sierpinski

<OL TYPE="I"> <LI> Les triangles

<LI> Les polygônes </OL>

</OL> <LI> Les modèles naturels

<LI> La côte de Bretagne <LI> Les fougères </OL>

(27)

Les Tableaux

 Balise principale : <TABLE> ... </TABLE>

 Attributs :

(épaisseur en pixel du cadre extérieur) (espacement en pixel inter-cellule) (espacement en pixel texte-cellule) (occupation tableau-largeur_fenêtre) (occupation

tableau-hauteur_fenêtre) BORDER=n CELLSPACING=n CELLPADING=n WIDTH=% HEIGHT=%

(28)

Les Lignes d

’un tableau

 Lignes : <TR> ... </TR>

 Attributs :

ALIGN=codeH (alignement Horizontal) VALIGN=codeV (alignement Vertical)

avec codeV = TOP MIDDLE BOTTOM

(29)

Les Cellules d’un tableau

 Cellules : <TD>  Attributs :

(alignement Horizontal) (alignement Vertical)

(cellule de largeur n fois largeur de base) (cellule de hauteur n fois hauteur de base) (contenu de la cellule sur une seule ligne)

ALIGN=codeH VALIGN=codeV COLSPAN=n ROWSPAN=n NOWRAP

(30)

Compléments sur les tableaux

 Attribut de couleur : BGCOLOR=“Couleur"  <TABLE> <TR> <TD>

 T exte d’ en-tête : <TH> (idem <TD> mais centré et gras)

 Titre : <CAPTION> … </CAPTION> (titre du tableau) Attributs :

(31)

Tableaux

Exemple

<TABLE BORDER=8 BGCOLOR=00ﬀﬀ> <TR VALIGN=MIDDLE ALIGN=CENTER > <TH> Colonne1 </TH> <TH> Colonne2 </TH> <TH> Colonne3 </TH> </TR> <TR VALIGN=MIDDLE ALIGN=CENTER > <TD BGCOLOR=F2FA23> 1.5 </TD> <TD> 2 </TD> <TD ROWSPAN=2> <IMG SRC="tweety.gif"> </TD> </TR> <TR VALIGN=MIDDLE ALIGN=CENTER > <TD> 15 </TD> <TD> 18 </TD>

(32)

</TR> <TR VALIGN=MIDDLE ALIGN=CENTER > <TD COLSPAN=2> 46 </TD> <TD BGCOLOR=F2FA23> 1452 </TD> </TR> </TABLE >

(33)

Les Liens Externes

 Notion d’ Ancres :

<A HREF=ancre de d’ arrivée > ancre de départ </A>  Structure :

<A HREF= "URL du document destination"> zone cliquable </A>

 L ’ attribut de cible : TARGET

(34)

Les Liens Internes

 Ancre de départ :

<A HREF="#étiquette"> zone cliquable </A>

 Ancre de d’ arrivée :

<A NAME="étiquette"> zone non-cliquable </A>



Aller/Retour : Ancre de départ

<A HREF="#étiq_départ" NAME="étiq_retour"> zone départ </A>

Ancre d’arrivée

(35)

Les Images 1/2

 Inclusion d’ images :

<IMG SRC="document image">

 Attribut d’ alignement V ertical :

ALIGN=TOP ou MIDDLE ou BOTTOM

… Texte ...

(36)

Les Images 2/2

 Attribut d’ alignement Horizontal :

ALIGN=LEFT ou CENTER ou RIGHT

 Attribut d’ espacement : HSPACE=n et VSPACE=n

 Attribut de dimension : WIDTH=n et HEIGHT=n

VSPACE

HSPACE

(avec n valeur en pixels)

(37)

Les Images Cliquables 1/2

 Image Cliquable :

<IMG SRC="document image" USEMAP="#nom">

 Découpage de l’ image :

<MAP NAME="nom"> description des zones cliquables </MAP>

 Zones Cliquables :

(38)

Les Images Cliquables 2/2

 Système de Coordonnées: exprimées en pixels X (0,0) (width,0) Y  Formes: (0,height) (width,height)

(39)

Image Cliquable - Exemple

</MAP>

URL 3

URL

(40)

Notions de Chemins

C:\ 3 types d ’accès à une information

esm02

chemin absolu C:\esm02\classe1\dupont

Classe4 ... classe1 \Sources\Intro.html

durand ...

dupont

chemin relatif

..\Pics\Photo.jpg

Htjava Sources Pics

Page.html

Intro.html

Photo.jpg

Fichiers hiérarchisés dans une arborescence

accès direct

(41)

Les Frames - Structure

<HTML> <HEAD> </HEAD> <FRAMESET> <FRAMESET> ... </FRAMESET> <FRAME> <NOFRAMES> </FRAMESET> </HTML>

(42)

Les Frames - Création

 Ouverture: <FRAMESET> … </FRAMESET>

 Attribut de découpage Horizontal : ROWS="haut_zone1,..."

 Attribut de découpage V ertical : COLS="larg_zone1,..."

 Valeurs des paramètres larg_zone et haut_zone : n : taille en pixel

n% : taille en % de la taille de la zone mère * : taille disponible

(43)

Les Frames - Caractérisation

 Balise principale: <FRAME>  Attributs

URL : SRC="URL"

Nom : NAME="nom_zone"

Marges horizontale et verticale exprimées en pixel :

MARGINWIDTH="n" MARGINHEIGHT="n"

Défilement : SCROLLING="yes , no , auto"

(44)

Les Frames et les Liens

 Structure :

<A HREF= "URL" TARGET= "nom_frame" > zone cliquable </A>

 Autres valeurs pour l’attribut TARGET : : nouvelle fenêtre sans nom

: même frame

: surface totale du browser : frame mère

_blank _self _top

(45)

Listes à Ascenseurs (scrolled-lists)

<SELECT NAME="variable" SIZE =nbre_lignes MULTIPLE>

<OPTION VALUE="valeur1"> descript1

<OPTION VALUE="valeur2" SELECTED> descript2

… … </SELECT>

Nom de la variable

(46)

Exemple : Rendu :

<SELECT NAME=“liste_scrol” SIZE=3 MULTIPLE> <OPTION VALUE=“valeur1” SELECTED> descript1 <OPTION VALUE=“valeur2”> descript2

<OPTION VALUE=“valeur3”> descript3 <OPTION VALUE=“valeur4”> descript4 <OPTION VALUE=“valeur5”> descript5 </SELECT>