cours NVU

Les sites web avec NVU
Table Des Matières
Les sites web avec NVU
Les bases du web
Les protocoles réseaux
Le Web
Uniform Resource Locator
Recherche d'informations
Création et gestion d’un site Web
Utiliser le Web
Cycle de Vie d'un logiciel
Structure d'un site web
Comment créer un site web
Organiser l'arborescence du site
TP 1 : structure du site
Structure d'une page web
!DOCTYPE
en-tête :
corps :
Organiser la description des pages
TP 2 : Installation et configuration de Nvu
Téléchargement
Configuration
Edition / Préférences
Paramètres des sites de publication
Sites de publication
Utilisation
Edition d'une page web
TP 3 : Premières pages web
Edition d'un fichier html
Création d'un fichier
Code source
TP 4 : les planètes
Le langage HTML
Balises
Attributs
Mise en forme d'une page
Intégrée dans le corps
TP5 : mise en forme classique
Feuilles de style CSS
Feuille de style incorporée
Général
Texte
Fond
Bordure
Boite
Son
TP6 Mise en forme CSS

Compléments
Feuille de style exportée
Feuille de style liée
TP Créer une feuille de style pour l'impression
TP créer une barre de navigation entre les 3 pages ou plus
Modèles
TP 7
Calques
TP 8
Orthographe
TP 9
Javascript
TP 10
Formulaires
Définir un formulaire
Les champs
Image
Zone de texte
Liste de sélection
Bouton
Etiquettes
Index de recherche
TP 11
Références
Déroulement sur 3 jours :
Introduction
Installation et configuration
Utilisation
Mise en forme d'une page
avec et sans feuilles de style CSS
Modèles
Formulaires
Calques
Les bases du web
Le web est basé sur l'échange de fichiers html à travers le réseau. Les fichiers html (hypertexte markup language
sont des fichiers textes écrits en html qui peuvent être envoyés depuis une machine serveur vers un ordinateu
client et interprétés localement par des navigateurs. Pour cela, il faut mettre en oeuvre différents services d
l'Internet : le transfert de fichier, l'interprétation du code html.
Les protocoles réseaux ftp http mailto
Fonctionnement du web client-serveur
Page web, site web et w3c
Langage html
Les protocoles réseaux

Les services de l'Internet sont basés sur des protocoles. Un protocole est un ensemble de règles qui régissent le
échanges entre des ordinateurs dans le monde des télécommunications et des réseaux. Internet est un résea
mondial d'interconnexion d'ordinateurs basé sur la pile de protocoles TCP/IP.
TCP (Transmission Control Protocol) : régit l'échange physique des paquets d'octets
HTTP (HyperText Transmission Protocol) : le protocole du World Wide Web :
FTP (File Transfert Protocole) : le protocole de transfert de fichiers
SMTP (Simple Mail Transfert Protocol) : courrier électronique
POP (Post-Office Protocol) : courrier électronique
IMAP (Internet Message Access Protocol ) : courrier électronique
NNTP (Network News Transport Protocol) : le protocole des News ou groupes de discussion.
TELNET
Pour l'usage du web des pseudos-protocoles ont été ajoutés :
JAVASCRIPT
MAILTO
FILE
IP (Internet Protocole)
Pour permettre les communications entre les machines, TCP/IP utilise un numéro d'identification des machines
c'est le "numéro IP" de la forme x.x.x.x où x est compris entre 0 et 255. Ce numéro doit être unique sur le réseau
il est attribué de façon statique (cas des réseaux locaux) ou dynamique (cas des fournisseurs d'accès DHC
Dynamic Host Configuration Protocol). La correspondance entre les numéros et les noms des machines es
obtenue grâce au "service de noms" DNS.
Pour pouvoir accéder à l'Internet, un ordinateur a besoin :
Le Web
d'une connexion physique (réseau local ou modem)
d'un numéro IP
du numéro IP d'un serveur de noms que la machine doit pouvoir atteindre physiquement
du numéro IP d'un routeur que la machine doit aussi pouvoir atteindre physiquement. Le routeur ou gateway
est une machine qui établit les chemins (les routes) entre les numéros des machines (en fait entre les
numéros des réseaux)
Le Web (la toile, www) s'est développé très rapidement car son mode de fonctionnement est très souple et don
très robuste. C’est un des services de l’Internet le plus connu.
Le Web permet d'échanger des informations au moyen de http, protocole qui fonctionne en mode client/serveur.
Le mode client/serveur est un mode de fonctionnement dissymétrique dans lequel deux logiciels différents son
nécessaires pour permettre les communications : un logiciel serveur (appelé daemon) nécessaire sur une seul
machine et un logiciel client, nécessaire sur toutes les machines.
Client Réseau Serveur

protocole nom de serveur répertoire fichier
http:// www.obspm.fr /aim/InfoMM/ InfoMM.html
ftp:// gandalf.obspm.fr
telnet:// mesioq.obspm.fr
Navigateur Daemon
httpd
La souplesse de http ne provient pas spécifiquement de ce mécanisme qui est assez répandu dans le mond
TCP/IP (ftp fonctionne aussi en mode client/serveur). Elle provient de la mise en œuvre du mécanisme : la machin
serveur transfère uniquement le code "source" qui est interprété sur chaque machine cliente.
Avantage : le code source est léger : il contient les indications pour faire la mise en page mais pas la mise e
page elle-même.
Inconvénient : la machine cliente doit être suffisamment puissante pour interpréter le code source. Le résulta
est (légèrement) différent selon l'interpréteur présent sur la machine cliente.
Le mécanisme client/serveur est déclenché par l'appel à une ressource "hypertexte" sur la machine cliente ; ce
appel est fait au moyen du localisateur uniforme de ressources : URL (Uniform Resource Locator).
Uniform Resource Locator
Structure d'une URL :
file:// /disk/repertoire/ texte.html
http://www.obspm.fr/aim/InfoMM/InfoMM.html
ftp://gandalf.obspm.fr
telnet://mesioq.obspm.fr
file:///disk/repertoire/texte.html
Le nom du serveur est de la forme : machine.domain.tld. (tld : top level domain)
aux Etats-Unis, par type d'activités com, edu, gov, mil, net, org
ailleurs, par pays ca, fr, uk, be, de, dk ...
en France asso.fr, gouv.fr, tm.fr

Le nom du répertoire est de la forme
/nom_du_disque/dossier1/dossier2 (syntaxe type Unix)
Le nom de fichier est en général
nom.html ou nom.htm
Le chemin qui suit le protocole est le chemin absolu menant au fichier en question : il part de la racine et décr
tout le chemin à suivre pour atteindre le fichier cible.
Un chemin relatif sera un chemin commencant "à l'endroit où on se trouve déjà" par exemple la page web affiché
et allant jusqu'au fichier cible ex : "../images/web.jpg"
Note : attention aux caractères accentués, aux blancs... dans les noms de fichiers et de répertoire ! ! ! Par exemp
:
/Mon Disque Dur/Pages_Web/Présentation.html
devient
/Mon%20Disque%20Dur/Pages_Web/Pr%8Esentation.html
Recherche d'informations
google msn yahoo et voila
Création et gestion d’un site Web
Utiliser le Web
Créer un site web nécessite la prise en compte des éléments suivants :
Système hypertexte (texte non linéaire)
Multimédia (texte, images, son, animations, vidéo) Navigateur
Multi-plateforme (Amiga, Mac, PC, Unix) : images, sons, java, tests
Distribué sur des milliers de sites
Interactif (clic, affichage d'une animation, formulaires)
Multi-services (URL : ftp,mail,news,http)
et l'utilisation de moyen techniques :
Localisation de l'information : URL
Protocole de communication : HTTP
Langage : HTML
Client serveur
Vocabulaire : Page Web, Site Web, Page d'accueil, homepage, (front page), Webmaster, Internet, Intranet e
Extranet : pas de différence de structure, les différences se situent dans la restriction d'accès.
SGML : Standard Generalized Markup Language : norme ISO fondée sur la distinction fondamentale entr
contenu et présentation physique ou structure.
DTD : Document Type Definition (décrit la structure et le type des balises utilisés dans le document)
XML : eXtensible Markup Language
HTML : Hyper Texte Markup Language ou Langage hyper texte à balise

DHTML : Dynamic HTML. Permet d’introduire du dynamisme dans les pages, de se démarquer des pages statique
illustrées des débuts du web. L’utilisation de JAVA et JAVASCRIPT y est pour beaucoup !
Exemples parlants :
http://www.ccim.be/ccim328/trucs/
http://www.creaweb.fr/DHTML/kit/
XHTML : eXtensible HTML
Cycle de Vie d'un logiciel
Un site Web se conçoit comme un logiciel (software). Du début de sa conception à sa réalisation finale, il évolu
(maléable).
Modèle web :
1. Etude préliminaire
2. Conception du site
3. Réalisation du site
4. Tests de chaque page
5. Tests du site
6. Mise en ligne
7. Promotion du site
8. Gestion du site
Structure d'un site web
Comment créer un site web
Ecrire la structure générale du site sur papier, arborescence des dossiers
Pour chaque page structure détaillée, et sa place dans l'arborescence.
Organiser l'arborescence du site
Un site web est constitué d'une arborescence de dossiers et fichiers d'autant plus complexe et lourde que le sit
est gros. Si on peut se contenter de tout mettre dans un même dossier quand on réalise une ou deux pages htm

cela devient difficile à maintenir quand le site possède une centaine de pages, autant d'images et qu'il s'agit de
maintenir en allant corriger une faute par ci, remplacer une image par là, compléter une page pour la mettre
jour,... Plusieurs choix sont possibles en fonction de l'organisation du site.
On peut, par exemple, décider d'avoir dans son dossier "racine" : le fichier index.html, un dossier (et sous-dossiers
pour toutes les autres pages web, un dossier pour les images, un pour les styles, un pour les modèles et un pou
les scripts.
Comme nous allons gérer plusieurs sites en parallèle nous choisirons l'arborescence suivante :
christian index.html
images
styles
templates
scripts
systemesolaire fichier1.html
fichier2.html
fichier3.html
systeme.html
planetes index.html
Portrait_de_famille.jpg
mercure.html
venus.html
...
pluton.html
monsiteweb index.html
images mercure.png
images
venus.gif
...
pluton.jpg
La navigation dans le site : quels sont les éléments clés du site ?
page d'accueil,
définition de parcours types (scénarios de tests) permettant de parcourir tous les liens entre éléments
TP 1 : structure du site
Créer un dossier à votre nom dans mes documents
Y créer les éléments suivants :
dossier images
dossier styles
dossier scripts
dossier systemesolaire
dossier planetes
dossier monsiteweb

!DOCTYPE
en-tête :
sitedistant
Dans le dossier systemesolaire copier systeme.html
Dupliquer ce fichier 3 fois et nommer les copies :
fichier1.html
fichier2.html
fichier3.html
Structure d'une page web
Copier l'image Portrait_de_famille.jpg dans systemesolaire
Du point de vue code html, le squelette d'une page web est toujours le même :
une déclaration de type de document,
puis une balise de début de document ,
une balise en-tête ... /HEAD>
une balise corps de la page
et une fin de document

corps :
Ce qui sera affiché par le navigateur
Il contient du texte brut, formaté ou mis en page, des images ou autres media, des tableaux, des listes, des liens.
Ce texte et ces images seront affichées par le navigateur client en appliquant les balises aux textes qu'elle
encadrent. Cette interprétation dépend du navigateur et de la machine cliente.
Organiser la description des pages
Comme il y aura plusieurs pages, il est important de les structurer de façon à ce que l'internaute ne soit pas perd
et se retrouve dans l'interface que vous lui proposez. Par exemple s'il y a une barre de navigation elle doit être +
au même endroit et avoir le même aspect d'une page à l'autre. Les titres de niveau 1, 2, 3 doivent avoir la mêm
taille, une même couleur (ou pas !). Le fond des pages participe aussi au look et à l'identité du site.
Un aparté sur les couleurs : c'est très important pour le côté look, emballage, agréable du site sans préjuger d
contenu. Il faut équilibrer ses inspirations artistiques et la lisibilité du document. On pourra faire ce que l'on voudra
le meilleur confort de lecture est atteint pour du texte écrit en noir sur fond blanc, et la lecture sur papier bien plu
rapide qu'à l'écran. On en déduira des règles de présentation :
Pas trop de texte à l'écran
Répartition de l'information sur l'écran (50% d'occupation maximum)
3, 5 ou 7 blocs
L'écran de base est en 640x480 ou 800x600, mais il en existe aussi de 1280x854.
Faire un gabarit de ces pages permet de bien répartir toute l'information sur la page.
Pour gérer le site vous devez pouvoir facilement retrouver chaque page dans le site et avoir répertorié tous le
éléments de pages susceptibles d'être modifiés (les images, du texte, des liens, ...)
Chaque page doit être caractérisée pour la gestion du site
Nom de fichier : venus.html
Titre de la page : La planète Vénus
Titre H1 : VENUS
Images, Media : venus.jpg
Liens sortants : index.html
Blocs :
Paragraphes :
Tableaux :
Listes :
Gabarit :
Place de la navigation :
Nvu est un éditeur de texte wysiwyg orienté pour la publication de pages html. Nvu est gratuit et est l'héritier d
célèbre Composer de Netscape. Il est issu de la suite Mozilla (Firefox, Thunderbird, Nvu). Il est basé sur le moteu
Gekko, très puissant.
Nous allons dans ce cours nous attacher à dissocier la structure de la page et sa présentation, c'est-à-dire l
format texte brut et les styles. Nvu est un éditeur et parfaitement adapté à la création de pages web san

maîtriser le code html, mais nous verrons que certaines notions sont indispensables pour rester maître de l
situation.
TP 2 : Installation et configuration de Nvu
Téléchargement
Configuration
Lancer Nvu
Edition / Préférences
Télécharger la version appropriée sur http://nvu.com
ici version 0.81 en français
Windows : installer Nvu dans Program Files
Linux : dans Home
Mac : dans Applications
Nous allons configurer les préférences de Nvu une fois pour toutes et les paramètres des sites de publication
Outils / Préférences
Règler comme indiqué les 4 panneaux des préférences suivants :
Général
Polices
Paramètres de pages
Avancées

Paramètres des sites de publication

Sites de publication
Nom du site : référence locale
adresse http du site web
adresse ftp du serveur d'édition
Nous allons créer des paramètres de sites de publication vers un premier dossier "sitedistant"
qui représentera un dossier distant virtuel qui existerait sur la machine serveur. Cela nous
permettra de tester la publication des pages en local.
Puis nous créerons des paramètres pour un dossier réellement distant et situé sur
aim-18.obspm.fr
Choisir
Edition / Paramètres des sites de publication
ou
Edition des sites depuis la fenêtre Gestionnaire de sites (F9)
Cliquer sur nouveau site
Nom du site nvu0.
Créer les paramètres de publication vers le dossier "sitedistant" en renseignant les champs
indiqués (les chemins indiqués dans adresse HTTP et ftp seront différentes que celles
indiquées ici)
Cliquer dans parcourir pour choisir le dossier ftp ........./sitedistant
puis copier coller cette adresse dans le champ HTTP
Cliquer sur nouveau site
Créer nvuaim18 comme indiqué ci-dessous. Renseigner les rubriques indiquées pour obtenir
une configuration qui vous permettra d'envoyer vos pages et dossiers sur le serveur de
publication (en ftp) et de les voir à l'adresse http (sous réserve que le serveur soit actif).

Vous venez de créer 2 sites de publications : nvu0 et nvuaim18.
Sélectionner nvu0 et cliquer Site par défaut. Quand on cliquera sur l'icône "Publier", ce sont ces paramètres qu
seront utilisés.
Utilisation
Edition d'une page web
Quand on voudra publier sur aim18, il faudra revenir dans
Edition / Paramètres des sites de publication
ou
Edition des sites depuis la fenêtre Gestionnaire de sites
et changer le site par défaut.
Quitter Nvu pour sauvegarder les préférences, puis le relancer.
Vos préférences sont actives.
Nvu s'ouvre avec une page blanche

Barre d'outils concernant les fichiers :
Nouveau
Ouvrir
Enregistrer
Publier : envoie la page sur le serveur du site sélectionné par défaut.
Navigateur : teste la page ouverte en cours dans le navigateur définit par défaut (page locale si non publiée
ou page distante sur le serveur si elle a été publiée)
On peut avoir plusieurs fichiers ouverts en même temps, on passe de l'un à l'autre par les onglets fichiers.
Barre d'outils permettant d'insérer des objets dans la page (définition avec interface graphique) :
Ancre : permet de créer une cible de lien à l'intérieur d'une page
Lien : crée un lien entre le texte ou l'élément sélectionné et une cible qui doit exister. (page externe, ancre,
liens relatifs ou absolu)
Image : insère une image existante dans un dossier du site. (emplacement / vignette / texte alternatif /
dimensions / espacement / adaptation au texte / map / lien)
Tableau : insère un tableau (rapide / précision / cellules / bordure)
Formulaire : insère un formulaire
Barres de mise en forme :
Format paragraphe
Titre 1
Titre 2

Paragraphe
Menu Gestionnaire de sites :
F9
Remarquer en bas de l'écran les onglets :
"Normal" : édition wysiwyg de la page html
"Balises HTML" : montre les balises entrantes
"HTML Source" : édition directe dans le code html
"Aperçu" : à peu de chose près montre le même aspect qu'en mode Normal. Il vaut mieux utiliser
l'icône Navigateur pour avoir un aperçu avec un navigateur.
On peut ainsi voir la même page dans chacun de ces 4 formats d'affichage.
A gauche de cette barre, un peu plus bas, se trouvent affichées les balises concernant la zone (le bloc) de l
page où est positionné le curseur d'édition.
Clic gauche dessus permet de sélectionner tout le bloc.
Clic droit donne accès à un menu contextuel notamment pour attribuer des styles.
Affichage mise en évidence des blocs
Insertion caractères et symboles
Table des matières
Outils (valider, CSS, nettoyeur)
TP 3 : Premières pages web
Nous avons défini l'arborescence des sites, installé et configuré Nvu. Nous allons maintenant créer des pages we
avec Nvu. Pour insister sur la structuration de l'information indépendamment des styles, voyons d'abord l'exemp
de la page systemesolaire/fichier1.html. Nous créerons ensuite les premières pages des deux autres sites planete
et monsiteweb.
Edition d'un fichier html
Création d'un fichier
Dans le dossier systemesolaire, ouvrir avec Nvu fichier1.html
Affichage/Mise en évidence des blocs
Pour sélectionner un bloc, cliquer dedans puis cliquer sur la dernière balise affichée dans la
barre bas gauche de nvu : tout le bloc est sélectionné. Un clic droit au même endroit permet
d'affecter un style à la balise sélectionnée.
Sélectionner les blocs suivants, repérer le nom des balises
titres
paragraphe
image
tableau
liste
Essayer les différents modes d'affichage
Créer maintenant le premier fichier de votre site personnel. Il est recommandé d'avoir défini
sur le papier la page avant de la créer (texte, images, structure de l'information).
Ouvrir un nouveau fichier

Titre et propriétés de la page
Ajouter la structure du texte
Taper du texte au kilomètre sans se soucier de la présentation
Format / Titre et propriétés de la page /
Renseigner le titre et la description. Ces informations seront écrites dans le header mais ne
s'afficheront pas dans la page (sauf le titre --> bookmarks, signets)
Enregistrer sous "monsiteweb/page1.html"
Listes
Mettre un titre en h1, faire des paragraphes
Essayer les 3 types de listes : ordonnées , à puces , de définition

type=1 start=1 ou A, a, I, i
type="circle" ou squarre, disc
Tableaux
Insérer un tableau avec une bordure de 1 pixel, un espacement des cellules de 2 px et une
marge de 2px dans les cellules.

Image
Commencer par créer un dossier images dans votre dossier monsiteweb et y copier l'image
Portrait_de_famille.jpg qui existe dans systemesolaire.
Insérer l'image Portrait_de_famille.jpg dans votre page
Donner d'abord la localisation de l'image sur le disque. Il vaut mieux avoir déjà copié l'image
dans le dossier images.
Cliquer URL relative pour éviter une URL absolue qui contient le chemin depuis la racine de
votre disque dur. Le cas risque de se produire si l'image est située ailleurs sur votre disque.
Nvu vous proposera de copier l'image avec la page. Il faudra ensuite revenir sur l'image pour
remettre le chemin en relatif.
Donner un texte alternatif à afficher en cas de problème avec l'image.
On peut changer les dimensions en pixels ou en pourcentage de la page

On peut ajouter un espace de quelques pixels autour de la page et spécifier comment doit
s'afficher du texte autour de l'image.
L'image peut être cliquable si on spécifie un lien

Code source
Enregistrer
Regardons le Source et essayons de retrouver les blocs d'informations
titre
auteur
description
Retrouver le texte brut et les balises
TP 4 : les planètes
On commence un nouveau site que l'on gèrera en parallèle avec les 2 autres
Dans le dossier "planetes" créer un dossier "images"
y copier une image de chaque planète du système solaire (utiliser google ou le site :
http://www.imcce.fr/fr/ephemerides/astronomie/Promenade/pages1/166.html)
Créer une nouvelle page
Title : Le système solaire
Enregistrer sous index.html dans le dossier "planetes"

Taper du texte
paragraphe h1 h2
Liste :
Tableau
Image
Mercure
Vénus
Terre
Mars
Jupiter
Saturne
Uranus
Neptune
Pluton
Enregistrer
Tester dans le navigateur
Créer une nouvelle page
Format / Titre et propriétés de la page /
Title : Mercure
enregistrer sous mercure.html dans le dossier "planetes"

taper du texte
Paragraphes
Titres h1 h2
image
texte
lien vers la page index
tableau
enregistrer
Ouvrir la page index.html
lien vers la page mercure.html
enregistrer
Tester dans le navigateur
enregistrer 9 fois sous les noms venus.html mars.html .... pluton.html
Il ne reste plus qu'à ré-ouvrir ces pages et y remplacer les images et textes correspondants
Faire la page venus.html
Format > Titre et propriétés de la page : changer le titre
Changer le H1, l'image, le texte
enregistrer
Ouvrir index.html
Faire les liens vers les 9 pages
Tester dans le navigateur
Publier en local
il faut recréer l'arborescence du TP1
Publier sur aim-18
Il faut d'abord créer les dossiers (reproduire l'arborescence de votre site) sur aim-18, puis
publier les pages une à une en spécifiant le dossier d'arrivée sur aim-18 pour la page html et
pour les images incluses.

Le langage HTML
lien sur site
Le langage HTML est un langage à balise
balise ouverte
balise fermée
Le texte situé entre les balises sera affiché avec la mise en forme correspondant aux balises qui l'encadrent; i
bold=gras.
Les balises admettent des attributs qui précisent leur fonctions
Balises

Attributs
Mise en forme d'une page
Une fois le contenu structuré il reste à faire l'emballage
Intégrée dans le corps
Méthode classique avec interface graphique de la mise en forme de tout traitement de texte. On peut modifier le
polices, taille des caractères, couleur.
Menu "Format" ou Barre d'outils "Format"
Corps de texte
Largeur variable
Couleur (caractères / fond)
Stabylo
Taille caractère (+/-)
Bold Italique Underline
Liste : sélectionner la liste puis modifier son style (à puce, numérotée, alphabétique)
Alignement des paragraphes : gauche centre droit justifié
Indentation
Styles définis : Classes
Calque
Premier plan / arrière plan
Style texte gras
Elémént de liste de définition
Attacher aux bords de la page (gauche, centre droit, en haut, au milieu, en bas) en html???
TP5 : mise en forme classique
Mettre en forme

dossier systemesolaire/fichier1.html
Couleur de fond de page
Titre en rouge
Police Arial Helvetica Verdana Sans-serif
Couleur RVB #FF0000, #00FF00, #0000FF, #000000, #FFFFFF ou la palette
Regarder le html produit
Feuilles de style CSS
Feuille de style incorporée
enregistrer systemesolaire/fichier1.html
Affichage mise en évidence des blocs
On peut attribuer aux blocs des propriétés générales ou des propriétés particulières grâce aux feuilles de style e
cascade ou Cascading Style Sheet CSS.
Les propriétés générales sont définies dans le bloc conteneur général
Les propriétés particulières peuvent être définies dans d'autres conteneurs comme p, ul, ...
Nvu propose une interface graphique pour définir les CSS.
Création d'une feuille de style interne ou incorporée à la page html en cours
Ouvrir systemesolaire/fichier2.html
Outils / Editeur CSS
Choisir "Feuille incorporée"

Dans Liste des média : taper "screen" pour écran (autres : presentation, print, all)
Titre : nommer votre feuille de style "style1-ecran"
Cliquer sur "Créer la feuille de syle"
La feuille de style interne est sélectionnée dans la partie gauche de la fenêtre.
Exporter la feuille et utiliser la version exportés sera vu plus tard
Pour l'instant, créons des règles pour cette feuille.
Créer une règle de style
On a le choix entre 3 type de règles.
Style nommé : .class
pour les styles généraux pouvant concerner tous les types
par exemple .rouge qui met les caractères en rouge
Style type :
pour renommer les balises existantes
par exemple h1
Style sélecteur :
pour des styles particuliers qui ne peuvent être appliqués qu'une seule fois dans le document
par exemple #titre
Cliquer sur "Règle"

Choisir le style sélecteur
Taper le texte : body
Créer la règle de style
On a maintenant accès aux onglets qui nous permettront de définir la mise en page :
Général
Texte
Fond
Bordure
Boite
Audio
Général
Texte
Famille de Police : Personnaliser / Arial, Helvetica, Verdana, Sans-serif
Couleur : #000000
Alignement : justifié

Fond
Bordure
Couleur : #FFFFFF
Utiliser le même style pour tous
canelure 2px vert

Boite
Son

Ajout Règles ...
Cliquer sur "Règle"
Choisir le style type
Taper le texte : h1
Créer la règle de style
Caractères en rouge, fond, bordure 4
Ajout Règles ...
Cliquer sur "Règle"
Choisir le style type
Taper le texte : h2
Créer la règle de style
Caractères en rouge, fond, bordure 2
Ajout Règles ...
Cliquer sur "Règle"
Choisir le style nommé
Taper le texte : bigblue
Créer la règle de style
Caractères en gros, bleu, bordure
enregistrer le fichier

TP6 Mise en forme CSS
Feuille de style exportée
Feuille de style liée
systemesolaire/fichier2.html
Créer une nouvellle feuille de style
Règles
.class
p
h1
h2
#para
voyez les modifs en direct
enregistrer systemesolaire/fichier2.html
Ouvrir systemesolaire/fichier2.html
Sélectionner la feuille de syle
exporter la feuille de style et utiliser la version exportée
sélectionner le chemin
./style
export1.css
fermer fichier2.html
Ouvrir systemesolaire/fichier3.html
CSS
Feuille liée
URL : style/export1.css
media : screen
titre export2
Créer une feuille de style
enregistrer
TP Créer une feuille de style pour l'impression
(pas de fond, tous les liens de la même couleur, soulignés.
a:link
a:visited
a:active

TP créer une barre de navigation entre les 3 pages ou plus
Créer une feuille de style : jaune sur fond bleu avec xx en pointillés rouge
et une autre : blanc sur noir
Compléments
Modèles
Calques
Orthographe
Javascript
Formulaires
Modèles
Les modèles sont des pages webs qui fixent certaines parties de la page les autres pouvant être modifiées
Nouveau Fichier
plus d'options
Modèle vide

TP 7
enregistrer sous modele1.mzt dans le dossier templates
Titre : écrire TITRE
Paragraphe 1 : écrire MODIFIABLE
Paragraphe 2 : écrire MODIFIABLE
Paragraphe 3 : écrire NON - MODIFIABLE
enregistrer
sélectionner un paragraphe1 en entier
activer insertion modèles zone modifiable
idem Paragraphe 1 et 2
enregistrer
Nouveau fichier selon modèle
enregistrer sous essaimodele1.html

Calques
Les calques sont
TP 8
ddd
Orthographe
TP 9
ddd
Javascript
ddd
TP 10
ddd
Formulaires
copier
fr_FR.aff
fr_FR.dic
extraits de
fr_FR1.0.1.zip
Définir un formulaire
Insertion Formulaire
dans le répertoire de nvu puis
components/myspell/

puis Définir un formulaire
Nom du formulaire : livredor
URL de l'action : adressehttpaim-18.obspm.fr/cgi-bin/traitement.cgi
Méthode : POST
Les champs

Légende
champ : vchamptexte
champ mot de passe : ****

QCM
champ case à cocher :
champ bouton radio :
champ fichier : Parcourir…
champ valide : vvalide
champ efface : raz
champ bouton : vchampbouton
Image
image de formulaire :
Zone de texte
zone de texte :
zone de
texte
Liste de sélection
Liste de sélection - Note sur 10 :
10
9
8
7
6
5
4
3
2
1

liste2
Bouton
gpe1
Opt11
opt12
opt13
gpe2
opt21
opt22
opt23
liens internes
mapage1
Bouton de validation :
Bouton :
Etiquettes
Etiquettes : sdjkhfjkqsdfv : fdbdfbsdf Index
Index de recherche
Index de recherche - entrer les mots-clés :
fin du formulaire
TP 11
ddd
Références
http://fr.selfhtml.org/index.htm
http://www.framasoft.net/IMG/nvu-Standard-v0.8fr.pdf
http://www.quirksmode.org/

http://fr.selfhtml.org/index.htm
http://www.htmlcodetutorial.com/