5385c0217f749 PDF

Langage HTML
DembaSOW
Doctorant en Cryptologie
LACGAA / DMI / FST / UCAD
Demba SOW / Doctorant en Cryptologie 1

Plan du cours
Les langages de programmation
Introduction au langage HTML
Les concepts fondamentaux du langage
Hébergement d’un site web (projet)

Les langages de programma

Les langages de programmat
Motivation
Langages interprétés
Les langages compilés
Le langage HTML

Motivation
Pourêtrecomprisparunordinateur,unalgorithme
doitêtretraduitdansunlangagespécifique,
qu’on
appellelangagedeprogrammation.Onobtient
cequ’onappelleunprogrammeinformatiquequi
contientl’ensembledesactionsconsécutives
que
l’ordinateurdoitexécuter.Cesactionssontappelé
instructions.
Lelangageutiliséparleprocesseurdel’ordinateur
est appelélangagemachine. Unprogrammeen
langagemachineestuniquementconstituéd’une
suitede0etde1(dubinaire).
Motivation
Il est difficile de comprendreet d’écriredes
programmesenlangagemachine.
Ainsiil estpluspratiquederéaliserunprogramme
dansunlangagepluscompréhensibleparl’homme
etdeletraduireensuiteenlangagemachineàl’aide
d’unprogrammespécialisé. Selonlaméthodede
traduction,ondistingueleslangagesinterprétés
compilés.

Langages interprétés
Unprogrammeécritdansunlangageinterprétéabesoin,
pour chaqueexécution,d’unprogrammeannexeappelé
interpréteurqui
valirelecodesourcepourtraduireetfaire
exécuteruneàune,chacunedesinterpréteurs.Danscecas
n’yapasdegénérationdeprogrammeexécutable.
Exemple:Perl,Lisp,Prolog…..

Les langages compilés
Danslecasd’unprogrammecompilé, leprogrammeréalisé,
appeléprogrammesource, esttraduitcomplètementparce
qu’onappelleuncompilateuravantdepouvoirêtreexécuté
Lacompilationgénèreunprogrammeditexécutable. Ce
programmegénèreunprogramme, c'est-à-direqu’il
n’apas
besoind’unautreprogrammepours’exécuter.Maisàchaqu
modificationdufichiersource(leprogrammesource)ilfaud
lerecompilerpourquelesmodificationsprennenteffet.
Exemple:
C,Pascal…….

Le langage HTML: Historiqu
La démocratisationdu WorldWideWeb, littéralementla largetoile
d'araignée mondiale,aengendrélanécessitéde développerdes sites
Internetadaptésauxaspirationsdupublicenmatièredevisibilité,d'attrac
et deconvivialitéet enadéquationavecles technologies
Internetdéjà
existantes.
Effectivement,laprésentationd'unepageWebsurlemodèleduDOSnese
certainementguèreappréciée.
C'estpourquoi,
l'organismeW3C(WorldWide
WebConsortium) chargédelastandardisationdestechnologiesduWeb,
a
élaboréunlangagededéveloppement appeléHTML(Hyper TextMarket
Language)fonctionnantsurl'ensembledesplateformesexistantes;Win
Linux,MacOS,etc., maiségalementdes navigateurs(browsers)
comme
NetscapeCommunicator,InternetExplorer,Mozilla,etc.
Depuisl'adoptiondelaquatrièmeversionen1997,HTMLestdevenuunou
dedéveloppementpuissantetincontournable.LaconceptiondespagesW
estdevenued'uneextrêmesimplicitéàconditiondeconnaîtreauminimum
lesbasesdecelangage.
Le langage HTML: Définition
LelangageHTMLpeutêtredéfini
commeunlangagede
programmationcompilélégerquiutilisedesbalisespo
mettreenformeles texteset les imagesavecdes
tableaux,desliens…...
Demême,lelangageHTMLestcapabledegérerlaqua
totalitédesartificesduWebtelsque,évidemmentles
lienshypertextes, les textesformatés,les images,les
vidéosouanimations, lestableaux,lesformulaires,
les
cadres(frames), lesscripts,lescaractèresspéciaux,et
biend'autreschoses.

Introduction au langage HTM

Introduction au langage HTM
Présentation de HTML
Les Outils
Les Balises et Attributs
Le Document HTML minimum

Présentation de HTML
LelangageHTML«HyperTextMarkupLangage»estdé
leWorldWideWebConsortium(W3C)commeunlangag
descriptiondedocument. Il permetdeconcevoirdespages
internetetd’établirdesliensentreellesafinderéaliserun
siteinternetcomplet.
HTMLestlelangagedebalisagehypertexteutilisédansle
Web(HyperTextMarkupLanguage).Cen'estpasunlan
deprogrammationproprementdit.Cesont"simplement"d
balisespour mettreenforme(avecdesliens,entableau,
etc...)dutexteetdesimages.

Les Outils
DenombreuxlogicielsdedéveloppementHTMLsontappa
surlemarchépermettantparfoisdeconcevoirunsiteWeb
completsansunemaîtriseparfaitedulangageHTML.
Bienqu'undocumentHTMLpeut-êtrerédigédansn'impor
lequel des éditeursde texte commeNotepadpuis de
renommerlefichier *.txten*.htmou*.htmlquandvous
serezaguerrisilestconseilléd'utiliserunlogiciel
dédiéàcet
emploiafindeprofiterdesfonctionnalitésetdesassistants
quelaplupartoffre.

Les Outils
Voici quelques uns des éditeurs HTML:
WebExpertest priséparlesprofessionnelsetconstituelemeilleur
rapportqualité/prix.
Frontpagesedestineàunlargepublicet demeureconvivialeet
simple.
HotMetalProestreconnucommelemeilleurmaiségalementlepl
onéreux.
HotDogdédiéàlafois auxwebmasterschevronnés
commeaux
novicesdudéveloppementweb.
DreamWeaversedistinguedanslacréationdepagedynamique.

Les Outils
EnbrefpourcréerunepageWebenHTML,vousavezbesoind
UnéditeurHTML (NotepadouWordPadferatrèsbienl'affairepar
exemple),pourcréervotrepageHTML;
Unnavigateur(InternetExplorer,Netscape,Mozilla,etc...),pourvis
lerésultat;
NB:vousn'aurezpasbesoind'êtreconnectéàInternetpourc
votresite.

Les Balises et Attributs
Définitions
Présentation des balises usuelles
Balises simples
Les balises de mise en forme

Définitions
Les balisessont des instructions HTML. Elles sont reconnaissables
particulière.
En effet, chacune est encadrée par les signes

inférieur à (" <")
supérieur à (" > ").
<Instruction HTML>
De plus, les balises permettent l'ouverture et la fermeture d'une

HTMLins
Une barre oblique, le slash(" /") en l'occurrence, différencie les deu

balises.
La balise <...>marque le début de l'instruction.

La balise </...>marque la fin de l'instruction.
<Instruction HTML>... Diverses éléments HTML ...</Instruction HTML>
Exemple1:
<b>mon texte en gras (bold) </b>.
Exemple2:
<br> est, par exemple, la balise utilisée pour spécifier qu'il faut passe

Définitions
Lenomdelabalise(contenuentrelescrochets)n'estpassensibleàlacass
peutêtreécritindifféremmentenmajuscule,enminusculeouenunmé
desdeux.
L'attributd'unebalisepeut êtredéfini commeunevariablequiexisteà

l’intérieurdalabalise.
Ilsemetsouslaformesuivante:nom_attribut="valeur"
Exemple:
Labaliseutiliséepourfaireunlien,apournom"a",etpour
nomd'attribut"href"
Ainsi,<ahref="http://www.google.fr">Google</a>permetdefaireun
pageprincipaledusitedeGoogle.
Danscecas,lavaleurdel'attribut"href"estdonc"http://www.google.fr".

Présentation des balises usuelle
Ouvrirunéditeur detextepuis saisissezle programme
suivant:
<html>
<head>
<title>Mon titre</title>
</head>
<body>
Voici mon premier document!
</body>
</html>
Sauvegardezledocumentaveccommeextension".htm"o
".html",et commetype"texteseulement";puisdouble-
cliquezsurledocument:votrenavigateur
par défautsera
alorsouvertsurlapage.
Explications des nouvelles balises utilisées:
Lesbalises<html>et</html>:informentvotrenavigateurqu'il
s'agitd'unepage
HTML;lapremièrebalisedoitdoncêtrelapremièredevotrecode,etlasecond
doitêtreladernière.
Lesbalises<head>et</head>:informentvotrenavigateurqu'ils'agitdel'e
devotrepage;cetteen-têtedevotrepagecomprendpourl'instantletitredevo
page;labalise<head>esttoujoursplacéejusteaprèslabalise<html>.
Lesbalises<title>et</title>:
informentvotrenavigateurqu'il
s'agitdutitrede
votrepage;cetitreseraplacédanslabarretoutau-dessusdevotrenavigateur
balisesdoiventsesitueràl'intérieurdelabalise"head",c'est-à-direentre<h
et</head>.
Lesbalises<body>et</body>:informentvotrenavigateurqu'ils'agitduco
votredocument;c'estlàquevousallezplacertextes,images,ettoutceque
contiendravotrepage;labalise<body>doitsesitueraprèslabalisedeferme
del'en-tête</head>.
Remarque :
On peut donc faire une première constatation
lecoded'unepagewebestcomposédedeuxparties,
l'en-
têtedelapage(HEAD)etlecorps(BODY);
etseullecorpsdelapageestaffichéàl'l'écran:dansvotre
premièrepage, il n'yaquelaphrase "Voicimonpremierdocumen
quis'estaffichée.

Balises simples
<br>: passage à la ligne. Cette balise n’a pas de balise de ferme
<b>: mettre un texte en gras(bold);
<i>: mettre un texte en italique;
<u>: soulignerun texte (underline);
<center>: centrerun texte; etc...
Exemple:
Saisissez cette phrase dans votre texte puis exécutez le programme:
<center> <b><u>Mon texte </u></b><br> Et la suite... </center
Les commentaires:
<! --ceci est un commentaire dans mon fichier HTML -->


La balise de couleur
La balise de taille
Les listes
Quelques balises d’animation

<font color="red"> Mon texte </font>

Cette balise nous affiche une phrase « Montexte» en
rouge.
D’autres couleurs sont disponibles mais l’écriture se fa

anglais.
Exemple:
<font color=" yellow"> Mon texte </font>

<body bgcolor="red"> Mon texte </body>

L’attributdecettebalisebodynous afficheunepageen
couleurrouge
D’autres couleurs sont disponibles mais l’écriture se fa

anglais.
Exemple:
<body bgcolor=" yellow"> Mon texte </body>

La balise de taille
Taille absolue (de 1 à 7):
<font size=1>Montexte</font>
<font size=2>Mon texte</font>
<font size=6>Mon texte</font>
Taille relative:
<font size=-2>Mon texte</font>
<font size=-1>Montexte</font>
<font size=+1>Montexte</font>
<font size=+2>Montexte</font>

La balise de taille
<H1>Montexte</H1>
<H2>Montexte</H2>
<H3>Montexte</H3>
<H4>Montexte</H4>
<H5>Montexte</H5>
<H6>Montexte</H6>
Les listes
Saisissez ce petit programme dans un éditeur de texte puis le
<UL>
<LI> Ligne 1
<LI> Ligne 2
<OL>
<LI> Sous-Ligne 2.1
<LI> Sous-Ligne 2.2
</OL>
</UL>

Les listes
Explication
<OL>correspondauxlistesnumérotées(OrderedList);
<UL>correspondauxlistesàpuces(UnorderedList);
<LI>sertàspécifierqu'ondémarreunnouvelélémentdeliste;
NB:ànoterque</LI>existeégalement,maisn'estpasnécessa
car supposéfermeràl'ouverturedu<LI>suivant,ouàla
fermeturedeliste(</OL>ou</UL>).

Les listes
Les attributs des listes:

a<oltype="a">
b<oltype="a">
i <olstyle="list-style-type: lower-roman">
ii <olstyle="list-style-type: lower-roman">
I <olstyle="list-style-type: upper-roman">
II <olstyle="list-style-type: upper-roman">
a<olstyle="list-style-type: lower-alpha">
b<olstyle="list-style-type: lower-alpha">
A<olstyle="list-style-type: upper-alpha">
B<olstyle="list-style-type: upper-alpha">

Les listes
Les attributs des listes:
<ultype="disc">
<ultype="disc">
<ultype="circle">
<ultype="circle">
<ultype="square">
<ultype="square">

Quelques balises d’animation
<marquee>instructions</marquee>
Cette balise nous permet de défilerles instructions sa
clavier.
 Exemple: <marquee bgcolor="yellow" width="40%" directio
loop="0"> Bonjour Monde </marquee>
<blink>instructions</blink>
Cette balise nous permet de clignoterles instructions
au clavier.

Quelques attributs des balises
Attributs Valeurs Description
Href URL Indique l'adresse URL d'une ressource exte
Target _blank
_self Indique le cadre cible pour afficher le docu
_top
_parent
bgcolor -RED Donne une couleur au fond du document H
-YELLOw….
name nom Indique le nom du document
type -button Indique le type de bouton choisi

-text
-submit…


backgroundAdressede Permet l’affichage d’une image en arrière
l’image
bgproperties
-fixed Empêche l’image précitée de défiler avec l
contenu du document
onload Nomde la Ouvre une fonction JavaScript à l’affichage
fonction page
ounload Nomde la Ouvre une fonction JavaScriptà la sortie de
fonction page
align -left Définit l’alignement de la ligne
-right
-center…


width valeur Spécifie une largeur de la ligne
color couleur Applique une couleur à la ligne
size valeur en pixel
Donne l’épaisseur de la ligne

Le Document HTML minimum
Exercice:
«Bonjour et bienvenue»(défiler et mettre en gras cette
Table des matières(clignoter et centrer cette instru
I. CHAPITRE 1:Généralités
A. Historique
B. Présentation
II.CHAPITRE 2:Leslangages
1. Introduction
2. Objectifs
₀ Démarche
₀ Méthodologie
Ecrire un programme HTMLqui nous permet d’afficher la page

dessus en couleur jaune.

Les concepts fondamentaux
langage HTML

Les concepts fondamentaux du
langage HTML
Les liens
Les tableaux
Les formulaires
Les frames
Les liens
Les chemins d’accès
Définition et intérêts des liens
Types de liens

Les liens
Les chemins d’accès
Les chemins d'accès peuvent être:
absolus:c'est-à-dire qu'on spécifie l'adresse com

ce à quoi on fait référence.
Exemple: C:\Images\mon_image.gif pour une image ou http://w

pour un site.
relatifs:la référence est faite par rapport à l'end

l'on se trouve.
Exemple:
.\mon_image.gif ou .\maPage.html désignant des fichiers
le même répertoire que le fichier qui y fait référence.

Les liens
Définition et intérêts des liens
Leslienssontdespanneauxd’indicateursqui
nouspermettent
deparcourirdespageswebliés.
Enconséquence,lesliensprennentuneplaceprépondérante
essentielledanslefonctionnementglobalduWorldWideW
Lesliensassurent,donc,lafonctiondeguiderl'internautedan
ses navigations
et delui donnerles moyensdemener ses
investigationsenallantrecueillir
desinformationsautravers
d'unemultitudedepagesoudesites.Celademeureleprincipe
fondamentald'Internet.

Les liens
Types de liens
Il existe plusieurs types de liens:
Les liens hypertextes
Les liens hyper images
Les liens locaux

Les liens
Les liens hypertextes
Les liens hypertextes sont des liens construits sur d
L'utilisateur devra cliquer sur un mot ou un groupe

pour activer un renvoi vers un document cible.
La commande
<ahref="chemin d’accès "> Texte </a>
définit le lien vers une page sur le Web.

Les liens
Les liens hyper imagessont des images qui servent de liens

document cible.
Ces liens fonctionnent exactement de la même manière que l

hypertextes.
La commande suivante définit le lien vers une page sur le We
<ahref="Adresse cible"> <imgsrc="Adresse de l'image">

Les liens
Exemple:
Après avoir créé une page web, saisissez le programme suiv
nous permet d’aller dans la première page à travers un lien
<html>
<head>
<title> Page de liens des images</title>
</head>
<body>
<a href=" chemin d’accès "><imgsrc="Adresse de l
</body>
</html>

Les liens
Objectif des liens hyper images
En effet, les imagesoffrent à l'utilisateurune surface

cliquableplusoumoinslargeselonleursdimensions.
Par conséquent, un découpage en zones distinctes d

élément graphique peut être un atout indéniable.
Imaginonsunutilisateurayantbesoindefabriquerdeslie
parrapportauxrégionsduSénégal,danscetteoptique,ill
suffiraitdetrouveruneimageadéquatepuisdeluiappliqu
des zonesde sensibilitésdifférentesafinde créer une
multitudedelienscliquablesàpartird'uneseuleimage.
Les liens
Les images en coordonnées:
La balise mapentame la définition des zones sensible

l'image.
La balise areapermet de décrire une zone sensible. L

attributs de cette balise sont:
shape="Forme"
coords="Coordonnées"
href="Adresse cible"

Les liens
Les images en coordonnées
Forme Description Coordonnées Exemple

X1, Y1 = Coin supérieur <area shape="rect"
rect Définit une zone gauche coords="X1, Y1,
rectangulaire X2, Y2 = Coin inférieur X2, Y2“
droit href="doc.htm">
Définit une zone X, Y = Centre du cercle <area shape="circle"
circle circulaire coords="X, Y, R"
R = Rayon du cercle href="doc.htm">
X1, Y1 = Premier point du <area
Définit une zone polygone shape="polygon"
polygonale X2, Y2 = Second point du
polygon polygone coords="X1,Y1,X2,Y2
Xn, Yn= Nième point du ,X3,Y3«
polygone href="doc.htm">

Les liens
Les liens locaux
Les liens internes permettent de créer des renvois à l'int
du même document HTML.
Pour faire fonctionner ces liens, il suffit de déclarer une a

dans le document puis de créer le renvoi vers cette ancr
La commande <aname="Nom d'ancre">définit l'ancre

atteindre.
La commande <ahref="#Nom d'Ancre">définit le lien
La commande </a>ferme le lien.

Les liens
Les liens locaux
Exemple:
Saisissez le programme suivant :
<html>
<head>
<title>Un titre pertinent</title>
</head>
<body>
<a name="Debut"></a>
<a href="#bas">Bas de page</a><br>
"copiezun textedanscettepartiedu programme“
<a name="bas"></a>
<a href="#Debut">Revenir</a>
</body>
</html>

Les tableaux
Définition
Les tableauxsont définis avec la balise <table>.

Le tableauest divisé en lignespar la balise <tr>.
Chaque ligneest divisée en cellulespar la balise <td>.
<table>et</table>serventrespectivementàouvrirunenou
table,etfermerlatablecourante;
<tr>et</tr>serventàdéfinirunelignedutableau;
<td>et</td>serventàdéfinirunecelluledutableau(ànoterqu
</TD>n'estpasindispensable,pourlamêmeraisonque</LI>
<th>et</th>serventàdéfiniruntitredeligneoudecolonne(le
texteapparaîtalorscentréengrasdanslacellulecorresponda
<caption>et</caption>serventàdéfiniruntitrepourletable

Les tableaux
Les attributs de la balise <table>
Danscettepartienousallonsénumérerlesattributsdelabalise
tablequisontlesplusutilisés:
L’attribut«border»qui nouspermetdedéfinirlabordure
d’untableau.Cetattributprendcommevaleurlesnombre
entiers(0,1,2,3,...).
L’attribut«bordercolor»nouspermetdedéfinirlacouleu
delaborduredutableau.Cetattributprendcommevaleur
lescouleursenanglais.
L’attribut«bgcolor»nouspermetdedonnerunecouleurd
fonddutableau.

Les tableaux
Exemple:
Saisissez le programme suivant qui nous permet d’affi
tableau:
<html>
<head>
<title>Page tableau</title>
</head>
<body>
"red">
<table border=1 bgcolor=
<caption>Mon tableau</caption>
<tr>
<th>Nom 1</th>
<th>Nom 2</th>
</tr>
<tr>
<td>Cellule 1</td>
<td>Cellule 2 </td>
</tr>
</table>
</body>
</html>

Les formulaires
Définition
LeformulairedansunepageHTML,permetdetransmet
desinformationsfourniesparl'utilisateurversunserveu
Leformulaireauseind'unsiteWebpeutêtreutilisépour
récupérerdesinformationssurl'utilisateurdanslebutde
fairedesstatistiquessurletypedefréquentationoule
tauxdesatisfaction.
Lacommande<form>marqueledébutduformulaire.
.
Lacommande</form>marquelafinduformulaire

Les formulaires
Les attributs de la balise <form>
Labalise<form>possèdedifférents
attributsspécifiantson
nom,uncadrededestinationaprèslasoumissionduformulair
L'attributname="Nomduformulaire"définitunno
pourleformulairecourant.
L'attributtarget="Nomducadre" définitlecadre
destinatairequidoitafficherlesrésultatsduformulaire
L'attributmethod="Typedetransmission"
définitle
typedetransmission.
L'attributaction="Adresse
cible"définit l'adresse
destinatricesurlesite.

Les formulaires
Les types de transmission
Il y a deux méthodes d'accès au serveur http, GETet POST
LaméthodeGETfaitensortequel'informationpasseparla
variableQUERY_STRINGpour interpréterles données.Elle
permetdetransférer unefaible quantitédedonnées au
serveur.
LaméthodePOSTpermetd'envoyerdes informationsplus
importantesau serveuravec une quantitéde données
importantes,etcelaentouteconfidentialité.
Remarque:Dans tous nos programme nous utilisons que de l

POST

Les formulaires
Exemple:
Saisissez le programme suivant qui nous permet d’afficher un
<html>
<head>
<title>Page formulaire</title>
</head>
<body>
<form action=“page1.html” method=“post”>
<center><input type=“submit” value=“Voirla page”></cente
</form>
</body>
</html>
Remarque: Vous devez construire la page1.htmlqui est la valeur d

l’attribut « action».

Les formulaires
Les zone de texte multi-lignes
Les balises<textarea>«instructions
»</textarea>nous
permettentdedéfinirunezonedetexteavecplusieurslign
Lesattributsdelabalise<textarea>lesplusimportantss
L’attribut«rows»définitlenombredelignes.
L’attribut«cols»définitlenombredecolonnes.
Remarque:
La valeur de ces attributs est en pixel.

Les formulaires
Les zone de texte multi-lignes
Exemple:
Changez le programme précédent en mettant une zone de sai
<html>
<head>
</head>
<body>
<formaction=“page1.html” method=“post”>
<center>
<h1>La zone de texte pour saisir</h1><br>
<textarearows=“15” cols=“15”></textarea><br><br><
<input type="submit" value="Voir a page1">
</center>
</form>
</body>
</html>

Les formulaires
Les select
Lesselectdéfinissentunelistedechoixaffichantunesér
d'itemssousformesoitdelistedéroulante,
soitdeliste
simple.
Lacommande<select>définitunelistedechoix.
Lacommande</select>fermelalistedechoix.

Les formulaires
Les select
Quelques attributs de la balise <select>
L'attribut name="Nom du champ" spécifie un nom pour
L'attribut size= " Valeur " définit le type de liste et le nom

d'items.
L'attribut multiplepermet de créer une liste à choix multip
L'attribut tabindex="Nombre"définit la position de la list

l'ordre de tabulation.
L'attribut disabledpermet de rendre la liste inactive.

Les formulaires
Lesselect
Les balises <option> ”choix” </option>
La balise <option> déclare une entrée dans la li
La balise </option> ferme l'entrée précitée.
L’attribut“selected”estun attributde la balise<op

qui nous permetde définirunesélectionpar défaut

Les formulaires
Les select
Exemple: La listedéroulante
Saisissezle programmesuivant:
<html>
<head>
</head>
<body>
<select >
<option selected> Premier item </option>
<option> Second item </option>
<option> Troisième item </option>
<option> Quatrième item</option>
<option> Cinquième item </option>
</select>
</body>
</html>

Les formulaires
Les select
Exemple: La listesimple
Saisissezle programmesuivant:
<html>
<head>
</head>
<body>
<select size=6>
<option selected> Premier item </option>
<option> Second item </option>
<option> Troisième item </option>
<option> Quatrième item</option>
<option> Cinquième item</option>
</select>
</body>
</html>

Les frames
La structure
Les cadres(frames) permettentde fractionnerla surface

d'affichageenplusieurspartiesafind'afficherdifférentespag
HTMLsimultanémentdanslenavigateur.
Cescadresserventnotammentàafficherd'uncôtéuneséried
lienscommeunmenuouunsommaireetdel'autrecôtédes
pagescontenantdesinformationsenrelation.
Lacommande<frameset>marqueledébutdeladéfinitiond
cadres.
Lacommande</frameset>marquelafindeladéfinitiondes
cadres.

Les frames
La création
Les cadres sont créés au sein des balises <framese
Labalise<frame>créeuncadredansledocumentHTM
Cette balise possède deux attributs essentiels,un
spécifiantlapagecibleetl'autredéfinissantunnompour
lecadre.
L'attribut src="Adresse du contenu" définit le contenu d
L'attribut name="Nom du cadre" permet de nommer le

Les frames
Quelques attributs de<frameset>
L'attribut cols="Largeur1,Largeur2"définit une la

pour les cadres.
L'attribut rows="Hauteur1,Hauteur2"définit une

pour les cadres.
Remarque:
Les valeursde cesattributssonten pourcentage.
Lorsqu’onutiliseles frameset, on n’utilisepas la balise<b

Les frames
Exemple:
<html>
<head>
<title>Un titrepertinent</title>
</head>
<frameset cols="20%,80%">
<frame>
</frameset>
</html>

Hébergement d’un site w

Hébergement d’un site web
Projet

Fin du cours

5385c0217f749 PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

5385c0217f749 PDF

Transféré par

Droits d'auteur :

Formats disponibles

Langage HTML

Demba SOW / Doctorant en Cryptologie 1

Introduction au langage HTML

Les concepts fondamentaux du langage

Hébergement d’un site web (projet)

Demba SOW / Doctorant en Cryptologie 2

Demba SOW / Doctorant en Cryptologie 3

Les langages compilés

Demba SOW / Doctorant en Cryptologie 4

Demba SOW / Doctorant en Cryptologie 6

Demba SOW / Doctorant en Cryptologie 7

Demba SOW / Doctorant en Cryptologie 8

Demba SOW / Doctorant en Cryptologie 10

Demba SOW / Doctorant en Cryptologie 11

Les Balises et Attributs

Le Document HTML minimum

Demba SOW / Doctorant en Cryptologie 12

Demba SOW / Doctorant en Cryptologie 13

Demba SOW / Doctorant en Cryptologie 14

Demba SOW / Doctorant en Cryptologie 15

Demba SOW / Doctorant en Cryptologie 16

Présentation des balises usuelles

Les balises de mise en forme

Demba SOW / Doctorant en Cryptologie 17

En effet, chacune est encadrée par les signes

De plus, les balises permettent l'ouverture et la fermeture d'une

Une barre oblique, le slash(" /") en l'occurrence, différencie les deu

La balise <...>marque le début de l'instruction.

Demba SOW / Doctorant en Cryptologie 18

L'attributd'unebalisepeut êtredéfini commeunevariablequiexisteà

Demba SOW / Doctorant en Cryptologie 19

On peut donc faire une première constatation

Demba SOW / Doctorant en Cryptologie 22

<b>: mettre un texte en gras(bold);

<i>: mettre un texte en italique;

<u>: soulignerun texte (underline);

<center>: centrerun texte; etc...

Demba SOW / Doctorant en Cryptologie 23

Quelques balises d’animation

Demba SOW / Doctorant en Cryptologie 24

<font color="red"> Mon texte </font>

D’autres couleurs sont disponibles mais l’écriture se fa

Demba SOW / Doctorant en Cryptologie 25

<body bgcolor="red"> Mon texte </body>

D’autres couleurs sont disponibles mais l’écriture se fa

Demba SOW / Doctorant en Cryptologie 26

Demba SOW / Doctorant en Cryptologie 27

Demba SOW / Doctorant en Cryptologie 29

Demba SOW / Doctorant en Cryptologie 30

Les attributs des listes:

Demba SOW / Doctorant en Cryptologie 31

Demba SOW / Doctorant en Cryptologie 32

Demba SOW / Doctorant en Cryptologie 33

Href URL Indique l'adresse URL d'une ressource exte

type -button Indique le type de bouton choisi

Demba SOW / Doctorant en Cryptologie 34

Attributs Valeurs Description

Demba SOW / Doctorant en Cryptologie 35

Attributs Valeurs Description

Demba SOW / Doctorant en Cryptologie 36

Ecrire un programme HTMLqui nous permet d’afficher la page

Demba SOW / Doctorant en Cryptologie 37

Demba SOW / Doctorant en Cryptologie 38