Dernière mise à jour: 2022-12-12 05:11:07 | Francais
Partager maintenant
Formateur KAWEDE EZECHIEL
Prix de participation 0$
Total Inscrit 0
Statut Gratuit
Lieu En ligne | En presentiel
A propos du cour
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
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.
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
(").
Example
Dans
l’exemple ci-dessus, l’élément 1 représente un titre de premier niveau
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.
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 strong<> se ferme à l’intérieur de
l’élément défini par la balise h2 <>
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.
V- STRUCTURE D’UNE PAGE HTML 5
Une
page HTML ou XHTML s’écrit de la façon suivante :
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 :
- 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.
-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 : , ,
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 ?
CHAPITRE II – LES BALISES EN BLOC ET
LES BALISES EN LIGNE
Le
langage HTML distingue deux grandes catégories de balises :
L’apprenant n’est vraiment pas obligé d’avoir des notions en programmation
L’apprenant doit nécessairement avoir des notions de base en informatique, savoir manipuler l’Ordinateur, se familiariser aux notions de WINDOWS, OFFICE, DOS,…
Public ciblés
Les enfants, jeunes et adultes,… Ce cours concerne les débutants en informatique et ceux-là qui veulent emboiter les premiers pas en programmation Web.
Ceux-là ayant des notions avancées en programmation ce cours peut leurs servir de récapitulation
Avantages
Ce cours permettra aux apprenants intéressés de découvrir le monde Web ainsi que la première technologie importante à utiliser dans la création des premières pages Web
Il permettra également aux apprenants de comprendre la structure ainsi que la composition d’un site Web.
Fichier Pdf du cour
Pas des fichiers pour ce cours!
Nous corrigeons, traduisons vos documents et plateformes et bien d’autres applications !
Bridge Tech RDC est un service de Bridge connections qui présente des projets numériques en s'appuyant sur les compétences du 21ème siècle. Il travaille de manière professionnelle dans la conception de sites web et la formation numérique en RDC et partout ailleurs !
