(x)HTML
Cours par Riku Asakura.
Nous n'avons pas la prétention d'être enseignant, mais nous mettons tout de même à votre disposition un petit cours basique sur le langage de structure (x)HTML et de style CSS.
Introduction
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 petites 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, c'est le mot "style". Ce langage va vous permettre de styliser l'apparance 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 decos de votre site
Bien entendu je suis là pour vous simplifier la vie, donc nous allons é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 ! J'utilise moi-même Notepad ++ depuis maintenant deux ans... et ça simplifie énormément la vie.
Voici deux petites illustrations :
Inutile d'interpréter les images je pense que c'est plutôt explicite...
Maintenant bien équipé, vous êtes prêts à en prendre plein les neurones :p
xHTML... 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 (bien souvent tiré de l'anglais... ben ouais XD) qui se trouve précédé d'un " < " et suivi d'un " > "
exemple :
Les balises ne sont en aucun cas visibles par le visiteur (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. Bref, je m'attarderai dessus quand on parlera des CSS.
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 :
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 :
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, une ligne horizontale, un bouton, etc. Quelque soit l'élément, la balise se termine toujours de la même manière, après le mot suivit d'un espace et d'un "/" (slash)
Bon ! C'est bien tout ça, mais on va pas aller loin avec si peu XD
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érer ?
Si ! Justement, on appelle cela des attributs
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. Son nom est alt, sa valeur est un mot 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 (unique)
- 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