Bonjour à tous ^^
Ce matin, j’ai eu une drôle d’envie, celle de créer un tuto de programmation xD
Pourquoi ? Et bien, je ne le sais pas trop ^^’ Je ne suis pourtant pas très fort dans ce domaine mais j’ai eu cette envie :s Je vais donc commencer par vous parler du html et du css.
Tout d’abord, pourquoi vais-je commencer par le html/css ?
Et bien, tout simplement, parce que le html/css c’est ce que vous regardez grâce à votre navigateur =p Ce sont les langages de programmation de pages web ^^ Avec ceux-ci vous pourrez faire des pages web… statique, et oui, j’ai bien dis statique, les pages web dynamiques ou qui stocke des informations, nécessitent d’autres langages de programmations (les plus connus étant le php et le javascript), que l’on verra un peu plus tard =p
Mais tout d’abord, commençons le html/css. Et tout d’abord, à quoi cela correspond ^^
Et bien, on pourrait comparaît le html/css a un logiciel word en fonctionnement.
- Spoiler:
En Vert vous avez le contenu (en gros, ce qui est visible lorsqu’on lit un document) en rouge, vous avez la gestion des styles etc… et en bleu, vous avez le logiciel ^^
Et bien, le fonctionnement du html/css est quasiment identique à celui-ci ^^
En guise de logiciel (Couleur Bleu) on a les balises <html></html> qui indique le début (<html>) et la fin (</html>) du code exploitable ^^
Après, vous avez le corps du document (Couleur Vert) qui est délimité par les balises <body></body>. Avec <body> qui indique le début du corps du document et </body> qui en indique la fin ^^ C’est donc ici que vous direz, je veux un tableau, je veux une image, je veux un paragraphe etc…
Et ensuite, vous avez la gestion des styles et autres…. (Couleur Rouge) qui est délimité pas les balises <head></head> (en gros, c’est la tête pensante du document xD) <head> indiquant le début et </head> sa fin ^^
Bien que l’on pourrait se dire que la gestion des styles et autres n’est peux être pas le primordiale, c’est souvent le plus important (ou presque). Entre ces balises <head></head> on devra indiquer, l’emplacement de la feuille de style (où on dira, le tableau a un fond bleu, le fond du site est cette image, les liens seront de couleurs Vertes si on ne les a pas déjà visité et de couleur Bleu sinon etc….
Et, ce n’est pas tout, car on devra aussi y indiquer le titre du site, les mots clés du site (pour les moteurs de recherches ^^) et d’autres choses ^^
Donc, cette partie qui aurais pu sembler insignifiante et en fait assez primordiale, c’est la tête pensante du site ^^
Et dans Body on indiquera seulement :
- On met un lien
- On met une image
- On met un tableau
- Etc…
Maintenant, il nous faut commencer le code.
Donc, tout d’abord, nous avons besoin du logiciel :
- Code:
-
<html>
</html>
Nous avons aussi besoin du gestionnaire des styles et autres… (<head>), et celui-ci est situé dans le logiciel, donc ça donne : (Les ____ correspondant à une tab... car, vous ne pouvez pas voir les tab ici
)
- Code:
-
<html>
_____<head>
_____</head>
</html>
Après, nous avons aussi le corps de la page à mettre (<body>) celui-ci est situé lui aussi dans le logiciel, mais (comme dans l’image) est en dessous et n’est pas dans le gestionnaire des styles (et autres …) donc, cela donne :
- Code:
-
<html>
_____<head>
_____</head>
_____<body>
_____</body>
</html>
Pourquoi j’ai mis les balises de cette manière-là ?
Et bien, c’est pour faciliter la lecture et la modification du code, là, on retombe sur nos pieds donc, on ne doit pas avoir oublier de fermer des balises. Car si on avait oublié d’en fermer, la balise </html> n’aurais pas étais au même niveau que la balise <html> par exemple ^^
Mais le premiers cours ne se termine pas là =p
Si on vient de voir l’architecture type, il nous manque des donnés importantes (obligatoires).
Tout d’abord, nous devons indiquer au navigateur, la version du langage que nous avons utilisés. Comment, et bien grâce à un doctype avant la balises <html> ^^
En règle général nous utiliserons ici :
- Code:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 indiquant la version et le langage utilisé, et Transitional indiqué qu’elle « sous version » de celui-ci.
Il en existe 2 sous versions :
- Strict
- Transitional
- Frameset
La sous version Strict est une version strict (étonnant non xD) du langage, la version transitional est une version qui accepte un peu plus de choses, et la version Frameset est essentiellement utilisé pour l’utilisation d’iframe… mais, on ne va pas voir ça ^^’
Nous devons également mettre des attributs à notre balise <html>
L’une qui vas falloir mettre bêtement (xmlns=http://www.w3.org/1999/xhtml)
Et l’autre un peu moins bêtement (mais tout aussi facile, et pas véritablement obligatoire) on vas indiquer la langue de notre page web =p pour ce faire on vas utiliser l’attribut xml:lang auquel on vas donner la valeur fr (parce que je pense que l’on vas créer une page en français, mais si vous écrivez une page en anglais vous mettes en en italien it etc…)
A la place de <html> on mettra donc :
- Code:
-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
Nous allons aussi mettre le titre du site web.
Pour le titre :
- Code:
-
<title>Bienvenue sur mon site !</title>
Et ce code dois être dans la tête pensante du site (donc, les balises <head></head> =p)
Cela donne donc :
- Code:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
_____<head>
_____ ______<title>Bienvenue sur mon site !</title>
_____</head>
_____<body>
_____</body>
</html>
![[Html/Css] Tuto N°1 Empty](https://2img.net/i/fa/empty.gif)
![[Html/Css] Tuto N°1 Icon_minitime](https://2img.net/i/fa/icon_minitime.gif){kind=icon}
Dim 7 Aoû - 23:18![[Html/Css] Tuto N°1 Html_e10](https://i.servimg.com/u/f45/13/75/51/18/html_e10.jpg)
![[Html/Css] Tuto N°1 521436](/users/3911/18/28/68/smiles/521436.gif)