Apprendre à coder le HTML by Infernus

Venez poser vos question et proposer vos codes ici.

Moderators: Animateurs, Responsables

Post Reply
Infernus
Jeune membre
Jeune membre
Posts: 16
Joined: Wed 2 Jun 2010 10:29
Location: Belgique, A.R.D

Apprendre à coder le HTML by Infernus

Post by Infernus » Wed 2 Jun 2010 15:27

Bonjour, je fais actuellement un énorme tutoriel pour vous, pour vous apprendre à coder le HTML, du moins les bases, ainsi que le CSS :)

Sommaire


1. Introduction
2. Bases du HTML

- Quel éditeur prendre ?
- Explication du code principal

Suite à venir :)


1. Introduction


Grâce au langage de programmation Web « HTML », vous pourrez créer votre propre site web, à la main ! Si vous avez rêvé de créer votre site web totalement personnalisable, sans logiciel, je vous invite à poursuivre cette lecture ! Grâce au langage « CSS », vous pourrez créer et adapter un design original et joli, d’après vos propres images et envies !



2. Bases du HTML


a) Quel éditeur prendre ?


Pour coder le HTML, l’éditeur que chacun a dès le départ est le « Bloc-Note ». Vous allez me dire « Mais pourquoi utiliser le Bloc-Note ? Tant que t’y es, dis-nous d’utiliser une truite ! »
Meuh non ! Nous pouvons utiliser le Bloc-Note pour coder car le HTML ne requiert pas de compilation, donc pas de compilateur ! Mais personnellement, je n’utilise pas le Bloc-Note pour ça.

« T’utilises quoi alors ? »

J’utilise le fameux logiciel joli et très utile qu’est « Notepad++ », un logiciel trouvable gratuitement à partir du lien suivant : http://sourceforge.net/projects/notepad-plus/

Vous verrez, cette petite merveille vous facilitera la vie !

Une fois installé, découvrez par vous même ce logiciel pas bien compliqué, mais allez dans l’onglet « Langage » et sélectionnez « HTML ». Sur certaines versions, il faut cliquer sur « Langage », « H » puis « HTML ».


b) Explication du code principal


Nous voilà enfin dans le vif du sujet. En effet, nous allons pouvoir commencer la théorie avant la pratique ! Tout d’abord, je vous ferez remarquer que le code minimal d’un site est constitué de ce code :

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>TONTITRE</title>
<link rel="shortcut icon" href="favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<meta http-equiv="content-language" content="fr" />
<link href="style.css"title="Défaut" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>

</body>
</html>


« Wah ! Mais que vois-je ?!? »

Et bien c’est le code minimal qu’il faut pour avoir un site web correct, en HTML. Ne vous inquiétez pas, je vais vous expliquer le code !
Le code :

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">


laissons-le de côté…

Commençons par le plus simple : La balide <head> :

Code: Select all

<head>
<title>TONTITRE</title>
<link rel="shortcut icon" href="favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<meta http-equiv="content-language" content="fr" />
<link href="style.css"title="Défaut" rel="stylesheet" type="text/css" media="screen" />
</head>


Comme vous le voyez, la balise Head contient des informations. Celles-ci sont comprises entre la balise <head> et </head>. Comme nous le verrons plus tard, la plupart des balises se terminent par elles-mêmes précédée d’un antislash (/). Ici, c’est le cas de head : <head></head>.

Les informations contenues entre cette balise sont toutes importantes pour former un bon site.


Code: Select all

<title>TONTITRE</title>
correspond au titre du site. Ici, le titre du site sera « TONTITRE ».

Code: Select all

<link rel="shortcut icon" href=”favicon.ico” />
correspond au lien du favicon. Ici, le favicon se trouve dans le même dossier, et porte le nom « favicon » et à l’extension « .ico ». Cette extension peut également être « .jpg », que vous connaissez sûrement.

Code: Select all

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
n’est pas à modifier, sauf, si vous connaissez un meilleur charset, vous pouvez modifier « iso-8859-15 » par un autre charset.

Code: Select all

<meta http-equiv="content-language" content="fr" />
laissez comme ça.

Code: Select all

<link href="style.css"title="Défaut" rel="stylesheet" type="text/css" media="screen" /> 
correspond au lien de la feuille de style (CSS), tout comme le favicon. Là, la feuille se trouve également dans le même dossier que la page, se nomme « style » et à l’extension « .css ». Cette feuille de style sera codée plus tard en langage CSS.

Maintenant que vous avez compris le contenu du <head>, je vais vous expliquer le fonctionnement des liens tels que la feuille de style, ou du favicon.

Prenons comme exemple l’exemple du favicon. Code : href=”favicon.ico” (Ne prenons que ce qui nous intéresse vraiment).

« href » signifie « url » si vous voulez. href=”x” signifie que le lien du favicon est x et n’a pas d’extension. Soit, vous comprendrez donc que favicon = nom du favicon et .ico = extension du nom.

« Problème : Mon favicon se trouve dans le dossier images ! »

Pas de problème voyons ! Dans ce cas, vous mettez href=”images/favicon.ico” ! Si le dossier se nomme favicon et se trouve dans le dossier fav qui lui se trouve dans le dossier images, et que le dossier images se trouve dans le dossier Mathieu, et que la page se trouve dans le dossier au dessus de Mathieu, le code sera :

href=”Mathieu/images/fav/favicon/favicon.ico”

N’est-ce pas simple ?

Le code entier link rel sera donc :

Code: Select all

<link rel="shortcut icon" href=”Mathieu/images/fav/favicon/favicon.ico” />



Pour terminer ce chapitre d’explication, expliquons la balise <body>.

Cette balise, tout comme la balise <head>, est considérée comme « Matrice ». Elle constitue la matrice de votre site, donc son « moteur », si vous préférez. Les deux balises matrices sont
- <body> (qui se termine par </body>, donc avec antislash)
- <head> (pareil, se termine par </head>)

Dans chacune de ces balises il y a des informations, un contenu. Ces balises sont donc également « récipient ».

« Body » signifie « corps ». Vous l’aurez compris, cette balise constitue le corps de votre site.
« Head » signifie « Tête », ou traduit en « En-tête ». Cette balise constitue donc l’en-tête du site.

La fin de balise, tout au bout, « </html> », n’est pas seule, rassurez-vous, elle a un ami ! Son ami, c’est la toute première phrase. Vous vous rappelez, celle qui est très bizarre et qui commence par « <html ». On peut considérer cette balise comme étant le « vrai » moteur du site. Tout est dedans, réellement tout ! Mais bon, on peut la laisser de côté, il faut juste l’inscrire...

Suite demain !
Développeur / Codeur (x)HTML / CSS, PhP / MySQL, un peu de JavaScript (JS)

En apprentissage : C++, VB.net & Java :)

Mat' en force :D

Post Reply