UE3: Création d’une page web html simple

Compétences :

A la fin de cette leçon, chaque élève sera capable de

Citer les différents langages du web
Donner la structure minimale d’une page web html
Créer une page html simple

Introduction

Une page web est un document conçu à partir du langage html. Html (HyperText Markup Language) est un langage qui permet de décrire le contenu d’une page web. Les instructions du langage html s’appellent les balises. Une balise est un ensemble de caractères écrits à l’intérieur des symboles < …> interprétables par un navigateur. Un navigateur est un logiciel capable d’interpréter et d’afficher les instructions écrites en langage html ; exemple : internet explorer, firefox, opera, … Un éditeur de texte est un logiciel qui permet de créer un fichier texte sans mise en forme. Ce type de logiciel est utilisé pour créer les fichiers html ; exemple : bloc note, Notepad, … Ainsi un fichier html encore appelé page web est constitué d’instructions appelées balises écrites à partir du langage html et enregistrées avec l’extension .html ou.htm et interprétable par un navigateur. Les langage du web sont le HTML, le css(Cascading Style Sheets), le JavaScript, le PHP (HyperText preprocessor)Le ASP (Active Server Pages), Le JSP (Java Server Pages).

I- STRUCTURE MINIMALE D'UNE PAGE WEB HTML

Une page web est constituée des éléments racines (les balises d'ouverture et de fermeture <html> …</html>), de l'en tête et du corps du document

La structure générale d’un document html est donc la suivante :

Les balises usuelles de mise en forme sont: la balise <b> représente une mise en gras, la balise <i> représente une mise en italique, la balise <br> représente un saut de ligne, les balises de type <hn> où n représente un chiffre compris entre 1 et 6 correspondent à des titres de différents niveaux,<h1> est un titre de premier niveau, <h2> un titre de deuxième niveau, ainsi de suite jusqu’au petit dernier <h6> , la balise <p> marque le début d’un paragraphe qui se voit fermé par </p>

II- LES BALISES DE TABLEAUX, FRAMES, STYLE ET FORMULAIRES

La balise essentielle dans la création des tableaux est <table> : c’est à l’intérieure de cette balise (<table>…. </table>) que se trouvent toutes les autres balises de tableau. Chaque ligne est déclarée par la balise <tr> ; dans une ligne chaque cellule est déclarée par la balise <td>.

Les listes sont prévues pour dresser des énumérations possédant une valeur sémantique. Les structures disponibles pour une liste ordonnée (liste numérotée) et non ordonnée (liste à puces) sont constituées des éléments <ol> et <ul> au sein desquels chaque élément individuel est un <li>.

La balise <img/> permet d’inclure les images dans une page web ; elle est une balise orpheline. <img/>; offre l’attribut src qui précise l’adresse du fichier image que l’on désire afficher dans la page web. Exemple : <img src="image.png">

Un lien hypertexte est un texte ou un objet (image, bouton, …) à partir duquel on peut d’un simple clic passer d’une page web à une autre. La balise <a> et son attribut href auquel on associe l’url de la page cible permettent de créer un lien hypertexte.

Exemple : <a href="http://www.google.com">page d'accueil google </a>

Une page peut être divisée en plusieurs cadres ou frames ; dans ce cas chaque cadre affiche le contenu d’une page web. Pour utiliser cette technologie on doit insérer ces lignes en dessus de la balise <html> : <?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">.

Pour créer les cadres de la page, l’élément <body> est remplacé par les éléments <frameset> et <frame /> qui permettent la définition des cadres. L'élément <frameset> permet la dé finition des divisions de la page en différents cadres, dont les dimensions ou les proportions sont définies par ses attributs rows et cols ; ces attributs permettent de diviser la page en cadres horizontaux (rows) ou verticaux (cols) et contienent une suite de dimensions séparées par des virgules. Ces dimensions peuvent être données en pixel, en pourcentage ou à l’aide de coefficients indiquant des proportions.

La balise <form> permet de créer un formulaire elle doit contenir la balise <input>, grâce à son attribut type permet de recueillir les informations saisies par l’utilisateur ; il peut prendre les valeurs :

text permet de définir un champ de texte simple. EX : <input type="text">

radio permet de proposer un élément à choisir

checkbox permet de créer les cases à cocher

password permet de cacher le texte saisi (comme un mot de passe)

submit permet d’envoyer les données saisie

reset permet d’annuler les données saisie

button permet de créer un bouton ….

Exercice : Créer une page web permettant d’afficher le formulaire suivant :

Correction

Voici le code html ayant permis d’écrire cette page Web Simple

<html>

<head>

<title>page de formulaire</title>

</head>

<body>

<h1>page qui affiche un formulaire simple</h1><hr>

<h3>Veillez entrer vos informations</h3>

<form>

Votre nom : <input type="text" name="nom"><br><br>

Votre prénom : <input type="text" name="prenom"><br><br>

Votre Sexe :

<option value="HOMME">HOMME</option>

<option value="FEMME">FEMME</option>

</select><br>

Votre Mot de passe :<input type="password" name="passe"><br>

</form>

</body>

</html>

Pages

jeudi 26 mars 2020