logo
.

TP: création de pages web

Première page html

Ouvrez l'éditeur de texte Notepad++, choisir le langage HTML, puis l'encodage utf-8 et écrivez (ou copiez/collez) le code suivant : 

<!doctype html>
<html lang="fr"> <!--Ceci est le début d'un document de type HTML.-->
	<head> <!--Ceci est le début de la zone d'en-tête-->
		<meta charset="utf-8">
		<title>Titre de la page</title>
	</head> <!--Ceci est la fin de la zone  d'en-tête.-->
	<body> <!--Ceci est le début du document proprement dit.-->
		test
		...

	</body> <!--Ceci est la fin du document proprement dit.-->
</html> <!--Ceci est la fin d'un document de type HTML.-->
Code minimum pour une page en HTML

Enregistrez le document avec l'extension .html sous le nom mapage.html.

Dans le navigateur de fichiers, cliquez sur le fichier mapage.html, et votre page HTML s'affiche dans le navigateur web.

Pour vos éventuelles modifications, il n'est pas nécessaire de rouvrir à chaque fois le navigateur.

Retournez dans l’éditeur de texte (sans fermer le navigateur).

Modifier les codes HTML. Enregistrer le fichier.

Utiliser la commande « Réactualiser la page » du navigateur web.

Commentaires

Le doctype

Il permet de préciser le type de document :
En tout début de fichier, placer: <!doctype html> Indique que la page web est en HTML5

Paramètre de la balise <html>

Il est possible d’ajouter des paramètres afin de préciser la langue : Dans la balise HTML : 

<html lang="fr">

La balise <meta>

Pour la gestion des caractères accentués, l’encodage des pages web est dépendant de la table ascii utilisée. En général, afin d’éviter tout problème d’encodage de caractère (caractère accentué mal affiché) :
dans la zone du contenu header placer : 

<head>
	<meta charset="utf-8">
</head>
Il y a d’autres balises <meta>. La syntaxe globale est : 
<meta name="…" content="…">

Des exemples pour Name (nom du paramètre) :

Paramètre de la balise <body>

<body bgcolor="…"> : couleur de fond en code HTML ou en anglais.

<body text="…"> : couleur de texte.

<body link="…"> : couleur des liens.

<body vlink="…"> : couleur des liens visités.

<body alink="…"> : couleur d’un lien actif.

Exercice 1

  1. Créer une page HTML vierge avec la structure minimale DOCTYPE, HTML, head, body.
  2. Se rendre sur fr.lipsum.com
  3. Générer 5 paragraphes (évidemment penser à cliquer sur générer)
  4. Recopier ces 5 paragraphes dans votre page HTML
  5. Consignes de mise en forme :
    • Ce sont des paragraphes donc mettre les balises adaptées
    • Mettre des titres (faites appel à votre imagination pour les titres)
    • un titre de niveau 1 devant les 5 paragraphes, un titre de niveau 2 devant le paragraphe 3, un titre de niveau 3 devant le dernier.
  6. Copier cette page pour en créer une seconde « page02.html ».

Exercice 2

Dans chaque page créer un lien renvoyant vers l'autre page.
Créer un nouveau dossier pages/ et déplacer y la seconde page HTML. Cliquer sur les liens.

Exercice 3

Retourner sur page01.html. Copier 4 fois le contenu de body puis afficher dans le navigateur. Vous voici avec une page HTML « bien » longue.

  1. En utilisant les ancres et les points d'ancrage. Dans la page01.html, en début de page créer un lien vers le dernier paragraphe puis en fin de page créer un lien vers le premier titre de niveau 1.
  2. Que constatez-vous au niveau de l'adresse URL après avoir cliqué sur un des liens créés ?
  3. En s'inspirant de cette remarque, sur la page02.html créer des liens vers les points d'ancrage de la page01.html

Exercice 4

Voici une image :

  1. Créer un dossier images.
  2. Recopier l'image dans ce dossier avec un clic droit sur l'image. Prendre l'habitude d'organiser les fichiers de votre site.
  3. Insérer deux fois cette image dans la page02.html en utilisant :
    • d'une part son adresse relative,
    • d'autre part son adresse absolue (pour trouver l'adresse absolue avec un clic droit soit afficher le code source ou afficher l'image dans un nouvet onglet).

Exercice 5

Cliquez sur l'image pour l'agrandir:

Nous ne pouvons pas mettre des photos trop lourdes sur notre site pour continuer à avoir des visiteurs, mais comment leur faire profiter de nos superbes photos de vacances ? La solution est d'afficher une photo/image de faible résolution sur la page principale et de créer un lien vers la photo/image de meilleure résolution.

  1. Prenez une photo avec votre smartphone, ou sur internet.
  2. Avec un logiciel de retouche d'images Paint ou Photofiltre, faites une copie de basse résolution de votre image.
  3. Placez l'image à faible résolution avec un lien l'image à haute résolution, Mettez une info bulle « Cliquer pour agrandir » sur le lien

Exercice 6

Indiquant dans un tableau à 3 colonnes le nom, prénom et le sexe de 5 de vos camarades présents.

Exercice 7

Réaliser une petite vidéo avec votre smatphone. Puis insérez-la dans une de vos pages web