[PDF] Cours de base pour debuter en HTML pas à pas | Cours html

(1)

(2)

Chapitre 1 : Introduction Chapitre 2 : Mise en forme Chapitre 3 : Les liens

Chapitre 4 : Les images Chapitre 4 : Les images Chapitre 5 : Les tableaux Chapitre 6 : Les frames

Chapitre 7 : Les formulaires

(3)

I.1 Principes de publication I.2 Concepts fondamentaux I.3 Navigateurs

I.4 L’HTML I.4 L’HTML

I.5 Les balises

I.6 Conseils et conventions I.7 Comment faire?

I.8 Syntaxe

(4)

I.1: Principes de publication

Un site est

•

Réalisé par un concepteur

•

Hébergé sur un serveur

•

Consulté par des utilisateurs

Le site est déposé par le concepteur chez l’hébergeur

Les balises

Conseils et conventions Comment faire? Syntaxe Les extensions

Le site est déposé par le concepteur chez l’hébergeur Site web : ensemble de pages web

Page web : un document HTML+ documents utilisés (ex:

images, sons, vidéo, etc.)

Conception d’un site = réalisation d’un ensemble de pages connectées entre elles par des liens hypertextes

(5)

I.2: Concepts fondamentaux

HTML est le langage du web. 2 concepts se cachent derrière HTML :

•

Hypertexte : façon d’inter-relier des documents

multimédias

•

Balises: façon d’indiquer le formatage des éléments Les balises

•

Balises: façon d’indiquer le formatage des éléments Mise en forme décrite par des fichiers de style CSS

(6)

I.3: L’HTML

HTML : HyperText Markup Language

Langage de description de pages web

Un document HTML est • Les balises Conseils et conventions Comment faire? Syntaxe Les extensions

• un fichier texte, construit suivant une syntaxe précise

• structuré par des balises

• interprété (visualisé) dans un navigateur (Mozilla Firefox, Internet

Explorer, Safari, etc.)

• créé dans un éditeur de pages web (FrontPage, Dreamweaver,…) ou

(7)

I.3: L’HTML

Code HTML Page Web

Les balises

Pour voir le code HTML d'une page : Menu Affichage / Code source

(8)

I.4: Navigateurs

Logiciel destiné à consulter des pages du web : Firefox, Safari,

Internet Explorer…

Ils savent lire les documents html ou htm, et éventuellement adapter l’affichage

aux différents media :

• Moniteurs (écran), Imprimante, Carte son, etc.

• Code source HTML (idéal pour apprendre les techniques des autres)

Les balises Conseils et conventions Comment faire? Syntaxe Les extensions

Que fait un navigateur qui rencontre un document d’un type inconnu ?

• Il recherche un plugin <=> une extension lui apprenant à ouvrir ce type de

fichier

• Ou il exécute l’application qui correspond

Pour faire votre site web :

• Il faut un hébergeur pour avoir un serveur web

• Un logiciel d’édition de texte

• Un logiciel FTP (File Transfer Protocol) client (ou SSH comme PSCP ou

(9)

I.5: Les balises (ou tags)

Une balise est un mot clé encadré par 2 chevrons

< et > et Correspondent à des informations sur la page web ou sur

une zone de la page

La plupart des balises vont par paire:

•

La balise initiale

•

La balise terminale (la même que celle du début, mais le chevron

Les balises

•

La balise terminale (la même que celle du début, mais le chevron < est remplacé par </ )

Exemple: <HEAD></HEAD>

Certaines balises initiales renferment des valeurs particulières,

appelées attributs, qui précisent des paramètres

Exemples:

•

•

Zone d'action de la balise : entre la balise ouvrante et la balise

(10)

I.6: Conseils & conventions

Document HTML = document échangé sur Internet

•

Penser à la taille :

•

du fichier HTML !

(plus il est gros, plus cela prend de temps de transfert)

•

des éléments présents dans le fichier (images, sons, vidéos, …) Les balises Conseils et conventions Comment faire? Syntaxe Les extensions vidéos, …)

Lisibilité (pour faciliter la maintenance)

•

Indenter les lignes

•

Balises HTML en majuscules pour mieux les distinguer du corps du texte.

(11)

HTML : Exemple à ne pas suivre

<html><head><title>Exemple de fichier HTML</title></head>

<body><h1>Exemple de fichier HTML</h1>

<p>Ceci est un exemple de fichier <a

href="http://www.w3c.org/HTML">HTML</a></p>

Un fichier HTML peut contenir :

<ul>

<li>le texte destin é à être lu;

<li>des indications de formatage :

Les balises

Conseils et conventions

Comment faire? Syntaxe Les extensions

<li>des indications de formatage :

<ol>

<li> caractès <b>gras</b>, <i>italiques</i>, ...

<li> niveaux de sections,

<li> listes, ...

</ol>

<li>des liens <A HREF="essai.html">hypertextes</a> (ancre + URL) ;

<li>des incrustations d'images

</ul> </body> </html>

(12)

Document HTML

HTML

Entête

<HTML>

<HEAD>

<TITLE>Exemple de document HTML</TITLE> </HEAD> Les balises Conseils et conventions Comment faire? Syntaxe Les extensions Corps <BODY>

<H1>Mon 1er document HTML</H1> <P>

Ceci est un document HTML avec un lien hypertexte sur mon <A HREF="http://www.univ-evry.fr/">Université</A>. </P>

</BODY>

(13)

I.7: Comment faire ?

Un simple éditeur de texte permet de créer une page

On sauvegarde la page avec l’extension .html ou .htm

Ensuite on l’ouvre, « à côté » avec un navigateur

Puis on commence le cycle édition/correction :

•

Modifier/éditer la page Les balises Conseils et conventions Comment faire? Syntaxe Les extensions

•

Modifier/éditer la page

•

L’afficher,

•

Recommencer jusqu’à satisfaction

Remarque : certain éditeur de textes peuvent fournir un mode

spécial d’édition pour les pages HTML et il existe de nombreux éditeurs spécialisés pour HTML .

Remarque : ne pas utiliser Microsoft Word pour générer de

(14)

I.8 : syntaxe générale

<HTML> ‘ début d’un document Html

</HTML> ‘ fin d’un document Html

<HEAD> ‘ début de la zone d’en tête

</HEAD> ‘ fin de la zone d’en tête <TITLE> ‘ début du titre de la page

Les balises

Conseils et conventions Comment faire?

Syntaxe

Les extensions

<TITLE> ‘ début du titre de la page </TITLE> ‘ fin du titre de la page

<BODY> ‘ début du document proprement dit

</BODY> ‘ fin du document proprement dit

Les balises ne sont pas sensibles à la casse : <HTML>

équivalent à <Html> qui est équivalent à <html>

(15)

I.8 : syntaxe générale

A vous de jouer :

• Ouvrez le bloc notes et tapez ces lignes :

• <HTML>

<HEAD>

<TITLE>Document Html minimum</TITLE> </HEAD>

<BODY>Hello world !</BODY>

Voir résultat Les balises Conseils et conventions Comment faire? Syntaxe Les extensions

<BODY>Hello world !</BODY> </HTML>

• Enregistrez le document avec l’extension .Html ou .Htm

• Ouvrez le navigateur

• Afficher le document avec le menu Fichier/Ouvrir

(16)

I.8 : syntaxe générale

Tag <BODY> :

•

la couleur de fond : BGCOLOR="#RRVVBB"

•

la couleur du texte : TEXT="#RRVVBB"

•

la couleur des liens : LINK="#RRVVBB"

•

la couleur des liens lors de sélections :

Les balises

Conseils et conventions Comment faire?

Syntaxe

Les extensions

•

VLINK="#RRVVBB"

•

la couleur des liens déjà visités : ALINK="#RRVVBB "

(17)

I.9 : les extensions

L’extension indique à l’ordinateur que c’est

une page web

Quelques extensions :

•

.htm

•

.html Les balises Conseils et conventions Comment faire? Syntaxe Les extensions

•

.html

•

.asp : Active Server Page (nécessite un serveur web)

•

.phtml,.php3,.php,.php4 : pour les pages en PHP

(nécessite un serveur web)

•

.cgi : pour les fichiers CGI (nécessite un serveur web)

•

.pl : pour les fichiers perl (nécessite un serveur web)

•

.shtml : pour les servlets (nécessite un serveur web)

(18)

Chapitre II : Mise en forme

II.1 Le texte II.2 Les titres

II.3 Les paragraphes II.4 Les alignements

Les listes Les tableaux Les frames Les formulaires

II.5 Les listes

II.6 Division graphique II.7 Divers

(19)

II.1.1 texte en gras

Texte normal, texte en gras Tags : <B> </B> Les alignements Les listes Division graphique Divers Voir résultat Exemple 1 : <HTML> <HTML> <HEAD>

<TITLE>Partie 2 - Exemple 1 : texte en gras</TITLE> </HEAD>

<BODY>

Boire ou <B>conduire</B>il faut <B>choisir</B> </BODY>

(20)

II.1.2 texte en italique

Texte normal, texte en italique Tags : <em> </em> <i> </i>

Les alignements Les listes Division graphique Divers Voir résultat Exemple 2 : <HTML> <HEAD> <HEAD>

<TITLE>Partie 2 - Exemple 2 : texte en italique</TITLE> </HEAD>

<BODY>

<em>Boire</em> ou <em>conduire</em> il faut <em> choisir </em>

</BODY> </HTML>

(21)

II.1.3 : texte souligné

Texte normal, texte souligné Tags : <u> </u>

Les alignements Les listes Division graphique Divers Voir résultat Exemple 3 : <HTML> <HEAD> <HEAD>

<TITLE>Partie 2 - Exemple 3 : texte souligné</TITLE> </HEAD>

<BODY>

<u>Boire</u> ou <u>conduire</u> il faut choisir </BODY>

(22)

II.1.4 : le tag <font>

Tags : <font> </ font > Tag puissant :

•

Choix de la couleur du texte

•

Choix de la taille du texte

•

Les alignements Les listes Division graphique Divers

•

Choix de la police

•

Plus l’association avec les feuilles de styles

Syntaxe :

(23)

II.1.4 : le tag <font>

Les alignements Les listes

Division graphique Divers

Voir résultat

Tags : <font> </ font >

Attributs :

• Color :

• Définit la couleur de la police

• Noms en Anglais ou valeurs hexadécimal

Exemple 4 :

<HTML>

<HEAD>

<TITLE>Partie 2 - Exemple 4 : tag font-couleur</TITLE> </HEAD>

<BODY>

Test de couleur du tag font (en vert)

<font color=“#00FF00” > en hexadécimal</font> </BODY>

(24)

II.1.4 : le tag <font>

Tags : <font> </ font > Attributs :

• Size :

• Définit la taille de la police

• 7 tailles : 1,2,3,4,5,6,7

• Taille par défaut : 3

Voir résultat Les alignements Les listes Division graphique Divers Exemple 5 : Exemple 5 : Exemple 5 : <HTML> <HEAD>

<TITLE>Partie 2 - Exemple 5 : tag font-taille</TITLE> </HEAD>

<BODY>

<font size=1>Taille 1</font><br>  <font size=2>Taille 2</font><br>

<font size=3>Taille 3</font><br> <font size=4>Taille 4</font><br> <font size=5>Taille 5</font><br> <font size=6>Taille 6</font><br> <font size=7>Taille 7</font><br> </BODY>

(25)

II.1.4 : le tag <font>

Tags : <font> </ font > Attributs :

• Face :

• Définit la police du texte

• Définir plusieurs séparées par des virgules (si la police n’existe pas chez l’internaute, le navigateur prendra la seconde puis la troisième, …)

• Police par défaut : Times New Roman

Voir résultat Les alignements Les listes

• Police par défaut : Times New Roman

Exemple 6 :

<HTML>

<HEAD>

<TITLE>Partie 2 - Exemple 6 : tag font-police</TITLE> </HEAD>

<BODY>

<font face=Arial>Texte en Arial</font><br>

<font face=Comic Sans MS>Texte en Comic Sans MS </font><br> <font face=Verdana>Texte en Verdana</font><br>

<font face=Arial,Verdana,Comic Sans MS>Plusieurs polices au cas ou …</font><br> </BODY>

(26)

de police

Tag <big> : augmente la taille d’un cran

Tag <small> : diminue la taille d’un cran Voir résultat

Les alignements Les listes Division graphique Divers </TITLE> Exemple 7 : <HTML> <HEAD>

<TITLE>Partie 2 - Exemple 7 : augmenter taille de la police</TITLE> </TITLE> <TITLE>Partie 2 - Exemple 7 : augmenter taille de la police</TITLE> </HEAD>

<BODY>

<font size=4>Texte en taille 4<br> <big>Texte en taille 5<br>

<big>Texte en taille 6<br> </font>

</BODY> </HTML>

(27)

II.2 : les titres

Tag : <h_numtitre> </h_numtitre>

Les alignements Les listes Division graphique Divers Voir résultat Exemple 8 : Exemple 8 : <HTML> <HEAD>

<TITLE>Partie 2 - Exemple 8 : Les titres</TITLE>

</HTML>

<TITLE>Partie 2 - Exemple 8 : Les titres</TITLE> </HEAD> <BODY> <h1>Titre 1</h1> <h2>Titre 2</h2> <h3>Titre 3</h3> <h4>Titre 4</h4> <h5>Titre 5</h5> <h6>Titre 6</h6> </BODY> </HTML>

(28)

II.3 : les paragraphes

Tag : <p> </p>

Définit un nouveau paragraphe

Les alignements Les listes Division graphique Divers Voir résultat Exemple 9 : <HTML> <HEAD>

<TITLE>Partie 2 - Exemple 9 : les paragraphes</TITLE> <TITLE>Partie 2 - Exemple 9 : les paragraphes</TITLE> </HEAD> <BODY> <p>Paragraphe 1</p> <p>Paragraphe 2</p> <p>Paragraphe 3</p> <p>Paragraphe 4</p> </BODY> </HTML>

(29)

II.4 : les alignements

Il existe 4 alignements :

•

À gauche

•

Centrer

•

A droite

•

Justifié Les alignements Les listes Division graphique Divers

•

Justifié

Alignement définit dans l’attribut align dans un

paragraphe :

•

Align=“left” (par défaut)

•

Align=“center”

•

Align=“right”

(30)

II.4 : les alignements

Les alignements Les listes Division graphique Divers Voir résultat Exemple 10 : <HTML> <HEAD>

<TITLE>Partie 2 - Exemple 10 : les alignements</TITLE> </HEAD>

<BODY>

<p align= left >Alignement gauche</p> <p align= center >Alignement centré</p> <p align= right >Alignement droite</p>

<p align= justify >Alignement justifié Alignement justifié Alignement justifié

<p align= justify >Alignement justifié Alignement justifié Alignement justifié Alignement justifié

Alignement justifié Alignement justifié Alignement justifié Alignement justifié Alignement justifié

Alignement justifié Alignement justifié Alignement justifié Alignement justifié Alignement justifié </p>

</BODY> </HTML>

(31)

II.5.1 : les listes numérotées

liste ordonnée : <ol> </ol>

Les alignements Les listes Division graphique Divers Voir résultat Exemple 11 : <HTML> <HEAD>

<TITLE>Partie 2 - Exemple 11 : les listes</TITLE> </HEAD>

<li> Introduction

<li> Mise en forme

<li> Les images

<li> Trucs et astuces

</ol>

</BODY> </HTML>

(32)

II.5.1 : les listes numérotées

pour commencer une nouvelle liste à partir d’un chiffre choisi

Voir résultat Les alignements Les listes Division graphique Divers Exemple 13 : <HTML> <HEAD>

<TITLE>Partie 2 - Exemple 13 : les listes</TITLE> </HEAD>

pour imposer la valeur : <li value="98">

<ol>

<li> Introduction

</ol>

<li> Mise en forme

<li> Les images

<li> Trucs et astuces

</ol> </BODY> </HTML>

(33)

II.5.1 : les listes numérotées

Les alignements

Les listes

Précision : attribut type de <ol>

•

Valeur 1 : chiffres arabes

•

Valeur A : lettre majuscule

•

Valeur a : lettre minuscule

•

Valeur I : chiffres romains

•

Valeur I : chiffres romains

•

Valeur i : chiffres romains minuscules

Exemple : pour commencer à F <ol type=A start =6>

(34)

II.5.2 : les listes non numérotées

liste non ordonnée :

<ul> </ul>

_{Voir résultat}

Les alignements Les listes Division graphique Divers Exemple 14 : <HTML> <HEAD>

<TITLE>Partie 2 - Exemple 14 : les listes non ordonnées</TITLE> </HEAD>

</HEAD> <BODY> <ul>

<li> Introduction <li> Mise en forme <li> Les images <li> Trucs et astuces </ul>

</BODY> </HTML>

(35)

II.5.2 : les listes non numérotées

Modification des puces :

<li type="…"> _{Voir résultat}

Les alignements Les listes Division graphique Divers Exemple 15 : <HTML> <HEAD>

<TITLE>Partie 2 - Exemple 15 : modification des puces</TITLE> </HEAD>

</HEAD> <BODY> <ul>

<li> Introduction

<li type="disc"> Mise en forme

<li type="square"> Les images

<li type="circle"> Trucs et astuces

</ul>

</BODY> </HTML>

(36)

II.5.2 : les listes non numérotées

Insertion d’images :

<ul style =

"…">

_{Voir résultat}

Les alignements Les listes Division graphique Divers </TITLE> Exemple 16 : <HTML> <HEAD>

<TITLE>Partie 2 - Exemple 16 : insertion d’images</TITLE> </HEAD>

</HEAD> <BODY>

<ul style="list-style-image:url("note.gif")"> <li>Introduction

<li>Mise en forme

<li>Les images

<li>Trucs et astuces

</ul>

</BODY> </HTML>

(37)

II.5.3 : les listes descriptives

ASCII

jeu de caractères qui assigne des valeurs numériques standard aux lettres, chiffres et signes de ponctuation

EPS

format de description de fichiers PostScript

Les alignements

Les listes

<dl> : ouvre une liste descriptive et englobe :

•

<dt> : item (doit être < une ligne)

(38)

II.5.3 : les listes descriptives

Voir résultat Les alignements Les listes Division graphique Divers Exemple 17 : <HTML> <HEAD>

<TITLE>Partie 2 - Exemple 17 : listes descriptives</TITLE> </HEAD>

<dl>

<dt>ASCII</dt><dd>jeu de caractères qui assigne

des valeurs numériques standard aux lettres, chiffres et

signes de ponctuation </dd>

format de description de fichiers PostScript </dd>

</dl> </BODY> </HTML>

(39)

II.6 Division graphique

Balise <Hr>

Dessine un trait sur toute ou partie de la page Attributs :

•

Size : épaisseur du trait

•

Division graphique

Divers

•

Size : épaisseur du trait

•

Width : longueur du trait (en % ou en pixels)

•

Align : ds le cas d’une longueur < 100%

•

Noshade : permet de supprimer l’effet de relief du

(40)

II.7 Divers

Balise <pre>

Respecte mise en page du code source

Voir résultat Les alignements Les listes Division graphique Divers Exemple 18 : <HTML> <HEAD>

<TITLE>Partie 2 - Exemple 18 : balise <pre></TITLE> </HEAD>

(41)

Tag

<Body>

:

•

la couleur de fond : BGCOLOR="#RRVVBB"

•

la couleur du texte : TEXT="#RRVVBB"

•

II.7 Divers

Les alignements

Les listes

Division graphique

Divers

•

VLINK="#RRVVBB"

•

la couleur des liens déjà visités :

ALINK="#RRVVBB "

(42)

II.7 Divers

Division graphique

Divers

Le tag <div> : mot Division

un bloc à l'intérieur de la page Syntaxe : <div>Mon texte</div> Bloc peut contenir :

Bloc peut contenir :

•

du texte,

•

des liens,

•

des images,

•

des tableaux,

(43)

II.7 Divers

Les alignements Les listes Division graphique Divers Exemple 19 : <html> <head>

<title>Partie 2 - Exemple 19 : Mon premier bloc</title>

Voir résultat

<title>Partie 2 - Exemple 19 : Mon premier bloc</title> </head>

<body>

<div align="left" style=" position:absolute ; left:50;top:100">Bonjour Monde !</div> </body>

(44)

III.1 Introduction III.2 Syntaxe

III.3 Les attributs d’un lien III.4 Les ancres

III.4 Les ancres

(45)

III.1 : Introduction

Les ancres Appels de fichiers Accueil Bla bla … http://.../accueil.html temps Menu + Accueil + Cours + CV + Recherche + Liens http://.../accueil.html http://.../cours.html http://.../cv.html http://.../recherche.html http://.../liens.html

(46)

III.2 : Syntaxe

Syntaxe Html :

•

•

Tag <a>, </a>

Les ancres Appels de fichiers Voir résultat Exemple 1 : <HTML> </TITLE> <HTML> <HEAD>

<TITLE>Partie 3 - Exemple 1 : les liens</TITLE> </HEAD>

<BODY>

(47)

III.3 : les attributs d’un lien

href : chemin d’accès de la page à

appeler

title : le texte qui apparaît dans l’info bulle

target : définit la cible de la page

Les ancres

Appels de fichiers

target : définit la cible de la page

style : définit le style du lien grâce aux feuilles

de style

(48)

III.4 : les attributs d’un lien

Les ancres Appels de fichiers Voir résultat </TITLE> Exemple 2 : <HTML> <HEAD>

<TITLE>Partie 3 - Exemple 2 : les attributs</TITLE> </HEAD>

</HEAD> <BODY>

</BODY> </HTML>

(49)

III.5 : les ancres internes

Les ancres

Appels de fichiers

définit un lieu précis dans une page Syntaxe : <a name=“monancre”></a>

•

lien vers une ancre : <a href=“#monancre”>Cliquez

ici pour rejoindre l’ancre</a> ici pour rejoindre l’ancre</a>

•

Toujours un diese devant le nom de l’ancre

•

possibilité d’appeler une ancre d’un autre fichier :

<a href=“monfichierhtml#monancre”>Cliquez ici pour rejoindre l’ancre</a>

(50)

III.6 : Appels de fichiers

Les ancres

Appels de fichiers

Possibilité d’appeler plusieurs types

de fichier :

•

Html : <a href=“monfichier.html”>Cliquez ici</a>

•

Image : <a href=“image.jpg”>Cliquez ici</a>

•

Une ancre : <a href=“#ancre”>Cliquez ici</a>

•

Pgme à télécharger : <a

href=“programme.exe”>Télécharger</a>

•

adresse électronique : <a

href=“mailto:ngardan@yahoo.fr”>Envoyez moi un mail</a>

(51)

IV.1 Introduction IV.2 Syntaxe

IV.3 Les attributs IV.4 Exemple

IV.4 Exemple

(52)

IV.1 : introduction

Les formats utilisés :

•

JPEG : offre un très bon taux de compression,

d’autant plus que l’on peu moduler ce taux pour obtenir des images de plus ou moins bonne qualité

•

GIF : offre un taux de compression moins bon et

Exemple

Images mappées

•

GIF : offre un taux de compression moins bon et

une palette de couleur plus restreinte.

Images : coûteux à télécharger (penser au

texte de remplacement)

Stocker des images dans des répertoires

(53)

IV.2 : syntaxe

L’image ne fait pas partie de votre document,

le browser va la chercher sur le serveur

Préciser taille et hauteur de l’image pour une

Exemple

Images mappées

Préciser taille et hauteur de l’image pour une

meilleur fluidité d’affichage

Image comme ancre : <a

(54)

IV.3 : les attributs

Exemple

Images mappées

src : chemin de l’accès de l’image à

appeler

title : le texte qui apparaît dans l’info-bulle

id : donne une identification à l’image

style : définit les styles des images avec les

feuilles de style

border : définit la taille de la bordure

vspace : définit l’espace vertical entre l’image

(55)

IV.3 : les attributs

Exemple

Images mappées

hspace : définit l’espace horizontal entre

l’image et le texte

align : définit l’alignement

•

soit absbottom,absmiddle, baseline, bottom, left, right, texttop, middle, top

middle, top

width : définit la largeur en pixels de l’image height : définit la hauteur en pixels de l’image

alt : définit le texte qui apparaîtra si l’image ne se

s’affiche pas

(56)

IV.3 : les attributs

Exemple Images mappées IMAGE vspace Texte … IMAGE border hspace width height

(57)

IV.5 : exemple

Exemple

Images mappées

Voir résultat <html>

<head>

<title> Partie 4_1 : Exemple d’utilisation d’images</title> </head> <body> L'image originale : <br> <img src="Genius.gif" alt="Coyote" border="5"

align="middle"> Mais c'est coyote !<p> <br> <img src="Genius.gif" alt="Coyote" alt="Coyote" border="1" width="100"

align="top"> Mais il est tout petit coyote !<p> <br> <img src="Genius.gif" alt="Coyote" border="1" width="200" height="100"

align="bottom"> Il est tout bizarre maintenant !<p> <br>

Un coyote dont la taille varie en fonction de la largeur de la page !

(58)

IV.6 Les images mappées

Image constituée de plusieurs endroits

cliquables

Syntaxe :

Exemple

Images mappées

définition appel

(59)

IV.6 Les images mappées

Tag <map> : Contient des éléments de

bloc optionnels et des éléments area pour définir les zones

Elément area :

•

Exemple

Images mappées

Elément area :

•

Attribut shape pour la forme à définir

•

Attribut coord pour les coordonnées des points

caractérisant la forme

•

Attribut href pour l'url associée

(60)

IV.6 Les images mappées

Attribut shape définit la forme de la

zone cliquable :

•

default pour la région entière

•

rect pour définir un rectangle

•

Exemple

Images mappées

•

circle pour définir un cercle

•

poly pour définir un polygone

(61)

IV.6 Les images mappées

• <area shape="rect" coords=“x1,y1,x2,y2" href="page.html"> Exemple Images mappées x1,y1 : x1,y1 : calculé par rapport au coin supérieur gauche x2,y2

(62)

IV.6 Les images mappées

• <area shape="circ" coords=“x1,y1,R" href="page1.html"> Exemple Images mappées x1,y1 : centre du cercle R : rayon

(63)

IV.6 Les images mappées

• <area shape="poly"coords="x1,y1,x2,y2,…,xn,yn" href="page2.html"> Exemple Images mappées x2,y2 x1,y1 x3,y3 x4,y4 x5,y5 x6,y6 Refermer le polygone

(64)

IV.6 Les images mappées

Voir résultat Exemple Images mappées Exemple 2 : <html> <head>

<title> Partie 4_2 : Images mappées </title> </head>

<body>

<area shape="circ" coords="170,100,10" href="javascript:alert('Vous êtes sur le nez')"> <area shape="rect" coords="70,5,110,90"

href="javascript:alert('Vous êtes sur une oreille')"> </map>

</body> </html>

(65)

V.1 Introduction V.2 Tableau simple V.3 On complique V.4 Détails V.4 Détails V.5 Ajout d ’objets V.6 Divers

(66)

V.1 : Introduction

Moyen simple de structurer l’info

Les cellules peuvent accueillir n’importe quel objet

(texte, listes, images, liens hypertexte, éléments de formulaire,…)

Tag : <table> </table>

Détails

Ajout d ’objets Divers

Tag : <table> </table>

A savoir par coeur:

•

Le tag <tr> définit une ligne.

•

Le tag <td> définit une colonne.

<tr> <tr> <td> <tr> <tr> <td> <td> <td> <td>

(67)

V.2 : Un tableau simple

Voir résultat Détails Ajout d ’objets Divers Exemple 1 : <html> <head>

<title>Partie 5 - Exemple 1 : Premier tableau</title> </head> <body> <body> <table> <tr> <td>colonne1</td> <td>colonne2</td> </tr> </table> </body> </html>

(68)

V.3 : On complique un peu

Voir résultat Détails Ajout d ’objets Divers Exemple 2 : <html> <head>

<title>Partie 5-Exemple 2 : on complique</title> </head> <body> <table> <tr> <tr> <td>Pedro</td> <td>14</td> <td>5</td> <td>12</td> </tr> <tr> <td>Roberta</td> <tr> <td>Etudiant</td>

<td>Moy. 1er trimestre</td> <td>Moy. 2eme trimestre</td> <td>Moy. 3eme trimestre</td> </tr> <tr> <td>Lagaffe</td> <td>10</td> <td>8</td> <td>11</td> </tr> <td>Roberta</td> <td>6</td> <td>18</td> <td>10</td> </tr> </table> </body> </html>

(69)

V.4.1 : Tag <Table> </Table>

Définition du tableau cellules BORDER WIDTH Détails Ajout d ’objets Divers Titre CAPTION CELLSPACING CELLPADDING

(70)

V.4.2 : Tag <Tr> </Tr>

Définit une ligne du tableau

Alignements : align (horizontal), valign(vertical)

Syntaxe : <tr valign=center align=left><td>1</td>…</tr>

top Détails Ajout d ’objets Divers center left top bottom

(71)

V.4.3 : Tag <Td> </Td>

définit une colonne du tableau

Alignements : align (horizontal), valign(vertical)

Syntaxe : <tr align=left><td>10<td

align=center>10<td=right>10…</tr>

Détails

Ajout d ’objets Divers

(72)

V.4.4 : Fusion de cellule

Rowspan : fusion de lignes Colspan : fusion de colonnes Syntaxe : <tr align=center><td colspan=2></td><td>A</td><td>B</td><td>C</td></tr> <tr align=center><td rowspan=2 colspan=2>10<td><td>D</td><td>E</td><td>F</td></tr> <tr align=center><td>G</td><td>H</td><td>I</td></tr> <td> <td> <td> <td> <td> <td> Détails Ajout d ’objets Divers <tr> <tr> <tr> rowspan=2 colspan=2

(73)

V.4.4 : Exemple : la fusion de cellule

Voir résultat Détails Ajout d ’objets Divers Exemple 3 :

(74)

V.5 : Ajout d’image dans les cellules

Voir résultat Détails Ajout d ’objets Divers Exemple 4 : <html> <head>

<title>Partie 5 - Exemple 4 : Image dans une cellule</title> </head>

<body>

<tr>

<td bgcolor="blue" align=center><font color="white">Le coyote</td> </tr> <tr> <td><img src="genius.gif"></td> </tr> </table> </body> </html>

(75)

V.6 Divers

Tag <TH> : identique à <td> mais texte

Considéré comme texte d’en-tête (centré-gras)

Tag <CAPTION> : titre en haut ou en bas du

tableau (Align=top ou Align=bottom)

Détails

Ajout d ’objets

Divers

tableau (Align=top ou Align=bottom)

Attribut Bgcolor : dans le tag <table>, <tr>

ou <td> permet de définir la couleur d’un

tableau, d’une cellule ou d’une ligne.

Attribut Nowrap pour <td> : empêche de

(76)

Chapitre VI : Les frames

VI.1 Introduction VI.2 Syntaxe VI.3 Exemple VI.4 Attributs Les tableaux Frames Les formulaires VI.4 Attributs VI.5 Divers VI.6 Exemple

(77)

VI.I Introduction

AttributsDivers Exemple

Frame = cadre

Division de l’écran du navigateur en plusieurs

zones

Mise en page correspond à plusieurs fichiers

Html différents

(78)

VI.2 Syntaxe

Tag : <frameset> </frameset> Possibilité d’exprimer la taille :

•

En pourcentage

•

En pixel

Attributs Divers Exemple

Frame verticale et/ou horizontale

•

Verticale : cols

(79)

VI.3 Comprendre grâce à un exemple

Exemple 1 :

<title>Partie 6 – Exemple 1 : Frame</title> <frameset cols="100,*" frameborder="10">

<frameset> et </frameset> sont définis dans les tags <head> et </head>

et non entre <body> et </body>

Attributs Divers Exemple

Voir résultat

</head> <body> </body> </html>

<frameset> qui définit des frames verticales

.

<frameset> qui définit des frames verticales (avec l'attribut cols), les dimensions des frames, la première fait 100 pixels et la seconde prend le reste.

On a aussi, l'attribut frameborder qui définit la taille de la bordure.

(80)

VI.3 Comprendre grâce à un exemple

Fichier source Nom de la frame

Attributs

Divers Exemple

Fichier source Nom de la frame

Obligatoire pour qu’un lien apparaisse dans une autre frame :

(81)

VI.4 Attributs du tag frame

Src Définit le chemin d'accès de la frame à insérer

Marginwidth Définit l'espacement horizontal entre la bordure et le

contenue de la frame

Marginheight Définit l'espacement vertical entre la bordure et le

contenue de la frame

Scrolling Active l'affichage de la barre de défilement, yes pour

"toujours", no pour "non" même s'il y en a besoin et auto,

Attributs

Divers Exemple

"toujours", no pour "non" même s'il y en a besoin et auto, c'est le navigateur qui décide s'il y en a besoin

Noresize S'il est mit dans le tag, il est impossible de redimensionner

la frame avec la souris, cet attribut n'a pas de valeur Borderwidth ? Définit la taille de la bordure de la frame

Name Définit le nom de la frame

Bordercolor Définit la couleur de la bordure

Frameborder Active l'affichage de la bordure, No ou 0 pour désactiver,

yes pour activer

(82)

VI. 5 Divers

Tag <noframes> </noframes> :

•

Permet d’indiquer à l’utilisateur si son navigateur

reconnaît ou non les frames

Tag <base> :

•

Si vous avez bp de liens dans une frame, pour éviter

Attributs

Divers

Exemple

•

Si vous avez bp de liens dans une frame, pour éviter

d’écrire target="frame" à chaque fois

•

rajouter la ligne <base target="frame2"> entre les

tags <head> et </head>

(83)

VI.6 Exemple

AttributsDivers

Exemple

Exemple 2 :

<title> Partie 6-Exemple 2 : Exemple de cadres </title> </head>

Voir résultat

Le navigateur ne prend pas en charge les frames </noframe>

(84)

VII.1 Introduction

VII.2 La méthode Get VII.3 La méthode Post VII.4 L’attribut Action VII.4 L’attribut Action

VII.5 Ouvrir et fermer un formulaire VII.6 Eléments d’un formulaire

(85)

VII.1 Introduction

Zones de dialogue avec l’utilisateur

Zones de texte, de cases à cocher, des listes

de choix

Interface de saisie qui nécessite un traitement

(voir cours de Php) L’attribut Action Ouvrir et fermer un formulaire Eléments (voir cours de Php)

Un formulaire est défini entre les tags

<form> et </form>

Attribut method définit la méthode d’envoie

des données

(86)

VII.2 La méthode Get

Méthode par défaut

<form method= "get"

action="/cgi-bin/programme.cgi"> équivaut à <form action="/cgi-bin/programme.cgi">

L’attribut Action Ouvrir et fermer un formulaire Eléments

La méthode Get place les données dans la

chaîne de requête QUERY_STRING

Inconvénients de Get : URL confuse, limitation

de la taille des données, méthode moy.

(87)

VII.3 La méthode Post

Méthode un peu plus compliquée Place pas les données dans la

QUERY_STRING mais une variable

d’environnement (CONTENT_LENGTH) L’attribut Action Ouvrir et fermer un formulaire Eléments Avantages de Post :

•

Peut envoyer un grand nombre de données

•

Pas d’URL confuse

(88)

VII.4 L’attribut Action

L’attribut ActionOuvrir et fermer un formulaire Eléments

Method : façon dont les données sont envoyées Action : définit avec quoi les données sont

envoyées (voir cours Php)

Trois valeurs !

•

mailto:monadressemail@yahoo.fr

•

mailto:monadressemail@yahoo.fr

•

Un programme cgi : /cgi-bin/programme.cgi

•

Une page en ASP, PHP, JSP, …

Envoi d’un mail par un formulaire : <form

(89)

VII.5 Ouvrir et fermer un formulaire

Un formulaire commence toujours par les

balises suivantes :

L’attribut Action

Ouvrir et fermer un formulaire

Eléments

</form>

L'attribut action définit le document ou

l'adresse où les données du formulaire seront transmises, et method définit la méthode

(90)

VII.6 Eléments d’un formulaire

Tag de définition des éléments

<INPUT type="text" size="x" maxlength="m"

name="label" value="texte"> Attributs :

•

L’attribut Action Ouvrir et fermer un formulaire Eléments Attributs :

•

size longueur de la zone du texte ;

•

maxlength nombre de caractères maximal autorisé

;

•

name identification ;

(91)

VII.6.1 Boite de saisie simple

Zone ou on peut taper du texte

L'attribut type définit le type de l'élément, name

donne le nom de l'élément, size sa longueur en pixel. L’attribut Action Ouvrir et fermer un formulaire Eléments pixel.

(92)

VII.6.2 Cases à cocher et boutons radio

Case à cocher :

• <input type="checkbox" name="nom" value="valeur">

Bouton radio :

• <input type="radio" name="nom2" value="valeur2">

Voir résultat L’attribut Action Ouvrir et fermer un formulaire Eléments Exemple 1 : Cours disponibles :<br><br>

<br><br> <input type="radio" name="nombre" value="1">1 Cours disponibles :<br><br>

<input type="checkbox" name="cours" value=" html ">html<br> <input type="checkbox" name="cours" value=" catia ">Catia V5<br> <input type="checkbox" name="cours" value=" java ">Java<br>

Combien de versions?<br><br> <input type="radio" name="nombre" value="1">1

<br>

(93)

VII.6.3 Listes

Permet un choix multiple Syntaxe :

<SELECT NAME="nomdelaliste" [SIZE] [MULTIPLE]> <OPTION VALUE="valeur1">Choix1 <OPTION VALUE="valeur2">Choix2 L’attribut Action Ouvrir et fermer un formulaire Eléments <OPTION VALUE="valeur2">Choix2

<OPTION VALUE="valeurX" [SELECTED]>ChoixX

(94)

VII.6.3.1 Liste simple

Exemple 2 : <select name="cours"> Voir résultat L’attribut Action Ouvrir et fermer un formulaire Eléments <option value="java">Java</option>

<option value="catia">Catia V5</option> <option value="html">Html</option>

<option value="Algo">Algorithme</option> </select>

(95)

VII.6.3.2 Liste

Voir résultat L’attribut Action Ouvrir et fermer un formulaire Eléments Exemple 3 :

<option value="catia">Catia V5</option>

<option value="html" selected>Html</option> <option value="Algo">Algorithme</option> </select>

(96)

VII.6.3.3 Liste choix multiples

Voir résultat L’attribut Action Ouvrir et fermer un formulaire Eléments Exemple 4 :

<option value="java" selected>Java</option> <option value="catia">Catia V5</option>

<option value="html" selected>Html</option> <option value="Algo">Algorithme</option> </select>

(97)

VII.6.4 Zone de textes

Tag <textarea>, </textarea>

•

cols définit la longueur de la boîte de texte et rows

sa largeur. L’attribut Action Ouvrir et fermer un formulaire Eléments sa largeur.

(98)

réinitialisation de formulaire

Syntaxe :

•

•

Submit : envoie des données du formulaire vers sa

destination (celle indiquée dans l'attribut action de la L’attribut Action Ouvrir et fermer un formulaire

Eléments

destination (celle indiquée dans l'attribut action de la balise form),

Reset : efface contenu du formulaire

Pour remplacer le bouton par une image : <INPUT

type="image" src="url image" alt="texte">

(99)

VII.6.6 Boîte de saisie masquée

Type= " password" : Mot de passe

<INPUT type="password" size="x" maxlength="m"

name="label" value="texte">

Attributs identiques à ceux de type="text"

L’attribut Action Ouvrir et fermer un formulaire

(100)

VII.6.7 Sélecteur de fichier

Type : "file"

Envoi d'un fichier du client vers le serveur.

•

•

NB : le type d'encodage du formulaire doit être :

Voir résultat L’attribut Action Ouvrir et fermer un formulaire Eléments

•

multipart/form-data. Exemple 3 :

<form method="post" action="ajout.php3" enctype='multipart/form-data'> <input type="file" name="fichier">

(101)

VII.6.8 Elément Button

<BUTTON type="submit / reset / button" name="label" value="texte" > texte, code HTML </BUTTON> L’attribut Action Ouvrir et fermer un formulaire Eléments

Nom <INPUT type="text"><BR> Prénom <INPUT type="text"><BR>

Mot de passe <INPUT type="password"><BR> <BUTTON type="submit">

<IMG src="soumettre.jpg" align="center"> <BR>cliquez-moi !!!

(102)

VII.6.8 Données cachées

Permet d’envoyer des données cachées

au serveur à l’insu de l’utilisateur

L’attribut Action Ouvrir et fermer un formulaire

Eléments

<INPUT type="hidden" name="label"

value="texte">

Ajouté au formulaire avant l'envoi des

(103)

VIII.1 Introduction VIII.2 Syntaxe CSS

VIII.3 Classes de style VIII.4 Attribut class

VIII.4 Attribut class

VIII.5 Sous classe de style (ID)

VIII.6 Utilisation d’une sous-classe de style VIII.7 Divers

VIII.8 Définition dans des fichiers externes VIII.9 Utilisation ponctuelle de style

(104)

VIII.1 Introduction

CSS : Cascading Style Sheets

Permet réutilisation de styles de manière

modulaire

Balise <style> entre <head> et </head> :

•

Utilisation d’une sous-classe de style Divers

Définition dans des fichiers externes Utilisation ponctuelle

Balise <style> entre <head> et </head> :

•

Définit une zone contenant définition des styles

•

Indiquer le mode de description utilisé grâce à type:

•

text/css : description à la norme CSS

(105)

VIII.2 Syntaxe CSS

Par exemple : <STYLE Type="text/css"> Mot-clé valeur Zone de style De type CSS Utilisation d’une sous-classe de style Divers Définition dans des fichiers externes Utilisation ponctuelle

P {font-size : 16pt ; color : blue;} </STYLE> Déf. d’un Style pour les paragraphes Déf. d’un Style tjrs entre accolades

(106)

VIII.2 Syntaxe CSS

Par exemple : Voir résultat Utilisation d’une sous-classe de style Divers Définition dans des fichiers externes Utilisation ponctuelle

Exemple 1 :

<title>Partie 8 – Exemple 1 : Feuilles de style</title> <style type="text/css"> <style type="text/css"> P {font-size:16pt;color:blue;} </style> </head> <body>

Texte qui n'est pas dans un paragraphe

<p>

Texte dans un paragraphe Application du style

</p> </body>

(107)

VIII.2 Syntaxe CSS : mots-clé

nom _qualificatif Tiret de séparation Utilisation d’une sous-classe de style Divers Définition dans des fichiers externes Utilisation ponctuelle

font - weight

font - size

(108)

VIII.3 Classes de style

Tout élément de structure Html peut

avoir un style particulier (<h1>,<p>,<cite>,…)

Mais style pour un paragraphe s’applique à

tous les paragraphes

Pour affiner :

•

Adjoindre autant de classe particulières pour un

élément

(109)

VIII.3 Classes de style

Par exemple : <style type="text/css"> .blanc{color:white} code.rouge{color:red} Utilisation d’une sous-classe de style Divers Définition dans des fichiers externes Utilisation ponctuelle code.rouge{color:red} p.grasbleu{ color:blue; font-weight:bold; } </style>

(110)

VIII.4 Attribut class

Permet d’affecter une classe spécifique

à une balise

Reçoit en paramètre le nom de la classe Exemple d’utilisation :

Exemple d’utilisation :

•

<p class=blanc>Paragraphe en blanc</p>

(111)

VIII.5 Sous-classe de style (ID)

Comment faire si l’on souhaite deux couleurs

dans un même paragraphe ?

Définit un modificateur

Définition dans des fichiers externes Utilisation ponctuelle Définit un modificateur Indicateur de définition d’un ID <style type="text/css"> .maclasse{color=blue;font-size=15pt;font-weight=italic;} #rouge{color:red} </style> Nom de l’ID classe

(112)

style

Attribut ID

Syntaxe : <p class=maclasse id=rouge>

Peut être utilisé seul ou pour réaliser une exception dans

une classe Voir résultat Utilisation d’une sous-classe de style Divers Définition dans des fichiers externes Utilisation ponctuelle Exemple 2 : Exemple 2 : <html> <html> <head>

<title>Partie 8 – Exemple 2 : Feuilles de style</title>

<pclass=maclasse>texte en 15 pt, bleu et gras</p>

<pclass=maclasse id=rouge>texte en 15 pt, gras mais en rouge</p> <pid=rouge>police par défaut mais en rouge</p>

</body> </html>

(113)

VIII.7 Divers

Application de style à un bloc entier :

•

•

<span class=maclasse>bloc</span> Groupement :

•

Utilisation d’une sous-classe de style Divers Définition dans des fichiers externes Utilisation ponctuelle

•

H1,H2,H3 {color : blue}

Style dans un contexte :

•

H3 CITE {color : blue}

Héritage des styles :

(114)

externes

Objectif feuilles de style : appliquer des styles

à un ensemble de page Web

Recopier dans chaque pages Web les

Définition dans des fichiers externes

Utilisation ponctuelle

Recopier dans chaque pages Web les

définitions des styles : pénible

Possibilité de décrire les différentes classes,

(115)

VIII.8.1 Le fichier de style

Ne contient pas de balise <style> Commentaires : /* */ Ouvrir le bloc-notes Exemple : Voir résultat Utilisation d’une sous-classe de style Divers Définition dans des fichiers externes

Exemple :

Enregistrez en messtyles.css

/*Exemple de fichier de style*/

.maclasse{color=blue;font-size=15pt;font-STYLE:italic;} #rouge{color:red}

(116)

VIII.8.2 Utilisation des fichiers externes

Solution 1 : Balise Link

•

Syntaxe : <link rel=stylesheet type=text/norme

href=url_du_fichier_style>

•

Attribut rel= stylesheet : indique que l’on utilise une

feuille de style

•

Voir résultat Utilisation d’une sous-classe de style Divers Définition dans des fichiers externes

•

Attribut type : choix des deux normes de définitions

des styles (text/css ou text/javascript)

•

Attribut href : URL du fichier externe contenant les

styles

Solution 2 : Balise <style>

•

Syntaxe : <style type=text/norme

(117)

VIII.8.2 Utilisation des fichiers externes

Voir résultat <html> <head> <title>Partie 8 – Exemple 3 : Feuilles de style</title> <link rel="stylesheet" type="text/css" href="style.css"> .style1{ color:black; font-family:Arial; font-size:14px; } a:visited{ color:blue; Exemple8_3.html _Style.css Utilisation d’une sous-classe de style Divers Définition dans des fichiers externes

type="text/css" href="style.css">

</head>

<body class="style1"> <p>

Tous les éléments de cette page obéissent aux lois de la feuille de style. Avec des magnifiques <a href="#">liens</a> </p> </body> </html> color:blue; font-family:Arial; text-decoration:underline; } a:hover{ color:white; font-family:Arial; text-decoration:none; background-color:#6477B8; } a:active{ color:black; font-family:Arial; text-decoration:underline; }

(118)