Cours HTML

Cours complet Manuel Html


Télécharger Cours complet Manuel Html

★★★★★★★★★★4.3 étoiles sur 5 basé sur 13 votes.
Votez ce document:

Télécharger aussi :


Cours d’HTML

Qu’est ce que le HTML ?

Le HTML (HyperText Markup Language) est un format de présentation de données permettant de créer des pages web pouvant être lues dans des navigateurs.

C'est un langage de description de données, et non un langage de programmation. Il est figé c.à .d. qu'une fois le document chargé dans le navigateur, il ne répond à  aucune action de l'utilisateur sur le contenu de la page. 

Balises HTML

Une balise HTML est un élément que l'on va ajouter au texte à  afficher pour dire au navigateur de quelle manière l'afficher. Elle n'est pas affichée telle quelle dans le navigateur, elle est interprétée par celui-ci. syntaxe:

<BALISE>       (Balise standard )
Balises simples - balises doubles

Deux types de balises : balises simples

Balises dites "vides": ne contiennent aucune autre balise HTML Ces balises n'ont pas besoin d'être fermées.

exemple

<img src="adresse_de_l’image"> (insertion d’une image)

balises doubles

Deux balises ouvrantes/fermantes, entre lesquelles sont situées d'autres balises ou du texte.

La balise fermante:  identique à  la balise ouvrante. contient un "/" pour indiquer la fermeture.

exemple:

<p> ici du texte ou tout autre balise </p> (nv paragraphe)

Structure d’un document HTML

Document HTML de base

la balise <html>. Elle encadre l'ensemble des autres balises.

<html>

<head>

<head>: va contenir tout l'en-tête de la page (Informations diverses: auteur, titre, version, scripts, variables ... )

<title> ... </title>   

 L’entête du document -Head

La balise <head> contient de nombreux renseignements sur la page, sur l'auteur ... Le titre de la page entre les balises <title> et </title>

Très important :

Apparaît dans la barre de titre du navigateur.

Son contenu sera affiché en titre des résultats de la recherche dans les moteurs de recherche 

---> mettre le maximum de mots-clefs importants.

<title>cours HTML -  DUT 1ère année 2010</title>

Le corps du document -Body

Les paragraphes de texte

La mise en forme de texte

Les niveaux de titres

Les tableaux   

Body - Les paragraphes de texte
Body - La mise en forme de texte

Balise  <b> ... </b>: texte en gras

<b>Ce texte s'affichera en gras</b>

Balise  <i> ... </i>: texte en italique

<i>Ce texte s'affichera en italique</i>

Balise  <u> ... </u>: texte souligné

<u>Ce texte sera souligné</u>

Balise  <s>  ... </s>: texte barré

<s>Ce texte sera barré</s>

Balise  <sup> ... </sup>: texte en exposant

<sup>Ce texte sera en exposant</sup>

Balise  <sub> ... </sub>: texte en indice

<sub>Ce texte sera en indice</sub>

 Body - La mise en forme de texte

Body - Modifier la couleur du texte

Balise  <font> ... </font>  - attribut <color> exemple

<font color="#ff0000">texte en rouge</font>

Les couleurs peuvent être écrites de deux manières :

- En hexadécimal de type RVB et précédées d'un dièse (#) exemples :   

Body - Modifier la couleur du texte   

Body - Modifier la police ou la taille du texte

Balise  <font> ... </font>  - attribut <face> exemple

<font face="Arial">texte en Arial</font>

<font face="Arial,times">Ce texte sera en Arial sinon en times</font>

Balise  <font> ... </font>  - attribut <size> exemple:

Body - Modifier la police ou la taille du texte 

Body - Les niveaux de titre

Balise  <hn> o๠n représente le niveau

Il existe différents niveaux de titres ( 1 à  6 ) (tous importants)

Attribut de la balise

<Hx align=center>...</Hx>        Titre centré

               <Hx align=left>...</Hx>            Titre aligné à  gauche   

Rappels

HTML est un format de présentation de données pour créer des pages web pouvant être lues dans des navigateurs.

C'est un langage à  balises.

Une balise HTML est un élément que l'on va ajouter au texte à  afficher pour dire au navigateur de quelle manière l'afficher.

syntaxe:

<BALISE> (simple ou double)   

Rappels

Attributs balise  <body> </body>:

-   BACKGROUND pour insérer une image comme fond

<BODY BACKGROUND="nom_de_fichier.extension">

-   BGCOLOR : couleur de l'arrière plan

-   TEXT :  couleur du texte, par défaut elle est noir   

 Rappels

Balise  <p>   </p>: segmentation du texte en paragraphes

Balise <div> ... </div> : division de la page en blocs

Balise <br> : saut de ligne ou retour à  la ligne

Balise  <b> ... </b>: texte en gras

Balise  <i> ... </i>: texte en italique

Balise  <u> ... </u>: texte souligné

Balise  <s>  ... </s>: texte barré

Balise  <sup> ... </sup>: texte en exposant

Balise  <sub> ... </sub>: texte en indice Balise  <font> ... </font> :



-  attributs : <face>, <size>, <color> Balise  <h> ... </h> : niveaux de titre

-  attribut : align ( center, left, right )
Le corps du document -Body

Body - Les Tableaux

Structure de base:

<TABLE> </TABLE>

indique au navigateur le début et la fin d'une table Pour décrire le tableau, on utilise ensuite les balises :

<TR> </TR> (Table Row): Définit une ligne du tableau.

Pour ajouter une ligne au tableau.

<TD> </TD> (Table Data): Définit une série de cellules de données (qui pourront contenir du texte, des images, une table...).

<TH> </TH> (Table Head): Définit une cellule contenant un titre (intitulé) de colonne ou de ligne. Le résultat à  l'affichage est un texte mis en évidence (gras par exemple).

     <caption> </caption> :    Définition du titre du tableau 

 Body - Les Tableaux

ATTRIBUTS

      WIDTH="x"                 largeur du tableau (nombre ou % par rapport à  la

largeur de la fenêtre)

      HEIGHT="x"               hauteur du tableau (nombre en pixels ou %)

      BORDER="x"              taille de la bordure ou épaisseur de l’ombrage

(1 par défaut)

      BGCOLOR=couleur    couleur de fond des cellules

BACKGROUND          pour utiliser une image comme fond pour la table

CELLSPACING="x"    largeur des bordures = espace entre deux cellules du tableau     

CELLPADDING="x"    espace libre (pixels) entre le texte et le bord de la cellule qui le contient

      ALIGN   alignement: left, right, center

      COLLSPAN="n"         fusion de colonnes sur une même ligne ( td et th )

      ROWSPAN="n"         fusion de colonnes sur une même ligne ( td et th 34)

 Body - Les Tableaux

<HTML>

<HEAD>  <TITLE>exemple1 tableau</TITLE>  </HEAD>

<BODY BGCOLOR="#00FF00"   >

<CENTER> <table border=5 BORDERCOLOR=red CELLSPACING=10

cellpadding=10 width=80% heigth="80" >      

<tr bgcolor=yellow>

<td>1-1</td>  <td> 1-2 </td>  <td> 1-3 </td>  <td> 1-4 </td>

</tr>

<tr bgcolor=blue>

<td>2-1</td>  <td> 2-2 </td>  <td> 2-3 </td>  <td> 2-4 </td> </tr>

 

 

<HTML>

<HEAD>  <TITLE>exemple tableau</TITLE>  </HEAD> <BODY BGCOLOR="#00FFFF"   >

<CENTER> <table border=10 CELLSPACING=25 cellpadding=8 width=80% heigth="80" BORDERCOLOR="#000000">      

<tr bgcolor=yellow>

<th colspan=2 rowspan=2> <font size="6"> 1-1 </th>             

<th>  <font size="4">1-3 </th>   <th> 1-4 </th>

</tr>

<HTML>

<HEAD>  <TITLE>9eme tableau</TITLE>  </HEAD>

<BODY >

<CENTER> <table border=10 CELLSPACING=20 cellpadding=10 width=80% heigth="80" BORDERCOLOR="#000000">      

<tr bgcolor=blue>  <th>1-1</th>  <th colspan=3><font size="6"> 1-2 </th>
<td rowspan=4>1-5 </td>

</tr>

<tr bgcolor=yellow>

<td> 2-1 </td>   <td> 2-2 </td>   <td> 2-3 </td>  <td rowspan=4>2-4</td> </tr>

</HTML>

Le corps du document -Body

Les paragraphes de texte

La mise en forme de texte

Les niveaux de titres

Les tableaux

Body - Insertion d’images

Pour insérer une image à  un document HTML

Balise simple  <img>

Pour insérer une image locale

<img src="chemin de l’image" alt=" texte alternatif ">

 Attributs de la balise <img>

-   src : donne le chemin de l'image.

-   alt : affiche un texte alternatif à  la place de l'image si celle-ci ne peut pas être chargée

-   align : left, right, middle, bottom, top

-   width=n ou n% height=m : pour redimensionner une image

-   border=n : pour tracer un cadre autour de l'image avec un trait de n pixels de large

o   - vspace=n hspace=m : espace vertical entre l’image et le texte en pixels (vspace), espace horizontal image-texte (hspace). 

 Body - les liens HTML

HTML donne la possibilité de créer des liens vers d'autres documents :

-   documents HTML

-   des images

-   du son

-   des films

Liens vers un document complet distant :

Syntaxe :

<A HREF="URL"> ancre </A>

exemple :

pour accéder à  la page du CEI de l’ ENS 

   Body - liens hypertextes

Liens         Exemples

Lien interne départ (même page)

<a href="#top">...</a>

Lien interne arrivée (même page)

<a name="top">...</a>

Lien interne (page différente)

 Body - Insertion  du son

lien hypertexte vers un fichier media



<a href="nomFichier.extension">......</a>

exemples d’extension : .mid, .wmv, .wav, .mp3, .ram ...
Body - Insertion  du son

 Intégrer un fichier son dans la page : on ajoute

<embed src=" nomFichier.extension "> exemple:

<p><embed src="sprng_01.mid" width="150" height="40" autostart="false" loop="false"></p>

Remarques: 

Body - Insertion  du son

Intégrer un fichier son dans le fond de la page :

<embed src=" nomFichier.extension " hidden > exemple:

<p><embed src="sprng_01.mid" autostart="true" loop="false" hidden="true">

Musique de fond en cours de diffusion.</p>

Body - Insertion  de vidéo

lien hypertexte vers un fichier video

<a href=" nomFichier.extension ">......</a> exemple:

<a href="aucland45.MPEG">Un petit film au format mpeg</a> Intégrer un fichier video dans la page:

<img dynsrc="aucland45.MPEG> exemple:

<img dynsrc="nomClip.MPEG" start="fileopen">

Un petit film au format mpeg </a>

fileopen= la vidéo est affichée à  l’ouverture

mouseover= la vidéo est affichée au passage de la souris


Les formulaires

Méthode des formulaires

Les formulaires HTML permettent de retourner des informations  saisies par un utilisateur vers une application serveur Les formulaires utilisent des  balises particulières:

       <form action= " "  method= " " >     ...       </form>

<input type = "text" name ="nom" value="chaîne">   zone de saisie <input  type="submit " value="Envoyer">             bouton d’envoi

<input  type="reset"  name="efface"  value="Effacer">  bton effacer

<input type="checkbox" name="case1"  value="valeur_case">

<input  type="radio"  name="radio1"  value="valeur_radio">

<select name ="select" size="1">

<option value="R">choix1</option>  Liste de sélection

<option  value="D"> choix2  </option> </select>

                <textarea name="" cols="" rows=""></textarea>    zone de texte

Les formulaires

Un formulaire commence et finit par: FORM

<FORM   ACTION   METHOD>       </FORM>

â–º Les attributs METHOD  et  ACTION  sont obligatoires

♦ ACTION = " adresse du script qui va recevoir les

données saisies dans le formulaire " 

Les formulaires

<FORM   ACTION   METHOD>       </FORM>

- GET : passe les informations d'un formulaire par l’intermédiaire des URL. Elles sont placées, directement à  la suite de l'adresse URL de la page appelée. exemple: 

Un formulaire commence et finit par: FORM

<FORM   ACTION   METHOD>       </FORM>

â–º Les attributs METHOD  et  ACTION  sont obligatoires

♦ ACTION = " adresse pour l'envoi "

♦ METHOD = "forme d’envoi"  ( GET ou POST )

-   POST: valeur qui correspond à  un envoi de données stockées dans le corps de la requête. Méthode la plus utilisée pour les formulaires

Le nombre d'informations important

-   GET : méthode généralement assez peu adaptée, car limitée à  255 caractères. Les informations seront envoyées dans l'adresse de la page (http://...). 

 Les formulaires

A l'intérieur de la balise FORM...

-   Insertion de n'importe quel élément HTML de base:

textes, tableaux, liens, ...

-   Insertion d’éléments interactifs.

 Les formulaires

A l'intérieur de la balise FORM...

Les éléments interactifs sont :

♦ la balise INPUT : un ensemble de boutons et de champs de saisie à  une ligne 

A l'intérieur de la balise FORM...

La balise INPUT :

-   balise principale des formulaires

-   permet de créer un bon nombre d'éléments "interactifs" 

A l'intérieur de la balise FORM...

INPUT : champ de saisie

<INPUT  TYPE  NAME  VALUE SIZE>   </INPUT>

avec

TYPE = TEXT      pour faire saisir une ligne de texte

= PASSWORD     les caractères saisis apparaissent sous forme d’ '*'

NAME = "un nom"  qui identifie le champ texte

VALUE                    valeur par défaut de la zone de texte SIZE  largeur de la zone de texte

       maxlength               nombre maximal de caractères   

A l'intérieur de la balise FORM...

INPUT : checkbox (cases à  cocher) exemple :

c: <input name="C" type="checkbox" value="C“ checked> c++: <input name="Cpp" type="checkbox" value="C++">

Pascal: <input name="Pascal" type="checkbox" value="Pascal">

A l'intérieur de la balise FORM...

INPUT : Boutons

< INPUT  NAME  TYPE  VALUE  CHECKED >  ... </INPUT> avec  TYPE =   RADIO pour les boutons multiples

                    CHECKBOX     pour les cases à  cocher

                    SUBMIT            pour envoyer le formulaire une



fois rempli

                    RESET              pour effacer le contenu du formulaire

 NAME =  "un nom"          qui identifie le bouton

VALUE=  "valeur"            donnée au bouton lorsqu'il est selectionné

 CHECKEDsignale un bouton par défaut (RADIO) ou une case cochée avant saisie  

(CHECKBOX)

A l'intérieur de la balise FORM...

INPUT : Bouton-Radio (Zones d’option)

Pour un choix et un seul parmi plusieurs possibilités exemple :

<INPUT  TYPE=RADIO  NAME=SECT1  VALUE="UNIV" CHECKED>  

Universitaire

A l'intérieur de la balise FORM...

INPUT : submit et reset

- reset  :   bouton de remise à  zéro rétabli l'ensemble des éléments du formulaire à  leurs valeurs par défaut 

 A l'intérieur de la balise FORM...

INPUT : submit et reset exemple :

<input type="submit" value="envoyer">

A l'intérieur de la balise FORM...

TEXTAREA

La balise TEXTAREA permet de définir une zone de saisie plus vaste par rapport à  la simple ligne de saisie que propose la balise INPUT 

   

A l'intérieur de la balise FORM...

TEXTAREA

exemple

<textarea name="adresse“ type="text"></textarea> 

A l'intérieur de la balise FORM...

TEXTAREA

Attributs rows et cols:

pour modifier la taille de textarea

<textarea name="ameliorer" rows=" " cols=" "> </textarea> 

A l'intérieur de la balise FORM...

SELECT :

permet de créer une liste déroulante d'éléments (précisés par des balises OPTION à  l'intérieur de celle-ci).

Les attributs de cette balise sont :

-     name: représente le nom associé au champ, c'est le nom qui permettra d'identifier le champ dans la paire nom/valeur

-     disabled: permet de créer une liste désactivée, c'est-à -dire affichée en grisée

-     size: représente le nombre de lignes dans la liste (cette valeur peut être plus grande que le nombre d'éléments effectifs dans la liste) - multiple: marque la possibilité pour l'utilisateur de choisir plusieurs champs dans la liste
Les frames

Définition et structure de base

Les documents multi-cadres (frames) donnent la possibilité de diviser la fenêtre du navigateur en plusieurs panneaux ou cadres indépendants, contenant chacun un document HTML différent.

Les cadres sont délimités par la balise :

<FRAMESET> </FRAMESET> qui va remplacer   <BODY>

Pour définir ensuite les cadres, on utilise les balises FRAME disposant chacune d’un paramètre SRC pour indiquer l'adresse (URL) du document HTML à  afficher dans ce cadre.

Paramètres de la balise < FRAMESET >

COLS=" x , a% , * ..."        Divise la fenêtre en cadres verticaux.

Le nombre de valeurs entre parenthèses séparées par des virgules (ici 3) donne le nombre de cadres et leurs largeurs ...

ROWS=" x , a% , * ..."      Divise la fenêtre en cadres horizontaux.

Le nombre de valeurs entre parenthèses séparées par des virgules (ici 3) donne le nombre de cadres et leurs hauteurs ...

x = largeur/hauteur en nombre de pixels ;     a%= largeur/hauteur de la cellule en pourcentage de l'écran ; * = largeur/hauteur restante 

Paramètres de la balise < FRAMESET >

SRC="URL"                  indique le fichier à  placer dans le frame

NAME="nom_cadre"    permet de nommer le cadre afin qu'elle puisse devenir la cible d'un lien (on utilisera alors l'attribut target de la balise   <A > pour y accéder.

SCROLLING="yes/no/auto"    affichage de la barre de défilement

(auto : valeur par défaut)

MARGINWIDTH=" "     largeur des marges verticales

MARGINHEIGHT=" "   hauteur des marges horizontales

NORESIZE                   évite la modification de la taille par

l'utilisateur

FRAMEBORDER         indique si le cadre doit être séparé d’autres

cadres (1 pour oui -valeur par défaut-, 0 pour non) 


14532