HTML by Demonis (Matthieu)

Informations

Demonis — 2017-12-16 10:38:24 UTC

- Si vous voulez participer aux traductions du padlet (anglais, espagnol, etc...), vous pouvez me contacter par mail: demonisyt@gmail.com
- Des captures d'écran seront ajoutées pour vous aider.

Leçon 1: Prérequis

Demonis — 2017-12-16 15:40:53 UTC

Pour commencer, vous avez besoin de deux choses:
- D'un logiciel qui vous servira à écrire du texte et à la modifier. Il en existe plusieurs, mais je vous conseil Sublime Text 3. (Sinon vous pouvez utiliser NotePad ++ ou d'autre logiciels du même type).
- D'un navigateur internet tel que Google chrome, Internet explorer, Mozilla firefox, etc..

Vous devrez donc installer un logiciel de chaque type.

Sublime Text 3: https://www.sublimetext.com/3
Google Chrome: https://www.google.fr/chrome/browser/desktop/index.html

Leçon 4: La balise "html"

Demonis — 2017-12-16 18:29:49 UTC

Déjà, qu'est ce qu'une balise ? Les balises sont les éléments qui vous permettront de structurer votre code et d'y définir les éléments qui figureront sur votre site ainsi que leur ordre. Généralement, les balises fonctionnent par paire. Un ouvrante et une fermante.

Pour la balise "html", sa balise ouvrante est et sa balise fermante est (le / indique ici une fermeture).
Elle sert à indiquer au logiciel qui execute votre code qu'il est écrit en HTML.

Le code:

Leçon 2: Que veut dire HTML ?

Demonis — 2017-12-16 19:46:03 UTC

"HTML" sont les initiales de HyperText Markup Language.

Leçon 3: Préparatifs

Demonis — 2017-12-16 20:04:27 UTC

Pour commencer, créez un dossier (le nom importe peu). Personnellement, je l'ai nommé: "Mon Site".

Ensuite, dans ce dossier, créez un dossier "img" (il servira à stocker les images ou vidéo que vous introduirez dans votre code), un dossier "css" (où vous mettrez vos feuille de style (sera expliqué dans un futur Padlet) et un fichier texte nommé "index.html" (le pourquoi du nom vous sera expliqué plus tard). C'est ce fichier texte qui contiendra votre code.

Leçon 5: La balise "head"

Demonis — 2017-12-16 20:19:57 UTC

Traduit littéralement par "tête", cette balise vous servira à donner les informations de base de votre site tel que les fichiers liés à votre code (les feuilles de style par exemple), etc....
Sa balise ouvrante est et sa balise fermante est .

Le code:

Exercice 1

Demonis — 2017-12-16 20:27:44 UTC

Créez un code contenant les deux balises vues précédemment.

Leçon 8: La balise "meta"

Demonis — 2017-12-16 20:33:18 UTC

La balise sert à changer certaines paramètres de votre site. Elle se trouve dans la balise .

La balise fonctionne seule.

Je vais ici vous présenter la balise de type "charset". Lorsque vous allez ajouter du texte à votre site, il se peut que certains caractères ne soit pas bien retranscrits sur votre site. Pour pallier à ce problème, on va mettre la paramètre "charset" à "utf-8".

Le code:

Leçon 6: La balise "body"

Demonis — 2017-12-17 10:27:21 UTC

Traduit littéralement par "corps", c'est ici que sera structuré les différentes parties de votre site web.
Sa balise ouvrante est et sa balise fermante est .

Le code:

Leçon 7: La balise "p"

Demonis — 2017-12-17 10:28:09 UTC

La balise "p" (

) sert à entrer des paragraphes de texte sur votre page web.

Exercice 2

Demonis — 2017-12-18 08:41:52 UTC

Vous allez créer une zone de texte où vous inscrirez "J'aime écrire sur ma page web".

Correction: Exercice 2

Demonis — 2017-12-18 08:45:44 UTC

Leçon 9: La balise "title"

Demonis — 2017-12-18 08:51:16 UTC

La balise "title" ( et ) sert à changer le nom de l'onglet (de cette page web uniquement).

Exercice 3

Demonis — 2017-12-18 12:25:43 UTC

Ajoutez à votre code une balise "title" afin de changer le nom de l'onglet en "Mon Site"