Cours sur le langage HTML
| Support de cours Module XHTML/CSS 1ère Année BTS Informatique Développeur d’Application M. Benjamin GOGBE | |
| 2eme Edition – 2014 | |
| Ce support de cours contient quelques explications sur certains concepts de HTML en vigueur au programme en 1ère année BTS option IDA en Côte d’Ivoire. Il a été élaboré sur la base de supports de cours existants et de sources trouvées sur Internet. | |
TABLE DES MATIERES
1ère PARTIE : LE LANGAGE HTML
INTRODUCTION - 3 -
Chapitre I – NOTION DE BALISES . - 5 -
Chapitre II – LES BALISES EN BLOC ET LES BALISES EN LIGNE - 11 -
Chapitre IV – LES BALISES DE TABLEAU . - 16 -
Chapitre V – LES BALISES D’IMAGE ET D’IMAGES-MAPS . - 20 -
Chapitre VI – LES BALISES DE FORMULAIRE - 23 - Chapitre VII – LES BALISES DE CADRE Error! Bookmark not defined.
Chapitre VIII – LA BALISE D’HYPERLIEN . - 32 -
Chapitre IX – LES BALISES DE LISTE . - 34 -
Chapitre X – LES BALISES DE CONTENU EXECUTABLE - 37 -
2ème PARTIE : LES FEUILLES DE STYLE OU CSS
Chapitre XI – LES FEUILLES DE STYLE (CSS) .. - 39 -
Mini-PROJET: .. - 47 -
INTRODUCTION
Historique du langage HTML
HTML (Hypertext Markup Language) est un langage de balisage qui permet de structurer le contenu des pages web.
Conçu par Tim Berners-Lee en 1991, HTML1 est un langage basé sur le SGML (Standard Generalized Markup Language) : il s'agit en effet de présenter un contenu affichable non seulement par les ordinateurs classiques, mais également sans trop de dégradation par des terminaux mobiles (PDA : Personnal Digital Assistant, Smartphones, etc) bien moins puissants. (Wikipedia, 2011).
Les versions successives de HTML sont HTML 1 en 1991, HTML 2 en 1994, HTML 3 en 1996 et HTML 4 en 1998. En 2000, le W3C lance la version XHTML qui est une variante plus rigoureuse du langage.
Les premières spécifications du XHTML ont vus le jour en 2000 sous l’appellation XHTML 1.0. Un an plus tard, elle fut remplacée par la version 1.1. En 2009, le W3C lance une étude pour la version HTML 5.
Le langage de styles CSS
Parallèlement au HTML, le langage de mise en page et de mise en forme des pages web fut développé. Les différentes versions sont CSS 1 en 1996. Ensuite suivies les versions CSS 2.1 en 1998 et enfin la dernière version CSS3.
L’environnement de travail
Pour créer des pages web avec XHTML et CSS, il faut disposer d’un environnement de travail adapté.
Si en théorie, un simple éditeur de texte (tel que le Bloc Notes de Windows ou Emacs de Linux) peut suffire, en pratique, il existe des éditeurs plus élaborés permettant de gagner du temps.
Les éditeurs visuels
Avec ces éditeurs vous avez la possibilité de travailler graphiquement sur la page sans taper de code qui est généré automatiquement. L’on peut citer le plus connu est Dreamweaver, FrontPage (payant ou en version d’essai) et Nvu (libre et gratuit).
Leur inconvénient est qu’ils rendent le développeur trop passif et le code généré est difficilement maitrisable (souvent problème de compatibilité avec les nouvelles spécifications).
Les éditeurs classiques
Ils offrent des fonctions d’aide à la saisie. Souvent gratuits en téléchargement, ils servent surtout à la phase de création de la structure de base du document. On peut citer entre autres EditPlus, NotePad ++, PSPad, JEdit et bien d’autres pour Windows ; Espresso, Smultron, TextWrangler pour Macs et gEdit, Vim, Emacs, Kate. Vous trouverez une variété d’éditeur en faisant une recherche sur Google.
1
Le langage HTML, qui a maintenant évolué vers le XHTML, fut inventé en 1991 par Tim Berners-Lee lorsqu’il travaillait au CERN de Genève (Centre Européen de Recherche Nucléaire). L’objectif était alors d’afficher des pages d’information ayant les propriétés suivantes :
• les pages étaient reliées entre elles par des liens hypertexte (ces liens sur lesquels, aujourd’hui, nous n’arrêtons pas de cliquer !) ;
• ces documents devaient être lisibles sur tous les ordinateurs, quel que soit leur système d’exploitation :
Windows, Unix, Mac OS, etc. (Drailard, 2008)
Les navigateurs web
Les navigateurs permettent de visualiser le contenu les pages web. Ils traduisent les codes HTML et CSS et présentent le résultat visuel à l’écran. Il existe de nombreux navigateurs parmi lesquels on peut citer : - Google Chrome
- Mozilla FireFox
- Internet Explorer
- Safari
- Opera
Il existe des variantes de ces navigateurs pour les appareils mobiles comme les Smartphones. On peut citer :
- Safari Mobile sur iPhone d’Apple
- Chrome Mobile pour les appareils sous Android
- Internet Explorer Mobile pour les appareils sous Windows Mobile
Il est important de noter qu’il faut disposer de plusieurs navigateurs dans leurs dernières versions sur notre ordinateur afin de tester la conformité du code HTML et CSS des pages avec les dernières spécifications du langage.
Fonctionnement d’un site web
Figure 1 - Fonctionnement d'un site web statique
Figure 2 - Fonctionnement d'un site web dynamique
CHAPITRE I – NOTION DE BALISES
Les différentes parties d’une page web (la structure) sont représentées dans le code HTML sous forme d’éléments constitués de balises. On parle alors de langage de balisage.
Dans un langage de balisage, tout contenu, tels que les blocs de texte, les images, les tableaux, paragraphes et autres, doivent être renfermé dans un élément.
La liste des éléments utilisables est clairement définie dans la DTD (Document Type Definition) qui dépend de la version du langage. La DTD contient les spécifications du langage qui sont établies par le W3C (World Wide Web Consortium), organisme de normalisation dans le domaine du web.
I- LES BALISES
Les balises HTML structurent le contenu du document, en délimitant les blocs qui seront amenés à contenir des paragraphes, des titres, différents types de médias (images, sons, vidéos), des contrôles de formulaires ou encore des liens hypertextes.
Une balise débute par le signe « inférieur à », et finit par le signe « supérieur à » ; on parle aussi de chevrons.
Sauf exception, elles fonctionnent par paires. Et à chaque balise ouvrante correspond sa balise fermante, débutant par les caractères Ces paires délimitent la portion de texte à laquelle elles s’appliquent.
Syntaxe : Portion du document
Exemple de balises : , , ,
,
Il peut arriver qu’une balise soit refermée immédiatement. On parle alors de « balise vide » ou de « balise simple ou encore orpheline ». Dans ce cas, pour marquer la fermeture de la balise, on utilise les caractères « /> ».
Voici quelques balises dans ce cas sont : area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, wbr.
Syntaxe :
Exemple de balise simple : "" />
Un élément est l’ensemble composé d’une balise ouvrante, d’un contenu (du texte et/ou d’autres balises), et de la balise fermante correspondante.
Exemple d’élément :
texte à mettre en gras ===è Toute cette ligne représente un élément
II- LES ATTRIBUTS
Les attributs ou propriétés sont des caractéristiques qui permettent de personnaliser les balises. Ils définissent des options supplémentaires pour la balise.
Les attributs sont toujours placés à l’intérieur la balise ouvrante. Leur valeur est toujours entourée d’apostrophes simples (') ou doubles (").
Syntaxe : nomattribut="valeur">
Exemple :
id="monTitre">Bienvenue sur le site web de GOBIS TRAINING
Dans l’exemple ci-dessus, l’élément 1 représente un titre de premier niveau
possédant un attribut id de valeur monTitre.
L’élément 2 représente une image dont l’attribut src indique qu’il s’agit du fichier dans le dossier images.
NB : Certains attributs sont devenus obsolètes avec l’avènement du CSS. Ce sont pour la plupart des attributs de mise en forme tels que : align, valign, color, bgcolor, border, face, width, height.
III- IMBRICATION DES ELEMENTS
Les éléments peuvent être imbriqués, à condition de respecter une certaine hiérarchie, et d’éviter de faire se chevaucher des balises ouvrantes et fermantes qui ne se correspondent pas.
Bon exemple :
Bienvenue chez Toto et moi
Mauvais exemple :
Bienvenue chez Toto et moi
Dans cet exemple, nous avons un titre de niveau 2 dans lequel la portion de texte « et moi » est renforcé (en gras).
Dans le bon exemple, la balise ouvrante se ferme à l’intérieur de l’élément défini par la balise .
Les possibilités d’imbrications doivent répondre à des critères stricts qui définissent quels éléments peuvent en contenir d’autres, et quelles sont les conséquences en termes d’affichage ou de sémantique.
Globalement, un élément de type bloc (bloc-level) peut contenir soit d’autres blocs et du contenu texte, soit uniquement des éléments de type en ligne (inline) et du contenu texte.
Un élément de type en ligne ne peut pas contenir d’éléments de type bloc, mais uniquement des éléments en ligne ou du contenu texte.
Il faut noter qu’un document HTML est une structure composée d’un ensemble d’éléments à plusieurs niveaux d’imbrication. Le premier niveau de cette hiérarchie est constitué par la balise .
IV- QUELQUES REGLES D’ECRITURE DU HTML
Règles pour les noms des fichiers
Chaque page web est un fichier dont le nom peut comprendre des lettres, des chiffres et des tirets. Il faut éviter : les espaces, les caractères accentués et le « ç ». Son extension est généralement « .html ».
La première page d’un site web doit être nommé (ou ).
Quelques règles d’écriture des balises HTML
La norme HTML impose les règles suivantes :
• Pour respecter les règles du XHTML, il faut toujours écrire les noms de balises en minuscules ? Toute balise ouverte doit être refermée ; y compris les balises simples ou orphelines.
Dans ce dernier cas, la barre de fermeture est alors intégrée dans la balise elle-même.
Exemples :
Saut de ligne:
au lieu de
Tracé d’une ligne horizontale :
au lieu deImage: au lieu de
• En cas d’imbrication de balises, l’ordre de fermeture est l’inverse de celui de l’ouverture ? Les valeurs des attributs des balises sont à écrire entre guillemets simples ou doubles : .
• Tous les attributs utilisés doivent avoir une valeur, y compris ceux dont la valeur est unique. Par
exemple, il ne faut plus écrire :
mais le code suivant :
• L’attribut name qui servait à identifier certains éléments (, , ) doit être remplacé par l’attribut id.
V- STRUCTURE D’UNE PAGE HTML 5
Une page HTML ou XHTML s’écrit de la façon suivante :
Titre
• Le reste de la page est encadré par des balises et qui signifient début et fin de la page HTML.
• Entre ces deux balises se trouvent deux parties :
o l’en-tête de la page entre
et qui contient les informations qui ne seront pas visibles sur la page sauf la balise qui contient le texte à afficher dans la barre de titre.o et le contenu (le corps) de la page entre
et .VI- LES ELEMENTS DE BASE
La déclaration DOCTYPE
Sur la première ligne, la balise indique au navigateur le type de document qui va être créé.
Elle est obligatoire dans tout document.
L’élément racine
Il représente le parent. Il contient la racine de tout le document HTML. De ce fait, les balises , encadre tous les éléments.
L’entête du document : L’élément
Cette section donne quelques informations sur la page ; telles que le titre, l’encodage des caractères spéciaux, les codes externes utilisés.
Parmi ses éléments enfants, on peut citer : , , , et .
Seul le contenu de l’élément est visible dans la barre de titre de la fenêtre.
Parmi ces éléments seuls les éléments et ne peuvent être utilisé qu’une seule fois. Les autres peuvent être utilisés de façon illimitée.
Les meta-informations : l’élément
Les informations contenues dans les balises sont destinées au serveur web, au navigateur et aux moteurs de recherche.
Chaque information est identifiée par un nom et un contenu. Le nom est défini par l’attribut name et le contenu par l’attribut content sous la forme qui suit :
Leur rôle diffère selon la valeur de l’attribut name. Ainsi, on peut définir :
L’auteur de la page : name="author"
Les mots clés: name="keywords"
Une description de la page: name="description"
Le temps de rechargement automatique de la page: http-equiv="refresh"
, la page sera rafraichie chaque 30 secondes.
Encodage des caractères: charset
Permet de définir le jeu de caractères utilisé dans la page. Il existe plusieurs jeux de caractères dont les plus utilisés sont:
1. iso-8859-1 : encodage classique pour les langues d’Europe occidentale
2. iso-8859-15 : complète le précédent avec les caractères € et œ.
3. utf-8 : utilise les caractères de la majorité des langues du monde. Il permet d’utiliser les caractères spéciaux et les accents.
Exercice pratique :
Créer une page contenant un texte vous décrivant en quelques mots (au plus 2 lignes).
NB :
1. le texte doit contenir des accents et des caractères spéciaux
2. définir les mots-clés et une description afin que votre page soit visible par les moteurs de recherche.
Les commentaires
Ils permettent une meilleure compréhension, une réutilisation facile et une meilleure lisibilité du code lors des mises à jour. On utilise les symboles : .
Exemple :
Le corps du document : l’élément
C’est le conteneur de l’ensemble des éléments textuels et graphiques de la page web. Le corps du document est délimité par les balises et .
Première page XHTML
Exercices
Exercice 1 : À quel emplacement est défini la DTD utilisée dans le document ?
Exercice 2 : Quels sont les éléments enfants de l’élément ?
Exercice 3 : À quoi sert l’élément
? Quels peuvent être ses éléments enfants ? Peuvent-ils être employés plusieurs fois dans le même document ?Exercice 4 : Quel élément est obligatoire dans l’élément
? À quoi sert-il ?Exercice 5 : Comment déclarer les mots-clés associés à la page ? Quelle est l’utilité de cette déclaration ? Écrivez-en un exemple.
Exercice 6 : Peut-on écrire le code suivant dans une page ?
Bienvenue dans notre site
Le site du XHTML et de CSS2
Exercice 7 : Peut-on inclure les éléments ,
etExercice 8 : Ecrire le code HTML complet d’une page web comportant les éléments suivants :
1. Titre : Ma bienvenue sur ma page personnelle
2. Mots clés : GOGBE, Benjamin, Informaticien, Ingénieur, Enseignant
3. Rechargement chaque 10 minutes 4.Auteur : Benjamin GOGBE
5. Description : Ma page personnelle
6. Jeu de caractères : utf-8
Insérer des commentaires à chaque niveau pour expliquer chaque étape du code HTML.
CHAPITRE II – LES BALISES EN BLOC ET LES BALISES EN LIGNE
Le langage HTML distingue deux grandes catégories de balises :
1. les balises en bloc (block) 2. et les balises en ligne (inline).
I- LES ELEMENTS DE STRUCTURE OU DE BLOC
1- Définition
Ce sont les éléments qui se placent automatiquement les uns en dessous des autres.
Le rendu de ces balises occupe par défaut toute la largeur de la page.
Généralement, le navigateur insère automatiquement un espace au-dessus et en dessous du contenu de la balise.
Les blocs distinguent des sections entières de la page comme des titres, des paragraphes, des listes, des citations, etc.
Exemples d’éléments de type bloc
.
Les blocs peuvent contenir d’autres blocs et des éléments en ligne, à l’exception des paragraphes
et des titres , , qui ne peuvent inclure d’autres éléments de bloc.
2- Les principaux éléments de type bloc
(Goetter, 2005) P 29
Exercice pratique : TP BALISES DE BLOC 1
Réaliser une page web en utilisant ci-dessous :
|
Exemples Cours HTML 5 |
|
Paroles d'or du père de la Nation ivoirienne Président Houphouet Boigny:
| |||||||
|
Les fondamentaux du XHTML et du CSS
| Figure 3 : | ||||||
|
Tableau de quelques éléments XHTML | |||||||
|
| |||||||
Aperçu TP 1 Balises de blocs
II- LES BALISES EN LIGNE
1- Définition
Contrairement aux balises de bloc, les balises en ligne se placent toujours les unes à côté des autres.
Les éléments en ligne sont prévus pour enrichir localement des portions de texte (lien hypertexte, emphase, renforcement, etc.).
Par exemple : le renforcement d’une partie de texte à l’aide de la balise
Les éléments en ligne ne peuvent contenir que d’autres éléments en ligne mais pas d’éléments de bloc.
Il existe aussi deux sortes d’éléments en ligne : « remplacés » et « non remplacés ».
• Seuls les éléments remplacés peuvent être redimensionnés. Ils acceptent des attributs de dimensions tels que : height, width.
Il s’agit entre autres des éléments , , , et .
• Les autres n’ont pas de dimension, et n’occupent que la place nécessaire à leur contenu. C’est le cas des éléments , , , , etc.
2- Les principaux éléments en ligne
Exercice pratique : TP 2 BALISES DE BLOC
Utiliser la page web du TP précédent et effectuer les modifications afin d’obtenir la page ci-dessous :
Evaluation N°1
CHAPITRE IV – LES BALISES DE TABLEAU
Un tableau est composé de lignes et de colonnes. L’intersection entre une ligne et une colonne forme une cellule.
La balise permettant de créer un tableau est
|
|
Syntaxe d’un tableau de 2 lignes et 2 colonnes:
L’élément
marque le début et la fin du tableau.
L’élément désigne le début et la fin d’une ligne.
L’élément
II- LA LIGNE D’ENTETE
|
Pour créer une entête de tableau, il suffit d’utiliser l’élément | à la place de l’élément | dans la première ligne du tableau. En général, le contenu de l’élément | apparait en gras. On obtient la syntaxe suivante : | |||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
| cellule 3 | cellule 4 | Figure 6- |
|
|
Tableau avec entête
III- LE TITRE DU TABLEAU
On utilise l’élément au début du tableau avant le code de l’entête.
Exercice d’application
Ecrire le code HTML du tableau ci-dessous :
|
|
| AGOULE BENOIT | DIVO | 04 57 65 48 | |||||||||||||||||||||||||
IV- LES TABLEAUX STRUCTURES
Dans le cas de longs tableaux, il importe de le diviser en 3 grandes parties :
- L’entête définit par les balises ?thead? ?/thead?
- Le corps du tableau définit par les balises ?tbody??/tbody?
- Le pied de tableau définit par les balises ?tfoot??/tfoot?
Toutefois, il est conseillé d’utiliser l’ordre suivant lors de la création du tableau :
1. ?thead? le haut du tableau (l’entête)
2. ?tfoot? le bas du tableau (le pied de page)
3. ?tbody? le corps du tableau
En reprenant l’exemple précédent, on pourra écrire une longue liste de clients avec le code suivant :
| NOM ET PRENOMS | VILLE | CONTACT |
|---|
|
| |||
|
| NOM ET PRENOMS | VILLE | CONTACT |
|---|---|---|---|
| KONE MOHAMED | BOUAKE | 05 45 76 23 | |
| KOUAKOU JOEL | ABIDJAN | 09 47 28 47 | Figure 8-Exemple de Tableau structuré |
|
| |||
| AGOULE BENOIT | |||
|
| DIVO | 04 57 65 48 | |
| GOGBE JEROME | MAN | 05 55 77 23 | |
| KOUAME ANGE | ABIDJAN | 09 00 28 12 | |
| AMOI ANGE BENOIT | GUIGLO | 01 57 65 34 |
V-FUSION DE LIGNES OU DE COLONNES
1. Fusion de lignes
Pour fusionner des lignes, on utilise l’attribut rowspan=x dans la balise ?td? de la cellule fusionnée ; où x représente le nombre de lignes à fusionner verticalement.
Par exemple pour réaliser le tableau ci-dessous :
| 1 | 2 |
| 3 | 4 |
| 5 |
On utilisera le code suivant :
|
|
| 5 |
2. Fusion de colonnes
Pour fusionnes plusieurs colonnes, on dispose de l’attribut colspan=x où x est le nombre de colonnes à fusionner horizontalement.
Par exemple, pour réaliser le tableau ci-dessous :
| 1 | |
| 3 | 4 |
| 5 |
On écrira le code suivant :
|
| ||||||
CHAPITRE V – LES BALISES D’IMAGE ET D’IMAGES-MAPS
I- LES DIFFERENTS FORMATS D’IMAGES
Les formats d’images les plus répandus actuellement sont :
• Le format GIF : utilisé pour les petits éléments graphiques, les icônes, les petites images animées avec un seul niveau de transparence.
• Le format JPEG : utilisé pour les photographies. Il ne supporte pas la transparence
• Le format PNG : utilisé pour les images de haute qualité avec plusieurs niveaux de transparence.
II- LES BALISES D’IMAGES
Pour afficher une image dans une page HTML, on utilise la balise . Elle possède plusieurs attributs dont les plus utilisés sont : src, alt et title.
Syntaxe :
• L’attribut src : chemin d’accès du fichier image. Ce chemin peut être relatif ou absolu selon les cas.
o Cas de chemin relatif : le chemin fait référence à l’emplacement courant du fichier image.
Exemple : src=’’’’ o Cas de chemin absolu : le chemin fait référence à la racine du site web. Il est utilisé généralement pour faire référence à une image située sur un autre site web. Exemple : src=’’http:\\\photos\
• L’attribut alt : texte alternatif qui s’affiche lorsque l’attribut src n’est pas défini ou lorsque l’image n’arrive pas à s’afficher pour une raison quelconque.
• L’attribut title : texte d’infobulle qui apparait lorsqu’on pointe la souris sur l’image.
III- LES BALISES D’IMAGES-MAPS ET SES ATTRIBUTS
La balise permet de créer des images réactives. L’image réactive contient plusieurs zones cliquables amenant chacune vers un lien déterminé.
La balise contient un attribut name permettant de définir le nom du map.
Pour définir les zones cliquables, on utilise la balise dont les principaux attributs sont :
1. shape : qui définit la forme de la zone. Ses valeurs possibles sont rect (rectangle), circle (cercle), poly (polygone),
2. coords : qui indique les coordonnées en pixels des points de la zone en fonction de la forme. Ainsi, nous aurons :
• Pour un rectangle, les coordonnées (abscisse, ordonnée) du coin supérieur gauche et celles du coin inférieur droit ;
• Pour un polygone, les coordonnées de chaque sommet ;
• Pour un cercle, les coordonnées du centre et le rayon ;
3. href : qui indique l’URL de la page de destination du lien
SYNTAXE GENERALE
Insertion de l’image
usemap= ‘’#nom du map’’>
Définition de la structure du map
……..
Cas 1 : Zone rectangulaire :
où (x1,y1) et (x2,y2) représentent respectivement les points sur l’image ci-contre.
Cas 2 : Zone réactive circulaire :
où (x,y) représente les coordonnées du centre du cercle et r le rayon du cercle.
Cas 3 : Zone polygonale
où (x1,y1), (x2,y2), (x3,y3) représente les coordonnées des différents points du polygone dans l’ordre.
NB :
1. Pour obtenir les coordonnées d’un point sur une image, il suffit d’ouvrir le fichier image avec les logiciels PAINT ou encore Photoshop. Passer la souris sur le point et regarder en bas sur la barre de statut.
2. Les balises , sont des balises en ligne. De ce fait elles doivent toujours être utilisé dans une balise de bloc telle que
ou .EXERCICE D’APPLICATION N°1
Soit l’image ci-contre :
Créez deux zones réactives sur cette image permettant d’indique le toit et le mur de la maison.
Pour la première zone réactive, nous retiendrons un polygone
dont les points représentent la toiture. Figure 9 : Image Case mappée
Pour la seconde zone réactive, nous représenterons le mur de la maison en forme rectangulaire. Ecrire le code HTML permettant d’insérer l’image et de créer les 2 zones réactives.
Proposition de solution
| case"/> case">
|
Dans notre cas le clic sur les zones n’auront pas d’effet puisque les valeurs de href n’ont pas été définies.
EXERCICE D’APPLICATION N°2
Soit l’image relative à la photo d’ensemble d’étudiants ci-après. L’on veut créer des images réactives sur cette photo, de sorte à pouvoir ouvrir une page concernant chaque étudiant en cliquant sur sa tête.
Nom du fichier image :
URL de l’image :
Coordonnées des centres des cercles d’images réactives : A(58,39,39)
B(123,41,30) C(167,48,25) D(228,46,46)
Figure 10 : Exercice Zones réactives
Travail à faire :
Créer le code HTML permettant d’insérer l’image et de créer les zones réactives circulaires sur le visage de chaque étudiant avec les coordonnées ci-dessous.
Proposition de solution :
|
|
CHAPITRE VI – LES BALISES DE FORMULAIRE
Les formulaires permettent d’accroitre l’interactivité de l’utilisateur avec le serveur web. En effet, ils servent à saisir un texte, choisir une option, valider une action, etc.
Les usages des formulaires sur les sites web sont diverses ; entre autres, on peut citer : effectuer des inscriptions en ligne, créer un compte utilisateur, modifier des profils, envoyer des commentaires, etc.
Les données envoyées par le biais d’un formulaire sont :
1. Soit directement affichées sur une page pour être visible par les autres visiteurs,
2. Enregistrées dans un fichier,
3. Envoyées par email à un destinataire
4. Ou encore, enregistrées dans une base de données
Comme vous pouvez le constater sur le schéma, l’échange entre le serveur web et l’utilisateur se fait avec les langages côté client tels que HTML/CSS, Javascript. Alors que les transactions entre le serveur web et les serveurs de fichiers, de bases de données ou de messagerie se font avec les langages côté serveur tels que PHP, JSP, DOTNET, etc.
Notre cours s’intéressera particulièrement aux manipulations côté client du formulaire.
Le côté serveur du formulaire sera vu en 2ème année de BTS avec l’étude du langage PHP.
I. LA BALISE
La balise principale de création de formulaire est
. Il indique le début et la fin d’un formulaire.Syntaxe :
Texte à l'intérieur du formulaire
NB : il faut absolument utiliser des balises en bloc à l’intérieur du formulaire pour faire figurer du texte
A l’intérieur de la balise
, on trouve les attributs suivants :1. id : définit le nom qui identifie le formulaire. Il ne doit pas contenir d’espace.
2. Method : indique le mode d’envoi des données au serveur. Il existe deux méthodes d’envoi des données :
• Method=’’get’’ : cette méthode permet d’envoyer des données de petite taille (au plus 255 caractères). Les données sont envoyées par l’adresse URL de la page et sont visibles dans la barre d’adresse du navigateur.
• Method=’’post’’ : c’est la méthode qui est généralement utilisée car elle permet d’envoyer une grande quantité de données sans qu’elles soient visibles dans la barre d’adresse.
3. Action : définit l’adresse de la page ou le script (programme) qui va traiter les informations après la validation du formulaire. Les données peuvent être envoyées par email à une adresse. Dans ce cas, on utilise le mot clé ‘’mailto:adresse_email_destinataire’’. Pour utiliser mailto, il faut que la valeur de l’attribut method soit post.
4. Enctype : définit la manière dont les données du formulaire seront encodées lors de l’envoi au serveur.
NB : Cet attribut ne peut être utilisé que lorsque la valeur de l’attribut method est ‘’post’’.
Valeurs de l’attribut enctype :
| Valeur | Description |
| application/x-www-formurlencoded | Par défaut. Tous les caractères sont encodés avant l’envoi (les espaces sont convertis en symboles ‘+’ et les caractères spéciaux en valeurs hexadécimales du code ASCII). |
| multipart/form-data | Aucun caractère n’est encodé. Cette valeur est utilisée dans les cas où le formulaire contient un champ d’envoi de fichier au serveur. |
| text/plain ou text/html | Elles sont utilisées dans les cas d’envoi des données par email. Elles indiquent si les données seront envoyées sous forme de texte ou de code XHTML |
Syntaxe :
II. LA BALISE CHAMP ET SES VARIANTES
En général, pour créer un champ dans un formulaire, on utilise la balise et les principaux attributs de cette balise sont :
| Attribut | Fonction | Exemple |
| type | Définir le type du champ | type="text" |
| Name ou id | Identifier le champ dans le formulaire afin de récupérer son contenu | id="matricule" |
| Size | Fixer la longueur de la zone de saisie en nombre de caractères | size ="10" |
| Maxlength | Limiter le nombre de caractères à saisir dans un champ de saisie | maxlength ="15" |
| Value | Définir la valeur par défaut du champ | value="ET-0405-00000" |
| Readonly | Indiquer si le champ est en lecture seule. Dans ce cas, la valeur de ce champ ne peut être modifiée. | readonly="readonly" |
| Placeholder | Donner une indication sur le contenu du champ. (HTML 5 seulement) | placeholder="ET-0405-00015" |
Syntaxe :
Remarque : On peut définir un libellé pour le champ avec la balise .
La balise peut être utilisée à plusieurs fin dans un formulaire. Parmi les multiples usages, nous avons : les champs de saisie mono-ligne, les mots de passe, les champs d’envoi de fichiers et divers autres champs apparus surtout avec l’arrivée de HTML 5.
1) LE CHAMP DE SAISIE MONO-LIGNE
Dans une zone de saisie mono-ligne, le texte s’écrit sur une seule ligne sans aller à la ligne. Pour créer ce type de champ, on définit la valeur de l’attribut type à ‘’text’’.
Exemple:
|
2) LE CHAMP DE SAISIE DE MOT DE PASSE
Pour saisir un mot de passe dans un champ de saisie, on donne la valeur password à l’attribut type.
Ainsi, on aura par exemple :
Login
Mot de passe
NB : pour organiser le formulaire en regroupant les champs ayant trait au même sujet, on utilise les balises pour encadrer les éléments à regrouper.
3) LES CHAMPS D’ENVOI DE FICHIER
Pour créer un champ d’envoi de fichier on définit l’attribut type de la balise à ‘’file’’. Dans ce cas, un bouton Parcourir ou Browse apparait à droite de la zone.
Pour utiliser un champ d’envoi de fichier dans un formulaire, la balise doit avoir les attributs method et enctype avec les valeurs respectives post et multipart/form-data.
Exemple :
method="post"enctype="multipart/form-data">Pour restreindre les fichiers à envoyer à des types précis, on utilise l’attribut accept dont la valeur est la liste des types MIME acceptés.
Exemple : Ce champ accepte l’envoi de tous les types d’images.
Pour limiter la taille des fichiers à envoyer, on insère un champ caché dont l’attribut name sera MAX_FILE_SIZE et l’attribut value sera la taille maximale du fichier en octets.
Exemple complet :
Ecrire le code HTML du formulaire ci-dessous :
Figure 13 : Exemple de champ d'envoi de fichier
|
Transfert de CV Votre CV (au format PDF ou Word - Taille max. 10 Mo): |
|
|
4) LES BOUTONS RADIO
Pour créer une liste d’options à choix unique, on utilise la balise en définissant l’attribut type à la valeur ‘’radio’’.
L’attribut name des options appartenant à un même groupe doit avoir la même valeur pour chaque option.
L’attribut value définit la valeur qui sera envoyée au serveur si l’utilisateur clique sur l’option.
Pour définir par défaut le choix d’une option dans un groupe d’options, on donne la valeur ‘’checked’’ à l’attribut checked (checked="checked").
Syntaxe :
------
------
| Exemple: Qualité du produit Excellent Bon Moyen Mauvais |
Dans l’exemple ci-contre l’option Bon est choisie par défaut.
Figure 14 : Exemple de boutons radio
5) LES BOUTONS DE CHOIX MULTIPLES OU CASES A COCHER
Ils permettent de faire plusieurs choix dans un même groupe de cases à cocher. Ils ont les mêmes arguments que les boutons radio.
Mais l’attribut type doit prendre la valeur ‘’checkbox’’. Le nom du champ doit être un tableau lorsqu’il s’agit d’un groupe de case à cocher.
Syntaxe :
------
------
Exemple :
Soit une société de distribution de repas qui désire concevoir un formulaire dans le but de permettre aux clients de passer leur commande dans le menu du jour. Dans cet exemple le plat Tchep au poulet est choisi par défaut. Le formulaire doit se présenter comme suit :
Figure 15 : Exemple de cases à cocher
Aperçu du code HTML
Menu du jour
Attiéké - Poisson
Tchep au poulet
Foutou banane - Sauce tomate
Riz blanc - Sauce Feuille
Foufou - Sauce claire
6) LES BOUTONS DE VALIDATION ET DE REINITIALISATION DE FORMULAIRE
On utilise les boutons de validation pour envoyer les données du formulaire au serveur. L’appui sur ce bouton exécute, généralement, le script inscrit dans la valeur de l’attribut action de la balise >.
Syntaxe :
Le bouton de réinitialisation permet de rafraichir le formulaire afin de retrouver les valeurs de départ.
| Syntaxe :
| |
| Exemple
|
Pour utiliser une image sous forme de bouton de validation, on utilise la syntaxe suivante :
Syntaxe:
Exemple :
Figure 16 : Exemple de bouton image
Il existe, avec l’arrivée de HTML 5, de nouveaux types de champs de saisie permettant de rendre plus convivial le contenu d’un formulaire. Pour les obtenir, il suffit de définir les différentes valeurs de l’attribut type de l’élément comme suite :
| Valeur | Description | Aperçu du résultat sur Google Chrome |
| color | Définit un sélecteur de couleur | |
| date | Définit un champ date au format (an, mois, jour) | |
| datetime | Définit un champ de type date et heure au format (an, mois, jour, heure, minute, seconde) | |
| | Définit un champ devant contenir une adresse email | |
| month | Définit un champ de type mois | |
| number | Définit un champ de saisie numérique | |
| range | Définit un curseur permettant de choisir un nombre dans un intervalle. | |
| search | Définit un champ de recherche | |
| tel | Définit un champ de saisie de numéro de téléphone | |
| time | Définit un champ de saisie de l’heure | |
| url | Définit un champ de saisie d’adresse URL | |
| week | Définit un champ de saisie de semaine et d’année. |
III- LES AUTRES ELEMENTS DE FORMULAIRE
1) LES LISTES
Il s’agit de listes déroulantes ou de listes simples.
Pour créer une liste déroulante on utilise les balises avec à l’intérieur des balises pour chaque élément de la liste.
Les attributs de sont :
- value : définit la valeur envoyée au serveur par le formulaire
- selected : pour définir si l’option est choisie par défaut
Syntaxe :
-----
Pour définir une liste simple, il suffit d’ajouter l’attribut size pour indiquer le nombre d’éléments de la liste.
Pour permettre que plusieurs éléments soient sélectionnés en même temps, on définit l’attribut multiple dans la balise .
Exemple :
Ecrire le code HTML des listes suivantes :
|
| Vridi |
|
|
Figure 17 : Exemple de liste déroulante
|
Aucune Plateau Cocody Treichville Marcory Koumassi Yopougon |
| Vridi
|
Figure 18 : Exemple de liste
2) CHAMP DE SAISIE MULTI-LIGNE
Ce champ permet de saisir un long texte sur plusieurs lignes (exemples : commentaires, suggestions, descriptions, etc.). Pour insérer ce champ, on utilise la balise . Les attributs possibles de cette balise sont :
1. Name : définit le nom de l’élément
2. Cols : définit le nombre de caractères visibles sur la largeur de la zone de saisie.
3. Rows : définit le nombre de lignes visibles sur la hauteur de la zone de saisie.
4. Readonly : indique que la valeur par défaut définie ne peut être modifiée.
Pour définir une valeur par défaut pour la zone de saisie, il suffit de placer le texte entre les balise et .
Syntaxe : Texte par défaut
Exemple :
Entrez un commentaire sur notre service ici
Figure 19 : Exemple de champ de saisie multi-ligne
Exemple complet 1:
La société de livraison de repas à domicile BON APPETIT veut concevoir un formulaire permettant à leurs clients potentiels de s’inscrire en ligne. Ecrire le code HTML du formulaire ci-dessous :
|
Support de cours Module HTML 1ère Année BTS Informatique Développeur d’Application
Exemple complet 2:
La société BON APPETIT souhaite également mettre à la disposition de ces partenaires (restaurants, maquis) un formulaire permettant de saisir les informations sur les mets qu’ils proposent. Ecrire le code HTML du formulaire ci-dessous :
| enctype="multipart/form-data"> Saisie des recettes proposéesInformations sur la recette Nom de la recette Description de la recette Prix du plat pour une personne Période de disponibilité Matin (Petit déjeuner) Midi (Déjeuner) Après-midi (Gouter)
Echantillons Télécharger quelques images (Format JPG, PNG, GIF - Taille totale
|
M. GOGBE Benjamin – Professeur Développement Web - 31 -
CHAPITRE VI – LA BALISE D’HYPERLIEN
Un lien hypertexte (hyperlien) est un élément HTML qui renvoie le visiteur à une page ou à un emplacement de la page du même site ou d’un autre site web. Le lien hypertexte est délimité par la balise .
Syntaxe générale :
L’attribut href permet de définir le chemin de la page de destination du lien.
L’attribut title permet de spécifier un texte d’infobulle qui apparaitra quand le visiteur va pointer le texte du lien. L’attribut target permet de préciser la fenêtre cible dans laquelle la fenêtre de destination va s’afficher. Les valeurs possibles de l’attribut target sont :
| Valeur | Description |
| _self | Affichage dans le cadre courant (par défaut). |
| _blank | Ouvre le lien dans une nouvelle fenêtre. |
| _top | Affichage dans la totalité de la fenêtre courante. |
| _parent | Affichage dans le cadre qui enveloppe la structure courante. |
Il peut avoir plusieurs situations d’utilisation des liens hypertextes en fonction de l’emplacement de la page cible ou de l’usage que l’on veut faire du fichier. Parmi elles, on peut citer :
- Lien vers un autre site web
- Lien vers une autre page de son propre site
- Lien vers une ancre
- Envoyer un email ou télécharger un fichier par le lien
I- LIEN VERS UN AUTRE SITE WEB
Il suffit de préciser dans l’attribut href l’adresse URL absolue du site web de destination.
Exemple :
Lien vers le site web :
Accédez au Google Lien vers la page du site :
Exemple
Lien vers la page de notre site web : Bon appetit
II- LIEN VERS UNE AUTRE PAGE DU MEME SITE WEB
Il peut y avoir deux situations dans ce cas :
1) Les 2 pages sont dans le même dossier
Dans ce cas, il faut spécifier le nom de la page dans l’attribut href.
Exemple : Lien vers la page de notre site web : Bon appetit
2) Les 2 pages sont dans des dossiers différents
Lorsque la page cible se trouve dans un sous-dossier du dossier courant, la valeur de l’attribut href s’écrira :
sous-dossier/pagecible.
Exemple : soient deux fichiers et organisés selon l’arborescence ci-dessous :
monsite
|
|---Contenu
| |
Pour créer un lien de la page vers la page , on écrira :
Lorsque la page cible se trouve dans le dossier parent du dossier courant, la valeur de l’attribut href s’écrira : ../pagecible.
Exemple : soient deux fichiers et organisés selon l’arborescence précédente :
Pour créer un lien de la page vers la page , on écrira :
III- LIEN VERS UNE ANCRE
Une ancre est une sorte de point de repère que l’on place sur une page web pour faire référence à une portion de cette page. Elle est très souvent utilisée pour créer un lien permettant d’aller directement au bas ou en haut de la page.
Pour créer une ancre, on ajoute l’attribut id dans une balise qui servira de repère sur la page.
Syntaxe de création d’une ancre: contenu de la balise
Exemple :
Texte du titre
Pour faire référence à une ancre, il faut utiliser le signe dièse (#) suivi du nom de l’ancre.
Plusieurs cas peuvent se produire :
- Cas d’une ancre interne
Dans ce cas, le lien pointe vers un emplacement (ancre) situé sur la même page.
Syntaxe d’une ancre interne: Texte du lien vers l’ancre
Exemple : Aller directement à la fin de la page
- Cas d’une ancre située sur une page du même site
Syntaxe: Texte du lien vers l’ancre
Exemple : Cliquer pour aller directement au formulaire d’inscription
- Cas d’une ancre située sur une page d’un autre site
Syntaxe: Texte du lien vers l’ancre Exemple :
Inscrivez-vous sur le site NB: pour créer un lien vers le début d’une page, on écrit : Début de la page
CHAPITRE VII – LES BALISES DE LISTE
Elles permettent de créer des listes, d’énumérer des éléments, de créer des sommaires, des menus, etc.
Il existe 04 différents types de listes:
- Les listes non ordonnées (à puces)
- Les listes ordonnées (numérotées)
- Les listes imbriquées
- Les listes de définitions
I- LES LISTES NON ORDONNES OU LISTES A PUCES
Elles sont définies par la balise et chaque item (élément) est défini par la balise .
Syntaxe :
- Item 1
- Item 2 …
- Item n
Il existe plusieurs types de puces. Le type est précisé par l’attribut type. Les principaux utilisés sont :
• Disc
|
Liste des matières :
|
|
Liste des matières :
|
• Circle
• Square
Exemple 1:Exemple 2:
Figure 22 : Aperçu de listes à puces
II- LES LISTES ORDONNEES
Elles sont introduites par la balise et chaque élément par la balise .
L’attribut start permet de définir le début de la numérotation. Pour inverser la numérotation, on ajoute l’attribut reversed dans la balise .
Syntaxe:
- Item 1
- Item 2 …
- Item n
|
Exemple 1: Le plan de l’exposé :
Exemple 2: Le plan de l’exposé :
Exemple 3 : Le plan de l’exposé :
|
|
|
Exemples
Figure 23 : Aperçu de listes numérotées avec plusieurs variantes
III- LES LISTES IMBRIQUEES
Il est possible de combiner une liste numéroté avec une liste à puces. On obtient une syntaxe comme suite :
|
…
|
|
Exemple 3 : Le plan de l’exposé :
|
Exemple de liste imbriquée :
IV- LES LISTES DE DEFINITIONS
Ce type de liste permet d’associer un terme avec sa description. Elle est utile pour la création de glossaire ou de dictionnaire par exemple. On la définit en utilisant la balise . Ensuite, on indique chaque terme de la liste avec la balise et sa description avec la balise .
Syntaxe générale :
- Terme 1
- Description terme 1
- Terme 2
- Description terme 2
- Terme N
- Description terme N
…
|
Quelques définitions de termes en Développement web
|
Exemple :
Figure 25: Cas de liste de définitions
CHAPITRE VIII – LES BALISES DE CONTENU EXECUTABLE
Les contenus exécutables ou scripts sont des petits programmes en Javascript ou VBscript exécutés côté client (par le navigateur) pour améliorer l’interactivité avec le visiteur.
Les scripts exécutables sont des fonctions qui s’exécutent généralement lors des évènements (clics,
survol, appui de touche, etc) liés aux objets tels que les boutons, les images, les liens, etc.
On distingue deux types de scripts :
- Les scripts externes
- Les scripts internes
I- LES SCRIPTS EXTERNES
Ce sont des fichiers externes à la page, avec extension .js pour les fichiers javascript ou .vbs pour les VBscript.
On utilise la balise
Syntaxe de la Balise script
II- LES SCRIPTS INTERNES
Les scripts internes sont des bouts de code directement écrits entre les balises . Ils sont directement inclut dans la page comme suit :
Balise
{
/* du code ici */
}
NB : Contrairement aux scripts externes, les scripts internes ne sont pas réutilisables dans les autres pages.
2ème PARTIE : LES FEUILLES DE STYLE OU CSS
CHAPITRE IX – GENERALITES SUR LES FEUILLES DE STYLE
I. INTRODUCTION
Les feuilles de style en cascade ou Cascade Style Sheet (CSS) ont été adoptées par le W3C pour séparer le contenu des pages HTML et leur apparence. Elles régissent l’apparence des éléments HTML d’une page concernant la disposition, la couleur, les dimensions, etc.
Apparues depuis les années 1996, les versions successives de ce langage ont été :
- CSS 1 ;
- CSS 2.0 ;
- CSS 2.1 ;
- CSS 3, la version actuelle
Si les versions précédentes du HTML permettaient encore de nous passer de ce langage à un certain niveau, avec l’arrivée du HTML 5, le CSS s’impose à tout développeur web.
Elles facilitent ainsi la gestion de la charte graphique d’un site web. En effet, grâce aux feuilles de style, lorsque la charte graphique d'un site composé de plusieurs dizaines de pages web doit être changée, il suffit de modifier la définition des feuilles de style en un seul endroit pour changer l'apparence du site tout entier !
Les feuilles de style permettent entre autres :
• d'avoir une présentation homogène des pages sur tout le site.
• Une maintenance plus rapide du site web.
• une plus grande lisibilité du code HTML.
• le positionnement rigoureux des éléments.
• un chargement plus rapide des pages.
II. PRINCIPE GENERAL
On peut définir une feuille de style dans trois (3) endroits dans le code HTML de la page web :
- Directement à l’intérieur des balises avec l’attribut style (méthode pas recommandée) ;
- Dans l’entête de la page HTML (peu recommandée); - Dans un fichier externe .css (méthode la plus recommandée).
1) Dans l’entête de la page HTML
On insère le code CSS dans la balise entre les balises d’entête de la page HTML.
Syntaxe :
|
|
Selecteur { propriété1: valeur; propriété2: valeur; … propriétéN: valeur ; }
|
Exemple : le code suivant définit une couleur à appliquer aux éléments
Même si cette méthode fonctionne, elle devient pénible surtout lorsque vous devez définir ou modifier le même style pour plusieurs pages. C’est pourquoi, il est recommandé de recourir à la méthode suivante. 2)Dans un fichier externe .css
Cette méthode consiste à créer un fichier css externe à la page HTML (généralement dans un dossier css) et ensuite de lier ce fichier à la page HTML avec la balise .
Application :
1ère étape : créons un fichier (par exemple) dans un dossier CSS (par exemple) que l’on aura créée auparavant. Ensuite, écrivons le code CSS de la feuille de style précédente.
2ème étape : A l’intérieur des balises de la page HTML, on insère la balise comme suit :
par exemple .
Dans la syntaxe précédente, on a :
• La balise avertit le navigateur qu'il doit chercher un document situé à l'extérieur de la page HTML.
• L'attribut rel="stylesheet" précise que le document en question est une feuille de style externe.
• L'attribut type="text/css" précise le type de feuille de style.
• L'attribut href="/ URL " donne l'URL de la feuille de style, c'est-à-dire son emplacement sur Internet.
III. DEFINITION DES SELECTEURS
Revenons sur la syntaxe de définition des feuilles de style précédente.
Selecteur { propriété1: valeur;
propriété2: valeur;
…
propriétéN: valeur ;
}
Dans cette syntaxe, le sélecteur représente l’élément ou les éléments auxquels on veut appliquer les différentes propriétés.
IV. QUELQUES TYPES DE SELECTEURS SIMPLES
Il existe plusieurs types de sélecteurs dont quelques-uns.
V. LES PSEUDO-CLASSES ET PSEUDO-ELEMENTS
Les pseudo-classes permettent d'affiner le style appliqué à un certain nombre de balises en définissant une réaction à un événement ou bien à la position relative de l’élément au sein des autres balises.
Contrairement aux classes, le nom des pseudo-classes est prédéfini, il n'est donc pas possible de créer ses propres pseudo-classes.
Tableau 1: Quelques pseudo-classes et pseudo-éléments
| Pseudo-classe ou pseudo-élément | Rôle |
| :hover | Elément lien survolé |
| :visited | Elément lien visité |
| :link | Lien |
| :active | Etat activé d’un élément |
| :focus | Etat réception de focus |
| :checked | Etat coché d’un élément checkbox |
| ::first-letter | Pseudo élément désignant la Première lettre |
Exemples :
| ? | a:hover {font-decoration: underline;} permet de souligner le texte du lien lors du survol de celui-ci |
| ? | textarea:focus {color: #FF0000;} permet de changer la couleur du texte de la zone de texte lorsque celleci reçoit le focus. |
| ? | a:active {color: #FF0000;} permet de changer la couleur du texte du lien lorsque celui-ci est actif. |
| ? | a:link{color: #FF0500;} permet de définir les propriétés des liens que visiteur n’a pas encore été sélectionné. |
| ? | a:visited{color: #FF000A;} permet de définir la couleur des liens hypertextes que le client a déjà visités |
| ? | p ::first-letter : pseudo-classe d’élément s’appliquant sur la première lettre de chaque paragraphe : |
|
Figure 26: Résultat du code CSS ci-contre
VI. LES PROPRIETES
Elles représentent les différents effets souhaités sur l’élément. La ligne de propriété est composée d’un nom de propriété et d’une valeur séparée par deux points terminée par un point-virgule.
Exemple : font-weight: bold;
Il existe un nombre important de propriétés CSS même si toutes ne sont pas encore prises en compte par tous les navigateurs.
Nous énumérerons quelques propriétés selon les groupes d’éléments auxquelles elles peuvent s’appliquer.
Tableau 2 : Quelques propriétés sur le texte
| Propriétés | Rôles | Quelques valeurs possibles |
| Color | Couleur du texte | Blue, red, green, yellow, rgb(0,0,255), rgba(0,0,0,0.5), #003399 |
| Font | Déclaration groupée de propriétés sur un texte (taille, couleur, police, etc.) | font-style font-weight font-size/line-height fontfamily bold 16px "Trebuchet MS", Arial, Helvetica, sansserif ; |
| Font-weight | Epaisseur du texte | normal, bold, light, bolder, lighter valeur numérique |
| Font-size | Taille de police | xx-small, x-small, small, medium, large, x-large, xxlarge, taille en points (pt), cm, % |
| Font-style | Style de police du texte | normal, italic, oblic |
| Font-family | Famille de police | Arial ou Georgia, "Times New Roman", Times, serif |
| Font-stretch | Etirement du texte | Condensed, expanded |
| Text-decoration | Décoration du texte | blink, underline, line-through, overline ou none (clignotant, souligné, barré, surligné ou aucune) |
| Text-indent | Indentation de texte | en pouces (in), en cm, ou en % |
| Text-align | Alignement du texte | left, center, right, justify |
| Text-transform | Définit la casse de texte | uppercase, lowercase, capitalize (majuscule, minuscule, première lettre en majuscule) |
| Word-spacing | Espace entre les mots | En points (pt), pouces (in), en cm, en pixels (px), ou en % |
| Line-height | Interligne du texte | En points (pt), pouces (in), en cm, en pixels (px), ou en % |
Exemple :
| p{ } | font-family: Georgia, "Times New Roman", Times, serif; /*Famille de police*/ font-size:16px; /* taille 16*/ font-weight:bold; /*texte en gras*/ text-align:justify; |
Tableau 3 : Propriétés de fond
| Propriétés | Rôles | Quelques valeurs possibles |
| background-color | Couleur de fond | "#RRGGBB", "#F03300A", blue, green |
| background-image | Image de fond | url() |
| background-repeat | Répétition de l’arrière-plan | repeat, repeat-x, repeat-y, no-repeat |
| background-attachment | Comportement de l’image l’arrièreplan lors du défilement | scroll, fixed |
| background-position | Position de l’image d’arrière-plan par rapport au coin supérieur gauche | top, center, bottom, left, center ou right En points (pt), pouces (in), en cm, en pixels (px), ou en % |
| background-size | Taille de l’image de fond par rapport aux dimensions de l’élément | 80% 80% |
| background | Groupe de propriétés d’arrière-plan | url() fixed repeat |
Exemple :
| body{ } | background-image:url(); background-repeat:no-repeat; background-attachment:fixed; background-position:left top; background-size:10% 15%; |
Tableau 4 : Propriétés d’ombres et transparence
| Propriétés | Rôles | Quelques valeurs possibles |
| Text-shadow | Ombrage du texte | |
| Text-outline | Contour du texte | |
| box-shadow | Ombrage de l’élément boîte | |
| opacity | Opacité de l’élément |
| .logo{ | width:15%; height:15%; box-shadow: 10px 10px 5px #666666; } |
Exemple:
Tableau 5 : Quelques propriétés de bordure
| Propriétés | Rôles | Quelques valeurs possibles |
| border | Groupe de propriétés de bordure | border: 1px solid #CCC; |
| Border-width | Largeur de bordure | 2px |
| Border-color | Couleur de bordure | Gray, #CCC |
| Border-spacing | Espacement de bord | 0px |
| Border-radius | Rayon du bord arrondi | 2px 2px 3px 3px |
| Outline | Contour | |
| Outline-style | Style du contour | Solid, dotted |
| Outline-color | Couleur du contour | blue |
| Outline-width | Largeur de contour | 1px |
Exemple:
table, tr, td{
border-width:1px; border-color:#CCCCCC; border-style:solid; border-spacing:0px; width:60%;
}
LISTE DES PROPRIETES
Type Propriété Valeur Description
Marges margin-top En points (pt), pouces (in), en cm, en pixels (px), ou en % Valeur de la marge supérieure margin-right En points (pt), pouces (in), en cm, en pixels (px), ou en % Valeur de la marge de droite margin-bottom En points (pt), pouces (in), en cm, en pixels (px), ou en % Valeur de la marge inférieure margin-left En points (pt), pouces (in), en cm, en pixels (px), ou en % Valeur de la marge de gauche
margin Raccourci pour les propriétés
de marge
padding-top En points (pt), pouces (in), en cm, en pixels (px), ou en % Ecartement entre l'élément et le bord supérieur
padding-right En points (pt), pouces (in), en cm, en pixels (px), ou en % Ecartement entre l'élément et le bord droit
padding-bottom En points (pt), pouces (in), en cm, en pixels (px), ou en % Ecartement entre l'élément et le bord inférieur
padding-left En points (pt), pouces (in), en cm, en pixels (px), ou en % Ecartement entre l'élément et le bord gauche
padding Raccourci vers les propriétés
d'écartement
Listes list-style-type disc, circle ou square Type de puces et de
numérotation
list-style-image URL Permet de remplacer les
puces par une image
list-style-position inside ou outside Spécifie si les puces sont à
l'intérieur ou à l'extérieur du texte
list-style Raccourci vers les propriétés de liste
Exemple complet :
MINI-PROJET:
Projet 1 : Réalisation d’un site web de la classe BTS IDA 1ère Année
APERÇU DE LA PAGE D’ACCUEIL DU SITE
CODE HTML 5
|
Bienvenue sue le site de la classe BTS IDA 1ère Année
Ecole Supérieure d'Informatique et de Commerce
Bienvenue sur le site des etudiants de BTS IDA 1ère Année
La programmation et le developpement web n'ont plus de secret pour nous.
Presentation de la filière
Le mot « algorithme » est un terme d’origine arabe, venant plus précisément du nom du célèbre mathématicien de Bagdad (780-850), AL-KHUWARIZMI qui écrivit le premier ouvrage de résolution des équations linéaires et quadratiques.
L'algorithmique est l’ensemble des règles et des techniques qui sont impliquées dans la définition et la conception d'algorithmes.
Un algorithme est donc une suite ordonnée et finie d’instructions élémentaires permettant de résoudre un problème.
Le dictionnaire Robert définit l’algorithme comme un ensemble de règles opératoires propres à un calcul.
Album Photos |
|
News TIC
Droit à l'oubli : Google s'incline devant la Justice européenne
Google a mis en ligne un formulaire permettant à toute personne de demander la suppression de son moteur de recherche des résultats de recherche inclu
Droit à l'oubli : Google s'incline devant la Justice européenne
Google a mis en ligne un formulaire permettant à toute personne de demander la suppression de son moteur de recherche des résultats de recherche inclu
Droit à l'oubli : Google s'incline devant la Justice européenne
Google a mis en ligne un formulaire permettant à toute personne de demander la suppression de son moteur de recherche des résultats de recherche inclu
Rubriques
Copyright © 2013-2014 - BTS IDA 1 ESICOM Plateau- Tous droits réservés Contactez-nous ici
|
CODE CSS
| @charset "utf-8"; /* CSS Document */ body{ background-color:rgba(191,191,191,0.5);/* Gris avec transparence de 0.5 */ } /*bloc de corps de la page contenant toutes les données*/ #corps{ width:80%; height:100%; background-color:#FFFFFF; /*Girs */ margin:auto; border-radius:10px 10px; /*Bordures arrondies*/ border:2px solid rgb(214,16,5); } /*Taille du logo*/ #logo{ width:30%; height:30%; vertical-align:middle; /*Aligner verticalement */ margin-left:20px;/*Marge exterieure de gauche*/ } /*Cadre logo et nom de l'ecole*/ #titre_ecole{ background-color:#fde5d9;/*Couleur de fond rose du logo*/ border:1px solid #fde5d9; border-radius:10px 10px 0px 0px; /*Bordures arrondies*/ } /*banniere*/ #banniere{ background-color:rgba(20,35,126,1);/*#14237e;*/ border:1px solid rgba(20,35,126,1); } /*Nom de l'ecole*/ header div h2{ display:inline-block; font-family:"Trebuchet MS", Arial, Helvetica, sansserif; color:#14237e; /*Le bleu du logo*/ font-weight:lighter; /*Rendre l'écriture fine*/ margin-left:50px;/*Marge exterieure de gauche*/ } /*Titre de bienvenue*/ header h1{ font-family:"Trebuchet MS", Arial, Helvetica, sansserif; color:rgba(255,255,255,1);/*#14237e; Le bleu du logo*/ font-weight:bold; /*Rendre l'écriture fine*/ font-size:26px; text-align:center; text-shadow:0px 1px 2px #FFFFFF; } /*Slogan*/ header h3{ font-family:"Trebuchet MS", Arial, Helvetica, sansserif; color:rgba(214,16,5,0.9);/*#14237e; Le bleu du logo*/ | font-style:italic; /*Rendre l'écriture italique*/ font-size:16px; text-align:center; } /*Menu */ nav{ width:100%; text-align:center; font-family:Arial, Helvetica, sans-serif; } /*Element texte du menu*/ nav ul li{ display:inline-block; margin-left:15px; padding:10px; /* border: 2px dotted #999999;*/ } /*Element conteneur ul du menu*/ nav ul{ list-style-type:none; background-color:#000;/*#666; Gris foncé*/ margin:0; } nav a{ font-size: 1.1em; color:#CCC; /*#181818; Gris*/ text-decoration:none; } nav a:hover{ font-size: 1.1em; color:#6CF; /*#CCC; Gris clair*/ text-decoration:none; } /*Presentation*/ section{ width:70%; } /*News TIC*/ aside{ width:25%; } article, section, aside{ display:inline-block; vertical-align:top; border:1px solid #fde5d9; border-radius:10px 10px 0px 0px; /*Bordures arrondies*/ box-shadow: 0px 0px 20px #aaa; -moz-box-shadow: 0px 0px 20px #aaa; -webkit-box-shadow: 0px 0px 20px #aaa; margin-top:5px; margin-left:5px; margin-bottom:5px; margin-right:5px; } article p, aside p{ font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#000; padding-left:15px; } | |
| article h2{ font-family:Arial, Helvetica, sans-serif; font-size:20px; color:#000; border-bottom-style:dotted; border-bottom-color:#FF0000; border-bottom-width:thin; background-color:#CCCCCC; padding-left:15px; margin-top:0; border-radius:10px 10px 0px 0px; /*Bordures arrondies*/ } aside h2{ font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#000; border-bottom-style:ridge; border-bottom-color:#FF0000; border-bottom-width:thin; padding-left:10px; border-radius:10px 10px 0px 0px; /*Bordures arrondies*/ } .titreinfo{ font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; color:#999999; padding-left:10px; } /*Album photo*/ figure img{ display:inline-block; | border:1px solid rgb(214,16,5); margin:2px; width:25%; height:25%; } figcaption{ color:#333; font-family:Arial, Helvetica, sans-serif; font-size:12px; } /*pied de page*/ footer, footer h2{ font-family:Arial, Helvetica, sans-serif; font-size:14px; background-color:#000000; color:#CCCCCC; padding-left:5px; padding-top:5px; } footer a{ text-decoration:none; color:#CCCCCC; } footer ul{ display:inline-block; vertical-align:top; margin-left:50px; } footer p{ display:inline-block; margin-left:100px; text-align:center; | |
| } |
Aperçu de la page d’accueil du site
BIBLIOGRAPHIE
Commentçamarche. (2006, Juin). Feuille de style - CSS. Retrieved Octobre 2010, from Portail encyclopedique :
Goetter, R. (2005,2007). CSS 2 - Pratique du design web. Groupe EYROLLES.