Bien, je suis de retour avec de nouvelle connaissances, et cette fois ci je vais pousser vos capacités au maximum, autrement dit, plutôt que de mettre deux trois codes par ci par là pour agrémenter votre présentation, je vais vous apprendre a créer un site web !
Bien évidement ce ne sera pas un site de niveau professionnel, et ce sera un site dit de façade ou « statique » en opposition avec un site dit « dynamique », que je ne développerais pas pour l'instant (la seule différence a connaître pour vous, est que les site dynamiques utilise le php et le javascript).
Donc revenons a nos mouton :
Deux langage sont nécessaire pour créer un site web un temps soit peu agréable, le (x)HTLM (Hypertext markup language) et le CSS (Cascading style sheets). Le HTML sert de socle au site, et le CSS a le mettre en ordre graphiquement.
Nous allons donc commencer par le HTML
(pour créer vos pages html et css je vous conseil le logiciel [url=''http://notepad-plus-plus.org/release/5.8.6'']notepad++[/url], il est gratuit et avec sa coloration syntaxique il vous aidera énormément)
Commençons je vous sens trépigner d'impatience avec des question plein la tête, c'est si simple que ça ? Comment on fait ?
Tout d'abord vous devez comprendre la composition d'une page HTML :
<!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" >
<head>
<title>...</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
</body>
</html>
Analysons ce code, vous devez le voir en 3 partie :
-de <!DOCTYPE... jusqu'à ''fr''>
-de <head> à </head>
-de <body> à </body>
La première partie sert a dire à votre navigateur web (désormais je vais l'appeler browser), je suis un document HTML en français etc...
Nous ne nous attarderons pas sur cette partie puisque qu'elle n'a aucun intérêt dans votre apprentissage.
Ensuite la zone défini entre les balise <head>...</head>, c'est ce que je vais appeler la phase de définition, la balise <title>...</title> permet de donner un titre à votre page, vous devez donc toujours la rempire sinon ça donnera ça :
donc de préférence ayez pitié de vos lecteurs, mettez un titre ex-pli-cite, merci.
Ok alors title c'est c'est pour le titre, logique, mais ça veut dire quoi ça :
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> ?
Eh bien mes amis, vous aller pas le croire mais ça sert a dire que la page est codé en HTML, c'est tout.
Mais euh faut vraiment tous ça ?
Oui, et non... je vais être plus explicite, certain serveur utilise le charset=iso-8859-1 par défaut (apache) mais rien ne dit que le browser du client vas faire de même, autrement dit, pour éviter tout problème, laisser cette balise dans tout vos page, c'est plus sûr.
Nous verrons plus tard d'autre balise a placer dans le header.
Et maintenant, la partie la plus importante et là ou commencent vraiment les choses intéressantes, le body, il est défini entre les balise <body>....</body>, et pour faire bref, c'est là ou vas se trouver le contenu de tout votre site.
Tous les codes donné dans coder en html (sur le forum) pourrons être utilisé dans cette partie.
Bien bien bien, commençons à monter votre page, je vais vous apprendre deux balise :
<span>...</span>
<div>...</div>
La différence fondamentale que vous devez faire entre les deux c'est que <span> est une balise dit ''in line'' et <div> une balise ''block''. Une balise ''in line'' vas comme sont nom l'indique ce placer dans les ligne, comme toutes les balise que je vous ai montré précédemment, alors qu'une balise ''block'' vas former, incroyable, un bloc de texte dans la page, les ''in line'' sont contenu dans les ''block'', pour l'instant, c'est tous ce que vous avez à savoir là dessus.
Mais devinez quoi, ces balises n'ont aucun effet, du moins pour l'instant, je vous expliquerais un peut plus tard leurs utilité réelle.
Pour l'instant ce que nous allons faire c'est délimiter 4 partie :
En-tête : Bannière + titre si ça vous tente
Menu : bon là ça m'a l'air assez explicite
Corps de la page : là aussi, du moins j'espère....
Pied de page : lien vers partenaire / plan du site et autre comme vous le voudrez
bien, ok pas de problème, et on fait comment pour les délimiter ?
C'est là qu'intervient nos deux petite balise de tout à l'heure.
Ces balise peut prendre deux type :
<span id=''***''>...</span> et <div id=''***''>...</div>
ou
<span class=''***'>...</span> et <div class=''***''>...</div>
La différence entre id et class est simple, mais vous la comprendrez mieux plus tard :
id n'est utilisable qu'une fois dans la page c'est a dire si vous nommez un id=''LDPM'' vous ne pourrez plus utiliser d'autre balise nommé id=''LDPM''. Tandis que pour l'attribut class vous pouvez utiliser autant que de balise nommé class=''text'' que vous voudrez. (class et id sont appelé des attribut, retenez bien ce mot, il vous resservira)
donc cela vous donne un page comme ceci :
<!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" >
<head>
<title>...</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="bannière"></div>
<div id="menu"></div>
<div id="corps"></div>
<div id="pied_de_page"></div>
</body>
</html>
La suite au prochain post.
Accueil du Site
Accueil
Rechercher
S'enregistrer
Sujet: Créer un site web (statique) 
Tu as de bonnes connaissances en la matière, notre site n'est pas en de mauvaises mains^^
