Initiation au HTML 
M. DIENG Abdoulaye Août 2014
Objectif général 
Concevoir la structure sémantique du contenu d’un site web 
2
Les objectifs opérationnels 
Formater du texte, des listes et des liens 
Afficher une image simple ou cliquable 
Établi...
Le sommaire 
1. Présentation du HTML 
2. La structure d’une page HTML 
3. Le texte 
6. Les listes 
7. Les liens 
8. Les im...
Présentation du HTML 
 HTML (HyperText Markup Language) est un langage chargé de : 
• structurer sémantiquement une page ...
Structure d'un document 
élément, balise et attribut 
 Une page HTML est structurée par des éléments sémantiques qui 
don...
Structure d'un document 
éléments de base 
 Les éléments de base d’une page HTML sont: 
• html qui délimite la page et co...
Structure d'un document 
intro.html 
8 
<html> 
<head> 
<meta http-equiv="content-type" 
content="text/html; charset=utf-8...
Le texte 
présentation 
 Le texte est le moyen le plus courant pour transmettre un 
message sur une page web. 
 Un texte...
Le texte 
codage 
 h1, h2,…, h6 : délimitent les titres et sous titres dans la page 
 <br>: effectue un simple retour à ...
 Pour s’assurer que les caractères spéciaux (lettre accentuée, 
lettre grecque, symbole mathématique ou tout caractère no...
Le texte 
texte.html 
Titre de niveau 1 
12 
Titre de niveau 2 
accent 
accent 
Ligne suivante 
Titre de niveau 2 Trait ho...
Les listes 
présentation 
• Une liste est une suite de données généralement simples. 
• Une liste ne doit pas être contenu...
Les listes 
codage 
 ul (unordered list) : délimite une liste non 
numérotée 
li (list item) : enfant de ul, délimite un ...
Les listes 
listes.html 
15
Les liens 
présentation 
 Les liens hypertextes sont l'essence même du World Wide 
Web, qui n'existerait pas s'il était i...
Les liens 
codage 
 L’élément a permet de créer un hyperlien. 
 Principaux attributs: 
• href : précise le chemin de la ...
Les liens 
lien intra-page 
<h1 id="haut"> premier titre</h1> Premier titre 
<p><a href="#haut"> haut de page </a></p> 
ha...
Les liens 
signet inter-pages (même dossier) 
site 
page1.html 
page2.html 
page2.html 
<h3 id="fin"> Dernier titre</h3> 
...
Les liens 
signet inter-pages (niveaux différents) 
page2.html 
<h3 id="fin"> dernier titre</h3> 
page1.html 
site 
page1....
Les liens 
signet inter-pages (dossiers différents) 
page2.html 
<h3 id="fin"> dernier titre</h3> 
site 
rep1 
page1.html ...
Les liens 
application 
Dans le fichier texte.html: 
1. A la fin du contenu, ajouter et tester un lien vers Google et un 
...
Les images 
présentation 
 Avantage : « une image vaut mille mots » 
 Inconvénient : sa taille peut retarder le chargeme...
Les images 
principaux formats Web 
Format Couleurs Compression Usage 
jpeg 
(Joint 
Photographic 
Experts Group) 
16 777 ...
Les images 
codage 
 <img src="adresse/relative/de/ l'image" > : 
affiche l'image avec ses dimensions intrinsèques 
 Aut...
Les images 
image.html 
1. Créer un dossier nommé « images » dans le répertoire de 
travail (répertoire qui contient les f...
Les tableaux 
présentation et codage 
 Un tableau permet de présenter l’information d’une manière 
concise 
 Un tableau ...
Les tableaux 
suite du codage 
 td (table data) : enfant de tr, délimite une cellule d’une ligne 
– valign et align (prio...
Les tableaux 
tableau.html 
Indications 
• Le tableau est quadrillé et occupe 80% de la page 
• Toute fusion de cellules d...
Les formulaires 
présentation 
 Les formulaires permettent d’interagir avec l'internaute. 
 Parmi leurs utilisations cou...
Les formulaires 
élément form 
form délimite un formulaire et ses principaux attributs sont : 
 action="adresse_script_ci...
Les formulaires 
élément input 
input, enfant de form, définit une zone de saisie, une case à 
cocher, un bouton, etc. Ses...
Les formulaires 
élément select 
 select : délimite une liste déroulante ou non 
– name="nomDuChamp" 
– size="n": n optio...
Les formulaires 
élément textarea 
 textarea: délimite une zone de saisie multilignes 
– name: nom transmis 
– rows="n ":...
Les formulaires 
éléments d’accessibilité 
 label : permet d‘associer un texte « cliquable » à un élément de 
formulaire....
Les formulaires 
formulaire.html 
36
Prochain SlideShare
Chargement dans…5
×

Initiation au html

602 vues

Publié le

objectif général :Concevoir la structure sémantique du contenu d’un site web

objectifs opérationnels :
Formater du texte, des listes et des liens
Afficher une image simple ou cliquable
Établir un tableau
Concevoir un formulaire

Publié dans : Logiciels
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
602
Sur SlideShare
0
Issues des intégrations
0
Intégrations
4
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Initiation au html

  1. 1. Initiation au HTML M. DIENG Abdoulaye Août 2014
  2. 2. Objectif général Concevoir la structure sémantique du contenu d’un site web 2
  3. 3. Les objectifs opérationnels Formater du texte, des listes et des liens Afficher une image simple ou cliquable Établir un tableau Concevoir un formulaire 3
  4. 4. Le sommaire 1. Présentation du HTML 2. La structure d’une page HTML 3. Le texte 6. Les listes 7. Les liens 8. Les images 9. Les tableaux 10. Les formulaires 4
  5. 5. Présentation du HTML  HTML (HyperText Markup Language) est un langage chargé de : • structurer sémantiquement une page Web • mettre en forme une page Web • lier des contenus sur le Web  Le HTML permet, entre autres, de : • publier des documents en ligne contenant du texte, des tableaux, des listes, des images,…; • retrouver des informations en un clic de souris; • concevoir des formulaires permettant de faire des recherches, d’effectuer des réservations, de commander des produits, …; • insérer directement des documents dans d'autres formats, des sources vidéo et sonores et d'autres applications. 5
  6. 6. Structure d'un document élément, balise et attribut  Une page HTML est structurée par des éléments sémantiques qui donnent un sens à son contenu.  Tout élément est matérialisé par une (ou deux) balise(s) délimitée(s) par les chevrons < et >. • Exple de balises ouvrante et fermante : <abbr> Mlle</abbr> • Exples de balises uniques : <br>, <img>  Toute balise ouvrante peut être munie d’attributs prenant des valeurs.  Ces attributs apportent des informations supplémentaires et souvent indispensables pour le contenu associé. Exemples de balises munies d’attributs : <abbr title="Mademoiselle"> Mlle </abbr> <img src="chemin/du/fichier-image" >  Les valeurs des attributs doivent être entre des guillemets. 6
  7. 7. Structure d'un document éléments de base  Les éléments de base d’une page HTML sont: • html qui délimite la page et contient ainsi les autres éléments • head qui délimite les métadonnées et éventuellement les informations nécessaires à l’affichage (CSS) et à l’interactivité (JS) du contenu de la page ; • title (« enfant de head ») qui délimite le titre de la page ou de la fenêtre tel qu'il est montré dans la barre de titre du navigateur; • body qui délimite le contenu, la partie « visible » de la page  Les commentaires sont délimités par les signes <!-- et -->. <!-- ceci est un commentaire -->  Les commentaires sont destinés à fournir une aide-mémoire, des informations ou des instructions à la personne visualisant ou rédigeant le code.  Le navigateur ignore les commentaires. 7
  8. 8. Structure d'un document intro.html 8 <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Ma première page HTML</title> </head> <body> <!-- la ligne suivante est le contenu de la page --> Bonjour tout le monde !!! </body> </html>
  9. 9. Le texte présentation  Le texte est le moyen le plus courant pour transmettre un message sur une page web.  Un texte peut être composé d'un titre et de plusieurs paragraphes annoncés par des sous-titres.  Sans oublier les degrés d’importance de certains mots, les abréviations, les acronymes et la mise en indice ou en exposant. 9
  10. 10. Le texte codage  h1, h2,…, h6 : délimitent les titres et sous titres dans la page  <br>: effectue un simple retour à la ligne  p: délimite un paragraphe en produisant un double br  <hr> : insère un trait horizontal comme séparateur  em: délimite une insistance raisonnable (en italique)  strong: délimite une insistance assez forte (en gras)  abbr: délimite une abréviation (explicitée par l’attribut title)  acronym: délimite une abréviation (explicitée par l’attribut title) composée des initiales du terme.  sub: délimite un texte, généralement très court, en indice.  sup: délimite un texte en exposant. 10
  11. 11.  Pour s’assurer que les caractères spéciaux (lettre accentuée, lettre grecque, symbole mathématique ou tout caractère non ASCII) soient correctement affichés par tous les navigateurs, il faut les coder.  Caractères accentués : &LettreCode_accent; code_accent : acute(aigu), grave(grave), circ(^), uml(¨), tilde(~) Exemples: &eacute; (é), &acirc; (â), &uuml; (ü)  Autres caractères : &ccedil; (ç), &copy; (©), &amp; (&), &nbsp;(espace insécable), &quot; ("), &gt; (>), &lt; (<), &laquo;(« ), &raquo;(»), &oelig;(oe), &euro(€), &deg;(°), &reg;(®), etc. http://www.erwanhome.org/web/guide-html/chapitre2.php 11 Le texte les caractères spéciaux
  12. 12. Le texte texte.html Titre de niveau 1 12 Titre de niveau 2 accent accent Ligne suivante Titre de niveau 2 Trait horizontal Paragraphe acronyme Abréviation accent indice exposant Mise en relief Paragraphe
  13. 13. Les listes présentation • Une liste est une suite de données généralement simples. • Une liste ne doit pas être contenue dans un paragraphe mais peut être annoncée par celui-ci. • Il y’a trois types de listes: – Listes non-ordonnées utilisées lorsqu'il n'y a pas d'ordre prédéfini pour leurs items. Le type de puces se fait via les feuilles de style (CSS). – Listes numérotées utilisées lorsque les items sont ordonnées. Le type de numérotation se fait via les CSS. – Listes de définitions utilisée pour l'affichage d'une liste possédant des termes accompagnés de leurs définitions respectives. 13
  14. 14. Les listes codage  ul (unordered list) : délimite une liste non numérotée li (list item) : enfant de ul, délimite un élément de la liste  ol (ordered list) : délimite une liste numérotée li : enfant de ol, délimite un élément de la liste  dl (definition list) : délimite une liste de définition dt (definition term) : enfant de dl, délimite un terme de la liste dd (definition description) : enfant de dl, délimite une description d’un terme de la liste 14
  15. 15. Les listes listes.html 15
  16. 16. Les liens présentation  Les liens hypertextes sont l'essence même du World Wide Web, qui n'existerait pas s'il était impossible de naviguer d'un contenu à l'autre.  Cliquer sur un lien permet de naviguer vers : – un autre endroit d’une même page ; – une autre page du même site – un document quelconque – un autre site web – un autre service d’Internet  En général, un lien est indiqué par du texte souligné ou par un changement d’apparence du pointeur de la souris.  Dans un navigateur, le passage du pointeur sur un lien fait afficher la cible sur la barre d’état 16
  17. 17. Les liens codage  L’élément a permet de créer un hyperlien.  Principaux attributs: • href : précise le chemin de la cible • title : explicite la cible (info bulle sur navigateur graphique)  Lien extra-site: <a href="URL_de_la_cible"> texte pour l’internaute </a>  Lien intra-page: 1. créer le point d’ancrage en rajoutant à n’importe quelle balise (de la partie qui sera ciblée) l’attribut id avec un identifiant comme valeur. 2. créer le lien vers la partie identifiée par identifiant avec : <a href="#identifiant"> texte pour l’internaute </a>.  Liens intra-site : <a href="chemin/relatif/de/la/cible"> texte pour ... </a> <a href="chemin/rel/de/la/page.html#identifiant"> texte <1/7a>
  18. 18. Les liens lien intra-page <h1 id="haut"> premier titre</h1> Premier titre <p><a href="#haut"> haut de page </a></p> haut de page 18
  19. 19. Les liens signet inter-pages (même dossier) site page1.html page2.html page2.html <h3 id="fin"> Dernier titre</h3> page1.html <p> <a href="page2.html#fin"> Aller au dernier titre de la page 2 </a> </p> Dernier titre Allez au dernier titre de la page 2 19
  20. 20. Les liens signet inter-pages (niveaux différents) page2.html <h3 id="fin"> dernier titre</h3> page1.html site page1.html rep page2.html <p> <a href="rep/page2.html#fin"> Bas de page 2 </a> </p> 20
  21. 21. Les liens signet inter-pages (dossiers différents) page2.html <h3 id="fin"> dernier titre</h3> site rep1 page1.html rep2 page2.html page1.html Remonter d’un dossier <p> <a href="../rep2/page2.html#fin"> Bas de page 2 </a> </p> 21
  22. 22. Les liens application Dans le fichier texte.html: 1. A la fin du contenu, ajouter et tester un lien vers Google et un lien permettant un envoi de courriel au webmaster 2. a) Répéter plusieurs fois le code source de la partie en dessous du trait horizontal pour rallonger la page b) Juste après la dernière copie du code précité, créer un lien permettant d’afficher le titre de la leçon 3. Créer un lien vers la pages listes.html 4. Créer un lien permettant d’afficher la liste de définition de la page listes.html. NB : rallonger d’abord la page listes.html en répétant par exemple plusieurs fois le code des listes non ordonnée et ordonnée, juste avant celui de la liste de définition. 22
  23. 23. Les images présentation  Avantage : « une image vaut mille mots »  Inconvénient : sa taille peut retarder le chargement de la page  Solution : compression (réduction de la taille)  Deux principales techniques de compression : – compression destructive : supprimer des couleurs qu’un humain n’est pas censé déceler. Cependant un fort taux de compression peut entamer la qualité de l’image. – compression non destructive : ce type de compression ne détruit absolument pas l'image 23
  24. 24. Les images principaux formats Web Format Couleurs Compression Usage jpeg (Joint Photographic Experts Group) 16 777 216 destructive Photographies gif (Graphics Interchange Format) 256 Non destructive Logos, images animées, transparence à 2 niveaux (transparent ou opaque). png 8 bits (Portable Network Graphic) 256 Non destructive Boutons graphiques , flèches de navigation et petites icônes png 24 bits 16 777 216 Non destructive Logos, boutons graphiques détaillés, captures d’écran et transparence à plusieurs niveau24x
  25. 25. Les images codage  <img src="adresse/relative/de/ l'image" > : affiche l'image avec ses dimensions intrinsèques  Autres attributs de img: • width=? : largeur (en pixels ou en pourcentages) • height=?: hauteur (en pixels ou en pourcentages) • alt="court texte descriptif de l’image": texte alternatif obligatoire pour que tout agent (malvoyants, navigateur texte, incidents techniques, robots) ne pouvant voir l’image puisse avoir un texte alternatif. • title : expliciter l’image (info bulle sur navigateur graphique)  Image lien: <a href="adresse/relative/de/la/cible"> <img src="adresse/relative/de/l’image_lien" > </a> 25
  26. 26. Les images image.html 1. Créer un dossier nommé « images » dans le répertoire de travail (répertoire qui contient les fichiers texte.html et listes.html) 2. Mettre une image dans le dossier images. (Ce dossier ne doit contenir que des images) 3. A l’aide d’un éditeur, créer le fichier image.html chargé d’afficher l’image par un navigateur. image.html sera enregistré dans le répertoire de travail NB : tester tous les attributs de img 26
  27. 27. Les tableaux présentation et codage  Un tableau permet de présenter l’information d’une manière concise  Un tableau (table) est constitué de lignes (rows), elles-mêmes constituées de cellules qui contiennent les données (data).  table : délimite un tableau – border="n": épaisseur des bordures du tableau et des cellules – align="left|right|center": alignement horizontal du tableau – width="n%": largeur relative du tableau – summary= "texte descriptif du contenu du tableau pour les navigateurs brailles ou vocaux"  tr (table row) : enfant de table, délimite une ligne du tableau – valign="middle|top|bottom": alignement vertical – align="left|right|center": alignement horizontal 27
  28. 28. Les tableaux suite du codage  td (table data) : enfant de tr, délimite une cellule d’une ligne – valign et align (prioritaire sur <tr>) – colspan="n" : fusion horizontale de n cellules – rowspan="n" : fusion verticale de n cellules NB : un rowspan annexe la (ou les) cellule(s) de la (ou des) ligne(s) inférieure(s)  Ajouter de la sémantique à un tableau en : – donnant une légende (ou titre) au tableau avec l’élément caption juste après la balise ouvrante <table> . L’élément caption délimite la légende avec comme attribut align = "top|bottom" – remplaçant les td qui contiennent des en-têtes (de ligne et/ou de colonne) par des th (table header). 28
  29. 29. Les tableaux tableau.html Indications • Le tableau est quadrillé et occupe 80% de la page • Toute fusion de cellules de ce tableau est constituée de 2 cellules • Par défaut, à l’affichage : 29 - une donnée entête est centrée et est en gras - une donnée simple est à gauche et n’est pas en gras - un titre de tableau est au dessus du tableau
  30. 30. Les formulaires présentation  Les formulaires permettent d’interagir avec l'internaute.  Parmi leurs utilisations courantes on peut noter : • récupérer des informations sur l'utilisateur; • procéder à des authentifications ; • permettre à l'utilisateur de contribuer à un site ; • opérer des recherches ou sélections sur le site ;  L'internaute entre les données en remplissant des champs texte (une ou +sieurs lignes), en cochant une (ou +sieurs) case(s) ou en sélectionnant un (ou des) élément(s) dans une liste.  Ensuite l'internaute soumet les données en cliquant sur un bouton de soumission.  La soumission envoie les données généralement à un script côté serveur sous forme de paires nom/valeur, c'est-à-dire un ensemble de données représentées par le nom de l'élément de formulaire, le caractère "=", puis la valeur associée. 30
  31. 31. Les formulaires élément form form délimite un formulaire et ses principaux attributs sont :  action="adresse_script_cible" script côté serveur qui traitera les données du formulaire.  method="get|post" • spécifie la méthode HTTP employée pour envoyer les données du formulaire à l'agent de traitement. • "get", valeur par défaut, annexe les données du formulaire à l'URL du script cible (ex : script.php?nomChamp1=valeur1&nomChamp2=valeur2& ...) • "post" est la valeur qui incorpore les données du formulaire dans la requête HTTP.  enctype="multipart/form-data" si un fichier doit être joint au formulaire 31
  32. 32. Les formulaires élément input input, enfant de form, définit une zone de saisie, une case à cocher, un bouton, etc. Ses principaux attributs sont :  name= "nomDuChamp" (attribut obligatoire) indique au script l’emplacement de la donnée transmise  type= "text |password |checkbox |radio | submit |file " précise le type de l’élément.  value="valeurTransmise" obligatoire lorsque type≠ "text|password|file"  checked="checked" pré-selectionne un bouton radio ou une case checkbox 32
  33. 33. Les formulaires élément select  select : délimite une liste déroulante ou non – name="nomDuChamp" – size="n": n options visibles d’une liste non déroulante – multiple = "multiple": permet le choix multiple dans une liste non déroulante. ( Dans ce cas, name = "nomDuChamp[ ]")  option : enfant de select, délimite un choix dans une liste – value : valeur transmise si l’option délimitée est choisie – selected = "selected": pour pré-sélectionner une option 33
  34. 34. Les formulaires élément textarea  textarea: délimite une zone de saisie multilignes – name: nom transmis – rows="n ": nombre de lignes visibles – cols="n ": nombre de caractères visibles par ligne 34
  35. 35. Les formulaires éléments d’accessibilité  label : permet d‘associer un texte « cliquable » à un élément de formulaire. Cette relation entre le texte (délimité par label) et l’élément peut se faire en donnant la même valeur à l'attribut for du label et à l'attribut id de l’élément.  fieldset : organise un formulaire en plusieurs sous parties ou thèmes qu’il délimite.  legend : enfant de fieldset, permet de donner un titre à chacun des thèmes. Cet élément délimite le titre de la sous-partie 35
  36. 36. Les formulaires formulaire.html 36

×