Votre première page web
Création de votre première page web
Et maintenant il est enfin temps de sauter dans le codage HTML et créer votre première page web!
- Ouvrez votre éditeur de texte ou de programmation et de créer une nouvelle page.
- Si votre éditeur met un peu de code prédéfinis dans n'y effacer il suffit que nous allons utiliser nos propres.
- Copiez le code ci-dessous dans votre document et le sauvegarder quelque part, vous vous souvenez (si vous avez installé WAMP dans le didacticiel précédent, vous pouvez sauvegarder le fichier dans votre répertoire racine WWW soit en tant que index.html ou index.php, assurez-vous juste que c'est le seul indice de fichiers là si elle sera visible quand vous tapez localhost dans votre navigateur).
XHTML 1.0 strict modèle
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>My first web page!</title>
</head>
<body>
<p>Hello there ...</p>
</body>
</html>
Affichage de votre page web
Notre code HTML sera pas faire grand chose par lui-même et est à peu près juste un fichier texte. Pour voir la page web, il décrit, nous allons avoir à l'ouvrir dans un navigateur Web.
- Démarrez votre navigateur Web et allez dans Fichier> Ouvrir un fichier et sélectionnez le fichier HTML que vous venez de créer ou tapez localhost dans la barre de navigateur si vous avez WAMP course et placé votre fichier dans le répertoire racine WWW.
Vous devriez maintenant voir une page semblable à ceci:
Votre première page web
Analyser votre page web
D'abord laissez moi vous dire que le code je vous ai donné ci-dessus est comme super correct car il reçoit et suit les spécifications XHTML 1.0 du W3C à la lettre. Vous pouvez sans problème utiliser en tant que XHTML 1.0 strict modèle pour toutes vos pages Web à venir.
Doctype
Cette première ligne n'est pas un tag HTML réelle, néanmoins elle est nécessaire dans chaque document HTML. Cette doctype dite indique au navigateur Web de quel type de fichier il s'agit. Dans notre cas, c'est un fichier XHTML 1.0 strict. Ces doctypes ne sont pas immuables et peuvent toujours être consultés afin s'il vous plaît de vous éviter la torture de l'apprentissage par cœur.
élément HTML
...
</html>
C'est là que notre effectif document HTML commence. Le <html>...</html> élément n'est pas tellement intéressant par lui-même. Elle marque seulement le début et la fin de tout notre code HTML. Le xmlns attribut est nécessaire pour les documents XHTML, les deux autres sont facultatifs mais c'est une bonne pratique de les inclure.
l'élément de tête
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>My first web page!</title>
</head>
Vient ensuite la <head> de notre document HTML. Sauf pour les <title> élément qui apparaît dans la fenêtre du navigateur, aucune de ces informations tête est affiché sur la page. La tête porte habituellement des informations comme la langue, de codage des caractères, les informations de copyright, de description de page et ainsi de suite. Le <meta> balise dans notre code est facultative mais doit être incluse en tant que de toute façon une sauvegarde au cas où le serveur ne fournit pas cette information ou vous avez affiché la page hors connexion.
corps de l'élément
<p>Hello there ...</p>
</body>
C'est là que les choses commencent à devenir intéressantes. Le <body> élément contient tout le contenu qui sera affiché en tant que page Web. Dans ce cas, nous avons un élément de paragraphe <p> avec le texte Bonjour là-bas ... Dans les chapitres suivants, vous aurez la chance de connaître plusieurs de ces balises HTML que vous pouvez utiliser pour créer votre page web.
En forgeant qu'on devient le maître
La meilleure façon d'apprendre comment créer un site web est le do-it-yourself approche. Je vous suggère d'essayer tous les exemples tutoriel dans votre propre page et jouer avec le code pour obtenir une meilleure compréhension de la façon dont les choses fonctionnent.