Embed Size (px)
Citation preview
Pages Web statiques
Jihen Damerji
Introduction
HTML :HperText Markup Language.
Langage structuré basé sur les balises. Indépendant du navigateur utilisé. On forme un fichier qu’on enregistre avec
l’extension .html et on peut voir son contenu dans un navigateur tel que Ms Internet Explorer.
Activité
Créer un dossier portant le nom HTML dans d:\4SI\TIC\G1.
Lancer le logiciel Bloc Notes de Windows. Enregistrer le dans le dossier qu’on a crée
sous le nom de page1.html On remarque que le fichier change d’icône.
Ouvrer le fichier page1.html qui est une page vide puis afficher le code source et saisir ce qui suit
<HTML> <HEAD>
</HEAD> <BODY>
</BODY> </HTML>
Ce sont des balises HTML. Chaqu’une doit être entre les symboles < et >.
Il y a les balises ouvrantes. < ------ >
Il y a les balises fermantes </------ >
Un document HTML est formé de : la déclaration principale <HTML> L’entête : <HEAD> Le corps: <BODY>
Insérez après la balise <Head> la ligne suivante:
Enregistrez le fichier et revenez au navigateur.
Actualisez Quel est le résultat?
Après la balise <BODY> insérez le texte suivant:<BODY> Bienvenue sur ma page Web
</BODY>
Enregistrez et actualisez le navigateur.
<HEAD>
<TITLE> Mon site Web </TITLE></HEAD>
La forme générale d’une page Web
<HTML><HEAD>
<TITLE> Titre qui s’affiche dans la barre des titre du navigateur</TITLE></HEAD><BODY>……………………………….……………………………………………….……………………………………….</BODY></HTML>
“début du code HTML”“début des informations relatives à l’entête du document »Titre qui s’affiche dans la barre des titre du navigateur« fin de ces informations »« début de contenue effectif de la page »……………………………………..…………..………………………………………………………………..« fin du corps de la page »“fin du code HTML”
Activité : saisir le code html suivant<HTML> <HEAD> <TITLE> ma première page web </TITLE></HEAD> <BODY> développement web</BODY> </HTML>
Textes et paragraphes
1- ParagraphesActivité: Ajoutez le texte suivant dans le Body:<p align= center> développement web
</P> La balise P permet de crée de paragraphe Pour ajouter un nouveau paragraphe on utilise
la balise <P> </P> Cette balise possède la propriété align.
Pour mettre le titre en gras on doit ajouter la balise <B> pour devenir:
<P align=center> <B> développement web </B> </P>
Activité: Ajoutez le texte suivant <P> On va vous présenter <U> <I>
Internet</I> </U> et son utilisation</P>
Pour souligner et mettre en Italique le mot Internet on doit l’encadrer par<U><I></U></I>
2- texte
Pour centrer tout le texte, on ajoute après <P> la balise <CENTER> et on la ferme avant </P>
On ajoute les modifications suivantes:<P align=center> <FONT color="red" size=8
face="Arial"> <B> développement web </B></FONT></P>
Activité On va ajouter un nouveau paragraphe aligné à gauche dans lequel on va mettre sur trois lignes différentes : Définition.
Services. Connexion.
Solution :<P align=left> Définition. <BR>Services. <BR> Connexion. </P>
• La balise BR : (break): permet de commencer une nouvelle
ligne
<BR> c’est une nouvelle ligne
Application 2 Modifier la police en Courrier et la taille à 5 des trois sous titres:
Solution: <P align=left>
<FONT size=5 face="courrier"> Définition. <BR>Services. <BR> Connexion.
</FONT> </P>
Sur le même document on va ajouter une ligne séparatrice par la balise <HR> à la fin du texte.
On peut modifier la couleur, la largeur et le trait de la ligne.
Application: <HR color="blue" width="500" size="5">
<HR color=“#000000” width=“500" ><HR color=“#884412” width=“400" size=“5”>
La balise HR : (horizontal rule) permet de dessiner une ligne horizontal
A la balise <BODY> on va ajouter la propriété BGCOLOR pour devenir
<BODY BGCOLOR="#123456">
Et on ajoute aussi TEXT="White"<BODY BGCOLOR="#123456"
TEXT="White">
Couleur d’arrière plan
Les titresActivité: Apres la ligne séparatrice commencer un
nouveau paragraphe dans lequel on va mettre 6 titres de paragraphes de la forme suivante.
<P><H1>Titre 1</H1>
<H2>Titre 2</H2>
<H3>Titre 3</H3>
<H4>Titre 4</H4>
<H5>Titre 5</H5><H6>Titre 6</H6>
</P>
Style Logique et titre <H1>texte</H1> : de taille1 (maximum). Titre 1 Titre 4<H2>texte</H2> : de taille2 <H5>texte</H5> : de taille5 Titre 2 Titre 5<H3>texte</H3> : de taille3 <H6>texte</H6> : de taille6(minimum) Titre 3 <H4>texte</H4> : de taille4
Titre 6<EM>texte</EM> Met le texte en valeur
Insertion d'images Créer un nouveau fichier qu'on appelle
Page2.html Dans le body on va mettre comme titre
"Insertion d'images dans une page web" Dans un nouveau paragraphe on va insérer
l'image webcam.jpg à gauche de taille 170 par 150 pixel.
<IMG SRC="webcam.jpg" WIDTH="170" HEIGHT="150" ALIGN="Left">
Insérer une ligne horizontale après l'image.
Insérer une deuxième image routeur.jpg à droite de taille 200 par 150 pixel avec une bordure égale à 3.
<IMG SRC=" routeur.jpg " WIDTH="200" HEIGHT="150" ALIGN="Right" BORDER="3" ALT="Un routeur WIFI">
L’insertion d’une image d’arrière plan
On peut également mettre une image comme arrière plan de la page dans la balise <BODY>
<BODY BACKGROUND="fond1.jpg"> <BODY BACKGROUND="fond2.jpg">
<BODY BACKGROUND= ˝ image.jpg ˝ >
Insertion d’images <IMG SRC= ˝ image.gif ˝>
Pour modifier à l’écran la taille de l’image, on dispose des attributs:
HEIGHT pour la hauteur et
WIDTH pour la largeur
<IMG SCR= ˝image.gif ˝ WIDTH=70 HEIGHT=70>
Les listes Créer une nouvelle page et enregistrez la sous le nom
de page3.html Mettez comme titre "les listes" Saisir le code suivant dans le body: <H4>Les services de l'Internet </H4><UL>
<LI> Le Web </LI> <LI> L'email </LI><LI> Le chat </LI>
</UL>
Insérer une ligne horizontale. Insérer le code suivant après la ligne:
<H4> Matériel nécessaire à une connexion </H4>
<OL><LI>Un ordinateur </LI><LI>Modem </LI><LI>Ligne téléphonique</LI>
</OL>
La balise UL : (Unumbered list),
permet l’obtention d’une liste nom numérotée
<UL> <LI> ceci est la 1ér élément <LI> ceci est le 2éme élément </UL>
<ul> et <li>possède la propriété type[ square(puces carrées), circle(puces
circulaires)]
La balise OL : (Ordered list)
permet l’obtention d’une liste numérotée
<OL> <LI> ceci est la 1ér élément <LI> ceci est le 2éme élément </OL>
Modifier la balise <OL> en ajoutant 1. <OL type="1">2. <OL type="A">3. <OL type="a">4. <OL type="I">5. <OL type="i">
Insérer une ligne horizontale. Insérer le code suivant après la ligne:<H4> Types de connexion </H4><DL>
<DT>A</DT><DD>RTC </DD>
<DT>B</DT><DD>ADSL </DD>
<DT>C</DT><DD>Ligne spécialisée </DD>
</DL>
Formatage de caractères :(voir tableau P56)
Tag ou balise Rôle<B>texte</B> gras <I>texte</I> italique <U>texte</U> souligné <S>texte</S> Barré <SUB>texte</SUB> Indice
Formatage de caractères suite
<SUP>texte</SUP> Exposant ( exposant )
<DIV align=" center/left/right ">texte</DiV>
Alignement d’un élément
<BIG>texte</BIG> Agrandir la taille
<SMALL>texte</SMALL> Réduire la taille
<!-texte-> Commentaire
Les Tableaux Créer un nouveau fichier qu'on appelle
Page3.html Dans le body on va mettre comme titre "Les
tableaux" (en H1) et le centrer. Pour insérer un tableau on utilise la balise
<TABLE>-------------------
</TABLE>
Propriétés de <TABLE>
1. BORDER: Indique la bordure du tableau.2. WIDTH: Indique la largeur du tableau en
pourcentage ou en pixel.3. HEIGHT : Hauteur du tableau en
pourcentage ou en pixel.4. ALIGN: Alignement du tableau par rapport à
la page.5. BGCOLOR: Modifie la couleur de l'arrière
plan du tableau.
<TABLE WIDTH="80%" BORDER="1" ALIGN="center" BGCOLOR="#CCCCCC">
</TABLE>
Activité:
Les lignes Pour insérer une ligne on utilise la
balise <TR> On aura
<TABLE><TR>
</TR> </TABLE>
Propriétés de <TR>
1. ALIGN: Indique l’alignement du contenu de la ligne.
2. VALIGN: Indique l’alignement vertical du contenu des cellules d’une ligne.
3. BGCOLOR: Modifie la couleur de l'arrière plan de la ligne.
4. HEIGHT: Hauteur de la ligne en pourcentage ou en pixel par rapport au tableau.
Activité:
<CENTER><H1> Les Tableaux </H1></CENTER>
<TABLE WIDTH="80%" BORDER="1" ALIGN="center" BGCOLOR="#CCCCCC">
<TR ALIGN="center" BGCOLOR="yellow">
</TR></TABLE>
Les Cellules Pour insérer une cellule dans une
ligne on utilise la balise <TD>On aura<TABLE>
<TR> <TD> </TD></TR>
</TABLE>
Propriétés de <TD>1. ALIGN: Indique l’alignement du
contenu d’une cellule.2. VALIGN: Indique l’alignement vertical
du contenu d’une cellule. 3. BGCOLOR: Modifie la couleur de l'arrière
plan de la cellule.4. HEIGHT: Hauteur de la cellule en pourcentage
ou en pixel par rapport à la hauteur d’une ligne5. WIDTH: Indique la largeur de la cellule en
pourcentage ou en pixel par rapport au tableau.
Activité1:
Insérer un tableau sans bordure contenant 2 lignes et 2 colonnes.
Mettre 1,2,3,4 dans les différentes cellules.
Solution:
Activité2: Insérer un tableau avec une bordure
égale à 2 contenant 2 lignes et 2 colonnes.
Mettre 1,2,3,4 dans les différentes cellules.
Solution:<TABLE BORDER="2"> On veut avoir un espacement entre les
cellules égal à 10 pixels et un espacement entre le contenu de cellules et leurs bords égal à 10 pixels
Solution: On doit utiliser deux autres
propriétés de la balise <TABLE>: CELLSPACING: Espacement entre les
cellules. CELLPADDING: Espace entre le
contenu de la cellule et son bord extérieur.
<TABLE Border="2" cellspacing=10 cellpadding=10>
Activité3: Insérer un tableau avec une bordure
égale à 1 contenant 2 lignes et 2 colonnes et de couleur de fond bleu.
Mettre 1,2,3,4 dans les différentes cellules.
Mettre la couleur de fond la ligne 1 du tableau en rouge.
Mettre la couleur de fond de la cellule 2 en vert.
Solution:
<TABLE Border="2" BGCOLOR="blue" > <TR BGCOLOR="red"> <TD>1</TD> <TD BGCOLOR="green">2</TD> </TR> <TR> <TD>3</TD> <TD>4</TD> </TR> </TABLE>
Activité4:
Insérer un tableau avec une bordure égale à 1 contenant 3 colonnes.
La largeur du tableau sera égale à 60%. Mettre 1,2,3 dans les différentes cellules.
Solution:
<TABLE border="1" WIDTH="60%"><TD>1</TD><TD>2</TD><TD>3</TD>
</TABLE>
opération de fusionActivité4-1: Insérer un tableau avec une
bordure égale à 1 et de largeur égale à 60%.
Le tableau sera de la forme suivante:
12 3 4
Solution:<TABLE Width=60% border=1> <TR>
<TD Colspan=3>1</TD> </TR> <TR> <TD width=33%>2</TD> <TD width=33%>3</TD> <TD width=34%>4</TD> </TR></TABLE>
Activité4-2: Insérer un tableau avec une
bordure égale à 1 et de largeur égale à 60%.
Le tableau sera de la forme suivante:
12 34 5
Solution:<TABLE Width=60% border=1> <TR> <TD Rowspan=2 width=33% align=center valign=middle>1</TD> <TD width=33%>2</TD>
<TD width=33%>3</TD>
</TR> <TR>
<TD width=34%>4</TD> <TD width=33%>5</TD>
</TR> </TABLE>
Les liens hypertextes Un lien hypertexte nous permet de
nous déplacer d’une page à une autre c’est le lien hypertexte externe ou bien dans une même page d’un endroit à un autre c’est le lien hypertexte interne.
La forme d’un lien est la suivante:
<A href = "adresse cible" > Texte du lien </A>
Exemples: <A HREF=" http://adresse Web"> texte
</A><A HREF="http://www.google.com">
Recherche </A> <A HREF=" ftp://adresse ftp"> texte </A><A HREF=
"ftp://ftp.editerra.fr/install/win32_86x/ftp/ftpexpert2.exe "> FTP Expert 2 </A>
<A HREF="mailto:adresse email"> texte </A>
<A HREF="mailto:[email protected]"> Envoyer un email </A>
<A HREF="file://adresse du fichier"> Texte </A>
<A HREF="file://c:/Windows/winhelp.exe"> Aide de Windows </A>
On peut aussi spécifier la page cible avec la propriété: Target:• _blank• _self• _parent
lien hypertexte interne. créer une page web très longue qui
contient les informations suivantes:1. Le titre suivant: « voila une page très
longue »2. Une ligne horizontal plus le texte
suivant « bas de page »3. L’image image1.jpg de hauteur=800
et de largeur=4004. Une ligne horizontal plus le texte
suivant « bas de page »
5. Une ligne horizontal plus le texte suivant « Remonter »
6. Créer un lien interne qui nous permet d’aller en bas de page en cliquant sur bas de page
7. Créer un deuxième lien interne qui nous permet d’aller en haut de page en cliquant sur remonter
solution<html><head><title> lien hypertexte
</title> </head><body><h1> <a name= "haut"> voila
une page très longue </A> <A href =" #bas" >bas de
page</A>
<hr><img src= « image1.jpg « width=400 height=800> <hr>
<h2> <a name= "bas"> bas de page </A>
<A href =" #haut" >remonter</A>
</body></html>
On peut créer des liens hypertexte vers des signets à l'intérieur d'une même page en utilisant:
<A href = "#nom du signet" > Texte du lien </A>
Ceci après avoir définie votre signet:<a name= "nom du signet">
texte </A>
Suite: Par défaut la couleur du lien est
bleue, celle du lien visité et violette, et celle du moment du click est rouge.
On peut modifier ces couleurs par des propriétés dans la balise BODY.
<BODY Link="Pink" Vlink="Yellow" Alink="Green">
Formulaire HTML<form action="………." name="
………" method=" post/get">
</form> action= indique l’action à faire. Name= le nom du formulaire
method=" post/get"
La méthode GET La méthode POST utilise l'url, donc si jamais vous avez des données à passer par l'url pour ne pas faire un formulaire sur chaque lien, vous aller pouvoir utiliser GET. Prenons un exemple où je passe un 'id' via l'url pour savoir quelle image affichée.
Une url avec des variables dedans se présente toujours de cette façon : /mon_script.php ?nomVariable1=valeurVariable1&nomVariable2=valeurVariable2&nomVariable3=valeurVariable3&�
Une url est limitée à 255 caractères !
est utilisée pour transmettre des données via un formulaire et passer en "caché"
(via une deuxième requête HTTP, après la première qui demande la page html/php),on ne voit pas les données des variables explicitement.
Contrairement à POST, la méthode GET passe les variables via l'url (en une seule requête HTTP), les données sont donc "visible" dans l'adresse de la page.
La validation du formulaire se fait par le bouton Envoyer.
Activité: saisir ce code
<html><head><title>formulaire</title></head><body><h1>formation personnel</h1><form action="sauveg.html" name=" f1"
method="get">Votre nom: <input type= "text" name=
"nom"> <br><input type="submit" value="envoyer"></form> </body></html>
La zone de saisie
Ajouter :Votre prenom: <input type= "text" name="prenom"
size="25"> <br><br>
entrer l'adresse de votre site: <input type= "text" name="url"
size="40" value="http://"> <br><br>
Votre profession: <input type= "text"
name="profession" size="25" maxlength="20">
<br><br>
entrer le mot de passe: <input type= "password"
name="motpasse" size="10" maxlength="8">
<br><br>
entrer votre adresse: <textarea name="adresse" rows="3"
cols="50"> </textarea><br><br>
ajouter votre photos: <input type= "file" name="photos"
size="30"> <br> <hr> <br>
Bouton radio
Sexe:<input type="radio" name="sexe"
value="Femme" checked> Femme<input type="radio" name="sexe"
value="homme"> Homme <br><br>
Ajouter a votre formulaire:
Case à coucher ‘choix inclusifs)Votre sport préférer:<br><input type="checkbox" name="sport"
value="hand"> Hand <br><input type="checkbox" name="sport1"
value="foot"> Foot <br><input type="checkbox" name="sport2"
value="basket"> Basket <br><input type="checkbox" name="sport3"
value="golf"> Golf <br> <br><br>
Liste de sélection Date de naissance: <input type= "text" name="jour" size="3"
maxlength="2"> <select name="mois"><option value="janvier">janvier<optionvalue="fevrier" >Février<option value="mars" selected>mars...<option value="decenbre">décenbre</select><input type= "text" name="annee" size="5"
maxlength="4" > <br>
Le contrôle annuler
<input type="reset" value="annuler">
Les cadres: comment faire?
On peut diviser la page en cadres (FRAME) grâce à la balise <FRAMESET>
On peut diviser la page en lignes ou en colonnes par la propriété COLS et ROWS.
Dans chaque cadre on affiche une page qu'on doit préciser la source grâce à la balise <FRAME SRC=" ">
On peut aussi donner un nom au cadre avec la propriété NAME
Application1: Saisir ce code<HTML><HEAD><TITLE> cadre</TITLE></HEAD><frameset cols="250,*"><frame src=" index.html" name="G"><frame src="formulaire.html" name="D"></frameset></html>
Enregistrez le fichier sous le nom tp1.html et revenez au navigateur après avoir vérifier les deux autre pages: « index.html" et « formulaire.html" qui sont les deux pages du devoir.
Application2: Saisir ce code<HTML><HEAD><TITLE> cadre</TITLE></HEAD><frameset cols="250,*"><frame src="cadreg.html" name="G"><frame src="cadred.html" name="D"></frameset></html>
Enregistrez le fichier sous le nom tp12.html et revenez au navigateur après avoir créer les deux autre pages: "cadreg.html" et "cadred.html"
cadreg.html cadred.html<HTML><HEAD><TITLE>sommaire de liens</TITLE></HEAD><BODY bgcolor="#e0c0ff" text="#000000" link="#804080" vlink="600000" Alink="#A00000"><H1> navigation </H1><P> <A href="tp3.html" target="D"><B> Les images</B> </a><br><A href="tp4.html" target="D"><B> Les tableaux</B> </a><br><A href="tp5.html" target="D"><B> Les listes</B> </a><br><A href="tp6.html" target="D"><B> Les titres</B> </A><BR> </P></BODY></HTML>
<HTML><HEAD><TITLE>Acceil</TITLE></HEAD><BODY bgcolor="#fff0c0" text="#000000" link="#A00000" vlink="600000" Alink="#A00000">
<H1> bienvenue </H1><P> choisissez un lien à gauche </P></BODY></HTML>
Exercice d'application :créer cette page
Solution:<html><head><title> cadre</title></head><frameset rows="60,*"><frame src="vacance.html" name="G"><frameset cols="250,*"><frame src="acceuil.html" name="D"><frame src=" devoir.html" name="h"></frameset></frameset></html>
Les attributsL'attribut frameborder :
Cet attribut permet de déterminer si les cadres auront ou n'auront pas de bordure. Il a deux valeurs yes ou no. frameborder=yes ou frameborder=no
L'attribut bordercolor :Cet attribut permet de déterminer la couleur de l'ensemble des bordures des cadres. Il suffit pour cela de spécifier une couleur sous forme de nom ou de sa valeur hexadécimale
bordercolor="red"
Correction
<html><head><title> cadre</title></head><frameset rows="60,*" frameborder=yes
bordercolor="red"><frame src="cadreg.html" name="G"><frameset cols="250,*"><frame src="cadred.html" name="D"><frame src="cadreh.html" name="h"></frameset></frameset></html>
Application2<html><head><title> cadre</title></head><frameset rows="60,*"><frame src="cadreg.html" name="G"
frameborder=yes bordercolor="red"><frameset cols="250,*"><frame src="cadred.html" name="D"
frameborder=yes bordercolor="blue"><frame src="cadreh.html" name="h"
frameborder=yes bordercolor="blue"></frameset></frameset></html>
L'attribut framespacing :Cet attribut permet de déterminer un espace
entre les cadres. Il peut prendre plusieurs valeurs ex: framespacing=n, n étant une valeur en pixels définissant l'espace entre les cadres. La valeur 0 indique aucun espace.framespacing=0 ou framespacing=5 L'attribut border :Cet attribut permet de déterminer la taille des bordures entourant les cadres. Il peut prendre plusieurs valeurs ex: border=n, n étant une valeur en pixels définissant la taille de la bordure. La valeur 0 indique aucune bordure.<frameset rows="60,*" frameborder=yes border="5">
L'attribut scrolling:Cet attribut permet d'attribuer ou non une barre de défilement (scrollbar) à un cadre. Il possède trois valeurs :- yes : Indique que la barre de défilement sera toujours visible- no : Indique que la barre de défilement ne sera jamais visible - auto : Indique que le navigateur déterminera si la barre de défilement est nécessaire
L'attribut noresize :En utilisant cet attribut, vous interdisez à l'utilisateur de redimensionner les cadres. Par défaut les cadres peuvent être redimensionnés<frame src="cadreg.html" name="G" scrolling="auto" noresize>
Les attributs marginwidth et marginheight :- marginwidth permet de spécifier la grandeur des marges de gauche et de droite du cadre créé, la valeur doit être exprimée en pixels, elle peut avoir comme valeur 0.- marginheight permet de spécifier la grandeur des marges de haut et de bas du cadre crée, la valeur doit être exprimée en pixels, elle peut avoir comme valeur 0
<frame src="cadred.html" name="D" marginwidth="18" marginheight="21" scrolling="auto">
