presentation de html partie par partie et detaillee.pptx

HTML
• HyperTexte Markup Langage: est un langage
simple utilisé pour créer des documents
hypertexte pour le web.
2

Dans quel contexte s’exécute HTML?
• Le cadre d’exécution du web et de son langage HTML est celui
d’un modèle client-serveur véhiculé sur un réseau
informatique comme le réseau Internet.
3
1. Le client envoie La requête ou la demande de la page html via
HTTP
2. Le serveur/moteur recherche la page dans ses répertoires et
vérifie les droits d’accès
3. Le serveur envoie l page demandé via HTTP

Dans quel contexte s’exécute HTML?
• Le client: est un logiciel de consultation s’exécutant sur tous les
types de plates-formes.il dialogue avec un serveur selon un protocol
spécifique HTTP: HyperTexte Transfert Protocol, qui va lui fournir
l’information structurée en code HTML . C’est ce client qui est
chargé de l’exécution de ce code.et qui produira l’affichage du
document.
• NB: un protocole est un ensemble de règles et de messages
régissant le dialogue entre deux processus informatiques
4

Dans quel contexte s’exécute HTML ?
• Le serveur : c’est un logiciel qui est en
permanence à l’écoute des requêtes que vont
formuler les clients.
• Il en vérifie la validité
• S’assure que la demande émane d’un client autorisé à
accéder au document
• Lui envoie textes et images avant de clore la connexion
Les logiciels serveurs les plus utilisés sont fournis
gratuitement, le NCSA, Apache pour linux
IIS pour windows
5

Le protocole d’adressage des documents – l’URL
Interconnecter des documents sur toute la planète indique un moyen unique de les
identifier sur le réseau Internet. L’adresse d’un document appelée URL(Uniform
Ressource Locator) se compose des éléments suivants:
• Le protocole d’échange entre le client et le serveur : HTTP
• L’adresse Internet du serveur qui diffuse les documents, cette adresse unique sur
tout le réseau est l’adresse TCP/IP de la machine elle a la forme : 194.204.231.1
comme ces nombres ne sont pas facilement mémorisables, un annuaire DNS
résout généralement le relation adresse numérique, nom de la machine
6

Le protocole d’adressage des documents – l’URL
• Exemple : 194.204.231.1 correspond à univ-oujda.ac.ma
• L’arborescence des répertoires qui conduit au document
• Le nom du document qui a l’extension .html ou .htm
Cette adresse pourra être complété par:
• le port
• Des infos d’authentification :username password
• Des arguments qui seront passés à un programme lors de l’appel de liens
exécutables
La syntaxe minimale d’une URL est : protocole://nom_du_serveur
7

Où sont stockés les documents html?
• Sur un disque de la machine serveur
• Il appartient à l’administrateur du système de
faire connaître l’organisation des répertoires
qu’il a choisis, et de donner les droits d’accès
pour que les personnes autorisés puissent y
déposer leur fichiers.
• Lorsque le fichier est placé dans le répertoire,
il faut que celui-ci soit en lecture pour tout le
monde.
8

Quelques Définitions
Hypertexte :
Accéder à d’autres documents au moyen d’un simple clic de souris sur
une partie de son texte
9
Navigator :
Afficher les pages écrites en langage HTML. Les
navigateurs les plus utilisés sont : Microsoft Internet
Explorer et Netscape Navigator
Balises ou Tags :
Commandes interprétés par le navigateur. les balises
se distinguent du contenu de la page par les signes <
et >, par exemple <html>.

De quoi a t on besoin pour créer et visualiser des pages HTML?
• Un éditeur de texte tout simple comme par
exemple le Bloc-notes ou Notepad de
Windows ou tout autre éditeur équivalent.
• Un navigateur: Microsoft Internet Explorer,
Netscape navigator
10

Généralités
Qu’est-ce que le HTML ?
Le html « HyperText Mark-Up
Language » est lelangage qui va vous
permettre de structurer une page Web
à l'aide de plusieurs balises,
11

Géneralités
La description d’un document HTML passe par
l’utilisation de BALISES. Une balise est délimitée par
les signes « < » et « /> » entre lesquels figure le nom de
la balise. Par exemple,
la balise de retour à la ligne est <br>. La plupart du
temps, on utilise une balise de début et une balise de
fin, qui définissent les propriétés de l’intervalle.
Exemple
<b> écriture en gras </b>
12

Structure d'une page HTML
<!doctype html>
<html>
<head>
<title>le titre de la page</title>
</head>
<body>

le corps de la page
</body>
</html> exerciceex1.html
13

Structure d’un document HTML
14

La balise - Commentaire
Commentaire
Les commentaires peuvent être placés n’importe
Où dans un document HTML à condition de ne
Pas être imbriqués. Ils sont placés entre les
chaînes de caractères  .
Exemple

15

Construire sa page personnelle
Comment faire ?
Les Outils disponibles :
 Directement en HTML
 Avec un éditeur de traitement de texte.
 Bloc-notes
 WinEdt
 …
 Avec un éditeur HTML spécialisé.
 Dreamweaver
 HTML author
17

Construire sa page personnelle
Nous allons commencer par créer un document html
très petit.
Lancez bloc-notes et recopiez le texte suivant:
<!doctype html>
<html>
<head>
<title> essai n°1 </title>
</head>
<body>
<p>Bonjour tout le monde</p>
</body>
18

La notion de doctype
 Permet au navigateur de savoir quelle
version de HTML est utilisée sur la page
 Obligatoire pour valider une page
(validateur W3C)
 Pas de doctype le navigateur fait ce qu’il
peut avec ce qu’il trouve,
 Utiliser HTML5

La balise <html>
 tout document HTML commence par la balise
<html> qui se ferme en fin de document : </html>
 La balise <html> contient nécessairement deux
balises définissant l'entête (<head>) et le corps
(<body>) du document.

La balise <head>
 Détermine l’entête du document et contient les méta-informations
 On y trouve la balise <title> qui sera le titre du document
 Sert en référencement (repris dans les résultats de recherche)
 On y ajoutera également les appels pour les feuilles de style CSS et certains JavaScripts
 On peut y trouver des balises « meta » parmi lesquelles
 <meta charset="UTF-8"/> : permet de définir l’encodage de caractère de la page (à mettre directement sous le
<head>)

La balise <body>
 Délimite le contenu de la page
 !Le contenu est constitué de texte, images et autres éléments qui
 seront affichés
 <body>

 Contenu de la page

 </body>

Remarque
HTML n'est pas un langage de programmation !
Ce n'est qu'un langage de description de
documents.
Les balises peuvent être définies avec des
attributs précisant les conditions d'utilisation de
la balise. Elles sont ouvertes puis fermées et
définissent comment le navigateur interprète le
texte inclus dans la balise (<balise> texte </balise>).
25

Attributs d’une balise
Certaines balises peuvent être complétées par des
attributs précisant certains paramètres
(l'adresse des liens, source d'une image à afficher, etc.)
Syntaxe :
< balise att_1= val_1 att_2 = val_2 >
Exemple :
<body background=‘image.jpg’>
26

Attributs d’une balise
 Les attributs sont des éléments prédéfinis dans le
HTML
 On peut les mettre entre simple quote, double quote ou
rien. Par convention nous choisissons les doubles
quotes " "
 <div id="kittens"> // <div id=kittens> //
 <div id=’kittens’>
 Les attributs sont toujours dans la balise ouvrante

Exemples d’attributs
 src=" " : donner la source (d’une image par
exemple)
 <img src="monimage.png" width="400"
height="250" alt="image de chatons" />
 href=" " : donner la destination d’un lien
 <a href="http://www.google.fr"> Texte du lien </a>

Balises très utiles
 La balise paragraphe <p>
 Les paragraphes sont des éléments de
type « bloc », suivis d’un passage à la
ligne et d'une marge par défaut
 On ne doit pas mettre un paragraphe dans
un paragraphe

Voici une liste de balises et leurs fonctionnalités
<br> : pour retourner à la ligne.
<b> : pour mettre un texte en gras.
<hr> : insérer une ligne horizontale.
30

<center> : pour mettre un texte ou un objet au
centre
<font size="3" color="green"> : pour définir
lacouleur et la taille d'un texte.
Et bien sûr il faut insérer le texte ou l'objet en
question entre la balise concernée. Par exemple
la balise font : <font size="3"color="green">ce
texte est vert </font>
31

Exemple
<!doctype html>
<html>
<head>
<title>Deuxième essai</title>
</head>
<body>
< ! - - Retourner à la ligne - -> <br>
<b>Mettre un texte en gras.</b>
<p> Déclarer un paragraphe.</p>
<center>Mettre un texte ou un objet au centre.</center>
<font size="3" color="green">Définir la couleur et la taille d'un
texte.</font>
</body>
32

Exemple
<!doctype html>
<html><head>
<title>Deuxième essai</title>
</head>
<body bgcolor="red">
<hr>
Retourner à la ligne.<br>
<b>Mettre un texte en gras.</b>
<p> Déclarer un paragraphe.</p>
<center>Mettre un texte ou un objet au centre.</center>
<font size="3" color="green">Définir la couleur et la taille d'un
texte.</font>
<hr> </body> exerciceex4.html
</html>
33

Tailles de polices
Il existe 7 tailles de polices. La commande est
<font size ="n"> … </font> où n prend les valeurs
de 1 à 7.
1, petit caractères,
7, gros caractères.
Tailles de polices
• La police par défaut possède la taille 3.
• La taille de la police peut être fixée dans l’en-tête du
document par la commande :
<basefont size="n"> où n prend les valeurs de 1 à 7.
34

Tailles de polices
<!doctype html>
<html><head>
<title> Exemple 2 </title>
</head><body>
<font size="7">MAJUSCULES - minuscules taille 7 </font> <br>
<font size="3"> La taille des lettres d'un mot peut </font>
<font size="7">V</font><font size=6>A</font><font size=5>R</font>
<font size="4">I</font> <font size"=3">E</font><font size=2>R</font>
</body> </html> exerciceex5.html
35

Couleurs
HTML propose deux façons de coder
une couleur :
1. Par son nom
Il existe une liste de couleurs reconnues
par la plupart des navigateurs. Les seize
couleurs smples sont données dans le tableau ci-dessous.
36

Couleurs
Par le triplet RGB
Toute couleur peut être décomposée en trois
couleurs : rouge, vert, bleu (Red, Green, Blue
d'où RGB) d'intensité convenable. Cette
intensité est exprimée en un nombre
37

Exemple couleur
<!doctype html><html>
<head><title>Texte en couleurs</title></head>
<body>
<font color="red">Rouge</font> <br>
<font color="#FF0000">Rouge</font> <br>
<font color="green">Vert</font> <br>
<font color="#008000">Vert</font> <br>
<font color="blue">Bleu</font> <br>
<font color="#0000FF">Bleu</font> <br>
<font color="yellow">Jaune</font> <br>
<font color="#FFFF00">Jaune</font> <br>
<font color="#magenta">Magenta</font>
</body></html> exe10.html
39

Les titres h1 à h6
Il existe six niveaux de titre <h1> <h2> <h3>
<h4><h5> et <h6>
• Un nouveau niveau provoque un passage à la
ligne, les éléments
de titre étant des éléments de bloc.
• Il est possible d’avoir plusieurs titres de même
niveau
40

 On ne peut pas mettre un Hn dans un p, ou un
p dans un Hn
 Exemple :
 <h1>TITRE PRINCIPALE </h1>

Exemple
 <!doctype html>
 <html>
 <head>
 <title>
 Deuxième essai
 </title>
 </head>
 <body>
 <h1>titre de niveau 1 h1</h1>
 </html> ex7.html

Exercice
Écrire un Code html qui :
• Un fond de page rouge
• Met en gras :bonjour tout le monde
• Contient le paragraphe: le langage html est un langage qui
utilise les balises
• Centrer le texte: la technologie de web utilise plusieurs
langages
• Met en police de taille 3 et de couleur vert :je suis un texte
en vert
43

<!doctype html>
<html>
<head>
<title>
Deuxième essai
</title>
</head>
<body bgcolor="red">
<b>bonjour tout le monde</b>
<p> le langage html est un langage qui utilise les balises .</p>
<center> la technologie de web utilise plusieurs langages.</center>
<font size="3" color="green"> je suis un texte en rouge </font>
</body>
</html> exe6.html
44

exercice
1. Un titre de niveau 1 centré : PREMIERE PARTIE
2. Un paragraphe avec le texte suivant en rouge :Je
suis le premier paragraphe, je suis rouge…
3. Une ligne séparatrice de taille 2 et de couleur rouge
45

1.Un titre de niveau 2 centré : DEUXIEME PARTIE
2.Un paragraphe centré constitué des 3 lignes suivantes
avec le texte bleu et de taille 5 :
Je suis le 2eme paragraphe
au centre
en taille 5 et en bleu
3.Une ligne séparatrice de taille 7, de 400 pixels de
longueur et de couleur jaune
46

• Un titre de niveau 3 centré : TROISIEME PARTIE
• Un paragraphe, à droite comprenant le texte suivant
en taille 7 et la police Arial :
Je suis le dernier paragraphe, je suis en taille 7 , couleur
vert avec la police Arial et à droite…
47

Séparateurs
Contrairement à tous les autres systèmes de traitement de
texte, le retour de chariot n’a aucune valeur en HTML. C’est le
Navigateur Web lui-même qui définira le passage à la ligne en
fonction de facteurs comme la taille des polices de
caractères, la largeur de la fenêtre de visualisation etc. De
même, plusieurs espaces dans un document HTML seront
ramenés à un seul.
<p> Cette commande </p> (fin de paragraphe) termine un
paragraphe et insère une ligne vide après le paragraphe.
48

Séparateurs
<hr> pour tracer une ligne horizontale de séparation :
width fait varier la largeur de la ligne en % (valeur par défaut
100%)
size fait varier l’épaisseur de la ligne en pixel (valeur par défaut 1)
align fait un alignement de la ligne suivant les 3 possibilités :
center par rapport au centre de la fenêtre,
left par rapport à la gauche de la fenêtre,
right par rapport à la droit de la fenêtre.
Le paramètre ALIGN a un effet que lorsque la longueur de la ligne est
inférieure à 100%.
49

Exemple :
<hr width=75%> trace une ligne sur 75% de la
largeur de la fenêtre.
<hr size="5"> trace une ligne d’épaisseur 5 pixels.
<hr width=75% & align=left> trace une ligne sur
75% de la largeur de la fenêtre avec un
alignement à gauche.
noshade Lorsqu’il est présent dans le balise
<hr> , l’effet est une ligne pleine sans ombrage.
50

<!doctye html><html>
<head>
<title> essai n°4 </title>
</head>
<body>
<h4>
HR<hr>
HR WIDTH="75%« <hr width="75%">
HR WIDTH="25%"<hr width="25%">
HR WIDTH="50%" & SIZE="5“ <hr width="50%" & size="5">
HR WIDTH="50%" & SIZE="20"<hr width="50%" & size="20">
HR WIDTH="50%" & SIZE="5" ALIGN=LEFT<hr width="50%" & size="5" align=left>
HR WIDTH="50%" & SIZE="5"ALIGN=LEFT NOSHADE<hr width="50%" & size="5“ align=left noshade>
</h4>
</body></html> ex8.html
51

52
liens
 Le lien est un élément cliquable qui renvoie l’utilisateur sur une
nouvelle page (ou lui permet de télécharger un fichier)
 Il est souvent stylé différemment (bleu souligné par défaut)
 Il peut renvoyer :
 – vers un autre site (lien externe)
 – vers une autre page du site (lien interne)
 – vers des fichiers (image, .PDF, etc.)

 La balise <a>
• On appelle « ancre de lien » le texte à l’intérieur de la balise
• On ajoute l’attribut href="cible_du_lien" pour indiquer vers
quelle page on veut envoyer l’utilisateur
• On peut ajouter l’attribut title="titre du lien" pour ajouter une
infobulle au survol et indiquer à l’utilisateur où il va arriver
<a href="index.html" title="titre"> Ancre du lien</a>

Lien externe vers un autre site
 La cible sera l’url (ou adresse) complète du
site, http:// compris
 Il s’agit d’un lien absolu car on indique
l’adresse complète
 <a href="http://www.google.fr" title="Moteur
de recherche google"> lien externe vers
google </a>

Liens internes et hiérarchisation
du site
 Un site est constitué d'un ensemble de
pages au sein d'un dossier(appelé racine
du site).
 Ces pages peuvent être organisées dans
une hiérarchie de sous-dossiers.

Liens internes et hiérarchisation
du site
 Par convention, le fichier « racine » sera
appelé index.html.
 C’est lui qui est affiché en priorité s'il existe
quand l’utilisateur demande le dossier.

Lien vers un fichier du même
répertoire
 Lorsque deux fichiers sont dans le même
répertoire, il suffit d’appeler le nom du
fichier comme cible.
 Ce sont des liens relatifs, car relatifs au
site et dossier dans lequel ils se trouvent.

exemple
 Créez un dossier « mon_premier_site »
 Créez y index.html
 Placez-y un second fichier appelé
page1.html

Lien vers un fichier du même
répertoire
 Lorsque deux fichiers sont dans le même
répertoire, il suffit d’appeler le nom du fichier
comme cible.
 Ce sont des liens relatifs, car relatifs au site et
dossier dans lequel ils se trouvent.
<a href="page1.html" title="ma 1ere page"> ma
page</a>
<a href="index.html" title="accueil du
site">l'accueil</a>

exe
 Ouvrez index.html, ajoutez lui un titre h1 et
ajoutez un lien vers la page1.html
 <h1>Mon index</h1>
 <p> un lien <a href= "page1.html" title="ma
première page"> ma page</a></p>


 Ouvrez page1.html, ajoutez lui un titre h1 et
ajoutez un lien de retour à l’index
 <h1>Ma page 1</h1>
 <p> retour <a href= "index.html" title="accueil du
site"> l’accueil</a></p>

Index.html
<head><title>page index</title></head>
<body>
<h1>Mon index</h1>
<p> un lien <a href= "page1.html" title="ma première
page"> ma page</a></p>

html
<head><title>1 ere page</title></head>
<body>
<h1>Ma page 1</h1>
<p> retour <a href= "index.html" title="accueil du
site"> l’accueil</a></p>

 Ajoutez un répertoire « page_interne »
 Ajoutez-y une page « page2.html »
exe

Liens vers un autre répertoire
 On peut avoir des répertoires et sous-
répertoires
 On ajoute le nom du répertoire pour
descendre : monrepertoire/mapage.html
 On ajoute ../ pour remonter si on se trouve
dans un sous répertoire : ../index.html

Descendre dans un sous
répertoire
 Depuis la racine index vers page2 :
<a href="page_interne/page2.html">page
2</a>
 Si on avait d’autres sous-répertoires :<a
href="page_interne/autre_sous_rep/page2.
html">page 2</a>

Remonter d’un répertoire
 Depuis la page2 vers la racine :
<a href="../index.html"> l'accueil</a>
 Si on veut remonter plusieurs répertoires
(autant de ../ que de répertoires:
 <a href="../../index.html"> l'accueil</a>

exe
 Ouvrez index.html et ajoutez un lien vers la page
page2.html du sous dossier page_interne
 <p> lien vers <a href= "page_interme/page2.html" >
page2</a></p>
 Ouvrez page2.html, ajoutez lui un titre h1 et ajoutez un
lien de retour vers l'accueil (index.html) en remontant
d'un dossier
 <h1>page2</h1>
 <p> retour à <a href= "../index.html" > l’accueil</a></p>

Index.html
 <!doctype html><html>
 <head><title>page index</title></head>
 <body>
 <h1>Mon index</h1>
 <p> un lien <a href= "page1.html" title="ma première page"> ma
page</a></p>
 <p> lien vers <a href= "page_interme/page2.html" > page2</a></p>
 </body></html> exe11.html

html
 <head><title>page index</tilte></head>
 <body>
 <p>page2</p>
 <p> retour à <a href= "../index.html" > l’accueil</a></p>
 </body></html>

Ouvrir un lien dans un nouvel
onglet
 L’attribut target="_blank" permet d’ouvrir un
lien dans une nouvelle fenêtre/onglet en
fonction du navigateur
<a href="index.html" target="_blank" >

exemple
 <head><title>page index</tilte></head>
 <body>
 <p>page2</p>
 <p> retour à <a href= "../index.html" target= "_blank">
l’accueil</a></p>
 </body></html>

Des liens « internes » ou ancres
internes
 Comme dans Word, il permet de renvoyer
l’utilisateur à l’intérieur d’une page
 La cible est définie par un id="ancre_du_lien"
 On utilise <a href="#ancre_du_lien"> pour
créer le lien
 Utilisé pour les liens « retour en haut de page
», wikipedia, etc.

Les listes non ordonnées <ul>
<ul>
<li>element de liste 1</li>
</ul>

Les listes non ordonnées <ul>
 La balise <ul> permet de créer une liste
non ordonnée (unordered list). Il faut
l’ouvrir en début de liste et la fermer après
le dernier élément de la liste
 La balise <li> permet de créer UN élément
de la liste

Les listes ordonnées <ol>
<ol>
</ol>

Exemple
< !doctype html><html>
<head><title>page 1</tilte></head>
<body>
<ul>
<li>element de list<!e 3</li>
</ul>

exmple
doctype html><html>
<head><title>page 2</title></head>
<body>
<ol>
</ol>

<head><title>page 1</title></head>
<body><h1><ul>
<li>element de liste 2
<ul>
<li>element de sousliste 1</li>
<li>element de sous liste 2</li>
<li>element de sous liste 3</li>
</ul></li>
</ul></h1>
</body></html>

La balise <img>
 Balise de type inline : pas de retour à la ligne,
peut-être insérée dans le corps du texte. On la
place généralement dans un <p> ou un <div>
mais peut se placer n’importe où dans le body
 Balise auto-fermante
 <img src="ref_image" alt="description de l’image"
/>

La balise <img> et source de
l'image
 Un attribut src="image.jpg" pour donner le
chemin vers la source de l’image
 – chemin sur le serveur
 – url de stockage

exemple
 <!doctype html>
 <html>
 <head>
 <title>page 1</title>
 </head>
 <body>
 <img src="smily_nb.png" alt="description de l’image" />
 </body>
 </html> exe16.html

La balise <img> et attribut « alt »
Un attribut alt="description du contenu de
l'image" texte alternatif qui décrit le contenu
de l’image et la remplace si l’image n’est pas
téléchargée

Attributs width et height
 Les attributs width et height peuvent être ajoutés
pour donner une taille à l’image
 Sans width/height le navigateur « devine » la taille ce
qui crée des sauts de page quand l’image se charge
 En général, il vaut mieux la redimensionner avant
dans un logiciel, plutôt que charger une grande
image et la rétrécir (performance)
 <img src="monimage.jpg" alt="description de
l’image" width="300" height="450" />

presentation de html partie par partie et detaillee.pptx

Recommandé

Recommandé

Contenu connexe

Similaire à presentation de html partie par partie et detaillee.pptx

Similaire à presentation de html partie par partie et detaillee.pptx (20)

presentation de html partie par partie et detaillee.pptx