1 Le langage HTML Hyper Text Markup Language Langage hypertexte balises Eric Hitti Eric.Hitti@univ-rennes1.fr.

  • Published on
    03-Apr-2015

  • View
    105

  • Download
    2

Transcript

  • Page 1
  • 1 Le langage HTML Hyper Text Markup Language Langage hypertexte balises Eric Hitti Eric.Hitti@univ-rennes1.fr
  • Page 2
  • 2 L'origine de la page WEB3 Balises de documents8 Balises de mise en page11 Balises de mise en forme13 Balise de listes15 Caractres spciaux16 Les images17 Les liens21 Les tableaux23 Les cadres (frames)28 Les formulaires36 Exemple de php44 Exemples de javascript47 Les styles51 Tables des matires
  • Page 3
  • 3 L'origine de la page WEB Transmettre des informations l'autre bout du monde Le code ASCII=255 caractres L'diteur de texte (Bloc-notes) Le traitement de texte (Word) Le fichier informatique 01000101 01110010 01101001 01100011 E r i c Instructions de mise en forme balises
  • Page 4
  • 4 L'origine de la page WEB : diteur simple - Je veux : Eric - Je visualise le rsultat l'aide d'un navigateur (Netscape) qui interprte le code - Je cr un fichier.HTML Et j'utilise des balises de mise en forme Eric
  • Page 5
  • 5 L'origine de la page WEB : diteur volu - Je veux : Eric en gras - L'diteur modifie le code en insrant les balises au bon endroit - Je slectionne le texte avec ma souris - J'utilise le bouton adquat Eric -Et en mme temps donne un aperu du rsultat Fichier.html Eric
  • Page 6
  • 6 L'origine de la page WEB : un fichier complet La page source en.htm ou.html Elle est cr l'aide d'un simple diteur de texte HTML n'est pas un langage de programmation ! Ce n'est qu'un langage de description de documents. Le navigateur (Netscape) permet de visualiser la page web en interprtant le code
  • Page 7
  • 7 Rgles simples HTML est un langage balises Les balises permettent de raliser des actions sur un groupe de mots texte affect par la balise Ex : HTML met HTML en gras Les balises en minuscules Les balises peuvent recevoir des attributs (options) en Ex : le font d'cran sera en rouge baliseoption
  • Page 8
  • 8 Balises de documents dbut et fin de document lentte du document commentaires Dans la section head barre de titre et sauvegarde de signet les moteurs de recherche utilisent ces informations pour l'indexation Exemples :
  • Page 9
  • 9 Balises de documents le corps du document Options : background="image"image de fond dcran bgcolor="couleur"couleur du fond dcran text="couleur"couleur du texte link ="couleur"couleur des liens non consults alink ="couleur"couleur des liens actifs couleur=(aqua, black, fuschia, gray, green, lime, marroon, navy, olive, purple, red, silver, teal, white, yellow) Les autres couleurs sont dfinie en hexa (#FF0000 =rouge)
  • Page 10
  • 10 Exemple Mon super site bla bla bla et que je te raconte ma vie
  • Page 11
  • 11 Balises de mise en page saut de paragraphe align="Justify/left/right" passage la ligne centrage Insertion dune ligne de sparation Options : size="+n"paisseur du trait noshadesans ombre width="n%"largeur de la ligne align="left | rigth"centr par dfaut
  • Page 12 Exemple"> Exemple"> Exemple" title="12 Balises de mise en page Un paragraphe Premiere ligne Deuxieme ligne Exemple">
  • 12 Balises de mise en page Un paragraphe Premiere ligne Deuxieme ligne Exemple
  • Page 13
  • 13 Balises de mise en forme titre de niveau n (1 6) afficher en gras afficher en italique afficher en soulign barrer le texte Le texte est agrandi dune unit de taille Le texte est diminu dune unit de taille afficher en clignotant exposants indices
  • Page 14
  • 14 Balises de mise en forme Cest un titre de niveau 1 Cest un titre de niveau 2 cest gras en italique souligne 1 er Exemple
  • Page 15
  • 15 Balises de listes Les listes ordonnes coucou recoucou Les liste non ordonnes coucou recoucou
  • Page 16
  • 16 Caractres spciaux > && &nspb; (un blanc) ©
  • Page 17
  • 17 Les images Images de types GIF ou JPEG (PNG) Conseils - Pas dimages de tailles trop importantes - Des petites images cliquables pour voir les grandes - Rcuprer les icnes et images sur dautres sites - Spcifier les valeurs de width et de heigth des images (en pixels) afin d'acclrer l'affichage. Sites dicnes http://www.gifworld.com/ http://www.iconbazaar.com/
  • Page 18 I" title="20 Les images ractives : exemple Dfinition des zones cliquables I">
  • 20 Les images ractives : exemple Dfinition des zones cliquables Image associe la partition Exemple http://www.univ-rouen.fr/pharmacie/facultes/france2.html Options: Circle poly
  • Page 21
  • 21 Les liens vers un document distant : zone cliquable option: target="_blank" ou "nomduframe" vers un document local : zone cliquable vers une partie prcise du document : zone cliquable Le point atteindre doit tre marqu par : texte Image ou texte
  • Page 22
  • 22 Les liens : autres vers un courier lectronique : zone cliquable exemple pour m'ecrire vers un serveur ftp : zone cliquable vers un serveur telnet : zone cliquable Image ou texte
  • Page 23
  • 23 Les tableaux Ils permettent dorganiser le texte et les images avec ou sans visualisation des cadres border="n"contour dpaisseur n (0 pas de contour) cellpading="x"espace entre le texte et le contour de cellules cellspacing="x"paisseur du trait entre les cellules width="y"largeur du tableau (en pixel ou en %) height="y"hauteur du tableau (en pixel ou en %) bgcolor="red"couleur de fond du tableau align="left"left, center ou right
  • Page 24
  • 24 Tableau : les lments Titre dun tableau : caption le titre du tableau align="bottom" (ou "top")position du titre Les lignes : tr align= "center" (right, left)alignement horizontal valign="top" (middle, bottom) alignement vertical
  • Page 25
  • 25 Tableau : les lments Les lments de la lignes : td colspan="n"la cellule stend sur n colonnes rowspan="n" la cellule stend sur n lignes donne une cellule vide sans bordure   donne une cellule vide avec bordure Cellule titre : th quivalent td mais le texte est automatiquement centr et gras
  • Page 26
  • 26 Tableau : exemple
  • Page 27
  • 27 Tableau : exemple Pour construire un tableau on raisonne par ligne. On commence par construire un tableau avec le maximum de lignes et de colonnes ncessaires, ici 4 lig 5 col Puis ligne par ligne on dfinit les fusions s'il y en a, et on ne redfinit pas une cellule qui a dj t fusionn la ligne prcdente 3c en lig2c col rien 2c col rien 1c
  • Page 28
  • 28 Comparatif modle conomique Modle Vitesse en km/heure Consommation en litre/100 km Marque Type Numro de serie Peugeot 106 b2 234.34 132 5,7 Citron AX AT67B8 6789 126 5,5 Tableau : exemple
  • Page 29
  • 29 Les cadres ou Frames permettent de diviser une page HTML en plusieurs zones (ou cadres), chacune pouvant afficher, indpendamment des autres, une pages HTML Intrt afficher en permanence certaine informations : - boutons de navigations, - table des matires, - logos, -
  • Page 30
  • 30 Les frames : syntaxe un fichier dfinit la partition de lcran il ny a plus de balise body la balise FRAMESET partitionne une fentre la balise FRAME dfinie le contenue dune fentre
  • Page 31
  • 31 Les frames : syntaxe FRAMESET 1 FRAMESET 2 FRAME 1 FRAME 2 FRAME 3
  • Page 32
  • 32 Les frames : structure dautres frames ou dautres frameset pour les navigateurs ne grant pas les frames
  • Page 33
  • 33 Les frames : attributs de FRAMESET rows = "n, n%, ,* " divise la zones en cellules horizontales nhauteur en nombre de pixels n%hauteur en % de lcran *hauteur restante cols = "n, n%, ,*" divise la zones en cellules verticales border="n" taille de la bordure en pixels frameborder =" yes" | "no" dtermine si la frontire entre deux cadres doit tre visible ou non (yes par dfaut) bordercolor = "couleur" dtermine la couleur des frontires
  • Page 34
  • 34 Les frames : attributs de FRAME name="nom"le nom du cadre src = "url"le document afficher marginwidth="n"taille de la marge (pixels) marginheight = "n"nombre pixels entre la frontire haute/basse et le document scrolling ="yes/no/auto"barre de droulement noresizeempche de modifier la taille laide de la souris
  • Page 35
  • 35 Les frames : exemple Dommage votre Browser ne permet pas les frames
  • Page 36
  • 36 Les frames : exemple cadre1 cadre2 cadre3
  • Page 37
  • 37 Les formulaires Entre les balises on trouve les balises dfinissant les lments du formulaire du texte prcisant le rle des lments Attributs method = GET ou POST Dfinit la mthode de transfert des donnes action quel script doit tre appel pour traiter le formulaire action ="mailto:Eric.Hitti@univ-rennes1.fr" action="confirmation.php3" name="nom_du_formulaire" enctype="MULTIPART/FORM-DATA" (pour le php) ="text/plain" (pour le mail) target si ncessaire il prcise l'endroit ou doit tre renvoy les informations
  • Page 38
  • 38 Les formulaires : les lments dfinit un lment du formulaire Attribut name="Nom_Champ"nom de la variable Attribut size="nb", taille en nb de caractres Attribut value="Valeur"valeur par dfaut Permet la saisie avec affichage * la place de chaque caractre Attribut name="Nom_Champ"nom de la variable Attribut name="Nom_Champ"nom de la variable Attribut value="Texte"texte affich sur le bouton
  • Page 39
  • 39 Les formulaires : les lments provoque le transfert des donnes du formulaire vers le serveur Attribut name="Nom_Champ"nom de la variable Rinitialise le formulaire Attribut name ="Nom_Champ"nom de la variable Attribut value="Texte"texte affich sur le bouton Attribut name ="Nom_Champ"nom de la variable Attribut value ="valeur" valeur fourni au serveur Attribut checked,il permet de slectionner un bouton par dfaut dans un ensemble de boutons portants le mme nom (NAME), un seul bouton peut avoir cette valeur
  • Page 40
  • 40 Les formulaires : les lments ensemble de cases cocher Attributs : name="Nom_Ensemble"nom de la variable value="valeur" valeur associ la case checked, tat initial de la case, plusieurs cases peuvent tre coches permet de crer une zone de saisie de texte de plusieurs lignes Attributs : name="Nom_Zone"nom de la variable rows="nl" nombre de lignes cols="nc" nombre de colonnes
  • Page 41 1 ascenseur, si nb=1 menu droulant Attribut multiple autorise la slection de plusieurs items Attribut value="valeur" valeur transmise au serveur Attribut selected valeur d'option qui apparat en premier Exemple Bleu Blanc Rouge">
  • 41 Les formulaires : les lments Liste options, menus droulant ou ascenseur, choix dfinit par Attribut name="Nom_Liste" Attribut size="nb" nb d'lments visibles simultanments si nb>1 ascenseur, si nb=1 menu droulant Attribut multiple autorise la slection de plusieurs items Attribut value="valeur" valeur transmise au serveur Attribut selected valeur d'option qui apparat en premier Exemple Bleu Blanc Rouge
  • Page 42
  • 42 Les formulaires : exemple Nom : Mot de passe Enseignant Etudiant Choisir le mois du stage septembre octobre novembre decembre Taper vos commentaires
  • Page 43
  • 43 Les formulaires : exemple
  • Page 44
  • 44 Les formulaires : rsultat
  • Page 45 ">
  • 45 Un exemple de php : confirmation.php3 Je veux que l'envoie du formulaire provoque les actions suivantes : Vrifier que le mot de passe est bon Vrifier que tous les Nom et Mois ont t rempli Donner les erreurs correspondantes Confirmer le bon droulement de l'inscription Ajouter l'inscription dans un fichier texte Envoyer un mail spcifiant l'inscription On modifie le formulaire prcdent
  • Page 46

Recommended

View more >