Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

1 Partie B : les pages web statiques Leçon N° 1 : Le langage HTML I -Introducti

1 Partie B : les pages web statiques Leçon N° 1 : Le langage HTML I -Introduction au langage HTML Le langage HTML (HyperText Markup Language) est composé d’un ensemble de balise ("tags" en anglais) servant à décrire comment un document doit apparaître sur le web. Une balise est un élément spécial qui indique une action concernant la mise en page, la mise en forme ou la structure logique d’un document. Une balise HTML est comprise entre < et > .  Exemple : ………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… II- Structure d’une page web : <HTML> <HEAD> <TITLE> mettre ici le titre du document </TITLE> </HEAD> <BODY> Mettre ici le corps du document </BODY> </HTML> III- Les balises du langage HTML 1-Les textes et les paragraphes  Activité : créer une page web intitulé « texte et paragraphe » qui contient les informations suivantes : Développement web Langage HTML Langage java script Langage PHP Questions : o Ajouter le titre du document suivant « texte en html » . o Modifier le l’arrière plan de la page. o Ecrire chaque phrase dans une ligne. o Appliquer les mise en forme suivant : Pour le titre : police = Monotype Corsiva , Taille=7 , Couleur=rouge , style de caractère = gras et italique et Alignement = centrer. Pour le texte : Police= Verdana, Taille=7 , Couleur= #012ffa , #AC125a et #12f05c , Alignement = gauche,centrer et droit et style de caractère = gras , italique , Souligné o Ajouter une ligne horizontale entre le titre et le corps ………………………………… ………….. ………………….. 2 largeur =700, couleur = vert et taille= 7  Réponse ………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… ………………………………………………………………………………………………….. …………………………………………………………………………………………………… …………………………………………………………………………………………………… ………………………………………………………………………………………………….. …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… ……………………………………………………………………………………………………  Constatation : Balise Fonction exemple résultat <B>…</B> <I>…</I> <U>…</U> <S>…</S> Barré <S>Tunisie</S> Tunisie <SUP>…</SUP> Exposant X<SUP>2</SUP> X 2 <SUB>…</SUB> Indice Y<SUB>2</SUB> <CENTER>…</CENTER> <BR> <DIV ALIGN="CENTER/LEFT/ RIGHT"> texte </DIV> <FONT SIZE="…" COLOR="…" FACE="…">texte</FONT> <HR SIZE="…" COLOR="…" WIDTH="…" ALIGN="…"> <P ALIGN="CENTER/LEFT/ RIGHT"> >texte</P> 3  Un commentaire < !--Ceci est un commentaire- -> 2/ Les TITRES  Activité 3 : Créer un nouveau fichier les titres.html et saisir le code HTML suivant : <html> <head><title>les titres en html</title> </head> <body> <p align="center"><font size="7">les titres</font></p> <br><hr> <p><h1>on distingue 6 niveaux pour les titres</h1></p> <h1>titre n1</h1> <h2>titre n2</h2> <h3>titre n3</h3> <h4>titre n4</h4> <h5>titre n5</h5> <h6>titre n6</h6> </body> </html>  Constatation :  La balise qui permet de définir un titre est : <Hn>…..</hn> avec n varie de 1 à 6  Pour chaque niveau , il y a une taille qui…….. du niveau 1 au niveau 6  La balise <hn> inclue des retour automatique à la ligne 3/ les images : A/ Insertion des images dans une page web  Activité : Créer une page web et l’enregistrer sous le nom « image.html » . elle contient les images « client/serveur.bmp » (largeur=200,hauteur=200,bordure=5 , texte de bulle info= « client serveur » et alignement = gauche) et l’image « reseau per to per.bmp » (largeur=300,hauteur=500,bordure=3 , texte de bulle info= « Per to per » et alignement = droite).  Réponse : …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… ……………………………………………………………………………………………………  Constatation : Dans une page web ,l’insertion d’une image se fait avec la balise suivante : <IMG SRC ="adresse" width="largeur" height="hauteur" border="taille" alt="texte bulle info" align="alignement"> 4  SRC ="adresse" : …………………………………………………………………….  width="largeur" et height="hauteur" :………………………………………………  border="taille" : ……………………………………………………………………..  alt="texte bulle info" : ……………………………………………………..  align="alignement"> : …………………………………………………………… B/ insertion d’une image en arrière plan  Activité : dans la même page, insérer l’image « image1.jpg » en arrière plan de la page  Réponse : ………………………………………………………………………..  Constatation : …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… 4/ les listes  Activité : Lancer le logiciel Notepad , ouvrir le fichier « liste.html » puis déterminer les différentes type de liste utilisé  Réponse : Fonction balise Exemple de code résultat Liste non numéroté ou énumératives <ul> <li>…</li> </ul> Liste numérotée <ol> <li>…</li> </ol> listes de définition <dl> <dt> ..</dt> <dd>..</dd> </dl>  Constatation : la propriété type de la balise <ol> peut avoir les valeurs suivantes : A :Lettre majuscule a : lettre minuscule I : chiffre romains majuscule i : chiffre romains minuscule 1 :chiffre arabe  la propriété type de la balise <ul> peut avoir les valeurs suivantes : square : puce carrées circle :puce circulaire 5 5/ les tableaux : Ouvrir le fichier « tableau.html » . 1) Donner la balise qui permet la création d’un tableau 2) Ajouter les propriétés suivantes pour le tableau bordure=5 , largeur =70% ,hauteur =60% ,alignement =centrer ,espace entre les cellules = 10 et la couleur de l’arrière plan =# 66ffaa 3) Ajouter les propriétés suivantes pour la 1er ligne : alignement verticale = « en bas de la cellule », hauteur de ligne = « 33% »,couleur d’arrière plan = #ffeecc 4) Ajouter les propriétés suivantes pour les cellules de la 2eme ligne :  alignement verticale : « haut (top) », « milieu(middle) » , « en bas (bottom) »  Hauteur de chaque cellule : 33%  Couleur de l’arrière plan = « #ff0000 », « #00ff00 » , « #0000FF » 5) Ajouter une troisième ligne et appliquer les propriétés de 3 et 4 questions. 6) Fusionner les 3 cellules de la 1er colonne 7) Fusionner les cellules de la 2 eme ligne 8) Dans la case n° 5 , insérer un tableau de 2 ligne et 2 colonne  Réponse : …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… ……………………………………………………………………………………………………  Constatation : 6  Un tableau en html est ensemble des lignes et chaque ligne est formé par des cellules  La balise <table>….< /table> : définisse un tableau  La balise <tr>.. .</tr> : permet la création d’une ligne  La balise <td> ….</td> : permet la création d’une cellule  Entre la balise <table>….< /table> on peut trouver que les balises <tr>.. .</tr> .  Entre la balise <tr>….< /tr> on peut trouver que les balises <td>.. .</td> .  Les données à afficher sont limité entre les balises <td>….</td>. Les propriétés de la balise <table> Les propriétés de la balise <TR> Les propriétés de la balise <TD> 6/ les liens hypertextes : Les liens hypertexte facilite la navigation entre les pages web est on l’appelle ………………………… et même dans la même page est on l’appelle ………………………….. A / création des liens hypertexte interne  Activité : <html ><head><title>creation des liens hypertexte interne</title></head> Nom de la propriété Rôle WIDTH="X" HEIGHT="X" la largeur ou la hauteur du tableau en pixel ou en pourcentage % BORDER="X" Définit l'épaisseur de la bordure. BORDERCOLOR="couleur" Définit la couleur de bordure de votre tableau. BGCOLOR="couleur" Définit la couleur de fond du tableau CELLSPACING="X" Définit l'espace entre les cellules CELLPADDING="X" Définit l'espace entre une cellule et son contenu ALIGN =X Définit L’alignement du tableau Nom de la propriété Rôle HEIGHT="X" la hauteur de la ligne en pixel ou en pourcentage % BGCOLOR="couleur" Définit la couleur de fond de la ligne Valign =" haut (top) / milieu(middle) / en bas (bottom) " Définit la position du texte dans tous les cellules de la ligne Nom de la propriété Rôle HEIGHT="X" la hauteur de la cellule en pixel ou en pourcentage % BGCOLOR="couleur" Définit la couleur de fond de la cellule Valign =" haut (top) / milieu(middle) / en bas (bottom) " Définit la position du texte dans la cellules COLSPAN="X" Définit le nombre de colonnes sur lequel s'étend la cellule. ROWSPAN="X" Définit le nombre de lignes sur lequel s'étend la cellule 7 <body > <h1 > les Reseau informatique</h1> <h3>le Plan</h3> <h2>I les reseaux client serveur</h2> <h2>II les reseaux per to per</h2> <hr> <h3>le contenu de la page</h3> <br><br><br><br><br><br> <h3>I les reseaux client serveur</h3> <IMG SRC ="client serveur.bmp" width="200" height="200" border="4" alt="client serveur" > <br><br><br><br><br><br> <hr color="red"> <h3>II les reseaux per to per </h3> <IMG SRC ="reseau per to per.bmp" width="200" height="200" border="4" alt="client serveur" align="right"> <br> </body></html> 1) Saisir le code html puis enregistrer la page sous le nom « reseaux.html » 2) Ajouter les signets client_serveur , per_to_per pour chaque paragraphe de texte 3) Compléter les liens hypertexte entre le plan et texte  Réponse : …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… ……………………………………………………………………………………………………  Constatation :  L’existance des liens internes (bas et haut) facilite la navigation dans une page web  La creation d’un lien interne se fait en deux etapes :  La creation des signets : le point d’arrive ou le lien doit pointer ……………………………………………………………………………………………….  La création des liens interne : le point de départ du lien ……………………………………………………………………………………………….. B / création des liens hypertexte externe Activité : créer une nouvelle page web et l’enregistrer sous le nom menu.html qui contient tous les lien hypertextes vers toutes les pages  Réponse : …………………………………………………………………………………………………… …………………………………………………………………………………………………… uploads/s3/ le-langage-html 1 .pdf