Introduction au Langage HTML & CSS
PRINCIPE DU WEB
PRINCIPE DU WEB: URL
Une URL est une chaîne de caractères utilisée pour adresser les
ressources dans le Web
Exemple :
[Link]
http : protocole
[Link] : hôte
/chemin/ : chemin absolu sur le service
[Link] : nom de la page Web
q=req : chaine de requête, transmise à la page
COMMENT FONCTIONNE LE WEB ?
• C'est un mécanisme client-serveur:
• Le client demande un fichier, le serveur lui donne tel qu'il est stocké
– processus statique
• Le serveur peut aussi générer un fichier en fonction de la demande
du client – processus dynamique
HTML: LES PRINCIPES
• Il contient des commandes, implémentées par des balises pour
marquer les différents types de texte (titres, paragraphe, listes …) , pour
inclure des images, des formulaires, des liens …
• C'est un langage à balisage qui décrit la structure logique d'un
document hypertexte. Il a volontairement été conçu pour être simple.
L'HYPERTEXTE
• Le langage HTML permet de créer des documents interactifs grâce
à des liens hypertextes, qui relient votre document à d'autres
documents.
• En cliquant sur une zone de texte (ou une image, un logo) mise en
évidence, on peut accéder a un nouveau document situé sur un
autre ordinateur en n'importe quel point du globe.
INTRODUCTION AU MARQUAGE - 1
• Pour décrire un fichier hypertexte, le langage HTML insère des
balises dans le texte du document :
<marqueur> ici votre texte </marqueur>
Début de mise en forme Fin de mise en forme
Synonymes: marqueur, élément, tag.
INTRODUCTION AU MARQUAGE - 2
• Ces balises peuvent être insérées n'importe où dans le texte, entre 2
phrases, mots, lettres …
<gras>Le <italique> cours </italique> HTML</gras>
Le cours HTML
LES ATTRIBUTS
Les balises peuvent posséder un ou plusieurs attributs qui permettent de
spécifier l'action de la balise. Toujours mettre la valeur de l'attribut entre
guillemets.
<marqueur attribut="argument">texte</marqueur>
<marqueur attribut1="argument" attribut2="argument">texte</marqueur>
LES COMMENTAIRES
<!–- Voici un commentaire HTML -->
<!–-
Voici un commentaire HTML qui
peut se placer sur plusieurs lignes
-->
STRUCTURE DE BASE D'UN FICHIER HTML
<html>
<head>
… <title>Mon premier document html</title>
</head>
<body>
… Bonjour tout le monde
</body>
</html>
.
Une balise <html> contenant une seule balise <head> et une seule balise <body>.
Les balises que l'on va trouver dans le corps divisent le contenu en sections logiques,
sous forme de blocs ( paragraphes, tableaux …). On parle d'éléments de niveau bloc.
Les éléments qui représentent les propriétés du texte (strong, i) qui figurent dans un bloc
sont dits "éléments de ligne".
ELÉMENTS DE NIVEAU BLOC
<hn> . . </hn> Titre de niveau n, de 1 à 6
<p> . . </p> Paragraphe
Et aussi: address, blockquote, div, hr, pre sans oublier body !
ELÉMENTS DE LISTES
<ul> . . </ul> Liste non triée, liste à puces
<ol> . . </ol> Liste triée, liste à numéros
<li> . . </li> Elément de la liste
Et aussi: dl, dt, dd
LES LIENS SUR UN TEXTE …OU SUR AUTRE
CHOSE !
<a> . . </a>
Création d'un lien hypertexte, ou vers un point d'ancrage du
document
Principaux attributs:
href = url
name = chaîne de caractères
<a href = "[Link] de Cergy Pontoise</a>
LES LIENS INTRA-PAGES
<a name = "chats" >Texte sur les chats</A>
<p>
.
<p>
.
<p>
.
<a href = "#chats"> En savoir plus sur les chats </a>
<a href = "[Link]#refautrepage">Vers la référence d’une autr
page</a>
LES ADRESSES URL
Les adresses du Web ou URL ( Uniform Resource Locator ) sont du type:
[Link]
Le protocole: http
Le serveur (sous domaine + nom de domaine): [Link]
Le fichier avec son chemin: licence/l1/[Link]
Un ancrage: #cours
ELÉMENTS DE LIGNE
<b>texte gras</b> texte gras
<i>texte italique</i> texte italique
<big>texte gros</big> texte gros
<small>texte petit</small> texte petit
Et aussi: br (pour sauter des lignes), code, sub, sup,
span, u (pour underline/soulignement), strike …
LES TABLEAUX -1
<table> . . </table>
Définit un tableau
Principaux attributs:
align = position
bgcolor = color
border = n
cellpadding = n
cellspacing = n
width = n
LES TABLEAUX -2
<tr> . . </tr>
Définit une ligne d'un tableau
Principaux attributs :
align = left,center,right
valign = top, middle, bottom
bgcolor = color
border = n
LES TABLEAUX -3
<td> . . </td>
Définit une cellule de données
Principaux attributs :
align = type
valign = type
bgcolor = color
colspan, rowspan = n
height, width = n
LES TABLEAUX -4
<table>
<tr>
<td> A</td> A B C
<td> B </td>
D E F
<td> C </td>
</tr>
<tr>
<td> D</td>
<td> E </td>
<td> F </td>
</tr>
</table>
LES IMAGES -1
<img> . . </img>
Insère une image
Principaux attributs:
align = left, bottom, middle, top, right
alt = text
border = n
height, width = n
src = url
<img src=‘’[Link]’’ />
<img src=‘’[Link]’’ width=‘’5’’ width=‘’10%’’/>
EXERCICE D’APPLICATION
Créer une page – CV avec : Foulen ben
Foulen
• Un tableau 1 ligne/ 2 colonnes avec :
-Votre nom en titre 1 dans la colonne de Moi
gauche •Nom : Foulen
- Une photo de vous dans la colonne de • Adresse : Tunis
droite •Email : Foulen@[Link]
• Un paragraphe « état Civil » avec les informations
Ma vie
sous forme de liste
• 1987 : Fin d’étude primaire
• 1995 : Baccalauréat
• Un paragraphe « formations » avec des liens vers • 1999: Maîtrise
les écoles/universités, …
23
INSERTION D’UN FORMULAIRE
➢Un formulaire est inséré dans une page HTML par la balise
double <FORM>
➢En plus de ses éléments principaux, le formulaire peut contenir
du texte
➢Toutes les mises en forme peuvent être appliquées aux éléments
du formulaire
➢Plusieurs formulaires peuvent être insérés dans la même page
24
Attribut : ACTION
<FORM ACTION="script" METHOD="post" NAME ="nom_form">
➢ ACTION:
❑ URL du script ou prog à exécuter Chemin du script à exécuter sur les données du
formulaire
ACTION= "chemin_script"
25
Attribut : method
<FORM ACTION="script" METHOD="post" NAME ="nom_form">
➢ METHOD: méthode d’envoi des données GET ou POST
❑ GET : données du form envoyées avec l’URL du script
(limitée)
❑ POST: données du form envoyées séparément de l’URL
(meilleure)
NAME : nom du formulaire
26
La balise : <input>
➢<INPUT> : - crée une zone de saisie
➢Principaux attributs
➢NAME : nom du champ
➢SIZE : largeur du cadre réservé au champ
➢MAXLENTH: longueur du texte
➢TYPE : (text, password, radio, checkbox, submit, reset,
file, …)
➢VALUE : La valeur du champ
27
Zone de saisie : Exemple
HTML
Votre nom : <INPUT TYPE="text" NAME="nom" SIZE=15
MAXLENGTH=30> <BR> <BR>
Votre prénom : <INPUT TYPE="text" NAME="prenom"
SIZE=15 MAXLENGTH=30>
28
Zone de texte : <TEXTAREA>
➢La balise <TEXTAREA> permet de
crée une zone de saisie de texte
➢Principaux attributs : NAME, COLS,
ROWS
COLS : nombre de colonnes
ROWS : nombre de lignes
Exemple :
Votre commentaire :
<TEXTAREA NAME="comment"
ROWS=5 COLS=40></TEXTAREA>
29
Les libellés
Cette zone de texte est bien jolie mais si votre visiteur tombe dessus, il ne sait pas
ce qu'il doit écrire. C'est justement le rôle de la balise <label> :
HTML
<label> Votre nom : </label> <INPUT TYPE="text" NAME="nom" SIZE=15
MAXLENGTH=30>
➢Pour lier le label au champ, il faut lui donner un attribut for qui a la même
valeur que l'id du champ
HTML
<label for="nom" > Votre nom: </label> <INPUT TYPE="text" NAME="nom"
ID="nom" SIZE=15 MAXLENGTH=30>
30
Les boutons radio
➢Notation
<INPUT TYPE ="radio" NAME ="nom_radio" VALUE="valeur1">
texte du bouton1
<INPUT TYPE ="radio" NAME =" nom_radio" VALUE="valeur2">
texte du bouton2
La valeur de l’attribut NAME est commune à toutes les zones
HTML
Votre sexe : <INPUT TYPE ="radio" NAME =" sexe" ID="Homme"
VALUE="Homme"> Homme <INPUT TYPE ="radio" NAME =" sexe" ID="Femme"
VALUE="Femme"> Femme
31
Les boutons radio : CHECKED
L’attribut CHECKED permet de cocher par défaut l’un des
boutons
<INPUT TYPE ="radio" NAME ="nom_radio" VALUE="valeur1" CHECKED> texte du bouton1
<INPUT TYPE ="radio" NAME =" nom_radio" VALUE="valeur2"> texte du bouton2
Exemple
32
Les cases à cocher
<INPUT TYPE ="checkbox" NAME ="nom_cases" VALUE="valeur1"> texte case1
<INPUT TYPE ="checkbox" NAME ="nom_cases" VALUE=" valeur2"> texte case2
<INPUT TYPE ="checkbox" NAME =" nom_cases" VALUE=" valeur3"> texte case3
33
Les cases à cocher
• Sélectionner un élément dans une liste
• Cocher avec la souris
• Possibilité de cocher plusieurs éléments
• Un clique sélectionne l’élément
• Le 2 ème clique annule la sélection
34
Les listes déroulantes
Exemple
Ville(s) visités :
<SELECT NAME="ville" >
<OPTION VALUE="RA"> Rabat Your text here
<OPTION VALUE="FE"> Fès
<OPTION VALUE="MA"> Marrakech
<OPTION VALUE="AG"> Agadir
<OPTION VALUE="TA"> Tanger
</SELECT>
35
Les listes déroulantes : attribut size
➢ SIZE : indique le nombre de Lignes visibles du menu
➢ Exemple
36
<fieldset> et <legend>
Ces deux balises permettent de structurer les formulaires
<fieldset>
<legend>Informations
personnelles</legend>
Nom :<input type='text'>
Prénom :<input type='text'>
</fieldset>
<fieldset>
<legend>Favoris</legend>
Auteur favori :<input type='text'>
Livre favori :<input type='text'>
</fieldset>
37
Exercice d’application
Réaliser le formulaire ci-dessous
38
CSS : CASCADING STYLE SHEET
LES FEUILLES DE STYLES : CSS
INTRODUCTION
❖ Les feuilles de styles offrent un moyen efficace pour contrôler
l'apparence et le rendu des documents HTML.
❖ Elles permettent de séparer le contenu de la forme.
❖
❖ L'acronyme CSS signifie Cascading Style Sheets (feuilles de styles en
cascade).
RÈGLES DE RÉDACTION
Une feuille de styles est composée d'un ensemble de descriptions de styles.
Sélecteur {
propriété: valeur;
propriété: valeur …
}
Exemple :
h2 {
COLOR: navy;
FONT: 18px;
FONT-FAMILY: sans-serif
}
Aucune limite dans le nombre de couple propriétés / valeurs
RÈGLES DE RÉDACTION
✓ Les règles sont à la base de toute feuille de styles. Elles ont une
syntaxe précise et sont construites de la manière suivante :
Sélecteur {propriété: valeur; propriété: valeur …}
✓ Une règle est composée du sélecteur suivi du bloc de déclaration
définissant le style.
✓ Le sélecteur identifie le style, il lui donne son nom.
✓ L’ensemble des balises HTML sont des sélecteurs potentiels
LOCALISATION DES STYLES
La déclaration de règles de styles peut être soit :
• Externe au document HTML dans une feuille de style,
• Interne au document HTML dans la section HEAD,
• Intra-ligne, associé à l’attribut style d’une balise
STYLES INTRA-LIGNE
La description d'un style intra-ligne est insérée directement dans la
balise d'ouverture d'un élément HTML,
Le style est appliqué à l'aide de l'attribut HTML style inséré dans la
balise d'ouverture de l'élément,
Exemple :
<P STYLE="COLOR: navy; FONT: 12px; FONT-FAMILY: sans-serif">
FEUILLE DE STYLES INTERNE
Une feuille de styles interne est insérée en en-tête du fichier HTML à l'aide de l'élément <STYLE>
Ces styles seront définies uniquement pour le document courant
Exemple :
<head>
<title>nom du document</title>
<style>
<!--
a { color: red }
.toto {color: navy; font: 12px; font-family: sans-serif}
-->
</style>
</head>
Application d'un style sur un élément
<P CLASS="toto">texte du paragraphe…
FEUILLE DE STYLES EXTERNE
Séparation de la présentation de la page HTML,
Réduit la taille de la page HTML,
Style identique pour l’ensemble d’un site,
Évolution rapide du « design » d’un site.
FEUILLE DE STYLES EXTERNE
❖ Une feuille de styles externe est un fichier texte portant habituellement l'extension .css,
❖ Le lien entre le document HTML et le fichier CSS s’effectue dans la section <HEAD> d’un
document HTML
❖ Exemple :
<HEAD>
<TITLE>Histoire des feuilles de styles</TITLE>
<link REL="StyleSheet" TYPE="text/css" HREF="../[Link]">
</HEAD>
1. La balise <LINK> avertit le navigateur qu'il doit établir un lien
2. rel=stylesheet précise qu'il s'agit d'une feuille externe
3. type="text/css" avertit qu'il s'agit de feuilles de style en cascade
4. href=" ... " définit l'emplacement de la feuille de style
SÉLECTEURS REGROUPÉS
Possibilité de regrouper plusieurs sélecteurs pour une même
description de style.
Exemple :
h1, h2, h3, h4 {color: blue}
est identique à :
h1 {color: blue}
h2 {color: blue}
h3 {color: blue}
h4 {color: blue}
PROPRIÉTÉS DE STYLES
Padding
Margin
Color
Border
Font
Display
Filtre d’image
NOTIONS DE CLASS
Les classes permettent d'affecter des styles différents à des balises
Il est possible d’ajouter une classe à un sélecteur
La définition des classes:
.nom_de_la_classe {propriété de style: Valeur; propriété de style: Valeur ...}
Pour utiliser une classe :
<balise class="nom_de_la_classe"> ... </balise>
NOTIONS DE CLASS
Une même balise peut avoir plusieurs descriptions de styles.
Exemple :
fra {color: blue}
ang {color: red}
L'application des styles ainsi définis s’effectuera via l'attribut class:
Exemple :
<a class="fra">contenu de l'élément…
<a class="ang">contenu de l'élément…