Cours HTML
Qu’est ce que le HTML ?
Le HTML (HyperText Markup Language) est un format de présentation de données permettant de créer des pagesweb pouvant être lues dans des navigateurs.
C'est un langage de description de données, et non un langage de programmation. Il est figé c.à.d. qu'une fois le document chargé dans le navigateur, il ne répond à aucune action de l'utilisateur sur le contenu de la page.
Ce langage est pourvu d'un système de balisage qui va permettre de structurer le document.
Il utilise une Grammaire à base de Marqueurs ou Balises
Balises HTML
Une balise HTML est un élément que l'on va ajouter au texte à afficher pour dire au navigateur de quelle manière l'afficher. Elle n'est pas affichée telle quelle dans lenavigateur, elle est interprétée par celui-ci.syntaxe:
(Balise standard )
- Une balise est toujours délimitée par les signes et >
- Chaque balise ouverte doit être fermée, cependant il existe des exceptions exemple:
Balises HTML
Attributs d’une balise
- Ce sont des informations complémentaires caractérisant une balise.
- Une balise peut comporter de zéro à plusieurs attributs.
forme: nom_attribut="valeur"exemple: lang="fr">
Balises simples –balises doubles
Deux types de balises : balises simples
Balises dites "vides": ne contiennent aucune autre balise HTML Ces balises n'ont pas besoin d'être fermées.
exemple
(insertion d’une image)
balisesdoubles
Deux balises ouvrantes/fermantes, entre lesquelles sont situées d'autres balises ou du texte.
La balise fermante: identique à la balise ouvrante. contient un "/" pour indiquer la fermeture.
exemple:
ici du texte ou tout autre balise
(paragraphe)Structure d’un document HTML Document HTML de base
| la balise . Elle encadre l'ensemble des autres balises. |
| : va contenir tout l'en-tête de la page (Informations diverses: auteur, titre, version, scripts, variables ... ) |
…
| entre les : contenu ou corps du document. |
La balise: balise structurelle comme et
.Elle contient d'une part le titre du document (inclu dans la balise TITLE), mais également les déclarations comme la feuille de style ou les divers meta tags et également les fonctions javascript.
Les meta-balises permettent de référencer un site web.
L’objectif du référencement est de rendre visible un site web sur les moteurs de recherche afin de permettre aux internautes de le connaître ou le retrouver facilement.
Les balises dans le d'un document html
permet de donner un titre à une page, qui sera affiché dans le résultat des moteurs de recherche
permet d'indiquer la base des liens des frames par l'attribut Target, pour diriger vers une frame
pour indiquer les différents liens avec la page en cours et les liens concernant cette page
permet d'insérer des javascripts
permet d'insérer des styles css ( Cascading
StyleSheets =feuilles de style en cascade )
permet de donner le maximum de renseignements sur les pages pour pouvoir bien les référencer et bien les classer par les moteurs de recherche
Les balises dans le d'un document html
Le titre de la page
entre les balises
etTrès important :
Apparaît dans la barre de titre du navigateur.
Son contenu sera affiché en titre des résultats de la recherche dans les moteurs de recherche
---> mettre le maximum de mots-clefs importants.
exemple:
cours HTML – GIE 1ère année
Les balises dans le d'un document html
La balise META
- Balises insérées dans l'entête d'une page Web.
- Elles sont invisibles pour l'internaute.
- Elles renseignent le moteur sur la description du site, les mots clés, la langue utilisée sur la page, sur l'auteur du site …
Les attributs de META
NAME , CONTENT , LANG , HTTP-EQUIV
Les balises dans le d'un document html
Attributs NAME
Title : Le titre du document .
Author : Définir l'auteur du site.
Description : Description du site en une phrase de préférence.
Keywords : Choisissez les mot-clés qui caractérisent le mieux votre site.
Identifier-URL : L'url complet du site.
Publisher : Celui qui publie le site (personne, société ou association).
Reply-to : l’adresse électronique.
CopyRight : le Copyright.
Generator : Les logiciels ayant aidé à la création du site.
Revisit-after : Période de visite des robots.
Les balises dans le d'un document html
CONTENT
Valeur à affecter à la propriété NAME ou HTTPEQUIV
Attributs HTTP-EQUIV
Refresh : Rafraîchir la page ou rediriger l'internaute.
Window-TARGET : définir un cadre de destination par défaut
Expires : définir une date limite à vos pages.
Pragma : interdire de mettre "en cache" vos pages.
Les balises dans le d'un document html exemples
- Reply-to pour fournir des informations sur l’auteur
Description" CONTENT="Site de HTML">
- Keywords pour préciser des mots clés pour les moteurs de recherche
Les balises dans le d'un document html exemples
- Copyright pour indiquer les copyrights respectifs (auteur, publieur, graphistes, société...)
- Generator pour indiquer les outils de développement du site
- Refresh pour ordonner au navigateur de recharger une page toutes les n secondes
|
cours HTML – …
entre les "body" se situe le corps du code
|
Attributsde labalise :
- BACKGROUND pour insérer une image comme fond
body background="nom_de_fichier.extension">
- BGCOLOR : couleur de l'arrière plan
- TEXT : couleur du texte, par défaut elle est noir
- LINK : couleur des liens
- ALINK : couleur des liens sélectionnés
- VLINK : couleur des liens déjà visités
="couleur" text="couleur" link="couleur" alink="couleur" vlink="couleur">
Les paragraphes de texte
La mise en forme de texte
Les niveaux de titres
Les tableaux
Les listes
Les images et zones réactives
Les formulaires
Les liens hypertextes
Les cadres
Les paragraphes de texte
La mise en forme de texte
Les niveaux de titres
Les tableaux
Les listes
Les images et zones réactives
Les formulaires
Les liens hypertextes
Les cadres