Cours votre première page HTML

Cours votre première page HTML, tutoriel & guide de travaux pratiques en pdf.

Internet

Appelé aussi le web, la toile …

Environnement Client-Serveur

Les applications sur le web fonctionnent selon un environnement client/serveur, cela signifie que des machines clientes (des machines faisant partie du réseau) contactent un serveur, une machine généralement très puissante, qui leur fournit des services, l’accès aux sites …

Moteur de recherche

Il existe une énorme quantité d’informations sur Internet (plusieurs millions ou milliards de documents, sur les milliers ou millions de serveurs), et ces informations sont pour la plupart renouvelées quotidiennement. Le moteur de recherche est un élément indispensable pour s’y retrouver !
Un moteur de recherche (Searchbot en anglais) est une machine spécifique (matérielle et logicielle) chargée d’indexer des pages web afin de permettre une recherche à l’aide de mots-clés dans un formulaire de recherche.
Les principaux : AltaVista, Google, Yahoo …

Le navigateur

L’élément clé pour la navigation au sein des pages web est le navigateur (en anglais browser). Utilisé sur le client, ce logiciel est capable d’interroger les serveurs web, d’exploiter leurs résultats et de mettre en page les informations grâce aux instructions contenues dans la page HTML.
Les deux principaux navigateurs utilisés sur Internet :

Mozilla Firefox,
Microsoft Internet Explorer.

ATTENTION : malgré la volonté du W3C d’uniformiser les langages pour assurer une compatibilité optimale entre tous les intervenants sur le web. Les implémentations des normes ne sont jamais parfaites. Lors de l’affichage d’une page html, il est donc fréquent de ne pas obtenir exactement le même comportement suivant le navigateur utilisé.

Du concret !

HTML est un langage à balises. Les documents écrits dans un langage à balises contiennent essentiellement deux choses : des données, et des meta-données. Pour faire simple : la meta-donnée est une information supplémentaire qui ajoute un contexte ou une signification particulière à une donnée. Un exemple, prenons le texte
Ma première page en HTML
Bonjour, voici ma première page web !
Un humain sait que « Ma première page en HTML» est le titre du texte, et « Bonjour, voici ma première page web !» son contenu avec des polices de caractères différentes. Toutefois, les programmes d’ordinateurs ne sont pas humains et ne savent pas tout ça. Nous utilisons donc des meta-données exprimées par des balises pour ajouter un sens à la donnée.
Un fichier HTML doit être suivi de l’extension « .html » ou « .htm ».

La première page HTML

Exemple, créons le fichier page1.html avec ce contenu :
<HTML>
<HEAD>
<TITLE>Ma première page en HTML</TITLE>
</HEAD>
<BODY>
Bonjour, voici ma première page web !
</BODY>
</HTML>
Ouvrons le fichier avec un navigateur et regardons ce qu’il affiche.
Explications des balises utilisées :

<html> et </html> : la première informe votre navigateur qu’il va afficher une page HTML. Cette balise doit être la première de votre code. La seconde est la balise de fin. Elle referme la première. (remarquez le / devant le mot contenu entre crochets). Elle doit être la dernière de votre code HTML et signifie la fin de votre code HTML.
<head> et </head> : la première ouvre l’entête de votre page. Cet entête comprend pour l’instant le titre de votre page. Cette balise est toujours placée juste après la balise <html>. La seconde, referme l’entête de votre page (remarquez encore une fois le / devant le mot entre crochets).
<title> et </title> : la première ouvre la partie titre de votre page. Ce titre sera placé dans la barre tout au-dessus de votre navigateur. La seconde referme la première encore une fois en plaçant un / devant le mot entre crochets. La balise « title » doit être ouverte puis refermée à l’intérieur de la balise « head ». C’est à dire qu’il faut que la balise « title » doit être ouverte puis refermée avant que le balise « head » ne soit refermée.
<body> et </body> : la première ouvre le début du corps de votre document. C’est là que vous allez placer textes, images et tout ce que contiendra votre page. Cette balise doit se situer après la balise de fermeture de l’entête (=> </head>). La seconde referme la première et maintenant je suppose que vous avez compris le principe pour fermer une balise…