Overblog
Editer l'article Suivre ce blog Administration + Créer mon blog
Le blog de Loviso

Apprendre le HTML

10 Avril 2010 , Rédigé par Loviso Publié dans #Informatique

 

Qu'est ce qu'il faut pour écrire une page HTML?

 

C'est simple,un fichier ".doc" ou ".txt" (bloc note)   suffit pour écrire une page HTML,mais attention,aprés avoir rédiger le code à l'intérieur du document il faut changer l'extention du fichier,le fichier doit avoir l'extention ".html" .

 

Exemple:j'ai le fichier "page.txt" où j'ai écrit mon code html, je dois modifier son extention de .txt à .html,ce fichier devient "page.html"  .

 

HTML est le langage universel utilisé pour communiquer sur le Web.C’est un ensemble de balises et d’attributs qu’on utilise pour passer des indications aux logiciels clients qui recevront le document écrit au format texte.

Navigateur :browser en anglais,c'est un logiciel permettant d’interpréter les commandes HTML et de surfer sur le web en affichant sur le moniteur les pages qu’il a interceptées.
Exemple : Internet explorer, Netscape, Mozilla Firefox,…
Balise : Une balise est un élément de texte (un nom) encadrée par le caractère inférieur (<) et le caractère supérieur (>). Par exemple « <H1> ».
Les balises HTML fonctionnent par paire afin d'agir sur les éléments qu'elles encadrent. La première est appelée « balise d'ouverture » et la seconde « balise de fermeture ». La balise fermante est précédé du caractère /) :
<marqueur> Votre texte formaté </marqueur>
A titre d'exemple, les balises <b> et </b> permettent de mettre en gras le texte qu'elles encadrent :
<b> Ce texte est en gras </b>
Attribut : Un attribut est un élément, présent au sein de la balise ouvrante, permettant de définir des propriétés supplémentaires. Les attributs se présentent la plupart du temps comme une paire clé=valeur, mais certains attributs ne sont parfois définis que par la clé.
Voici un exemple d'attributs pour la balise <p> (balise définissant un paragraphe), permettant de spécifier que le texte doit être aligné sur la droite :
<p align="right">Exemple de paragraphe</p>
Chaque balise peut comporter un ou plusieurs attributs, chacun pouvant avoir (aucune,) une ou plusieurs valeurs.

 

Structure d’une page Web :

 

<html>
<head>
<title>First web site</title>
</head>
<body>
Welcome this is my first web site
</body>
</html>

 

  La balise <HTML> : Indique que ce qui suit est écrit en HTML toutes les balises de la page Web doivent être écrites entre la balise <html> et </html>.
  L’entête :
Commence avec la balise <head> indique la présence du prologue, d’un titre compris entre le marqueur de début et de la fin.
Le titre est déclaré entre les deux balises <title> et </title> ce titre sera affiché dans la barre de titre du navigateur utilisé.

 

Le corps :
Le corps de la page web doit être situé entre les deux balises <body> et </body>.


*Les attributs de la balise <body>


Pour colorer le texte de votre page : L'attribut est : text="code de couleur". Exemple : <body text="#000000"> vous pouvez aussi mettre le nom du couleur que vous souhaitez en anglais au lieu du code  "#000000"

exemple :<body text="black">

Voici les codes de couleurs en html: ici

 

Pour colorer le fond d'écran de votre page : L'attribut est : bgcolor="code de couleur" Exemple : <body bgcolor="#558298">

 

Pour colorer les liens de votre page : L'attribut est : link="code de couleur" Exemple : <body link="#98555A">

 

Pour colorer les liens actifs de votre page : L'attribut est : alink="code de couleur" Exemple : <body alink="#DF000F">

 

Pour colorer les liens visités de votre page : L'attribut est : vlink="code de couleur".Exemple : <body vlink="#ECD400">

 

Pour mettre une image de fond d'écran sur votre page : L'attribut est : background="nom de l'image ".Exemple : <body background="image.gif">

 

Remarque : Dans le texte que vous tapez, les espaces et les retours à la ligne ne sont pas interprétés.

 

Le texte


Tout document Html contiendra en majorité du texte. Voyons comment l'agrémenter par quelques balises élémentaires.

 

Gras <B></B>
Italique <I></I>

Souligné <U></U>

 

Si on écrit:

 

 

<html>
<head>
<title>First web site</title>
</head>
<body text="black">
<B>Welcome this is my first web site</B>
<br>
<i>Welcome this is my first web site</i>
<br>
<u>Welcome this is my first web site</u>
<br>
<b><i><u>Welcome this is my first web site</u></i></b>
</body>
</html>

 

Voici qu'est ce qu'on obtient :

 

Capturer.JPG

 

Attention : Le cadre rouge est présent à cause du capture,cette image était capturé et ce cadre rouge n'a rien à avoir avec le code,en plus si on n'as pas utilisé la balise <br>,on va obtenir un affichage dans une seule ligne,la balise <br>permet de passer à la ligne suivante .

 

Rayé <STRIKE></STRIKE>

 

Rayé <S></S>
Indice <SUB></SUB>
Exposant <SUP></SUP>
Imprimé <TT></TT> (présenté dans une police de caractères à simple espacement)
Préformaté <PRE></PRE> (affiche le texte dans son format original)
Largeur <PRE WIDTH=?></PRE> (s'applique aux caractères)
Centré < CENTER></CENTER>  (pour le texte et les images)

Clignotement <BLINK>< /BLINK> (étiquette tournée en dérision)
Grandeur de la police <FONT SIZE=?></FONT> (entre 1-7)
Changement de la grandeur de la police <FONT SIZE=+|-?></FONT>

 

Si on écrit:

 

<html>
<head>
<title>First web site</title>
</head>
<body text="black">
<STRIKE>Welcome this is my first web site</STRIKE>
<br>
<S>Welcome this is my first web site</S>
<br>
<SUB>Welcome this is my first web site</SUB>
<br><br>
<TT>Welcome this is my first web site</TT>
<br>
<PRE>Welcome this is my first web site</PRE>
<br>
<CENTER>Welcome this is my first web site</CENTER>

<FONT SIZE="44">Welcome this is my first web site</FONT>
</body>
</html>

On obtient:

 

Capturer1.JPG

 

Grandeur de la police de base <BASE FONT SIZE=?> (entre 1-7; par défaut 3)
Couleur de la police <FONT COLOR="#$$$$$$"></FONT>
Sélection de fonte <FONT FACE="***"></FONT>
Texte en multi-colonnes <MULTICOL COLS=?></MULTICOL>
Longueur de la colonne <MULTICOL GUTTER=?></MULTICOL>(défaut est 10 pixels)
Largeur de la colonne <MULTICOL WIDTH=?></MULTICOL>
Espaceur <SPACER>
Type d'espaceur <SPACER TYPE=horizontal|vertical|block>
Grandeur d'espaceur <SPACER SIZE=?>
Dimensions de l'espaceur <SPACER WIDTH=? HEIGHT=?>
Alignement de l'espaceur <SPACER ALIGN=left|right|center>

 

LIENS ET IMAGES

 

Lier quelque chose  <A HREF="URL"></A>

Exemple: <a href="http://www.yahoo.fr">yahoo</a>

 

Ici on obtient le mot  yahoo sous forme de lien,et lorsqu'on clique sur ce lien,il nous renvoie vers le site yahoo.

 

Lier un pointeur <A HREF="URL#***"></A> (si c'est dans un autre document)
<A HREF="#***">< /A> (si c'est dans le même document)
 Fenêtre cible <A HREF="URL" TARGET="***||_blank|_self|_parent|_top"></A>
Définition du pointeur <A NAME="***"></A>
Relation <A REL="***"></A> (pas largement implanté)
Relation inverse <A REV="***"></A> (pas largement implanté)
Afficher une image <IMG SRC="URL">
Alignement  <IMG SRC="URL"ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>
 Alignement  <IMG SRC="URL" ALIGN=LEFT|RIGHT|TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM>
Alternative   <IMG SRC="URL" ALT="***"> (si l'image n'est pas affichée)
Carte-image  <IMG SRC="URL" ISMAP> (requiert un exécutable)
Carte-image client  <IMG SRC="URL" USEMAP="URL"> (requiert un exécutable)
Nom de la carte  <MAP NAME="***"></MAP> (décrit la carte)
Sections de la carte  <AREA SHAPE="RECT" COORDS=",,," HREF="URL"|NOHREF>
Dimensions  <IMG SRC="URL" WIDTH="?" HEIGHT="?"> (en pixels)
Bordure  <IMG SRC="URL" BORDER=?> (en pixels)
Espace environnant <IMG SRC="URL" HSPACE=? VSPACE=?> (en pixels)
Low-Res Proxy  <IMG SRC="URL"LOWSRC="URL">
Appel client  <META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">
Objet encastré  <EMBED SRC="URL"> (insert un objet dans la page)

Dimension de l'objet  <EMBED SRC="URL" WIDTH=? HEIGHT=?>


Les tableaux


En Html, les tableaux servent non seulement à aligner des chiffres mais surtout à placer des éléments à l'emplacement que vous souhaitez. L'usage des tableaux est donc TRES fréquent.
Un tableau est composé de lignes et de colonnes qui forment les cellules du tableau. Les balises de base sont donc
<table></table> : Cette commande est la commande principale pour ouvrir une zone de tableau. <table> </table> encadrent les limites d'un tableau.
<th></th> : De l'anglais table header, permet d'ajouter une rangée en en-tête. C'est le titre de la colonne. Les paramètres par défaut sont l'usage du caractères gras et la position centrée.
<tr></tr> :De l'anglais table row, marque le début d'une nouvelle ligne. <tr> </tr> permet de définir une rangée.
<td></td> : De l'anglais table data, est placé devant les informations qui composent les cellules. Les paramètres par défaut sont l'alignement à gauche et l'alignement vertical au centre.
Exemple :

Soit le code HTML suivant :

<html>
<head>
<title>First web site</title>
</head>
<body text="black">
<table border="2"><!--ouvrir un tableau !-->
<tr><!--ouverture de la premiere ligne !-->
<td>nom</td><!--premiere colonne dans cette premiere ligne !-->
<td>prenom</td><!--deuxieme colonne dans cette premiere ligne !-->
<td>age</td><!--troisiéme colonne dans cette premiere ligne !-->
<td>pays</td><!--Quatrième colonne dans cette premiere ligne !-->
</tr><!--fermeture de la premiere ligne !-->
<tr><!--ouverture d'une deuxieme ligne !-->
<td>David</td><!--premiere colonne dans cette deuxieme ligne !-->
<td>Loviso</td><!--deuxieme colonne dans cette deuxieme ligne !-->
<td>100</td><!--troisieme colonne dans cette deuxieme ligne !-->
<td>Tunisie</td><!--quatrieme colonne dans cette deuxieme ligne !-->
</tr><!--fermeture de ladeuxieme ligne !-->
</table><!--fermeture de la table !-->
</body>
</html>

 

Voici qu'est ce qu'on obtient:

 

Capturer2.JPG

 

Attention: les textes mis entre <!--   !--> sont des commentaires qui ne s'affichent pas au niveau de l'affichage.

En plus sans le border au niveau de <table BORDER="2">,on n'obtient pas de bordure qui sépare entre les champs.

 

Pour plus d'infrrmation sur les tableaux :click hier

 

 

 

LISTES

 

Liste non-ordonnée <UL><LI></UL> (<LI> avant chaque item de la liste)

Exemple:

<UL>
<LI>First
<LI>Second
<LI>Third
</UL>

 

ceci donne :

Capturer3.JPG

 

Compacte <UL COMPACT></UL>

Type d'indicateur <UL TYPE=DISC|CIRCLE|SQUARE> (pour la liste entière)
<LI TYPE=DISC|CIRCLE|SQUARE> (celui-ci & subséquent)
Liste ordonnée <OL><LI></OL> (<LI> avant chaque item de la liste)
Compacte <OL COMPACT></OL>
Type de nombres <OL TYPE=A|a|I|i|1> (pour la liste entière)

<LI TYPE=A|a|I|i|1> (celui-ci & subséquent)
 Nombre de départ <OL START=?> (pour la liste entière)
<LI VALUE=?> (celui-ci & subséquent)
Liste de définitions <DL><DT><DD></DL> (<DT>=terme, <DD>=définition)
Compacte <DL COMPACT></DL>
Liste de menus <MENU><LI></MENU> (<LI> avant chaque item de la liste)
Compacte <MENU COMPACT></MENU>
Liste de répertoires <DIR><LI></DIR> (< LI> avant chaque item de la liste)
Compacte <DIR COMPACT></DIR>

 

Les formulaires


Jusqu'à présent nous avons vu les différents moyens de diffuser de l'information et de la présenter. Mais sur le Web, l'information ne circule pas qu'en sens unique. Il est possible de faire circuler l'information dans les deux sens et de récolter diverses données et requêtes, en offrant la possibilité à l'utilisateur de renseigner des formulaires de saisie. Les applications sont très variées : sondage, réserver une chambre ou un billet de train, louer une voiture, faire une recherche à partir d'une base de données, etc... Tous les éléments d'un formulaire HTML doivent obligatoirement être encadrés par les marqueurs
<form> et </form>
Exemple :
<form>
<input ... >
<input ... >
<input ... >
...
</form>

 

Formulaire <FORM ACTION="URL" METHOD=GET|POST></FORM>
Transfert de fichier <FORM ENCTYPE="multipart/formdata></FORM>
Champ d'entrée de données <INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO|IMAGE|HIDDEN|SUBMIT|RESET">
Nom du champ <INPUT NAME="***">
Valeur du champ <INPUT VALUE="***">
Vérifié? <INPUT CHECKED> (boutons de vérification et boutons radio)
Grandeur du champ <INPUT SIZE=?> (en caractères)
Longueur maximum <INPUT MAXLENGTH=?> (en caractères)
Liste de sélection <SELECT></SELECT>
Nom d'une liste <SELECT NAME="***"></SELECT>
Nombre d'options <SELECT SIZE=?></SELECT>
Choix multiples <SELECT MULTIPLE> (permet une sélection multiple)
Option < OPTION> (items qui peuvent être sélectionnés)
Option par défaut <OPTION SELECTED>
Grandeur de la boîte d'entrée de données
<TEXTAREA ROWS=? COLS=?>
</TEXTAREA>
Nom de la boîte <TEXTAREA NAME="***">
</TEXTARE A>
"Wrap Text" <TEXTAREA
WRAP=OFF|VIRTUAL|PHYSICAL>
</TEXTAREA>

 

Soit le code HTML :

 

 

<html>
<head>
<title>First web site</title>
</head>
<body text="black">

<form>
<table border="2">
<tr>
<td>Login</td>
<td><input type="text"></td>
</tr>
<tr>
<td>Mot de passe</td>
<td><input type="password"></td>
</tr>
<tr>
<td><input type="button" value="envoyer"></td>
</tr>
</table>

</form>
</body>
</html>

 

 

Voici qu'est ce qu'on obtient :

 

Capturer4.JPG

 

Pour de plus en plus d'informations sur les formulaires:click hier

 

Précisons que les pages HTML utilisent la technique de l'hypertexte, permettant de spécifier des URL au sein des pages, vers d'autres pages. Cela crée une structure, au niveau mondial, qui peut être vue comme une toile d'araignée, d'où le terme de World Wide Web.


Sources

Des parties de cet article ont été réalisé à l'aide de :

LANGUAGE HTML:http://www.scribd.com/doc/26889505/Langage-HTML

LE GUIDE RAPIDE DU LANGAGE HTML par Kevin Werbach http://werbach.com/barebones/

Partager cet article
Repost0
Pour être informé des derniers articles, inscrivez vous :
Commenter cet article