Apprendre l’HTML et CSS
Apprendre l’HTML et CSS document de formation complet
...
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, HTML 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.
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 :
Exemple :
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 photo.jpg 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é index.html (ou index.htm).
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 de
Image: 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 : , ,
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:
- iso-8859-1 : encodage classique pour les langues d’Europe occidentale
- iso-8859-15 : complète le précédent avec les caractères € et œ.
- 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 :
- le texte doit contenir des accents et des caractères spéciaux
- 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 , et
Exercice 8 : Ecrire le code HTML complet d’une page web comportant les éléments suivants :
- Titre : Ma bienvenue sur ma page personnelle
- Mots clés : GOGBE, Benjamin, Informaticien, Ingénieur, Enseignant
- Rechargement chaque 10 minutes
- Auteur : Benjamin GOGBE
- Description : Ma page personnelle
- 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 :
- les balises en bloc (block)
- 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
Tableau de quelques éléments XHTML
Balise Commentaires body Corps du document head Entête du document
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