Html de base

Télécharger ce document en format pdf sur www.krymo.com

© 2013 www.krymo.com Tous Droits réservés.


Tutoriel 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 chapitre
Ce tutoriel HTML contient des centaines d'exemples 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>



<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

HTML Présentation

Exemple HTML
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>



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

Qu'est-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 Web

Les balises HTML
Balises 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 d'ouverture et de clôture étiquettes

<tagname> contenu </ tagname>



Les é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 Web
Le but d'un navigateur Web (tel que Google Chrome, Internet Explorer, Firefox, Safari) est de lire les documents HTML et de les afficher sous forme de pages
Web. Le navigateur n'affiche pas les balises HTML, mais utilise les balises pour interpréter le contenu de la page:



Structure d'une page HTML
Ci-dessous est une visualisation d'une structure de la page HTML:
<html>

<body>

Cette <h1> un titre </ h1>

<p> Ceci est un paragraphe. </ p>

<p> C'est un autre paragraphe. </ p>

</ Body>

</ Html>



Versions HTML
Depuis les premiers jours de l'Internet, 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



Le<! DOCTYPE> Déclaration
L'<! DOCTYPE> permet au navigateur d'afficher 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 la
version utilisés.

Déclarations communes

HTML5
<!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">



HTML Editeurs

HTML écrit en utilisant Notepad ou TextEdit
HTML peuvent être édités en utilisant un éditeur HTML professionnel comme:

•Adobe Dreamweaver
•Microsoft Expression Web
•CoffeeCup HTML Editor

Cependant, pour apprendre le langage HTML, nous recommandons un éditeur de texte comme Notepad (PC) ou TextEdit (Mac). Nous croyons à l'aide d'un
simple éditeur de texte est un bon moyen d'apprendre 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-notes
Pour 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:



Etape 3: enregistrer votre HTML
Sélectionnez Enregistrer sous .. dans le menu fichier du Bloc-notes.

Lorsque vous enregistrez un fichier HTML, vous pouvez utiliser soit le htm. Ou l'extension de fichier. Html. Il n'y 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 navigateur
Lancez votre navigateur Web et ouvrez votre fichier html à partir du fichier , Ouvrir du menu, ou tout simplement naviguer sur le dossier et double-cliquez sur
votre fichier HTML.

Le résultat devrait ressembler un peu comme ceci:



HTML de base - 4 Exemples

Ne 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 HTML
Rubriques HTML sont définis avec le <h1> aux tags <h6>.

Exemple
<h1>This is a heading</h1>

Paragraphes HTML
Paragraphes HTML sont définies avec la balise <p>.

Exemple
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>



Liens HTML
Liens HTML sont définies avec la balise <a>.

Exemple
<a href="http://www.krymo.com">ceci est un lien</a>

Remarque: L'adresse du lien est spécifié dans l'attribut href.

(Vous apprendrez à connaître les attributs dans un chapitre ultérieur de ce tutoriel).

Images HTML
Images 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 l'image sont prévus sous forme d'attributs.



HTML Eléments

Les documents HTML sont définis par les éléments HTML.

Les éléments HTML
Un é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 d'ouverture . 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 d'ouverture
•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



Astuce: Vous apprendrez à connaître les attributs dans le prochain chapitre de ce tutoriel.

Éléments HTML imbriqués
La plupart des éléments HTML peuvent être imbriquées (peut contenir d'autres é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>

L'exemple ci-dessus contient 3 éléments HTML.

Exemple HTML expliqué
L'élément <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>.
L'contenu de l'élément est: Ceci est mon premier paragraphe.

L'élément body:



<body>
</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>
</body>

</html>

L'élément <html> définit l'ensemble du document HTML.
L'élément possède une balise de début <html> et une balise de fin </ html>.
L'contenu de l'élément est un autre élément HTML (l'élément du corps).

N'oubliez pas la balise de fin
Certains éléments HTML peuvent s'afficher correctement même si vous oubliez la balise de fin:

<p>This is a paragraph
<p>This is a paragraph

L'exemple 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 d'erreurs si vous oubliez la balise de fin.

Vider les éléments HTML
Éléments HTML sans contenu sont appelés éléments vides.



<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 d'une barre oblique à l'intérieur de la balise de début, comme /> <br, est la bonne façon de
fermer les éléments vides dans XHTML et XML ().

HTML Astuce: Utilisez Mots minuscules
Les balises HTML ne sont pas sensibles à la casse: Campagne signifie la même chose que <p>. De nombreux sites Web utilisent des balises HTML en
majuscules.

W3Schools utiliser des balises en minuscules parce que le World Wide Web Consortium (W3C) recommandeminuscules dans HTML 4, et exige balises en
minuscules en XHTML.

HTML Attributs

Les 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"



Exemple d'attribut
Liens HTML sont définies avec la balise <a>. L'adresse 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 attributs
Les 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 l'attribut lui-même contient des guillemets, il est nécessaire d'utiliser des guillemets simples: name =
"John" Shotgun "Nelson"

HTML Astuce: Utilisez les attributs en minuscules
Les noms d'attributs et de valeurs d'attributs sont sensibles à la casse.

Cependant, le World Wide Web Consortium (W3C) recommande attributs en minuscules / valeurs d'attribut dans leur recommandation HTML 4.

Les nouvelles versions de (X) HTML exigera attributs en minuscules.

Attributs HTML référence
Une liste complète des attributs juridiques pour chaque élément HTML est inscrite dans notre: Référence des balises HTML .



Voici une liste de certains attributs qui peuvent être utilisés sur n'importe 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 d'aide)



HTML Rubriques

Les rubriques jouent un rôle important dans les documents HTML.

Rubriques HTML
Tê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

Remarque: Les navigateurs d'ajouter automatiquement un espace vide (une marge) avant et après chaque titre.

Les Rubriques sont importants
Utilisez 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 à l'index de la structure et le contenu de vos pages web.

Comme les utilisateurs peuvent parcourir vos pages par ses rubriques, il est important d'utiliser des en-têtes pour montrer la structure du document.


Rubriques 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 HTML
La 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 HTML
Les 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 ne
sont pas affichés.

Les commentaires sont rédigés comme suit:

Exemple


Remarque: Il ya un point d'exclamation après le crochet ouvrant, mais pas avant la parenthèse fermante.


HTML Astuce - Comment faire pour afficher la source HTML
Avez-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 autres
navigateurs. Cela va ouvrir une fenêtre contenant le code HTML de la page.

HTML balise de référence
Ré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



HTML paragraphes

Les documents HTML sont divisés en paragraphes.

Paragraphes HTML
Les 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 d'ajouter automatiquement une ligne vide avant et après un paragraphe.

N'oubliez pas la balise de fin
La 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 paragraphe

L'exemple ci-dessus fonctionne dans la plupart des navigateurs, mais ne comptez pas sur elle. Oublier la balise fermante peut produire des résultats inattendus
ou des erreurs.

Remarque: la version du futur de HTML ne vous permettra pas de sauter les balises de fin.



Les sauts de ligne HTML
Utilisez 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 n'a pas de balise de fin.

Sortie HTML - Conseils utiles
Vous 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.N'importe quel nombre de lignes compte pour une
seule ligne, et un nombre quelconque d'espaces compte pour un seul espace.

Essayez vous-même

(L'exemple montre certains problèmes de mise en forme HTML)



Balises HTML de référence
Référence W3Schools tag "contient des informations supplémentaires sur les éléments HTML et leurs attributs.

Balis
Description
e

<p> Définit un paragraphe

Insère un saut de ligne
<br>
simple



HTML Mise en forme du texte

Formatage du texte HTML

Ce texte est en gras

Ce texte est en italique

Il s'agit d'un indice et d'un exposant

Balises de formatage HTML
HTML 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 d'une manière que l'utilisateur comprenne comme «important». Aujourd'hui, 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!



HTML balises de formatage de texte
Balise Description

<b> Définit le texte en gras

<em> Définit le texte souligné

Définit une partie du texte d'une voie d'alternative ou
<i>
d'humeur

<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 l'ordinateur" Tags
Balise 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



<pre> Définit le texte préformaté

Citations, Citations HTML et balises Définition
Balise Description

<abbr> Définit une abréviation ou d'un acronyme

<adress> Définit les coordonnées de l'auteur / propriétaire d'un 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 d'une œuvre

<dfn> Définit un terme à définir



HTML Liens

Les 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 l'image 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 l'attribut 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 rouge

Syntaxe Lien HTML
Le code HTML pour un lien est simple. Il ressemble à ceci:

<a href="url">texte du lien</a>

L'attribut href indique la destination d'un lien.



Exemple
<a href="http://www.krymo.com/">Visiter le site krymo</a>

qui affichera comme ceci: Visiter le site krymo

En cliquant dessus cet hyperlien enverra à l'utilisateur sur le site www.krymo.fr.

Astuce: Le " Texte du lien "n'a pas besoin d'être du texte. Il peut être une image ou tout autre élément HTML.

Liens HTML - L'attribut cible
L'attribut target spécifie l'emplacement pour ouvrir le document lié.

L'exemple 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 - L'attribut id
L'attribut id peut être utilisée pour créer un signet dans un document HTML.

Astuce: Les signets sont pas affichés d'une manière spéciale. Ils sont invisibles pour le lecteur.

Exemple
Une 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» à l'intérieur du même document:



<a href="#conseils">visiter la section de conseils utiles</a>

Vous pouvez également créer un lien vers la section «Conseils utiles» à partir d'une autre page:

<a href="http://www.krymo.com/liens_html.htm#conseils">
visiter la section de conseils utiles</a>

Notes de base - Conseils utiles
Note: 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érer
deux demandes au serveur, le serveur va d'abord ajouter une barre oblique à l'adresse, puis créez une nouvelle requête comme ceci : href =
"http://www.krymo.com/html/".

Mots Lien HTML
Balise Description

Définit un lien
<a>
hypertexte



HTML le <head>

L'élément HTML <head>
L'élément <head> est un conteneur pour tous les éléments de tête. Éléments à l'inté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 d'outils navigateur
•fournit un titre pour la page lorsqu'il est ajouté aux favoris
•affiche le titre de la page dans les résultats des moteurs résultats

Un document simplifié HTML:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>



L'é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>



L'élément meta HTML
Les 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 analysable
machine.

É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 d'autres 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 à l'intérieur de l'élément <head>.

Balises meta - Exemples d'utilisation
Dé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 l'auteur d'une 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 qu'un JavaScript.



L'élément <script> sera expliqué dans un chapitre ultérieur.

Éléments tête HTML
Balise Description

<head> Définit les informations sur le document

<title> Définit le titre d'un 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 d'un document HTML

<script> Définit un script côté client

<style> Définit les informations de style pour un document



HTML - CSS Styles

CSS (Cascading Style Sheets) est utilisé pour des éléments de style HTML.

Mettre en style HTML avec CSS
Le 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 fichier
Le meilleur moyen d'ajouter 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 l'attribut style. Ceci est fait pour simplifier les exemples. Il rend également plus
facile pour vous de modifier le code et essayer vous-même.

Vous pouvez tout apprendre sur CSS dans notre tutoriel CSS .

Styles en ligne
Un style en ligne peut être utilisée si un style unique doit être appliqué à une seule occurrence d'un élément.

Pour utiliser les styles en ligne, utilisez l'attribut style dans la balise concernée. L'attribut style peut contenir n'importe quelle propriété CSS. L'exemple ci-
dessous montre comment changer la couleur du texte et la marge gauche d'un paragraphe:



<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 fond
La 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 l'attribut bgcolor obsolète.

Essayez vous-même: Couleur de fond à l'ancienne

Exemple de style HTML - police, couleur et taille
Le 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>



<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 texte
La propriété text-align spécifie l'alignement 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 l'ancienne

Feuille de style interne
Une feuille de style interne peut être utilisé si un seul document a un style unique. Styles internes sont définis dans la section <head> d'une page HTML, en
utilisant la balise <style>, comme ceci:



<head>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

Feuille de style externe
Une feuille de style externe est idéal lorsque le style est appliqué à plusieurs pages. Avec une feuille de style externe, vous pouvez changer l'apparence d'un
site 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 à l'intérieur de la
section <head>:

<head>
<link rel="stylesheet" type="text/css" href="monstyle.css">
</head>

Balises de style HTML
Balise Description

<style> Définit les informations de style pour un document

Définit la relation entre un document et une ressource
<link>
externe



Balises et attributs dépréciés
En 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 de
HTML.

Évitez d'utiliser les éléments suivants: <font>, <center> et <strike>, et les attributs: couleur et bgcolor.

HTML Images

Exemple

Voyage en montagne norvégienne



Images - La balise HTML <img> et l'attribut Src
En HTML, les images sont définies avec la balise img.

La balise <img> est vide, ce qui signifie qu'il contient des attributs seulement, et n'a pas de balise de fermeture.

Pour afficher une image sur une page, vous devez utiliser l'attribut src. Src signifie "source". La valeur de l'attribut src est l'URL de l'image que vous souhaitez
afficher.

Syntaxe pour définir une image:

<img src="url" alt="du_texte">

L'URL pointe vers l'emplacement où l'image est stockée. Une image nommée "bateau.gif", situé dans "images" sur "www.krymo.fr" a l'URL:
http://www.krymo.com/images/bateau.gif.

Le navigateur affiche l'image où la balise <img> apparaît dans le document. Si vous mettez un marqueur d'image entre deux paragraphes, le navigateur affiche
le premier paragraphe, puis l'image, puis le deuxième alinéa.

Images HTML - l'attribut ALT
L'attribut alt requis spécifie un texte de remplacement pour une image, si l'image ne peut pas être affichée.

La valeur de l'attribut alt est un texte défini par l'auteur:

<img src="bateau.gif" alt="Gros bateau">

L'attribut alt fournit des informations de remplacement pour une image si un utilisateur pour une raison quelconque, ne peut pas le voir (en raison de connexion
lente, une erreur dans l'attribut src, ou si l'utilisateur utilise un lecteur d'écran).

Images HTML - Hauteur Définit la largeur d'une image
Les attributs height et width sont utilisés pour spécifier la hauteur et la largeur d'une image.



Les 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 d'une image. Si ces attributs sont définis, l'espace requis pour l'image est
réservé lorsque la page est chargée. Cependant, sans ces attributs, le navigateur ne connaissez pas la taille de l'image. L'effet sera que la mise en page va
changer au cours du chargement (alors que le chargement des images).

Remarque: 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, c'est le navigateur, à ce moment, que se fait l'image d'un serveur Web et l'insè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é. L'icône de
lien rompu est affiché si le navigateur ne peut pas trouver l'image.

Les tags HTML
Balise Description

<img> Définit une image

<map> Définit une carte-image

Définit une zone cliquable dans une image-
<area>
carte



HTML Tableaux

Exemple de tableau HTML:

Prénom Nom de famille Points

Jill Forgeron 50

Eve Jackson 94

Jean Biche 80

Adam Johnson 67

Les tableaux HTML
Les 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 de
table "," et maintient le contenu d'une cellule de données. Une balise <td> peut contenir du texte, des liens, des images, des listes, des formulaires, des
tableaux d'autres, etc



Exemple de tableau
<table border="1">
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>

Comment le code HTML ci-dessus porte dans un navigateur:

ligne 1, cellule 1 ligne 1, cellule 2
ligne 2, la cellule 1 ligne 2, la cellule 2

Les tableaux HTML et des attributs de la frontière
Si vous ne spécifiez pas l'attribut border, le tableau sera affiché sans frontières. Parfois, cela peut être utile, mais la plupart du temps, nous voulons que les
frontières de montrer.

Pour afficher une table avec des bordures, spécifiez l'attribut border:

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>



En-têtes de tableau HTML
Informations d'en-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>
</tr>
<tr>
</tr>
</table>

Comment le code HTML ci-dessus porte dans votre navigateur:

En-tête 1 En-tête 2
ligne 1, cellule 1 ligne 1, cellule 2
ligne 2, la cellule 1 ligne 2, la cellule 2

Balises de tableau HTML
Balise Description

<table> Définit une table



<th> Définit une cellule d'en-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 d'un élément
<col>
<colgroup>

<thead> Groupes de contenu d'en-tête d'un tableau

<tbody> Groupes du contenu du corps d'un tableau

<tfoot> Groupes du contenu de bas de page dans un tableau



HTML listes

Les listes les plus communs HTML sont ordonnées et non ordonnées listes:

Listes HTML

Liste 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



liste à 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>


•Café
•Lait

liste ordonnée
Une 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>

1.Café
2.Lait

HTML Listes de Définition
Une 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.



La 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>

Café
- Boisson noire chaude
Lait
- Boisson froide blanche

Astuce: L'intérieur d'un élément de la liste, vous pouvez mettre du texte, les sauts de ligne, des images, des liens, des listes d'autres, etc

Liste des étiquettes HTML
Balis
Description
e

<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



<dt> Définit un élément dans une liste de définition

Définit la description d'un élément dans une liste de
<dd>
définitions

HTML <div> et <span>

Les éléments HTML peuvent être regroupés avec <div> et <span>.

Pavés HTML
La 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 l'affichage dans un navigateur.

Exemples: <h1>, <p>, <ul>, <table>

HTML des éléments en ligne
Les éléments en ligne s'affichent sans démarrer une nouvelle ligne.



Exemples: <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 d'autres éléments HTML.

L'élément div n'a aucune signification particulière. Sauf que, parce que c'est un élément de niveau bloc, le navigateur affiche un saut de ligne avant et après.

Lorsqu'il 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 «à l'ancienne» de la définition de mise en page avec des
tableaux. Utilisation des tables n'est pas la bonne utilisation de l'élément <table>. Le but de l'élément <table> est d'afficher 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> n'a aucune signification particulière.

Lorsqu'il 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 HTML
Balise Description

Définit une section dans un document (au niveau du
<div>
bloc)

<span> Définit une section dans un document (en ligne)



HTML Layouts

La mise en page Web est très importante pour que votre site web apparaisse bien.

Concevez très attentivement votre site web .

Layouts Site web
La 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 ou
look coloré pour les pages.



Même s'il 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és
L'élément div est un élément de niveau bloc utilisé pour regrouper les éléments HTML.

L'exemple 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 l'exemple 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>
CSS
JavaScript Le code HTML ci-dessus va produire le résultat suivant:

Main Title de la page Web



Layouts HTML - Utilisation de tableaux
Une façon simple de créer des mises en page est d'utiliser 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 n'est pas la bonne utilisation de l'élément. Le but de l'élément <table> est d'afficher des données
tabulaires!
L'exemple 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 l'attribut colspan:

Exemple
<!DOCTYPE html>
<html>
<body>



<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 Web
Menu
HTML
Contenu va ici
CSS
JavaScript
Droits d'auteur © krymo.fr



Mise en page HTML - Conseils utiles
Astuce: Le plus grand avantage de l'utilisation de CSS, c'est que, si vous placez le code CSS dans une feuille de style externe, votre site devient beaucoup plus
facile à entretenir. Vous pouvez modifier la disposition de toutes vos pages en éditant un seul fichier. Pour en savoir plus sur les CSS, étudier notre tutoriel
CSS .

Astuce: Parce présentations avancées prendre le temps de créer, une option est plus rapide d'utiliser un modèle.Recherche Google pour les modèles de site
Web gratuit (ce sont des dispositions de site Web prédéfinis que vous pouvez utiliser et personnaliser).

Balises de mise en page HTML
Balise Description

<div> Définit une section dans un document (au niveau du bloc)

<span> Définit une section dans un document (en ligne)

HTML Formulaires

Les formulaires HTML sont utilisés pour sélectionner les différents types de saisie de l'utilisateur.

Les formulaires HTML
Les formulaires HTML sont utilisés pour transmettre des données à un serveur.
Un formulaire HTML peut contenir des éléments d'entrée comme les champs de texte, cases à cocher, boutons radio, boutons submit et plus encore. Un
formulaire peut également contenir des listes de sélection, textarea, fieldset, la légende et les éléments d'étiquetage.



La balise form est utilisé pour créer un formulaire HTML:

<form>
.
Éléments d'entrée
.
</form>

Formulaires HTML - l'élément d'entrée
L'é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 l'attribut type. Un élément peut être <input> de champ type texte, case à cocher, mot
de passe, bouton radio, bouton d'envoi, et plus encore.

Les types d'entrée les plus courants sont décrits ci-dessous.

Les champs de texte
<input type="text"> définit un champ d'entrée une ligne de sorte qu'un 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 n'est pas visible. A noter également que la largeur par défaut d'un champ de texte est de 20 caractères.



Champ 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 d'un 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 à l'utilisateur de sélectionner UN SEUL d'un nombre limité de choix:

<form>
<input type="radio" name="sexe" value="homme">Masculin<br>
<input type="radio" name="sexe" value="femme">Féminin
</form>


Masculin
Féminin



Cases à cocher
<input type="checkbox"> définit une case à cocher. Les cases à cocher permettent à l'utilisateur de sélectionner zéro ou plusieurs options d'un nombre limité
de choix.

<form>
<input type="checkbox" name="bicyclette" value="velo">J'ai un vélo<br>
<input type="checkbox" name="vehicule" value="voiture">J'ai une voiture
</form>

Résultat:

J'ai un vélo
J'ai une voiture

Bouton 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 l'attribut action du
formulaire. Le fichier défini dans l'attribut action fait habituellement quelque chose avec les commentaires reçus:

<form name="input" action="html_form_action.asp" method="get">
Nom d'utilisateur: <input type="text" name="user">
<input type="submit" value="Soumettre">
</form>


Soumettre
Nom d'utilisateur:
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 page
appelée "html_form_action.asp". La page va vous montrer les commentaires reçus.



Mots clés formulaire HTML
Nouveau : De nouvelles étiquettes en HTML5.

Balise Description

<form> Définit un formulaire HTML pour la saisie utilisateur

<input> Définit un contrôle d'entré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 d'options 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
d'entré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 d'un calcul



HTML Iframe

Une iframe est utilisée pour afficher une page Web dans une autre page web.

Syntaxe pour ajouter une iframe:

<iframe src="URL"></iframe>

L'URL pointe vers l'emplacement de la page.

Iframe – Hauteur et largeur
Les attributs height et width sont utilisés pour spécifier la hauteur et la largeur de l'iframe.



Les 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 bordure
L'attribut frameborder spécifie s'il faut ou non afficher une bordure autour de l'iframe.

Réglez la valeur de l'attribut à "0" pour supprimer la bordure:

Exemple
<iframe src="demo_iframe.htm" frameborder="0"></iframe>

Utilisez iframe comme une cible pour un lien
Une iframe peut être utilisé en tant que trame cible pour un lien.

L'attribut target d'un lien doit faire référence à l'attribut 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>



HTML balise iframe
Balise Description

Définit un cadre en
<iframe>
ligne

HTML Couleurs

Les couleurs sont affichées combinant ROUGE, VERT, BLEU et de la lumière.

Les valeurs des couleurs
Couleurs 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 à l'une des sources lumineuses est 0 (en hexadécimal: 00). La valeur la plus élevée est de 255 (en hexadécimal:
FF).



Valeurs HEX sont spécifiés comme 3 paires de nombres à deux chiffres, en commençant par un signe #.

Les valeurs des couleurs

Couleur 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érentes
La 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 l'une des valeurs RGB HEX ou ci-dessous.



Red 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)



# 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)



Couleurs grises
Couleurs 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:

HEX
Nuances 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)



# 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)



# E8E8E8 rgb (232,232,232)

# F0F0F0 rgb (240,240,240)

# F8F8F8 rgb (248,248,248)

# FFFFFF rgb (255,255,255)

Historique
Il 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 un
standard 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 l'exécution
d'une palette de 256 couleurs.

Ce n'est pas important aujourd'hui, car la plupart des ordinateurs peuvent afficher des millions de couleurs différentes. Quoi qu'il 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



660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF



HTML Scripts

JavaScripts 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 qu'un JavaScript.

L'élément <script> contient soit des déclarations de script ou elle pointe vers un fichier de script externe via l'attribut src.

L'attribut type requis spécifie le type MIME du script.

Les utilisations communes pour JavaScript sont la manipulation d'images, la validation du formulaire, et les changements dynamiques de contenu.

Le script ci-dessous, écrit Bonjour tout le monde! à la sortie HTML:



Exemple
<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 ne
supporte pas les scripts côté client.

L'élément <noscript> peut contenir tous les éléments que vous pouvez trouver à l'intérieur de l'élément body d'une 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 l'utilisateur:

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>");



JavaScript 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 HTML
Balise 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



HTML entités

Caractères réservés dans HTML doit être remplacé par les entités de caractères.

Les entités HTML
Certains caractères sont réservés en HTML.

Il n'est pas possible d'utiliser 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:



&entity_name;
OR
&#entity_number;

Pour afficher un signe inférieur il faut écrire: < ou <

Astuce: L'avantage d'utiliser un nom d'entité, au lieu d'un nombre, c'est que le nom est facile à retenir.Cependant, l'inconvénient est que les navigateurs ne
supportent pas tous les noms d'entité (le support pour les numéros entité est très bon).

Espace insécable
Une entité de caractère commun utilisé en HTML est l'espace 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 d'entre eux,
avant d'afficher la page. Pour ajouter un espace pour votre texte, vous pouvez utiliser l'entité de caractère.

HTML Entités de caractères utiles
Remarque: les noms d'entités sont sensibles à la casse!

Nom de Numéro de
Résulter Description
l'entité l'entité

espace
   
insécable

< moins que < <

> supérieure à > >



& esperluette & &

¢ centime ¢ ¢

£ livre £ £

¥ yen ¥ ¥

€ euro € €

§ section § §

© droit d'auteur © ©

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 ressources

Une 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 gens
entre le nom du site lors de la navigation, car les noms sont plus faciles à mémoriser que des chiffres.



URL - Uniform Resource Locator
Les Navigateurs Web demandent des pages de serveurs Web à l'aide d'une 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 d'autres 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/filename

Explication:

•schéma - définit le type de service Internet. Le type le plus commun est http
•accueil - définit l' hôte de domaine (l'hôte par défaut pour HTTP est www )
•domaine - définit l'Internet nom de domaine , comme krymo.fr
•: Port - définit le numéro de port sur l'hôte (le numéro de port par défaut pour HTTP est 80 )
•chemin - définit un chemin d'accès au serveur (S'il est omis, le document doit être stocké dans le répertoire racine du site web)
•nom de fichier - définit le nom d'un document / ressource

URL Schémas communs
Le 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



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 ordinateur

Encodage URL
URL 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, l'URL doit être converti dans un format ASCII valide.

Encodage d'URL 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 d'espaces. Encodage URL remplace normalement un espace avec un signe +.

Exemples d'encodage URL
Caractèr Site de
e codage

€ 80%

£ A3%

© % A9

® AE%



À % C0

Á % C1

Â % C2

Ã C3%

Ä C4%

Å C5%

Pour une référence complète de tous les encodages URL, visitez notre référence d'encodage URL .

HTML Liste rapide



HTML Document de base
<! DOCTYPE html>
<html>
<head>
<title> Titre du document </ title>
</ head>
<body>
texte visible voilà ...
</ body>

</ Html>

Basic Mots clés
Le 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 une
autre source) <cite> (titre d'un ouvrage) <del> (texte supprimé)<ins> (texte inséré) <sub> (texte en indice) <sup> (texte en exposant)

Liens
Lien 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>



Marque 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
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>



<dd> Décrivez point 2 </ dd>
</ dl>

Tableaux
<table border="1">
<tr>
<th> tête de tableau </ th>
en-tête de table <th> </ th>
</ tr>
<tr>
données de table <td> </ td>
données de la table <td> </ td>
</ tr>
</ table>

Iframe
<iframe src="demo_iframe.htm"> </ iframe>

Formes
<form action="demo_form.asp" method="post/get">

<input type="text" size="40" name="email" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type = "radio "checked =" checked ">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option> pommes </ option>
<option sélectionnée = "selected"> Bananes </ option>
<option> Cerises </ option>
</ select>

<textarea name="comment" rows="60" cols="20"> </ textarea> </ form>



Entités
<Est la même que <
> est la même que>
© est la même que ©

Vous avez appris le HTML, Que vous reste t-il ?

Résumé HTML
Ce didacticiel vous a appris à utiliser le langage HTML pour créer votre propre site web.

HTML est le langage de balisage universel pour le Web. HTML vous permet de formater du texte, ajouter des graphiques, créer des liens, des formulaires de
saisie, cadres et tableaux, etc, et enregistrer le tout dans un fichier texte que n'importe quel navigateur peut lire et afficher.

La clé de HTML est les étiquettes, ce qui indique que le contenu est à venir.

Pour plus d'informations sur le langage HTML, s'il vous plaît jeter un oeil à nos exemples HTML et notre référence HTML .

Connaître HTML, et ensuite?



Apprendre CSS
CSS est utilisé pour contrôler le style et la présentation de plusieurs pages Web en même temps.

Avec CSS, le formatage peut être supprimé du document HTML et stockés dans un fichier séparé.

CSS vous donne un contrôle total de la mise en page, sans gâcher le contenu du document.

Pour savoir comment créer des feuilles de style, s'il vous plaît visitez notre tutoriel CSS .

En savoir JavaScript
JavaScript peut rendre votre site web plus dynamique.

Un site web statique est agréable quand vous voulez juste pour montrer le contenu à plat, mais un site web dynamique peut réagir aux événements et
permettre une interaction de l'utilisateur.

JavaScript est le langage de script le plus populaire sur l'Internet et il fonctionne avec tous les principaux navigateurs.

Si vous voulez en savoir plus sur JavaScript, s'il vous plaît visitez notre tutoriel JavaScript .

Hébergement de votre propre site Web
Hébergement de votre site sur votre propre serveur est toujours une option. Voici quelques points à considérer:

Dépenses matérielles
Pour exécuter un site «réel» Web, vous devrez acheter un peu de matériel serveur puissant. Ne pas s'attendre à ce que d'un PC à faible coût va faire le
travail. Vous aurez également besoin d'un permanent (24 heures par jour) à haute vitesse de connexion.

Dépenses logiciels
Rappelez-vous que le serveur-licences sont souvent plus élevés que les clients des licences. A noter également que serveur-licences pourrait avoir des limites
sur le nombre d'utilisateurs.



Dépenses de main-d'œuvre
Ne vous attendez pas les frais de main-d'œuvre peu élevés. Vous devez installer votre propre matériel et logiciel.Vous devez également faire face à des bugs et
les virus, et de garder votre serveur en permanence en cours d'exécution dans un environnement où «tout peut arriver».

L'utilisation d'un fournisseur de services Internet
La location d'un serveur d'un fournisseur de services Internet (ISP) est une option courante.

La plupart des entreprises petites stocker leur site web sur un serveur fourni par un FAI. Voici quelques avantages:

Vitesse de connexion
La plupart des FAI ont des connexions très rapides à l'Internet.

Puissant hardware
FAI ont souvent des serveurs Web puissantes qui peuvent être partagés par plusieurs entreprises. Vous pouvez également attendre d'eux d'avoir un équilibrage
de charge efficace, et les serveurs de sauvegarde nécessaires.

Sécurité et la stabilité
Les FSI sont des spécialistes de l'hébergement web. Attendez-vous à avoir leurs serveurs à plus de 99% du temps, les derniers correctifs logiciels, et la
meilleure protection antivirus.

Points à considérer avec un FAI

24 heures de soutien
Assurez-vous que votre FAI vous offre 24 heures de soutien. Ne vous mettez pas dans une situation où vous ne pouvez pas résoudre les problèmes critiques
sans avoir à attendre jusqu'à ce que le jour ouvrable suivant.Téléphone sans frais pourrait être vital si vous ne voulez pas payer pour les appels interurbains.



Sauvegarde quotidienne
Assurez-vous que votre FAI gère une routine de sauvegarde quotidienne, sinon vous risquez de perdre des données précieuses.

Volume du trafic
Étude des restrictions de l'ISP volume du trafic. Assurez-vous que vous n'avez pas à payer une fortune pour le trafic élevé inattendu si votre site devient
populaire.

Restrictions de bande passante ou de contenu
Étudier la bande passante de votre FAI et les restrictions de contenu. Si vous envisagez de publier ou de diffuser des images vidéo ou audio, assurez-vous que
vous pouvez.

E-mail Capacités
Assurez-vous que votre fournisseur d'accès prend en charge les fonctionnalités e-mail dont vous avez besoin.

Base de données Access
Si vous prévoyez d'utiliser des données provenant de bases de données sur votre site Web, assurez-vous que votre fournisseur de services Internet prend en
charge l'accès base de données dont vous avez besoin.

Avant de choisir un fournisseur d'accès Internet, assurez-vous de lire W3Schools Tutoriel d'hébergement Web .

HTML - XHTML

XHTML est HTML écrite en XML.

Qu'est-ce que XHTML?
•XHTML est synonyme de E X tensible H yperText M arkup L angue



•XHTML est presque identique à HTML 4.01
•XHTML est une version plus stricte et plus propre de HTML 4.01
•XHTML est défini HTML comme une application XML
•XHTML est supporté par tous les navigateurs principaux.

Pourquoi XHTML?
De nombreuses pages sur Internet contiennent des «mauvais» HTML.

Le code HTML suivant fonctionnera correctement si vous l'affichez dans un navigateur (même si elle ne suit pas les règles HTML):

<html>
<head>
<title>Ceci est un mauvais HTML</title>
<body>
<h1>Mauvais HTML
</body>

XML est un langage de balisage où les documents doivent être marqués correctement et «bien formé».

Si vous voulez étudier XML, s'il vous plaît lire notre tutoriel XML .

Aujourd'hui, le marché se compose de différentes technologies de navigation. Certains navigateurs exécutés sur les ordinateurs, et certains navigateurs
fonctionner sur les téléphones portables ou autres petits appareils. Des appareils plus souvent n'ont pas les ressources ou le pouvoir d'interpréter un langage
de «mauvais» balisage.

Par conséquent - en combinant les forces de HTML et XML, XHTML a été développé. XHTML est redessiné HTML en XML.

Les différences les plus importantes du HTML:

Structure du document
•XHTML DOCTYPE est obligatoire
•L'attribut namespace XML dans <html> est obligatoire
•<html>, <head>, <title> et <body> est obligatoire



Éléments XHTML
•Éléments XHTML doivent être correctement imbriqués
•Éléments XHTML doivent toujours être fermés
•Éléments XHTML doivent être en minuscules
•Les documents XHTML doivent avoir un élément racine

Attributs XHTML
•Les noms des attributs doivent être en minuscules
•Les valeurs des attributs doivent être cité
•Minimisation attribut est interdit

<! DOCTYPE ....> Est obligatoire
Un document XHTML doit avoir une déclaration DOCTYPE XHTML.

Une liste complète de tous les Doctypes XHTML se trouve dans notre Référence Balises HTML.

Le <html>, <head>, <title>, et les éléments <body> doit également être présent, et l'attribut xmlns dans <html>, doit spécifier l'espace de noms XML pour le
document.

L'exemple ci-dessous montre un document XHTML avec un minimum de balises requises:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.k3.fr/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.k3.fr/1999/xhtml">

<head>
<title>Titre du document</title>
</head>

<body>



......
</body>

</html>

Éléments XHTML doivent être correctement imbriquées
En HTML, certains éléments peuvent être incorrectement imbriquées les unes dans les autres, comme ceci:

<b><i>Ce texte est gras et italique</b></i>

En XHTML, tous les éléments doivent être correctement imbriqués les uns dans les autres, comme ceci:

<b><i>Ce texte est gras et italique</i></b>

Éléments XHTML doivent toujours être fermés
Ceci est faux:

<p>Ceci est un autre paragraphe

Ceci est correct:

<p>Ceci est un autre paragraphe</p>



Les éléments vides doivent également être fermées
Ceci est faux:

un saut: <br>
une horizontale: <hr>
une image: <img src="happy.gif" alt="Happy face">

Ceci est correct:

un saut: <br />
une horizontale: <hr />
une image: <img src="happy.gif" alt="Happy face" />

Les éléments XHTML doivent être en minuscules
Ceci est faux:

<BODY>
<P>Ceci est un paragraphe</P>
</BODY>

Ceci est correct:

<body>
</body>

Les noms d'attributs doivent être en minuscules
Ceci est faux:

<table WIDTH="100%">



Ceci est correct:

<table width="100%">

Les valeurs d'attributs doivent être indiqués
Ceci est faux:

<table width=100%>

Ceci est correct:

<table width="100%">

Minimisation attribut interdite
Ceci est faux:

<input checked>
<input readonly>
<input disabled>
<option selected>

Ceci est correct:

<input checked="checked">
<input readonly="readonly">
<input disabled="disabled">
<option selected="selected">



Comment faire pour convertir du HTML en XHTML ?
1.Ajouter un XHTML <! DOCTYPE> pour la première ligne de chaque page
2.Ajouter un attribut xmlns à l'élément html de chaque page
3.Changer tous les noms d'éléments en minuscules
4.Fermer tous les éléments vides
5.Changer tous les noms d'attributs en minuscules
6.Citer toutes les valeurs d'attribut


Html de base

Contenu connexe

Tendances

En vedette

Similaire à Html de base

Html de base