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>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">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>Les informations contenues entre cette balise sont toutes importantes pour former un bon site.
Code: Select all
<title>TONTITRE</title>Code: Select all
<link rel="shortcut icon" href=”favicon.ico” />Code: Select all
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />Code: Select all
<meta http-equiv="content-language" content="fr" />Code: Select all
<link href="style.css"title="Défaut" rel="stylesheet" type="text/css" media="screen" /> 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 !
