Cours d’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 pages web 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.
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 le navigateur, elle est interprétée par celui-ci. syntaxe:
(Balise standard )
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)
balises doubles
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 p> (nv 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 ... )
...
L’entête du document -Head
La balise contient de nombreux renseignements sur la page, sur l'auteur ... Le titre de la page entre les balises et
Trè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.
cours HTML - DUT 1ère année 2010
Le corps du document -Body
Les paragraphes de texte
La mise en forme de texte
Les niveaux de titres
Les tableaux
Body - Les paragraphes de texte
Body - La mise en forme de texte
Balise ... : texte en gras
Ce texte s'affichera en gras
Balise ... : texte en italique
Ce texte s'affichera en italique
Balise ... : texte souligné
Ce texte sera souligné
Balise ... : texte barré
Ce texte sera barré
Balise ... : texte en exposant
Ce texte sera en exposant
Balise ... : texte en indice
Ce texte sera en indice
Body - La mise en forme de texte
Body - Modifier la couleur du texte
Balise ... - attribut exemple:
texte en rouge
Les couleurs peuvent être écrites de deux manières :
- En hexadécimal de type RVB et précédées d'un dièse (#) exemples :
Body - Modifier la couleur du texte
Body - Modifier la police ou la taille du texte
Balise ... - attribut exemple:
texte en Arial
Ce texte sera en Arial sinon en times
Balise ... - attribut exemple:
Body - Modifier la police ou la taille du texte
Body - Les niveaux de titre
Balise o๠n représente le niveau
Il existe différents niveaux de titres ( 1 à 6 ) (tous importants)
Attribut de la balise
... Titre centré
... Titre aligné à gauche
Rappels
HTML est un format de présentation de données pour créer des pages web pouvant être lues dans des navigateurs.
C'est un langage à balises.
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.
syntaxe:
(simple ou double)
Rappels
Attributs balise :
- BACKGROUND pour insérer une image comme fond
="nom_de_fichier.extension">
- BGCOLOR : couleur de l'arrière plan
- TEXT : couleur du texte, par défaut elle est noir
Rappels
Balise
: segmentation du texte en paragraphes
Balise
...
: division de la page en blocs
Balise
: saut de ligne ou retour à la ligne
Balise ... : texte en gras
Balise ... : texte en italique
Balise ... : texte souligné
Balise ... : texte barré
Balise ... : texte en exposant
Balise ... : texte en indice Balise ... :
- attributs : , , Balise ... : niveaux de titre
- attribut : align ( center, left, right )
Le corps du document -Body
Body - Les Tableaux
Structure de base:
indique au navigateur le début et la fin d'une table Pour décrire le tableau, on utilise ensuite les balises :
(Table Row): Définit une ligne du tableau.
Pour ajouter une ligne au tableau.
(Table Data): Définit une série de cellules de données (qui pourront contenir du texte, des images, une table...).
(Table Head): Définit une cellule contenant un titre (intitulé) de colonne ou de ligne. Le résultat à l'affichage est un texte mis en évidence (gras par exemple).
: Définition du titre du tableau
Body - Les Tableaux
ATTRIBUTS
WIDTH="x" largeur du tableau (nombre ou % par rapport à la
largeur de la fenêtre)
HEIGHT="x" hauteur du tableau (nombre en pixels ou %)
BORDER="x" taille de la bordure ou épaisseur de l’ombrage
(1 par défaut)
BGCOLOR=couleur couleur de fond des cellules
BACKGROUND pour utiliser une image comme fond pour la table
CELLSPACING="x" largeur des bordures = espace entre deux cellules du tableau
CELLPADDING="x" espace libre (pixels) entre le texte et le bord de la cellule qui le contient
ALIGN alignement: left, right, center
COLLSPAN="n" fusion de colonnes sur une même ligne ( td et th )
ROWSPAN="n" fusion de colonnes sur une même ligne ( td et th 34)
Body - Les Tableaux
exemple1 tableau
9eme tableau
2-1 2-2 2-3 2-4
Le corps du document -Body
Les paragraphes de texte
La mise en forme de texte
Les niveaux de titres
Les tableaux
Body - Insertion d’images
Pour insérer une image à un document HTML
Balise simple
Pour insérer une image locale
Attributs de la balise
- src : donne le chemin de l'image.
- alt : affiche un texte alternatif à la place de l'image si celle-ci ne peut pas être chargée
- align : left, right, middle, bottom, top
- width=n ou n% height=m : pour redimensionner une image
- border=n : pour tracer un cadre autour de l'image avec un trait de n pixels de large
o - vspace=n hspace=m : espace vertical entre l’image et le texte en pixels (vspace), espace horizontal image-texte (hspace).
Body - les liens HTML
HTML donne la possibilité de créer des liens vers d'autres documents :
- documents HTML
- des images
- du son
- des films
Liens vers un document complet distant :
Syntaxe :
exemple :
pour accéder à la page du CEI de l’ ENS
Body - liens hypertextes
Liens Exemples
Lien interne départ (même page)
Lien interne arrivée (même page)
Lien interne (page différente)
Body - Insertion du son
lien hypertexte vers un fichier media :
exemples d’extension : .mid, .wmv, .wav, .mp3, .ram ...
Body - Insertion du son
Intégrer un fichier son dans la page : on ajoute
exemple:
Remarques:
Body - Insertion du son
Intégrer un fichier son dans le fond de la page :
exemple:
Musique de fond en cours de diffusion.
Body - Insertion de vidéo
lien hypertexte vers un fichier video :
...... exemple:
Un petit film au format mpeg Intégrer un fichier video dans la page:
exemple:
Un petit film au format mpeg
fileopen= la vidéo est affichée à l’ouverture
Les formulaires
Méthode des formulaires
Les formulaires HTML permettent de retourner des informations saisies par un utilisateur vers une application serveur Les formulaires utilisent des balises particulières:
zone de saisie bouton d’envoi
bton effacer
choix1 Liste de sélection
choix2
zone de texte
Les formulaires
Un formulaire commence et finit par: FORM
â–º Les attributs METHOD et ACTION sont obligatoires
♦ ACTION = " adresse du script qui va recevoir les
données saisies dans le formulaire "
Les formulaires
- GET : passe les informations d'un formulaire par l’intermédiaire des URL. Elles sont placées, directement à la suite de l'adresse URL de la page appelée. exemple:
Un formulaire commence et finit par: FORM
â–º Les attributs METHOD et ACTION sont obligatoires
♦ ACTION = " adresse pour l'envoi "
♦ METHOD = "forme d’envoi" ( GET ou POST )
- POST: valeur qui correspond à un envoi de données stockées dans le corps de la requête. Méthode la plus utilisée pour les formulaires
Le nombre d'informations important
- GET : méthode généralement assez peu adaptée, car limitée à 255 caractères. Les informations seront envoyées dans l'adresse de la page (http://...).
Les formulaires
A l'intérieur de la balise FORM...
- Insertion de n'importe quel élément HTML de base:
textes, tableaux, liens, ...
- Insertion d’éléments interactifs.
Les formulaires
A l'intérieur de la balise FORM...
Les éléments interactifs sont :
♦ la balise INPUT : un ensemble de boutons et de champs de saisie à une ligne
A l'intérieur de la balise FORM...
La balise INPUT :
- balise principale des formulaires
- permet de créer un bon nombre d'éléments "interactifs"
A l'intérieur de la balise FORM...
INPUT : champ de saisie
avec
TYPE = TEXT pour faire saisir une ligne de texte
= PASSWORD les caractères saisis apparaissent sous forme d’ '*'
NAME = "un nom" qui identifie le champ texte
VALUE valeur par défaut de la zone de texte SIZE largeur de la zone de texte
maxlength nombre maximal de caractères
A l'intérieur de la balise FORM...
INPUT : checkbox (cases à cocher) exemple :
c: c++:
Pascal:
A l'intérieur de la balise FORM...
INPUT : Boutons
< INPUT NAME TYPE VALUE CHECKED > ... avec TYPE = RADIO pour les boutons multiples
CHECKBOX pour les cases à cocher
SUBMIT pour envoyer le formulaire une
fois rempli
RESET pour effacer le contenu du formulaire
NAME = "un nom" qui identifie le bouton
VALUE= "valeur" donnée au bouton lorsqu'il est selectionné
CHECKEDsignale un bouton par défaut (RADIO) ou une case cochée avant saisie
(CHECKBOX)
A l'intérieur de la balise FORM...
INPUT : Bouton-Radio (Zones d’option)
Pour un choix et un seul parmi plusieurs possibilités exemple :
Universitaire
A l'intérieur de la balise FORM...
INPUT : submit et reset
- reset : bouton de remise à zéro rétabli l'ensemble des éléments du formulaire à leurs valeurs par défaut
A l'intérieur de la balise FORM...
INPUT : submit et reset exemple :
A l'intérieur de la balise FORM...
TEXTAREA
La balise TEXTAREA permet de définir une zone de saisie plus vaste par rapport à la simple ligne de saisie que propose la balise INPUT
A l'intérieur de la balise FORM...
TEXTAREA
exemple
A l'intérieur de la balise FORM...
TEXTAREA
Attributs rows et cols:
pour modifier la taille de textarea
A l'intérieur de la balise FORM...
SELECT :
permet de créer une liste déroulante d'éléments (précisés par des balises OPTION à l'intérieur de celle-ci).
Les attributs de cette balise sont :
- name: représente le nom associé au champ, c'est le nom qui permettra d'identifier le champ dans la paire nom/valeur
- disabled: permet de créer une liste désactivée, c'est-à -dire affichée en grisée
- size: représente le nombre de lignes dans la liste (cette valeur peut être plus grande que le nombre d'éléments effectifs dans la liste) - multiple: marque la possibilité pour l'utilisateur de choisir plusieurs champs dans la liste
Les frames
Définition et structure de base
Les documents multi-cadres (frames) donnent la possibilité de diviser la fenêtre du navigateur en plusieurs panneaux ou cadres indépendants, contenant chacun un document HTML différent.
Les cadres sont délimités par la balise :
qui va remplacer
Pour définir ensuite les cadres, on utilise les balises FRAME disposant chacune d’un paramètre SRC pour indiquer l'adresse (URL) du document HTML à afficher dans ce cadre.
Paramètres de la balise < FRAMESET >
COLS=" x , a% , * ..." Divise la fenêtre en cadres verticaux.
Le nombre de valeurs entre parenthèses séparées par des virgules (ici 3) donne le nombre de cadres et leurs largeurs ...
ROWS=" x , a% , * ..." Divise la fenêtre en cadres horizontaux.
Le nombre de valeurs entre parenthèses séparées par des virgules (ici 3) donne le nombre de cadres et leurs hauteurs ...
x = largeur/hauteur en nombre de pixels ; a%= largeur/hauteur de la cellule en pourcentage de l'écran ; * = largeur/hauteur restante
Paramètres de la balise < FRAMESET >
SRC="URL" indique le fichier à placer dans le frame
NAME="nom_cadre" permet de nommer le cadre afin qu'elle puisse devenir la cible d'un lien (on utilisera alors l'attribut target de la balise pour y accéder.
SCROLLING="yes/no/auto" affichage de la barre de défilement
(auto : valeur par défaut)
MARGINWIDTH=" " largeur des marges verticales
MARGINHEIGHT=" " hauteur des marges horizontales
NORESIZE évite la modification de la taille par
l'utilisateur
FRAMEBORDER indique si le cadre doit être séparé d’autres
cadres (1 pour oui -valeur par défaut-, 0 pour non)
