Les langages de quoi ?...

Pourquoi apprendre à coder ? Serais-je à la hauteur ? Et si je veux faire uniquement du PHP ?

En voici des questions pertinentes ! Et je vais y répondre.
Apprendre à coder c'est bien, savoir pourquoi, c'est indispensable. Vous ne coderez pas juste pour faire mumuse (bien qu'à certains moments cela s'y apparente), mais bien pour créer quelque chose. Vous pourrez par exemple aggrémenter vos blogs, vos forums, ou même construire votre propre site Internet ! Sachez que coder en HTML (ou xHTML, mais je me contenterai de l'appellation la plus courte :p) et utiliser du CSS est à la portée de quiconque s'y intéresse.
Si vous souhaitez vous engager dans la programmation d'interfaces (PHP, AJAX etc...) sans apprendre les bases de la structure... vous courrez à votre propre perte !

Ok ok, tu nous parles de xHTML, HTML, CSS, c'est bien tout ça mais c'est quoi ? Oo

Eh eh ! Doucement les questions, j'y viens, ne vous en faites pas.
Une petite chose importante avant de commencer à tapoter vos premiers codes avec vos petites mimines, il faut savoir de quoi on parle, et l'utilité de chaque langage... En effet, on parle globalement de deux langages de base : HTML et CSS. Pourquoi ne pas en utiliser qu'un seul des deux me direz-vous... tout simplement parce que nous avons besoin des deux !
Le HTML sera les murs de votre maison, le CSS sera sa décoration (intérieure ou extérieure, peu importe :p).

Les bases...

Bien !
Définissons simplement les langages que nous allons utiliser durant ces cours. Comme je le disais, on a globalement le HTML et le CSS... pourquoi globalement ? Pour tout vous avouer, j'utilise l'abréviation HTML à tort, puisque nous utiliserons en réalité le XHTML... quelle différence ?

• Le XHTML est plus stricte que le HTML, en gros si vous savez coder en XHTML, vous le saurez aussi en HTML. Je ne vous donne pas la signification des initiales, elle ne ferait que vous fournir des informations inutiles pour la suite de notre cours. Sachez juste que le HTML sert à construire la structure de notre site (oui, je parlerai de site puisqu'à la fin de ce cours, vous saurez en construire un). Le HTML va donc dire : "ça c'est mon menu, ça c'est mon header, ça c'est le contenu de mon site, etc"

• Le CSS est, en français, un code de style en cascade. L'important à retenir pour en comprendre l'utilité, c'est le mot "style". Ce langage va vous permettre de styler l'apparence de votre site. Le CSS va donc dire : "toi le menu tu dois être en rouge et à gauche, le header tu dois être centré, la police de mon contenu sera du arial, etc"

Je le redis donc :
- HTML sera la structure de votre site
- CSS sera la déco de votre site

Bien entendu je suis là pour vous accompagner dans cet apprentissage, nous allons donc éviter, dans un premier temps, de mélanger HTML et CSS. Nous aborderons donc en premier... le HTML !!
Mais avant de vous lancer sur les pistes noires de la programmation, je vais vous conseiller deux logiciels pour écrire du code. Oui parce que nous, codeurs, avons nos petits logiciels bien réservés :p
Sachez que vous, oui vous ! Vous possédez déjà un tel logiciel sur votre PC. En effet le notepad, ou bloc-note de votre ordinateur suffit amplement. Cependant, pour une meilleure compréhension des codes, je vous conseille largement de télécharger un de ces deux logiciels.

Notepad ++ (pc - windows) - 1,94Mo
Smulton (mac) - 4,7Mo

D'ailleurs je vous l'oblige ! Ces logiciels ajoutent une chose importante à votre code : la coloration syntaxique. C'est une coloration qui se fait de manière ciblée sur les différents composants de nos codes.
Voici une illustration avec deux images :

J'utilise moi-même Notepad ++ depuis maintenant deux ans... et ça simplifie énormément la vie. Maintenant bien équipé, vous êtes prêts à en prendre plein les neurones :p

(x)HTML, la base : les "Balises"

Youhouuuuuuu ! On rentre dans le vif du sujet !
Kécessé une balise ? Oo

Alors une balise (ou tag(s) en anglais) c'est la base de la structure d'un code HTML (je dis HTML mais en fait je parle de XHTML ;) )
D'aspect, une balise est un mot (tiré de l'anglais) qui se trouve précédé d'un " < " et suivi d'un " > "

Les balises ne sont en aucun cas visibles par l'internaute (celui qui visite votre site Internet), ce n'est qu'une simple information fournie au navigateur. Le navigateur, c'est le logiciel que vous utilisez pour aller sur Internet. Majoritairement, c'est Internet Explorer, mais aussi Mozilla Firefox, Opera, Safari, Google Chrome. Bref, je m'attarderai dessus quand on parlera des CSS, l'important c'est de savoir qu'il en existe plusieurs.

Il faut savoir qu'il existe deux types de balises (Ah ça y est ! On a pas vu les bases, tu nous ajoutes déjà de la difficulté !)
Les balises par paire, et les petites solitaires (les auto-fermantes) :

Balise par paire :

La première balise sert à indiquer le début d'un contenu HTML (oui c'est la balise html... donc ça reste logique), la deuxième balise sert à signaler la fin de ce contenu. Une balise de fin est toujours la même que la balise de début, seule différence, le mot est précédé d'un "/" (slash)

Balise solitaire (auto-fermante) :

Ces balises servent généralement à insérer un élément. Ici par exemple on insère une image avec cette balise. Mais on peut aussi insérer un saut de ligne <br />, une ligne horizontale <hr />, etc. Quel que soit l'élément, la balise se termine toujours de la même manière, après le mot arrivent un espace et d'un "/" (slash)

Bon ! C'est bien tout ça, mais on ne va pas aller loin avec si peu ! :p
En effet, nous avons bien nos balises, mais il y a une chose importante à y insérer... et oui ! Vous voyez bien, par exemple, notre balise img, elle insère quoi ? Oo
Aucune information sur l'image destinée à être insérée ?
Si ! Justement, on appelle cela des attributs

Résumons :
Il existe deux types de balises :
- balise par paire (elle englobe un contenu)
- balise solitaire (elle insère un élément)

Les attributs

Allez ! Compliquons un peu les choses.
Mais rien de trop compliqué, je vous l'assure. Il n'y a que deux choses à retenir sur le vocabulaire de l'attribut.
Il possède un nom, et une valeur. Reprenons par exemple la balise d'insertion d'image :

Ici nous avons un attribut. "src" est le nom de l'attribut, "image.jpg" est la valeur de cet attribut.
Je ne vous donne pas d'exemple abstrait, cet attribut sert simplement à aller chercher l'image à insérer sur votre site. Ici ce sera l'image nommée image dont l'extension est .jpg

Prenons de bonnes habitudes de suite ! Quand on insère une image, il y a un attribut important à informer, il s'agit du texte alternatif qui sert à remplacer l'image si celle-ci ne s'affiche pas ou si le visiteur ne peut pas la voir. Son nom est alt, sa valeur est un descriptif de l'image.

Mais non je ne vais pas vous abandonner, voilà comment sera présentée une balise d'insertion d'image avec le strict minimum :

Si vous avez des attributs à donner à une balise par paire (et vous en aurez) il vous faudra placer ces attributs uniquement sur la première balise (celle d'ouverture).

Les balises sont toujours écrites en minuscule !
Les noms des attributs sont toujous écrits en minuscule !
La valeur des attributs peuvent comporter des majuscules, espaces, etc... à condition de ne pas être un chemin (adresse de fichier).

Bon ! Pour tout vous avouer, ça ne va pas vous faire avancer beaucoup si on en reste là. Nous allons donc, à partir de maintenant, reprendre le début de cours que Pyrrha nous avait commencé. Petit résumé des bases :

- Il existe des balises par paire, et des balises solitaires (auto-fermantes)
- Une balise a besoin d'attributs qui se composent d'un nom et d'une valeur
- Attention à vos majuscules et minuscules !

Vous venez de suivre le cours le plus ennuyeux de ceux prévus sur Never Utopia. La suite est prévue plus pratique, et vous commencerez même à créer vos petites pages de site, vos liens, vos images, etc... pour en arriver à la conception d'un petit site Internet.

Cours suivant : Premier document HTML