Resume Cours Technologie Web [PDF]

Zitiervorschau

---

Université SAAD DAHLEB Faculté des sciences 1ère Année MI

Module : Technologie Web Année 2011/2012 Section G

Résumé Cours Technologie Web Le document HTML minimum:

Taille de caractère

[Font size]

...

Début et fin de zone avec cette taille

Couleur de caractère

[Font color]

Début et fin de zone en couleur

Ceci est le début d'un document de type HTML.

A la ligne

[Line break]




Aller à la ligne

Ceci est la fin d'un document de type HTML.

Commentaires

[Comments]

Ne pas afficher

Ceci est le début de la zone d'en-tête (prologue au document proprement dit contenant des informations destinées au browser).

Paragraphe

[Paragraph]

Début d'un nouveau paragraphe

Ceci est la fin de la zone d'en-tête.

Centrage

[Center]

Centrer

Ceci est le début du Titre de la page.

Ceci est la fin du Titre de la page.

Ceci est le début du document proprement dit.

Ceci est la fin du document proprement dit.

Le codage des couleurs en HTML

Vous aurez remarqué qu'à chaque balise de début d'une action, soit , correspond (en toute logique) une balise de fin d'une action . Vous noterez aussi que les balises ne sont pas "case sensitive". Il est donc équivalent d'écrire , , , etc.

Les balises élémentaires : Tout document HTML contiendra en majorité du texte. Voyons comment l'agrémenter par quelques balises élémentaires. Gras

[Bold]

...

Début et fin de zone en gras

Italique

[Italic]

...

Début et fin de zone en italique

Chaque élément de couleur (Rouge, Vert ou Bleu) est codé en HTML sur 8 bit en hexadécimal soit de 00 à FF (de 0 à 255) Ainsi FF de rouge, FF de Vert et FF de Bleu, donne du Blanc Voici les codes de quelques couleurs basiques : Bleu

#0000FF

Vert

#00FF00

Blanc

#FFFFFF

Violet

#8000FF

Rouge

#FF0000

Jaune

#FFFF00

Gris clair

#C0C0C0

Noir

#000000

Les Titres : HTML a disposé dès son origine d'outils spécialement conçus à cet effet. Pour ce faire, on utilise la balise ... où n peut prendre une valeur entière comprise entre 1 et 6 (dans l'ordre décroissant de taille).

Chargée de TP : N.Lahiani 1

Université SAAD DAHLEB Faculté des sciences 1ère Année MI

Module : Technologie Web Année 2011/2012 Section G

Exemple :

Les listes à puces :

Les mois du printemps mars, avril, mai Les mois d'automneseptembre, octobre, novembre

Une liste non numérotée est définie de la même façon, sauf qu'elle est encadrée par les balises

et

.

Modifier la Police du Texte :

Exemple :

Pour modifier la police du texte on utilise l'attribut face de la balise

• élément 1,
• élément 2,
• élément 3.

Ce texte sera en verdana.

Modifier la taille du texte Ce texte sera en taille 5.Texte en verdana ou sansserif Le langage HTML permet de définir deux styles de listes : les listes numérotées et les listes non numérotées.

Notez qu'il est possible d'imbriquer des listes du même type ou de types différents. Exemple :

Les listes numérotées :

• élément 1 :
  
  
• sous-élément A,
• sous-élément B.
  
  
• élément 2,
• élément 3.

Une liste numérotée est délimitée par les balises et entre lesquelles chaque élément de la liste est précédé de la balise

. Exemple :

élément 1,

élément 2,

élément 3.

On obtient alors : 

élément 1, 1. sous-élément A,

Chargée de TP : N.Lahiani 2

Université SAAD DAHLEB Faculté des sciences 1ère Année MI  

Module : Technologie Web Année 2011/2012 Section G

2. sous-élément B. élément 2, élément 3.

1. Liens internes  

Liens internes

2. Lien Externe: Texte du lien

Les attributs Type="type"

UL & OL

(déprécié en faveur des css) : spécifie l'aspect des marqueurs des éléments

Start="nombre"

OL

commence la numérotation à la valeur spécifiée.

Value="nombre"

LI

spécifie le nombre de l'élément.

Compact

OL & UL

rendu plus compact de la liste

Les tableaux : ....

Le type des listes :

Puces rondes pleine




Puces rondes creuses




Puces carrées

(1,2,3)

:Le marqueur "tr" (table row en anglais) définit le début et la fin d'une ligne du tableau. Une ligne est composée de cellules.

(a,b,c)

: Le marqueur "td" (table data en anglais) définit le début et la

(A,B,C)

fin d'une cellule.

(i,ii,iii)

(I,II,III)

Les liens HyperTexte:



Chargée de TP : N.Lahiani 3

Université SAAD DAHLEB Faculté des sciences 1ère Année MI



Cellule 1	Cellule 2
Cellule 3	Cellule 4



Module : Technologie Web Année 2011/2012 Section G



cette procédure dans tous les cas, car cela permet de commencer à lire le texte avant que l'image soit chargée complètement. La plupart des outils d'imagerie vous indiquent la taille d'une image. Le paramètre "border" permet de créer un cadre autour de l'image. La largeur de la bordure est exprimée en pixels. Une utilisation courante est de mettre BORDER=0 pour éviter qu'un cadre bleu soit dessiné autour d'une image qui serait la partie active d'un lien.

Pour Ajouter un titre a un tableau on fait : Notes de la classe de 3èmeB

Insertion d'images Une déclaration minimale ressemblerait à ceci:

Exemple :

Paramètres :  





Le paramètre "src" doit contenir un URL ou un chemin relatif vers un fichier de format gif ou jpg. Le paramètre "align" permet de spécifier l'alignement de l'image par rapport au texte. Les valeurs possibles sont : top, bottom, middle, right, left Le paramètre "alt" contient le commentaire que les personnes utilisant un browser textuel (sans images) voient à la place de l'image. Les paramètres "width" et "height" se réfèrent à la largeur et à la hauteur de l'image (en pixels). Netscape crée un cadre vide de cette taille avant de commencer à télécharger l'image. Utilisez

Chargée de TP : N.Lahiani 4