Remerciez-le!

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

Développement Web Bassem BSIR LATICE laboratory Research Departement of Compute

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 Email: bsir.bassem@yahoo.fr 1 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 4 • 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. 5 HTML HTML+CSS 2. Structure d’un document html minimum 6 <HTML> Ceci est le début d'un document de type HTML. </HTML> Ceci est la fin d'un document de type HTML. <HEAD> Ceci est le début de la zone d'en-tête (prologue au document proprement 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. 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/ 3. Le texte 8 Gras [Bold] . <B>..</B> <STRONG>...</STRONG> Début et fin de zone en gras Italique [Italic] <I>...</I> <EM>...</EM> Début et fin de zone en italique Taille de caractère [Font size] <FONT SIZE=?>...</FONT> Début et fin de zone avec cette taille Couleur de caractère [Font color] <FONT COLOR="#$$$$$$"> </FONT> Début et fin de zone en couleur A la ligne [Line break] <BR> Aller à la ligne Commentaires [Comments]  Ne pas afficher Centrage [Center] <CENTER></CENTER> Centrer 9 Exemple 1 : 4. Codes de quelques couleurs basiques 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 Bleu #0000FF Vert #00FF00 Blanc #FFFFFF Violet #8000FF Rouge #FF0000 Jaune #FFFF00 Gris clair #C0C0C0 Noir #000000 6. Les titres et les listes 11 En-têtes [Heading] <Hn></Hn > avec n=1 à 6 Afficher une en-tête de niveau n et sauter une ligne Liste non- ordonnée [Bullet list] <UL></UL > Afficher le texte sous forme d'une liste non-ordonnée. Liste ordonnée [Numbered list] <OL></OL > Afficher le texte sous forme d'une liste ordonnée. Elément de liste [List items] <LI> Voici un élément de la liste Paragraphe [Paragraph] <P></P> Saut de ligne, insérer une ligne vierge et commencer un paragraphe 12 Exemple 2 : 7. Les images • <IMG SRC="Adresse de l'image"> 13 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 align=middle align=botton align=left align=right Alignement L'attribut Align 14 <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> 15 Exemple 3 : . Les liens • <A HREF="2.HTM">Aller vers le document 2</A> 16 Point d'ancrage <A NAME="***">...</A> Ceci est une cible Lien vers une ancre dans la même page <A HREF="#***">...</A> Lien vers la cible *** dans la même page Lien vers une ancre dans une autre page <A HREF="URL#***">... </A> Lien vers la cible *** dans une autre page Les Tableaux 17 <TABLE> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> 18 Bordure de cadre [Border] <TABLE border=?></TABLE> Exemple : <TABLE border=2> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </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=%> 19 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. <CENTER><TABLE width=60% border=1> <TR> <TD colspan=3>cellule 1</TD> </TR> <TR> <TD width=33%>cellule 1</TD> <TD width=33%>cel 2</TD> <TD width=34%>3</TD> </TR> </TABLE></CENTER> 20 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. <CENTER><TABLE width=60% border=1> <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> </TABLE></CENTER> 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 Résultat 2: 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 24 Frames … Horizontales et Verticales Exemple : <FRAMESET ROWS="30%,70%"> <FRAME> <FRAMESET COLS="30%,70%"> <FRAME> <FRAME> </FRAMESET> </FRAMESET> 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"> </FRAMESET> </HTML> 26 • <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 uploads/s3/ devweb2021-pdf.pdf