Kits formation html-les_bases

Les bases du langage HTML
Offert par Akli B.
www.kitsformation.com

03/10/2012 www.kitsformation.com 1

Préface
• Bienvenue à votre kit de formation en HTML.
• Ceci est le premier niveau de votre auto formation en HTML. Nous vous apprendrons les bases du
langage HTML qui sont, vous allez le voir, simples à comprendre et à utiliser.
• À l’issu de ce niveau vous saurez écrire des pages web complètes ce qui vous permettra de créer par vous-
même un mini site web et notamment celui que nous vous proposons en travail pratique à la fin de ce
document.
• Ce premier niveau est le plus important et le plus gros des niveaux d’apprentissage de ce kit, vous
trouverez très faciles les autres niveau 2,3,4 et 5 une fois que vous avez bien assimilé celui-ci.
• L’apprentissage est basé sur beaucoup de pratique que ce soit par les exemples, les exercices ou les
travaux pratiques. La solution de chaque exercice se trouve dans le dossier "Exercices" de ce niveau.


Introduction
• Toute page web est une interprétation d'un code html par un navigateur web (exemple de navigateur web:
Internet Explorer, Mozilla Firefox, Google Chrome, Safari, ...)
• Le html est un langage à balises, à la portée de tous, que même un non informaticien peut apprendre
facilement.
• Un simple éditeur de texte comme Bloc-notes suffit pour écrire du html, nulle besoin d’un serveur web ni
d’un site web ni d’un éditeur html spécial comme Dreamweaver ou Visual Studio qui ne sont que des aides
pour écrire plus vite et plus facilement du html. Nous utiliserons Notepad++, qui est un bloc-notes évolué
offrant notamment la fonctionnalité de coloration syntaxique très utile pour distinguer les balises du texte.
• Pour qu'un code html soit interprété par un navigateur, il suffit de nommer le fichier texte avec l'extension
.html ou .htm (une page web est un fichier texte avec une extension .htm ou .html). Exemple :
«Mapage.html».
• HTML est l’acronyme de Hyper Text Markup Language (langage hypertexte à balises). Hypertexte veut
simplement dire un texte augmenté ou évolué surtout pour la possibilité qu’on a, en html, de transformer
du texte en liens cliquables menant vers des documents, des pages web ou des applications.
• En html en peut inclure dans une page web des contenus multimédias tels que les images, les vidéos, du
contenu flash, … .
• Le html est souvent utilisé conjointement avec des feuilles de style CSS pour améliorer le style de
présentation et avec de la programmation Javascript pour donner un aspect dynamique à la page web. Nous
ne traitons pas ces deux langages dans ce kit pour respecter un apprentissage par étapes. Pour mieux les
apprendre vous trouverez sur notre site www.kitsformation.com deux kits consacrés à ces deux langages.


Introduction (suite)
• Pour mieux apprendre, commencez par connaître le HTML avant de vous soucier du CSS et du
JavaScript qui ne sont que des briques qu’on ajoute au html pour le rendre plus attractif et pour le
dynamiser.
• Vous pouvez trouver dans le dossier “Exemples” tous les exemples cités dans ce document. Vous pouvez
les tester et les modifier à votre guise.
• Nous utiliserons volontairement des noms de balise du genre “unebalisehtml” dans un but
d’apprentissage, sachez qu’il existe une liste complète de balises html définies que vous trouverez dans le
dossier "Annexes" sous le nom “Liste des balises html.pdf”.


Quelques définitions


Quelques définitions
• Une balise dans un langage informatique (tag en anglais) est un délimiteur de contenu. Exemple:
<unebalisehtml>mon contenu</unebalisehtml>

• Elle est constituée d'un nom, ici unebalisehtml, délimité par un chevron ouvrant et un chevron
fermant <unebalisehtml>. Une balise ouvrante a dans la plupart des cas sa balise fermante
caractérisée par l'ajout d'un slash / après le chevron ouvrant < de notre balise </unebalisehtml>.
• En html, le nom d’une balise peut être écrit en majuscule ou minuscule cela fonctionne dans les
deux cas, mais on adoptera la notation minuscule car cela fait partie des nouvelles
recommandations html.
• On peut imbriquer des balises html, nous verrons les règles d’imbrication par la suite.
<unebalisehtml> texte à afficher à l'écran </unebalisehtml>
<unebalisehtml><uneautrebalisehtml> texte à afficher à l'écran</uneautrebalisehtml></unebalisehtml>

• Les balises ne sont pas affichées à l’écran, ce sont des directives pour le navigateur qui les
interprète et formate leurs contenus selon ces directives.


Quelques définitions(suite)
• Une balise html peut avoir des attributs, cela se matérialise par l'ajout dans la partie ouvrante de la
balise, juste après le nom de la balise, des attributs par leurs noms html et leurs valeurs, dont on verra la
liste pour chaque balise par la suite. Chaque attribut a une valeur délimitée par des guillemets "...“ qui
peuvent être remplacés par des cotes si leur contenu contient des guillemets. Exemple :
<balisehtml attribut1=“valeur1" attribut2=“valeur2"> mon contenu</balisehtml>
<balisehtml title=‘Ceci est le titre de “mon contenu”.’ > mon contenu</balisehtml>

• La partie fermante d'une balise html peut être remplacée par un slash / juste avant le chevron fermant
de la partie ouvrante si la balise n’a pas de contenu. Les balises <html>, <head> et <body> échappent à
cette règle car elles nécessitent leurs balise fermante dans tous les cas. Exemple :
<balisehtml attribut1="propriétés1"></balisehtml> peut être remplacé par <balisehtml attribut1="propriétés1" />
• Il existe une balise html que le navigateur ignore lors de son interprétation du code html et qui sert à
documenter le code, appelée la balise commentaire, est qui est représentée par les délimiteurs .
Exemple :

Structure d'un fichier HTML
• Tous les fichiers html ont la même structure : une en-tête et un corps
• L'en-tête sert au navigateur pour afficher un titre de fenêtre, inclure des fichiers ... elle est
matérialisée par la balise <head> ... </head>
• Le corps est ce qui représente la page web affichée à l'écran. Il est matérialise par la balise
<body> ... </body>
• Tout fichier html possède une balise principale englobant <html> ... </html>
• Il n’est pas nécessaire de respecter un formatage particulier pour écrire vos pages html, on peut
bien écrire tout le code sur une seule ligne le navigateur l’interprétera, mais pour une meilleur
lisibilité et maintenabilité de votre code, un minimum d’indentation est toujours utile, ce que
nous feront tout au long de cet apprentissage.
• Voici une structure de document html qui peut être reprise pour toute création d’un nouveau
document html, pour cela copier/coller le fichier “Structure.html” qui se trouve dans le répertoire
“Exemples” de ce kit, renommez le et vous n’avez plus qu’à le compléter


Les balises HTML


Balises HTML d'en-tête
• On rappel que l'en-tête est la partie délimitée par la balise <head> ... </head> du document html.
• Tout ce qu'on met à l'intérieur de l'en-tête sert à décrire notre page web, à inclure des fichier ou
contenu css, javascript, à ajouter une description ou un titre à la page, des mots clés pour les
moteurs de recherches, ... et n'est pas affiché dans le volet principal du navigateur ou dans la page
web.
• l'en-tête peut être vide, on peut simplement écrire la balise <head> </head> sans rien mettre dedans,
mais, au minimum, le titre de la page est utile.
• L’en-tête peut contenir les balises suivantes <title>, <base>, <link>, <meta>, <script> et <style> qui
ont chacune une liste d’attributs.
• Nous vous proposons de commencer par apprendre les bases du langage html afin de pouvoir écrire
des pages fonctionnelles de suite et de parfaire tout cela par la suite c’est pour cela que nous
n’abordons que quelques balises dans ce document.
• Pour l’en-tête nous abordons la balise <title> et nous verrons les balises <base>, <link>, <meta>, <script> et
<style> dans le dossier du niveau suivant "2 - Notions avancées du HTML".


Balises HTML d'en-tête – La balise de titre <title>
• La balise <title> sert à définir un titre pour notre page web, c’est la partie affichée au dessus de la
barre de menu du navigateur ou en titre d’un onglet. Ce titre est ce qui est affiché dans la liste des
favoris si on y ajoute notre page, dans la liste des historique également et c’est ce qui est affiché aussi
dans les moteurs de recherche tels que Google.
• Le titre est donc l’identité de notre page web et doit être représentatif de son contenu.
• La balise <title> n’a pas d’attributs.
• Voici un exemple de document html aves uniquement un titre que vous pouvez trouver dans le
répertoire «Exemples» de ce kit sous le nom «Titre.html»:


Balises HTML du corps
• Nous nous intéresseront maintenant aux balises du corps de notre document html, celles qui
régissent l’affichage à l’écran.
• Nous rappelons que le corps d’un document html est la partie du code délimité par les balises
<body> ... </body>.
• Comme pour l’en-tête, nous verrons Les balises les plus simples/importantes qui nous permettent de
créer une page web html de départ pour l’apprentissage et nous verrons l’exhaustivité des balises
dans la document annexe.
• Nous allons étudier les balises dans un premier temps pour se familiariser avec puis nous passerons
au attributs des balises dans un second temps pour ajouter de l’information ou du comportement à
chaque balise.


Balises HTML du corps – Saut à la ligne
La balise <br />
• La balise <br /> est la balise la plus simple, elle permet de faire un retour chariot ou plus
communément un retour à la ligne.
• Exemple :

• Remarquez qu’on a écrit le tout sur une ligne dans le code de l’exemple et ça s’affiche sur deux
lignes dans le navigateur grâce au retour à la ligne <br />.


Balises HTML du corps – Les titres
Les balises de niveaux de titres h1 h2 h3 h4 h5 h6
• Les balises de niveaux des titres définissent la hiérarchie du texte affiché. La grosseur du titre et donc
son importance, diminue de h1 jusqu’à h6.
• Les Titres sont importants dans vos documents HTMLs car structurants et les moteurs de recherche
les utilisent pour indexer vos documents. N’utilisez pas les titres pour rendre du texte gras ou gros,
des balises HTML existent pour cela.
• Quoi de mieux qu’un exemple pour illustrer cela.


Balises HTML du corps – Les paragraphes
La balise <p>
• La balise <p> indique un paragraphe. Elle insère un saut à la ligne avant la première ligne de son
contenu et après la dernière ligne.
• Exemple :


Balises HTML du corps – Exercice 01
• Nous avons abordé jusqu’ici les balises du corps du document de
saut à la ligne <br />, de niveaux de titres <h1> à <h6>, de
paragraphe <p> et le caractère spécial de formatage d’espace
 . Cet ensemble de balise nous permettent d’écrire un
article en page web.
• Je vous propose d’essayer de reproduire l’article en face en html
grâce à cet ensemble de balises.
• Voici quelques étapes pour bien réussir cet exercice :
– Créer un dossier propre à vos réalisations que vous pouvez nommer Tests.
– Copier/Coller le fichier Structure.html, que vous pouvez trouver dans le
dossier Exemples ou Exercices, dans ce dossier Tests puis renommez le en
Exercice01.html.
– Ne modifier que la partie body de ce dernier fichier. Reprenez les slides ci-
dessus pour chacune des balises en commençant pas les niveaux de titres h1
à h6 puis les paragraphes puis le saut à la ligne.
– La correction de cet exercice ce trouve dans le slide suivant ainsi que dans le
dossier Exercices de ce niveau.


Balises HTML du corps – Solution exercice 01


Balises HTML du corps – Les liens
La balise <a>
• La balise a peut être utilisée pour créer des ancres au saint d’un document grâce à son attribut name
ou bien des liens vers d’autres pages web à l’aide de l’attribut href :

• On peut spécifier au navigateur la manière dont il doit ouvrir le lien : dans le même onglet, dans un
nouvel onglet, dans une nouvelle fenêtre, … et ce à l’aide de l’attribut target


Balises HTML du corps – Les images
La balise <img>
• La balise img sert à inclure des images dans un document html. Elle n’a pas de contenu cela veut
dire que sa balise ouvrante est en même temps fermante.
• Son attribut «src» permet de spécifier le chemin absolu (sur le disque ou sur un serveur web) ou
relatif (par rapport à un emplacement particulier, notre document html incluant l’image par exemple)
où se trouve l’image. Privilégier les chemins relatifs car moins de maintenance si changement
d’emplacement des ressources.
• Exemple :


Les chemins relatifs
• Un petit mot sur les chemins relatifs et absolus car très importants et même les plus chevronnés des
développeurs s’y trompe.
• Un chemin relatif d’une ressource ou d’un fichier est défini à partir d’elle même. Ça ne commence
jamais avec un slash contrairement à ce que certains développeurs font.
• Voici une structure de fichier et le code html des trois fichier incluantx.html qui incluent chacun les
trois images a_inclurex.png, où x va de 1 à 3, selon leurs positionnements dans l’arborescence.
L’exemple illustre comment on incluse une ressource en partant de soit :
KitsFormation_HTML <img src="a_inclure1.png" />
|-- Exemples <img src="../../Exercices/images/a_inclure2.png" />
Incluant1.html
| |-- Images <img src="../../a_inclure3.png" />
| | | a_inclure1.png
| | | incluant1.html <img src="../../Exemples/images/a_inclure1.png" />
|  Exercices <img src="a_inclure2.png" /> Incluant2.html
| |  Images <img src="../../a_inclure3.png" />
| | |  a_inclure2.png
| | | incluant2.html
|  a_inclure3.png <img src="Exemples/images/a_inclure1.png" />
| incluant3.html <img src="Exercices/images/a_inclure2.png" /> Incluant3.html
|-- KitsFormation_HTML.pdf <img src="a_inclure3.png" />


Les chemins relatifs (suite)
• Quelques règles d’inclusion pour les chemins relatifs :
– Pour inclure une ressource, se trouvant dans le même répertoire que l’incluant, il suffit de
renseigner son nom.
– Pour inclure une ressource se situant dans un sous répertoire, on commence avec le nom de ce
sous répertoire «sousRep1/a_inclure.jpg», dans un sous répertoire du sous répertoire
«sousRep1/sousRep2/a_inclure.jpg» et ainsi de suite.
– Pour remonter d’un répertoire on utilise «../a_inclure.jpg», de deux répertoires
«../../a_inclure.jpg» de trois «../../../a_inclure.jpg» est ainsi de suite.


Les chemins absolus
• Un chemin absolu par contre est un chemin physique d’accès à la ressource à partir d’une racine,
• Reprenons l’arborescence de fichiers de l’exemple précédent pour une arborescence windows. Tous
les chemins vont aller de la racine C: jusqu'à la ressource voulue.
• L’inconvénient majeur des chemins absolus, vous l’aurez compris, est le fait de devoir modifier tous
les fichiers qui incluent des ressources externes dès qu’on déplace notre répertoire
«KitsFormation_HTML»
C:
|KitsFormation_HTML <img src="a_inclure1.png" />
| |Exemples <img src="../../Exercices/images/a_inclure2.png" />
Incluant1.html
| | |Images <img src="../../a_inclure3.png" />
| | | | a_inclure1.png
| | | |-- incluant1.html <img src="../../Exemples/images/a_inclure1.png" />
| |  Exercices <img src="a_inclure2.png" /> Incluant2.html
| | |  Images <img src="../../a_inclure3.png" />
| | | | a_inclure2.png
| | | |--- incluant2.html <img src="Exemples/images/a_inclure1.png" />
| | a_inclure3.png <img src="Exercices/images/a_inclure2.png" /> Incluant3.html
| |-- incluant3.html <img src="a_inclure3.png" />
| |-- KitsFormation_HTML.pdf


Balises HTML du corps – Les tables
La balise <table>
• La balise <table> sert à définir un tableau.
• Un table imbrique les balises :
– tr : ligne de la table (table row en anglais) obligatoire
– th : titre de colonne (table header en anglais) optionnel
– td : cellule de la table (table cell en anglais) obligatoire
• Exemple : (noter qu’on utilise l’attribut border de
la balise table pour voir les contours des cellules)


Balises HTML du corps – Exercice02
• Nous avons abordé depuis l’exercice 01 les balises de lien <a>, d’image <img> et de tableau <table>.
• Je vous propose d’essayer d’exercer ces balises en créant un tableau ayant 3 colonnes, avec des titres
et une image dans la première cellule, un lien dans la deuxième et un texte dans la troisième.
• Essayer de reproduire en html cet exemple, l’image est disponible dans le répertoire
«Exercices/images» de votre kit :


Balises HTML du corps – Solution exercice 02


Balises HTML du corps – Les listes
Listes ordonnées
• On distingue trois types de listes, les listes ordonnées, les liste non ordonnées et les listes de
définitions.
• Les listes ordonnées ont comme balise englobant la balise <ol> (ordored list en anglais). Les éléments
de la liste ordonnée sont délimités par la balise <li> (list ltem en anglais).
• Exemple :


Listes ordonnées (suite)
• On peut changer le type d’énumération, pour cela il suffit d’ajouter l’attribut type à la balise <ol>.
par exemple énumérer en chiffres romains :


Listes ordonnées (suite)
• Énumérer en utilisant des lettres alphabétiques :


Listes non ordonnées
• Les listes non ordonnées quant à elles ont comme balise englobant la balise <ul> (unordored list en
anglais). Les éléments de la liste non ordonnée sont délimités par la balise <li> (list item) comme
pour les listes ordonnées:


Listes non ordonnées (suite)
• On peut changer le type des bulles, pour cela il suffit d’ajouter l’attribut type à la balise <ul>. par
exemple des bulles en cercles ou carrés pleins :


Listes de définition
• Les listes de définitions ont comme balise englobant la balise <dl> (definition list). Les éléments de la
liste de définitions vont par paires, le terme à définir délimité par la balise <dt> (definition terme en
anglais) et la définition de ce terme délimité par la balise <dd> (definition data) :


Imbrication des listes
• On peut indéfiniment imbriquer les listes qu’elles soit ordonnées, non ordonnées ou bien de définitions:


Fin de cette première étape
Ce premier aperçu vous permet d’aborder le HTML de manière simple et
basique, dans la suite de ce Kit, vous découvrirez des notions plus avancées
du HTML notamment, les formulaire et le multimédia. Allez sur notre site
pour lire ou télécharger la suite et inscrivez vous à la newsletter pour être
informé automatiquement, sur votre boite email, dès qu’un article ou un kit
est publié.

A très bientôt.
Akli


Kits formation html-les_bases

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Kits formation html-les_bases

Ähnlich wie Kits formation html-les_bases (20)

Kits formation html-les_bases