Les principales balises HTML
Le codage en langage html permet de structurer le contenu de la page en attribuant une place particulière à chaque élément la composant.
Beaucoup de balises du langage HTML ont été "dépréciées" depuis la création de ce langage. Nous verrons donc dans un premier temps les balises qui servent à structurer le document. A la suite, figure une liste plus complète des balises html, incluant celles de mise en forme. (cette fonction est désormais dévolue au langage CSS).
Les principales balises en ligne
Balise Commentaires
Elle s'accompagne de l'attribut href, qui renferme la cible du lien (son contenu représentant le texte à cliquer pour activer le lien).
Met en emphase une portion de texte.
Quand la police utilisée est droite, la plupart des navigateurs graphiques la traduisent comme une mise en italique.
Cette balise s'accompagne des attributs alt (texte alternatif) et src (qui indique le chemin vers l'image).
la balise ![]()
est une balise autofermante et à la fin avant de refermer la balise, on y insère le caractère /.
Balise utilisée pour les citations courtes, en ligne.
Pour les citations plus longues, on utilisera la balise bloc .
Conteneur en ligne générique, dépourvu d'un sens précis, mais qui peut servir à regrouper d'autres éléments au fil du texte.
Son écuivalent est l'élément
.
Indique un renforcement, généralement représenté en gras dans les navigateurs graphiques.
Cette balise renvoie à la ligne.
Les principales balises de type bloc
Balise Commentaires
Par défaut, certains navigateurs prévoient une marge gauche aux blocs de citation, qu'on pourra bien sûr modifier en css.
Conteneur générique de type bloc.
Cette balise n'apporte pas de sens spécifique, comme . Elle sert à regrouper d'autres balises bloc ou en ligne.
Titre.
Sert à définir un titre de première importance pour h1, un sous-titre pour h2, un sous-sous titre pour h3, etc... jusqu'à h6.
Paragraphe.
Sert à définir un paragraphe.
- Liste de définitions.
Cette balise sert à structurer les éléments associant des définitions ou contenus à des termes ou à des titres.
Ces listes distinguent les titres (
des éléments de définition ().
- et
- Liste à puces ou ordonnée.
Sert à dresser une liste ordonnée. Chaque élément de liste est encadré par la balise
.
Mettre les caractères en forme
... Texte en gras
... Agrandissement de la taille des caractères
Texte clignotant (Netscape seul)
... Texte en italique
...
Texte en couleur où XXXXXX est une valeur hexadécimale
... Taille des caractères où
X est une valeur de 1 à 7
... Texte en italique
de ligne des navigateurs
... Texte préformaté, soit avec affichagede tous les espaces et sauts de ligne
... Réduction de la taille des caractères
... Mise en gras du texte
... Texte en indice
... Texte en exposant
... Texte souligné
Mettre le texte en forme
Commentaire ignoré par le navigateur
A la ligne
...
Citation (introduit un retrait du texte)
...
Centre l'élément encadré par le tag...
Aligne l'élément à gauche...
Aligne l'élément à droiteTitre centré
Titre aligné à gauche
Titre aligné à droite
...
...
...
...
Nouveau paragrapheParagraphe centré
Paragraphe aligné à gauche
Paragraphe aligné à droite
Listes
Liste non numérotée (dite à puces)
Elément de liste
Liste numérotée
Elément de liste
Liste de glossaire
Terme de glossaire (sans retrait)
Explication du terme (avec retrait)
Ligne de séparation
Trait horizontal (centré par défaut)
Largeur du trait en %
Largeur du trait en pixels
Hauteur du trait en pixels
Trait centré (défaut)
Trait aligné à gauche
Trait aligné à droite
Trait sans effet d'ombrage
Hyperliens
Fixe la couleur des liens (à placer dans la balise body)
Fixe la couleur des liens visités (toujours dans body)
... Lien vers une page Web
... Lien vers une adresse eMail
... Lien vers la page locale fichier.html
située dans le même répertoire
... Définition d'une ancre
... Lien vers une ancre
Images
Insertion d'une image au format Gif ou Jpg(voir liens pour l'adressage)
( a comme effet d'accélérer l'affichage de la page)
Aligne l'image en bas
Aligne l'image au milieu
Aligne l'image en haut
Aligne l'image à gaughe
Aligne l'image à droite
Espacement vertical entre l'image et le texte
Colorie le fond dans la couleur de votre choix
Place l'image mentionnée comme fond de page
Fixe le fond de page tandis que le texte défilera par dessus
Sons et Vidéos
Insertion d'un fichier son
Indique la taille du panneau de commande
(largeur et hauteur en pixels)
Modifie le volume sonore de démarrage
(par défaut, il est fixé à 60)
Le fichier se répètera en boucle une fois lancé
Le fichier se lancera tout seul à l'arrivée du visiteur
Le panneau de commande est caché
(intéressant si votre fichier démarre tout seul)
Tableau
...
Définition d'un tableau
Largeur du tableau en %
Largeur du tableau en pixels
Largeur de la bordure
Espace entre la bordure et le texte
Epaisseur du trait entre les cellules
... Ligne du tableau
...
Cellule du tableau
Couleur d'une cellule de tableau
Largeur de colonne en %
Largeur de colonne en pixels
Texte dans la cellule centré
Texte dans la cellule aligné à gauche
Texte dans la cellule aligné à droite
Alignement vers le bas du contenu d'une cellule
Centrage vertical du contenu d'une cellule
Alignement vers le haut du contenu d'une cellule
Nombre de cellules à fusionner horizontalement
Nombre de cellules à fusionner verticalement
Cadres ou "Frames"
Définit une structure de frames
(remplace alors le tag BODY)
Fichier affiché dans une fenêtre de frames
pour les frames
Fichier Html
... Début et fin de fichier Html
... Zone d'en-tête d'un fichier Html
... Début et fin du corps du fichier Html
Couleur d'arrière-plan (en hexadécimal)
Image d'arrière-plan
Balises de formulaires
Début et fin de la zone de formulaire. Entre ces deux balises, on place toutes les balises relatives aux boutons, cases à cocher ou boites de dialogues.
permet de recevoir le résultat du formulaire sous forme de mail à l'adresse mentionnée
football
insère une case à cocher (on peut cocher plusieurs cases à la fois) dont la valeur (football) sera associée à la variable (sport)
football
insère une case à cocher (on ne peut cocher qu'une seule case à la fois) dont le contenu sera associé à la variable "observations"
insère une boîte de texte qui permet au visiteur de rentrer librement des caractères dans un espace prévu à cet usage.dont la valeur (football) sera associée à la variable (sport préféré)
Insère un bouton "ENVOYER" indispensable pour soumettre tout fomulaire. En cliquant sur ce bouton, le visiteur déclenche l'envoi des données du formulaire qu'il vient de remplir vers l'adresse indiquée dans la balise d'envoi (action mailto)
Balises de référencement
Permet de décrire votre site au moteur de recherche. Ce sont ces quelques lignes qui apparaissent dans le résultat de la recherche.
Permet de spécifier les mots-clés de votre page et de placer votre site en bonne place lors des recherches sur un thème donné.
Permet de spécifier le nom de l'auteur du document.
Ceci est en général placé automatiquement lorsque vous utilisez un générateur de source WYSIWYG tel que DreamWeaver ou Front Page. a titre de rappel abonnez vous a mon newsletter pour recevoir des mises a jour pour se tutoriel .
Aucun commentaire:
Enregistrer un commentaire