Html de base

4,458 views
4,270 views

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,458
On SlideShare
0
From Embeds
0
Number of Embeds
1,833
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Html de base

  1. 1. Télécharger ce document en format pdf sur www.krymo.com © 2013 www.krymo.com Tous Droits réservés.
  2. 2. Télécharger ce document en format pdf sur www.krymo.comTutoriel HTML - (Conforme HTML5)Avec le HTML, vous pouvez créer votre propre site Web.Ce tutoriel vous apprend tout sur le langage HTML.HTML est facile à apprendre - Vous ne le regretterez pas.Des exemples de chaque chapitreCe tutoriel HTML contient des centaines dexemples HTML.Avec notre éditeur HTML en ligne, vous pouvez éditer le code HTML, et cliquez sur un bouton pour afficher le résultat.Exemple<!DOCTYPE html><html> © 2013 www.krymo.com Tous Droits réservés.
  3. 3. Télécharger ce document en format pdf sur www.krymo.com<body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>HTML PrésentationExemple HTML<!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html> © 2013 www.krymo.com Tous Droits réservés.
  4. 4. Télécharger ce document en format pdf sur www.krymo.comExemple expliqué •La déclaration DOCTYPE définit le type de document •Le texte entre <html> et </ html> décrit la page Web •Le texte entre <body> et </ body> est le contenu de la page visible •Le texte entre <h1> et </ h1> est affiché comme un titre •Le texte entre <p> et </ p> est affiché comme un paragraphe L<! DOCTYPE html> déclaration du doctype pour HTML5.Quest-ce que HTML?HTML est un langage de description de pages Web. •HTML signifie H Yper T ext M arkup L anguage •HTML est un balisage langue •Un langage de balisage est un ensemble de balises balises •Les balises décrivent le contenu du document •Documents HTML contiennent HTML balises et simple du texte •Les documents HTML sont également appelées pages WebLes balises HTMLBalises HTML sont généralement appelés balises HTML •Les balises HTML sont des mots clés (noms de balises) entourées de crochets comme <html> •Les balises HTML normalement en paires comme <b> et </ b> •La première balise dans une paire est la balise de début, la seconde étiquette est la balise de fin •La balise de fin est écrite comme la balise de début, avec une barre oblique avant le nom de la balise •Démarrer et balises de fin sont aussi appelés balises douverture et de clôture étiquettes<tagname> contenu </ tagname> © 2013 www.krymo.com Tous Droits réservés.
  5. 5. Télécharger ce document en format pdf sur www.krymo.comLes éléments HTML"Balises HTML" et "éléments HTML" sont souvent utilisés pour décrire la même chose.Mais à proprement parler, un élément HTML est tout entre la balise de début et la balise de fin, y compris les mots-clés:Élément HTML:<p> Ceci est un paragraphe. </ p>Navigateurs WebLe but dun navigateur Web (tel que Google Chrome, Internet Explorer, Firefox, Safari) est de lire les documents HTML et de les afficher sous forme de pagesWeb. Le navigateur naffiche pas les balises HTML, mais utilise les balises pour interpréter le contenu de la page: © 2013 www.krymo.com Tous Droits réservés.
  6. 6. Télécharger ce document en format pdf sur www.krymo.comStructure dune page HTMLCi-dessous est une visualisation dune structure de la page HTML:<html> <body> Cette <h1> un titre </ h1> <p> Ceci est un paragraphe. </ p> <p> Cest un autre paragraphe. </ p></ Body></ Html> © 2013 www.krymo.com Tous Droits réservés.
  7. 7. Télécharger ce document en format pdf sur www.krymo.comVersions HTMLDepuis les premiers jours de lInternet, il ya eu de nombreuses versions de HTML:Version Année HTML 1991 HTML + 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 1999 4.01 XHTML 2000 1.0 HTML5 2012 XHTML5 2013 © 2013 www.krymo.com Tous Droits réservés.
  8. 8. Télécharger ce document en format pdf sur www.krymo.comLe<! DOCTYPE> DéclarationL<! DOCTYPE> permet au navigateur dafficher une page web correctement.Il ya beaucoup de différents documents sur le Web et un navigateur ne peut afficher une page HTML à 100% correctement si elle connaît le type HTML et laversion utilisés.Déclarations communesHTML5<!DOCTYPE html>HTML 4.01<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.krymo.com/TR/html4/loose.dtd">XHTML 1.0<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.krymo.com/TR/xhtml1/DTD/xhtml1-transitional.dtd"> © 2013 www.krymo.com Tous Droits réservés.
  9. 9. Télécharger ce document en format pdf sur www.krymo.comHTML EditeursHTML écrit en utilisant Notepad ou TextEditHTML peuvent être édités en utilisant un éditeur HTML professionnel comme: •Adobe Dreamweaver •Microsoft Expression Web •CoffeeCup HTML EditorCependant, pour apprendre le langage HTML, nous recommandons un éditeur de texte comme Notepad (PC) ou TextEdit (Mac). Nous croyons à laide dunsimple éditeur de texte est un bon moyen dapprendre le HTML.Suivez les 4 étapes ci-dessous pour créer votre première page web avec le Bloc-notes.Étape 1: Lancez le Bloc-notesPour lancer le Bloc-notes allez à:Démarrer Tous les programmes Accessoires Bloc-notesÉtape 2: Modifier votre HTML avec Notepad ++Tapez votre code HTML dans votre Bloc-notes: © 2013 www.krymo.com Tous Droits réservés.
  10. 10. Télécharger ce document en format pdf sur www.krymo.comEtape 3: enregistrer votre HTMLSélectionnez Enregistrer sous .. dans le menu fichier du Bloc-notes.Lorsque vous enregistrez un fichier HTML, vous pouvez utiliser soit le htm. Ou lextension de fichier. Html. Il ny a pas de différence, il est entièrement à vous.Enregistrez le fichier dans un dossier qui est facile à retenir, comme w3schools.Étape 4: Exécuter le code HTML dans votre navigateurLancez votre navigateur Web et ouvrez votre fichier html à partir du fichier , Ouvrir du menu, ou tout simplement naviguer sur le dossier et double-cliquez survotre fichier HTML.Le résultat devrait ressembler un peu comme ceci: © 2013 www.krymo.com Tous Droits réservés.
  11. 11. Télécharger ce document en format pdf sur www.krymo.com © 2013 www.krymo.com Tous Droits réservés.
  12. 12. Télécharger ce document en format pdf sur www.krymo.comHTML de base - 4 ExemplesNe vous inquiétez pas si les exemples utilisent des étiquettes que vous avez pas apprises.Vous allez apprendre à leur sujet dans les prochains chapitres.Rubriques HTMLRubriques HTML sont définis avec le <h1> aux tags <h6>.Exemple<h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3>Paragraphes HTMLParagraphes HTML sont définies avec la balise <p>.Exemple<p>This is a paragraph.</p><p>This is another paragraph.</p> © 2013 www.krymo.com Tous Droits réservés.
  13. 13. Télécharger ce document en format pdf sur www.krymo.comLiens HTMLLiens HTML sont définies avec la balise <a>.Exemple<a href="http://www.krymo.com">ceci est un lien</a>Remarque: Ladresse du lien est spécifié dans lattribut href.(Vous apprendrez à connaître les attributs dans un chapitre ultérieur de ce tutoriel).Images HTMLImages HTML sont définies avec la balise img.Exemple<img src="w3schools.jpg" width="104" height="142">Remarque: Le nom de fichier et la taille de limage sont prévus sous forme dattributs. © 2013 www.krymo.com Tous Droits réservés.
  14. 14. Télécharger ce document en format pdf sur www.krymo.comHTML ElémentsLes documents HTML sont définis par les éléments HTML.Les éléments HTMLUn élément HTML est tout de la balise de début de la balise de fin:Démarrer * tag Contenu de lélément * Balise de fin Ceci est un <p> </ P> paragraphe href="default.htm"> Ceci est un lien </ A> <a <br>* La balise de début est souvent appelée la balise douverture . La balise de fin est souvent appelée la balise de fermeture .Syntaxe délément HTML •Un élément HTML commence par une balise de début / balise douverture •Un élément HTML se termine par une balise de fin / fermeture tag •Le contenu de lélément est tout entre le début et la balise de fin •Certains éléments HTML ont un contenu vide •Les éléments vides sont fermés dans la balise de début •La plupart des éléments HTML peuvent avoir des attributs © 2013 www.krymo.com Tous Droits réservés.
  15. 15. Télécharger ce document en format pdf sur www.krymo.comAstuce: Vous apprendrez à connaître les attributs dans le prochain chapitre de ce tutoriel.Éléments HTML imbriquésLa plupart des éléments HTML peuvent être imbriquées (peut contenir dautres éléments HTML).Les documents HTML sont constitués déléments HTML imbriqués.Exemple de document HTML<!DOCTYPE html><html><body><p>This is my first paragraph.</p></body></html>Lexemple ci-dessus contient 3 éléments HTML.Exemple HTML expliquéLélément <p>:<p>This is my first paragraph.</p>Lélément <p> définit un paragraphe dans le document HTML.Lélément a un <p> balise de début et une balise de fin </ p>.Lcontenu de lélément est: Ceci est mon premier paragraphe.Lélément body: © 2013 www.krymo.com Tous Droits réservés.
  16. 16. Télécharger ce document en format pdf sur www.krymo.com<body><p>This is my first paragraph.</p></body>Lélément body définit le corps du document HTML.Lélément body a une étiquette de début et une balise de fin </ body>.La teneur en élément est un élément HTML (élément p).Lélément <html>:<html><body><p>This is my first paragraph.</p></body></html>Lélément <html> définit lensemble du document HTML.Lélément possède une balise de début <html> et une balise de fin </ html>.Lcontenu de lélément est un autre élément HTML (lélément du corps).Noubliez pas la balise de finCertains éléments HTML peuvent safficher correctement même si vous oubliez la balise de fin:<p>This is a paragraph<p>This is a paragraphLexemple ci-dessus fonctionne dans la plupart des navigateurs, parce que la balise de fermeture est considéré comme facultatif.Ne vous fiez jamais à ce sujet. De nombreux éléments HTML produira des résultats inattendus et / ou derreurs si vous oubliez la balise de fin.Vider les éléments HTMLÉléments HTML sans contenu sont appelés éléments vides. © 2013 www.krymo.com Tous Droits réservés.
  17. 17. Télécharger ce document en format pdf sur www.krymo.com<br> est un élément vide sans balise de fermeture (la balise <br> définit un saut de ligne).Astuce: En XHTML, tous les éléments doivent être fermées. Ajout dune barre oblique à lintérieur de la balise de début, comme /> <br, est la bonne façon defermer les éléments vides dans XHTML et XML ().HTML Astuce: Utilisez Mots minusculesLes balises HTML ne sont pas sensibles à la casse: Campagne signifie la même chose que <p>. De nombreux sites Web utilisent des balises HTML enmajuscules.W3Schools utiliser des balises en minuscules parce que le World Wide Web Consortium (W3C) recommandeminuscules dans HTML 4, et exige balises enminuscules en XHTML.HTML AttributsLes attributs fournissent des informations supplémentaires sur les éléments HTML.Attributs HTML •Éléments HTML peuvent avoir des attributs •Attributs fournissent des informations supplémentaires sur un élément •Les attributs sont toujours spécifié dans la balise de début •Attributs viennent en paires nom / valeur comme: name = "value" © 2013 www.krymo.com Tous Droits réservés.
  18. 18. Télécharger ce document en format pdf sur www.krymo.comExemple dattributLiens HTML sont définies avec la balise <a>. Ladresse du lien est spécifié dans le attribut href :Exemple<a href="http://www.krymo.com">This is a link</a>Toujours citer les valeurs des attributsLes valeurs des attributs doivent toujours être entre guillemets.Citations de style doubles sont les plus communs, mais cite de style simples sont également autorisés. Astuce: Dans certains cas rares, lorsque la valeur de lattribut lui-même contient des guillemets, il est nécessaire dutiliser des guillemets simples: name ="John" Shotgun "Nelson"HTML Astuce: Utilisez les attributs en minusculesLes noms dattributs et de valeurs dattributs sont sensibles à la casse.Cependant, le World Wide Web Consortium (W3C) recommande attributs en minuscules / valeurs dattribut dans leur recommandation HTML 4.Les nouvelles versions de (X) HTML exigera attributs en minuscules.Attributs HTML référenceUne liste complète des attributs juridiques pour chaque élément HTML est inscrite dans notre: Référence des balises HTML . © 2013 www.krymo.com Tous Droits réservés.
  19. 19. Télécharger ce document en format pdf sur www.krymo.comVoici une liste de certains attributs qui peuvent être utilisés sur nimporte quel élément HTML:Attribut Description class Indique un ou plusieurs noms de classe pour un élément (référence à une classe dans une feuille de style) Identifiant Spécifie un identifiant unique pour un élément style Spécifie un style CSS en ligne pour un élément title Spécifie des informations supplémentaires sur un élément (affiché comme une bulle daide) © 2013 www.krymo.com Tous Droits réservés.
  20. 20. Télécharger ce document en format pdf sur www.krymo.comHTML RubriquesLes rubriques jouent un rôle important dans les documents HTML.Rubriques HTMLTêtes sont définis à l<h1> aux tags <h6>.<h1> définit le titre le plus important. <h6> définit la position au moins important.Exemple<h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3>Remarque: Les navigateurs dajouter automatiquement un espace vide (une marge) avant et après chaque titre.Les Rubriques sont importantsUtilisez des titres HTML pour les titres seulement. Ne pas utiliser de rubriques pour rendre le texte BIG ou gras .Les moteurs de recherche utilisent vos titres à lindex de la structure et le contenu de vos pages web.Comme les utilisateurs peuvent parcourir vos pages par ses rubriques, il est important dutiliser des en-têtes pour montrer la structure du document. © 2013 www.krymo.com Tous Droits réservés.
  21. 21. Télécharger ce document en format pdf sur www.krymo.comRubriques H1 doivent être utilisés comme en-têtes principaux, suivis par rubriques H2, puis les moins importantes positions H3, et ainsi de suite.Lignes HTMLLa balise <hr> crée une ligne horizontale dans une page HTML. Lélément hr peut être utilisé pour séparer le contenu:Exemple<p>Ceci est un paragraphe.</p><hr><p>Ceci est un paragraphe .</p><hr><p>Ceci est un paragraphe .</p>Commentaires HTMLLes commentaires peuvent être insérés dans le code HTML pour le rendre plus lisible et compréhensible. Les commentaires sont ignorés par le navigateur et nesont pas affichés.Les commentaires sont rédigés comme suit:Exemple<!-- Ceci est un commentaire -->Remarque: Il ya un point dexclamation après le crochet ouvrant, mais pas avant la parenthèse fermante. © 2013 www.krymo.com Tous Droits réservés.
  22. 22. Télécharger ce document en format pdf sur www.krymo.comHTML Astuce - Comment faire pour afficher la source HTMLAvez-vous déjà vu une page Web et je me demandais: «Hé! Comment ont-ils fait ça?"Pour le savoir, faites un clic droit sur la page et sélectionnez "Afficher la source" (IE) ou "View Page Source" (Firefox) ou similaire pour les autresnavigateurs. Cela va ouvrir une fenêtre contenant le code HTML de la page. HTML balise de référenceRéférence W3Schools tag "contient des informations supplémentaires à propos de ces balises et de leurs attributs.Vous en apprendrez plus sur les balises HTML et les attributs dans les prochains chapitres de ce tutoriel.Balise Description <html> Définit un document HTML <body> Définit le corps du document <h1> à Définit balises de niveau <h6> HTML <hr> Définit une ligne horizontale <-> Définit un commentaire © 2013 www.krymo.com Tous Droits réservés.
  23. 23. Télécharger ce document en format pdf sur www.krymo.comHTML paragraphesLes documents HTML sont divisés en paragraphes.Paragraphes HTMLLes paragraphes sont définies avec la balise <p>.Exemple<p>Ceci est un paragraphe</p><p>Ceci est un autre paragraphe</p>Remarque: Les navigateurs dajouter automatiquement une ligne vide avant et après un paragraphe.Noubliez pas la balise de finLa plupart des navigateurs affichent HTML correctement même si vous oubliez la balise de fin:Exemple<p>Ceci est un paragraphe<p>Ceci est un autre paragrapheLexemple ci-dessus fonctionne dans la plupart des navigateurs, mais ne comptez pas sur elle. Oublier la balise fermante peut produire des résultats inattendusou des erreurs.Remarque: la version du futur de HTML ne vous permettra pas de sauter les balises de fin. © 2013 www.krymo.com Tous Droits réservés.
  24. 24. Télécharger ce document en format pdf sur www.krymo.comLes sauts de ligne HTMLUtilisez la balise <br> si vous voulez un saut de ligne (une nouvelle ligne) sans démarrer un nouveau paragraphe:Exemple<p>This is<br>a para<br>graph with line breaks</p>Lélément <br> est un élément HTML vide. Il na pas de balise de fin.Sortie HTML - Conseils utilesVous ne pouvez pas être sûr de savoir comment HTML sera affiché. Écrans petits ou grands, et les fenêtres redimensionnées créera des résultats différents.Avec le HTML, vous ne pouvez pas changer la sortie en ajoutant des espaces supplémentaires ou des lignes supplémentaires dans votre code HTML.Le navigateur va supprimer les espaces superflus et les lignes supplémentaires lorsque la page est affichée.Nimporte quel nombre de lignes compte pour uneseule ligne, et un nombre quelconque despaces compte pour un seul espace.Essayez vous-même(Lexemple montre certains problèmes de mise en forme HTML) © 2013 www.krymo.com Tous Droits réservés.
  25. 25. Télécharger ce document en format pdf sur www.krymo.comBalises HTML de référenceRéférence W3Schools tag "contient des informations supplémentaires sur les éléments HTML et leurs attributs.Balis Descriptione <p> Définit un paragraphe Insère un saut de ligne <br> simple © 2013 www.krymo.com Tous Droits réservés.
  26. 26. Télécharger ce document en format pdf sur www.krymo.comHTML Mise en forme du texteFormatage du texte HTMLCe texte est en grasCe texte est en italiqueIl sagit dun indice et dun exposantBalises de formatage HTMLHTML utilise des balises comme <b> et <i> pour la sortie mise en forme, comme gras ou italique texte.Ces balises HTML sont appelés balises de formatage (voir au bas de cette page pour une référence complète). Souvent <strong> rend comme <b> et <em> rend comme <i>. Cependant, il ya une différence dans le sens de ces mots-clés: <b> ou <i> définit texte en gras ou en italique seulement. <strong> ou <em> signifie que vous voulez que le texte soit rendu dune manière que lutilisateur comprenne comme «important». Aujourdhui, tous les principaux navigateurs rendre forte et audacieuse lui en italique. Toutefois, si un navigateur un jour veut faire un texte en surbrillance avec la fonction forte, il peut être cursive par exemple et non gras! © 2013 www.krymo.com Tous Droits réservés.
  27. 27. Télécharger ce document en format pdf sur www.krymo.comHTML balises de formatage de texteBalise Description<b> Définit le texte en gras<em> Définit le texte souligné Définit une partie du texte dune voie dalternative ou<i> dhumeur<small> Définit le texte plus petit<strong> Définit texte important<sub> Définit un texte en indice<sup> Définit texte en exposant<ins> Définit le texte inséré<del> Définit le texte suppriméHTML "sortie de lordinateur" TagsBalise Description<code> Définit le texte du code informatique<kbd> Définit texte au clavier Définit le code informatique<samp> échantillon<var> Définit une variable © 2013 www.krymo.com Tous Droits réservés.
  28. 28. Télécharger ce document en format pdf sur www.krymo.com<pre> Définit le texte préformatéCitations, Citations HTML et balises DéfinitionBalise Description<abbr> Définit une abréviation ou dun acronyme<adress> Définit les coordonnées de lauteur / propriétaire dun document<bdo> Définit le sens du texte<blockquote> Définit une section qui est cité par une autre source<q> Définit une ligne (courte) citation<cite> Définit le titre dune œuvre<dfn> Définit un terme à définir © 2013 www.krymo.com Tous Droits réservés.
  29. 29. Télécharger ce document en format pdf sur www.krymo.comHTML LiensLes liens se trouvent dans les pages Web presque tous. Des liens permettent aux utilisateurs de cliquer pour suivre de page en page.HTML hyperliens (liens)La balise HTML <a> définit un lien hypertexte.Un hyperlien (ou lien) est un mot, groupe de mots, ou limage que vous pouvez cliquer sur pour passer à un autre document.Lorsque vous déplacez le curseur sur un lien dans une page Web, la flèche se transforme en une petite main.Le plus important attribut de lélément <a> est lattribut href, qui indique la destination du lien.Par défaut, les liens apparaissent comme suit dans tous les navigateurs: •Un lien non visité est souligné et bleu •Un lien est souligné visité et violet •Un lien actif est souligné et rougeSyntaxe Lien HTMLLe code HTML pour un lien est simple. Il ressemble à ceci:<a href="url">texte du lien</a>Lattribut href indique la destination dun lien. © 2013 www.krymo.com Tous Droits réservés.
  30. 30. Télécharger ce document en format pdf sur www.krymo.comExemple<a href="http://www.krymo.com/">Visiter le site krymo</a>qui affichera comme ceci: Visiter le site krymoEn cliquant dessus cet hyperlien enverra à lutilisateur sur le site www.krymo.fr.Astuce: Le " Texte du lien "na pas besoin dêtre du texte. Il peut être une image ou tout autre élément HTML.Liens HTML - Lattribut cibleLattribut target spécifie lemplacement pour ouvrir le document lié.Lexemple ci-dessous pour ouvrir le document lié dans une nouvelle fenêtre de navigateur ou un nouvel onglet:Exemple<a href="http://www.krymo.com/" target="_blank">Visiter le site krymo!</a>Liens HTML - Lattribut idLattribut id peut être utilisée pour créer un signet dans un document HTML.Astuce: Les signets sont pas affichés dune manière spéciale. Ils sont invisibles pour le lecteur.ExempleUne ancre avec un id dans un document HTML:<a id="conseils">section de conseils utiles</a>Créer un lien vers la section «Conseils utiles» à lintérieur du même document: © 2013 www.krymo.com Tous Droits réservés.
  31. 31. Télécharger ce document en format pdf sur www.krymo.com<a href="#conseils">visiter la section de conseils utiles</a>Vous pouvez également créer un lien vers la section «Conseils utiles» à partir dune autre page:<a href="http://www.krymo.com/liens_html.htm#conseils">visiter la section de conseils utiles</a>Notes de base - Conseils utilesNote: Toujours ajouter une barre oblique à des références sous-dossier. Si vous liez comme ceci: href = "http://www.krymo.com/html", vous allez générerdeux demandes au serveur, le serveur va dabord ajouter une barre oblique à ladresse, puis créez une nouvelle requête comme ceci : href ="http://www.krymo.com/html/".Mots Lien HTMLBalise Description Définit un lien <a> hypertexte © 2013 www.krymo.com Tous Droits réservés.
  32. 32. Télécharger ce document en format pdf sur www.krymo.comHTML le <head>Lélément HTML <head>Lélément <head> est un conteneur pour tous les éléments de tête. Éléments à lintérieur <head> peuvent inclure des scripts, demander au navigateur oùtrouver des feuilles de style, fournir des métadonnées, et plus encore.Les balises suivantes peuvent être ajoutées à la section de tête: <title>, <style>, <meta>, <link>, <script>, <noscript> et <base>.Lélément HTML <title>La balise <title> définit le titre du document.Lélément title est nécessaire dans tous les documents HTML / XHTML.Lélément title: •définit un titre dans la barre doutils navigateur •fournit un titre pour la page lorsquil est ajouté aux favoris •affiche le titre de la page dans les résultats des moteurs résultatsUn document simplifié HTML:<!DOCTYPE html><html><head><title>Title of the document</title></head><body>The content of the document......</body></html> © 2013 www.krymo.com Tous Droits réservés.
  33. 33. Télécharger ce document en format pdf sur www.krymo.comLélément HTML <base>La balise <base> spécifie une adresse par défaut ou une cible par défaut pour tous les liens sur une page:<head><base href="http://www.w3schools.com/images/"><base target="_blank"></head>Lélément HTML <link>La balise <link> définit la relation entre un document et une ressource externe.La balise <link> est le plus utilisé pour relier des feuilles de style:<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>Lélément HTML <style>La balise <style> est utilisé pour définir les informations de style pour un document HTML.Dans lélément <style> de spécifier comment les éléments HTML doit rendre dans un navigateur:<head><style type="text/css">body {background-color:yellow}p {color:blue}</style></head> © 2013 www.krymo.com Tous Droits réservés.
  34. 34. Télécharger ce document en format pdf sur www.krymo.comLélément meta HTMLLes métadonnées sont des données (informations) sur les données.La balise meta fournissent des métadonnées concernant le document HTML. Les métadonnées ne seront pas affichés sur la page, mais il sera analysablemachine.Éléments meta sont généralement utilisés pour spécifier description de page, les mots clés, auteur du document, modifiée, et dautres métadonnées.Les métadonnées peuvent être utilisées par les navigateurs (comment afficher du contenu ou de la page de rechargement), les moteurs de recherche (mots-clés), ou autres services web.balises meta va toujours à lintérieur de lélément <head>.Balises meta - Exemples dutilisationDéfinir des mots-clés pour moteurs de recherche:<meta name="mots-clés" content="HTML, CSS, XML, XHTML, JavaScript">Définir une description de votre page Web:<meta name="description" content="Tutos web HTML et CSS">Définir lauteur dune page:<meta name="auteur" content="Abdoul Diallo">Actualiser documenter toutes les 30 secondes:<meta http-equiv="refresh" content="30">Lélément HTML <script>La balise <script> est utilisé pour définir un script côté client, tel quun JavaScript. © 2013 www.krymo.com Tous Droits réservés.
  35. 35. Télécharger ce document en format pdf sur www.krymo.comLélément <script> sera expliqué dans un chapitre ultérieur.Éléments tête HTMLBalise Description <head> Définit les informations sur le document <title> Définit le titre dun document <base> Définit une adresse par défaut ou une cible par défaut pour tous les liens sur une page <link> Définit la relation entre un document et une ressource externe <meta> Définit les métadonnées dun document HTML <script> Définit un script côté client <style> Définit les informations de style pour un document © 2013 www.krymo.com Tous Droits réservés.
  36. 36. Télécharger ce document en format pdf sur www.krymo.comHTML - CSS StylesCSS (Cascading Style Sheets) est utilisé pour des éléments de style HTML.Mettre en style HTML avec CSSLe CSS a été introduite avec le HTML 4, afin de fournir une meilleure façon de le style des éléments HTML.CSS peuvent être ajoutés à HTML de la manière suivante: •Inline - en utilisant le style attribut dans les éléments HTML •Interne - en utilisant la <style> élément dans la section <head> •Externe - en utilisant une CSS externe fichierLe meilleur moyen dajouter CSS pour HTML, est de mettre la syntaxe CSS dans des fichiers CSS différents.Toutefois, dans ce tutoriel HTML, nous vous présenterons au CSS en utilisant lattribut style. Ceci est fait pour simplifier les exemples. Il rend également plusfacile pour vous de modifier le code et essayer vous-même.Vous pouvez tout apprendre sur CSS dans notre tutoriel CSS .Styles en ligneUn style en ligne peut être utilisée si un style unique doit être appliqué à une seule occurrence dun élément.Pour utiliser les styles en ligne, utilisez lattribut style dans la balise concernée. Lattribut style peut contenir nimporte quelle propriété CSS. Lexemple ci-dessous montre comment changer la couleur du texte et la marge gauche dun paragraphe: © 2013 www.krymo.com Tous Droits réservés.
  37. 37. Télécharger ce document en format pdf sur www.krymo.com<p style="color:blue;margin-left:20px;">Ceci est un paragraphe.</p>Pour en savoir plus sur les feuilles de style, visitez notre TUTORIEL CSS .Exemple de style HTML - Couleur de fondLa propriété background-color définit la couleur de fond pour un élément:Exemple<!DOCTYPE html><html><body style="background-color:yellow;"><h2 style="background-color:red;">Ceci est une entete</h2><p style="background-color:green;">Ceci est un paragraphe.</p></body></html>La propriété background-color remplace lattribut bgcolor obsolète.Essayez vous-même: Couleur de fond à lancienneExemple de style HTML - police, couleur et tailleLe font-family, la couleur, et la taille de police des propriétés définit la police, la couleur, et la taille du texte dans un élément:Exemple<!DOCTYPE html><html><body> © 2013 www.krymo.com Tous Droits réservés.
  38. 38. Télécharger ce document en format pdf sur www.krymo.com<h1 style="font-family:verdana;">Une entete</h1><p style="font-family:arial;color:red;font-size:20px;">Un paragraphe.</p></body></html>Le font-family, la couleur, et la taille de police propriétés font de la balise <font> ancienne donc obsolète.Exemple de style HTML - Alignement du texteLa propriété text-align spécifie lalignement horizontal du texte dans un élément:Exemple<!DOCTYPE html><html><body><h1 style="text-align:center;">Entete aligné au centre</h1><p>Ceci est un paragraphe.</p></body></html>La propriété text-align remplace la balise <center> obsolète.Essayez vous-même: intertitre lancienneFeuille de style interneUne feuille de style interne peut être utilisé si un seul document a un style unique. Styles internes sont définis dans la section <head> dune page HTML, enutilisant la balise <style>, comme ceci: © 2013 www.krymo.com Tous Droits réservés.
  39. 39. Télécharger ce document en format pdf sur www.krymo.com<head><style type="text/css">body {background-color:yellow;}p {color:blue;}</style></head>Feuille de style externeUne feuille de style externe est idéal lorsque le style est appliqué à plusieurs pages. Avec une feuille de style externe, vous pouvez changer lapparence dunsite Web entier en modifiant un seul fichier. Chaque page doit être liée à la feuille de style en utilisant la balise link. La balise <link> va à lintérieur de lasection <head>:<head><link rel="stylesheet" type="text/css" href="monstyle.css"></head>Balises de style HTMLBalise Description <style> Définit les informations de style pour un document Définit la relation entre un document et une ressource <link> externe © 2013 www.krymo.com Tous Droits réservés.
  40. 40. Télécharger ce document en format pdf sur www.krymo.comBalises et attributs dépréciésEn HTML 4, plusieurs tags et attributs ont été utilisés pour les documents de style. Ces balises ne sont pas pris en charge dans les versions plus récentes deHTML.Évitez dutiliser les éléments suivants: <font>, <center> et <strike>, et les attributs: couleur et bgcolor.HTML ImagesExemple Voyage en montagne norvégienne © 2013 www.krymo.com Tous Droits réservés.
  41. 41. Télécharger ce document en format pdf sur www.krymo.comImages - La balise HTML <img> et lattribut SrcEn HTML, les images sont définies avec la balise img.La balise <img> est vide, ce qui signifie quil contient des attributs seulement, et na pas de balise de fermeture.Pour afficher une image sur une page, vous devez utiliser lattribut src. Src signifie "source". La valeur de lattribut src est lURL de limage que vous souhaitezafficher.Syntaxe pour définir une image:<img src="url" alt="du_texte">LURL pointe vers lemplacement où limage est stockée. Une image nommée "bateau.gif", situé dans "images" sur "www.krymo.fr" a lURL:http://www.krymo.com/images/bateau.gif.Le navigateur affiche limage où la balise <img> apparaît dans le document. Si vous mettez un marqueur dimage entre deux paragraphes, le navigateur affichele premier paragraphe, puis limage, puis le deuxième alinéa.Images HTML - lattribut ALTLattribut alt requis spécifie un texte de remplacement pour une image, si limage ne peut pas être affichée.La valeur de lattribut alt est un texte défini par lauteur:<img src="bateau.gif" alt="Gros bateau">Lattribut alt fournit des informations de remplacement pour une image si un utilisateur pour une raison quelconque, ne peut pas le voir (en raison de connexionlente, une erreur dans lattribut src, ou si lutilisateur utilise un lecteur décran).Images HTML - Hauteur Définit la largeur dune imageLes attributs height et width sont utilisés pour spécifier la hauteur et la largeur dune image. © 2013 www.krymo.com Tous Droits réservés.
  42. 42. Télécharger ce document en format pdf sur www.krymo.comLes valeurs des attributs sont spécifiés en pixels par défaut:<img src="rive.jpg" alt="Rive gauche" width="304" height="228">Astuce: Il est recommandé de spécifier à la fois la hauteur et la largeur des attributs dune image. Si ces attributs sont définis, lespace requis pour limage estréservé lorsque la page est chargée. Cependant, sans ces attributs, le navigateur ne connaissez pas la taille de limage. Leffet sera que la mise en page vachanger au cours du chargement (alors que le chargement des images).Notes de base - Conseils utilesRemarque: Si un fichier HTML contient dix images - onze fichiers sont nécessaires pour afficher la page de droite.Chargement des images prend du temps,mon meilleur conseil est le suivant: Utiliser des images avec soin.Remarque: Quand une page Web est chargée, cest le navigateur, à ce moment, que se fait limage dun serveur Web et linsère dans la page. Par conséquent,assurez-vous que les images réellement rester dans le même endroit par rapport à la page web, sinon, vos visiteurs auront une icône de lien cassé. Licône delien rompu est affiché si le navigateur ne peut pas trouver limage.Les tags HTMLBalise Description <img> Définit une image <map> Définit une carte-image Définit une zone cliquable dans une image- <area> carte © 2013 www.krymo.com Tous Droits réservés.
  43. 43. Télécharger ce document en format pdf sur www.krymo.comHTML TableauxExemple de tableau HTML:Prénom Nom de famille PointsJill Forgeron 50Eve Jackson 94Jean Biche 80Adam Johnson 67Les tableaux HTMLLes tableaux sont définis avec la balise <table>.Une table est divisée en lignes (avec la balise <tr>), et chaque ligne est divisée en cellules de données avec la balise (<td>). td représente des données detable "," et maintient le contenu dune cellule de données. Une balise <td> peut contenir du texte, des liens, des images, des listes, des formulaires, destableaux dautres, etc © 2013 www.krymo.com Tous Droits réservés.
  44. 44. Télécharger ce document en format pdf sur www.krymo.comExemple de tableau<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>Comment le code HTML ci-dessus porte dans un navigateur:ligne 1, cellule 1 ligne 1, cellule 2ligne 2, la cellule 1 ligne 2, la cellule 2Les tableaux HTML et des attributs de la frontièreSi vous ne spécifiez pas lattribut border, le tableau sera affiché sans frontières. Parfois, cela peut être utile, mais la plupart du temps, nous voulons que lesfrontières de montrer.Pour afficher une table avec des bordures, spécifiez lattribut border:<table border="1"><tr><td>Row 1, cell 1</td><td>Row 1, cell 2</td></tr></table> © 2013 www.krymo.com Tous Droits réservés.
  45. 45. Télécharger ce document en format pdf sur www.krymo.comEn-têtes de tableau HTMLInformations den-tête dans un tableau sont définies avec la balise <th>.Tous les principaux navigateurs afficher le texte dans lélément <th> en gras et centré.<table border="1"><tr><th>Header 1</th><th>Header 2</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>Comment le code HTML ci-dessus porte dans votre navigateur: En-tête 1 En-tête 2ligne 1, cellule 1 ligne 1, cellule 2ligne 2, la cellule 1 ligne 2, la cellule 2Balises de tableau HTMLBalise Description <table> Définit une table © 2013 www.krymo.com Tous Droits réservés.
  46. 46. Télécharger ce document en format pdf sur www.krymo.com<th> Définit une cellule den-tête dans un tableau<tr> Définit une ligne dans une table<td> Définit une cellule dans un tableau<caption> Définit une légende de la table Spécifie un groupe de une ou plusieurs colonnes dans une table de mise en<colgroup> forme Spécifie les propriétés de colonne pour chaque colonne dun élément<col> <colgroup><thead> Groupes de contenu den-tête dun tableau<tbody> Groupes du contenu du corps dun tableau<tfoot> Groupes du contenu de bas de page dans un tableau © 2013 www.krymo.com Tous Droits réservés.
  47. 47. Télécharger ce document en format pdf sur www.krymo.comHTML listesLes listes les plus communs HTML sont ordonnées et non ordonnées listes:Listes HTMLListe ordonnée: Liste non-ordonnée: 1. Premier élément de la liste • Élément de la liste 2. Deuxième élément de la liste • Élément de la liste 3. Troisième élément de la liste • Élément de la liste © 2013 www.krymo.com Tous Droits réservés.
  48. 48. Télécharger ce document en format pdf sur www.krymo.comliste à puces (non-ordonné)Une liste non-ordonnée commence par la balise <ul>. Chaque élément de la liste commence par la balise <li>.Les éléments de la liste sont marquées avec des balles (généralement petits cercles noirs).<ul><li>Café</li><li>Lait</li></ul>Comment le code HTML ci-dessus porte dans un navigateur: •Café •Laitliste ordonnéeUne liste ordonnée commence par la balise <ol>. Chaque élément de la liste commence par la balise <li>.Les éléments de la liste sont identifiées par des numéros.<ol><li>Café</li><li>Lait</li></ol>Comment le code HTML ci-dessus porte dans un navigateur: 1.Café 2.LaitHTML Listes de DéfinitionUne liste de définitions est une liste déléments, avec une description de chaque élément.La balise <dl> définit une liste de définitions. © 2013 www.krymo.com Tous Droits réservés.
  49. 49. Télécharger ce document en format pdf sur www.krymo.comLa balise <dl> est utilisé en conjonction avec <dt> (définit lélément de la liste) et <dd> (décrit lélément dans la liste):<dl><dt>Café</dt><dd>- Boisson noire chaude</dd><dt>Milk</dt><dd>- Blanc boisson froide blanche</dd></dl>Comment le code HTML ci-dessus porte dans un navigateur:Café - Boisson noire chaudeLait - Boisson froide blancheNotes de base - Conseils utilesAstuce: Lintérieur dun élément de la liste, vous pouvez mettre du texte, les sauts de ligne, des images, des liens, des listes dautres, etcListe des étiquettes HTMLBalis Descriptione <ol> Définit une liste ordonnée <ul> Définit une liste non ordonnée <li> Définit un élément de liste <dl> Définit une liste de définitions © 2013 www.krymo.com Tous Droits réservés.
  50. 50. Télécharger ce document en format pdf sur www.krymo.com <dt> Définit un élément dans une liste de définition Définit la description dun élément dans une liste de <dd> définitionsHTML <div> et <span>Les éléments HTML peuvent être regroupés avec <div> et <span>.Pavés HTMLLa plupart des éléments HTML sont définis au niveau des blocs ou des éléments inline .Les éléments de niveau bloc commencent normalement avec une nouvelle ligne lors de laffichage dans un navigateur.Exemples: <h1>, <p>, <ul>, <table>HTML des éléments en ligneLes éléments en ligne saffichent sans démarrer une nouvelle ligne. © 2013 www.krymo.com Tous Droits réservés.
  51. 51. Télécharger ce document en format pdf sur www.krymo.comExemples: <b>, <td>, <a>, <img>Lélément HTML <div>Lélément div HTML est un élément de niveau bloc qui peut être utilisé comme récipient pour regrouper dautres éléments HTML.Lélément div na aucune signification particulière. Sauf que, parce que cest un élément de niveau bloc, le navigateur affiche un saut de ligne avant et après.Lorsquil est utilisé conjointement avec les CSS, lélément div peut être utilisé pour définir les attributs de style pour grands blocs de contenu.Une autre utilisation courante de lélément div, est pour la présentation du document. Il remplace «à lancienne» de la définition de mise en page avec destableaux. Utilisation des tables nest pas la bonne utilisation de lélément <table>. Le but de lélément <table> est dafficher des données tabulaires.Lélément HTML <span>Lélément HTML <span> est un élément en ligne qui peut être utilisé comme un conteneur pour le texte.Lélément <span> na aucune signification particulière.Lorsquil est utilisé conjointement avec les CSS, lélément <span> peut être utilisé pour définir les attributs de style pour les parties du texte.Mots Regroupement HTMLBalise Description Définit une section dans un document (au niveau du <div> bloc) <span> Définit une section dans un document (en ligne) © 2013 www.krymo.com Tous Droits réservés.
  52. 52. Télécharger ce document en format pdf sur www.krymo.comHTML LayoutsLa mise en page Web est très importante pour que votre site web apparaisse bien.Concevez très attentivement votre site web .Layouts Site webLa plupart des sites ont mis leur contenu dans plusieurs colonnes (formaté comme un magazine ou un journal).Plusieurs colonnes sont créées en utilisant <div> ou éléments <table>. Les feuilles CSS sont utilisés pour positionner les éléments, ou pour créer des fonds oulook coloré pour les pages. © 2013 www.krymo.com Tous Droits réservés.
  53. 53. Télécharger ce document en format pdf sur www.krymo.com Même sil est possible de créer des mises en page agréable avec des tables HTML, tableaux ont été conçus pour présenter des données tabulaires - PAS comme un outil de mise en page!Layouts - HTML en utilisant des éléments clésLélément div est un élément de niveau bloc utilisé pour regrouper les éléments HTML.Lexemple suivant utilise cinq éléments div pour créer une mise en page sur plusieurs colonnes, créant le même résultat que dans lexemple précédent:Exemple<!DOCTYPE html><html><body><div id="container" style="width:500px"><div id="header" style="background-color:#FFA500;"><h1 style="margin-bottom:0;">Titre principal de la page web</h1></div><div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"><b>Menu</b><br>HTML<br>CSS<br>JavaScript</div><div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">Contenu</div></div>Menu Contenu </body>HTML </html>CSSJavaScript Le code HTML ci-dessus va produire le résultat suivant: Main Title de la page Web © 2013 www.krymo.com Tous Droits réservés.
  54. 54. Télécharger ce document en format pdf sur www.krymo.comLayouts HTML - Utilisation de tableauxUne façon simple de créer des mises en page est dutiliser la balise tabeau HTML.Plusieurs colonnes sont créées en utilisant <div> ou éléments <table>. CSS sont utilisés pour positionner les éléments, ou pour créer des fonds ou look colorépour les pages. Utilisation <table> pour créer une belle mise en page nest pas la bonne utilisation de lélément. Le but de lélément <table> est dafficher des données tabulaires!Lexemple suivant utilise une table avec 3 lignes et 2 colonnes - la première ligne et la dernière sétend sur deux colonnes en utilisant lattribut colspan:Exemple<!DOCTYPE html><html><body> © 2013 www.krymo.com Tous Droits réservés.
  55. 55. Télécharger ce document en format pdf sur www.krymo.com<table width="500" border="0"><tr><td colspan="2" style="background-color:#FFA500;"><h1>Titre principal de la page</h1></td></tr><tr><td style="background-color:#FFD700;width:100px;text-align:top;"><b>Menu</b><br>HTML<br>CSS<br>JavaScript</td><td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">Content goes here</td></tr><tr><td colspan="2" style="background-color:#FFA500;text-align:center;">Copyright © krymo.fr</td></tr></table></body></html>Le code HTML ci-dessus va produire le résultat suivant:Main Title de la page WebMenuHTML Contenu va iciCSSJavaScript Droits dauteur © krymo.fr © 2013 www.krymo.com Tous Droits réservés.
  56. 56. Télécharger ce document en format pdf sur www.krymo.comMise en page HTML - Conseils utilesAstuce: Le plus grand avantage de lutilisation de CSS, cest que, si vous placez le code CSS dans une feuille de style externe, votre site devient beaucoup plusfacile à entretenir. Vous pouvez modifier la disposition de toutes vos pages en éditant un seul fichier. Pour en savoir plus sur les CSS, étudier notre tutorielCSS .Astuce: Parce présentations avancées prendre le temps de créer, une option est plus rapide dutiliser un modèle.Recherche Google pour les modèles de siteWeb gratuit (ce sont des dispositions de site Web prédéfinis que vous pouvez utiliser et personnaliser).Balises de mise en page HTMLBalise Description <div> Définit une section dans un document (au niveau du bloc) <span> Définit une section dans un document (en ligne)HTML FormulairesLes formulaires HTML sont utilisés pour sélectionner les différents types de saisie de lutilisateur.Les formulaires HTMLLes formulaires HTML sont utilisés pour transmettre des données à un serveur.Un formulaire HTML peut contenir des éléments dentrée comme les champs de texte, cases à cocher, boutons radio, boutons submit et plus encore. Unformulaire peut également contenir des listes de sélection, textarea, fieldset, la légende et les éléments détiquetage. © 2013 www.krymo.com Tous Droits réservés.
  57. 57. Télécharger ce document en format pdf sur www.krymo.comLa balise form est utilisé pour créer un formulaire HTML:<form>.Éléments dentrée.</form>Formulaires HTML - lélément dentréeLélément forme la plus importante est lélément <input>.Lélément <input> est utilisé pour sélectionner les informations utilisateur.Un élément <input> peut varier de plusieurs manières, en fonction de lattribut type. Un élément peut être <input> de champ type texte, case à cocher, motde passe, bouton radio, bouton denvoi, et plus encore.Les types dentrée les plus courants sont décrits ci-dessous.Les champs de texte<input type="text"> définit un champ dentrée une ligne de sorte quun utilisateur peut entrer du texte à:<form>Nom de famille: <input type="text" name="nomdefamille"><br>Prénom: <input type="text" name="prenom"></form>Comportement du code HTML ci-dessus dans un navigateur:Prénom:Nom de famille:Remarque: Le formulaire lui-même nest pas visible. A noter également que la largeur par défaut dun champ de texte est de 20 caractères. © 2013 www.krymo.com Tous Droits réservés.
  58. 58. Télécharger ce document en format pdf sur www.krymo.comChamp Mot de passe<input type="password"> définit un champ de mot de passe:<form>Mot de passe: <input type="password" name="pwd"></form>Résultat:Mot de passe:Remarque: Les caractères dun champ mot de passe sont masqués (représentés par des astérisques ou des cercles).Boutons radio<input type="radio"> définit un bouton radio. Les boutons radio permettent à lutilisateur de sélectionner UN SEUL dun nombre limité de choix:<form><input type="radio" name="sexe" value="homme">Masculin<br><input type="radio" name="sexe" value="femme">Féminin</form>Comment le code HTML ci-dessus porte dans un navigateur: Masculin Féminin © 2013 www.krymo.com Tous Droits réservés.
  59. 59. Télécharger ce document en format pdf sur www.krymo.comCases à cocher<input type="checkbox"> définit une case à cocher. Les cases à cocher permettent à lutilisateur de sélectionner zéro ou plusieurs options dun nombre limitéde choix.<form><input type="checkbox" name="bicyclette" value="velo">Jai un vélo<br><input type="checkbox" name="vehicule" value="voiture">Jai une voiture</form>Résultat: Jai un vélo Jai une voitureBouton Envoyer<input type="submit"> définit un bouton submit.Un bouton est utilisé pour envoyer des données de formulaire vers un serveur. Les données sont envoyées vers la page spécifiée dans lattribut action duformulaire. Le fichier défini dans lattribut action fait habituellement quelque chose avec les commentaires reçus:<form name="input" action="html_form_action.asp" method="get">Nom dutilisateur: <input type="text" name="user"><input type="submit" value="Soumettre"></form>Comment le code HTML ci-dessus porte dans un navigateur: SoumettreNom dutilisateur:Si vous tapez des caractères dans le champ de texte ci-dessus, puis cliquez sur le bouton «Soumettre», le navigateur va envoyer vos commentaires à une pageappelée "html_form_action.asp". La page va vous montrer les commentaires reçus. © 2013 www.krymo.com Tous Droits réservés.
  60. 60. Télécharger ce document en format pdf sur www.krymo.comMots clés formulaire HTMLNouveau : De nouvelles étiquettes en HTML5.Balise Description<form> Définit un formulaire HTML pour la saisie utilisateur<input> Définit un contrôle dentrée<textarea> Définit un contrôle de saisie sur plusieurs (zone de texte)<label> Définit une étiquette pour un élément <input><fieldset> Regroupe des éléments liés à une forme<legend> Définit une légende pour un élément <fieldset><select> Définit une liste déroulante<optgroup> Définit un groupe doptions liées dans une liste déroulante<option> Définit une option dans une liste déroulante<button> Définit un bouton cliquable Spécifie une liste de options prédéfinies pour les contrôles<datalist>Nouveau dentrée Définit un champ générateur de paire de clés (pour les<keygen>Nouveau formulaires)<output>Nouveau Définit le résultat dun calcul © 2013 www.krymo.com Tous Droits réservés.
  61. 61. Télécharger ce document en format pdf sur www.krymo.comHTML IframeUne iframe est utilisée pour afficher une page Web dans une autre page web.Syntaxe pour ajouter une iframe:<iframe src="URL"></iframe>LURL pointe vers lemplacement de la page.Iframe – Hauteur et largeurLes attributs height et width sont utilisés pour spécifier la hauteur et la largeur de liframe. © 2013 www.krymo.com Tous Droits réservés.
  62. 62. Télécharger ce document en format pdf sur www.krymo.comLes valeurs des attributs sont spécifiés en pixels par défaut, mais ils peuvent aussi être en pour cent (comme "80%").Exemple<iframe src="demo_iframe.htm" width="200" height="200"></iframe>Iframe - Retirer la bordureLattribut frameborder spécifie sil faut ou non afficher une bordure autour de liframe.Réglez la valeur de lattribut à "0" pour supprimer la bordure:Exemple<iframe src="demo_iframe.htm" frameborder="0"></iframe>Utilisez iframe comme une cible pour un lienUne iframe peut être utilisé en tant que trame cible pour un lien.Lattribut target dun lien doit faire référence à lattribut name de la balise iframe:Exemple<iframe src="demo_iframe.htm" name="iframe_a"></iframe><p><a href="http://www.krymo.com" target="iframe_a">krymo.fr</a></p> © 2013 www.krymo.com Tous Droits réservés.
  63. 63. Télécharger ce document en format pdf sur www.krymo.comHTML balise iframeBalise Description Définit un cadre en <iframe> ligneHTML CouleursLes couleurs sont affichées combinant ROUGE, VERT, BLEU et de la lumière.Les valeurs des couleursCouleurs HTML sont définies en utilisant une notation hexadécimale (HEX) pour la combinaison de rouge, vert, et les valeurs de couleur bleu (RVB).La valeur la plus basse qui peut être donnée à lune des sources lumineuses est 0 (en hexadécimal: 00). La valeur la plus élevée est de 255 (en hexadécimal:FF). © 2013 www.krymo.com Tous Droits réservés.
  64. 64. Télécharger ce document en format pdf sur www.krymo.comValeurs HEX sont spécifiés comme 3 paires de nombres à deux chiffres, en commençant par un signe #.Les valeurs des couleursCouleur HEX Couleur Couleur RVB # 000000 rgb (0,0,0) # FF0000 rgb (255,0,0) # 00FF00 rgb (0,255,0) # 0000FF rgb (0,0,255) # FFFF00 rgb (255,255,0) # 00FFFF rgb (0,255,255) # FF00FF rgb (255,0,255) rgb # C0C0C0 (192,192,192) rgb # FFFFFF (255,255,255)16 Millions de couleurs différentesLa combinaison de rouge, vert, bleu et les valeurs de 0 à 255, donne plus de 16 millions de couleurs différentes (256 x 256 x 256).Si vous regardez le tableau ci-dessous couleur, vous verrez le résultat de la variation de la lumière rouge de 0 à 255, tout en gardant le feu vert et bleu à zéro.Pour voir la liste complète de la couleur se mélange lorsque RED varie de 0 à 255, cliquer sur lune des valeurs RGB HEX ou ci-dessous. © 2013 www.krymo.com Tous Droits réservés.
  65. 65. Télécharger ce document en format pdf sur www.krymo.comRed Light HEX Couleur Couleur RVB # 000000 rgb (0,0,0) # 080000 rgb (8,0,0) # 100000 rgb (16,0,0) # 180000 rgb (24,0,0) Numéro rgb (32,0,0) 200000 # 280000 rgb (40,0,0) # 300000 rgb (48,0,0) # 380000 rgb (56,0,0) # 400000 rgb (64,0,0) # 480000 rgb (72,0,0) # 500000 rgb (80,0,0) # 580000 rgb (88,0,0) # 600000 rgb (96,0,0) # 680000 rgb (104,0,0) # 700000 rgb (112,0,0) # 780000 rgb (120,0,0) © 2013 www.krymo.com Tous Droits réservés.
  66. 66. Télécharger ce document en format pdf sur www.krymo.com # 800000 rgb (128,0,0) # 880000 rgb (136,0,0) # 900000 rgb (144,0,0) # 980000 rgb (152,0,0) # A00000 rgb (160,0,0) # A80000 rgb (168,0,0) # B00000 rgb (176,0,0) # B80000 rgb (184,0,0) # C00000 rgb (192,0,0) # C80000 rgb (200,0,0) # D00000 rgb (208,0,0) # D80000 rgb (216,0,0) # E00000 rgb (224,0,0) # E80000 rgb (232,0,0) # F00000 rgb (240,0,0) # F80000 rgb (248,0,0) # FF0000 rgb (255,0,0) © 2013 www.krymo.com Tous Droits réservés.
  67. 67. Télécharger ce document en format pdf sur www.krymo.comCouleurs grisesCouleurs grises sont créés en utilisant une quantité égale de pouvoir de toutes les sources de lumière.Pour le rendre plus facile pour vous de choisir la bonne teinte, nous avons créé une table des nuances de gris pour vous: HEXNuances de gris Couleur RVB Couleur # 000000 rgb (0,0,0) # 080808 rgb (8,8,8) # 101010 rgb (16,16,16) # 181818 rgb (24,24,24) # 202020 rgb (32,32,32) # 282828 rgb (40,40,40) # 303030 rgb (48,48,48) # 383838 rgb (56,56,56) # 404040 rgb (64,64,64) # 484848 rgb (72,72,72) # 505050 rgb (80,80,80) # 585858 rgb (88,88,88) © 2013 www.krymo.com Tous Droits réservés.
  68. 68. Télécharger ce document en format pdf sur www.krymo.com# 606060 rgb (96,96,96)# 686868 rgb (104,104,104)# 707070 rgb (112,112,112)# 787878 rgb (120,120,120)# 808080 rgb (128,128,128)# 888888 rgb (136,136,136)# 909090 rgb (144,144,144)# 989898 rgb (152,152,152)# A0A0A0 rgb (160,160,160)# A8A8A8 rgb (168,168,168)# B0B0B0 rgb (176,176,176)# B8B8B8 rgb (184,184,184)# C0C0C0 rgb (192,192,192)# C8C8C8 rgb (200,200,200)# D0D0D0 rgb (208,208,208)# D8D8D8 rgb (216,216,216)# E0E0E0 rgb (224,224,224) © 2013 www.krymo.com Tous Droits réservés.
  69. 69. Télécharger ce document en format pdf sur www.krymo.com # E8E8E8 rgb (232,232,232) # F0F0F0 rgb (240,240,240) # F8F8F8 rgb (248,248,248) # FFFFFF rgb (255,255,255)HistoriqueIl ya quelques années, quand les ordinateurs pris en charge max 256 couleurs différentes, une liste de 216 "Web Safe Colors» a été proposé comme unstandard Web, réservant 40 couleurs fixes du système.La palette de 216 couleurs multi-navigateur a été créé pour veiller à ce que tous les ordinateurs devraient afficher correctement les couleurs lors de lexécutiondune palette de 256 couleurs.Ce nest pas important aujourdhui, car la plupart des ordinateurs peuvent afficher des millions de couleurs différentes. Quoi quil en soit, voici la liste: 000000 000033 000066 000099 0000CC 0000FF 003300 003333 003366 003399 0033CC 0033FF 006600 006633 006666 006699 0066CC 0066FF 009900 009933 009966 009999 0099CC 0099FF 00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF 00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF 330000 330033 330066 330099 3300CC 3300FF 333300 333333 333366 333399 3333CC 3333FF 336600 336633 336666 336699 3366CC 3366FF 339900 339933 339966 339999 3399CC 3399FF 33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF 33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF © 2013 www.krymo.com Tous Droits réservés.
  70. 70. Télécharger ce document en format pdf sur www.krymo.com660000 660033 660066 660099 6600CC 6600FF663300 663333 663366 663399 6633CC 6633FF666600 666633 666666 666699 6666CC 6666FF669900 669933 669966 669999 6699CC 6699FF66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF990000 990033 990066 990099 9900CC 9900FF993300 993333 993366 993399 9933CC 9933FF996600 996633 996666 996699 9966CC 9966FF999900 999933 999966 999999 9999CC 9999FF99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFFCC0000 CC0033 CC0066 CC0099 CC00CC CC00FFCC3300 CC3333 CC3366 CC3399 CC33CC CC33FFCC6600 CC6633 CC6666 CC6699 CC66CC CC66FFCC9900 CC9933 CC9966 CC9999 CC99CC CC99FFCCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFFCCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFFFF0000 FF0033 FF0066 FF0099 FF00CC FF00FFFF3300 FF3333 FF3366 FF3399 FF33CC FF33FFFF6600 FF6633 FF6666 FF6699 FF66CC FF66FFFF9900 FF9933 FF9966 FF9999 FF99CC FF99FFFFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFFFFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF © 2013 www.krymo.com Tous Droits réservés.
  71. 71. Télécharger ce document en format pdf sur www.krymo.comHTML ScriptsJavaScripts faire des pages HTML plus dynamique et interactif.La balise HTML <script>La balise <script> est utilisé pour définir un script côté client, tel quun JavaScript.Lélément <script> contient soit des déclarations de script ou elle pointe vers un fichier de script externe via lattribut src.Lattribut type requis spécifie le type MIME du script.Les utilisations communes pour JavaScript sont la manipulation dimages, la validation du formulaire, et les changements dynamiques de contenu.Le script ci-dessous, écrit Bonjour tout le monde! à la sortie HTML: © 2013 www.krymo.com Tous Droits réservés.
  72. 72. Télécharger ce document en format pdf sur www.krymo.comExemple<script>document.write("Hello World!")</script> Astuce: Pour en savoir plus sur JavaScript, consultez notre tutoriel JavaScript !La balise HTML <noscript>La balise <noscript> est utilisé pour fournir un autre contenu pour les utilisateurs qui ont désactivé les scripts dans leur navigateur ou un navigateur qui nesupporte pas les scripts côté client.Lélément <noscript> peut contenir tous les éléments que vous pouvez trouver à lintérieur de lélément body dune page HTML normale.Le contenu de lélément <noscript> ne sera affiché que si son exécution ne sont pas pris en charge ou sont désactivés dans le navigateur de lutilisateur:Exemple<script>document.write("Hello World!")</script><noscript>Désolé votre navigateur ne supporte pas JavaScript!</noscript>Un avant-goût de notre tuto JavaScript)Voici quelques exemples de ce que JavaScript peut faire:JavaScript peut écrire directement dans le flux de sortie HTML:document.write("<p>Ceci est un paragraphe</p>"); © 2013 www.krymo.com Tous Droits réservés.
  73. 73. Télécharger ce document en format pdf sur www.krymo.comJavaScript peut réagir à des événements:<button type="button" onclick="myFunction()">Cliquez ici!</button>JavaScript peut manipuler les styles HTML:document.getElementById("demo").style.color="#ff0000";Balises de script HTMLBalise Description<script> Définit un script côté client Définit un autre contenu pour les utilisateurs qui ne supportent pas les scripts côté<noscript> client © 2013 www.krymo.com Tous Droits réservés.
  74. 74. Télécharger ce document en format pdf sur www.krymo.comHTML entitésCaractères réservés dans HTML doit être remplacé par les entités de caractères.Les entités HTMLCertains caractères sont réservés en HTML.Il nest pas possible dutiliser le moins de (<) ou supérieur (>) des signes dans votre texte, parce que le navigateur va les mélanger avec des étiquettes.Pour afficher réellement les caractères réservés, nous devons utiliser les entités de caractères dans le code source HTML.Une entité de caractère ressemble à ceci: © 2013 www.krymo.com Tous Droits réservés.
  75. 75. Télécharger ce document en format pdf sur www.krymo.com&entity_name;OR&#entity_number;Pour afficher un signe inférieur il faut écrire: < ou < Astuce: Lavantage dutiliser un nom dentité, au lieu dun nombre, cest que le nom est facile à retenir.Cependant, linconvénient est que les navigateurs nesupportent pas tous les noms dentité (le support pour les numéros entité est très bon).Espace insécableUne entité de caractère commun utilisé en HTML est lespace insécable ().Navigateurs toujours tronquer les espaces dans les pages HTML. Si vous écrivez des 10 espaces dans votre texte, le navigateur va supprimer 9 dentre eux,avant dafficher la page. Pour ajouter un espace pour votre texte, vous pouvez utiliser lentité de caractère.HTML Entités de caractères utilesRemarque: les noms dentités sont sensibles à la casse! Nom de Numéro deRésulter Description lentité lentité espace &nbsp;   insécable < moins que < < > supérieure à > > © 2013 www.krymo.com Tous Droits réservés.
  76. 76. Télécharger ce document en format pdf sur www.krymo.com & esperluette & & ¢ centime ¢ ¢ £ livre £ £ ¥ yen ¥ ¥ € euro € € § section § § © droit dauteur © © marque ® ® ® déposée marque ™ déposée ™ ™Pour une liste complète de toutes les entités de caractères, visitez notre référence HTML entités .HTML Localisateur uniforme de ressourcesUne URL est un autre mot pour une adresse Web.Une URL peut être composée de mots, tels que «krymo.fr", ou un protocole Internet (IP) address: 192.68.20.50. La plupart des gensentre le nom du site lors de la navigation, car les noms sont plus faciles à mémoriser que des chiffres. © 2013 www.krymo.com Tous Droits réservés.
  77. 77. Télécharger ce document en format pdf sur www.krymo.comURL - Uniform Resource LocatorLes Navigateurs Web demandent des pages de serveurs Web à laide dune URL.Lorsque vous cliquez sur un lien dans une page HTML, une balise <a> sous-jacente pointe vers une adresse sur le world wide web.Un Uniform Resource Locator (URL) est utilisée pour traiter un document (ou dautres données) sur le world wide web.Une adresse Web, comme ceci: http://www.krymo.com/html/default.asp suit ces règles de syntaxe:schema://host.domain:port/path/filenameExplication: •schéma - définit le type de service Internet. Le type le plus commun est http •accueil - définit l hôte de domaine (lhôte par défaut pour HTTP est www ) •domaine - définit lInternet nom de domaine , comme krymo.fr •: Port - définit le numéro de port sur lhôte (le numéro de port par défaut pour HTTP est 80 ) •chemin - définit un chemin daccès au serveur (Sil est omis, le document doit être stocké dans le répertoire racine du site web) •nom de fichier - définit le nom dun document / ressourceURL Schémas communsLe tableau ci-dessous répertorie certains régimes communs:Programme Court .... Les pages qui le système est utilisé pour ... http HyperText Transfer Protocol Pages web ordinaires commence par http://. Non chiffré https Secure Hypertext Transfer Protocol Fixez pages Web. Toutes les informations échangées sont cryptées © 2013 www.krymo.com Tous Droits réservés.
  78. 78. Télécharger ce document en format pdf sur www.krymo.com Pour le téléchargement ou le téléchargement de fichiers à un site Web. Utile ftp File Transfer Protocol pour la maintenance de domaine dossier Un fichier sur votre ordinateurEncodage URLURL ne peuvent être envoyés sur Internet en utilisant le jeu de caractères ASCII .Comme les URL contiennent souvent des personnages hors du jeu ASCII, lURL doit être converti dans un format ASCII valide.Encodage dURL convertit les caractères dans un format qui peut être transmis par Internet.Encodage URL remplace les caractères non ASCII avec un "%" suivi de deux chiffres hexadécimaux.URL ne peuvent pas contenir despaces. Encodage URL remplace normalement un espace avec un signe +.Exemples dencodage URLCaractèr Site dee codage € 80% £ A3% © % A9 ® AE% © 2013 www.krymo.com Tous Droits réservés.
  79. 79. Télécharger ce document en format pdf sur www.krymo.com À % C0 Á % C1 Â % C2 Ã C3% Ä C4% Å C5%Pour une référence complète de tous les encodages URL, visitez notre référence dencodage URL .HTML Liste rapide © 2013 www.krymo.com Tous Droits réservés.
  80. 80. Télécharger ce document en format pdf sur www.krymo.comHTML Document de base<! DOCTYPE html><html><head><title> Titre du document </ title></ head><body>texte visible voilà ...</ body></ Html>Basic Mots clésLe plus grand <h1> Titre </ h1><h2>. . . </ H2><h3>. . . </ H3><h4>. . . </ H4><h5>. . . </ H5><h6> petite tête </ h6> <p> Ceci est un paragraphe </ p>. <br> (saut de ligne) <hr> (règle horizontale) <-! Ceci est un commentaire ->Formatage<b> texte en gras </ b>Computer <code> code </ code><em> Accentué texte </ em><i> Italique texte </ i>Entrée clavier <kbd> </ kbd><pre> Texte préformaté </ pre><small> Smaller text </ small><strong> texte Important </ strong> <abbr> (abréviation) <adresse> (coordonnées) <bdo> (direction du texte)<blockquote> (une section de citation de uneautre source) <cite> (titre dun ouvrage) <del> (texte supprimé)<ins> (texte inséré) <sub> (texte en indice) <sup> (texte en exposant)LiensLien ordinaire: href="http://www.example.com/"> <a Lien texte va ici </ a>Lien-image: href="http://www.example.com/"> <a <img SRC="URL" alt="Alternate texte"> </ a>lien Mailto: href="mailto:webmaster@example.com"> <a Envoyer un e-mail </ a> © 2013 www.krymo.com Tous Droits réservés.
  81. 81. Télécharger ce document en format pdf sur www.krymo.comMarque page:<a id="tips"> Conseils de section </ a><a href="#tips"> Aller à la section Conseils </ a>Images<img SRC="URL" alt="Alternate Text" height="42" width="42">Styles / Sections<style type="text/css"> h1 {color: red;} p {color: blue;}</ style> <div Une section de niveau bloc dans un document </ div> <span> Une section en ligne un document </ span>Liste non ordonnée<ul> <li> article </ li> <li> article </ li></ ul>Liste ordonnée<ol> <li> Premier élément </ li> <li> Second élément </ li></ ol>Liste de définitions<dl> <dt> Point 1 </ dt> <dd> Décrivez point 1 </ dd> <dt> Point 2 </ dt> © 2013 www.krymo.com Tous Droits réservés.

×