Scribd
Importer
5 vues167 pages

Introduction au langage HTML et outils

Le document présente une introduction au langage HTML, expliquant ses balises, sa structure et les logiciels utilisés pour la conception de sites web. Il détaille également l'organisation des fichiers, les bonnes pratiques pour la création de pages HTML, ainsi que les étapes de conception d'un site, y compris la mise en ligne et le référencement. Enfin, il aborde les critères de notation pour les projets de création de sites web.

Transféré par

ori.gami
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PPT, PDF, TXT ou lisez en ligne sur Scribd
5 vues167 pages

Introduction au langage HTML et outils

Le document présente une introduction au langage HTML, expliquant ses balises, sa structure et les logiciels utilisés pour la conception de sites web. Il détaille également l'organisation des fichiers, les bonnes pratiques pour la création de pages HTML, ainsi que les étapes de conception d'un site, y compris la mise en ligne et le référencement. Enfin, il aborde les critères de notation pour les projets de création de sites web.

Transféré par

ori.gami
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PPT, PDF, TXT ou lisez en ligne sur Scribd

Accès direct à HTML

Conception de
« sites Web »
Langage HTML
 HTML = HyperText Modeling
Language
 Langage de modélisation en

mode hyper texte c’est-à-dire


avec des liens actifs entre
pages et fichiers grâce à des
« clics » souris.
Source HTML

 En visualisant une <html>


page d’un site web, <head>
on peut par le menu
« Affichage / Source <meta http-
» visualiser le « code equiv="content-type"
» HTML de la page content="text/html;
charset=UTF-8">
 Exemple de la page
d’accueil de [Link] <title>Google</head>
<body bgcolor=#ffffff
text=#000000
link=#0000cc >
etc. (contenu de la page)
</body></html>
Balises HTML
 Le langage HTML  Balises de descriptions
essentielles
est composé de «  <html> </html>
balises » décrivant  <head> </head>
des éléments à  <body> </body>
afficher.  <table> </table>
 2 types de balises :  <script> </script>
 <style> </style>
 Balise de description
<balise> élément
 Balises d’information
</balise>
 <meta>
 <input>
 Balise d’information  <img>
<balise> information
Logiciels de conception
 Logiciel de conceptions de pages HTML
 GoLive d’Adobe (associé à d’autres logiciels
Photoshop, InDesign, AfterEffect, etc.)
 Dreamweaver de Macromédia (associé à
d’autres logiciels Flash, Fireworks, Director, etc.)
 FrontPage de Microsoft
 WebExpert de Visicom Média (associé à
d’autres logiciels tels que Mio, Dynamic Toolbar,
AceDesign etc.)
 etc.
Logiciels annexes
 Logiciels clients FTP (CuteFTP, Filezilla,
FTPExpert, FlashFXP, LeechFTP, etc.)
 Logiciels graphiques :
 Logiciels de conceptions graphiques 2D/3D,
 Logiciels spécialisés boutons,
 Logiciels de retouches photo,
 Logiciels d’effets spéciaux,
 Etc.
 Logiciels spécialisés d’animation (Flash,
MioFactory, Director, etc.)
Conception de site

LOGICIEL
WEBEXPERT 5.0
Logiciel Web-Expert
Logiciel Web-Expert

Barre des
Barre des formats
Menus d’affichage de
l’éditeur HTML
Logiciel Web-Expert

2 barres d’outils Onglets et barre


logiciel (ouvrir, d’outils des formes
nouveau, sauver, HTML (texte, images,
fermer, etc.) liens, tableaux,
formulaires, styles,
etc.)
Logiciel Web-Expert

Zone de travail
(EDITEUR HTML)

Barre des
caractères
spéciaux Onglets
codés & Visionneur
et Editeur
Logiciel Web-Expert

Sélecteur de balise HTML

Inspecteurs de
- code HTML,
- de code des évènements,
- des styles en ligne
Conception de site
TD

Organisation des TD
pour la mise en œuvre
de WebExpert et
la conception d’un site web
Passage en TD

1° séance : Conception de
page
1. Organisation disque d’un projet
2. Texte et mise en forme
3. Image
4. Tableau
5. Mise en page
6. Affichage de contrôle
7. Résultat final
Passage en TD

2° séance : Dynamisme de
page
1. Principe
2. Liens entre pages
3. Liens entre sites
4. Liens au sein d’une page
5. Lien de messagerie et FTP
6. Boutons dynamiques
7. Modules javascript
8. Résultat final
Passage en TD

3° séance : Formulaire
1. Principe
2. Formulaire
1. Concept
2. Champs de saisie
3. Champs de choix (liste,
boutons)
4. Champs calculés
3. Usage et limite
4. Résultat final
Passage en TD

4° séance : Site complet


1. Organisation et règles
2. Charte graphique et styles (en
ligne, en-tête et CSS1)
3. Description (les métas tags)
4. Mise en ligne
1 – CSS : Cascading 5. Référencement (moteur et
Style Sheet ou Feuille
annuaire, webring et portails) et
de style en cascade
(voir habillage chez règles (les gratuits et les
http:// payants)
[Link]/in
[Link] 6. Résultat final
)
TD
 En relation avec le Phases :
cours de NTCI 1. Etude et spécification du
site (thème commercial,
 Objectif : contenu, menu et
 Réaliser la organisation des pages
entre elles, couleurs et
maquette (4 à 6 chartre graphique,
pages) du site boutons, etc.)
retenu pour le cours 2. Conception des pages
NTCI de la maquette
 Organisation : 3. Formalisation et
modules avancés en
 Même groupe et javascript
même thème que
4. Mise en ligne pour test
pour le cours NTCI
Dates clés 2°
An
Cla né
ss e
 1° mars : réalisation de la page Index i:q
ue
elle doit présenter l’architecture et la
maquette graphique du site
à rendre au plus tard le 8/3 - Notée
 15 mars : réalisation des pages intérieures
elles doivent présenter la dynamique
du site, et l’enchaînement des pages
principales, à rendre au plus tard le
22/03 – Notées
 29 mars : mise en ligne du site, finalisation
et
amélioration – remise le jour - Noté
Dates clés 2°
Alt Ann
er n ée
 9° mars : réalisation de la page Indexan:
c
elle doit présenter l’architecture etela
maquette graphique du site
à rendre au plus tard le 10/3 - Notée
 23 mars : réalisation des pages intérieures
elles doivent présenter la dynamique
du site, et l’enchaînement des pages
principales, à rendre au plus tard le
24/03 – Notées
 29 avril : mise en ligne du site, finalisation
(si besoin) - Noté
Notation de la maquette
 Page d’accueil  1/3 de la note
 Charte graphique  5/20
 Contenu  5/20
 Menus  4/20
 Originalité  3/20
 Lisibilité  3/20
 Pages internes  1/3 de la note
 Pertinence des pages choisies  2/20
 Charte  3/20
 Liens  3/20
 Dynamisme  3/20
 Originalité  3/20
 Lisibilité & usage pratique  3/20
 Respect des liens  3/20
 Site  1/3 de la note
 Accessibilité de la mise en  8/20
ligne  6/20
 Styles (Usage et lisibilité)  6/20
 Aspect général
Le langage H.T.M.L.
Découverte du HTML

1. Gestion d’un site 1. Styles en ligne


2. Bases texte 2. Styles CSS
3. Image
3. Scripts Java
4. Tableau
4. Référencement
5. Roll-over
6. Liens hypertexte 5. Sites utiles
7. Formulaires de saisie 6. Projet NTCI …
Gestion d’un site
 Les dossiers organisés sur son propre
ordinateur le sont différemment de
celui de l’hébergeur
  de ce fait :
On enregistre tous les fichiers
(.htm, .gif, etc.) dans un seul et
même dossier avec si besoin
des sous-dossiers pour les images, les
thèmes, etc.
Organisation des fichiers

1 dossier
UNIQUE
qui
contient
tous les
fichiers
HTML,
styles,
images,
etc.
Organisation des fichiers

Dossier
et sous-
dossiers des
images

Page d’accueil
« [Link] »

Feuille de style
Organisation des fichiers

Eviter de placer
le dossier de travail
sur le bureau de Certains logiciels ne gèrent pas
correctement le bureau Windows et
Windows … génèrent des liens inutilisables dans le Web
Organisation des fichiers
 A contrôler lors de la création du
site :
Adresse de fichier de type :

src="../images/[Link]"
INCORRECT
 Adresse de fichier de type
src="images/affiches/[Link]"
CORRECT 
Organisation des fichiers
src="../images/[Link]"


Dossier du site en construction


src="images/affiches/[Link]"
Nom de fichiers

Du fait de  Pas d’espace (codé %20)


l’utilisation de tous  Différenciation des majuscules
types de serveurs
/ minuscules (casse sensitive)
au sein du Web
(sous Windows,  minuscules privilégiées !
Unix, Linux, Mac-  Rejet des accents (éèêëùüïç
Os, etc.), les noms etc.)
de fichiers doivent  Rejet des caractères
être définis en
spéciaux : # @ : / \ % $ * ? . ;
respectant des
règles homogènes : + - > < « » ‘ "&={ | }
à tous ces OS
Nom de fichier

 Noms incorrects  Accents,


 Sé[Link]
 mélanges de
 Cde Confirmé[Link] majuscules et

 Noms corrects minuscules,


 [Link] espace

 confirme_cde.html
Création sous Web-Expert

1. Enregistrer la page dans le dossier


du site dès le début de sa création
afin de pouvoir la visualiser.
2. Faire apparaître le visionneur par
F12 lors de la 1° utilisation de
WebExpert.
3. Limiter les lignes de l’éditeur à 80
car.
Contenu HTML d’une page
<html>
<!-- Date de création: 20/04/2004 --> Début et fin du code HTML
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859- Début et fin de l’en-tête de la page
1"> (titre, tags de référencement,
<title></title> scripts java, style, etc.)
<meta name="description"
content="">
<meta name="keywords" content=""> Titre de la page (affiché sur
<meta name="author" content="CCI
la ligne de titre de la fenêtre)
Avignon Vaucluse">
<meta name="generator"
content="WebExpert 5">
</head>
<body> Début et fin du corps de la page
Zone principale
 de travail
(contient tout le code HTML
de ce qui sera affiché à l’écran
</body>
et visible par l’Internaute)
</html>
Base texte
 Le texte saisi s’affiche sans saut de
page  exemple
 Pour gérer les sauts de page utiliser
la balise <br> grâce à l’icône :
 La limite d’affichage d’une ligne est
en principe sans limite; pour des
questions de lisibilité, limiter l’écran
à
une taille de 800x600 par ex.
ou se mettre à « Maximum »
Base texte
 Un texte affiché ne l’est qu’avec au
plus un espace entre chaque mot …
 Ainsi « ceci est un texte
espacé » s’affiche « ceci est un texte
espacé »
 Pour utiliser plusieurs espaces, il faut
insérer des caractères spéciaux :
&nbsp;
Double clic pour
insérer un espace
physique
Présentation de texte
 Pour affecter une présentation :
1. Sélectionner le texte tapé
2. Affecter un alignement
3. Affecter un style
4. Affecter une couleur
 Ceci affiche les balises
1. <div align=‘’xxx’’> texte </div>
2. <i><u><b>texte</b></u></i>
3. <font color=‘’#xxxx’’>texte</font>
Présentation de texte

Présentation avancée
du texte
Choix de la taille de la
police (taille relative)

Styles de titres
prédéfinis
Présentation de texte

Outils Fonts (FF)

et balise
<font> … </font>
Modifier une présentation
 Pour modifier la présentation d’un
texte
1. Se placer sur la balise désirée (font, div,
etc.)
2. Modifier les paramètres
1. dans le volet de gauche
OU
2. faire clic droit « propriétés de la balise xxx »
OU
3. Alt+Entrée
Modifier une présentation
 NE JAMAIS REAFFECTER UN ALIGNEMENT
OU UNE COULEUR A UN TEXTE QUI A DEJA
LES BALISES <DIV> ou <FONT> sinon l’on
obtient ceci :
 <div align="center"><div
align="left"><div
align="right">texte</div></div></div
>
Modifier une présentation
Utiliser l’explorateur de code à gauche pour modifier une présentation

2 Modifier les paramètres dans


l’explorateur (exemple couleur) 1 Cliquer sur la balise
à modifier (ici font)

3 Utiliser de nouveaux
paramètres (exemple taille)
Insérer une image
Insertion d’1 image dite
« graphique » de type jpg ou gif
Balise Image
 <img src="images/[Link]"
border="2" width="" height=""
alt="Logo Galdoise"
align="middle">

Balise image
source (fichier image)
encadrement et taille
texte (bulle d’aide et affichage temporaire)
alignement
Fichiers images
 JPEG : acronyme de Joint  GIF : acronyme de
Photographic Experts Graphics Interchange
Group. Format.
 Le format jpg contient une  format proposé par Compuserve. Un
compression de l'image.. Le fichier gif stocke, pour chaque pixel
de l'image, un code RGB (Red Green
taux de la compression est Blue) qui contient la part de rouge, de
variable (compromis taille / vert et de bleu de sa couleur
qualité). correspondante.
 Principalement utilisé pour des
 on distingue 4 sous-classes :
 Gifs standards
photos, dessins de haute  Gifs transparents, une des couleurs
qualité ou de grande taille (par est transparente à l'écran, on peut
exemple des fonds d’écrans). donc définir le contour que l'on
 Anciennement on utilisait TIFF ou souhaite.
TIF (Tagged Image File Format)  Gifs entrelacés, qui apparaissent
Format binaire à compression sans petit à petit à l'écran.
perte pour l'archivage d'images, utilisé  Gifs animés, suite d'images créant
surtout dans le monde de l'édition et l’illusion d’une animation
des arts graphiques en haute
résolution et multi-plate-forme.

On utilise des fichiers PNG (Portable
Recommandé pour la portabilité sans Network Graphics) qui devraient le
perte. remplacer à terme …
Tableau et mise en page
Insertion d’1 tableau de
n lignes (rows) par m colonnes (columns)
Contenu d’un tableau

Cellule du tableau pouvant contenir


texte ou image et être mis en forme
Gestion des cellules

Changer le
CLIC contenu de la
cellule (texte,
DROIT image, etc.)

DE LA
SOURIS
Changer la mise
en forme de la
cellule (couleur,
alignement, …)
Mise en page du tableau
On peut utiliser les « propriétés » du tableau (clic droit ou
explorateur de code à gauche) pour améliorer sa présentation.
Tableau rapide vide
Un « tableau rapide » ne génère que les balises
<table> <tr> <td> dans la page HTML
Balises tableau
<table> Balise de début du tableau
<th>
<td>
Titre Balise des titres de colonne
colonne
</td>
Balise de début de ligne
</th>
<tr> Balise de début de colonne
<td> (data ou données)
Données
</td>
</tr>
</table>
Listes
Balises de listes
 Listes :
 À puces <ul type="disc">
<li>Texte de liste</li>
</ul>

<ol type="A">
 Numériques <li>Texte de liste</li>
(ou lettrées) </ol>

 Hiérarchique <dl>
<dt>N°</dt><dd>Texte
liste</dd>
</dl>
Fin partie base
Le « Roll-Over » sur image

Principes élémentaires
de mise en œuvre
Survol d’une image
 Pour gérer le changement d’image
lors d’un survol d’image, il faut
procéder en 3 temps :
 réaliser les images de chaque état (de
base et en survol)
 insérer l’image de base dans la page et
la nommer
 activer les évènements
« onmouseover » et « onmouseout ».
Image de chaque état

 Image 1 de base :
fichier
« [Link] »

 Image 2 de survol :
fichier
« accueil_on.gif »
Image placée
 Insérer l ’image à
sa position
désirée, la balise
doit être de ce
type :

<IMG SRC="images/boutons/[Link]"
WIDTH="125" HEIGHT="32" BORDER="0" >

OU
<IMG SRC="images/boutons/[Link]"
BORDER="0" >
« Nommer » des images

 Nommer l’image dans


les propriétés NAME et
ID de la balise IMG
 se placer sur la base
IMG
 se placer dans l ’onglet
propriété
 se placer dans la
propriété NAME
 taper le nom (unique)
par exemple b1 dans la
propriété ID
 On peut faire de même
dans la propriété name
Animation du survol
 Activer l’onglet
Évènements
 Se placer sur l’événement
onmouseover et cliquer sur
les points de suspension
 taper le script à savoir :
 nom image
 .SRC
 =nom du fichier image de
survol

[Link]='images/
boutons/
accueil_on.gif'
Animation du survol
 Se placer sur
l’événement onmouseout
et cliquer sur les points
de suspension
 taper le script à savoir :
 nom image
 .SRC
 =nom du fichier image de
base
 Enregistrer votre travail

[Link]='images/
boutons/[Link]'
Synthèse Roll-over
1. Concevoir les 2 images [Link] et [Link]
2. Implanter la 1° image <img src=‘[Link]’>
3. Nommer cette image (id <img src=‘[Link]’
et name par ex b1) name=‘b1’ id=‘b1’>
4. Activer l’onglets des
« évènements » Sélectionner et
copier src=‘[Link]’
5. Sélectionner le champ
« onmouseover » et
taper donner le nom de [Link]=‘[Link]’
la 2° image en source (utiliser le coller si
besoin)
6. Sélectionner le champ
« onmouseout » et
donner la 1° image en [Link]=‘[Link]’
(utiliser le coller si
source besoin)
Fin roll-over
Les liens « Hypertexte »

Lien et balise de lien


Type de lien
Mise en œuvre
Lien hypertexte

 Les liens sont définis par la base <A>


 Ils permettent d’accéder à :
 une page du site (lien direct [[Link]])
 une page d’un autre site ([Link]
 un appel de messagerie ([Link]
 un téléchargement ([Link]
 un groupe de nouvelle (new:)
 une zone de la page en cours (lien interne
#)
Lien vers 1 page du site

 Sélectionner l’élément à cliquer


texte ou image (ex : TARIF) puis
cliquer sur l’icône lien de la barre
d’outils.
 Sélectionner le type de lien
(Aucun lien direct pour une page
du même site)
 Sélectionner la page (icône ouvrir
dossier) html à charger
 Indiquer une astuce (bulle d’aide
lors du survol souris)
<A href="[Link]" title="Afficher
le tarif">TARIF</A>
Lien vers 1 autre site
 Sélectionner le type de
lien (Lien HTTP)
 Coller l’URL dans la
référence de lien externe.
 Indiquer une astuce
(bulle d’aide lors du
survol souris)

<A HREF="[Link]
[Link]/" TITLE="Voir le site
de notre partenaire">Partenaire
le Consultant</A>
Fenêtre destination
 Un lien peut afficher une page
liée soit :
 à la place de la page en

cours (Aucune)
 dans une nouvelle fenêtre

(_blanck)
 dans le cadre du lien (_self)

 dans le cadre d’origine

(_parent)
 dans la fenêtre en

supprimant les frames


(_top)
 C’est la propriété « target » qui
contient cette information
Lien de messagerie

 Sélectionner le type
« Adresse électronique »
 Placer en référence
[Link]
[Link]
 Indiquez l’astuce et le
sujet du mail
 en cliquant l’utilisateur
ouvrira son logiciel de
messagerie et préparera
automatiquement l’envoi
d’un mail
Lien interne

Pour réaliser un lien interne,


c’est à dire naviguer dans 1
page (et non d’une page à
une autre)
1. Donner le nom du lien
2. Donner l ’astuce (bulle
d ’aide)
3. Indiquer la ligne de
destination vers laquelle le
lien est dirigé (cette ligne
s’affichera en haut de
l’écran lors du clic sur le
lien)
Fin liens hyper texte
Les formulaires

Principe
Principe
Contenu
Contenu
Balises
Balises
Exemple
Exemple de
de page
page formulaire
formulaire
Principe de formulaire
 Une formulaire est une partie de page HTML
dans laquelle l’internaute peut
 Saisir des informations (texte, choix de liste, etc.)
 Transmettre ces informations soit :
 Au site (sites dynamiques en PHP, Perl, JSP, ASP, etc.)
 A une adresse e-mail particulière
 On peut implanter plusieurs formulaires par
page. Chaque formulaire est indépendant. On
peut associer des scripts java pour effectuer
des contrôles et des calculs sur le formulaire.
Formulaire

1 2 3 4 5 6 7 8 9 10 11 12 13 14
8. Texte long (adresse,
1. Formulaire commentaires, etc.)
2. Cases à cocher (plusieurs 9. Bouton d’action
choix parmi n)
10. Bouton d’annulation
3. Cases radio (1 choix parmi n)
11. Bouton d’envoi (par mail par
4. Liste (1 choix parmi n) exemple)
5. Liste déroulante (1 choix 12. Dessin associé au formulaire
parmi n et saisie possible)
13. Texte caché
6. Texte court (<=255
caractères) 14. Fichier pouvant être attaché
(pièce jointe) par la personne
7. Mot de passe caché qui saisie

Onglet FORMULAIRE
Démarche Formulaire
1. Au sein de la page HTML, insérer un
formulaire (<form>)
2. Au sein du formulaire, insérer un
tableau décrivant le contenu (2
colonnes par exemple, 1 pour le
texte, 1 pour les zones de saisie)
3. Dans chaque cellule du tableau,
insérer le texte ou la zone de saisie
(texte, liste, cases à cocher, etc.)
Formulaire
 Nom du formulaire
 Page appelée par le
formulaire en cas de
validation
 Type de lien (voir les liens)
 Mode d’envoi
 Get : les infos sont visibles
dans la barre d’adresse
 Post : les infos sont
masquées
 Encodage par défaut pas
d’encodage (MIME
uniquement si ce protocole
est activé sur le serveur,
Texte uniquement pour
Netscape)
Case texte (1 ligne)
Texte multi-lignes
Cases et listes

 Nom

 Texte
 Indication
de
présélection
 Liste de
tous les
textes des
diverses
cases
Boutons valider/annuler
Attachement de fichier

Génère une zone


de parcours du
disque utilisateur
Balises de formulaire
 Les balises formulaires  avec des types pour
sont au nombre de 3.
les diverses saisies :
 Le formulaire est  text (texte)
compris entre 2
balises <form> et
 password (mot de
passe)
</form>
 checkbox (case à
 Les listes sont dans
cocher)
les balises <select> et
</select>
 radio (case radio)
 submit (bouton de
 Chaque zone de saisie
validation)
dispose d1 balise
unique <input>
 reset( bouton annuler)
Exemple de formulaire
Listes déroulantes
de choix

Zone de texte long

Boutons radio

Zone de texte court

Boutons de validation
et d’effacement
(Submit/Reset)
Exercice
 Réaliser un formulaire permettant à une personne
de réaliser une demande. Elle doit fournir :
 Ses nom, prénom et adresse
 Son téléphone et mail
 Avoir une liste possible de demandes (catalogue général,
offres promotionnels, catalogue des matériels, catalogue
loisir)
 Pouvoir demander ou non à recevoir des informations
d’actualités par mail
 Choisir si elle préfère recevoir les documents par mail ou
par courrier postal
 Pouvoir ajouter un commentaire ou des demandes en
texte libre
 Validation par bouton mail
Fin formulaire
Les styles en ligne

Principe
Balises utiles
Créer et utiliser un style
Créer et utiliser une classe de style
Principe
 Un style permet d’améliorer la présentation
d’une page HTML en veillant à ce qu’elle soit
homogène, plus lisible et facilement
modifiable.
 Il existe 3 utilisations de styles
 Ponctuel sur une balise (seule la ligne concernée
sera modifiée)
 En ligne sur une page (toutes les lignes utilisant le
style auront la même présentation)
 En fichier style pour un site complet (toutes les
pages du site pourront avoir la même présentation)
Balises utiles
 On peut appliquer un style à toutes
les balises sans exception, mais les
plus utiles sont :
 <div> pour les paragraphes
 h1 à h6 pour les titres
 acronym, q et p pour les mots à mettre
en exergue
Onglet style
 La sélection d’une
balise (exemple
div [division])
permet de définir
le style de la balise
sélectionnée.
Composants style

 Onglet style : principaux composants


utiles
 Background  Arrière plan (couleur ou image)
 Color (couleur du texte ou de l’objet)
 Cursor (changement du curseur)
 Font (font-family, font-size, font-weight)
 Margin (margin-top, margin-bottom, margin-
left, margin-right)
 Text-align, vertical-align,text-transform, text-
shadow
 Etc.
Style en ligne
 La définition d’un style sur 1
balise (par exemple div) affiche
une propriété style et ses valeurs
:
 <div style="text-align: justify;

margin-top: 10; margin-right:


10; margin-bottom: 10;
margin-left: 10">
Définition de style
 Dans l’en-tête de la page (zone <head> à
</head>), définir la balise
<style></style>
 Entre ces 2 balises, définir un style se fait
en :
 Tapant le nom de la balise désirée suivi de { }
 Définissant les éléments de style (on se place
sur la balise définie et on utilise l’onglet style)
 Le fait d’utiliser la balise dans la page,
affecte automatiquement le style défini.
Style en-tête
Styles sur h1 (titre 1) et
div (paragraphe)
<head>
<style>
h1 {font: Arial; font-size: 20px; font-weight: 700;
text-transform: uppercase; text-decoration:
underline; color: #999999; text-align: center}
div {background: gray; color: yellow}
[Link] {background: yellow; color: red}
</style>
</head>
<body> Classe de style jaune
sur div (paragraphe)
Pratique des styles
 Pour créer un style dans l’en-tête, le
plus simple est de définir un style en
ligne et lorsqu’il est correct de
copier/coller la définition du style
(comprise entre ‘’ ‘’ après style=)
 <div style="text-align: justify;
margin-top: 10; margin-right: 10;
margin-bottom: 10; margin-left:
10">
Classes de style
 Possibilité de définir des variantes de
style ou CLASSES
 Dans la zone style, donner le nom de
la balise suivi d’1 point et du nom de
la classe (sans espace)
 Pour utiliser la classe, dans l’onglet
propriété de la balise, zone classe,
taper le nom de la classe désirée.
Style et lien hypertexte
 Un lien hypertext (balise <a>) dispose de 4
états dont on peut définir la couleur dans les
paramètres du corps (<body>)
 Ces états peuvent être traités de manière plus
poussée par des styles. On définit alors non
plus des classes mais des états :
 A définit le lien inactif (au chargement de la page)
 A:link : définit le lien inactif (au chargement de la
page)
 A:hover : définit le lien au passage de la souris
 A:visited : définit le lien visité
Style et lien hypertexte
 Exemples de déclaration de style de liens :
 A { color:#0B3A0C; text-
decoration:none; }
 A:link { color:#0B3A0C; text-
decoration:none; }
 A:hover { color:#136415; text-
decoration:underline; }
 A:visited { background-color:#FFFFFF;
color:#000099; text-decoration:overline
underline; }
Style et lien hypertexte
 Il reste bien sûr possible de créer des classes
de liens et donc de définir des styles tels que
les liens de base et des classes
 exemple soit une classe menu et une classe
option, le survol des liens donnerait 3 styles :
 A:hover {xxxxxxxxx}  lien de base
 [Link]:hover {xxxxxxxxx}  lien des menus
 [Link]:hover {xxxxxxxxx}  lien des options
Les calques

 Les calques sont des affichages


d’informations (texte et images) en
couches successives.
 On considère qu’un élément peut être :
 Affiché ou non visible ou hidden [masqué]
 Positionné en un point précis de la page 
coordonnées X et Y de l’objet
Les calques - exemple
 On souhaite afficher un texte avec une ombre
décalé de 2 pixels vers la droite et le bas.
Style du texte à afficher
 <style>
.texte1 {font-size: 30px; color: #FF6633;
position: absolute; top: 10px; left:
160px;}
.texte2 {font-size: 30px; color: #004080;
position: absolute; top: 12px; left:
162px;}
</style>
Classes non associées
à 1 style Style de l’ombre du texte
Les calques exemple
 <body>
<div class="texte2">Titre exemple
</div>
<div class="texte1">Titre exemple
</div>
</body> Affichage de l’ombre
PUIS du texte (par-dessus)

Afficher le résultat
Les calques - exemple

 On peut positionner un objet relativement


au dernier objet affiché grâce à la position «
relative »

.lettre {font-family: Verdana; font-size:


30px; color: #FF6633; position: relative;
top: 12px; left: 12px; visibility: visible}
Les calques - exemple
 Exemple au sein d’un tableau …
 <table border="1" cellpadding="1" cellspacing="2"
align="center">
<col width="100">
<col width="100">
<tr>
<td align="center" height="100">
<div class="lettre">A</div></td>
<td align="center"><div
class="lettre">B</div></td>
</tr>
<tr>
<td align="center" height="100"><div
class="lettre">C</div></td>
<td align="center"><div
class="lettre">D</div></td>
</tr>
</table>
Fin styles en ligne
Les feuilles de styles

Principe
Exemple d’usage avancé : les calques
Feuilles de styles
 Il s’agit d’un fichier de suffixe .css
contenant la liste des styles à utiliser
 La description des styles est
rigoureusement identique à celle des
styles en-tête de document mais sans
balise <style>
Style en-tête de page HTML Style CSS

<head>
<style>
h1 {font: Arial; font-size: 20px; font-weight:
700; h1 {font: Arial; font-size: 20px; font-weight:
color: #999999; text-align: center} 700;
div {background: gray; color: yellow} color: #999999; text-align: center}
[Link] {background: yellow; color: red} div {background: gray; color: yellow}
</style> [Link] {background: yellow; color: red}
</head>
Création d’une feuille CSS
 Sélection DOCUMENT CSS lors de la
création d’une feuille de style
 Saisir les styles ou les copier/coller depuis
une feuille HTML ayant servi d’exemple.
Usage de feuille de style

1
1. Onglet CSS
2
2. Lier 1 feuille
de style
4 3
3. Ajouter le
fichier style
4. Le fichier style
sélectionné
est dans la
liste 5
5. Valider
Usage de feuille de style
 L’en-tête de la page HTML contient
alors la balise suivante :
 <link rel="StyleSheet"
type="text/css" href="[Link]">
</head>
<body>
fic No
 Les styles s’utilisent alors hi m
er du
( .c s
comme s’ils étaient en ligne. s t
s) yle
Style et fonts
 Il est possible d’associer une police à votre site
(attention aux droits d’auteur) grâce aux styles.
 Principe : Style en ligne

<STYLE TYPE="text/css" MEDIA="screen, print">


@font-face { font-family: "Ringbearer";
src: url("RINGM___.TTF") }
H1 { font-family: "Ringbearer", serif }
</STYLE>
</head>
<body>
<h1>Texte exemple en police Ringbear</h1>
</body>
ATTENTION : ceci n’est pas toujours opérationnel
les résultats ne sont donc pas garantis
…
Fin styles CSS
Scripts JAVA (JS)

Principe
Scripts prédéfinis
Trouver et utiliser des scripts sur le web
Javascript
 Java est un langage de
développement permettant d’écrire
des programmes et logiciels
 Java-scripts est une version réduite
de java permettant de réaliser ce
que l’on nomme des applets et des
scripts, c’est-à-dire des petits
morceaux de programme au sein
d’une page html.
Intérêt

 L’intérêt d’un java script est de permette,


au sein d’une page STATIQUE HTML, des
 Animations de texte ou d’images
 Affichages conditionnels c’est-à-dire
variant en fonction d’un environnement tel
que le navigateur, le fait que l’utilisateur
vienne de tel page du site, etc.
 Calculs et opérations de manipulations de

dates et heures, ce qui permet de gérer


par exemple un caddie dans un site e-
commerce
Utilisation « élémentaire »
 On peut, SANS CONNAÎTRE JAVA ni
les JAVASCRIPTS, les utiliser.
 Pour cela :
 WebExpert (comme la plupart des
outils) fournit des scripts prédéfinis
 De très nombreux sites permettent de
paramétrer et créer des scripts qu’il
suffit de copier/coller dans sa page pour
les utiliser
Exemples Web-expert

 De gauche à droite :
1. Scripts d’animation de texte
2. Scripts d’animation d’images
3. Scripts d’utilitaires
4. Scripts de menus (déroulants par exemple)
5. Scripts de calculs (calculette par exemple)
Script 1 : Texte animé (1)

4
2 1

3 5
1 – Choix du script / 2 – sélectionner des paramètres / 3 – saisie de la
valeur de chaque paramètre / 4 – visualisation du résultat avant
validation (5)
Script 1 : Texte animé (2 /
paramètres
fin) Déclenche au chargement
<SCRIPT LANGUAGE="JavaScript"> de la page (onload) et arrêt à
<!-- begin script la sortie de la page (unload)
var posBan1=0, ban1, delayBan1, msgBan1;
msgBan1="Bannière de texte";
function banniere1()
{
delayBan1 = 100;
<body onLoad="
if (posBan1 >= [Link]) banniere1();"
posBan1 = 0; onUnload="clearTim
else if (posBan1 == 0) {
msgBan1 = ' ' + msgBan1;
eout(ban1)">
while ([Link] < 128)
msgBan1 += ' ' + msgBan1; }
<FORM
[Link] = NAME="formBan1">
[Link](posBan1,posBan1+
[Link]); <INPUT TYPE="text"
posBan1++;
ban1
NAME="Fbanniere1"
=setTimeout("banniere1(delayBan1)", SIZE="40"><BR>
delayBan1);
} </FORM>
// end script --> SCRIPT bannière
</SCRIPT>
(dans l’en-tête) (dans le corps)
Résultat

Page HTML
Exemple de bannière
en java script
Script 2 : Calcul (1)

 On souhaite réaliser l’opération suivante


de manière automatique :
 On saisit la quantité et le prix d’un produit
 Le total s’affiche automatiquement à la fin de
la saisie de la quantité ou du prix
 Le total ne peut être modifié
Script 2 : Calcul (2)
 Le source HTML sera le suivant :
<form name=saisie>
Nom du formulaire
« saisie »
<table border="3" cellspacing="2" cellpadding="5" align="center">
<tr> Readonly
<td align=center><i>Prix</i></td>
car on veut
<td align=center><i>Qté</i></td>
interdire la
<td align=center><i>Total HT</i></td>
modification
</tr>
<tr>
du total
<td align=center><input type=text name=prix
size=15></td>
<td align=center><input type=text name=qte
size=15></td>
<td align=center><input type=text name=total size=15
readonly> </td>
</tr> Noms des 3 zones
</table> (prix, qte, total)
</form>
Script 2 : Calcul (3)

 Le total est égal au prix x qté.


 En javascript, on écrira précisément :
[Link] = [Link] * [Link] ;
 Si l’on dispose de plusieurs
formulaires dans la page, on précisera
:
[Link] = [Link] *
[Link] ;
Script 2 : Calcul (4 / fin)
 On ajoute dans les champs prix et qté, le
script sur l’évènement ONCHANGE (après un
changement de valeur) :
 <input type=text name=prix size=15
onchange="[Link]=[Link]*[Link]">
 <input type=text name=qte size=15
onchange="[Link]=[Link]*[Link]">
Résultat

Page HTML
Exemple de script de calcul
au sein d’1 formulaire
Zoom
 On a utilisé du javascript pour faire du rollover;
ceci peut être utilisé pour toute autre
opération, par exemple zoomer sur une image :
<img src="images/[Link]" border="0"
width="224" height="224" id="i1"
name="i1" onmouseover="[Link]='448';
[Link]='448’ "
onmouseout="[Link]='224’ ;
[Link]='224’ " >
Résultat

Page HTML
Exemple de ZOOM
sur 1 image
Script avancé
Il est possible d’utiliser des scripts récupérés au
sein de sites Web ou d’écrire soi-même un script
lorsque l’on connaît le langage.
Exemple :
Le script suivant a été entièrement écrit sous Web
Expert
Exemple de menu écrit en Java-Script
directement sous WebExpert

Fichier source du menu écrit en Java-Script


directement sous WebExpert
Réutiliser un script

Si vous voulez utiliser sur plusieurs pages HTML,


un script …
il est plus simple de créer un fichier contenant le
script (suivant le principe vu pour les feuilles de style)
script que l’on charge et active à l’ouverture de
la page (on load)…
Fichier script

 Créer un nouveau
document en
sélectionnant :
Document JAVASCRIPT
(suffixe .js)
 Copier/coller votre
script dans ce
document et
l’enregistrer (par
exemple sous le nom
[Link])
Utiliser un fichier .js

 Pour utiliser son fichier


de script,
 Insérer dans l’en-tête la
balise script :
<script
language="JavaScript">
</script>
 Sur la balise script,
sélectionner la propriété
SCR (fichier source) et
cliquer sur les ...
 Sélectionner le fichier
source [Link]
 Enregistrer votre fichier
html
Fin JS
Meta-tag et
référencement

Moteurs et annuaires de recherches


Robots
Méta-tags
Moteurs, annuaires, etc.
 Pour être visible sur le Web, il est vital
d’être visibles sur au moins 3 types de
sites :
 Les moteurs de recherches : environ 70 %
des recherches
 Les annuaires : 20 % des recherches

 Les portails : de 20 à 35 % des recherches

suivant la thématique
Nota : le total dépasse 100 % car certains
internautes combinent leurs outils
Comment être vu ?

 Plusieurs solutions existent, mais toutes


sont basées sur des notions communes :
 « tager » ses pages avec des mots pertinents
qui seront repérables par les internautes
 se référencer sur le plus grand nombre de
moteurs et de portails possibles (au moins 20
pour être pertinents) en fonction du public visé
 disposer du maximum de liens utiles et réels
vers son site (notion de popularité)
Méta-tags et robots
 Les moteurs de recherches utilisent des
logiciels nommés « robots » qui font le
référencement automatique de votre site.
 Un robot utilise pour cela :
 Les meta-tags de chaque page de votre site
 Les titres de vos pages (balises h1 à h6) et les
textes (alt) des images
 La présence de liens entre les mots-clés et les mots
dans le corps de la page (100 premières lignes
environ)
 La popularité de votre site, c’est-à-dire le nombre
de liens d’autres sites vers le votre … (google …)
Méta-Tags utiles
 Titre de page (max. 80 caractères, utilisez des mots clés)
 Auteur et copyright
 Description (max. 200 caractères, mettre des mots clés)
 Mots clés (max. 1000 caractères, séparez chaque mot ou phrase par
une virgule)
 Logiciel utilisé (Dreamweaver 4.0 ou WebExpert 5.0 ou …)
 Langue (fr pour le français)
 Visite : en jours (15, 30, 45, 60, 90, 180 ou 360 days)
 Diffusion : globale ou locale ("globale" = Internet / "locale =
intranet.)
 Robots : « all », « none », « no index » ou « no follow » ce qui
signifie
 all - indexation de cette page et des autres page du site,
 none - ne rien indexer et ne suivre aucun lien,
 no index - indexation des pages liées mais pas de celle-ci,
 no follow - indexation de cette page mais pas des pages
liées
Titre
 C’est le 1° élément « moteur » d’une
page
 Il doit contenir 10 à 20 mots
 Etre représentatif de la page
 Pour les moteurs
 Pour les internautes (barre de titre)
 Etre placé tout près du <head> afin
d’être pris en compte comme élément
principal et placé AVANT les mots clefs.
 <title></title>
Description
 2° élément « moteur » d’une page
 Elle contient des phrases explicatives et
pourront servir de résumé utilisé par le robot.
 Etre représentatif de la page pour les
internautes au sein des moteurs de recherche;
en l’absence de description, le moteur prend
les premiers éléments du premier paragraphe
balisé (ce qui n’est pas forcement le meilleur
élément)
 <meta name="description" content="">
Mots clefs
 Ce sera grâce à un eux que votre page
sera trouvée sur les moteurs et annuaires.
 Les mots clefs (maximum 1000 caractères
par page, y compris les virgules de
séparation) doivent :
 Correspondre à votre site
 Correspondre à la page dans laquelle ils sont
 Être associés à des analogismes ou termes
connexes
 Etre relativement « populaires » (être utilisés
par les internautes, mais ne pas faire partie
des mots utilisés par trop de sites)
 <meta name="keywords" content="">
Auteur et copyright
 Eléments complémentaires, ils définissent
les références du concepteur et l’outil (ce
dernier point étant utile aux robots pour la
lecture des pages, car certains logiciels
disposent de particularités d’écriture)
 <meta name="author" content=« EGC Avignon">
 <meta name="generator" content="WebExpert
5">
Meta particuliers
 Expiration : utile pour les pages à durée de
vie limitée :
 <meta http-equiv="expires" content=«
xx/xx/xxx">
 Revisite : utile pour les pages dont la
période de renouvellement est connue
 <meta http-equiv="Revisit-after" content= "15
days">
 Rev : précise le mail du webmaster auquel
doit écrire le robot en cas de problème
 <meta http-equiv="rev" content=
"webm@[Link]" >
Tag de redirection
 Ce tag permet de renvoyer
automatiquement vers une autre page
après un certain délai … utile en cas de
changement d’hébergeur par exemple
 <meta http-equiv="refresh"
content="10;
url=[Link]
 10 indique le délai (ici 10 secondes)
 url indique la page à afficher
Résultat

Page HTML
Exemple de redirection
automatique
Se référencer

 Il existe plusieurs types de


référencement
 Gratuit : délai 48h à 6 semaines suivant les
moteurs
 Payant : délai garanti de 24 à 48 h
généralement
 Manuel : inscription manuel sur chaque
moteur
 Automatisé : inscription depuis un site de
référencement auprès de plusieurs dizaines
à plusieurs centaines de moteurs
Référencement manuel

2
Référencement manuel

3
Référencement auto.

1
Données de
base
Référencement auto.

2
Sélection des
Moteurs désirés
Fin méta-tags
Quelques sites pratiques
 Kits graphiques
 [Link]
 [Link]
 [Link]
 [Link]
 Fonts / Polices
 [Link]
 [Link]
 [Link]
 Gifs et animés, photos, etc.
 [Link]
 [Link]
 [Link]
 [Link] (bannière 3D)
Quelques sites pratiques
 Scripts Java
 [Link]
 [Link]
index.php3
 [Link]
 Référencement gratuit
 [Link]
 [Link]
[Link]
 [Link]
Quelques moteurs d’origine US

[Link]

[Link]

[Link]

[Link]

[Link]

[Link]

[Link]
Quelques moteurs français

[Link]

[Link]

[Link]

[Link]

[Link]
Quelques moteurs francophones

[Link]
[Link]

[Link]
[Link]
Implantation de site

Client FTP
Transfert
Accès
Pré requis
 Pour implanter un site, vous devez :
 Disposer d’un client FTP
 Disposer des codes d’accès FTP à votre site :
 Adresse FTP
 Login
 Mot de passe
 Avoir implémenté votre site dans un
répertoire unique sur votre disque dur
Client FTP

Zone des
opérations en cours

Répertoire local Répertoire distant


Options d’un client FTP

Serveur FTP du site

Login
Mot de passe

Répertoires
d’échanges
(local &
distant)
Transfert 1/2

1 2
1. Sélection des fichiers à transférer sur le site
2. Lancement du transfert
Transfert 2/3

Gestion des contrôles de transfert en cas de fichier


existant (remplacement [écraser], renommer ou passer)
Transfert 3/3
Information de maj

 Le transfert sur votre site permet


une mise à jour immédiate sous
réserve que les dates de mises à
jour soient activées dans les
pages HTML (voir les META TAG)
Rappel de règles
 L’accès à votre site sera effectif si :
 La 1° page est correctement nommée
(généralement [Link])
 Tous les fichiers utilisés sont dans le
répertoire principal du site ou dans des sous-
répertoires du site (images principalement)
 Tous les noms de fichiers respectent les
règles de base (pas d’espace, pas d’accent,
pas de mélange majuscule/minuscule) afin
d’éviter des risques de non affichage
Spécificité de D.E.S.
 ATTENTION : le serveur que
nous utilisons ne gère pas
les mises à jours de site. De
ce fait, vérifiez votre site
AVANT de le mettre en ligne,
car les modifications ne
seraient pas visibles sinon …
Erreurs fréquentes

90% des erreurs de


initiales proviennent
du non respect des
règles sur les noms
des fichiers !
Erreurs fréquentes
 Vérifier que vous n’ayez aucun nom
comportant des caractères INTERDITS
:
 Espace
 Accents (é, à, è, ê, ë, ï, etc.)

 Majuscules et minuscules mélangées

 Caractères de commandes (%, $, #,

etc.)
 Vérifier ceci dans vos répertoires ET
dans vos pages HTML.
Erreurs fréquentes

CAR EN CAS D’ERREUR,


vous ne pourrez pas
voir vos modifications
au sein du domaine
« DES » de l’EGC
F I N

Vous aimerez peut-être aussi