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 :
<select
name="sexe">
<option
value="HOMME">HOMME</option>
<option
value="FEMME">FEMME</option>
</select><br>
Votre Mot
de passe :<input type="password"
name="passe"><br>
<input
type="submit"
value="ENVOYER"><br><br><input
type="reset" value="EFFACER">
</form>
</body>
</html>
|
Précédent
Suivant
