CPEHN - Site WebSite Web - HTML · 2016-11-25 · Ameliorations graphique – feuille de style,...

Site WebSite Web -- HTMLHTMLSite Web Site Web -- HTMLHTML

© CPE Nanur-Hainaut 2008 Rudi Réz

SommaireSommaireIntroductionUtilisations du HTML Structure HTMLLes balises

l hLes liens hypertexteLes FormExemplesExercicesExercices

IntroductionIntroductionIntroductionIntroductionHTML : 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’exploitation � Le HTML est indépendant du système d exploitation

� Le HTML est indépendant du hardware.

HistoriqueHistoriqueqqHTML 1990 CERN (Tim Berners-lee)HTML+ 1994HTML 2 0 Novembre 1995 IETF RFC1866HTML 2.0 Novembre 1995 IETF RFC1866

Standardisation du HTML

HTML 3.0 1996 Version de transition – non diffuséeCSS 1 Decembre 1996HTML 3.2 Janvier 1997

tables, applets, text flow, superscripts & subscripts

HTML 4.0 Décembre 1997 - Avril 1998Ameliorations graphique – feuille de style, frame,…Ameliorations graphique feuille de style, frame,…

XML 1998Extensible Marked Language

CSS2 Mai 1998éHTML 4.01 Décembre 1999

JAVA, javascript, Vbscript, ActiveX, CGI, PHP

XHTML 1.0 Janvier 20000 Ja e 000Intégration des règles du XML

XHTML 1.1 Janvier 2000CSS3 2001

Objectif Objectif Objectif Objectif Réaliser un ensemble de documents HTML de présentation de la formationRéaliser un site web local.(Gérer le site web avec EASYPHP)

Contenu du site web◦ Page d’accueil◦ Page d 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 HTMLUtilisations du HTML

Standard de format de texte

Liens hypertexteyp

fonctionnement du HTMLfonctionnement du HTML

Structure HTMPStructure HTMP<html>

<head><head><title>Nom du document</title>

</head>

<body>texte de la page

</body>

</html></html>

<html>

Fichier : HTML_exemple1.html

<head><title>exemple1</title>

</head>

<body>

Page web

</body>

</html>

Les balises de texteLes balises de texteLes balises de texteLes balises de texteEntete <h1> … <h6>◦ <h1>Texte format h1</h1> ◦ <h2>Texte format h2</h2> ◦ <h3>Texte format h3</h3>◦ <h6>Texte format h6</h6>

Paragraphe <p>◦ <p>premier paragraphe </p>◦ <p>second paragraphe</p>◦ <p>second paragraphe</p>

Saut de page <br> ou <br/>

Texte gras <b>

It li iItalique <i>

Souligné <u>


<html>

<head>

_ p

<title>exemple2</title></head>

<body>Les entetesLes 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> ceci est un second paragraphe</p>p p g p /p<br> (saut de ligne)<b>style gras</b><u>souligné</u><i>style italique</i> </body></body>

</html>

Les balises de texte Les balises de texte -- suitesuiteLes balises de texte Les balises de texte suitesuiteLigne horizontale <hr>

Baré <s>

Grand texte <big>Grand texte <big>

Petit texte <small>

Texte renforcé <strong>

Indice <sub>

Exposant <sup>

Commentaires  Commentaires  ◦ <!–- commentaire invisible à l’affichage -->

Les listes Les listes Les listes Les listes Liste sans ordre

l

Styles de liste◦ <ul type=« square »><ul>

<li>premier point</li><li>second point</li>

</ul>

Liste avec ordre

<ul type=« square »>

◦ <ol type=« A »>◦ <ol type=« a »>Liste avec ordre

<ol><li>premier point</li><li>second point</li>

</ol>

◦ <ol type=« I »>◦ <ol type=« i »>◦ <ol type=« 1 »>

/

Liste de définition<dl>

<dt>premier point</dt><dd>définition 1</dd>/<dt>second point</dt><dd>définition 2</dd>

</dl>

Fichier : HTML_exemple3.html<html><head>

<title>exemple</title></head>

_ p

<body>Liste sans ordre<ul>

<li>premier point</li><li>premier point</li><li>second point</li>

</ul> Liste avec ordre<ol>

<li>premier point</li><li>premier point</li><li>second point</li>

</ol> Liste de Definition<dl>

<dt>premier point</dt> <dd>definition 1</dd><dt>second point</dt><dd>definition 2</dd>

</dl> </dl> </body>

</html>

Les tables Les tables Les tables Les tables <table border="1"><tr>

Options de tableColSpan « 2 »<tr>

<th>Titre 1</th><th>Titre 2</th></tr><tr>

◦ ColSpan=« 2 »◦ Rowspan=« 3 »◦ Width=« 120 »◦ Cellspacing=« 5 »<tr>

<td>texte 1</td><td>texte 2</td></tr><tr>

◦ Cellspacing=« 5 »◦ Align=« center »

<tr><td>texte 3</td><td>texte 4</td></tr></table></table>



_ p

<body>Les tables<table border="1">

<tr><tr><th>Titre 1</th><th>Titre 2</th>

</tr><tr>

<td>texte 1</td><td>texte 1</td><td>texte 2</td>

</tr><tr>

<td>texte 3</td><td>texte 4</td>

</tr></table></body>

</html>

Les frames Les frames Les frames Les frames <FRAMESET ROWS="*,30" BORDER="2">

<FRAMESET COLS "160 *"> <FRAMESET COLS="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" que votre navigateur WWW n'est pas q g p

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></NOFRAME></FRAMESET>



_ p

<FRAMESET ROWS="*,30" BORDER="2"><FRAMESET COLS="160,*">

<FRAME SRC="frame_1.html" NAME="navig"><FRAME SRC="frame 2.html" NAME="page"><FRAME SRC frame_2.html NAME page >

</FRAMESET><FRAME SRC="frame_3.html" NORESIZE SCROLLING="no" MARGINHEIGHT="1" MARGINWIDTH="1"NAME="pied">

<NOFRAME><NOFRAME><B>Attention</B> : ce document contient des "frames" que votre navigateur WWW n'estpas capable d'interpréter. Utilisez Netscape Navigator (vers. 2 ou sup.) ouMicrosoft Internet Explorer (vers. 3 ou sup.) ; sinon,<A HREF="frame navig html"><B>suivez ce lien</B></A><A HREF= frame_navig.html ><B>suivez ce lien</B></A>.

</NOFRAME></FRAMESET>

<body>

</body>

</html>

Les DivisionsLes DivisionsLes DivisionsLes Divisions<DIV></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;

idth 350 te t align cente colo ed}width:350; text-align:center; color:red}</style>

Ou

<DIV style=« position:relative, left:5; top:10; width:350; text-align:right »>

Fichier : HTML_exemple6.html<html>

<head><title>exemple</title>

_ p

<style type="text/css">div.modele1 { Position:relative; left:120; top:200; bottom:290; width:350; text-align:center; color:green; border-style:ridge; border-width: 10pt}

</style></head>/

<body>

Les divisions<DIV class="modele1"><DIV class= 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 width: 10pt">color:red; border-style:groove; border-width: 10pt >Texte affiché dans la division numéro 2

</DIV>

</body>

</html>

Les balises de liensLes balises de liensLes balises de liensLes balises de liensLiens <a>

h f htt // b li l it d CPE /◦ <a href=http://www.cpee.be>lien vers le site du CPE</a>

Image <img>◦ <img src=“cpee.gif" width="144" height="50" />g p g g

Audio – Vidéo <embed>◦ <embed src=“macarena.wav" autostart=“true” loop=“true” />

<html>

<head>

_ p

<title>exemple0</title></head>

<body>

Liens vers les exemples <br> <a href=./HTML_exemple1.html>lien vers exemple1</a><br><a href=./HTML_exemple2.html>lien vers exemple2</a><br><a href=./HTML_exemple3.html>lien vers exemple3</a><br>

f<a href=./HTML_exemple4.html>lien vers exemple4</a><br><a href=./HTML_exemple5.html>lien vers exemple5</a><br><a href=./HTML_exemple6.html>lien vers exemple6</a><br>

</body>/ y

</html>

Les imagesLes imagesLes imagesLes imagesImage de fond

<body background="fichier.jpg">

Image dans le textei " j " li "l ft"<img src="carres.jpg" align="left">

Image dimentionnée<img src="boules jpg" width=100 height=40><img src= boules.jpg width=100 height=40>

Bordurei " fi hi j " b d 0<img src="nom_fichier.jpg" border=0>

Alternative< img src="bidon gif" alt = " Grâce à ALT vous le savez ! " >< img src= bidon.gif alt = Grâce à ALT vous le savez ! >

Les cartesLes cartes HTML exemple8 htmlHTML exemple8 htmlLes cartesLes cartes HTML_exemple8.htmlHTML_exemple8.html

<map> définit et nomme l'ensemble des régions. <area> permet de les réaliser Plusieurs formes sont disponibles : rectangle <area> permet de les réaliser. Plusieurs formes sont disponibles : 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" >

Si deux régions se superposent, la première dans la liste est active.

Inclure une page web Inclure une page web p gp g

<iframe src =« http://www.telecom.cpehn.be/page.php » width=« 80% » p p p g p pheight=« 300 »><p>Your browser does not support iframes.</p>

</iframe>

-- Pas supporté en HTML 4.0.1 et en XHTML --

Les FormesLes FormesLes 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 ASP ou un script CGI

<FORM METHOD="POST" ou "GET" ACTION="url" ENCTYPE="x-www-form-urlencoded">

web dynamique tel que PHP, ASP ou un script CGI.

<FORM METHOD=POST ACTION="mailto:[email protected]">

Fichier : HTML_exemple10.html<HTML> <HEAD>  <TITLE> ENQUETE </TITLE> </HEAD> <BODYBGCOLOR=#00FFFF>

_ p

<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> </OL> <P> Votre opinion <SELECT NAME=OPTION1> <OPTION> Très Satisfait <OPTION> Satisfait <OPTION> Indifferent <OPTION> C'est très nul !! <OPTION> 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 styleLes Modifications de styleLes Modifications de styleLes Modifications de style<html>

<head><head><title>Example Style Settings</title></head><style type="text/css"></style> </style>

OU

<link href="style.css" rel="stylesheet" type="text/css">

http://www.csszengarden.com/tr/francais/

Les couleursLes couleurs HTML exemple11 htmlHTML exemple11 htmlLes couleursLes couleurs HTML_exemple11.htmlHTML_exemple11.html

body {background: #FFFFFF; color: #000000}body {background: white; color: black}

3 octets pour 3 couleurs RGB [R V t Bl ]3 octets pour 3 couleurs – RGB [Rouge Vert Bleu]

#FF0000 = red Rouge#FF0000 red Rouge#00FF00 = green Vert #0000FF = blue Bleu#FFFF00 = yellow Jaune#FF00FF = magenta magenta#00FFFF cyan#00FFFF = cyan cyan#BEBEBE = grey Gris

Les METALes METALes METALes META<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><meta name="GENERATOR" content="Arachnophilia 3.9"><meta name="description" content="The Computer Technology Documentation <meta name= description content= 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><title>The CTDP HTML Guide Setting Document Style</title><link href="style.css" rel="stylesheet" type="text/css"></head><body>...</body>

Les METALes META NAMENAMELes METALes META NAMENAME<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 Copyright Informations de copyright Permet de référencer des informations de droits d auteur

Description Description de votre site Permet de donner une information à afficher lors du résultat d'une recherche

Expires Neverdate à laquelle la page expire

Indique au robot la date d'expiration de la pagedate à laquelle la page expire

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

Rating general Type de contenu (public visé)g g yp (p )

Rev Votre@email Mail du Webmestre

Revisit-after x days Délai de visite par le robot

Robots All Permet à tous les robots d'indexerRobots none

Permet à tous les robots d indexer

Subject Sujet de la pag Permet de préciser le sujet de la page

Les METALes META NAMENAMELes METALes META NAMENAME<META HTTP-EQUIV="Nom du tag" CONTENT="Attribut">

Nom du tag

Attribut Utilité

<META HTTP-EQUIV= Nom du tag CONTENT= Attribut >

tag

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 allfollowindexnofollow

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

noindexnone

Interdit au robot d'indexer la page Empêche le robot de poursuivre l'indexation du site

Window-target

_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 HTMLLe XML dans HTMLLe XML dans HTMLLe 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é• l’astuce : "îlots de données" [data islands].l astuce : îlots de données [data islands].

<xml id="fichierxml" src="simple.xml"></xml>

données : [datasrc="#id« ]données : [datasrc= #id« ]

Nom des champs :[datafld="balise_xml"].

Liens utileLiens utileLiens utileLiens utile

La spécification HTML 4 01 : http://www la-grange net/w3c/html4 01/La spécification HTML 4.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.htmlp y y g g

Validateur (X)HTML : http://validator.w3.org/

Validateur CSS : http://jigsaw.w3.org/css-validator/

CPEHN - Site WebSite Web - HTML · 2016-11-25 · Ameliorations graphique – feuille de style,...

Documents

Transcript of CPEHN - Site WebSite Web - HTML · 2016-11-25 · Ameliorations graphique – feuille de style,...