HTML - CPE

Transcription

HTML - CPE

Site Web - HTML
© CPE Nanur-Hainaut 2008
Rudi Réz
Sommaire
y
y
y
y
y
y
y
y
Introduction
Utilisations du HTML
Structure HTML
Les balises
Les liens
l
h
hypertexte
Les Form
Exemples
Exercices
Introduction
HTML : HyperText Mark-up Language
Le langage HTML Permet de formater une page de texte et
d’établir des liens vers d’autre pages.
La consultation de ces pages par un navigateur
Le HTML est indépendant du système d
d’exploitation
exploitation
Le HTML est indépendant du hardware.
Historique
q
HTML
HTML+
HTML 2.0
20
1990
1994
Novembre 1995
HTML 3.0
1996
Standardisation du HTML
CSS 1
CERN (Tim Berners-lee)
IETF
Version de transition – non diffusée
Decembre 1996
HTML 3.2
Janvier 1997
HTML 4.0
Décembre 1997 - Avril 1998
tables, applets, text flow, superscripts & subscripts
Ameliorations graphique – feuille de style, frame,…
XML
1998
Extensible Marked Language
CSS2
HTML 4.01
Mai 1998
Décembre
é
1999
JAVA, javascript, Vbscript, ActiveX, CGI, PHP
XHTML 1.0
0
Janvier
Ja
e 2000
000
XHTML 1.1
Janvier 2000
Intégration des règles du XML
CSS3
2001
RFC1866
Objectif
y
Réaliser un ensemble de documents HTML de présentation de la formation
Réaliser un site web local.
(Gérer le site web avec EASYPHP)
y
Contenu du site web
y
y
◦
◦
◦
◦
◦
◦
◦
Page d
d’accueil
accueil
Présentation de la formation
Présentation des matières
Liste et présentation des participants
Liste et présentation des formateurs
Planning
Intégrer les présentations
Utilisations du HTML
Standard de format de texte
Liens hypertexte
yp
fonctionnement du HTML
Structure HTMP
<html>
<head>
<title>Nom du document</title>
</head>
<body>
texte de la page
</body>
</html>
Fichier : HTML_exemple1.html
<html>
<head>
<title>exemple1</title>
</head>
<body>
Page web
</body>
</html>
Les balises de texte
y
Entete <h1> … <h6>
◦
◦
◦
◦
y
<h1>Texte
<h2>Texte
<h3>Texte
<h6>Texte
format
format
format
format
h1</h1>
h2</h2>
h3</h3>
h6</h6>
Paragraphe <p>
◦ <p>premier paragraphe </p>
◦ <p>second paragraphe</p>
y
Saut de page <br> ou <br/>
y
Texte gras <b>
y
It li
Italique
<i>
i
y
Souligné <u>
_
p
<html>
<head>
</head>
<body>
Les entetes
<h1>entete h1</h1>
<h2>entete h2</h2>
<h3>entete h3</h3>
<h4>entete h4</h4>
<h5>entete h5</h5>
<h6>entete h6</h6>
Elements de texte
<p> ceci est un paragraphe</p>
<p>
p ceci est un second p
paragraphe</p>
g p
/p
<br> (saut de ligne)
<b>style gras</b>
<u>souligné</u>
<i>style italique</i>
</body>
</html>
Les balises de texte - suite
y
Ligne horizontale <hr>
y
Baré <s>
y
Grand texte <big>
y
Petit texte <small>
y
Texte renforcé <strong>
y
Indice <sub>
y
Exposant <sup>
y
Commentaires 
◦ <!–- commentaire invisible à l’affichage -->
Les listes
y
y
y
y
y
y
Liste sans ordre
<ul>
l
<li>premier point</li>
<li>second point</li>
</ul>
Liste avec ordre
<ol>
</ol>
/
Liste de définition
<dl>
<dt>premier point</dt>
<dd>définition 1</dd>
/
<dt>second point</dt>
<dd>définition 2</dd>
</dl>
y
Styles de liste
◦
<ul type=« square »>
◦
◦
◦
◦
◦
<ol
<ol
<ol
<ol
<ol
type=«
type=«
type=«
type=«
type=«
A »>
a »>
I »>
i »>
1 »>
_
p
<html>
<head>
<title>exemple</title>
</head>
<body>
Liste sans ordre
<ul>
</ul>
Liste avec ordre
<ol>
</ol>
Liste de Definition
<dl>
<dt>premier point</dt>
<dd>definition 1</dd>
<dt>second point</dt>
<dd>definition 2</dd>
</dl>
</body>
</html>
Les tables
<table border="1">
<tr>
<th>Titre 1</th>
<th>Titre 2</th>
</tr>
<tr>
<td>texte 1</td>
<td>texte 2</td>
</tr>
<tr>
<td>texte 3</td>
<td>texte 4</td>
</tr>
</table>
Options de table
◦
◦
◦
◦
◦
ColSpan=«
ColSpan
«2»
Rowspan=« 3 »
Width=« 120 »
Cellspacing=« 5 »
Align=« center »
_
p
<html>
<head>
</head>
<body>
Les tables
<table border="1">
<tr>
<th>Titre 1</th>
<th>Titre 2</th>
</tr>
<tr>
<td>texte 1</td>
<td>texte 2</td>
</tr>
<tr>
<td>texte 3</td>
<td>texte 4</td>
</tr>
</table>
</body>
</html>
Les frames
<FRAMESET ROWS="*,30" BORDER="2">
<FRAMESET COLS
COLS="160,*">
"160 *">
<FRAME SRC="frame_navig.html" NAME="navig">
<FRAME SRC="frame_page.html" NAME="page">
</FRAMESET>
/
<FRAME SRC="frame_pied.html" NORESIZE SCROLLING="no"
MARGINHEIGHT="1" MARGINWIDTH="1" NAME="pied">
<NOFRAME>
<B>Attention</B>
: ce document contient des "frames" q
que votre navigateur
g
WWW n'est p
pas
capable d'interpréter. Utilisez Netscape Navigator (vers. 2 ou sup.) ou
Microsoft Internet Explorer (vers. 3 ou sup.) ; sinon,
<A HREF="frame_navig.html"><B>suivez ce lien</B></A>.
</NOFRAME>
</FRAMESET>
_
p
<html>
<head>
</head>
<FRAMESET ROWS="*,30" BORDER="2">
<FRAMESET COLS="160,*">
<FRAME SRC="frame_1.html" NAME="navig">
<FRAME SRC="frame
SRC frame_2.html
2.html" NAME="page">
NAME page >
</FRAMESET>
<FRAME SRC="frame_3.html" NORESIZE SCROLLING="no"
MARGINHEIGHT="1" MARGINWIDTH="1"
NAME="pied">
<NOFRAME>
<B>Attention</B> : ce document contient des "frames" que votre navigateur
WWW n'est
pas capable d'interpréter. Utilisez Netscape Navigator (vers. 2 ou sup.) ou
Microsoft Internet Explorer (vers. 3 ou sup.) ; sinon,
<A HREF="frame
HREF= frame_navig.html
navig html"><B>suivez
><B>suivez ce lien</B></A>
lien</B></A>.
</NOFRAME>
</FRAMESET>
<body>
</body>
</html>
Les Divisions
<DIV>
</DIV>
<DIV class=« modele1 »>
avec une définition de « modele1 » dans la partie <head>
<style type=« text/css »>
div.modele1 {position:absolute, left:0; top:10; bottom:290;
width:350;
idth 350 text-align:center;
te t align cente color:red}
colo ed}
</style>
Ou
<DIV style=« position:relative, left:5; top:10; width:350; text-align:right »>
_
p
<html>
<head>
<style type="text/css">
div.modele1 { Position:relative; left:120; top:200; bottom:290; width:350; textalign:center; color:green; border-style:ridge; border-width: 10pt}
</style>
</head>
/
<body>
Les divisions
<DIV class=
class="modele1">
modele1 >
Texte affiché dans la division numéro 1
</DIV>
<DIV style="position:absolute; left:5; top:100; width:550; text-align:center;
color:red; border-style:groove;
border style:groove; border-width:
border width: 10pt
10pt">
>
Texte affiché dans la division numéro 2
</DIV>
</body>
</html>
Les balises de liens
y
Liens <a>
◦ <a href=http://www.cpee.be>lien
h f htt //
b li
vers lle site
it du
d CPE</a>
CPE /
y
Image <img>
◦ <img
g src=“cpee.gif"
p
g width="144" height="50"
g
/>
y
Audio – Vidéo <embed>
◦ <embed src=“macarena.wav" autostart=“true” loop=“true” />
_
p
<html>
<head>
</head>
<body>
Liens vers les exemples <br> 
<a href=./HTML_exemple1.html>lien vers exemple1</a><br>
<a href=./HTML_exemple4.html>lien
f
vers exemple4</a><br>
</body>
/
y
</html>
Les images
y
Image de fond
<body background="fichier.jpg">
y
Image dans le texte
<img
i
src="carres.jpg"
"
j " align="left">
li
"l ft"
y
Image dimentionnée
<img src=
src="boules
boules.jpg
jpg" width=100 height=40>
y
Bordure
<img
i
src="nom_fichier.jpg"
"
fi hi j " b
border=0>
d
0
y
Alternative
< img src=
src="bidon
bidon.gif
gif" alt = " Grâce à ALT vous le savez ! " >
Les cartes
y
y
HTML_exemple8.html
HTML exemple8 html
<map> définit et nomme l'ensemble des régions.
<area> permet de les réaliser.
réaliser Plusieurs formes sont disponibles : rectangle,
rectangle
cercle, polygone.
<img src="..." usemap="#..."> appelle l'image et les régions.
<map name="MesZones">
<area shape="rect" coords="x,y,a,b" href="fichierR.htm">
<area shape="circle" coords="x,y,r" href="fichierC.htm">
<area shape="poly" coords="x,y,a,b,s,t, ... , ... " href="fichierP.htm">
</map> <img src="MonImage.jpg"
usemap="#MesZones" >
y
Si deux régions se superposent, la première dans la liste est active.
Inclure une p
page
g web
<iframe src =« http://www.telecom.cpehn.be/page.php
p
p
p g p p » width=« 80% »
height=« 300 »>
<p>Your browser does not support iframes.</p>
</iframe>
-- Pas supporté en HTML 4.0.1 et en XHTML --
Les Formes
Les formulaires interactifs permettent aux auteurs de pages Web de doter leur page web d'éléments interactifs permettant par
exemple un dialogue avec les internaute, à la manière des coupons-réponse présents dans certains magazines.
Le lecteur saisit des informations en remplissant des champs ou en cliquant sur des boutons, puis appuie sur un bouton de
soumission (submit) pour l'envoyer soit à un URL, c'est-à-dire de façon générale à une adresse e-mail ou à un script de page
web dynamique tel que PHP
PHP, ASP ou un script CGI
CGI.
<FORM METHOD="POST" ou "GET" ACTION="url" ENCTYPE="x-www-form-urlencoded">
<FORM METHOD=POST ACTION="mailto:[email protected]">
_
p
<HTML>
<HEAD>

<TITLE> ENQUETE </TITLE>
</HEAD>
<BODYBGCOLOR=#00FFFF>
<FORM>
<H3 ALIGN=CENTER> Enquête sur la satisfaction des Utilisateurs</H3>
<FORM METHOD="POST" ACTION="mailto:[email protected]" >
<PRE>
<P>
Nom : <INPUT TYPE="texte" NAME="Nom1" SIZE="30">
Prénom : <INPUT TYPE="texte" NAME="Prenom1" SIZE="40">
E-mail : <INPUT TYPE="texte" NAME="E-mail" SIZE="50">
Adresse : <INPUT TYPE="texte" NAME="Adr1" SIZE="30">
<INPUT TYPE="texte" NAME="SIZE="30">
Code Postale : <INPUT TYPE="texte" NAME="code postal" SIZE="10">
Ville : <INPUT TYPE="texte" NAME="ville" SIZE="50">
<P>
<OL>
<LI> <INPUT TYPE ="CHECKBOX" NAME="topping1" VALUE="Marie"> Marié
<LI> <INPUT TYPE ="CHECKBOX" NAME="topping2" VALUE="Célibataire"> Célibataire
<LI> <INPUT TYPE ="CHECKBOX" NAME="topping3" VALUE="Etudiant"> Etudiant
<LI> <INPUT TYPE ="CHECKBOX" NAME="topping4" VALUE="Cadre"> Cadre
</OL>
<P>
Votre opinion <SELECT NAME=OPTION1>
<OPTION> Très Satisfait
<OPTION> Satisfait
<OPTION> Indifferent
<OPTION> C'est
C est très nul !!
</SELECT>
<P>
Vos commentaires : <TEXTAREA NAME=COM1 ROWS="6" COLS="70" A></textarea>
<P>
<INPUT TYPE=SUBMIT VALUE="Envoyer"
<INPUT TYPE=RESET VALUE="Annuler"
</BODY>
</PRE>
</FORM>
</HTML>
Les Modifications de style
<html>
<head>
<title>Example Style Settings</title>
</head>
<style type="text/css">
<!-body {background: #FFFFFF; color: #000000; margin-top: 6%;
margin-left: 3%; margin-right: 3%}
h1 {font: 14pt ariel; color: #0000FF}
h2 h3,
h2,
h3 h4 {margin
{margin-left:
left: -3%}
3%}
p {font: 12pt roman; text-indent: 0.5in}
a {color: #00FF00; text-decoration: none}
-->
</style>
OU
<link href="style.css" rel="stylesheet" type="text/css">
http://www.csszengarden.com/tr/francais/
Les couleurs
HTML exemple11 html
HTML_exemple11.html
body {background: #FFFFFF; color: #000000}
body {background: white; color: black}
3 octets pour 3 couleurs – RGB
#FF0000 = red
#00FF00 = green
#0000FF = blue
#FFFF00 = yellow
#FF00FF = magenta
#00FFFF = cyan
#BEBEBE = grey
Rouge
Vert
Bleu
Jaune
magenta
cyan
Gris
[R
[Rouge
V
Vertt Bl
Bleu]]
Les META
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Arachnophilia 3.9">
<meta name=
name="description"
description content=
content="The
The Computer Technology Documentation
HTML Guide - Setting Document Style">
<meta name="keywords" content="Documentation, HTML, html document style,
style, setting document style, setting html document style">
<title>The CTDP HTML Guide - Setting Document Style</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
.
.
.
</body>
Les META
NAME
<meta name="Nom du tag" CONTENT="Attribut">
Nom du tag
Attribut
Utilité
Author
Informations sur l'auteur
Informations sur l'auteur de la page
Copyright
Informations de copyright
Permet de référencer des informations de droits d'auteur
d auteur
Description
Description de votre site
Permet de donner une information à afficher lors du résultat d'une
recherche
Expires
Never
date à laquelle la page expire
Indique au robot la date d'expiration de la page
Generator
Nom du logiciel
Nom de l'éditeur HTML ayant généré la page web
Keywords
mot clé, mot clé, etc."
Mots clés décrivant la page Web
g
Rating
general
g
Type
yp de contenu (public
(p
visé))
Rev
Votre@email
Mail du Webmestre
Revisit-after
x days
Délai de visite par le robot
Robots
All
none
Permet à tous les robots d'indexer
d indexer
Subject
Sujet de la pag
Permet de préciser le sujet de la page
Les META
NAME
<META HTTP-EQUIV="Nom
HTTP-EQUIV= Nom du tag"
tag CONTENT=
CONTENT="Attribut">
Attribut >
Nom du
tag
Attribut
Utilité
Pragma
no-cache
Empêche le navigateur de garder la page dans son cache
Refresh
X;URL="adresse"
Appelle une autre page (située à l'URL spécifiée) après un délai
d'attente de x secondes
Robots
all
follow
index
nofollow
noindex
none
Permet au robot de référencer toute la page (par défaut)
Permet au robot de suivre les liens de la page
Permet au robot d'indexer la page
Interdit au robot de suivre les liens
Interdit au robot d'indexer la page
Empêche le robot de poursuivre l'indexation du site
Windowtarget
_blank
_top
Force le browser à afficher la page dans une nouvelle fenêtre
Affiche la page dans la fenêtre entière (pas dans une frame).
Le XML dans HTML
• On peut toujours incorporer du XML dans un fichier Html avec la balise <xml> ... </xml>.
• Mais quand les navigateurs rencontrent ces balises inconnues, rien n'est affiché
• ll’astuce
astuce : "îlots
îlots de données"
données [data islands].
<xml id="fichierxml" src="simple.xml"></xml>
données : [datasrc="#id«
[datasrc= #id« ]
Nom des champs :[datafld="balise_xml"].
Liens utile
La spécification HTML 4
4.01
01 : http://www.la-grange.net/w3c/html4.01/
http://www la-grange net/w3c/html4 01/
La spécification XHTML 1.0 : http://www.la-grange.net/w3c/xhtml1/
Les CSS 1 : http://www.yoyodesign.org/doc/w3c/css1/index.html
Les CSS 2 : http://www.yoyodesign.org/doc/w3c/css2/cover.html
p
y y
g
g
Validateur (X)HTML : http://validator.w3.org/
Validateur CSS : http://jigsaw.w3.org/css-validator/

HTML - CPE

Transcription

Documents pareils

1- balises du squelette 2-dans le head 3-dans le body 4

DUT SRC - Webchronique

Html 05 - HTML facile - Pagesperso

RELEVÉ DES DROITS MUSICAUX MUSIC CUE SHEET

Comprendre le language html

2. HTML - Travaux Pratiques

cours d`initiation a la creation de pages internet en html plan

daw examen mai 2016 - Développement d`Applications Web

TP2 - Validation HTML

[IMAGE] Course Name: Solutions aux problÃ¨mes courants en matiÃ