Tout d'abord bonjour à tous, j'ai remarqué depuis un certain moment que sur fr.gd les personnes s'en sortaient mal des fois car ils ne connnaissaient pas le code html et css, c'est pourquoi je créer des articles sur ceci.

A quoi sert ces codes ?

Ces codes servent à créer un design ; certaines écritures, des blocs, des paragraphes, des effets, à insérer des images, des caractères spéciaux et énormément d'autres choses.

Pour créer un site web, on doit informer l'ordinateur, c'est-à-dire lui envoyer des informations pour insérer une image, une écriture...Et pour cela il faut utiliser un langage que l'ordinateur peut comprendre.
Nous allons utiliser pour cela le langage CSS et HTML.

Que signifie HTML ou XHTML : HyperText Markup Language. Celui-ci contient des informations logiques et obligées à utiliser pour créer votre site web.

Que signifie CSS : Cascading Style Sheets. Celui-là sert plutôt pour les effets, les arrangements de texte, de bloc...pour présenter un design super jolie à vos visiteurs.

De quel logiciel vais-je avoir besoins pour insérer tout ces codes ?

Tout simplement de votre editeur de texte, qui doit sûrement être Bloc Notes.

Le voici :




Nous allons commencer directement ! Avec le code html et css.

Qu'est-ce qu'une balise ?

Une balise commence par < et se finit par >, exemple :

<balise>

Les balises sont invisibles pour le visiteurs, si elles sont correctes. Il existe deux types de balises : celles par paires et celles toutes seules.

+Les balises existantes par paires commence comme ceci <balise> et se termine par une autre balise par un / </balise>
Ce qui donne dans un petit code par exemple pour mettre un titre tout en haut de la page : <title> Je test </title>. Ce qui donnera après avoir tapé ceci dans votre bloc notes et avoir enregistré ceci et l'avoir ouvert avec internet (mozilla firefox) :




Info : Pour enregistrer faites : Enregistrer sous, appelé ce que vous voulez exemple : "nom" et ajouter l'extension .html, ce qui vous donne : nom.html et cliquer sur "Tout les fichiers" à la place de "Fichier texte".

+Puis les balises seules, qui sont plus rares comme par exemple insérer une image  : <img /> voilà la balise est finie. Mais il faut insérer et charger une image ce qui donnera : <img src="limagechoisi.jpg" />

-src signifie insérer ensuite il faut insérer quoi? Bah le titre de l'image ou du dossier et son extension, et tout ça entre guillemets.

Gardez votre bloc notes avec le titre "Je test". Nous allons y ajouter une image pour vous montrer. Tout d'abord il vous faut une image, puis mettez-là sur votre bureau tout d'abord. Ensuite dans le bloc notes tapez en dessous de <title> Je test </title> :

<img src="votreimage.jpg" />

. Et voilà remplacez ce qu'il y a en vert par le nom de votre image (par la suite pour ajouter des images .GIF utilisez tout simplement son extension .GIF).
Ce qui vous donne dans votre bloc notes :




Info : pour voir le résultat de vos codes informatiques transformés il vous faut ouvrir le fichier bloc notes là avec mozilla firefox (internet), autre info : Certains codes informatiques ne marchent pas avec Internet Explorer !

Ouvert avec une page internet vous devez avoir le titre + votre image comme ceci :




Et oui tout simplement avec ces codes vous obtenez une image et un titre !

Maintenant pour écrire :

Il faut un titre au début ! mais pas un titre de page internet en haut mais un titre qui s"affichera dans la page internet. Alors nous allons utiliser les balises soit : <h1><h2><h3><h4>...Plus on mets des grands nombres plus le titre s'affichera en petit titre. Essayons dans le bloc notes (toujours avec le même fichier "Je test") de mettre un titre alors mettez ce code :

<h1>Ceci est un titre</h1>

...Par la suite vous mettrez le titre et les phrases que vous voulez !

Il vous faut ensuite du texte ! Du texte !? Oui, quoi, des paragraphes, nous allons donc utiliser la balise <p> pour marquer le paragraphe. Alors essayons !

<p>Ceci est un paragraphe super intéressant mais ne vous foullez pas à le lire, garder de la place pour les prochaines choses à apprendre </p>

Bon jusqu'à la rien de difficile alors continuons un peu

Comment insérer un lien ?

C'est très facile nous allons utiliser la balise <a> mais il faut un endroit où nous guider lorsque l'on clique sur le lien ! Alors essayez ceci :

<a href="lenomdulien.com">L'écriture qui s'affichera comme lien sur le site (ce qui sera
visible)</a>

Récapitulatif du lien :

On utilisera toujours cette forme : <a pour le lien ensuite un espace et toujours href=".........com"> ensuite le nom qui s'affichera sur le site, moi je choisi Lien puis on referme la balise (le lien) </a>
Ce qui me donne dans mon bloc notes :




Et avec ma page internet :



Et oui c'est moche le Lien est collé à l'image, comment faire pour le faire aller à la ligne? Ca ne marche pas sur Bloc Notes avec la touche ENTREE, l'ordinateur ne prend pas en compte la touche entree donc, il nous faut une balise, pour que l'ordinateur comprend ce langage et lui dire "S'il te plaît ordinateur fais aller ce mot à la ligne". Donc nous allons utiliser une balise seul : <br /> à côté et même avant le  code comme ceci, essayez :

<br /><a href="http://laide.fr.gd">Lien</a>

Mettez-en même deux espace à la ligne si il faut. Voir plus.

Voici ce que ça donne avec le bloc notes :




Et ce fichier ouvert avec internet :



Ceci est bien plus présentable. A partir de maintenant je ne détaillerai pas plus avec les images internet/bloc notes car ceci prend trop de temps, mais parfois je vous montrerai comeme avec les images pour mieux comprendre.

Vous avez envie de centrer votre titre ? reprenons ce qu'on a fait tout à l'heure :

<h1>Ceci est un titre</h1>

Et modifions-le en ajoutant align=center ce qui signifie l'alignement centré. Ce qui nous donne :

<h1 align=center>Ceci est un titre</h1>

Et voilà votre titre est placé sur votre site et centré, mais si vous voulez modifier, pour le mettre à droite ou à gauche par exemple, utilisez les mots anglais à la place de center, comme left et right (gauche et droite).

Voici maintenant quelques balises pour améliorer vos phrases et titre :

<u>...</u>	Souligner
<strong>...</strong>	Mettre en gras
<i>...</i>	Mettre en Italic

Il y a un ordre à ces balises, nous ne pouvons pas les placers n'importe où et dans n'importe quelle position, exemple ceci est FAUX :

<h1><u>Le soulignement est mal placé</h1></u>

Ce code est mal placé ! Ceci est juste une règle à respecter des codes HTML. Les balises doivent être "également répartis" c'est-à-dire nous ne les plaçons pas n'importe comment, si vous avez une balise juste avant le mot il vous faudra mettre la cloture de cette balise juste après le mot. Comme ceci :

<h1><u>Le soulignement est bien placé</u></h1>

Allez ! Maintenant il faut améliorer tout ça, nous allons utiliser le code CSS. Pour l'utiliser il faudra dire à l'ordinateur "Je vais te parler dans un autre langage que tu connais" et pour cela nous allons utiliser cette balise : <style type="text/css"> ensuite il faudra lui dire sur quelles sortes de balises il faut que cela s'applique donc on va faire ça pour les paragraphes par exemple donc p puis il faut Ouvrir le propriété donc il nous faut une accolade { puis enfin mettre la propriété voulu par exemple ce qui concerne la couleur des paragraphes donc color puis il faut lui indiquer la propriété avec deux points : mettre la propriété, on parle de couleur de tout les paragraphes, on va donc mettre une couleur, exemple rouge (mais il faut lui parler en anglais donc red) ...red et refermer la propriété avec point virgule ; et refermer tout ça avec l'autre accolade } puis refermer ce langage avec </style> voilà ce que ça donne ^^ :

<style type="text/css">
p
{
    color: red;
}
</style>

Voilà vous devez maintenant comprendre, si vous ne comprenez pas voici un petit schéma qui devrai vous aider :


POUR VOIR L'IMAGE EN PLUS GRAND  : faites clique droit sur l'image puis Afficher l'image.