- Codes HTML/CSS 1

Kikoo, nous allons comprendre un peu tout ces codes qu’on vous dit de coller à un certain endroit, vous ne vous êtes jamais demandé qu’est-ce-que c’était, même pas cherché ? Ces URLS, </title> ? ça vous dit pas quelquechose tout ça ? Nan ? Bon ben c’est parti, ouvrez votre bloc notes !

Matériaux :

-Bloc notes
-Un cerveau
-Et un ordi, pas plus. Lol

Après avoir ouvert le bloc notes, inscrivez-y ceci :

Code:

<title>Web-Composants</title>

Voilà vous remarquerai que title signifie titre en anglais :p, et c’est ce qu’il y a entre ces « title » c’est donc un titre, ce titre est situé tout en haut de la page internet, ce n’est pas un titre de page normal. Alors déjà pour commencer vos « codes », qui seront maintenant appelé balise lorsqu’ils sont encadrés de : < et > , commencent et se finissent enfin pour certain alors quand il y a une balise de commencement on met pas de slash ( / ) mais à la fin du code comme ci-dessus pour le </title> on en met un.

Résumé :

<code du début entre des balises> Votre texte, ceci dépand du code </ le slash qui dit que ce code est fini>

En code :

Code:

<title>Web composants</title>

Les balises se mettent dans un ordre comme ceci :

Code:

<strong><u><h1>LE TITRE</h1></u></strong>

… en symétrie^^, c’est des règles à respecter en informatique.

Celui-ci est mauvais :

Code:

<u><strong><h1>LE TITRE</h1></u></strong>

A chaque test quand je vous dirai d’enregistrer vous le ferez de la manière suivante :

-Enregistrer sous
-Nom du doc + format .HTML (« nomdudoc.html »)
-Tout les fichiers au lieu de fichier .TXT
-Puis valider, et allez là où vous l’avez enregistrer, faîtes deux clics, ceci s’ouvre avec votre page internet, et vous avez vos codes traduits, comme : <title>Web</title> Vous aurez un titre tout en haut normalement.

Voilà. Alors lançons nous dans le HTML (Hypertext Markup Language) pour l’instant.

Donc à part le <title> nous allons voir d’autres code s’appelant les balises par paires comme ci-dessus, ça commence par rien et se fini dans une deuxième balise par un slash.

Je vous met un code, copier/coller le puis enregistrer de la manière apprise ci-dessus, et nous allons détailler ensuite.

Code:

<title>Web-composants</title>
<h1>TITRE GRAND</h1>
<h2>TITRE UN PEU MOINS GRAND</h2>
<h3>TITRE ENCORE MOINS GRAND …</h3>
<p> Ceci est un paragraphe, j’écris n’importequoi pour faire passer un peu, mais ne vous préssé pas de le lire, il suffit juste de savoir que ceci est un paragraphe lol, blabla bla bla </p>

Bon voyons ceci déjà alors :

Code:

<title></title> est le titre tout en haut comme vous l’avez constaté.
<h1></h1> <h2></h2> … Sont des titres de page normal, plus le nombre est élevé, plus le titre est petit, essayé vous verrai.
<p></p> Vous l’avez sûrement deviné tout seul, ceci est un paragraphe, là où vous mettez votre texte.

Du plus : <em>En italic</em> <strong>En gras</strong> <u>Souligné</u>
Pour aligner un texte au mileu a gauche a droite, utilisons dans un titre par exemple : <h1 align="center">Texte centré</h1> <h1 align= "left">Texte à gauche</h1> <h1 align="right">Texte à droite</h1>

Comme vous le voyez, ces codes sont simples, écritures noires, pas centrer … Mettons un peu de piment là dedans. Pour mettre ces effets de texte, ce piment, essayons le code CSS (Cascading Style Sheet).
Alors là ça se complique un petit peu. Pour ajouter dans un code HTML, du css on commencera toujours par :

Code:

Ensuite il faut référencer, c’est par rapport à quel code que l’on veut l’effet ? Au titre <h1> par exemple, alors allons-y, sauf que l’on met pas de balises autour c’est obligé :

Code:

Il faut ouvrir le code pour ce référecement de titre on utilise ceci :

Code:

{

Quel code veut-on ? Une couleur par exemple(color) ? avec un clignotement de texte (blink)?Mais il y a toujours une propriété à tout ces trucs de codes, ah ah. Ce qu’on veut « Color » + on ouvre ce petit code color avec deux petits points « : » + la couleur que l’on veut « red » + On referme ce petit texte comme on à déjà mis la couleur que l’on veut, donc c’est bon, par ceci ; et voilà pour toutes les propriété, COLOR est une propriété. Ca nous donne :

Code:

Color : red ;
Text-decoration : blink ;

Ensuite on a presquefini, on voulait une couleur et un texte clignotant, c’est bon, il nous manque de refermer pour ce titre, il est fini, avec :

Code:

}

Puis on referme totalement pour tout les codes d’effets avec le CSS enfaite, quels qu’ils soient (h1, title …)

Code:

</style>

Voilà ce que ça donne :

Code:

<h1>VOTRE TITRE AVEC LES EFFETS</h1>
<style type="text/css">
h1
{
Color: red;
Text-decoration: blink;
}
</style>

Voilà, enregistrez comme tout à l’heure et constatez, que le titre est rouge et qu’il clignote. Allez plus interessant, un lien ?

Code:

<a href= "URL DE VOTRE LIEN D’OU VA MENER L’ECRITURE ">VOTRE ECRITURE</a>

Et on referme la balise de lien (<a>) avec un slash (</a>) . Pas compliqué essayez :

Code:

<a href= "http://web-composants.tonempire.net ">Forum de web Composant</a>

Voilà, maintenant vous voulez une image ?, pour insérer une image, une seul balise suffit, ça s’appel la balise seule.

Code:

Voilà, donc dans toutes les balises si je laisse les guillemets, laissez-les aussi, sinon après l’URL de l’image mettez un espace puis un slash, comme fait ci-dessus.
Créer une liste à puces ? Nous utiliserons les balises de paires : <li>pour ouvrir et </li> pour refermer ( / ).
Essayons, supposons je passe un demande ici sur Web-composants, je fais mes courses, une liste non-ordonnée.

Code:

<ul>
<li>Une bannière</li>
<li>Un design de forum</li>
<li>Un logo</li>
<li>Un fond d’écran …</li>
</ul>

Voilà, j’ai crée une liste simple, essayez et enregistrer, toujours et tout le temps comme d’habitude, <ul></ul> sont les balises qui encadrent <li></li> du début à la fin mais elles sont spécials, testez, c’est pour les listes non-ordonnées, comme les listes de courses. Essayons une liste ordonnée avec la balise <ol></ol> pour les premiers cycliste par exemple arrivés en 1er, 2ème … .

Code:

<ol>
<li>Franck Gligj</li>
<li>Abdel dlof</li>
<li>Mark lol</li>
<li>Georges dlj</li>
</ol>

Voilà testez et vous verrez, maintenant une liste à définitions :

Code:

<dl>
<dt>Le chat :</dt>
<dd> … est un animal de compagnie très mignon</dd>
<dt>Le chien :</dt>
<dd>…est un animal de compagnie, très aimé par les enfants, mais rejetés par les parents</dd>
</dl>

Voilà ici, cette liste à définition est ouverte par <dl> et fermé par </dl>, et vous comprendrez ce qu’est : <dd></dd> et <dt></dt>, rien de compliquez si vous essayez, et amusez vous à échanger par vos définition et tout réecrire le code pour vous habituer surtout.
Maintenant une liste avec vos propres puces ? (puces : petits ronds qui créent les listes juste avant chaque écriture)
Utilisons biensûr des codes CSS pour ce qui touche l’effet de texte, ou image, ou même la couleur ou la forme, ici c’est donc pour des puces. Mais pour chaque liste selon les formes il va falloir référencer le code CSS, avec le code HTML des lites, représentont, ceci avec des ID et des CLASS, tout d’abord les CLASS , qu’est-ce ?

Code:

<ul class= "cercle">
<li>Forme en cercle </li>
<li>Forme en cercle </li>
<li>Forme en cercle </li>
</ul>
<style type= " text/css">
.cercle
{
list-style-type: circle;

}
</style>

Alors voyons, cercle est le référencement pour la liste, vous voyez dans votre code en CSS, il y a un point devant cercle, mais on le mettra pas dans <ul>, ce point. Donc list-style-type : circle ; est pour que les puces soient en cercle, à la place de cercle et .cercle vous pouvez mettre ce que vous voulez, comme : .exemple et <ul class="exemple">

Mais ce qu’il y a dans les : { } reste comme il est. Voyons d’autres formes de puces. Donc avant tout, faîtes des tests c’est important pour apprendre. Copier/coller puis rentraînez vous à les connaîtres. Voici d’autres , copier/coller ce code pour voir ce que cela donne :

Code:

<h2>Quelques listes non ordonnées</h2>

<p>Voici une liste à puce non ordonnée sans modification (= <em>disc</em>) :</p>
<ul>
<li>Liste</li>
<li>à</li>
<li>puces</li>
</ul>

<p>Avec <em>circle</em> :</p>
<ul class="cercle">
<li>Liste</li>
<li>à</li>
<li>puces</li>
</ul>

<p>Avec <em>square</em> :</p>
<ul class="carre">
<li>Liste</li>
<li>à</li>
<li>puces</li>
</ul>

<p>Avec <em>none</em> (sans puces) :</p>
<ul class="rien">
<li>Liste</li>
<li>à</li>
<li>puces</li>
</ul>

<h2>Quelques listes ordonnées</h2>

<p>Liste à puces ordonnée sans modification (= <em>decimal</em>)</p>
<ol>
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
<li>Quatre</li>
</ol>

<p>Avec <em>decimal-leading-zero</em> (<strong>Ne fonctionne pas sous IE)</strong>) :</p>
<ol class="commence_a_zero">
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
<li>Quatre</li>
</ol>

<p>Avec <em>lower-alpha</em> :</p>
<ol class="lettres_minuscules">
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
<li>Quatre</li>
</ol>

<p>Avec <em>upper-roman</em> :</p>
<ol class="chiffres_romains">
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
<li>Quatre</li>
</ol>

<p>Avec <em>lower-greek</em> (<strong>Ne fonctionne pas sous IE</strong>) :</p>
<ol class="lettres_grecques">
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
<li>Quatre</li>
</ol>

<style type="text/css">
.cercle
{
list-style-type: circle;
}
.carre
{
list-style-type: square;
}
.rien
{
list-style-type: none;
}

.commence_a_zero
{
list-style-type: decimal-leading-zero;
}
.lettres_minuscules
{
list-style-type: lower-alpha;
}
.chiffres_romains
{
list-style-type: upper-roman;
}
.lettres_grecques
{
list-style-type: lower-greek;
}

</style>

Vous aurez remarqué que l’on met pas d’espace dans les referencements mais plutôt des tirets, ou on colle tout le text. De plus, tant que j’y suis, dans votre code si vous passez des lignes avez la touche ENTREE, l’ordinateur ne le prends pas en conte, il faut utiliser une balise seule : <br /> un espace après br et un slash, comme l’image à la fin, une balise seule en faite. Voilà vous avez dû voir pleins de styles de puces. Et maintenant que ce style de référencement de CSS à HTML : CLASS est compris, remplacez ces puces par vos propres images à puces, avec ce code CSS très facile :

Code:

Pour ce code il faut biensûr que vous ayez une liste (ul) et un lien (a) pour mettre ce code, donc je vais vous rajouter un petit quelquechose, car un code CSS sans rien, ne peut donner d’effets sur quelquechose s’il a rien.
Voici le code :

Code:

<ul>

<li><a href="http://nos-amis-les-animaux.fr.gd">Les animaux</a></li>
<li><a href="http://web-composants.tonempire.net">Forum Web composant</a></li></ul>
<style type="text/css">
ul
{
list-style-image: url("dossier.jpg");
}

a
{
color: blue;
text-decoration: none;
}
</style>

Il faut que votre image soit sur votre bureau et se nomme dossier.jpg pour que ce code ci marche, mais si votre image se nomme autrement et sous un autre format pas de problèmes mais par exemple,faites part au code que le dossier s’appel : et qu’il est au format : . Si l’image est dans un dossier qui se nomme Images vous allez mettre : ("…/Images/dossier.jpg") Voilà rien de plus simple, et au faite, ne donnez jamais de noms compliqués aux images sinon l’ordi risque de ne pas prendre en compte et le code ne marchera pas.
Si vous voulez vous repérer dans un code vous pouvez écrire, dans :

Code:

*/Ce texte, le visiteurs ne le voit pas*/

Exemple :

Code:

<ul>
<li>Fruits</li> */J’adore les fruits ahah !!! mais toi tu vois pas cette écriture*/
<li>Légumes</li>
</ul>

Voilà essayez surtout, faîtes des tests.
Comment créer un tableau en html et css ?? très facilement voici, je vous donne le code directement et on explique :

Code:

<table>
<tr>
<th>Nom</th>
<th>Age</th>
<th>Pays</th>
</tr>

<tr>
<td>Fabien</td>
<td>14 ans</td>
<td>France</td>
</tr>
<tr>
<td>Marie</td>
<td>18 ans</td>
<td>Australie</td>
</tr>
</table>
<style type="text/css">
table
{
border-collapse: collapse;
}
td, th
{
border: 1px solid black;
}
</style>