Europc Cyberomania Assistance-Dépannage Informatique reparation cybercafe a Verdun

Menu principal

Exploitation à responsabilité limitée, située au pied des côtes de Meuse, au hameau de Mandre à CHATILLON SOUS LES COTES.

Un fleuriste aux-iles-fleuries à Verdun livre vos fleurs à Verdun

RAPID'GAZ distribue une large gamme de gaz industriels, de fluides frigorigènes ainsi que du propane en bouteille à usage industriel ou domestique

Ludovic Champlon, compagnon du devoir et maître artisan, vous propose une étude gratuite de votre toiture, appropriée à votre budget.

La ferme du groseillier est une ferme pédagogique qui fait du camping, gîte et marché paysan

cyber games jeux vidéo gratuits a verdun dans la meuse jouez en ligne à de nombreux jeux vidéo en Flash et gratuitement. Vous pouvez également visiter et télécharger de bons jeux gratuits

Flash immo 55 votre agence immobiliere en meuse

Le petit train du cirque est un manège que vous pouvez louer pour des comités d'entreprise, des animations diverses arbres de noël, marché de noël

Le petit train du cirque est un manège que vous pouvez louer pour : - des comités d'entreprise, - des animations diverses (arbres de noël, marché de noël ect...) Nous nous déplaçons dans dans toute l'Europe.

L'ATELIER RESTAURANT à Verdun est un restaurant entierement rénové, de style moderne et sobre.

reparation informatique

	Aujourd'hui	476
	Hier	708
	Cette semaine	2506
	Ce mois-ci	11652
	Tous les jours	4720472

Visiteurs

Popular Tags

View All Tags

Powered by Joomla Tags

RueDuCommerce.fr

Bases de HTML

Bases de HTML

Créer un site revient à créer des pages HTML, du moins pour un site basique. Ces quelques pages vous permettront de mieux comprendre ce qu'on entend par HTML, et comment le construire...

Qu'est-ce que le HTML

Le HTML (HyperText Markup Language) est le langage de programmation basique des documents Web.

Il permet assez simplement de construire des pages relativement complexes, formées de paragraphes, tableaux, listes. Le principe est cependant différent d'un éditeur de texte classique.

La notion de base à connaitre est celle de balise.
Les balises sont des repères, qui permettent au navigateur de savoir si le texte qu'il va afficher est en gras, de quelle taille, ...
Une balise commence ainsi : <nom_de_la_balise> et finit ainsi : </nom_de_la_balise>.
Et on remplace nom_de_la_balise par b pour signifier texte en gras, i pour texte en italique, p pour nouveau paragraphe, font pour changer la police (style, taille, couleur, ...).

Une autre particularité des pages HTML est la notion de lien hypertexte.
Ces liens permettent de naviguer d'une page à une autre en un simple clic.
Ils sont repérés par la balise <a> (fermée par </a>).

Syntaxe principale

Une page HTML est toujours conçue sur le même principe.

Tout d'abord, une balise <html> pour signifier que l'on écrit bel et bien une page html.

Puis le head de la page, autrement dit l'entête. Celui-ci est repéré par la balise <head>.

Dans cet entête, on va y trouver plusieurs choses :

Le titre de la page web, entre la balise <title> et son homologue </title>
Les variables méta, autrement dit certaines constantes qui indiquent l'auteur de la page, les mots-clé et le thème principal de la page (pour simplifier le travail des moteurs de rechercher), dans des balises <meta> (pas de </meta>, ces balises s'utilisent avec leur argument directement dans la balise : <meta name="Subject" content="Présentation du langage HTML">)
Les scripts Javascripts, ou plutôt les fonctions de base qui seront utilisées dans la suite de la page. Ces fonctions sont à l'intérieur de la balise <script langage="Javascript"> ... </script>
Les styles de police, c'est à dire, comme dans Word, un ensemble de paramètres : la taille du texte, sa couleur, son indentation...

La fin de l'entête est signalé par la fin de la balise head, c'est à dire </head>.

Ensuite se trouve le corps de la page, repéré, vous l'avez deviné, par la balise <body>.
Là dedans peuvent se trouver alors votre texte, des balises définissant des paragraphes, des liens, des images, et tout ce que vous pouvez imaginer de plus farfelu (ou presque...).
Cette balise se finit bien sur par </body>.

Définir l'apparence du texte

Les balises les plus utilisées sont celles permettant de formater le texte, pour l'afficher de plusieurs façons différentes.

Il y a tout d'abord des balises pour les groupes de texte :

<div align="...">votre texte</div>
Cette balise permet de faire une zone de texte alignée à gauche, droite, centrée, ou justifiée. Le paramètre à entrer aura donc la valeur left, right, center, ou justify.

<center>votre texte</center>
Cette balise permet de centrer du texte de façon plus simple.

Puis les balises qui permettent de travailler directement l'aspect du texte :

<b>votre texte</b>
Cette balise permet d'obtenir du texte en gras : ce texte est en gras (bold).

<i>votre texte</i>
Cette balise permet d'obtenir du texte en italique : ce texte est en italique.

<u>votre texte</u>
Cette balise permet de souligner du texte, comme ceci par exemple.

<strike>votre texte</strike>
Cette balise permet de barrer du texte, de cette façon.

<sup>votre texte</sup>
Cette balise place du texte en exposant, comme ceci.

<sub>votre texte</sub>
Cette balise place du texte en indice, comme cela.

Enfin, on peut jouer directement sur la police de caractère (fonte) en travaillant sa couleur, taille, etc :
<font face="..." color="..." size="...">votre texte</font>
Le nom de la police va aller dans le paramètre face="..." : il peut valoir Arial, Courier New, ou d'autres polices classiques. Attention à ne pas utiliser de polices de caractère trop exotiques, ou l'utilisateur verra uniquement une police de remplacement (ou alors, proposez votre police en téléchargement).
La couleur peut être entrée de deux façons différentes : soit le code héxadécimal (6 caractères de 0 à F : RRVVBB), soit un nom de couleur pour les couleurs classiques (blue, white, ...).
La taille peut aussi être entrée de deux façons : soit en absolu, en entrant un chiffre entre 0 et 6, soit en relatif, en entrant un chiffre entre -6 et +6.
Par exemple, la balise <font face="Helvetica" color="#FF0000" size="+2">test</font> donnera le résultat suivant : test

Bien évidemment, vous pouvez accumuler plusieurs balises pour obtenir le texte que vous désirez, mais attention à garder l'ordre des balises : la première balise ouverte doit être la dernière fermée :
<font color="#00FF00" size="+1"><i><b>Ceci</b> est du texte bien joli</i></font>
donnera : Ceci est du texte bien joli

Créer des tableaux

Les tables sont, en HTML, le meilleur moyen d'arriver à un beau design. Sans en utiliser, on aura forcément un look extrêmement linéaire, alors qu'on peut disposer des informations sur une page entière avec des tables.

La balise à connaître est donc la balise <table> (qui se ferme bien évidemment avec son homologue </table>).

Mais ce n'est pas tout. Une fois qu'on a initialisé la table, il faut créer des lignes, puis des colonnes.
Les lignes sont crées grâce à la balise <tr> (fermées par </tr>), et les colonnes (ou plutôt les cases dans les lignes) sont crées grâce à la balise <td>, et fermées par </td>.

Votre premier tableau va donc ressembler à ceci :

<table border="1"> //Initialisation du tableau
<tr> //Création de la première ligne
<td>case 1</td> //Création de la première case de la première ligne, et fermeture de cette case
<td>case 2</td>
<td>case 3</td>
<td>case 4</td>
</tr> //Fermeture de la première ligne
<tr> //Création de la deuxième ligne
<td>ligne 2 - case 1</td>
<td>ligne 2 - case 2</td>
<td></td> //Création d'une case vide
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>ligne 3 - case 3</td>
<td>ligne 3 - case 4</td>
</tr>
</table> //Fermeture du tableau

case 1	case 2	case 3	case 4
ligne 2 - case 1	ligne 2 - case 2
		ligne 3 - case 3	ligne 3 - case 4

C'est déjà bien, mais pour arriver à un beau look, on est encore loin... ;o)

Paramètres de la balise <table> :

Bordure :
Tout d'abord, comme nous l'avons vu dans l'exemple précédent, un paramètre significatif est le border, c'est à dire la largeur des traits délimitant le tableau. Vous pouvez faire varier cette valeur de 0 à n'importe quoi, 0 signifiant qu'il n'y a pas de bord (pratique pour placer des éléments sur une page sans montrer le lien qu'ils ont).
Associé à ce paramètre se trouve bordercolor, qui doit être égal à une couleur définie en html, c'est à dire sous la forme #RRVVBB : #FF0000 pour du rouge vif, #FFFFFF pour du blanc, ...

Arrière-plan :
La couleur de fond est définie par le paramètre bgcolor, qui prend toujours en argument le même type de format pour définir la couleur.
Si l'on préfère mettre une image en arrière plan, on utilisera alors le paramètre background="nom_du_fichier".
Il faut savoir que la balise background est prédominante sur la balise bgcolor, c'est à dire que si l'on définit les deux paramètres, l'image sera affichée en priorité, et si elle comporte des zones de transparences (images gif, png, ...), alors ces zones seront remplies par la couleur bgcolor.

Alignement :
L'alignement horizontal du contenu de la table est défini par un paramètre, align, qui peut prendre les valeurs left, right, ou center.
A noter que dans un tableau, on peut aussi spécifier l'alignement vertical. Le nom du paramètre est valign, et il peut prendre les valeurs top, middle, ou bottom.

Taille du tableau :
La taille du tableau est réglé par deux paramètres, width et height, qui définissent respectivement la largeur et la hauteur du tableau.
Chacun de ces paramètres peut être défini de deux façons : soit en nombre de pixels (exemple : width="256"), soit en pourcentage, pour obtenir un résultat dépendant de la taille de la fenêtre du navigateur (exemple : height="75%").

Marges :
On peut spécifier deux types de marges pour un tableau :
L'espacement entre les cellules, défini par cellspacing, et dont la valeur est un entier, de 0 à ce que vous voulez...
La marge entre le bord d'une cellule et le contenu de cette même cellule, grâce au paramètre callpadding, qui doit être égal à en entier, toujours entre 0 et ce que vous voulez.

Paramètres des balises <tr> et <td> :

De même que pour la balise <table>, on peut définir la bordure, l'arrière plan, l'alignement, et la taille de chaque cellule ou chaque ligne indépendamment, en utilisant les mêmes arguments. Attention à rester cohérent sur les tailles (ne pas redéfinir des tailles de cellules quand vous avez défini pour la ligne entière) ou vous pourrez avoir des résultats quelque peu aléatoires, en fonction des navigateurs et de leur façon d'interpréter le code html.

Fusionner des cellules :

Fusionner des cellules permet d'obtenir une grande flexibilité dans la création du tableau, en ayant à la fois de très grandes cellules et des très petits, toujours très bien alignées.
Pour cela, il faut utiliser les paramètres des balises <tr> et <td> qui sont rowspan et colspan (respectivement pour fusionner verticalement et horizontalement). Ces deux paramètres seront égaux au nombre de cellules représentées par la cellule courante. Si ce n'est pas très clair, rien de tel qu'un petit exemple :