Introduction à HTML

Transcription

Introduction à HTML

Introduction à HTML
Eugen Dedu
UFC, IUT GTR, Montbéliard, 1ère année
septembre 2005
[email protected]
HTML
CSS
PHP
Publication
Introduction
- acronymes ●
WWW (World Wide Web, Web plus court) : réseaux
d'ordinateurs s'échangant des pages HTML
●
HTML (HyperText Markup Language) : “langage” dans
lequel les pages sont écrites
●
HTTP (HyperText Transfer Protocol) : le procotole (les
règles) définissant l'échange entre :
–
le demandeur d'une page Web d'une certaine adresse (client)
–
et le fournisseur de la page (serveur)
2
HTML
CSS
PHP
Publication
Introduction
- protocole HTTP ●
Le client (navigateur) demande la page avec une certaine
adresse http://machine/répertoire/fichier.html
●
La machine (serveur) machine envoie :
●
–
le fichier fichier s'il existe
–
une erreur sinon
–
si fichier est un répertoire, envoi de index.html
●
exemple : http://www.yahoo.com/ => comme si /index.html
●
demander le répertoire, pas la page !
Choisir de préférence des minuscules pour les noms des
fichiers HTML, avec l'extension .html
3
HTML
CSS
PHP
Publication
Introduction
- hystorique ●
Auteur : Tim-Berners Lee, 1991
–
chercheur à CERN, Genève
–
but : échanger des informations avec d'autres chercheurs
●
Clients Web (navigateurs) : mosaic, netscape, internet
explorer, mozilla, konqueror, ...
●
Serveurs Web : ncsa, apache, iis
4
HTML
CSS
PHP
Publication
Netographie
●
http://www.w3.org/ - consortium WWW
–
http://www.w3.org/TR/html4/ - référence de HTML 4.01
●
http://www.allhtml.com/ - développement et tutoriaux
HTML, DHTML, ASP, ... Très complet et pédagogique
●
http://www.php.net/docs.php - PHP
●
http://www.digilife.be/quickreferences/quickrefs.htm quickref pour CSS1 et PHP4
●
Toute information sur HTML, en particulier HTML 4
5
HTML
CSS
PHP
Publication
Plan
●
Structure d'une page HTML
–
balises
●
CSS
●
Pages HTML dynamiques
●
–
formulaires
–
PHP
Publier son site sur Internet, moteurs de recherche
6
HTML
CSS
PHP
Publication
7
HTML
CSS
PHP
Publication
8
HTML
CSS
PHP
Publication
- notion de balise (tag) <A HREF="http://...">un hyperlien</A>
Texte
Attribut de balise
Balise
(case insensitive) (case insensitive)
Ne pas oublier de fermer toute balise !
9
HTML
CSS
PHP
Publication
- division ●
Version de HTML
●
En-tête : HEAD
●
–
méta-informations
–
non affiché
Contenu : BODY
–
–
●
contenu de la page
affiché
Commentaires :
–
Squelette d'une page HTML
(à copier-coller)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<title>Page d'exemple</title>
</HEAD>
<BODY>
Ma première page HTML.
</BODY>
</HTML>
entre 
10
HTML
CSS
PHP
Publication
En-tête d'une page HTML
- balises “obligatoires” ●
Codage du texte (Unicode UTF-8, ISO latin 1)
–
●
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
Titre
–
<title>Ma page personnelle</title>
11
HTML
CSS
PHP
Publication
En-tête d'une page HTML
- balises optionnelles ●
Auteur
–
●
Description
–
●
<meta name="Description" content="Exercices d'info">
Mots-clé
–
●
<meta name="Author" content="David Dechaux">
<meta name="Keywords" content="HTML langage C">
Rafraîchissement automatique
–
<meta http-equiv="refresh" content="5;URL=http://...">
–
mieux vaut utiliser les possibilités du serveur Web (ex. :
.htaccess)
12
HTML
CSS
PHP
Publication
Balises, exemples
- mise en forme ●
Gras <B>, italique <I>
●
Paragraphe <P>, <BR> (les deux sans fermer la balise),
alignement
●
Barre horizontale <HR> (horizontal rule)
●
Polices :
–
couleurs, taille du texte
–
type de texte : pré-formaté <PRE>...</PRE>
●
Infobulles : attribut TITLE
●
La taille de la page Web dépend de la taille de la fenêtre
du navigateur !
13
HTML
CSS
PHP
Publication
Balises, exemples
- images, liens ●
Images
–
●
Image de fond
–
●
<A HREF="photo.jpg">Texte ou image</A>
Ancres (anchors)
–
●
<BODY BACKGROUND="bg.png">
Liens (links), pour du texte ou une images
–
●
<IMG SRC="photo.jpg" ALT="Ma photo">
<H2><A NAME=chapitre2>Le loup</A></H2>
Chemin relatif (au répertoire courant) vs. chemin absolu
(avec http:// ou file://)
14
HTML
CSS
PHP
Publication
Balises, exemples
- titres ●
Structure vs. visualisation
●
Structure : headings, 6 niveaux
●
–
<H1>Titre de premier niveau</H1>
–
<H5>Titre de cinquième niveau</H5>
Visualisation :
–
<B>Titre de cinquième niveau</B>
15
HTML
CSS
PHP
Publication
Balises, exemples
- listes ●
●
Listes non numérotées (unordered lists) <UL>
–
<UL>
–
<LI>ligne1
–
<LI>ligne2
–
</UL>
Listes numérotées (ordered lists) <OL>
–
(pareil)
16
HTML
CSS
PHP
Publication
Balises, exemples
- tableaux ●
<TABLE>, </TABLE>
●
Each table starts with an optional CAPTION followed by
one or more TR elements defining table rows
●
Each row has one or more cells defined by TH or TD
elements
●
Attributes for TABLE elements include WIDTH,
BORDER, CELLSPACING and CELLPADDING
17
HTML
CSS
PHP
Publication
Balises, exemples
- scripts ●
Java, dans le body :
–
●
<APPLET CODE="bubbles.class" WIDTH=500
HEIGHT=600>Java applet which draws animated
bubbles.</APPLET>
javascript, flash, ...
18
HTML
CSS
PHP
Publication
Cadres (frames)
- but ●
Diviser la page en plusieurs sous-pages
–
on regarde une page ou plusieurs ?? => ne s'intègrent pas bien
dans le langage HTML
●
●
raison d'exister : fourni par Netscape au début du Web
Exemples :
–
une sous-page avec le menu, toujours visible
–
une sous-page de contenu, suivant le menu
–
cliquer sur un lien sur une sous-page permet de remplacer une
sous-page (ou toutes les pages)
19
HTML
CSS
PHP
Publication
Cadres (frames)
- création <FRAMESET COLS="50%,50%">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="1.html">
</FRAMESET>
<FRAMESET ROWS="33%,33%,33%">
</FRAMESET>
</FRAMESET>
http://wp.netscape.com/assist/net_sites/frame_syntax.html
20
HTML
CSS
PHP
Publication
CSS
- fonctionnement ●
CSS = Cascade Style Sheet (“feuilles de style”)
–
●
version actuelle : CSS2
But : séparer l'information (contenu) de l'affichage
(couleurs, police, ...)
–
permet une cohérence de présentation dans tout le site
–
plus facile à maintenir
●
Fichier .css : les règles de présentation d'une classe
●
Fichiers HTML : utilisation des règles du fichier .css
●
Si modification du .css, toutes les pages HTML voient
instantanément la modification !
21
HTML
CSS
PHP
Publication
CSS
- exemple ●
Fichier a.css :
body {background-image: url(/images/logo.jpg); color: black}
a:active {color: blue}
p.commentaire {background:darkgreen}
●
Dans le HEAD de chaque fichier HTML :
<link rel="stylesheet" type="text/css" href="a.css">
●
Dans le BODY des fichiers HTML :
–
●
<P class=commentaire>Un paragraphe avec comment</P>
Attribut class : la classe à laquelle l'élément appartient
–
peut être utilisé dans beaucoup d'éléments
22
HTML
CSS
PHP
Publication
CSS
- fichier de styles ●
●
De nombreuses propriétés existent :
–
couleur
–
marges
–
police des caractères
–
...
Ex. : marges des paragraphes :
–
●
h2 { margin-top: 8em; margin-bottom: 3em }
Ex. : indentation en début de paragraphe :
–
p { text-indent: 2em; margin-top: 0; margin-bottom: 0 }
23
HTML
CSS
PHP
Publication
- formulaires ●
<FORM>...</FORM>, formulaire :
–
●
<INPUT>, champ d'entrée :
–
●
NAME, MULTIPLE, SIZE
<OPTION>, option dans une liste de sélection :
–
●
NAME, TYPE, VALUE, CHECKED, SIZE, MAXLENGTH
<SELECT>...</SELECT>, liste de sélection :
–
●
ACTION, METHOD, ENCTYPE
SELECTED
<TEXTAREA>...</TEXTAREA>, zone d'édition :
–
NAME, ROWS, COLS
24
HTML
CSS
PHP
Publication
- formulaires ●
●
<FORM METHOD=GET ACTION="result.php">
–
<INPUT NAME="somme" TYPE=text>Nom<BR>
–
<INPUT NAME="accepte" TYPE=checkbox>Accepté<BR>
–
<INPUT TYPE="submit" VALUE="Calculer">
–
<INPUT TYPE="reset" VALUE="Reset">
</FORM>
http://www.uwa.edu.au/web/office/authors/howto/writing_html_forms
25
HTML
CSS
PHP
Publication
- formulaires ●
●
La valeur des champs est rajouté à l'URL
–
result.php?nom=Beethoven&error=off
–
rajoutés après ?
–
les champs sont séparés par &
–
(la méthode POST fonctionne différemment)
result.php affiche la page en fonction des paramètres
avec lesquels elle est appelée
–
(voir plus tard pour la lecture des paramètres)
26
HTML
CSS
PHP
Publication
- buts ●
Comment afficher l'heure courante sur une page Web ?
●
Dynamicité : contenu HTML dynamique (texte, images,
scripts), en fonction de :
●
–
date courante
–
navigateur
–
résolution écran
–
...
Réutilisation de code HTML, de fichiers textes
27
HTML
CSS
PHP
Publication
- utilitaires ●
PHP (Php's Hypertext Preprocessor), licence GPL
●
ASP (Active Server Pages), commercial (Microsoft)
●
Exécutés par le serveur
●
Exemple pour php :
–
le navigateur demande une page php
–
le serveur reconnaît que ce n'est pas du html, mais du php
●
–
il exécute le code php
●
–
nom du fichier : .php
balise <?php avec ?>
il renvoie au navigateur le résultat
28
HTML
CSS
PHP
Publication
- exemple PHP En PHP
<table border="1">
<?php for ($z=0 ; $z <= 4 ; $z ++) {?>
<tr><td>
<?php echo "Iteration " . $z ; ?>
</td></tr>
<? } ?>
</table>
En HTML
<table border="1">
<tr><td>
Iteration 0
</td></tr>
<tr><td>
Iteration 1
</td></tr>
<tr><td>
Iteration 2
</td></tr>
<tr><td>
Iteration 3
</td></tr>
</table>
29
HTML
CSS
PHP
Publication
- généralités PHP ●
●
Ressemble au langage C :
–
mettre ; après chaque instruction
–
variables : $a=10; $chaine=”hello world”;
●
ne doivent pas être définies
●
commencent toujours par $
–
if (expr) { ... } else { ... }
–
while (expr) { ... }
–
for (... ; ... ; ...) {...}
–
printf (ou echo)
Mais beaucoup plus simple et adapté au Web
30
HTML
CSS
PHP
Publication
- lecture des paramètres ●
Lecture d'une variable : $titi
●
Lecture d'un paramétre de page : $_GET['titi'];
●
Exemple :
–
...
31
HTML
CSS
PHP
Publication
- erreurs courantes ●
Ne pas passer par le serveur pour les pages PHP
●
FORM pas utilisé; c'est lui qui spécifie la destination
32
HTML
CSS
PHP
Publication
Publier son site sur Internet
●
Lecture des fichiers locaux toujours possible, mais les
autres internautes... ?
●
Si machine connectée à Internet :
–
●
démarrer un serveur Web et mettre les fichiers dans le
répertoire approprié
Sinon :
–
–
fournisseurs d'accès à Internet :
●
wanadoo
●
AOL
transférer les fichiers sur la machine distante
33
HTML
CSS
PHP
Publication
Moteurs de recherche
- introduction ●
●
Fonctionnement :
–
récupèrent (to crawl) des pages Web sur Internet
–
les stockent dans une base de données (gigantesque)
–
permettent de chercher des mots dans cette base
Exemples :
–
http://www.google.com
–
http://www.yahoo.com
34
HTML
CSS
PHP
Publication
Moteurs de recherche
- utilisation ●
●
Classement des pages (page ranking) :
–
pertinence des mots cherchés dans la page (lieu, répétition)
–
nombre d'autres pages qui pointent vers elle
–
(http://www.google.com/webmasters/4.html)
Enregitrer un site :
–
chercher sur le site le lien pour ajouter un site
●
(http://www.google.com/webmasters/1.html)
–
inscrire l'adresse de la page principale (accueil)
–
attendre le crawler de balayer son site (quelques jours)
35

Introduction à HTML

Transcription

Documents pareils

Web design et intégration HTML/CSS

Formation CSS initiation Plan de cours

bookmarks - Nathalie Vanassche

CV – Développeur PHP / WebDesign CSS Aurélie CABON

HTML, Initiation

BEP CSS

Macromedia Dreamweaver (niveau avancé)

Offre stage

PROJET Le site de la 306 cabriolet