Révisions

HTML = HyperText Markup Language

Structure de départ d’une page HTML :

<HTML>

<HEAD>

</HEAD>

<BODY>

Tout ce que vous inscrivez entre ces 2 balises apparaît à l’écran

</BODY>

</HTML>

La balise Paragraphe :

A n’utiliser qu’entre les 2 balises <BODY> et </BODY>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<br/>

Phasellus in rutrum nulla.

<br/>

Nunc ac odio a mi congue gravida.

</p>

La balise de retour à la ligne/BREAK :

<BR />

Contrairement aux balises vues précédemment, pas besoin de fermer cette instruction.

On dit tout simplement au bloc de texte de faire un retour à la ligne à un endroit précis.

META :

Définir la langue d'une page, ici, en français, pour que le navigateur puisse correctement interpreter nos accents :

<head>

</head>

Cas spéciaux : Tout dépend dont la page est encodée (avec NotePad++ par exemple...) "iso-8859-1" peut être remplacé par "UTF-8"

Règles générales de programmation :

- Lorsque vous tapez votre code, n’hésitez pas à faire des retours à la ligne, à sauter des lignes, à faire des tabulations pour différencier facilement les parties de vos pages.

Si vous faites des retours à la ligne dans votre code, ce qui s’affiche sur votre page ne change pas !

Plus votre code sera aéré, plus il sera simple de vous y replonger quelques mois plus tard, si vous en avez besoin. Tout particulièrement si vous savez que d’autres personnes peuvent avoir à travailler sur votre code dans l’avenir.

- Bien nommer vos fichiers .html

Avec des noms simples, courts et facile à retenir.

Pas d’espace entre les mots ! Si vous avez besoin de nommer votre page avec plusieurs mots, il vous faut IMPERATIVEMENT mettre un tiret (touche 6) ou un tiret_bas (touche 8)/underscore à la place de l’espace.

Sinon le serveur aura du mal à comprendre ce que vous lui demandez et vos liens ne fonctionneront pas.

Prenez cette habitude du underscore à la place d’un espace, ainsi que la lisibilité du nom du fichier pour tous documents présents sur le serveur de votre site : jpeg, pdf, word, swf…

- Toujours penser à nommer son fichier de page d’accueil « index.html » !!!

- Un peu de littérature sur le webdesign, ça peut vous être très très utile lors de la création de votre site : http://designspartan.com/info_generale/webdesign-10-regles-dergonomie-et-constats/

Créer un lien texte :

<A HREF=«index.html»>Je suis un lien hypertext qui redirige vers la homepage de ce site.</a>

On peut ajouter de nombreux éléments à cette balise, comme le titre du lien : title=“Lien vers la page d'accueil”
Par exemple : <A HREF=«index.html» title="Lien vers la page d'accueil" >...</a>

Insérer une image dans une page

L’information “Title” ouvre une infobulle affichant une description de l’image lorsqu’elle est survolée par la sourie.

Width = largeur : permet de spécifier la largeur de l’image

Height = hauteur : permet de spécifier la hauteur de l'image

Border = bordure : permet d’ajouter un cadre autour de votre image. La valeur est exprimée en pixel.

Créer un lien avec une image : un bouton

L'information 'border="0"' nous permet de nous débarasser du cadre bleu qui encercle nos images lorsqu'on les transforme en lien.

Ouvrir un lien dans une autre fenêtre

<a href="http://www.google.com" title="lien vers Google" target="_blank">google</a>

Dans le descriptif du lien, nous ajoutons l’information target = cible

Blank = vierge/vide

Lien vers un autre endroit d'une même page : une ancre

<a href="#nom_de_mon_ancre">Lien vers la cible à atteindre sur cette page.</a>

<span id="nom_de_mon_ancre">La cible de destination du lien.</span>

Ajouter une couleur de fond à votre page

Ajouter une couleur à vos textes et à vos liens

link = lien

Attention, toutes les informations ajoutées dans la balise <body> s'appliqueront à toute votre page.

Centrer un élément sur la page

<center>Que ce soit une image ou un texte</center>

Mise en forme des textes et des paragraphes

Mise en gras : 2 types de balises existent :
<b>gras</b> et <strong>gras aussi</strong>
B= bold

Mise en italique : 2 types de balises existent :
<i>italique</i> et <em>italique aussi</em>

Souligner :
<u>souligner</u>
underline

Indice :
<sub>_indice</sub>

Exposant :
<sup>^exposant</sup>

~~Texte barré :~~
<strike>~~texte barré~~</strike>

Effet stabilo :
<span style="color: black; background:yellow">le texte est écrit en noir, mais son fond est jaune</span>

Span = fusion

Aligner un paragraphe :
<p align="right">paragraphe aligné à droite</p>

<p align="left">paragraphe aligné à gauche</p>

<p align="justify">paragraphe justifié</p>

<p align="center">paragraphe centré</p>

Mise en couleur d’une partie d’un texte, au sein d’un paragraphe
<font color="#FF0000"> Je veux du rouge, mais uniquement dans ce que j’écris ici !</font>

Font = police de caractère

Créer des titres pour vos paragraphes

Par défaut, en HTML, il existe 6 différentes tailles de titre : H1 le plus grand. H6 le plus petit.

H = Heading = Rubrique

<h1>Titre de classe H1</h1>

<h2>Titre de classe H2</h2>

<h3>Titre de classe H3</h3>

<h4>Titre de classe H4</h4>

<h5>Titre de classe H5</h5>

<h6>Titre de classe H6</h6>

Liste à puces

<ul> </ul>
UL = Unordered List = Liste non ordonnée

Par défaut, vos entrées sont précédées d'un rond. Mais vous pouvez avoir des puces carrées en spécifiant leur type :
<ul type="square"><li>liste1</li><li>liste2</li><li>liste3</li></ul>

Li = list

<ol> </ol>
OL = Ordered List = Liste ordonnée

<li>liste1</li><li>liste2</li><li>liste3</li>

Liste numéroté avec des chiffres Romain
Avec des chiffres romains en majuscule :
<ol type="I"></ol>

Liste numéroté avec des chiffres romains en minuscule :
<ol type="i"></ol>

Liste numéroté avec des lettres :
Avec des lettres en majuscule :
<ol type="A"></ol>

Liste numéroté avec des lettres en minuscule :
<ol type="a"></ol>

Vous n’êtes pas obligé de commencer une liste par 1, I, A, mais parce que vous voulez, à l’aide de la fonction "start=" dont voici un exemple :

<ol type="A" start="3" >
<li>Troisièmement</li>
<li>Quatrièmement</li>
</ol>

Créer des tableaux

Voici la structure d'un tableau simple : Un ligne et tois colonnes :

TR = table rows = Les lignes du tableau

TD = Table data = Données du tableau
Les TD sont les cellules comprisent au sein d'une ligne. Ce sont donc nos colonnes.

Un autre exemple, ici , un tableau composé de deux lignes et de quatre colonnes :

Fusionner des céllules : Fusion de colonnes : Colspan

<table width="400" border="1">
<tr>
<td colspan="3">Titre</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>

Fusionner des céllules : Fusion de lignes : Rawspan (raw=ligne)

<table width="200" border="1">
<tr>
<td rowspan="2">Titre</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>

Disposition du texte ou d'une image au sein des cellules :
<td valign="top">Je m'affiche en haut de la cellule</td>
<td valign="middle">Je m'affiche au milieu de la cellule</td>
<td valign="bottom">Je m'affiche en bas de la cellule</td>

<td align="right">Je m'affiche à droite de la cellule</td>
<td align="left">Je m'affiche à gauche de la cellule</td>
<td align="center">Je m'affiche au centre de la cellule</td>

Spécifier une couleur aux bordures de tableaux
<table width="550" border="10" bordercolor="#660099">

Spécifier une couleur de fond à vos tableaux
<table width="550" border="10" bgcolor="red">

Spécifier une couleur de fond à une seule celulle de vos tableaux
<td bgcolor="#00FF00">Hello</td>

MARQUEE = Faire défiler un texte dans une page

<marquee>Hello</marquee>

<marquee direction="down">Hello</marquee>

Direction détermine la direction vers laquelle votre texte va se diriger.
4 directions possibles : "up", "down", "left" et "right".

<marquee direction="up" scrollamount="3">Hello</marquee>

Scrollamount détermine la vitesse de défillement

Dans cet exemple, nous avons placé du texte entre nos balises, mais ça fonctionne également avec une images.

Créer un état à vos boutons : OnMouseOver=Quand la sourie est dessus

Votre bouton change d'aspect lorsqu'il est survolé par le curseur de la sourie.

Lorsque vous créez des liens avec des images, pensez à créer un nouveau répertoire dans votre dossier "images" afin de mieux vous y retrouver. Ici, le répertoire s'appel "boutons".

Pensez également à bien nommer vos images en fonction de leur état :
nom_de_mon_image_off.jpg / nom_de_mon_image_on.jpg

Formulaire - Remplir un champs texte

<form>
Saisisez votre nom : <input type="text" name="nom" size="20" />
</form>

<form>
Saisisez votre mot de passe : <input type="password" name="nom" size="20" />
</form>

<form>
Joindre un document : <input type="file" name="nom" size="20" />
</form>

Faire apparaitre le nom de votre champ dans la celulle de saisie et le faire disparaitre une fois la cellule séléctionnée :

Formulaire - Liste de sélection

Formulaire - Boutons radio (dédié au choix unique)

Quel est votre moyen de transport préféré ?<br />
<input type="radio" name="choix" value="voiture">voiture
<input type="radio" name="choix" value="avion">avion
<input type="radio" name="choix" value="train">train

Quel est votre moyen de transport préféré ?
voiture avion train

Checkbox – Case à cocher (adapté pour les choix multiples)

Quelles sont vos séries préférées ?<br />
<input type="checkbox">Sherlock<br />
<input type="checkbox">True Detective<br />
<input type="checkbox">Game of Thrones<br />
<input type="checkbox">Walking Dead<br />

Quelles sont vos séries préférées ?
Sherlock
True Detective
Game of Thrones
Walking Dead

Formulaire - Textarea

Formulaire - Bouton de validation

Créer une icône pour votre site - Favicon

Cette icône s’affichera dans la barre d’adresse et dans l’onglet « favoris » de vos internautes.

Créez une petite icône carré de 64 pixels par 64 pixels, par exemple.

Allez sur la page : http://www.html-kit.com/favicon/ pour convertir votre image au format .ico
Car malheureusement, ni Gimp, ni Photoshop ne peuvent pour l'instant générer ce type de format d'image.

Uploadez votre image et téléchargez votre image convertie.
Placez l'image.ico à la racine de votre site.

Pour l'intégrer dans vos pages, il suffit de l'intégrer dans l'entête <head> </head> en utilisant le code suivant :

<html>
<head>
<title>Ma page à une icone</title>