Tutoriel HTML : Introduction et Éléments
Traduit par
ScribdTranslationsTutoriel HTML : Introduction et Éléments
Traduit par
ScribdTranslations15-7-2012
CHALOO TUTORIEL DE HTML
HTML DE BASE|Carlos
Tutoriel HTML
Année de l'Intégration Nationale et de la Reconnaissance de Notre
Diversité
Travail de recherche : 1
TUTORIEL HTML
Autor:CHATA YAURI, CARLOS
Tutoriel HTML
Introduction au HTML
Que signifie HTML ? Et un premier exemple de ce manuel.
2
¿Qué son los archivos HTML?
HTML (Langage de balisage hypertexte) ou "Langage pour le balisage de
Hipertexte
Les fichiers HTML doivent avoir une extension htmohtml.
Pour créer un fichier HTML, il suffit d'un éditeur de texte.
Un archivoHTMLestá compuesto poretiquetas.
Les étiquettes informent le navigateur (ex : Internet Explorer, Firefox,
Mozilla, etc.) comment afficher la page.
Faisons un petit essai !
Si vous utilisez Windows, ouvrez le "Bloc-notes".
Si vous utilisez un Mac, ouvrez "Simpletext".
Escribe en el mismo, el siguiente texto:
Garde le fichier sous le nom "[Link]" (les extensions ".htm" ou ".html")
ils ont la même signification et nous indiquent qu'il s'agit d'un fichier HTML).
Ouvre le navigateur Internet (Internet Explorer, Firefox, Opera, etc.).
Sélectionnez "Fichier" puis "Ouvrir".
Une fenêtre s'ouvrira, sélectionnez "Parcourir" et localisez le fichier que
vous venez de sauvegarder -"[Link]"- sélectionnez-le et appuyez sur "Ouvrir".
Maintenant tu vois l'adresse, par exemple "C:\Mon
Documents\[Link]". Appuyez sur "OK" et le navigateur affichera la
page.
Tutoriel HTML
Expliquons l'exemple
La première balise du fichier est <html>. Cela indique au navigateur que se
il s'agit d'un fichier HTML. Pour fermer le fichier, nous utilisons </html>. Tout ce que
se trouve entre les deux balises est le code HTML de la page.
Puis nous voyons l'étiquette <head>. Ce qui suit jusqu'à sa fermeture
</head>, c'est l'en-tête du document et ne s'affiche pas à l'écran. Ici
nous mettons des informations telles que le titre de la page (<title>Ma première
page Web</title>), mots clés pour les moteurs de recherche, une
description de la page et autres données du document.
Entre les balises <body> et </body>, se trouve le corps du document
et le contenu qui sera placé dans cette section est celui que nous verrons à l'écran,
Bonjour à tous.
Remarque : observez que toutes les balises de fermeture se distinguent de celles de
ouverture en mettant '/' avant le nom.
Tutoriel HTML
Éléments et balises HTML
Les balises HTML sont responsables de la structure de notre site.
4
Quels sont les éléments et les balises HTML ?
Les éléments sont des déclarations pour visualiser ou donner forme à une page
Web
Les balises (en anglais : tags) sont des marques insérées dans un document HTML
pour fournir des informations sur une unité ou un contenu.
Règles de base
Les balises sont entourées par les signes "<" et ">".
Généralement, ils viennent par paires <p> et <⁄p>.
La première est d'ouverture et la seconde de fermeture.
El texto que se encuentra entre dos etiquetas es el contenido del
élément.
Les étiquettes ne sont pas sensibles à la casse, c'est-à-dire
<b> c'est la même chose que <B>.
Étiquettes HTML
Voyons un exemple.
Ceci est une étiquette HTML :
Tutoriel HTML
L'élément HTML commence par la balise d'ouverture <b> (balise qui nous
montrez le texte en gras).
El contenido de dicho elemento es: Este texto es en negrita.
La fin de l'élément HTML se fait avec la balise de fermeture </b>.
Un autre élément HTML dans l'exemple est :
L'élément HTML commence par la balise d'ouverture <body>(balise qui 5
définir le corps du document).
Le contenu de cet élément est : Bonjour à tous. <b>Ce texte est en
negrita</b>.
La fin de l'élément HTML se fait avec la balise de fermeture </body>.
¿Qué son los atributos de las etiquetas?
De nombreuses balises ont des attributs. Celles-ci fournissent plus d'informations.
aux éléments HTML.
Les attributs sont toujours associés à la structure : nom="valeur".
Les attributs vont toujours dans la balise d'ouverture.
Les valeurs doivent toujours être mises entre guillemets.
Un exemple des attributs serait :
Un conseil concernant l'utilisation des minuscules.
Si bien HTML accepte à la fois des balises en majuscules <B> et en minuscules
<b>le Consortium World Wide Web (W3C)recommande l'utilisation de minuscules.
De plus, XHTML (la version suivante de HTML) n'accepte que les minuscules.
C'est pourquoi nous recommandons de s'habituer à utiliser des minuscules lorsque
écrivez vos codes HTML.
Tutoriel HTML
Étiquettes de base HTML
Les balises les plus simples et les plus couramment utilisées en HTML.
Titres
6
Ils définissent la taille d'un titre ou d'un en-tête.
<h1> nous donne le plus grand type de lettre.
<h6> nous donne le type de lettre le plus petit.
HTML ajoute automatiquement un espace avant et après chaque titre.
<h1> étant utilisé comme titre d'une page Web, il est de la plus haute importance car
qu'est-ce qu'un des paramètres que Google prend en compte lors de l'indexation
son site.
Paragraphes
Les paragraphes sont définis avec la balise <p>.
Tutoriel HTML
Comentarios
La balise <!-- ... --> est utilisée pour insérer un commentaire dans le code
que nous écrivons. Celui-ci est ignoré par le navigateur au moment
de le lire. Les commentaires nous servent à mieux expliquer le code et sont de
une grande aide au moment où nous en aurons besoin pour l'éditer.
* Notez que le point d'exclamation se place uniquement au début du code.
Saut de ligne
Le saut de ligne est défini par la balise<br>. Il est utilisé lorsque
nous voulons terminer une ligne sans avoir besoin de terminer le paragraphe. La
étiquette<br>oblige à sauter à la ligne où que nous la placions.
Tracer une ligne
La balise <hr> nous permet de tracer une ligne horizontale comme celles qui séparent
les différentes sections de ce tutoriel.
La balise <hr> n'a pas de fermeture.
Tutoriel de HTML
Table avec les étiquettes de base
8
Tutoriel HTML
Format de texte avec HTML
Choisissez comment décorer et visualiser les textes de votre site.
Formato básico del texto
HTML nous permet de définir le format d'affichage du texte à l'écran.
Très utile lorsque nous voulons souligner ou mettre en avant un texte en particulier.
Aussi très utilisé pour souligner ou écrire des indices ou des exposants.
Ce ne sont là que quelques exemples de ce que nous pouvons faire avec ces éléments
Pour cela, nous utilisons les étiquettes suivantes :
Tutoriel HTML
Étiquettes pour donner forme au texte
10
Étiquettes de "Texte structuré"
Ces étiquettes sont couramment utilisées pour afficher des codes de
programmation.
Étiquettes de citations et définitions
Tutoriel HTML
Caractères spéciaux en HTML
Utilisation des accents, des signes d'ouverture de question et d'exclamation, des eñes, espace
en blanc, etc.
11
Caractères spéciaux
Souvent, nous devons inclure dans nos textes des signes qui ont un
significado especial en HTML (por ej. "<" - menor que).Para poder mostrarlos
Nous devons utiliser son nom de code.
Les noms des entités sont composés du signe (&), puis le
nom de l'entité et à la fin (« ; » - point-virgule). Les nombres de ces
les caractères sont composés par (&), puis (#- numéro), le numéro de la
entité et à la fin (';' - point-virgule).
Par exemple, pour afficher le signe "<" nous devons écrire <o<.
L'utilisation la plus courante des caractères spéciaux est l'espace blanc. Si dans
un texte figure 5 espaces vides consécutifs, HTML les efface automatiquement
4. Pour insérer des espaces vides, nous utilisons " " et HTML les laissera dans son
lieu.
Une autre utilisation très courante consiste à insérer des accents dans le code html par le biais de
des numéros des entités
Tutoriel HTML
Caractères spéciaux d'usage fréquent
12
Tutoriel HTML
Liens en HTML
La propriété la plus importante d'Internet est la possibilité de se connecter les uns aux autres.
con los otros.
13
Que sont les liens ou links ?
Les liens ou liens (en anglais) nous permettent de nous connecter avec d'autres
documentos:
une image
une vidéo
un fichier audio
sites sur le web (un autre site web)
envoyer un email
Pour cela, nous devons utiliser la balise <a> qui provient de la première lettre de la
ancre
La balise <a> a une fermeture </a>.
Veamos un ejemplo
Nous allons créer un lien vers la page d'accueil de [Link]
La balise <a> nous indique qu'il s'agit d'un lien.
L'attributhref="[Link] l'adresse
où nous nous connecterons. Le texteLa home de Virtualnautaest celui qui
apparaîtra à l'écran.
La balise</a>est la balise de fermeture.
Tutoriel HTML
L'attribut target
Il est utilisé pour définir où nous voulons que le document s'ouvre en appuyant sur
sur le lien.
L'exemple ci-dessous ouvrira le document dans une nouvelle page du navigateur.
14
L'attribut name
Cet attribut est utilisé pour définir un emplacement déterminé à l'intérieur de la
page.
Supposons que nous définissons une destination de lien appelée "destination-un" dans le
fichier "[Link]".
Cela crée une destination de lien autour du texte : Chapitre 1.
Une fois la destination définie, nous pouvons créer un lien vers elle depuis celle-ci.
documento ou depuis un autre différent, en utilisant un caractère "#" suivi de la
nom de l'élément.
Par exemple :
Ou dans le cas où le lien est défini dans le même document :
Création d'un lien vers un e-mail
Il est utilisé dans le cas où nous voulons qu'un lien envoie un email.
Au moment où nous cliquons sur ce lien, il s'ouvrira automatiquement.
programme de messagerie que nous avons défini par défaut.
Tutoriel HTML
[Link] indique l'adresse email à laquelle il est destiné, dans cet exemple :
alguien@[Link].
15
Un lien à partir d'une image
Souvent, nous voulons utiliser une image comme lien vers un autre document. Pour
hello nous devons placer la balise <img> entre les balises <a> et </a> dans
lieu du texte.
Étiquettes et attributs des liens
Tutorial de HTML
16
Tutoriel HTML
17
Attributs standards
Si vous souhaitez une description complète, dirigez-vous vers : attributs standard.
Événements intrinsèques
Tutorial de HTML
Cadres en HTML
Nous avons divisé la page en parties plus petites et dans chacune d'elles, nous visualisons
documents différents.
18
Que sont les frames ?
Les cadres (frames en espagnol) permettent aux auteurs de présenter des documents
avec des vues multiples.
Cela permet de garder certaines informations visibles pendant que d'autres vues se
se déplacent ou sont remplacés.
Chaque vue est un document indépendant des autres.
La balise framese
L'étiquette <frameset> est utilisée pour diviser la fenêtre du navigateur en
différents cadres qui peuvent être de différentes tailles.
Chaque frameset définit un groupe de rangées et de colonnes.
L'étiquette cadre
La balise <frame> définit quel document nous placerons dans chaque cadre.
Dans cet exemple, nous divisons l'écran en une colonne de 25 % et une autre de 75 %.
La première colonne contient le document "[Link]" et la deuxième
columna le document "[Link]". La balise <frame> ne doit pas porter
étiquette de fermeture.
Tutoriel HTML
La balise noframes
La balise <noframes> affiche un texte pour les navigateurs qui ne
cadres supportant.
<noframes> se place à l'intérieur de la balise frameset
si le navigateur prend en charge les cadres, le texte du <noframes> ne se
montrera
si nous utilisons la balise <noframes>, le texte doit être entre les balises
<body> </body>
19
La balise iframe
La balise <iframe> est utilisée pour créer une frame en ligne qui contient
un autre document.
C'est-à-dire que je peux afficher une fenêtre qui contient une autre page Web
dans la page que nous concevons
Dans cet exemple, nous pouvons observer que la fenêtre du résultat nous est
affichant la page d'accueil de [Link].
Tutoriel HTML
Etiquetas y atributos de los marcos
20
Tutoriel HTML
21
Attributs standard
Événements intrinsèques
Tutoriel HTML
Tableaux HTML
Nous les utilisons pour composer un site ou simplement comme tableau de données.
Qu'est-ce que les tables HTML ?
22
Les tableaux sont un outil très utile pour présenter des données tabulaires et pour la conception de
texte et graphiques d'une page HTML.
Caractéristiques des tables
Nous définissons les tableaux avec l'étiquette <table>.
Le tableau est divisé en lignes définies avec l'étiquette <tr>.
Y a su vez chaque ligne divisée en cellules définies avec l'étiquette <td>.
Les cellules peuvent contenir du texte, des images, des formulaires, des listes, d'autres
tableaux, etc.
Bordures des tables
Pour que les bordures d'un tableau soient visibles, nous devons ajouter l'attribut
bordure ainsi que la valeur exprimée en pixels, sinon elles ne seront pas visibles
les bordures qui séparent les cellules du tableau.
Tutoriel HTML
Voyons un exemple sans bordures :
23
Remarque : en ne plaçant pas l'attribut border, les bordures ne s'affichent pas mais la
table existe.
En-têtes des tableaux
Les en-têtes d'un tableau sont définis avec la balise <th>.
La balise <th> affiche toujours les en-têtes en surbrillance.
Marges des cellules
Es el espacio que se encuentra entre los bordes de la celda y su contenido.
Nous définissons les marges avec l'attribut cellpadding.
Tutoriel HTML
24
Remarque : dans cet exemple, nous pouvons observer que l'attribut cellpadding laisse 20
pixels minimum entre les mots à l'intérieur de chaque cellule et les bords de la
les mêmes.
Espacement entre les cellules
C'est l'espace qui se trouve entre les cellules.
Il est défini avec l'attribut cellspacing.
Tutoriel HTML
Étiquettes et attributs des tableaux
25
Tutoriel HTML
26
Tutoriel HTML
27
Tutoriel HTML
28
Tutoriel HTML
Listas - Listados
Las listas son ideales para el diseño de menús.
Qu'est-ce que les listes HTML ?
29
Les listes nous permettent d'organiser ou d'énumérer des données ou des éléments pour faciliter leur
lecture.
Nous avons trois types de listes :
Ordonnées.
Désordonnées.
De définition.
Listes Ordonnées
Ce sont celles qui ordonnent la liste en plaçant des numéros, des lettres ou des signes devant.
Les listes ordonnées commencent par la balise <ol> et pour chacune des
éléments de la même, nous utilisons l'étiquette <li>.
Listes désordonnées
Exposez la liste en préfixant un point, un carré ou un triangle noir.
Les listes non ordonnées commencent par la balise <ul> et pour chacun de
Pour les éléments, nous utilisons l'étiquette <li>.
Tutoriel HTML
Listes de définition 30
Ils sont utilisés pour définir des termes.
Les listes de définition sont représentées par l'étiquette <dl>.
Les termes de celles-ci avec<dt>.
La définition de ces termes commence par<dd>.
Tutoriel HTML
Étiquettes et attributs des listes
31
Tutoriel HTML
Formulaires en HTML
Guide pratique sur la façon de concevoir les formulaires HTML pour votre site.
À quoi servent les formulaires ? 32
Les formulaires sont utilisés pour que l'utilisateur saisisse des données.
Ces données sont envoyées à un agent pour qu'il les traite (par exemple, à un
serveur web, à un serveur de mail, etc.).
L'étiquette de formulaire
Dentro de la balise <form> se trouve le formulaire.
Les utilisateurs interagissent avec les formulaires à travers ce qu'on appelle
contrôles.
Types de contrôles :
Boutons
Cases à cocher
Radiobotones (cases d'option)
Menus
Entrée de texte
Sélection de fichiers
Contrôles cachés
Contrôles de type objet
Dans l'étiquette <form>, se trouve l'attribut action. Celui-ci nous
il spécifiera le document qui gérera le formulaire complété et envoyé.
Nous disposons également de l'attribut method. Ce dernier définit la méthode par
lequel les données de l'utilisateur seront envoyées au serveur.
La balise input
Nos définit l'enregistrement où l'utilisateur peut saisir les données.
L'attributotypeespecific indique le type de contrôle à créer.
Parmi eux se trouvent les valeurs suivantes :
Texte
Créez un contrôle qui nous permet d'entrer un texte sur une ligne.
Tutoriel HTML
33
Remarque : dans cet exemple, nous pouvons observer ce qui suit :
action="[Link]"--> nous indique que le fichier [Link] est le
chargé de manipuler les données que l'utilisateur a saisies dans le formulaire
method="get"--> nous indique que les données du formulaire seront envoyées
par leméthode get
name="nombre"--> lui assigne un nom à l'élément qui ensuite
peut être utilisé dans des scripts ou dans des feuilles de style
Boutons radio
Se usan cuando queremos que el usuario elija una sola opción de entre una
série de possibilités.
Remarque : dans cet exemple, nous pouvons observer ce qui suit :
action="[Link]"--> nous indique que le fichier [Link] est le
chargé de manipuler les données que l'utilisateur a saisies dans le formulaire
method="post"--> nous indique que les données du formulaire seront envoyées
par leméthode post
nous devons utiliser le même nom (dans ce cas
"âge") pour tous les éléments du même contrôle radio.
value="mayor"--> define el valor del elemento<input>
Tutoriel de HTML
Case à cocher
Permet à l'utilisateur de choisir plusieurs options parmi toutes les possibilités.
34
Remarque : dans cet exemple, nous pouvons observer ce qui suit :
action="[Link]"--> nous indique que le fichier [Link] est le
chargé de manipuler les données que l'utilisateur a saisies dans le formulaire
method="get"--> nous indique que les données du formulaire seront envoyées
par leméthode get
nom="pasa"--> nous devons utiliser le même nom (dans ce cas)
"pasa") pour tous les éléments du même contrôle checkbox.
value="tv"--> define el valor del elemento<input>
Mot de passe
Fonctionne de la même manière que le texte, mais le texte saisi est présenté par une
série d'astérisques. Il est généralement utilisé pour entrer des mots de passe.
Soumettre
Bouton d'envoi des données du formulaire.
Réinitialiser
Bouton de réinitialisation. En étant pressé, il réinitialise tous les contrôles à leurs
valeurs initiales.
Tutoriel HTML
35
Remarque : dans cet exemple, nous pouvons observer ce qui suit :
action="datos_personales.php"--> nous indique que le fichier
datos_personales.php est responsable de manipuler les données que le
l'utilisateur a rempli le formulaire
method="post" --> nous indique que les données du formulaire seront envoyées
par leméthode POST
name="nom" - name="secret"--> attribue un nom au
élément qui peut ensuite être utilisé dans des scripts ou des feuilles de style
value="Enviar"--> define el texto del botón"submit"
value="Borrar"--> define el texto del botón"reset"
Les balises select et option
La balise <select> est utilisée pour créer un menu déroulant.
Chaque option proposée par le menu est représentée par l'étiquette <option>
Remarque : dans cet exemple, nous pouvons observer ce qui suit :
Tutoriel de HTML
action="[Link]"--> nous indique que le fichier
[Link] est chargé de manipuler les données que l'utilisateur
a été saisi dans le formulaire
method="get"--> nous indique que les données du formulaire seront envoyées
par leméthode get
name="continente"--> lui attribue un nom unique au menu
dépliant
value="america"--> define el valor del elemento<option>
La balise textarea
36
Il est utilisé pour créer un contrôle d'entrée de texte multiligne.
Les attributs rows et cols indiquent le nombre de lignes et de colonnes que
il aura le cadre de la zone de texte.
Remarque : dans cet exemple, nous pouvons observer ce qui suit :
action="[Link]"--> nous indique que le fichier [Link] est le
responsable de manipuler les données que l'utilisateur a saisies dans le formulaire
method="post"--> nous indique que les données du formulaire seront envoyées
par leméthode post
name="eltexto"--> le asigna un nombre al elementotextarea
Tutoriel HTML
Étiquettes et attributs des formulaires
37
Tutoriel HTML
38
Tutoriel HTML
39
Tutoriel de HTML
40
Tutoriel HTML
Images en HTML
Les images, graphiques et photos donnent vie et couleur aux pages web.
Comment insérer des images dans un fichier HTML ? 41
Pour insérer des images sur un site, nous utiliserons la balise <img>.
Cette étiquette est vide, c'est-à-dire que nous devons l'utiliser avec l'attribut src pour
que montre l'image. La balise <img> n'a pas de fermeture.
Voyons un exemple
Si nous devons insérer une image qui porte le nom de fichier
"[Link]" et qui est situé dans le répertoire
[Link]/imagenes/, alors ce serait la façon d'écrire le
code :
Remarque : l'attribut <img> insère l'image via l'attribut src.
[Link] située à l'adresse "[Link]/imagenes/"
Texte alternatif de l'image
On l'utilise couramment lorsque nous souhaitons visualiser un texte explicatif d'une
image.
Ce texte apparaît en passant le curseur sur l'image ou dans de nombreux cas
quand le navigateur, pour une raison quelconque, ne visualise pas les images et dans son
placer ce texte alternatif dans une boîte.
Pour cela, nous allons utiliser l'attribut alt.
Tutoriel HTML
Étiquettes et attributs des images 42
Tutoriel HTML
43
Tutorial de HTML
Fonds d'écran
C'est le fond de toute page web.
L'attribut background
Si nous voulons concevoir des sites plus attrayants, nous devons utiliser des images ou des couleurs.
44
pour le fond de nos pages.
Le fond se définit dans la balise <body>.
Para insertar una imagen de fondo debemos utilizar el atributo background
dans la balise <body>.
La valeur de cet attribut est l'URL de l'image que nous souhaitons placer.
Si l'image est plus petite que l'écran du navigateur, elle sera répétée
autant de fois que nécessaire jusqu'à couvrir tout l'écran.
Exemples
L'attribut bgcolor
L'attributbgcolorespecific définit la couleur de fond d'une page HTML. La valeur
de la même manière peut s'exprimer avec un nombre hexadécimal, une valeur RVB, ou
name of color (in English).
Cet attribut doit également être inclus dans la balise <body>
Ejemplos
Important !
Les attributs background et bgcolor sont approuvés dans la dernière
version HTML (HTML4 et XHTML).
À la place, nous devons utiliserles propriétés de fond de CSSpour écrire un
code correct de notre site.
Tutoriel HTML
INFORMACIÓN ADICIONAL:
Les marques ou étiquettes
Les parties de l'étiquette qui sont entre "[]" sont optionnelles. Une étiquette
il va toujours entre "<...>". Il peut éventuellement avoir un ensemble de
attributs et valeurs. Certains attributs n'ont pas de valeur associée ; à ceux-ci
les attributs sont généralement appelés compacts. En cas d'avoir une valeur
associé, la valeur de l'attribut doit être entre guillemets. Le contenu de la
Une étiquette peut être du texte ou d'autres étiquettes. Certaines étiquettes n'ont aucun
contenu. Habituellement, toutes les balises doivent être fermées.
Tout le contenu d'un document HTML se trouve entre les balises
<html>
45
</html>. Chaque page est elle-même divisée en en-tête (délimitée entre les
étiquettes<head> </head>) et corps (délimité entre les étiquettes
<body> </body>). Toutes les informations incluses dans l'en-tête ne se
renderiza al visualizar el documento. Se considera "meta información". Es
bonne pratique d'inclure dans l'en-tête de la page web un titre,
en utilisant la balise <title>. Ce sera le titre que notre navigateur web
montrez dans votre barre. Ce titre est également pris en compte par les moteurs de recherche.
Internet, comme Google, au moment de déterminer de quoi il s'agit notre
page.
Caractères spéciaux
Comme dans tout langage de programmation, en HTML, il y a certains caractères qui
a une signification spéciale, comme par exemple < et >. C'est pourquoi, ils ne peuvent pas
s'employer directement dans le code HTML, mais doit être utilisé une
séquence d'échappement équivalente. Dans le tableau suivant, nous montrons les
séquences d'échappement les plus courantes :
Tutoriel sur HTML
46
Comme tu as pu le constater, toutes les séquences d'échappement commencent par
un "&" y terminan en un ";". La mayor parte de los navigateurs modernes
permettent d'écrire des voyelles avec accent et des caractères comme le "ñ" directement dans
le HTML. Toutefois, il est souvent judicieux de prendre des précautions et d'utiliser les
séquences d'échappement pour la compatibilité avec les anciens navigateurs.