Devweb2021 PDF

Développement Web
Bassem BSIR
LATICE laboratory Research Departement of Computer Science, Tunisia
University ISITCom Institut Supérieur d'Informatique et des Techniques de
Communication
Adresse: Rue: G.P.1 Hammam Sousse-4011
Mobile phone: 216 28 18 36 84
1
Email: bsir.bassem@yahoo.fr
1. Introduction et normalisation
• Le HTML (HyperText Markup Language, langage de balisage) est le langage
universel utilisé pour communiquer sur le Web. Le balisage HTML est incorporé
dans le texte du document et est interprété par un navigateur Web. Votre
information sera ainsi transportée sur cette gigantesque toile de réseaux
interconnectés qu'est Internet.
• Ce logiciel, que l'on appelle un browser, vous permet de surfer sur le Net et
d'afficher sur votre écran les "pages" qu'il a interceptées. Il y a, hélas, beaucoup
de marques et de types de browsers différents. En fait, chaque browser a sa
propre façon de fonctionner. Une page HTML est en général destinée à être
publiée sur le World Wide Web, où tous les gens utilisent toutes sortes de
navigateurs qui fonctionnent sous différentes plateformes (Mac OS, ipad, Linux,
Androïd, MS Windows, etc. pour citer les plus courants). Pour que cela
fonctionne, il a été nécessaire de définir un standard pour le langage HTML.
2
→ Html est un langage universel qui s'adapte à toutes les plateformes que ce soit
Windows, Macintoch, Unix, OS/2...
• La formulation du langage HTML est fort simple, en effet des balises
permettent d'appliquer différents formatages. Elles sont délimitées par les
deux symboles "supérieur à " et "inférieur à". Dans le cas des balises en
paires, chaque balise ouverte doit être fermée.
• Finalement, ce langage a abouti à une nouvelle version : le HTML5. Cette
version possède des ajouts pour les médias (audio, vidéo, application
interactives avec CSS3/JavaScript).
• Un document HTML5 est avant tout un document texte, qui contient une
certaine syntaxe afin de mettre en forme ou de décrire ce document. Son nom
de fichier a généralement le suffixe .html ou encore le suffixe .htm
3
• HTML(HyperText Markup Language)
▪ Il a fait son apparition dès 1991 lors du lancement du Web.
▪ Son rôle est de gérer et organiser le contenu
▪ C’est donc en HTML qu’on écrit ce qui doit être affiché sur
une page web: du texte, des liens, des images,…
• CSS(Cascading Style Sheets ) aussi appelées feuilles de style
▪ Son rôle est de gérer l ’apparence de la page web
(positionnement, décoration, couleur, taille du texte,…)
▪ Ce langage est venu compléter le HTML en 1996.
4
HTML
HTML+CSS
5
2. Structure d’un document html minimum
<HTML> Ceci est le début d'un document de type HTML.
</HTML> Ceci est la fin d'un document de type HTML.
Ceci est le début de la zone d'en-tête (prologue au document proprement

<HEAD>
dit contenant des informations destinées au browser).
</HEAD> Ceci est la fin de la zone d'en-tête.

<TITLE> Ceci est le début du titre de la page.
</TITLE> Ceci est la fin du titre de la page.
<BODY> Ceci est le début du document proprement dit.
</ BODY> Ceci est la fin du document proprement dit.
6
Les éditeurs HTML
• Notepad ++
• Sublime Text
• Visual studio code
• BlueGriffon
• Jsbin 7
• A chaque balise de début d'une action, soit <...>, correspond (en toute logique)
une balise de fin d'une action </...>.
• Les balises ne sont pas "case sensitive". Il est donc équivalent d'écrire <HTML>,
<html>, <Html>, etc.
• https://www.w3schools.com/html/
. <B>..</B>
3. Le texte
Gras [Bold] Début et fin de zone en gras
<STRONG>...</STRONG>
<I>...</I>
Italique [Italic] Début et fin de zone en italique
<EM>...</EM>
Début et fin de zone avec cette
Taille de caractère [Font size] <FONT SIZE=?>...</FONT>
taille
Couleur de <FONT COLOR="#$$$$$$">
[Font color] Début et fin de zone en couleur
caractère </FONT>
A la ligne [Line break] <BR> Aller à la ligne
Commentaires [Comments]  Ne pas afficher

8
Centrage [Center] <CENTER></CENTER> Centrer
Exemple 1 :
9
4. Codes de quelques couleurs basiques
Bleu #0000FF Vert #00FF00
Blanc #FFFFFF Violet #8000FF
Rouge #FF0000 Jaune #FFFF00
Gris clair #C0C0C0 Noir #000000
5. Alignement …
• Pour aligner du texte, on a utilisé l'attribut ALIGN ou le tag <CENTER>. Il existe
une balise permettant d'aligner différents éléments. C'est le tag :
<DIV align=left>...</DIV>
<DIV align=center>...</DIV>
<DIV align=right>...</DIV>
10
6. Les titres et les listes
<Hn></Hn
Afficher une en-tête de niveau n et sauter
En-têtes [Heading] >
une ligne
avec n=1 à 6
Liste non- <UL></UL Afficher le texte sous forme d'une liste
[Bullet list]
ordonnée > non-ordonnée.
[Numbered <OL></OL Afficher le texte sous forme d'une liste
Liste ordonnée
list] > ordonnée.
Elément de liste [List items] <LI> Voici un élément de la liste
Saut de ligne, insérer une ligne vierge et

Paragraphe [Paragraph] <P></P>
commencer un paragraphe
11
Exemple 2 :
12
7. Les images
• <IMG SRC="Adresse de l'image">
Texte alternatif alt="****" Pour les browser n'ayant pas l'option "image"
activée
Dimensions width=? height=? Hauteur et largeur (en pixels)
border=? (en pixels) Bordure
align=top Alignement
align=middle
align=botton
align=left
align=right
13
L'attribut Align
<IMG SRC="HELP.gif" align=TOP>Fichier

d'aide
<IMG SRC="HELP.gif"
align=CENTER>Fichier d'aide
<IMG SRC="HELP.gif"
align=BOTTOM>Fichier d'aide
8. Les Arrière-Plans
<BODY BGCOLOR="#$$$$$$">
<BODY BGCOLOR="#000088">
<H1>Bonjour</H1>
</BODY>
14
Exemple 3 :
15
. Les liens
• <A HREF="2.HTM">Aller vers le document 2</A>
Point d'ancrage <A NAME="***">...</A> Ceci est une cible
Lien vers une ancre dans la <A HREF="#***">...</A> Lien vers la cible ***
même page dans la même page
Lien vers une ancre dans une <A HREF="URL#***">... Lien vers la cible ***
autre page </A> dans une autre page
16
Les Tableaux
<TABLE>
<TR><TD>1</TD><TD>2</TD></TR>
</TABLE>
17
Bordure de cadre [Border] <TABLE border=?></TABLE>
Exemple :
<TABLE border=2>
</TABLE>
- L'espace entre les cellules ou l'épaisseur des lignes du quadrillage : <TABLE cellspacing=10>
- L'enrobage des cellules ou l'espace entre le bord et le contenu : <TABLE cellpadding=15>
- La largeur de la table <TABLE width=?>

<TABLE width=%>
18
Les Cellules des tableaux
<CENTER><TABLE width=60% border=1>
<TR>
<TD>cellule1</TD>
<TD>cel. 2</TD>
<TD>3</TD>
</TR>
</TABLE></CENTER>
Exemple1 :
Je souhaite que la première ligne prenne toute la largeur de la ligne.
La première cellule doit donc déborder sur 3 cellules horizontales.
<TR>
<TD colspan=3>cellule 1</TD>
</TR>
<TR> <TD width=33%>cellule 1</TD> <TD width=33%>cel 2</TD>
19
<TD width=34%>3</TD> </TR>
</TABLE></CENTER>
Résultat 1:
Exemple2 :
La première colonne prenne toute la hauteur de la colonne. La première cellule
doit donc déborder sur 2 cellules verticales.
<TR>
<TD width=33% rowspan=2>cellule 1</TD>
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD>
</TR>
<TR>
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD>
</TR> 20
</TABLE></CENTER>
Résultat 2:
On utilise les frames pour diviser l'écran en plusieurs fenêtres

Zone avec des fenêtres
<FRAMESET>Début de zone avec des fenêtres
</FRAMESET>Fin de zone avec des fenêtres
Agencement des fenêtres
<FRAMESET ROWS="...">Fenêtres horizontales
<FRAMESET COLS="...">Fenêtres verticales
21
Exemple :
<HTML>
<HEAD></HEAD>
<FRAMESET ROWS="30%,70%">
<FRAME>
<FRAME>
</FRAMESET>
</HTML>
Attention !!!
<FRAMESET></FRAMESET> remplace <BODY></BODY>
- L'attribut ROWS="hauteur, hauteur2, ..., hauteur N" définit la hauteur des différentes
fenêtres en cas de division horizontale.
- La hauteur s'exprime en pixels ou en %. Dans ce cas, le total doit être égal à100%; 22
Frames … agencement vertical
Exemple :
<FRAMESET COLS="30%,70%">
<FRAME>
<FRAME>
</FRAMESET>
- L'attribut COLS="largeur1, largeur2, ..., largeur N" définit la largeur des différentes
fenêtres en cas de division verticale.
- La largeur s'exprime en pixels ou en %.
- Le total doit être égal à100%;
23
Frames … Horizontales et Verticales
Exemple :
<FRAMESET ROWS="30%,70%">
<FRAME>
<FRAMESET COLS="30%,70%">
<FRAME>
<FRAME>
</FRAMESET>
</FRAMESET>
24
Frames … les ascenseurs
Par l'attribut de la balise :
<FRAME SCROLLING="yes/no/auto >
- Vous pouvez indiquer si la fenêtre doit ou non posséder une barre de
défilement.
Frames … Border
- Par défaut, les cadres sont séparés par des bordures.
- Il est possible de supprimer ces bordures mais les attributs à utiliser diffèrent
selon Netscape ou Internet Explorer.
- Netscape utilise l'attribut "border=0"
25
Explorer, les attributs "frameborder=no" et "framespacing=0" (pour enlever l'espace entre les
cadres).
- Le tout cohabite sans problème.
- La balise devient alors par exemple :
<FRAMESET COLS="30%,70%" border=0 frameborder=no framespacing=0>
Exemple :
<HTML>
<HEAD>
<TITLE>Tree Menu</TITLE>
<BASE TARGET="display">
</HEAD>
<FRAMESET Cols="210,430" frameborder="no" framespacing="0">
<FRAME Name="tree" SRC="tree1.html" NORESIZE FRAMEBORDER="YES">
<FRAME Name="mypage" SRC="initpage.html" NORESIZE FRAMEBORDER="YES">
26
</FRAMESET>
</HTML>
• <head><title>Calcul</title> <script language ="JavaScript">
• function resultat()
• { var a=document.f.zt1.value; var b=eval(a); document.f.zt2.value=b; }
• </script>
• </head>
• <body>
• <form name="f">
• <input type="text" name="zt1">
• <input type="button" value=" = " onclick="resultat()">
• <input type="text" name="zt2"><br>
• <a href="#" onclick="resultat()">voir</a>
• </form>
• </body>
27

Devweb2021 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

Devweb2021 PDF

Transféré par

Droits d'auteur :

Formats disponibles

Développement Web

<HTML> Ceci est le début d'un document de type HTML.

</HTML> Ceci est la fin d'un document de type HTML.

Ceci est le début de la zone d'en-tête (prologue au document proprement

</HEAD> Ceci est la fin de la zone d'en-tête.

• Visual studio code

Commentaires [Comments]  Ne pas afficher

Saut de ligne, insérer une ligne vierge et

border=? (en pixels) Bordure

<IMG SRC="HELP.gif" align=TOP>Fichier

- L'enrobage des cellules ou l'espace entre le bord et le contenu : <TABLE cellpadding=15>

- La largeur de la table <TABLE width=?>

On utilise les frames pour diviser l'écran en plusieurs fenêtres

Vous aimerez peut-être aussi