Création d'une page Web 1

Sur le Web il est d’usage de séparer structure et contenu d’une page (html) , de son style (css).

« HTML » est un acronyme pour Hyper Text Markup Language. Les pages des sites Internet sont écrites dans ce langage, et les navigateurs l’interprètent pour mettre en forme les pages.

« Markup Language » signifie « langage balisé » : des balises permettent aux navigateurs comment interpréter le texte.

Le Contenu de la page

Première étape : créer un fichier

Une page web est, au strict minimum, un fichier HTML. Nous commencerons donc par en créer un. Lancez votre éditeur de texte ("bloc-note") puis saisissez le texte suivant :

<!DOCTYPE html>

<html>

<head>

<title>Ceci est ma première page</title>

</head>

<body>

Cette page est une première page toute simple

</body>

</html>

Assurez-vous d'enregistrer le fichier avec l'extension « .html ». Par exemple, « ma_page.html ».

Deuxième étape : un navigateur web

Repérez le fichier que vous avez créé et ouvrez-le dans votre navigateur web (en double-cliquant dessus ou en glissant-déposant le fichier sur l'icône du navigateur). Le navigateur affiche alors la page HTML que vous avez créée et l'onglet affiche le titre de la page.

Troisième étape : présenter son texte en HTML

• Tout fichier HTML commence par une la balise <html> et se termine par </html> ;

• Comme il existe plusieurs versions du langage HTML, on « dit » au navigateur lequel est utilisé grâce à la déclaration : <!DOCTYPE html> ;

• Les balises <head>...</head> encadrent l’entête du fichier, où sont regroupées des informations techniques, dont le titre de la page (<title>...</title>) et l’encodage des caractères (dans une balise orpheline <meta>) ;

• Ce qui apparaîtra sur l’écran est balisé par <body>...</body>.

Vous aurez besoin de quelques balises qui vous permettront de mettre en forme et de présenter vos documents :

· <h1>,<h2>……<h6> : ces balises sont destinées aux divers niveaux de titres

<body>

<h1> titre de niveau 1 </h1>

<h2> titre de niveau 2 </h2>

<h3> titre de niveau 3 </h3>

</body>

· <p> : permet de découper un document en paragraphe, l’instruction <p> signifie le début du paragraphe, la fin étant donnée par la balise </p>.

<body>

<h1> titre </h1>

<p> Ceci est un premier paragraphe ………. ….... …… ………. ….... …… …….. ………. ….... …… …….. ………. ….... …… …….. ………. ….... …… …….. ………. ….... …… …….. ………. ….... …… …….. bla bla Bla ………. ….... …… …….. ………. ….... …… …….. ………. ….... …… …….. </p>

<p> Bonjour et bienvenue sur mon site ! <br> Ceci est mon premier test alors <mark> soyez indulgents </mark> <b>s'il vous plaît </b>, j'apprends <u> petit à petit </u> <em> comment </em> cela marche.</p>

</body>

Donner la signification des balises de mise en forme du texte :

Balises	Significations
<br>
<b> < /b>
<u> </u>
<i> < /i>
<em> </em>
<mark> </mark>

· Listes< ul> et <ol>

Type de liste

code

Résultat obtenu

Liste non ordonnée

Quelques fruits

<ul>

<li> Pommes </li>

<li> Poires </li>

</ul>

Liste ordonnée

Les premières villes de France

<ol>

<li> Paris </li>

</ol>

· Les tableaux

Lorsque vous souhaitez avoir une mise en page structurée, le mieux est d’utiliser des tableaux.

Les balises <table> et </table> permettent de débuter et finir un tableau, <tr> et </tr> une ligne et <td> et </td> le contenu d’une cellule.

Les attributs facultatifs width et border permettent respectivement de dimensionner en pourcentage la largeur du tableau par rapport à la page et de spécifier la bordure des cellules.

<body>

<h1> mon premier tableau </h1>

<tr> <td> cellule 1 </td> <td> cellule 2 </td> <td> cellule 3 </td> </tr>

<tr> <td> cellule 4 </td> </tr>

</table>

</body>

· Insérer une image située dans le dossier images :

<body>

</body>

· les liens en HTML

L'une des particularités d'un document web est de pouvoir cliquer sur une partie de texte ou une image et d'être renvoyé vers une autre page, c'est un lien.

Pour créer un lien, insérer la balise <a href= " page_suivante.html "> vers la page suivante </a>

<body>

<h1> Page d’accueil, cliquer <a href="page1.html"> ici </a> pour aller à ma page 1</h1>

</body>

Pour créer un lien vers un autre site : <a href="http:// les-vaseix.epl-limoges-nord87.fr/">site lycée Les Vaseix</a>.

Un lien avec un info bulle: <a href="page2.html" title="Pour en savoir plus"> page2 </a>

Un lien pour envoyer un email : <a href="mailto:delphine.roland@educagri.fr"> Envoyer moi un mail </a>

L'attribut target= "blank" ouvre le lien dans une nouvelle fenêtre:

<a href = "http://les-vaseix.epl-limoges-nord87.fr/" target="blank"> Le lycée Les Vaseix </a>

Travail à faire chez soi

Vous avez choisi en AP, un thème « Orientation ».

1. Donner votre thème au professeur et inscrivez le nom de votre fichier dans la colonne 2 du tableau. Noter les noms des rédacteurs des autres sujets, pour pouvoir échanger en cas de problème.

2. Rédiger un fichier HTML sur le modèle de orientation.html que vous trouverez dans "espace personnel" puis "groupe" puis "seconde 1" puis "documents en consultation" puis "SNT" puis "web".

Le nom du fichier doit être exactement celui indiqué dans la 2e colonne.

Le texte doit être court, présentant clairement le sujet, sans détails inutiles mais avec un repérage chronologique clair ; pas de copier-coller d’un texte existant.

Les liens vers les sources documentaires (pages Wikipédia ou autres) doivent être présents.

Les liens vers d’autres pages, réalisées par les autres membres de la classe, peuvent être préparés en utilisant les noms des fichiers (2e colonne du tableau). Ces liens seront vérifiés lors du prochain cours.

3. Enregistrer le fichier sur une clé USB avec l'extension html (exemple: lunetier.html). Penser à y enregistrer aussi les images que vous auriez pu utiliser dans votre page.

Votre site sera ultérieurement amélioré en créant une feuille de style pour mette en forme vos pages.

Création d'une page Web 2