TP1 : Création de pages web

Introduction

Toutes les pages web ont été testées sur chrome, safari et internet explorer en langage Unicode et chinois.

Exercice 1 :

Créer à partir de l’éditeur de texte un fichier appelé TPHTML1_1.htm contenant le code suivant :

J’ai ouvert le logiciel Notepad++, créé un nouveau document et mis le langage sur « HTML ». Une fois le code tapé dans le logiciel, je l’ai sauvegardé sous le nom TPHTML1_1.html et je l’ai exécuté dans chrome et internet explorer. C’est le même processus pour tous les documents créés sur le TP.

Voici le rendu dans internet explorer du code HTML donné. Nous pouvons voir que le texte entré dans la balise « title » est visible dans le nom de l’onglet et que le texte entré dans la balise « body » s’affiche dans le contenu de la page.

Exercice 2 :

Pour ce deuxième exerce, j’ai copié le code du premier dans un nouveau document et j’ai commencé à rédiger le texte du sujet entre balises <p> de paragraphe. J’ai ensuite ajouté la mise en forme avec les balises <b> pour mettre en gras, <br> pour le retour à la ligne et <big> pour grossir les caractères.

En faisant le rendu sur navigateur, visiblement aucun problème au départ. En mettant le navigateur dans une langue qui n’utilise pas le même format de lecture des pages web qu’en France, je me suis rendu compte que toutes les lettres accentuées ne pouvaient s’afficher. C’est pourquoi je suis allé sur internet chercher la correspondance des caractères dans les autres langues. Ici le « é » s’écrit « &eacute; » pour pouvoir s’afficher dans toute les langues et le « à » s’écrit « &agrave; ».

Après avoir effectué ces changements, le sujet demande d’ajouter à la page deux équations. De la même manière, j’ai ajouté la balise <sub> et <sup> pour afficher les caractères en indice ou exposant.

Code ajouté

Enfin, pour rapetisser les caractères ou les agrandir, j’ai utilisé la balise <big> et <small> respectivement.

Et voici le rendu final de l’exercice sur internet explorer.

Exercice 3

Pour cet exercice, j’ai créé un nouveau document HTML et j’ai regardé dans la documentation comment formater du texte en titre de plusieurs niveaux : il s’agit de la balise <hn> ou l’on remplace le n par le niveau souhaité.

Après, le sujet demande d’ajouter sous les titres des listes non ordonnées, la balise pour cela est <ul> et pour chaque élément de la liste il faut le baliser avec <li>.

Ici nous pouvons donc voir que les éléments de la liste ont une « puce » comme sur un logiciel de traitement de texte.

Exercice 4

Pour cet exercice, j’ai dupliqué le fichier TPHTML1_1 et j’ai juste ajouté dans le body le chemin du fichier en suivant l’annexe (balise <a>). Pour la bulle d’aide, j’ai entré mon texte avant de refermer la balise.

Exercice 5

Pour le dernier exercice, j’ai dupliqué TPHTML1_2 et j’y ai rajouté de la même manière que dans l’exercice 4 un lien vers TPHTML1_1. Avant de fermer la balise <a> du lien vers la page TPHTML1_1, j’ai ajouté une balise <img> avec les paramètres « src » où l’on entre la localisation de l’image, « width » et « height » pour la longueur et le largueur de l’image. Le résultat produit est une image cliquable qui nous dirige vers TPHTML1_1.