UA : Programmation en HTML
Leçon 1 : Création d’un site web
Objectifs
- Insérer un tableau dans une page web
- Insérer un fichiers multimédia dans une page web
- Créer un formulaire
Rappel :
- Pour écrire une page web on n’a besoin d’un éditeur de texte
( Notepad++, Sublime texte) pour écrire le code de la page et d’un
navigateur web pour ouvrir la page de plus la page doit être
enregistré avec l’extension .html.
- Une balise : Les balises HTML correspondent à des éléments du code
HTML d’une page web. Il existe deux type de balise qui sont les
balise auto fermantes ( <a>contenu</a>) qui sont constitué d’une
balise ouvrante( <a >) et d’une balise fermante (</a>) et les balise
orphelines (<a /> ou <a >)
-
- La structure générale d’une page html est la suivante :
<HTML>
<HEAD>
<TITLE>Titre de la page</TITLE>
</HEAD>
<BODY>
Contenu de la page
</BODY>
</HTML>
Quelques balise utiliser en html
<h1> à <7h1> : titre de niveau de 1 à 6
<p> paragraphe <p> : insérer un paragraphe
<ul> liste non ordonnée (avec des puces) < /ul>
<ol> liste ordonnée (numérotée) </ol>
<li> élément d'une liste </li>
<br> saut de ligne
<u> un texte souligné</u>
I- Insertion d’un fichier multimédia dans une page web
a) INSERTION D’UNE IMAGE
Toute les balise utilise pour mettre des éléments dans une page web se
trouve dans la partie body ou dans la balise body.
Pour insérer une image dans une page web on utilise la balise
<imag>(balise orpheline) de la façon suivante <img src = ‘’chemin de
la photo ‘’ alt = ‘’description de la photo’’>
Src et alt représente deux attributs obligatoires lors de l’utilisation
de la balise <imag>, src permet de définir le chemin d’accès de la photo
et alt la description de la photo qui s’affiche au ça ou il y a un problème
Exemple : plaçons une image donc le nom est « [Link] » situer
dans le même dossier que le fichier de votre page html. Pour afficher la
photo sur la page on doit utiliser la balise image de la sorte : <img
src="[Link]" alt="photo de mon lycée">
[Link] représente le chemin d’aces de la photo et photo de mon
lycée représente la description à afficher si la photo ne s’affiche pas.
b) INSÉRER UN SON OU UN FICHIER AUDIO EN HTML
Ici on utilise la balise <audio> avec les attributs src pour le chemin vers le
fichier et contrôle qui possède une valeur qu’il n’est pas obligé de préciser
et qui permet d’afficher les boutons de contrôle lecture, pose, retour
volume. On l’utilise de la façon suivante : <audio src = ‘’chemin’’
controls> message </audio>
c) INSÉRER UN FICHIER AUDIO
On utilise la valise <video> avec les attributs src et controls de la façon
suivante :
<video controls src="chemin"> message </video>
II- INSÉRER LES TABLEAUX DANS UNE PAGE WEB
Un tableau c'est Tout simplement une suite de lignes et de colonnes qui
forment un ensemble de cellules. Un tableau est délimité par les balises
<table> </table>. Pour créer un tableau, nous commençons par créer
des lignes, puis nous insérons dans ces lignes les cellules du tableau. Le
contenu (textes, images, autres balises) se trouve uniquement dans les
cellules et ne doit se trouver en aucun cas en dehors.
Les attributs et balise utilisés
Par défaut, les bordures ne sont pas visible, il faut rajouter l'attribut border
à la balise <table> pour les faire apparaître. On peut évidemment épaissir
les bordures en augmentant la valeur. Donc pour construire un tableau,
nous avons besoin des balises suivantes :
- <table> </table>. C'est cette balise qui permet d'indiquer le début et la fin d’un tableau
- <caption> </caption> : Titre du tableau
- <th> </th> : En-tête du tableau
- <tr> </tr> : indique le début et la fin d'une ligne du tableau ;
- <td> </td> : indique le début et la fin du contenu d'une cellule
III- Les formulaires
Toute page HTML peut être enrichie de formulaires interactifs, qui invitent
les visiteurs à renseigner des informations : saisir du texte, sélectionner
des options, valider avec un bouton…. Nous arrivons cependant aux
limites du langage HTML car il faut ensuite pouvoir analyser les
informations que le visiteur a saisies et cela ne peut pas se faire en
langage HTML. le traitement des résultats doit s'effectuer dans un autre
langage, par exemple le langage PHP
1- Déclaration d’un formulaire
La balise <form> </form> est la balise principale du formulaire, elle
permet d' indiquer le début et la fin d’un formulaire, il faut en général
maitre la balise <from> à l’intérieur d’une balise <p>. La balise <from>
est généralement accompagné de deux attribut :
method : cet attribut indique par quel moyen les données vont être
envoyées. Il existe deux solutions pour envoyer des données sur le Web :
method="get" : c'est une méthode en général assez peu adaptée
car elle est limitée à 255 caractères. La particularité vient du fait que les
informations seront envoyées dans l'adresse de la page ([Link] ).
method="post" : c'est la méthode la plus utilisée pour les formulaires car
elle permet d'envoyer un grand nombre d'informations. Les données
saisies dans le formulaire ne transitent pas par la barre d'adresse.
- action : c'est l'adresse de la page ou du programme qui va traiter les
informations Cette page se chargera de vous envoyer un e-mail avec le
message si c'est ce que vous voulez, ou bien d'enregistrer le message
avec tous les autres dans une base de données. Cela ne peut pas se faire
en HTML et CSS, on utilisera en général un autre langage tel que PHP.
2- Les éléments d’un formulaire
Les éléments de formulaires sont répartis en 3 classes :
- Input : Champs de saisie de texte et différents types de boutons
- Select : Listes (menus déroulants et ascenseurs)
- Textarea : Zone de saisie de texte libre