Kits formation html-les_bases

03/10/2012 www.kitsformation.com 1

Les bases du langage HTML

Offert par Akli B. www.kitsformation.com

http://www.kitsformation.com/


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.


http://notepad-plus-plus.org/fr/


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: • 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.

• 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.


<unebalisehtml>mon contenu</unebalisehtml>

<unebalisehtml> texte à afficher à l'écran </unebalisehtml> <unebalisehtml><uneautrebalisehtml> texte à afficher à l'écran</uneautrebalisehtml></unebalisehtml>

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 :

• 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 :

• 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 :


<balisehtml attribut1=“valeur1" attribut2=“valeur2"> mon contenu</balisehtml> <balisehtml title=‘Ceci est le titre de “mon contenu”.’ > mon contenu</balisehtml>

<balisehtml attribut1="propriétés1"></balisehtml> peut être remplacé par <balisehtml attribut1="propriétés1" />



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


• 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 liens La balise <a>


http://www.w3schools.com/tags/att_a_target.asp



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 :


Balises HTML du corps – Les images 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 |-- Exemples | |-- Images | | | a_inclure1.png | | | incluant1.html | Exercices | | Images | | | a_inclure2.png | | | incluant2.html | a_inclure3.png | incluant3.html |-- KitsFormation_HTML.pdf

<img src="a_inclure1.png" /> <img src="../../Exercices/images/a_inclure2.png" /> <img src="../../a_inclure3.png" /> Incluant1.html

<img src="../../Exemples/images/a_inclure1.png" /> <img src="a_inclure2.png" /> <img src="../../a_inclure3.png" />

<img src="Exemples/images/a_inclure1.png" /> <img src="Exercices/images/a_inclure2.png" /> <img src="a_inclure3.png" />

Incluant2.html

Incluant3.html

Balises HTML du corps – Les images 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.


Balises HTML du corps – Les images 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 | |Exemples | | |Images | | | | a_inclure1.png | | | |-- incluant1.html | | Exercices | | | Images | | | | a_inclure2.png | | | |--- incluant2.html | | a_inclure3.png | |-- incluant3.html | |-- KitsFormation_HTML.pdf

<img src="a_inclure1.png" /> <img src="../../Exercices/images/a_inclure2.png" /> <img src="../../a_inclure3.png" /> Incluant1.html

<img src="../../Exemples/images/a_inclure1.png" /> <img src="a_inclure2.png" /> <img src="../../a_inclure3.png" />

<img src="Exemples/images/a_inclure1.png" /> <img src="Exercices/images/a_inclure2.png" /> <img src="a_inclure3.png" />

Incluant2.html

Incluant3.html

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 :


• 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 :

Balises HTML du corps – Les listes Listes ordonnées (suite)


Balises HTML du corps – Les listes Listes ordonnées (suite)

• Énumérer en utilisant des lettres alphabétiques :


Balises HTML du corps – Les listes 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:


Balises HTML du corps – Les listes 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 :


Balises HTML du corps – Les listes 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) :


Balises HTML du corps – Les listes Imbrication des listes

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


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


Fin de cette première étape

Documents

Kits formation html-les_bases