Remerciez-le!

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

Le langage HTML I. Introduction au langage HTML 1. Définition : Le langage HTML

Le langage HTML I. Introduction au langage HTML 1. Définition : 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 > . Une balise de début ressemble à ceci <xyz> et une balise de fin ressemble à cela </xyz> Exemple : <HTML> C’est la balise qui indique le début d’une page web. </HTML> C’est la balise qui indique la fin de la page web. <HEAD> C’est la balise qui indique le début de l’entête de la page. <BODY> C’est la balise qui indique le début du corps de la page. 2. Structure d’une page web : <HTML> <HEAD> <TITLE> mettre ici le titre du document </TITLE> </HEAD> <BODY> Mettre ici le corps du document c'est-à-dire Les informations à publier </BODY> </HTML> Application 1 : - Ouvrir le bloc note - Taper le code ci-dessous - Sauvegarder votre travail sous le nom Ex1.htm Code Html : Résultat : <html> <head> <title> Ma premiere page </title> </head> <body> <center> <font size ="5" color ="blue"> Page Web N°1</font> <br> <hr> <br> <img src ="bal.gif" width ="80" height ="78"> </center> </body> </html> 3. Les textes et les paragraphes : Fonction Balise Exemple de code Résultat Gras <B> … </B> <B> Sousse </B> Sousse Italique <I> … </I> <I> Sousse </I> Sousse Souligne <U> … </U> <U> Sousse </U> Sousse Mise en forme de caractère <FONT size = "**" COLOR ="#****" FACE = "****"> …. </FONT> <FONT size = "2" COLOR ="blue " FACE = "arial"> Sousse</FONT> Sousse Exposant <SUP> ……… </SUP> X<SUP>2</SUP> X² Indice <SUB> ……… </SUB> H<SUB>2</SUB>O H2O Retour à la ligne <BR> 4 année <Br> TIC 4 année TIC Ligne de séparation <HR Size="**" COLOR = "#**" wigth = "**" ALIGN = "CENTER/LEFT/RIGHT"> 4 année <HR color =”red”> TIC 4 année TIC Centage <Center> …….. </Center> <Center> Sousse </Center> Sousse Alignement d’un élément <DIV ALIGN = "CENTER/LEFT/RIGHT"> … </DIV> <DIV ALIGN = "RIGHT"> Sousse </DIV> Sousse - Nouveau Paragraphe - Paragraphe centre - Paragraphe aligné à gauche - Paragraphe aligné à droite <P>…………..</P> <P ALIGN = "CENTER"> …</P> <P ALIGN = "LEFT"> …</P> <P ALIGN = "RIGHT"> …</P> <P ALIGN = "RIGTH”> …</P> Sousse Commentaire < !-- ……….--> < ! --ceci un commentaire -- > 4. Les titres Fonction Balise Exemple de code Résultat Titre de niveau <Hn> … </Hn> <H1> Titre niveau 1 </H1> <H2> Titre niveau 2 </H2> <H3> Titre niveau 3 </H3> Titre niveau 1 Titre niveau 2 Titre niveau 3 Application 2 : - Réaliser la page Web suivante : Solution : <html> <head> <title> Les titres </title> </head> <body> <P align = "center"> <font size ="5" color ="blue"> Les Titres </font> </P> <br> <hr> <P> <H1> On distingue six niveaux pour les titres </H1> <P> <H1> Titre niveau 1 </H1> <H2> Titre niveau 2 </H2> <H3> Titre niveau 3 </H3> <H4> Titre niveau 4 </H4> <H5> Titre niveau 5 </H5> <H6> Titre niveau 6 </H6> </body> </html> 5. Les images Fonction Balise Exemple de code Résultat Insérer une image <IMG SRC= "…" BORDER="…" WIDTH="…" HEIGHT="…"> <IMG SRC= "C:\4SI\im.gif" BORDER="2" WIDTH="50" HEIGHT="50"> Application 3 : - Réaliser la page Web suivante : Solution : Application 4 : - Réaliser la page Web suivante : Solution : Remarque : Au niveau de la balise <BODY> on peut aussi retrouver les propriétés suivante :  BGCOLOR : une couleur unie pour le fond d’une page web.  TEXT : La couleur par défaut du texte  LINK : La couleur d’un lien qui n’est pas encore visité  VLINK : La couleur d’un lien qui a déjà été visité  ALINK : La couleur qui apparaît au moment du click sur un lien <html> <head> <title> image </title> </head> <body> <center> <font size ="8" color ="red"> Insertion d'images </font> </center> <br> <hr> <br> <img src ="PALMIER3.jpg" width ="100" height ="100"> <hr> <img src ="PALMIER.jpg" width ="100" height ="100" align ="right"> </body> </html> <html> <head> <title> arriere plan </title> </head> <body BACKGROUND="PALMIER.jpg"> <h1> Bonjour <h1> </body> </html> 6. Les Listes Fonction Balise Exemple de code Résultat Définir une liste numérotée <OL> <LI>…< /LI> <LI>…< /LI> </OL> <OL> <LI> ETOILE </LI> <LI> BUS </LI> <LI> ANNEAU </LI> </OL> 1. ETOILE 2. BUS 3. ANNEAU Définir une liste non numérotée <UL> <LI>…< /LI> <LI>…< /LI> </UL> <UL> <LI> ETOILE </LI> <LI> BUS </LI> <LI> ANNEAU </LI> </UL>  ETOILE  BUS  ANNEAU Définir une liste de définition <DL> <DT>.. </DT> <DD> …</DD> <DT>.. </DT> <DD> …</DD> </DL> <DL> <DT>A </DT> <DD> Etoile </DD> <DT>B </DT> <DD> Bus </DD> <DT>C </DT> <DD> Anneau </DD> </DL> A. Etoile B. Bus C. Anneau Application 5 : - Réaliser la page Web suivante : Solution : 7. Les tableaux Fonction Balise Exemple de code Résultat Insérer tableau <TABLE > <TR> <TD> L1C1</TD> <TD> L1C2</TD> <TD> L1C3</TD> </TR> <TR> <TD> L2C1</TD> <TD> L2C2</TD> <TD> L2C3</TD> </TR> </table> <TABLE border =2> <TR bgcolor = red align = center> <TD> 1</TD> <TD> 2</TD> <TD> 3</TD> </TR> <TR> <TD> un</TD> <TD> deux</TD> <TD> trois</TD> </TR> </Table> <html> <head> <title> liste </title> </head> <body> <UL> <LI> ETOILE </LI> <LI> BUS </LI> <LI> ANNEAU </LI> </UL> <OL> <LI> ETOILE </LI> <LI> BUS </LI> <LI> ANNEAU </LI> </OL> <DL> <DT>A </DT> <DD> etoile </DD> <DT>B </DT> <DD> bus </DD> <DT>C </DT> <DD> Anneau </DD> </DL> </body> </html> Application page 65 8. Les liens hypertexts Fonction Balise Exemple de code Adressage local sur un poste non- distant <A HREF="file://adresse fichier"> le lien </A> <A HREF="file://C:/4SI/site/TP1.htm"> Page1 </A> Lien vers une page web <A HREF= "http://adresse Web"> le lien </A> <A HREF= "http://www.google.fr"> lien vers google </A> Lien vers une adresse E- mail <A HREF= "mailto:adresse email"> @email </A> <A HREF= "mailto:Foulen@yahoo.fr"> Foulen Ben foulen </A> Lien vers un fichier à télécharger <A HREF= "ftp://adresse ftp"> fichier </A> <A HREF= "ftp://ftp.commentcamarche.net/docs/Html.zip "> fichier html compressé </A> Création d’un signé Lien Interne <A NAME = "nom du signet"> texte </A> <A HREF= "#nom du signet"> le lien </A> <A NAME = "Haut"> Haut de la page </A> <A HREF= "#Haut"> Remonter </A> 8. La création de formulaire HTML a- LE FORMULAIRE Il permet au Client de saisir des Données (Nom, Adresse, Téléphone, Questions diverses. etc..) dans des champs de saisie, de choisir des options dans des Listes puis d'émettre ces données vers le Serveur. On conçoit qu'alors, la direction des Informations est inverse du cas habituel. Elle devient client vers serveur. b-Comment créer un Formulaire ? <form> pour l'ouvrir </form> pour le fermer En fait dans la balise form il faut aussi déclarer une action. C'est-à-dire comment les renseignements acquis par le Formulaire sera acheminés et vers qui ? Prenons le cas où le Formulaire atteindra une Boîte aux lettres (adresse E-Mail) : <form action=« mailto://janoLap@serveur.fr » method=post »> · mailto c'est le protocole de transfert .Il précède l'adresse e-mail de destination des données. · method = get ou =post Dans le cas d'une émission vers E-Mail choisir post si les données sont attendues par le serveur dans une structure query string faisant intervenir l'interface CGI chez ce serveur il faut choisir get. Ici nous ne traiterons que le cas d'émission du formulaire vers une adresse E-Mail. Exemple : <form action=« http://www.serv2.com » method=get > C-Le Champ de saisie à 1 seule Ligne Saisissez un texte.. <input name=« ch1 » name=« TEXT » size = 20 > Champ de saisie de 1 ligne et de longueur 20 caractères ch1 pourrait être le nom choisi pour repèrer ce champ parmi les autres. <input name=« champ2 » name=« TEXT » size=15 maxlenght=25> l'attibut maxlenght permet de fixer le maximum de caractères saissables tout en conservant une zone à l'écran de 15 seulement. Voici un exemple de formulaire utilisant 3 champs de saisie : <html> <head> <title>Exemple n°1 de formulaire</title> </head> <body bgcolor=gray> <form> N'utilisons pas l'attribut action ..Ce sera plus simple durant nos expérimentations. Nom :<input name=« nom » name=« TEXT » size=20 maxlenght=30><br> Prénom :<input name=« pren » name=« TEXT » size=20 maxlenght=30><br> Adresse :<input name=« adr » name=« TEXT » size=50 maxlenght=80><br> </form> </body> </html> En fait dans la balise input on peut utiliser un autre attribut type qui précise le type de donnée attendu :  int valeur numérique entière  float valeur numérique avec décimales  url adresse Internet  date date  password mot de Passe ... Les caractères entrés seront remplacés sur l'écran par « * » Par exemple: Adresse E-Mail : <br> <input name=« adr-mail » size=30 type=url><br> Mot de Passe : <br> <input name=« mdp » size=10 type=password><br> Date : [j/m/a] <br> <input name=« dat » size=15 type =date><br> D-Le Champ de saisie à plusieurs Lignes <textarea name=« chml » rows=3 cols=30> Aire de saisie de 3 lignes et 30 colonnes <textarea name=« remarc » rows=4 cols=40>Notez vos remarques Le uploads/s3/ le-langage-html.pdf