HyperText Markup Language HTML - Part 2

[abdelouafi]

أحدث المقالات

إذا كنت ترغب في مشاهدة الصور ، يرجى النقر عليها

Blog
SUIVEZ NOTRE CHAINE YOUTUBE: قم بالتسجيل في قناتنا عبر هذا الرابط https://www.youtube.com/channel/UCCITRMWPcElh-96wCS3EyUg
devoir 1 math tronc commun

مجموعة من دروس و فروض جميع المستويات

دروس الإعدادي - دروس الثانوي الثأهيلي - دروس التعليم الابتدائي - فروض مختلف المستويات الدراسية

فضلا و ليس أمرا شارك هذه الصفحة مع أصدقائك:

HyperText Markup Language​

Balise <a> (lien hypertexte)

-Href: lien de destination (chemin relatif de la page appartenant au site courant ou chemin absolu commençant par http:// si la page existe sur un autre site Web)
-Target: carde de destination (fenêtre courante ou nouvelle fenêtre)
-Title: titre affiché dans l’info bulle si l’on survole le lien avec le pointeur de la sourie.

Quelques valeurs courantes de l’attribut « target »:

-_self: même cadre
-_blank: nouvelle fenêtre
-_top: page entière

Exemple:

<a href=‘’http://www.exam-lib.com’’ target=‘’_blank’’>
Ceci est un lien hypertexte vers Google

<!-- Lien vers un autre site s’ouvrant dans une nouvelle fenêtre -->

</a>

<u></u>: souligné
Balise <font> ( mise en forme du texte)

-Face: police du texte (verdana, arial…)
-Size: taille du texte (de 1 à 7) pour les tailles standards, (-2 à +4) pour définir une taille relave à la taille par défaut (3). Si on veut définir une taille différente on utilise l’attribut de style locale de type: style=‘’font-size:taille_en_pt’’
-Color: couleur du texte qui peut prendre comme valeur l’identificateur de la couleur (blue, green, pink…) ou son code RVB hexadécimal (plus pratique).

Exemple:

<font face=‘’verdana’’ color=‘’orange’’ size=‘’3’’>

Le texte courant est de police Verdana, couleur bleue et de taille 12 pt

</font>

Ou encore

<font face="verdana" color=‘’blue’’ style=‘’font-size:15pt’’>

La taille des cette police est 15 pt

</font>

Balise <font> ( mise en forme du texte)

L’attribut « color » peut prendre comme valeur le nom de la couleur tel que green, white, red… Cependant, le codage de couleurs demeure la solution la plus adéquate pour exprimer toutes les nuances disponibles dans l’environnement RVB (ou RGB en anglais).

Les couleurs du Web sont réparties sur une palette RVB (Rouge, Vert, Bleu). Avec ces trois couleurs de base on peut composer toutes les couleurs connues avec une précision définie par le nombre de bits qui exprime chaque couleur de base.

Chaque couleur de base est représentée sur un octet. On peut alors exprimer une couleur quelconque par trois octets (24 bits: 8 bits pour le Rouge, 8 bits pour le Vert et 8 bits pour le Bleu). L’assemblage de ces trois couleurs de base à un pourcentage bien déterminé donne la couleur désirée.

L’attribut « color » de la balise « font » devient alors:

Color=‘’#XXXXXX’’

Le Diez ‘’#’’ informe le navigateur que lXe code qui suit est une suite de nombres hexadécimaux.


Exemple de quelques couleurs spéciales:


Rouge: #FF0000 Jaune: #FFFF00 (Rouge + Vert)

Vert: #00FF00 Magenta: #FF00FF (Rouge + Bleu)

Bleu: #0000FF Cyan: #00FFFF (Vert + Bleu)

Blanc: #FFFFFF (Rouge + Vert + Bleu)

Noir: #000000 (Absence de toutes les couleurs)

Balise <img> (insertion d’image):

-Src: chemin relatif (ou absolu) de l’image
-Border: taille de la bordure de l’image en pixel
-Width: largeur de l’image en pixel
-Height: hauteur de l’image en pixel
-Alt (ou Title): description de l’image qui s’affiche sur une info bulle

Exemple:

<img src=‘’images/portrait.jpg’’ width=‘’250’’ height=‘’300’’ border=‘’0’’ alt=‘’mon portrait’’>

Noter que <img> ne procède pas de balises de fermeture </img>

Balise <div> (mise en page)

-Align: alignement de l’objet mis entre <div> et </div> (centré, à droite ou justifié. A gauche est définie par défaut)

Exemple:

<div align=‘’center’’>

<img src=‘’images/portrait.jpg’’ border=‘’0’’>

<!-- L’image est centrée sur la page -->

</div>

Les quatre valeurs possibles de l’attribut « align »:

Left (valeur par défaut), right, center, justify

L’alignement peut être défini sur une page entière ou tout simplement (ce qui est le plus courant) sur une cellule d’un tableau masquée qu’on va voir plus loin dans ce cours.

Balise <span> (surlignage):

La balise span utilise une information de style locale de type:

-Style=‘’background-color:couleur’’ : marquage du texte
-Style=‘’text-decoration:underline’’ : soulignage du texte
-Style=‘’text-decorationverline’’ : surlignage du texte
-
Exemple:

<span style=‘’background-color:#00ff00; text-decoration: overline’’>

Ce texte est marqué en vert et est surligné

</span>

Balises <table> <tr> et <td> (tableaux HTML)

Les tableaux HTML permettent d’établir une mise en page facile de la page Web. Elle permettent de diviser la page en plusieurs partie, chacune accueille un objet (text, script, image, objet de formulaire…)

<table> (balise de déclaration d’un tableau)

-Id: identificateur du tableau
-Border: taille de la bordure du tableau
-Width: largeur du tableau en pixel ou en pourcentage
-Height: hauteur du tableau en pixel ou en pourcentage
-Cellspacing: espacement entre cellules en pixel
-Cellpadding: marge intérieure des cellules en pixel
-Bgcolor: couleur de l’arrière plan du tableau
-Bordercolor: couleur de la bordure du tableau

Balises <table> <tr> et <td> (tableaux HTML)

<tr> (balise de définition d’une nouvelle ligne du tableau)

-Bgcolor: couleur de l’arrière-plan de la ligne
-Width: largeur de la ligne en pixel ou en pourcentage (par défaut c’est la largeur définie en paramètres de la balise <table>
-Height: hauteur de la ligne en pixel ou en pourcentage

<td> (balise de définition d’une nouvelle colonne de la ligne)

-Bgcolor: couleur de l’arrière-plan de la colonne
-Width: largeur de la colonne en pixel ou en pourcentage
-Height: hauteur de la colonne en pixel ou en pourcentage
-Align: alignement horizontal des objet de la colonne
-Valign: alignement vertical des objets de la colonne

Balises <table> <tr> et <td> (tableaux HTML)

Exemple:

<table border=‘’0’’ width=‘’760’’ cellspacing=‘’0’’ cellpadding=‘’0’’>

  <tr>

  <td bgcolor=‘’blue’’ height=‘’50’’ width=‘’380’’ valign=‘’top’’>

  C’est la colonne 1 de la ligne 1 du tableau 1

  </td>

  <td bgcolor=‘’green’’ height=‘’50’’ width=‘’380’’ valign=‘’top’’>

  C’est la colonne 2 de la ligne 1 du tableau 1

  </td>


  </tr>

</table>

Balises <bgsound> (placée entre <head> et </head>)

L'élément BGSOUND permet de créer des pages avec un fond sonore et de paramétrer la durée de diffusion, le volume et la balance.

L'élément BGSOUND admet les types de fichiers sons suivants:

–Fichiers .WAV
–Fichiers .AU
–Séquences MIDI: .MID
–Le format MP3 est pris en charge par les navigateurs actuels

Attributs

-Id: identificateur de l’élément
-Src: chemin relatif du fichier son
-Loop: nombre de répétitions (-1 veut dire infini)
-Volume: volume du son entre -10 000 et 0 (0: maximum)
-Balance: balance entre les deux haut-parleurs entre -10 000 et +10 000 (-10 000: le son provient entièrement du haut-parleur gauche)

Balises <marquee>

La balise marquee permet d’insérer un texte (ou une image) défilant sur la page Web

Cette balise n'est pas reconnu par Netscape qui ne rendra son contenu qu’en élément fixe et immobile.

Attributs

-Id: identificateur de l’élément
-Behavior: comportement de l’élément (alternate, slide, scroll)
-Direction: sens de défilement (left, right, up, down)
-Loop: nombre du défilements (si rien n’est mentionné: infinie)
-Scrollamount: fixe le pas de déplacement en pixel (par défaut 6)
-Scrolldelay: vitesse de défilement (par défaut 90)
-Width: largeur de l’élément (zone réservée au défilement)
-Height: hauteur de l’élement

<marquee> votre texte animé ici</marquee>

Balises <p> (Nouveau paragraphe):

Attributs:
-Style=‘’margin-left: n px’’ marge gauche
-Style=‘’margin-right: n px’’ marge droite
-Style=‘’margin-top: n px’’ marge supérieure
-Style=‘’margin-bottom: n px’’ marge inférieure
-
n: nombre entier définissant la valeur de la marge en pixel.

Exemple:

<p style=‘’margin-left:10px; margin-right:10px’’>

  Ce paragraphe possède une marge de 10 pixels à gauche et à droite

</p>

<p style=‘’margin:10px’’> Une marge de 10 pixels est définie en haut, en bas, à gauche et à droite </p>

Balise meta I:
Permet de décrire votre page web.

les balises meta sont souvent utilisées pour permettre aux moteurs de recherche de mieux analyser le contenu d'une page et de faciliter la recherche sur Internet en présentant des sujets connexes au contenu du document, l'auteur du document, une description courte du document…

Cependant, les moteurs de recherche ont diminué l’importance de ces balises dans leurs algorithmes vu leur mauvaise utilisation par les concepteurs de sites (définition de mots clé vagues ou spamdexing…).

meta est une balise simple (ne procède pas de balise de fin). Elle est toujours déclarée à l’entête du document (entre <head> et </head>).

Chaque balise meta procède un nom qui caractérise sa fonction (par exemple ‘’keywords’’ est le nom donnée à la balise meta qui définie les mots clés sur lesquels se basent les moteurs de recherche pour référencer la page courante).

Infos sur vous (créateur ou possesseur du site)


Balise meta retournant le nom du créateur du site

<meta name=‘’author’’ lang=‘’fr’’ content=‘’nom prénom’’>

Lang: spécifie la langue utilisée sur la page courante.

Balise meta retournant le nom du publieur du site (propriétaire du site)

<meta name=‘’publisher’’ content=‘’nom prénom’’>

Exemple:

<head>

<meta name=‘’author’’ lang=‘’fr’’ content=‘’ENSA-Marrakech’’>

<meta name=‘’publisher’’ content=‘’ENSA’’>

</head>

Infos sur le site

Balise meta retournant les mots clé de recherche

<meta name=‘’keywords’’ content=‘’mots clés séparés par des virgules’’>

Balise meta retournant la description du site

<meta name=‘’description’’ content=‘’brève description du site’’>

Balise meta donnant l’URL complet de votre site

<meta name=‘’identifier-URL’’ content=‘’URL complet du site’’>

Exemple:

<head>

<meta name=‘’keywords’’ content=‘’ENSA, Marrakech, Ingénieurs, Formation’’>

<meta name=‘’description’’ content=‘’Bienvenue sur le site de l’ENSA’’>

<meta name=‘’identifier-URL’’ content=‘’http://www.ensa.ac.ma’’>

</head>

Infos sur la création

Balise meta retournant les copyrights

<meta name=‘’copyright’’ content=‘’text du copyright’’>

Balise meta retournant les outils de developpement

<meta name=‘’generator’’ content=‘’liste des logiciels utilisés à la création’’>

Balise meta retournant la date de la création de la page

<meta name=‘’date’’ content=‘’date de création de la page’’>

Balise meta retournant le codage par défaut de la page

<meta http-equiv=‘’content-type’’ content=‘’text/html; charset=codage’’>

La balise précédente spécifie le type MIME et le code ASCII utilisé grâce à l'attribut Content-type celui-ci indique l'alphabet latin contenant les accents (utilisé pour le français)


Exemple:

<meta http-equiv=‘’content-type’’ content=‘’text/html; charset=iso-8859-1’’>

Orienter les robots (robots de moteurs de recherche)


indexer toutes les pages :

<meta name=‘’robots’’ content=‘’all’’>

Si le site est en construction et que vous voulez que le robot n’indexe pas vos pages vous mettez ‘’none’’ à la place de ‘’all’’. Avec ‘’follow’’ les destinations des liens sont indexées. ‘’Nofollow’’ empêche le robot d’indexer ces destinations. Avec ‘’Index’’ seule la page courante est indexée. ‘’NoIndex’’ La page courante n’est pas indexée


Indexation automatique :

<META NAME="Revisit-after" CONTENT="n">

Exemple:

<META NAME="Robots" CONTENT=‘’Index,Follow">

<META NAME="Revisit-after" CONTENT="5">

Rafraîchissement et redirection

Recharger vos page périodiquement :

<META HTTP-EQUIV="Refresh" CONTENT="n">

On peut même procéder au chargement d'une page différente, très utile lorsqu'on change d'hébergeur afin de rediriger le navigateur vers un autre site:

<META HTTP-EQUIV="Refresh" CONTENT="n; URL=URL souhaité">

Exemple :

<META HTTP-EQUIV="Refresh" CONTENT="60; URL=http://www.google.com’’>

Plus…


Ne pas conserver les pages en cache:

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

Date d'expiration

<META HTTP-EQUIV="Expires" CONTENT=‘’Sat, 2 Jun 2008 14:30:00">

Les formulaires

Les formulaires HTML (FORMS en anglais) sont des ensembles de composants , appelés aussi champs, qui permettent à l'utilisateur d'entrer des informations, d'exprimer ses choix, de saisir du texte…

En général, on parle de sites dynamique ci celui-ci contient des formulaires. En effet, les champs de formulaires permettent à l’internaute de communiquer avec le site (Il ne se contente pas de voir le contenu en passant d’un lien à autre).

La balise <form></form> déclare un formulaire sur la page web.

Tous les champs (zone de texte, boutons, listes de choix, cases à cocher…) doivent être placés entre <form> et </form>.

Une page peut contenir plusieurs formulaires à la fois.

Les formulaires sont généralement traités par des scripts tels que : JavaScript ou PHP…

Balise:

<form name=‘’nom du formulaire’’ Method=‘’méthode d’envoie’’ Action=‘’URL de la page qui procèdera au traitement du formulaire’’>

Name: Nom du formulaire. Utile si on utilise plusieurs formulaires sur la même page.

Method: POST ou GET. POST permet l’envoi des valeurs du formulaire dans l’entête du document (les valeurs ne sont pas visibles) alors que GET les envoie avec l’URL (les valeurs sont visibles sur la barre d’adresse ce qui peut compromettre la confidentialité des données envoyées tels que les mots de passe).

Action: Spécifie la page qui se charge du traitement du formulaire.

La balise FORM possède comme attribut facultatif ENCTYPE (qu’on va voir plus loin dans le cours de PHP) qui spécifie le codage des données dans l'URL.

Le champ TEXTE

Syntaxe:

<input type=‘’text’’>

Attributs:

Name: nom du champ texte (Identificateur du champs)

Value: valeur par défaut

Size: taille en caractère

Tabindex: ordre de tabulation (définit l’ordre de déplacement du curseur entre les champs de formulaire suite à l’appuie sur la touche TABULATION du clavier).


Exemple:


<

input type=‘’text’’ name=‘’login’’ size=‘’20’’ tabindex=‘’1’’>

Le champ ZONE DE MOT DE PASSE

Syntaxe:

<input type=‘’password’’>

Attributs:

Name: nom du champ texte

Value: valeur par défaut

Size: taille en caractère

Tabindex: ordre de tabulation


Exemple:

<input type=‘’text’’ name=‘’login’’ size=‘’20’’ tabindex=‘’2’’>

Le champ ESPACE DE TEXTE


Syntaxe:

<textarea></textarea>

Attributs:

Name: nom de l’espace de texte

Colls: largeur de l’espace de texte en caractères

Rows: hauteur de l’espace de texte en lignes

Tabindex: ordre de tabulation


Exemple:

<textarea name=‘’commentaire’’ colls=‘’30’’ rows=‘’6’’ tabindex=‘’3’’>

Ceci est un commentaire

</textarea>

Le champ BOUTON RADIO

Syntaxe:

<input type=‘’radio’’>

Attributs:

Name: nom du bouton radio

value: valeur alphanumérique de l’élément

checked: dit si l’élément est sélectionné

Tabindex: ordre de tabulation


Noter que les boutons radio forment des groupes. C’est-à-dire qu’ils portent le même nom mais on les différencie par leurs valeurs.


Exemple:

<input radio name=‘’rad’’ value=‘’1’’ checked>

<input radio name=‘’rad’’ value=‘’2’’>

Le champ CASE A COCHER

Syntaxe:

<input type=‘’checkbox’’>

Attributs:


Name: nom de la case à cocher

value: valeur alphanumérique de l’élément

checked: dit si l’élément est sélectionné

Tabindex: ordre de tabulation


Les cases à cocher peuvent être traitées comme des éléments indépendants, des groupes d’élément ou encore des tableaux d’élément (apprécié en PHP)


Exemple:

<input type=‘’checkbox’’ name=‘’che’’ value=‘’1’’ checked>

<input type=‘’checkbox’’ name=‘’che’’ value=‘’2’’>

Le champ BOUTON

Syntaxe:

<input type=‘’type_de_bouton’’>

Il existe trois types:


-type=‘’submit’’ ce sont les boutons d’envoie de formulaires
-Type=‘’button’’ boutons ordinaires (peuvent être personnalisés avec JavaScript)
-Type=‘’reset’’ boutons rétablir (rétablie les valeurs par défaut des champs de formulaire)

Attributs:

Type: type de bouton

Name: nom du bouton

value: label du bouton (texte écrit dessus)

Tabindex: ordre de tabulation

Le champ BOUTON

Exemple:

<input type=‘’button’’ name=‘’imp’’ value=‘’Imprimer cette page’’>

<input type=‘’submit’’ name=‘’valider’’ value=‘’Envoyer’’>

<input type=‘’reset’’ name=‘’RES’’ value=‘’Rétablir le formulaire’’>

Si le bouton est de type SUBMIT (le plus utilisé d’ailleurs), le fait de cliquer dessus redirige le navigateur vers la page définie en valeur de l’attribut ACTION de la balise FORM. En effet, c’est le bouton SUBMIT qui soumets le formulaire au traitement.

Le champ LISTE DE SELECTION

Syntaxe:

<select name=‘’nom_de_l_element’’>

<option>option1</option>

<option>option2</option>

…

</select>

Attributs:


Balise SELECT

Name: nom de la liste

Tabindex: ordre de tabulation


Balise OPTION

Value: valeur de l’option (par défaut c’est le contenu de l’option)

Selected: mentionne si l’option est sélectionnée par défaut.


rdana; mso-fareast-font-family:+mn-ea;mso-bidi-font-family:Arial;color:#FFCC00; mso-font-kerning:12.0pt;language:fr'>Tabindex: ordre de tabulation

Le champ LISTE DE SELECTION


Exemple:

<select name=‘’secteur_activité’’>

<option selected>Télécoms</option>

<option>Électricité</option>

<option>Informatique</option>

<option>Mécanique</option>

<option>Métallurgie</option>

</select>

L’attribut VALUE de la balise OPTION est facultatif. Si rien n’est mentionné alors le contenu de la balise passe en valeur de l’attribut VALUE (Informatique pour le premier cas).


Le champ CHARGEMENT DE FICHIER


Syntaxe:

<input type=‘’file’’>

Attributs:

Name: nom du champs

Tabindex: ordre de tabulation


Les champs FILE permettent de parcourir un fichier sur le poste de travail et le soumettre au formulaire. Ce dernier, grâce à des scripts coté serveur comme PHP, charge le fichier sur le serveur (UPLOAD)


Exemple:

<input type=‘’file’’ name=‘’mon_fichier’’>

Le champ CACHÉ

Syntaxe:

<input type=‘’hidden’’>

Attributs:

Name: nom du champs

Value: valeur de l’élément


Les champs caché (ou HIDDEN) permettent de transmettre en cachettes des informations sur le formulaire. HIDDEN est souvent utilisé avec le champ FILE. Il permet de définir la taille maximale du fichier à charger sur le serveur.


Exemple:

<input type=‘’hidden’’ name=‘’max_file_size’’ value=‘’1024’’>

Exemple:

<html><head><title>Page d’authentification</title></head><body>

<form name=‘’form1’’ method=‘’post’’ action=‘’connexion.php’’>

<div align=‘’center’’>

<h2>Veuillez vous identifier</h2><br><br>

Login: <input type=‘’text’’ name=‘’login’’><br>

Mot de passe: <input type=‘’password’’ name=‘’pass’’><br>

Vous êtes connecté en tant que:

&nbsp;

<select name=‘’statut’’>

<option>Utilisateur</option>

<option>Administrateur</option>

</select><br>

<input type=‘’submit’’ name=‘’valider’’ value=‘’  OK  ‘’>

</div></form>

</body></html>

Balises supplémentaires

: Exposant (X² donne X²)

: Indice (H₂ donne H2)

<strong></strong>: Écriture en gras tout comme <b></b>

<em></em>: Écriture oblique tout comme <i></i>

<h1></h1>: Titre de taille 6 (24pt)

<h2><h3><h4><h5><h6>: Titres de taille respectivement 5, 4, 3, 2 et 1.


Cependant, il existe d’innombrables effets à appliquer sur le contenu de la page en introduisant des attributs de style locale sauf que cela demande trop de travail qui peut s’avérer fastidieux.
Le chapitre suivant traitera les feuilles de styles CSS qui peuvent nous épargner beaucoup d’effort en mise en page de nos pages Web.