docHTML
download 
Plainte Transcription
HTML
Cours de I21 Voir le chap 2 : cours de Javascript SOMMAIRE I. Introduction sur le langage HTML II. Balises primaires a. mise en forme b. hyperliens c. insérer une image III. Création de listes IV. Création de tableaux V. Création de formulaires I. Introduction au langage HTML Les fichiers HTML contiennent des balises pour : mettre en forme les paragraphes insérer des images insérer des liens hypertextes Il existe trois formes de balises : < Nom balise > ex : <BR> : passage à la ligne <Nom balise> texte concerné </ Nom balise> ex : <B> texte </B> <Nom balise attributs = "valeur" ... > texte concerné </Nom balise> ex : <BODY BG COLOR= "red"> ... </BODY> Il faut 2 parties obligatoires pour une page html : l'en-tête et le corps. L'en-tête done les informations générales sur le document, il contient le titre et les balises méta pour les recherches à partir des moteurs de recherches. Le corps peut contenir des tableaux, sons, images ... Une page HTML contient au minimum 4 balises : balise pour ouverture page html <HTML> <HEAD> <TITLE> titre </TITLE> </HEAD> <BODY> balise pour ouverture en-tête Titre du document qui sera affiché à l'ouverture fin balise balise ouverture corps de texte CORPS DE TEXTE balise fin corps de texte </BODY> </HTML> balise fin page html II. Balises primaires : Mise en forme : paragraphes : <P> texte du paragraphe passage à la ligne : <BR> titres : 6 niveaux de titre : de 1 à 6 <H1> titre </H1> du + grand . . . <H6> titre </H6> au + petit texte en gras : <B> texte </B> texte en italique : <I> texte </I> texte souligné : <u> texte </u> Insérer un fichier sonore : <BGSOUND SRC="url.mid"> insérer une ligne horizontal : <HR> Pour modifier la taille des polices : < FONT SIZE = n> ... </FONT> avec 1<n<7 De même : < BODY BGCOLOR = "..." > : couleur de l'arrière plan < BODY TEXT = "..." > : couleur du texte < BODY LINK = "..."> : couleur des liens Insérer des liens hypertextes : <A HREF = "url" > texte </A> URL = Unified Resource Locator A. Création d'un lien vers un autre endroit du doc : en 2 étapes 1. <A HREF = "#cible" > texte à cliquer </A> 2. <A NAME = "cible"> ... </A> localisé où le lien doit pointer B. Création d'un lien pour l'envoi d'un message : <A HREF = "mailto : [email protected]" > M'envoyer un mail </A> Pour insérer une image : Balise <IMG> Attributs utilisés : SRC : fichier image ALT : spécifier texte à afficher si l'image ne s'affiche pas ALIGN : 5 valeurs possibles (TOP - MIDDLE - BOTTOM - LEFT - RIGHT) HEIGHT ET WIDTH : spécifient la taille de l'image en pixels. Exemple : <IMG HEIGHT = 200 WIDHT = 200 ALIGN = "middle" SRC = "image1.JPG"> III. Création de listes : 1. 2. 3. 4. Listes numérotées Listes à puce Listes de définition Listes de menus 1. Listes numérotées : Utilisation de la balise <OL type = 1 / a /A / i / I> 1 : par défaut, numérotation de 1 à n a : numérotation en lettres minuscules A : numérotation en lettres majuscules i : numérotation en chiffres romains petits I : numérotation en chiffres romains grands Synthaxe : Exemple : <OL> <OL type = a> < LI > ... < /LI> Affichera : a. PHYSIQUE b. CHIMIE <LI> PHYSIQUE </LI> <LI> CHIMIE </LI> < LI > ... < /LI> </OL> </OL> 2. listes à puces Synthaxe : Exemple : <UL> <UL> Affichera : < LI > ... < /LI> PHYSIQUE CHIMIE <LI> PHYSIQUE </LI> <LI> CHIMIE </LI> < LI > ... < /LI> </UL> </UL> 3. Listes de définitions : Balise <DL> qui délimite la zone de liste de définition Balise <DT> qui introduit un nouveau terme Balise <DD> qui donne la description du terme Synthaxe : Exemple : <DL> <DL <DT> Nouveau terme <DD> Description du terme <DT> ... <H1> Liste de termes </H1> <DT> HTML <DD> Hypertext Markup Language <DD> ... <DT> Javascript </DL> <DD> Langage de script </DL> Affichera : Liste de termes HTML Hypertext Markup Language Javascript Langage de script 4. Listes de menus : Synthaxe : Exemple : <MENU> <MENU> <LI> ... </LI> <H2> Matières</H2> <LI> ... </LI> <LI> Physique </LI> <LI> ... </LI> <LI> Chimie </LI> </MENU> Affichera : Matières Physique Chimie </MENU> IV. Les tableaux : Permettent une mise en forme précise du texte, des images, ... Ils sont très utilisés dans les pages Web. Une grande partie des pages Web sont structurées par des tableaux invisibles. Balises : <TABLE> ... </TABLE> Définit le tableau, possiblité d'y mettre plusieurs attributs. <TR> ... </TR> Définit une ligne du tableau <TD> ... </TD> définit les cellules d'une ligne <TH> ... </TH> Définit un titre pour les colonnes, affecté caractère gras centré Exemple : <HTML> <HEAD><TITLE> ..................... </TITLE></HEAD> <BODY> <TABLE BORDER=1> <TR> <TH> Colonne 1 </TH> <TH> Colonne 1 </TH> </TR> Affichera : <TR> <TD> A </TD> A B C D <TD> B </TD> </TR> <TR> <TD> C <TD> <TD> D </TD> </TR> </TABLE> </BODY> </HTML> Attributs : BORDER = "valeur" : épaisseur du cadre CELLSPACING = "valeur" : espace entre les cellules CELLPADING = "valeur" : espace entre le texte et la bordure des cellules WIDTH ou HEIGHT = "valeur % / nb pixels" : largeur et hauteur du tableau Ex : < TABLE BORDER = 1 WIDTH = 50% HEIGHT = 50%> Attributs balises TH / TR / TD : ALIGN : center / left / right : alignement horizontal VALIGN : bottom / middle / top : alignement vertical Attributs balises TH et TD : COLSPAN : fusionne les cellules dans le sens horizontal ROWSPAN : fusionne les cellules dans le sens vertical V. Création de formulaires Les formulaires servent à récupérer les informations fournies par les utilisateurs. Ils comportant toujours un bouton d'envoi qui transmet les informations saisies au programme qui va les traiter. Ils sont délimités par les balises <FORM> ... </FORM>. Ces balises contiennent un ou plusieurs éléments. Néanmoins 2 attributs sont obligatoires : ACTION = "url" : emplacement du programme qui traite les données. METHOD = POST / GET - Méthode d'échange de données entre le client et le programme. On utilisera POST ex : <FORM action="url" method=POST> - l'URL peut être une adresse e-mail par ex (voir chapitre hyperliens) <INPUT> ... </INPUT> - Cette balise permet de créer des éléments interactifs. Synthaxe : <INPUT type="Nom" Value="Valeur par défaut" name="Nom"> Types d'élements de la balise imput : CHECKBOX Cases à cocher FILE Précise l'emplacement du fichier envoyé avec le formulaire IMAGE Personnaliser le bouton d'envoi PASSWORD Rentrer un mot de passe (des étoiles s'afficheront) RADIO Choix parmis plusieurs possiblités RESET Remet tout les champs du formulaires à 0 SUBMIT Bouton d'envoi (préciser texte dans "value") TEXT Champ de saisie de texte <textaera> ... </textarea> : zone de saisie plus grande que balise "text" Attributs : COLS : définit le nombre de caractères par ligne ROWS définit le nombre de lignes <SELECT> permet de créer une liste déroulante d'éléments - Attribut "NAME" : associé au nom du champ Voir l'exercice demandé Il fallait trouver le code de : réponse : Description des thèmes de recherche <form action="url" method="post"> <p>Description des thèmes de recherche <textarea cols="30" rows="8"></textarea></p> Catégorie du papier soumis c d e f g recherche c d e f g état de l'art c d e f g recherche Votre fonction Etudiant <p>Catégorie du papier soumis </p> <p> <input type="checkbox" name="recherche"> recherche<p> <p> <input type="checkbox" name="état de l'art"> état de l'art</p> <p> <input type="checkbox" name="recherche"> recherche</p> <p>Votre fonction </p> <select name="fonction"> <option>Etudiant</option> <option>Chercheur</option> <option>Industriel</option> </select> </form>
