Kits formation html-les_bases
Upcoming SlideShare
Loading in...5
×
 

Kits formation html-les_bases

on

  • 444 views

Premier kit de formation au langage du web.

Premier kit de formation au langage du web.
RDV sur www.kitsformation.com

Statistics

Views

Total Views
444
Views on SlideShare
444
Embed Views
0

Actions

Likes
0
Downloads
24
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Kits formation html-les_bases Kits formation html-les_bases Presentation Transcript

  • Les bases du langage HTML Offert par Akli B. www.kitsformation.com03/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.03/10/2012 www.kitsformation.com 2
  • Introduction• Toute page web est une interprétation dun 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 quun code html soit interprété par un navigateur, il suffit de nommer le fichier texte avec lextension .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.03/10/2012 www.kitsformation.com 3
  • 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”.03/10/2012 www.kitsformation.com 4
  • Quelques définitions03/10/2012 www.kitsformation.com 5
  • 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 dun 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 lajout dun 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.03/10/2012 www.kitsformation.com 6
  • Quelques définitions(suite) • Une balise html peut avoir des attributs, cela se matérialise par lajout 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 dune 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 <!-- et -->. Exemple : <!-- mon commentaire ignoré par mon navigateur -->03/10/2012 www.kitsformation.com 7
  • Structure dun fichier HTML • Tous les fichiers html ont la même structure : une en-tête et un corps • Len-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éter03/10/2012 www.kitsformation.com 8
  • Les balises HTML03/10/2012 www.kitsformation.com 9
  • Balises HTML den-tête • On rappel que len-tête est la partie délimitée par la balise <head> ... </head> du document html. • Tout ce quon met à lintérieur de len-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 nest pas affiché dans le volet principal du navigateur ou dans la page web. • len-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".03/10/2012 www.kitsformation.com 10
  • Balises HTML den-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»:03/10/2012 www.kitsformation.com 11
  • 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.03/10/2012 www.kitsformation.com 12
  • 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 />.03/10/2012 www.kitsformation.com 13
  • 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.03/10/2012 www.kitsformation.com 14
  • 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 :03/10/2012 www.kitsformation.com 15
  • 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 &nbsp;. 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.03/10/2012 www.kitsformation.com 16
  • Balises HTML du corps – Solution exercice 0103/10/2012 www.kitsformation.com 17
  • 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 target03/10/2012 www.kitsformation.com 18
  • 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 :03/10/2012 www.kitsformation.com 19
  • 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 <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" />03/10/2012 www.kitsformation.com 20
  • 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.03/10/2012 www.kitsformation.com 21
  • 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 <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.pdf03/10/2012 www.kitsformation.com 22
  • 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)03/10/2012 www.kitsformation.com 23
  • 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 :03/10/2012 www.kitsformation.com 24
  • Balises HTML du corps – Solution exercice 0203/10/2012 www.kitsformation.com 25
  • 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 :03/10/2012 www.kitsformation.com 26
  • Balises HTML du corps – Les listes 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 :03/10/2012 www.kitsformation.com 27
  • Balises HTML du corps – Les listes Listes ordonnées (suite)• Énumérer en utilisant des lettres alphabétiques :03/10/2012 www.kitsformation.com 28
  • 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:03/10/2012 www.kitsformation.com 29
  • 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 :03/10/2012 www.kitsformation.com 30
  • 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) :03/10/2012 www.kitsformation.com 31
  • 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:03/10/2012 www.kitsformation.com 32
  • Fin de cette première étape Ce premier aperçu vous permet d’aborder le HTML de manière simple etbasique, 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 êtreinformé automatiquement, sur votre boite email, dès qu’un article ou un kit est publié. A très bientôt. Akli03/10/2012 www.kitsformation.com 33