Programmer en HTML PCD

PROGRAMMER EN HTML
LECON 1 : GENERALITES SUR LE HTML.

Compétences :
Définir les notions de bases en html
Produire, mettre en forme et tester un document HTML.
I. QUELQUES DEFINITIONS
1. Qu’est ce que Html ?
Ce sont les initiales de HyperText Markup Language. C’est un langage de marquage ou de présentation
de données permettant de créer des pages web pouvant être lues dans des navigateurs. Le HTML n’est pas un
langage de programmation, Il s'agit d'un langage permettant de décrire la mise en page et la forme d'un contenu
rédigé en texte simple.
2. Qu’est ce qu’une page HTML ?
C’est un simple fichier contenant des éléments multimédias. Un élément multimédia peut être du texte, de
l’image, du son, de la vidéo…
3. Qu’est ce qu’un site Web ?
C’est un ensemble de pages qui sont créées par une personne ou un organisme.
4. Qu'est-ce qu'une balise html ?
Une balise HTML est un élément que l'on va ajouter au texte de départ pour dire au navigateur de quelle manière
l'afficher. Elle n'est pas affichée telle quelle dans le navigateur, elle est interprétée par celui-ci. Elle est toujours
délimitée par les signes < et >.
Exemple de balise : <html>
Une balise peut en plus comporter de zéro à plusieurs attributs. Les attributs sont des informations
complémentaires qui la caractérisent. Ils se présentent sous la forme nomattribut="valeur".
Exemple de balise et son attribut : <html lang="fr">
Une balise peut être simple ou double.
• Les balises simples : Ce sont des balises qui sont dites "vides", c'est-à-dire qu'elles ne vont contenir aucune
autre balise HTML. Ces balises n'ont pas besoin d'être fermées.
Exemple de balise simple : <br> pour faire un retour à la ligne.
• Les balises doubles : Les balises doubles sont dites ouvrantes/fermantes, c'est-à-dire qu'elles nécessitent
deux balises, une ouvrante et une fermante dans lesquelles on va pouvoir mettre d'autres balises ou du texte. La
balise fermante est identique à la balise ouvrante, à la différence qu'elle contient un "/" pour indiquer à quel
endroit on la ferme.
Exemple : les balises <b> et </b> permettent de mettre en gras le texte qu'elles encadrent :
<b> Ce texte est en gras </b>
• Imbrication des balises : Lorsque l'on cumule l'écriture de plusieurs balises ouvrantes, il est impératif de
respecter la hiérarchie des balises, c'est-à-dire que la première ouverte sera la dernière à être fermée. Le
chevauchement des balises est une grave erreur.
Exemple de balises imbriquées : <i><u>Comment ça Marche</u>, encyclopédie informatique libre</i>
L'exemple ci-dessus donne le résultat suivant :
Comment ça Marche, encyclopédie informatique libre
NB : Les balises HTML ne sont pas sensibles à la casse, c'est-à-dire qu'elles peuvent être saisies indifféremment
en minuscules ou en majuscules !
5. Quelle sont les extensions d’un fichier Html ?
Les fichiers Html ont 2 extensions : soit htm ou html. La différence entre les deux c’est que pour les
anciennes versions de navigateurs, on utilise l’extension htm alors que pour les nouveaux navigateurs, on peut
utiliser html. Il est donc conseiller d’utiliser l’extension htm pour que notre page soit vue par tout le monde.
II.LES OUTILS NECESSAIRES A LA CREATION DES PAGES WEB
Pour écrire des pages web, il faut :
• Un éditeur de texte (blocs note par exemple,…) ou des éditeurs html pour saisir et modifier notre page.
• Un navigateur dans lequel on voit le résultat.
III. STRUCTURE DU DOCUMENT HTML

Un document HTML commence par la balise <HTML> et finit par la balise </HTML>. Il contient également un
en-tête décrivant le titre de la page, puis un corps dans lequel se trouve le contenu de la page.
• L'en-tête est délimité par les balises <HEAD> et </HEAD> qui contient elle aussi le titre de la page
délimité par les balises <TITLE> et </TITLE>.
• Le corps est délimité par les balises <BODY> et </BODY> : ici, on met toutes les balises qui vont
permettre de mettre en forme ou de créer notre page web.
Voici par exemple une page HTML minimaliste :
<HTML>
<HEAD>
<TITLE>programme html</TITLE>
</HEAD>
<BODY>
Ma première page html
</BODY>
</HTML>
IV. MISE EN FORME D’UN DOCUMENT HTML.

1. Les niveaux de titres et les paragraphes
• Sur html, on peut jouer sur la taille du texte. C’est à partir de la balise <h1> à <h6>. <h1> c’est la taille la
plus grande et <h6> la taille la plus petite. Il est important de respecter la hiérarchie des différents niveaux de
titres, sachant que l'élément le plus haut est le <h1>. En effet, un titre <h2> ne se retrouvera jamais au-dessus
d'un <h1> dans un document. Le titre <h1> étant le plus important, il convient également de ne le faire apparaître
qu'une seule fois dans un document.
• On peut également changer de paragraphe grâce à la balise <p>.
• On peut aussi faire un retour à la ligne grâce à la balise <br>.
2. La mise en forme simple d’un texte.

Le texte en gras : Pour mettre le texte en gras on l'encadre de la balise <b> :
<b>Ce texte s'affichera en gras.</b> aperçu : Ce texte s'affichera en gras
Le texte en italique : Pour mettre le texte en italique on l'encadre de la balise <i> :

Exemple : <i>Ce texte s'affichera en italique.</i> aperçu : Ce texte s'affichera en italique
Le texte défilant : Pour faire défiler un texte on l'encadre de la balise < > :
Exemple : <marquee >Ce texte défilera. </marquee > aperçu : Ce texte s'affichera en italique
Le texte souligné : Pour souligner le texte on l'encadre de la balise <u> :

Exemple : <u>Ce texte sera souligné.</u> aperçu : Ce texte sera souligné
Le texte barré : Pour barrer le texte on l'encadre de la balise <s> :

Exemple : <s>Ce texte sera barré.</s> aperçu : Ce texte sera barré
Le texte en exposant : Pour placer le texte en exposant on l'encadre de la balise <sup> :

Exemple : aba<sup>Ce texte sera en exposant.</sup> aperçu : aba Ce texte sera en exposant
Le texte en indice : Pour placer le texte en indice on l'encadre de la balise <sub> :

Exemple : aba <sub>Ce texte sera en indice.</sub> aperçu : aba Ce texte sera en indice.</
3. Modifier la couleur du texte
Pour modifier la couleur du texte on utilise l'attribut color de la balise <font> :
Exemple : <font color="red">Ce texte sera en rouge.</font>
4. Modifier la police du texte

Pour modifier la police du texte on utilise l'attribut face de la balise <font> :
Exemple : <font face="verdana">Ce texte sera en verdana.</font> aperçu : Ce texte sera en verdana
5. Modifier la taille du texte

Pour modifier la taille du texte on utilise l'attribut size de la balise <font> :
Exemple : <font size="5">Ce texte sera en taille 5.</font>
Par défaut, la valeur de l'attribut size vaut "3". Les valeurs possibles sont les entiers de "1" à "7".
LECON 2 : Insérer les fichiers multimédias dans une page web

Compétences : Insérer les fichiers sons, vidéo, images dans une page web
Situation problème :
Lors de la création de votre site web, vous voulez réserver une page pour le téléchargement des musiques, des
vidéos et photos à vos visiteurs. Comment allez-vous insérer ces éléments dans votre page ?
I. INSÉRER UNE IMAGE EN HTML

Il fallait utiliser la balise <img> pour insérer une image dans un fichier HTML.
La balise <img> est représenté par une balise orpheline et possède deux attributs obligatoires : l'attribut src, qui
sert à indiquer le chemin (relatif ou absolu) de l’image, et l'attribut alt qui sert à décrire l’image, dans le cas où
l'utilisateur ne pourrait pas la voir.
Commençons donc par placer une image dans le même dossier que notre fichier HTML et essayons de l’afficher.
Ici l’image s’appelle « mon-lycee.png ».
<img src="mon-lycee.png" alt="photo de mon lycée">
II. INSÉRER UN SON EN HTML

Ici on utilise la balise <audio> qui possède un attribut obligatoire : l’attribut controls qui ne possède qu'une
valeur (que nous ne sommes donc pas strictement obligés de préciser car celle-ci est implicite). Celui-ci va tout
simplement afficher les contrôles de base (lecture, pause, retour au début et volume) de notre piste audio.
Afin de laisser le choix au navigateur d’utiliser le fichier qu’il souhaite, nous allons utiliser en plus de la balise
<audio> une balise <source> (représenté sous forme de balise orpheline) avec son attribut src.
<audio controls>
<source src="musique.mp3">
</audio>
On peut aussi utiliser <audio src="musique.mp3" controls> </audio>
III. INSÉRER UNE VIDÉO EN HTML

La balise <video> va s’utiliser exactement comme la balise <audio>. De plus, il possède les mêmes attributs que
ce dernier à savoir : Un attribut controls pour ajouter les contrôles de base de la vidéo (lecture, arrêt, etc.) ; une
balise <source> précisant l’adresse de la vidéo
<video controls>
<source src="video.mp4">
</video>
On peut aussi utiliser <video src="video.mp4" controls> </video>

LECON 3 : Insérer les tableaux et formulaires en HTML
Compétences :
• Insérer un tableau dans une page web
• Créer un formulaire
I. LES TABLEAUX
Un tableau qu'est-ce que c'est ? Tout simplement une suite de lignes et de colonnes qui forment un ensemble de
cellules. Les tableaux servent avant tout à présenter des données tabulaires. Un tableau est délimité par les balises
<table> </table>. Le contenu d'un tableau HTML est généré horizontalement. C'est-à-dire qu'il n'est pas créé
colonne par colonne mais ligne par ligne. 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.
1. Les balises utiles
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.
Exemple :
< table border= ‘1’>
< caption >Passagers du vol 377 </ caption >
< tr >
< th >Nom </ th >
< th >Âge </ th >
< th >Pays </ th >
</ tr >
< tr >
< td >Carmen </ td >
< td >33 ans </ td >
< td >Espagne </ td >
</ tr >
< tr >
< td >Michelle </ td >
< td >26 ans </ td >
< td >États - Unis </ td >
</ tr >
</ table >

2. La fusion de lignes et de colonnes d'un tableau
On distingue deux types de fusion : la fusion horizontale où sont en jeu deux (ou plus) colonnes, la fusion
verticale où sont en jeu deux (ou plus) lignes. Dans les deux cas, elle s'opère sur les cellules, donc sur la balise
<td>. Elle se traduit par l'utilisation de l'attribut colspan dans le cas d'une fusion horizontale et par l'attribut
rowspan dans le cas d'une fusion verticale. Ces attributs prennent pour valeurs le nombre de cellules à fusionner.
Exemple d'utilisation de colspan
<table border="1">
<tr>
<td colspan="5">Cellule qui se répend sur 5 colonnes</td>
</tr>
<tr> On obtient :
<td>Colonne 1</td>
<td>Colonne 2</td>
<td>Colonne 3</td> Cellule qui se répend sur 5 colonnes
<td>Colonne 4</td>
<td>Colonne 5</td> Colonne 1 Colonne 2 Colonne 3 Colonne 4 Colonne 5
</tr>
</table>
NB : La somme des colspan de chaque ligne doit être identique à toutes les autres lignes.
En ce qui concerne l'attribut rowspan, on aurait un code tel que :
Exemple d'utilisation de rowspan

<table border="1">
<tr>
<td rowspan="2">Cellule </td>
<td>Ligne 1 - Colonne 2</td>
<td>Ligne 1 - Colonne 4</td> On obtient :
</tr>
Ligne 1 - Colonne 2 Ligne 1 - Colonne 3 Ligne 1 - Colonne 4
<tr>
<td>Ligne 2 - Colonne 2</td> Cellule Ligne 2 - Colonne 2 Ligne 2 - Colonne 3 Ligne 2 - Colonne 4
</tr>
</table>
Il est tout de suite beaucoup plus difficile de se rendre compte de son erreur, le rowspan est déjà moins intuitif
que le colspan. On pourrait aller plus loin en combinant les deux techniques sur un seul et même tableau.
II. LES FORMULAIRES

Toute page HTML peut être enrichie de formulaires interactifs, qui invitent vos visiteurs à renseigner des
informations : saisir du texte, sélectionner des options, valider avec un bouton . . . tout est possible ! 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.
1. Déclaration d’un formulaire
La balise <form> </form> est la balise principale du formulaire, elle permet d'en indiquer le début et la fin.
Comment envoyer le texte saisi par le visiteur ? Une fois que les données ont été envoyées, comment les traiter ?
Pour fournir les réponses à ces questions, vous devez ajouter deux attributs à la balise <form> :
method : cet attribut indique par quel moyen les données vont être envoyées (réponse à la question no 1). 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 (http://... ).
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 (réponse à la question no 2).
On aura alors comme exemple de déclaration de formulaire le code suivant :
< form method = " post " action = " traitement . php " >
< p >Texte à l ' intérieur du formulaire </ p >
</ form>
2. Les éléments de formulaires

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
Chaque élément doit être nommé, pour cela on utilise l'attribut NAME. Le nom ainsi défini permet d'identifier
les données lors de leur envoi. Il doit être unique, sauf dans le cas d'un ensemble composé de plusieurs éléments
(boutons radio par exemple). Un autre attribut VALUE est commun à ces balises, mais son rôle est différent
selon le type d'élément utilisé.
a. Les éléments input

Cet élément est utilisé pour définir des zones d'entrée de texte simple, des boutons, des cases à cocher ou des
boutons radio. Le type d'élément dont il s'agit sera précisé en utilisant l'attribut TYPE
Remarque : Pour le type “radio”, les attributs “name” doivent porter la même valeur sinon il y aura possibilité
de choisir plusieurs valeurs comme pour les cases à cocher.
b. L'élément SELECT
Cet élément sert à définir des listes (menus déroulant ou ascenseurs). Elle s'utilise avec la balise OPTION.
c. L'élément TEXTAREA
Permet de créer une zone de texte en spécifiant sa taille grâce aux attributs ROWS et COLS.
Organiser les
LECON 4 : dossiers du site et mise en place du CSS
Compétences visées :
Créer un dossier principal et des sous-dossiers en fonction de fichiers utilisés et des thèmes traités
Regrouper les fichiers à utiliser en fonction de leur nature et en fonction du thème ou des parties du site
Créer un fichier de style externe
Problème : Le club informatique de votre établissement lance le projet de développement de son site Web, ce site doit entre-
autre faire une présentation générale de l’établissement mais aussi les activités des autres clubs tels que club journal, club
anglais, club santé… Chaque club dans le site web doit avoir un espace pour la publication de ses activités et ses éventuelles
photos et fichiers.
Proposez une organisation structurée de ce site web ainsi que les fichiers présents de ce site
Solution
On aura un dossier global qui représente le site web
Dans ce dossier on va créer un dossier pour chaque club et chacun de ces dossiers contiendra un dossier pour les images, un
dossier pour les fichiers audio, un dossier pour les vidéos…
I- CONSTRUCTION DU SITE WEB

Réaliser une page d’accueil html avec un menu permettant d’accéder aux différentes parties qui constituent le site web.
Chacune de ces parties représente un dossier
De façon générale, voici comment s’organise un site web :
II-
II- INSERTION DU CSS DANS UNE PAGE HTML HTML
1. A quoi servent les feuilles de style
Le CSS a été mis au point afin de compenser les manquements du langage HTML en ce qui concerne la mise en
page et la présentation. En effet, le HTML offre un certain nombre de balises permettant de mettre en page et de
définir le style d’un texte, toutefois chaque élément possède son propre style, indépendamment des éléments qui
l’entourent. Grâce aux feuilles de style, lorsque la charte graphique d’un site composé de plusieurs centaines de
pages Web doit être changée, il suffit de modifier la définition des feuilles de style en un seul endroit pour
changer l’apparence du site tout entier ! Elles sont appelées « feuilles de style en cascade » (en anglais :
Cascading Style Sheets » car il est possible d’en définir plusieurs et que les styles peuvent être hérités en
cascade.
2. Définition et fonction
Le CSS (Cascading Style Sheet) est un langage permettant la mise en forme des pages Web.
Les feuilles de style permettent notamment :
D’obtenir une présentation homogène sur tout un site en faisant appel sur toutes les pages à une même
définition de style ;
De changer l’aspect d’un site complet entier par la seule modification de quelques lignes ;
Une plus grande lisibilité du HTML, car les styles sont définis à part ;
Des chargements de page plus rapides, pour les mêmes raisons que précédemment ;
Un positionnement plus rigoureux des éléments.
3. Insertion des feuilles de style
Le css agit sur des éléments de langage html nettement sur des balises qui représentent des sélecteurs.
Dans un document html, on peut insérer le code css de 3 facons :
Dans une balise html sous forme d’attribut
syntaxe : <balise style="propriété : valeur">
Exemple:
Exemple <p style="color :blue">
Dans l’entête de document html (Entre les balises <head>……</head>)

<head>
<style type="text/css" >
Saisir le code css ici
</style>
</head>)
Dans un fichier de style externe avec l’l’extension .css

Dans les deux derniers cas, on utilise la syntaxe générale du css qui est la suivante :
Sélecteur { Propriété : valeur ;}
Exemple
p{ font-size:12px; color :blue ; }
Pour faire agir le css sur le html, il faut ajouter à l’entête du fichier html la balise
<link rel="stylesheet" href="chemin/fichier.css" type="text/css">
L’attribut href permet d’indiquer l’emplacement du fichier css dans l’ordinateur
4. Quelques propriétés
Propriété Valeur Description

Définit un ou plusieurs nom de polices ou de
Police précise (Arial, Times, Verdana)
familles de polices. Si plusieurs polices sont
font-family Famille (serif, sans-serif, fantasy,
définies, la première trouvée sur le système de
monospace, cursive)
l'utilisateur sera utilisée.
font-style normal, italic, oblique Définit le style d'écriture
font-weight lighter, normal, bold. Définit la graisse (épaisseur) de la police
font-size taille en points (pt), cm, % Définit la taille de la police
color "#RRGGBB" Définit la couleur du texte
text-align left, center, right ou justify Définit l'alignement du texte
blink (clignotement), underline (souligné),
text-decoration Définit une décoration
line-through (barré), overline (surligné)

Programmer en HTML PCD

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Programmer en HTML PCD

Transféré par

Droits d'auteur :

Formats disponibles

PROGRAMMER EN HTML

LECON 1 : GENERALITES SUR LE HTML.

III. STRUCTURE DU DOCUMENT HTML

IV. MISE EN FORME D’UN DOCUMENT HTML.

2. La mise en forme simple d’un texte.

Le texte en italique : Pour mettre le texte en italique on l'encadre de la balise <i> :

Le texte souligné : Pour souligner le texte on l'encadre de la balise <u> :

Le texte barré : Pour barrer le texte on l'encadre de la balise <s> :

Le texte en exposant : Pour placer le texte en exposant on l'encadre de la balise <sup> :

Le texte en indice : Pour placer le texte en indice on l'encadre de la balise <sub> :

4. Modifier la police du texte

5. Modifier la taille du texte

LECON 2 : Insérer les fichiers multimédias dans une page web

I. INSÉRER UNE IMAGE EN HTML

II. INSÉRER UN SON EN HTML

On peut aussi utiliser <audio src="musique.mp3" controls> </audio>

III. INSÉRER UNE VIDÉO EN HTML

On peut aussi utiliser <video src="video.mp4" controls> </video>

</ table >

Exemple d'utilisation de rowspan

II. LES FORMULAIRES

2. Les éléments de formulaires

a. Les éléments input

I- CONSTRUCTION DU SITE WEB

Dans l’entête de document html (Entre les balises <head>……</head>)

Dans un fichier de style externe avec l’l’extension .css

Propriété Valeur Description

Vous aimerez peut-être aussi