HTML Statique - Laboratoire Informatique d`Avignon

Transcription

Conception Internet
HTML Statique
Licence 1ère Année
Fabrice Lefèvre
2005-2006
Objectifs
9
9
9
9
Concepts de base d'Internet
Connaissance d'HMTL (et de ses "satellites")
Outils permettant la mise en oeuvre de site web
2 modules
•
•
S1: Conception Internet - HMTL Statique
S2 : Conception Internet - Sites dynamiques
9 Evaluation : rendu de TP, projet avec soutenance
orale
Conception Internet - L1S1
2
Plan
1. Introduction
•
réseau, Internet, Web, HTML
2. Principes HTML
•
langage à balises, structures, entêtes ...
3. Bases HTML
•
formatage de texte, listes, liens, tableaux, cadres,
multimédia (images, audio, vidéo)...
4. Feuilles de styles CSS
3
TP et évaluation(s)
1. Internet et le Web - Mise en route
2. Bases du HTML (formatage de texte)
3. Liens
4. Tableaux
5. Images/images réactives
6. Cadres
7. CSS 1
8. CSS 2
9. à 11. Projet (4 variantes d'une page perso)
12. Soutenance projet (présentation orale, 10mn)
4
Information sur le module
http://www.lia.univ-avignon.fr/chercheurs/lefevre/L1S1/
5
Questionnaire (1)
9
A. Compétences informatiques en général
I.
Une machine (UC, console, souris, clavier…)
1.
2.
3.
4.
II.
Je découvre tout
Je sais « utiliser »
Je sais aussi a peu près comment ça fonctionne
Je connais très bien (normal j’y passe toutes mes
nuits)
La programmation
1.
2.
3.
La quoi ?
Je connais un peu
Je connais quelques langages (lesquels)
6
Questionnaire (2)
9
B. Compétences Internet
I.
L’informatique en réseau (hors web !)
1.
2.
3.
4.
II.
Je découvre tout
Je sais « utiliser »
Je sais aussi a peu près comment ça fonctionne
Je connais très bien (normal j’y passe aussi toutes mes
nuits)
Le web
1.
2.
3.
Le quoi ?
J’ai déjà utilisé une fois ou deux
J’utilise tous les jours
7
Questionnaire (3)
9
B. Compétences Internet…
III. Conception Internet
1.
2.
3.
4.
Jamais touché
J’ai déjà fais un petit site perso
J’ai un site avec des pages dynamiques
Je gere un site de niveau profesionnel
IV. Dans tous les cas, citez ensuite tous les outils que vous
connaissez se rapportant à la conception Internet en
signalant ceux que vous savez utiliser
8
Conception de Site Internet
Partie 1 - Introduction
Fabrice Lefèvre
2005-2006
Réseau informatique
9 ensemble de moyens
matériels, notamment à l'aide
d'ordinateurs, mis en oeuvre
pour relier entre eux
différents utilisateurs
9 réseaux hétérogènes
9 plus ou moins grands
10
Internet
9 Super-réseau, composé de réseaux qui utilisent le
protocole TCP/IP en commun pour l'échange de
données.
9 L'utilisateur est devenu "client" d'un immense
réseau de serveurs, complètement hétéroclites
(supercalculateur, minis, MAC, PC...),
fonctionnant avec des systèmes différents, mais
tous communiquant par TCP/IP et tous identifié
par un numéro unique et universel
• le numéro IP
11
Adresse IP et DNS (1)
9 Chaque machine connectée de façon permanente
sur Internet est identifiée par une adresse
universelle appelée adresse IP codée sur 32 bits.
9 Composée de 4 octets notés habituellement en
décimal (de 0 à 255) séparés par des points.
• exemple : 194.57.216.208
9 Simplification de l'utilisation :
• Association nom/IP :
− nom_machine.sous-domaine.domaine
12
Adresse IP et DNS (2)
9 Une machine spéciale appelée annuaire ou serveur
de noms, le DNS (Domain Name Server) effectue
la traduction nom --> adresse IP, pour chaque
requête du client.
9 Exemples :
• adresse IP d'un serveur de la firme Novell
− 130.57.2.6 = www.novell.com
• adresse IP d'un serveur de Netscape
− 198.95.251.30 = www.netscape.com
13
Web
9 Le concept du World Wide Web a été développé à
partir de 1989 au CERN (Centre Européen de
Recherches Nucléaires).
9 Tim Berners-Lee propose une façon simple et
efficace de faciliter la communication sur Internet
en introduisant le concept déjà ancien d'hypertexte
dans un nouveau langage HTML associé à
protocole d'échange réseau HTTP.
9 Utilisation d'un logiciel convivial, grand public, le
"navigateur", qui permet de charger et d'interpréter
correctement ces pages WEB.
14
Hypertexte
9 Hypertexte : fichier de type texte dont certains
groupe de mots (ancres) sont reliés à d'autres
documents par des liens ou références
9 Hypermédia : fichier dont les liens peuvent
référencer des fichiers sons, images ...
9 Les ressources référencées peuvent être sur le
même ordinateur ou sur une machine distante.
Un fichier Hypertexte est un fichier
de texte dont certains mots ...
Historique
de
l'Hypertexte
15
HTML (1)
9 Langage de mise en page simple et universel de
documents, qui permet dès sa création pour le
service WEB sur le réseau Internet (en 1990 au
CERN) l'intégration de texte, d'images et de liens
hypertextes
9 Les dernières versions gèrent des documents
multimédias (intégrant aussi le son, la vidéo et les
animations 3D).
9 Prend sa source dans le langage SGML, défini par
IBM vers 1969.
16
HTML (2)
9 Motivation initiale est de pouvoir échanger des
documents sur Internet en utilisant le protocole
HTTP.
9 Il ne s'agit pas d'un langage de programmation :
HTML permet simplement de spécifier
l'apparence d'un document.
9 Un fichier HTML est un simple fichier texte que
l'on peut ouvrir et modifier avec un éditeur
quelconque. Outre le texte du document, le fichier
contient des balises qui vont préciser la structure
et l'apparence du document.
17
HTTP
9 Web fonctionne suivant le modèle du clientserveur.
• le client effectue des requêtes en direction du serveur,
• le serveur exécute ces requêtes et renvoie le résultat au
client.
9 Client et serveur désignent deux logiciels
différents communiquant au moyen d'un
protocole à travers un réseau (local ou étendu).
Protocole (principal) du WEB = HTTP
(HyperText Transport Protocol)
18
Adresses URL
9 Informations accessibles sur le web désignées par
une URL (Uniform Ressource Location)
9 Trois éléments :
service://machine/repertoire/fichier
• type de service auquel on s'adresse. Serveurs Web (http),
serveurs de fichiers (ftp), serveurs audio (rstp)...
• nom de la machine serveur
• localisation du fichier sur le serveur
9 Exemples :
• http://www.univ-avignon.fr
• http://www.radiofrance.fr/franceinter01/emissions/mx/
• ftp://www.lip6.fr/public
19
Partie 2 - Principes du HTML
Fabrice Lefèvre/Corinne Fredouille
2005-2006
Définition
9 HTML : HyperText Markup Language
Moyen de navigation
dans un ensemble
d’informations
Langage
à balises
Langage
de présentation
d’un document
9 HTML = implémentation simple du SGML
(Standard Generalized Markup Language):
Métalangage standardisé permettant de représenter
la structure logique d'un document à travers un
balisage logique généralisé
21
Elaboration
9 Elaboré par le W3C (World Wide Web Consortium)
9 Pas considéré comme un langage de programmation,
mais un moyen de formater des documents en vue
d’échanger des infos au travers du net (HTTP)
9 Fichier texte comprenant les informations à échanger
et un ensemble de balises pour leur présentation
9 Langage indépendant de la machine, du système
d’exploitation, et du navigateur (ou presque !)
9 Attention : présentation des informations dépendante
parfois du navigateur et des options de paramétrage
(à tester sur différents navigateurs !)
22
Versions
9 Les versions du langage HTML :
•
•
•
•
•
HTML 1.0 (le tout premier !)
HTML 2.0 (très rare)
HTML 3.0 (rare)
HTML 3.2 (souvent)
HTML 4.0 (dernière version => de plus en plus rencontrée)
- HTML 4.0 Strict DTD* : code HTML ne contenant aucun
élément ni attribut "déprécié", ni l'utilisation de cadres/frames
- HTML 4.0 Transitional DTD : utilisation des éléments et
attributs dépréciés tolérée
- HTML 4.0 Frameset DTD : documents avec cadres/frames
(* DTD : Document Type Declaration)
23
Codage
9 Jeu de caractères codé en ASCII standard 7 bits
⇒ Codage de 128 caractères (majuscule/minuscule, chiffres,
certains signes de ponctuation)
⇒ Interopérabilité possible entre systèmes basés sur des
codages différents
⇒ Pas de caractères accentués
⇒ Pas de caractères spéciaux
⇒ Utilisation de codes spécifiques dans les sources HTML
9 Pas de problème avec la plupart des navigateurs qui
acceptent le codage des caractères au delà des 7 bits,
mais …
24
Edition
9 Les éditeurs :
• WYSIWYG: c’est bien ! mais il faut tout de même passer à
un moment donné dans la cours des grands !
• Les mains à moitié dans le cambouis :
− 1rst page 2000
− NVU 1.07
−…
• Pour les brutes :
− N’importe quel éditeur de texte !
− Par exemple, Notepad (bloc-note de Windows)
25
Langage à balises (1)
9 <balise> => instruction HTML interprétée par le navigateur
9 <balise> = <nom_élément [attribut=« valeur », …]>
• nom_élément => ce que doit faire le navigateur
• attribut="valeur" => comment il doit le faire
• Attributs communs vs Attributs spécifiques
9 BlaBla <balise> BlaBla affecté par la balise </balise> suite
BlaBla
9 Différents types de balises:
• Balises contenant des méta-informations
• Balises de mise en forme du document
• Balises de liens
• Balises d'insertion (multimédia : images, son ou vidéo)
26
9 Imbrications d’éléments : permet de créer une
structure hiérarchique
• BlaBla <balise1> BlaBla <balise2> affecté </balise2>
par la balise </balise1> suite BlaBla
9 Balise de fermeture : même nom que la balise
initiale précédé du « / »
9 Balises autonome (standalone) : pas de fermeture
• BlaBla <br> BlaBla
• HTML 4.0 : <br /> (<br></br> tolerable)
27
9 Différents types d’attributs :
• Attributs avec affectation de valeur : certaines valeurs permises
− <h1 align="center"> (titre N°1 centré - ici ne sont acceptées que les
valeurs left, center, right et justify ).
• Attributs avec affectation de valeur libre : un type de données ou une
certaine convention sont attendus
− <style type="text/css"> (définir un passage pour feuilles de style - ici
c'est ce qu'on appelle un type Mime qui est attendu comme valeur, et
les types Mime ont toujours la construction type/sous-type) ;
− <table border="1"> (tableau avec une bordure d'une épaisseur de 1
pixel - ici, c'est une mention de valeur numérique qui est attendue)
• Attributs avec affectation de valeur libre sans convention particulière
− <p title="Assertion sous réserve"> - ici c'est tout un texte qui peut
être affecté.
• Attributs utilisés seuls (autonomes)
− <hr noshade> (ligne de séparation sans ombre). Attention en
XHTML, vous devez noter <hr noshade="noshade">.
28
Squelette
9 Trois parties principales :
<HTML>
<HEAD>
</HEAD>
<BODY>
Notre document
</BODY>
</HTML>
• <HTML></HTML> => Délimitation
document HTML
• <HEAD></HEAD> => Entête=métainfos propres à la page, utile par ex.
pour l’indexation (ex: titre)
• <BODY></BODY> => Corps = infos
affichées sur la page
9 Non sensible à la casse pour le nom
des balises
9 Structure recommandée et à respecter
(même si pas obligatoire !)
29
En-tête (1)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
@
<HTML LANGUE="FR">
<HEAD>
<TITLE>Titre Pertinent: exemple d’en-tête</TITLE>
<META NAME ="Description" CONTENT ="Contenu de la page">
<META NAME ="Keywords" CONTENT ="Liste des mots clés">
<META HTTP-EQUIV="Content-Type" content="text/html; charset=iso8859-1 ">
< META HTTP-EQUIV ="Content-Language" content="fr">
<META HTTP-EQUIV="Refresh" CONTENT= " 5; URL=redirec.htm">

</HEAD>
<BODY>
Attention: Cette page va etre redirigee dans 5 secondes !!!!!
</BODY>
</HTML>
30
En-tête (2)
9 Contient les informations indispensables pour une
bonne indexation d’une page par un moteur
9 <META NAME…> => permet d’associer une
valeur à un mot clé – Libres mais propositions de
normalisation/système (Dublin Core)
9 <META HTTP-EQUIV…> => influe sur la
communication HTTP entre le serveur et le client
• <META HTTP-EQUIV="content-type"
content="text/html; charset=ISO-8859-1">
9 Insertion d’appels à d’autres langages ou
fonctionnalités: JavaScript, VBScript, feuilles de
styles (CSS), …
31
En-tête (3)
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>Texte du titre</TITLE>
<BASE HREF="http://www.univ-avignon.fr" TARGET="_top">

</HEAD>
<BODY>
...
</BODY>
</HTML>
32
Body
<HTML>
@
<HEAD>
<TITLE>Exemple de body</TITLE>
</HEAD>
<BODY bgcolor="pink" text="blue">
Attention: les
espaces
tabulations
et
retour chariot
sont ne sont pas
interpretes par le navigateur.
</BODY>
</HTML>
9 Attributs possibles pour la
balise <BODY> (spécif:
HTML3.2):
•
•
•
•
•
Couleur ou image de fond
Couleur du texte
Couleur des liens
…
Dépréciés (ie en cours
d’abandon) : intégré au CSS
•
<body style="backgroundcolor:#CCFFFF">
33
Partie 3 - Bases du HTML
Fabrice Lefèvre/Corinne Fredouille
2005-2006
Formatage de texte (1)
9 Six niveaux de titres <Hx> :
<Hx align=" center ">Mon Titre </Hx>
• align déprécie, préférez la version CSS:
<Hx style="text-align:center" >Mon Titre </Hx>
9 Marque de paragraphes <P> </P>
9 Delimitation de blocs <DIV> </DIV>
@
• et blocs "incorporés" <SPAN> </SPAN>
9 Saut de ligne <BR>
9 Interdiction des retours automatiques <NOBR>
9 Trait horizontal <HR>
9 Texte preformatté <PRE>
@
35
9 Formatage logique des paragraphes (contentbased)
• <EM>, <STRONG>, <CODE>,<DFN>...
9 Formatage (physique) de caractères
•
•
•
•
<B>mise en gras</B>
<I>mise en italique</I>
<U>soulignage</U>
…
9 Spécification de la fonte <font> </font> associée
aux attributs : size, color, face, …
9 Caractères accentués et spéciaux: utilisation de
&…; (named entities)
36
Quelques exemples de caractères accentués ou spéciaux
&[Xx]acute;
Accent aigu
&[Xx]circ;
Accent circonflexe
&[Xx]grave;
Accent grave
&[Xx]auml;
Accent tréma
±
±
20°
20°
½
½
©
©
€
€
37
Quelques exemples de caractères HTML
<
<
>
>
&
&
"
"
méta-caractères : ce sont les caractères utilisés
pour écrire du HTML
38
Définition des couleurs
9 Définition hexadécimale #xxxxxx (6 chiffres)
• Niveau de couleur Rouge/Vert/Bleu par groupe de 2 chiffres
• 00 : niveau bas - FF : niveau haut - 256 nuances
• #000000 : noir - #FFFFFF : blanc
• <BODY BGCOLOR="#808080">
9 Palette de couleurs nommées
•
•
•
•
Introduite par Netscape, quasiment standard
<BODY BGCOLOR="orange">
équivalent à
<BODY BGCOLOR="#FFA500">
@
39
Liens (1)
9 Fondement de l’Hypertexte
9 Fournissent la possibilité de naviguer de pages en
pages, d’infos en infos
9 Différents liens :
• Liens internes : chemin absolu ou relatif des fichiers sur
le serveur
• Liens externes : lien vers un autre site http (http://…),
vers un serveur ftp, news ou pour un email (mailto…)
9 Doivent impérativement être :
• toujours valides pour ne pas « polluer »
• explicites pour ne pas perdre l’internaute
40
Liens (2)
9 <A>voici un lien vers …</A>
@ @
=> voici un lien vers ...
• Attribut HREF="Adresse/chemin du lien"
• Attribut TARGET="Localisation de l’ouverture du
lien" :
− "_blank" : nelle fenêtre,
− "_self" : la fenêtre courante,
− " _parent", "_top" : cadre parent,
− "nom_frame" : autre cadre,
−…
41
Liens (3)
9 Ancre nommée : possibilité de naviguer au sein
d’une même page ou vers une partie spécifique
d’une autre page
9 <A NAME="Top" >Top</A> => déclaration
d’une ancre nommée
9 <A HREF= "#Top">Lien vers Top</A> => lien
local vers l’ancre Top déclarée
9 <A HREF= "NomdePage#Top">Lien vers
Top</A> => lien vers l’ancre Top déclarée sur la
page NomdePage
42

HTML Statique - Laboratoire Informatique d`Avignon

Transcription

Documents pareils

Conception Internet

Cours d`Informatique

DUT SRC - Webchronique

XML (eXtensivble Markup Language)

Soirée Cabaret à l`Ange Bleu

AVANTAGES BALISES 406 MHz

VENDS RAQUETTES HEAD

BALISES DE DETRESSE KANNAD 406 AF

Télécharger la version PDF

Evaluation du site yoga-in-greece.ru

Evaluation du site oraciones.click

Etude biomécanique à l`hôpital Rothschild à Paris