Ministère de l'Enseignement Supérieur et de la Recherche Scientifique Ministère de l'Enseignement Supérieur et de la Recherche Scientifique Ministère de l'Enseignement Supérieur et de la Recherche Scientifique Direction Générale des Etudes Technologiques Direction Générale des Etudes Technologiques
Institut Supérieur des Etudes Technologiques de Djerba Institut Supérieur des Etudes Technologiques de Djerba Institut Supérieur des Etudes Technologiques de Djerba
PPrrooggrr
rraammmmaattiioonn wweebb SSuuppppoorrtt ddee ccoouurrss
b 11
Mr. BOUREGBA Aymen Elaboré par : Mr. BOUREGBA Aymen
Version : 2010
Public cible : Classes de la 1ère année année
: Technologies de l’Informatique Licence : Technologies de l’Informatique
Technologies de l’informatique Département : Technologies de l’informatique
Année universitaire : 2010-2011
AAVVAANNTT PPRROOPPOOSS
De nos jours, l’Internet et le web sont devenus des expressions courantes et fréquemment
utilisées. Ce support est consacré d’une part à l’étude des services et les fichiers supportés par
Internet ainsi que les notions de base nécessaires pour la création de pages web, et d’autre part à la
présentation des outils nécessaires permettant d’obtenir des IHM répondant aux besoins tel que le
langage HTML avec ces différents type de composants : tableaux, formulaires ; les feuilles de style,
ainsi que le langage supportant le standard d’échange XML : le XHTML. Il est destiné aux étudiants des établissements (ISETs, 1ère année licence technologies de l’informatique).
La pratique des différentes notions abordées dans ce support, sera assurée par le module « Atelier
web 1 » par le biais d’un ensemble de TPs et un mini-projet.
Le contenu, ainsi que l’enseignement pédagogique de ce cours restent toujours aptes à évoluer en
fonction des critiques et remarques constructives des lecteurs. Aussi, avec la participation des
étudiants, une évaluation semestrielle de l’enseignement de ce module est effectuée par le biais de
fiches à rendre commentées librement.
J’adresse d’avance mes remerciements aux lecteurs qui voudront bien faire part de leurs
critiques et de leurs remarques constructives.
FFIICCHHEE MMAATTIIEERREE
Pré requis
- Connaissances générales sur l’Internet et le Web
Objectifs généraux
Ce cours vise à développer chez l’apprenant les compétences adéquates
pour planifier et concevoir un site web en utilisant les logiciels appropriés.
Objectifs spécifiques
L’étudiant doit être capable de :
- Maîtriser les services offerts par Internet.
-
Savoir écrire une page web en utilisant le langage HTML/CSS
Public cible
Etudiants de la première année licence (L1) : Technologies de
l’Informatique.
Volume horaire
0.75h pour chaque groupe (de manière hebdomadaire)
Soit en total : 11.25h.
PP RR OO RR AA MM AA TT II OO NN
WW EE BB
11
Sommaire
Chapitre I : Généralités et notions de base..........................................................................................7 Introduction............................................................................................................................ 7 I Historique............................................................................................................................ 7 I.1 Les années 60 : Contexte de l a guerre froide ................................................................... 7 I.2 Les années 70/80 : Arpanet et le protocole TCP/IP................................................................... 8 I.3 Les années 80/90/2000 : d'Internet au WWW, une montée exponentielle................................ 8 II Les services d'Internet....................................................................................................... 9 II.1 Messagerie électronique........................................................................................................... 9 II.2 Forum de discussion................................................................................................................. 9 II.3 Transfert de fichiers ............................................................................................................... 10 II.4 Telnet et SSH ......................................................................................................................... 10 II.5 Cyber bavardage (chat) .......................................................................................................... 10 II.6 Journal personnel (Blog) ........................................................................................................ 10 II.7 Moteur de recherche et annuaire Web ............................................................................. 11 III Principaux formats de fichiers................................................................................... 11 III.1 Les documents textes ........................................................................................................ 12 III.2 Les images........................................................................................................................... 12 III.3 Les fichiers audio .............................................................................................................. 12 III.4 Les fichiers vidéo .............................................................................................................. 13 IV Création d’un site Web ................................................................................................ 13 IV.1 Définition.............................................................................................................................. 13 IV.2 Objectifs et cible ................................................................................................................... 14 IV.3 Les technologies utilisées ..................................................................................................... 14 IV.4 Présentation du site ............................................................................................................... 15 V Le référencement et la gestion ........................................................................................ 16 V.1 Le référencement.................................................................................................................... 16 V.2 La gestion............................................................................................................................... 16 Conclusion ............................................................................................................................ 17 Chapitre II : Les bases du HTML ......................................................................................................19 Introduction.......................................................................................................................... 19 I Qu'est-ce qu'une balise HTML ? ..................................................................................... 19 I.1 Les balises simples .................................................................................................................. 19 I.2 Les balises doubles .................................................................................................................. 20 I.3 Structure d'un document HTML.............................................................................................. 20 I.4 Le DOCTYPE.......................................................................................................................... 20 I.5 Les commentaires .................................................................................................................... 21 II Le corps du document – body ......................................................................................... 21 II.1 Mise en forme......................................................................................................................... 21 II.2 Les images.............................................................................................................................. 23 II.3 Les liens hypertextes .............................................................................................................. 23 II.4 Les listes................................................................................................................................. 25 Conclusion ............................................................................................................................ 29 Chapitre III Les notions avancées du HTML ...................................................................................31 Introduction.......................................................................................................................... 31 I Les tableaux ....................................................................................................................... 31
I.1 À quoi servent-ils ?.................................................................................................................. 31 I.2 Du tableau simple au tableau complexe .................................................................................. 31 I.3 L'utilité des tableaux aujourd'hui............................................................................................. 35 II Les formulaires ................................................................................................................ 35 II.1 À quoi servent-ils ? ................................................................................................................ 35 II.2 La balise form......................................................................................................................... 35 II.3 Les champs texte mono lignes ............................................................................................... 36 II.4 Les boutons radio ................................................................................................................... 38 II.5 Les cases à cocher .................................................................................................................. 38 II.6 Les boutons ............................................................................................................................ 39 II.7 Les listes déroulantes ............................................................................................................. 40 III Le XHTML ..................................................................................................................... 41 III.1 Définition ............................................................................................................................ 41 III.2 Validation W3C.................................................................................................................. 41 III.3 Syntaxe................................................................................................................................. 42 Conclusion ............................................................................................................................ 44 Chapitre IV : Les feuilles de style.......................................................................................................46 Introduction.......................................................................................................................... 46 I Utilité et avantages ............................................................................................................ 46 II Définition .......................................................................................................................... 47 II.1 CSS Globale ........................................................................................................................... 48 II.2 CSS Intra-lignes ..................................................................................................................... 48 II.3 CSS importée.......................................................................................................................... 49 III Les classes et les ID ........................................................................................................ 49 III.1 Notion de classes................................................................................................................... 49 III.2 Notion des ID........................................................................................................................ 50 IV Les pseudo-éléments et les pseudo-classes .................................................................... 51 IV.1 Les pseudo-classes................................................................................................................ 51 IV.2 Les pseudo-éléments............................................................................................................. 53 V Les balises structurales.................................................................................................... 54 VI Le flux.............................................................................................................................. 54 VII Le positionnement......................................................................................................... 55 VII.1 Généralités........................................................................................................................... 55 VII.2 Attributs............................................................................................................................... 57 Conclusion ............................................................................................................................ 59 Bibliographie ........................................................................................................................................60 Webographie ........................................................................................................................................60
CCHHAAPPIITTRREE II
Généralités et notions de base
PPrréé--rreeqquuiiss Aucun.
OObbjjeeccttiiffss ggéénnéérraauuxx
I. II. III. IV. V.
Introduction I. Historique Les services d'Internet principaux formats de fichiers Conclusion
Introduire la notion d’Internet ainsi que ses services.
Présenter les étapes et les techniques de création d’un site web.
PPllaann ::
Introduction.
I. Historique. II. Les services d'Internet. III. Principaux formats de fichiers. IV. Création d’un site web V. Le référencement et la gestion
Conclusion.
Programmation web 1
Chapitre I Généralités et notions de base
Chapitre I : Généralités et notions de base
Introduction
Surfer, ou naviguer, sur Internet sont devenus des expressions courantes et fréquemment
utilisées. Elles montrent bien l’image de cet océan d’informations qui s'étend aujourd'hui à la
grandeur de la planète et continue de croître et de se diversifier chaque jour [1].
L’Internet marque un virage technologique et culturel
important en diffusant aussi
largement
l'information électronique et en donnant accès à des grandes quantités
d’information pour un grand nombre de personnes à travers le monde.
Il s'agit d'un réseau international d'ordinateurs qui communiquent entre eux dans une toile
dense de relations et de connexions. Les différents ordinateurs branchés au réseau
Internet peuvent communiquer ensemble de façon transparente pour l'usager indépendamment
des types d'ordinateurs utilisés (Mac, PC, Unix ou autres), mais en utilisant cependant les
logiciels appropriés et surtout les protocoles standard.
Le mot Internet (abréviation du mot anglais internetwork) désigne un réseau informatique
constitué par l'interconnexion de plusieurs réseaux. Pour cette raison, on appelle aussi
Internet « le réseau des réseaux ».
I Historique
Internet est
l’infrastructure de communication à l'échelle planétaire issue de
l'interconnexion de réseaux informatiques publiques et privés, il a été crée dans les années 70.
À l'origine, l’Internet relie les sites informatiques militaires des États Unis.
I.1 Les années 60 : Contexte de l a guerre froide
En 1957, l'ARPA (Advanced Research Project Agency) a été crée aux USA pour
piloter un certain nombre de projets dans le but est d'assurer la supériorité scientifique et
technique sur les Russes. Cette organisation regroupait certains des plus brillants cerveaux
américains.
En 1967, Lawrence G. Roberts, récemment arrivé à la tête du projet de réseau
informatique à l'ARPA, publie ces « Plans pour le réseau ARPANET ».
Présentation d'une conception de réseau à commutation de paquets par Donald Davies
et Robert Scantlebury
du NPL (National Physical Laboratory Royaume Uni).
Page 7
Programmation web 1
Chapitre I Généralités et notions de base
Également un article de Paul Barran de la RAND Corporation (militaires) au sujet de
l'utilisation d'un réseau à commutation de paquet pour transmission sécurisée de la voix.
I.2 Les années 70/80 : Arpanet et le protocole TCP/IP
En 1969,
le réseau Arpanet est opérationnel
reliant
initialement 4 instituts
universitaires. Cette liaison a permis aux quatre institutions de transférer des données et
d'effectuer à distance des calculs longs sur plusieurs ordinateurs.
Tout au long des années 70, les laboratoires de recherche sont progressivement reliés
au réseau Arpanet.
En 1970, le protocole NCP (Network Control Protocol) a été utilisé sur Arpanet afin
de pouvoir mettre en liaison des machines hétérogènes (Unix, IBM,...).
En 1983, le NCP est définitivement abandonné au profit du TCP/IP (Transfer Control
Protocol / Internet Protocol) que nous utilisons encore aujourd'hui et qui constitue le protocole
de base d'Internet. TCP est chargé de segmenter le message en paquets et de réarranger ces
Publicité
derniers à
la
réception, tandis qu’IP est chargé d'assurer l'acheminement des paquets d'un
ordinateur vers un autre jusqu'à la destination.
I.3 Les années 80/90/2000 : d'Internet au WWW, une montée exponentielle
En 1977, Internet devient une réalité car le TCP/IP est effectivement utilisé pour relier
divers réseaux à Arpanet. Le nombre d'ordinateurs connectés dépasse alors la centaine et
depuis, ce nombre ne cesse d'augmenter d'année en année.
L’origine du Web remonte à mars 1989 lorsque Tim Berners Lee, un informaticien au
CERN (Conseil Européen pour la Recherche Nucléaire), propose de créer sur le site Internet
du CERN un ensemble de documents reliés les uns aux autres par des liens hypertextes, afin
de faciliter la recherche d'informations pour les physiciens.
Le début des années 1990 marque la naissance d'Internet tel que nous le connaissons
aujourd'hui : le Web, un ensemble de pages en HTML (HyperText Markup Language)
mélangeant du texte, des liens et des images, accessibles à l'aide d'une URL (Uniform
Ressource Locator) en utilisant le protocole HTTP (HyperText Transfert Protocol).
En 1991, Tim Berners Lee du CERN à Genève met au point l’interface d’Internet
appelée World Wide Web, qui permet d’ouvrir le réseau au grand public en simplifiant les
procédures de consultation des sites.
Page 8
Programmation web 1
Chapitre I Généralités et notions de base
En 1991, 300 000 ordinateurs sont connectés, ce nombre atteint 1 000 000 en 1992.
En 1992, le premier lien (on parle de lien hypertexte) vers le site Web du CERN est
créé sur le serveur de Fermilab aux États Unis : la toile mondiale commence à se tisser. Les
années 1990 ont vu le Net continuer à grossir à une vitesse exponentielle sous
l'impulsion du Web.
En 1993, Apparition du premier navigateur web (browser) par Netscape, supportant le
texte et les images. Cette même année, la NSF (National Science Foundation) crée une
compagnie pour enregistrer les noms de domaine.
En 1993, on comptait 600 sites, ce chiffre dépasse 15 000 en 1995. Le WWW devient
le service le plus important sur Internet.
En 2008, on compte 1,5 milliard d’internautes dans le monde, 1.3 milliard
d’utilisateurs d’email, 210 milliards d’emails envoyés par jour, 186,7 millions de site web,
133 millions de blogs.
Le chiffre d'affaires du commerce en ligne (e commerce), qui a dépassé la barre des
20 milliards d'euros en 2008, devrait atteindre 30 milliards en 2010.
II Les services d'Internet
Internet offre plusieurs services à ses usagers. Pour y avoir accès, l'usager (l'internaute)
doit
donc disposer des logiciels clients adéquats, navigateur web, client de messagerie
électronique, boîte pour chat, etc.
II.1 Messagerie électronique
La messagerie électronique (e mail ou encore mail), c'est utiliser Internet comme on
utilise les lettres dans la poste. Il est possible de déposer un message dans la boîte aux
lettres de son correspondant, qu'il soit ou non devant une machine. Ce dernier sera capable, à
sa prochaine connexion, de consulter sa boîte aux lettres pour lire ou envoyer des messages à
ses correspondants.
II.2 Forum de discussion
La principale limitation du courrier électronique est qu'il faut choisir un destinataire
pour pouvoir envoyer un mail. La solution est dans les forums de discussion.
Il s'agit d'un espace de discussion sur Internet fonctionnant, de manière asynchrone, comme
une boîte aux lettres publique, dans laquelle chacun est libre de consulter les messages et d'y
Page 9
Programmation web 1
Chapitre I Généralités et notions de base
répondre. Un forum ou newsgroup (groupe de discussion) s'établit généralement autour d'un
sujet donné. Dans certains cas, une personne appelée modérateur se charge d'animer les
débats et d'éliminer les messages non conformes à la charte du forum.
II.3 Transfert de fichiers
Dans Internet, il est possible de transférer des fichiers d'un ordinateur à un autre grâce
au protocole FTP (File Transfer Protocol). En pratique, ce protocole permet à un usager
d'accéder aux disques durs montés sur un ordinateur distant.
Le service d'échange de fichiers permet de déposer des fichiers sur une machine
distante, mais aussi, et c'est le plus fréquent de télécharger des fichiers sur sa machine. La
distribution de logiciels gratuits, la diffusion d'images, de sons, de notes de cours pour les
étudiants ou d'articles scientifiques sont parmi les utilisations les plus courantes de ce service.
II.4 Telnet et SSH
Ces services permettent à un internaute de se connecter et donc d'utiliser à distance une
machine comme s’il se trouvait face à elle. Ce contrôle à distance permet d'exécuter des
commandes, de démarrer ou arrêter un programme, de consulter l'état de la machine …etc.
Telnet est plus ancien, et commence a être abandonné au profit de SSH pour des raisons
de sécurité : avec Telnet toutes les informations transmises transitent en clair sur le réseau, y
compris les mots de passe, ce qui permet à un éventuel pirate à l'écoute du réseau
d'intercepter des données sensibles. À l'inverse, pour SSH toutes les données transmises sont
cryptées et donc illisibles par toute autre personne que le destinataire.
II.5 Cyber bavardage (chat)
Le cyber bavardage (chat en anglais) désigne les activités permettant à des utilisateurs
d'Internet d'échanger, de manière interactive et en temps réel, avec d'autres utilisateurs. Cette
forme de conversation s'effectue soit textuellement (chat), soit avec images vidéos (webcam,
vidéoconférence) ou avec du son (audioconférence).
II.6 Journal personnel (Blog)
Le Blog (ou WeBlog) est un journal personnel en ligne qui permet à un internaute de
publier régulièrement des informations ou de commenter l'actualité sur un sujet.
Un journal de bord personnel sur internet permettant de publier facilement des actualités (les
Articles ou Notes ou Billets ou Postes dans la langue des blogueurs) sur un sujet, de les
Page 10
Programmation web 1
Chapitre I Généralités et notions de base
illustrer de façon multimédia (dessins, photos, vidéos, sons…) et de partager ses idées en
recueillant des commentaires sur ses articles.
II.7 Moteur de recherche et annuaire Web
Un moteur de recherche est un logiciel permettant de retrouver des ressources (pages
web, forums, images, vidéos, fichiers... etc.) associées à des mots quelconques (mots clés).
Certains sites web offrent un moteur de recherche comme principale fonctionnalité.
Il s'agit d'un outil de recherche sur le Web constitué de Robots, (appelés encore bots, spiders,
crawlers ou agents) qui parcourent régulièrement
les sites de façon automatique (sans
intervention humaine, ce qui les distingue des annuaires Web) pour découvrir de nouvelles
adresses (URL). Ils suivent les liens hypertextes (qui relient les pages les unes aux autres)
rencontrés sur chaque page atteinte.
Selon une étude réalisée en août 2007 :
Google : environ 60% des 61 milliards de recherches sur internet,
Yahoo : 8,5 milliards de recherches, soit 14% du total,
Baidu (le Google chinois) : 3,3 milliards de requêtes, soit 5,4% du total,
Bing (remplaçant de Live search de Microsoft) : 2,1 milliards de recherches,
3,4%.
Un annuaire Web (appelé
également
répertoire Web, annuaire Internet ou
répertoire Internet) est un site Web proposant une liste classée de sites Web. Le classement
se fait dans une arborescence de catégories, censée à couvrir
tout ou une partie des
centres d'intérêt des visiteurs.
III Principaux formats de fichiers
Publicité
L’utilisation, sur Internet, des composantes multimédia et
interactives ou d’extensions
logicielles nécessite plusieurs formats et standards de fichiers. Bien que plusieurs de ces composantes
s'intègrent de façon transparente aux pages Web, les utilisateurs d'Internet rencontrent souvent des
formats de fichiers qui peuvent nécessiter l'utilisation de logiciels particuliers.
Les fichiers d'ordinateurs sont de deux types : ASCII ou binaires. Les premiers sont constitués
de caractères qui
respectent
les codes ASCII
(American Standard Code for Information
Interchange), donc lisibles à l’écran facilement. Les fichiers binaires contiennent des informations
Page 11
Programmation web 1
Chapitre I Généralités et notions de base
codées directement en binaire (des 0 et des 1). Pour afficher ou exécuter un fichier binaire, il faut
utiliser un logiciel compatible avec celui qui l'a créé.
III.1 Les documents textes
HTML (HyperText Markup Language) [Type ASCII]. Utilisé pour la création des
pages Web.
PDF (Portable Document Format) [Type binaire]. Format du logiciel Acrobat
d’Adobe.
Très utilisé pour la diffusion de documents sur Internet.
XML (eXtensible Markup Language) [Type ASCII]. Il sert essentiellement à
stocker/transférer des données structurées en champs arborescents.
TXT [Type ASCII]. Par convention, on donne cette extension aux fichiers de texte
simple non formaté.
III.2 Les images
GIF (Graphics Interchange Format) [Type binaire]. Format assez compacts mais
limité à un maximum de 256 couleurs. Utilisé pour produire de petites images peu
texturées, des icônes, des boutons dans les pages Web, etc. Permet la transparence et les
images animées.
JPEG, JPG (Joint Photography Experts Group) [Type binaire]. Très fréquent sur
Internet, produit des fichiers très compacts grâce à son algorithme de compression
efficace mais qui provoque des pertes d'information. Utilisé pour produire des photos et
images texturées dans les pages Web.
PNG (Portable Network Graphics) [Type binaire]. Appelé à remplacer les formats
GIF et JPEG.
TIFF, TIF (Tagged Image File Format) [Type binaire]. Utilisé pour l'archivage
d'images de qualité. Utilise un algorithme de compression sans perte. Fichiers de
grandes dimensions.
III.3 Les fichiers audio
AIFF, AIF (Audio Interchange File Format) [Type binaire]. Relativement répandu
dans Internet.
Page 12
Programmation web 1
Chapitre I Généralités et notions de base
AU (Unix Audio sound file format) [Type binaire]. Développé pour Unix. Très
répandu dans Internet.
MID (Music Instrument Digital Interface) [Type binaire]. Norme pour transmettre des
informations musicales entre instruments électroniques et ordinateurs.
MP3 (Moving Pictures Expert Group)
[Type binaire]. Format public pour
la numérisation audio en haute fidélité (bonne qualité).
RA (RealAudio) [Type binaire]. Format propriétaire très ancien, il permet de diffuser
de la musique sur internet en utilisant la technique du streaming.
WMA, WAV (Waveform Audio File Format) [Type binaire]. Format utilisé par
Windows pour stocker des séquences sonores non compressées (WAV) ou multimédia
assez bien compressées (WMA).
III.4 Les fichiers vidéo
AVI (Audio Video Interleave movie) [Type binaire]. Format vidéo développé
par Microsoft.
MOV, QT (QuickTime Movie) [Type binaire]. Développé par Apple.Bonne
qualité d'image.
MPEG, MPG (Moving Pictures Expert Group) [Type binaire]. Un standard de
compression vidéo et audio très répandu dans Internet.
DivX [Type binaire], capable de compresser des fichiers vidéo volumineux en fichiers
plus légers.
IV Création d’un site Web
IV.1 Définition
Un site Internet ou Intranet d'informations reste avant tout une vitrine, un support. C'est
pour cela qu’il est considéré comme un important moyen de communication et
d'identification. La mise en place d'un site doit être étudiée de façon approfondie et ne peut
être abordée comme la rédaction d'un document classique. Il s'agit de rendre cohérent une
masse d'information et de la mettre à la disposition d'un panel hétérogène d'utilisateurs plus.
C'est pourquoi un intérêt tout particulier doit lui être porté, aussi bien au niveau du contenu
que de la présentation [3].
Page 13
Programmation web 1
Chapitre I Généralités et notions de base
Un site Internet se décompose " physiquement " en plusieurs éléments :
Un nom de domaine (une URL) accessible notamment par les moteurs de recherche
mais aussi par des sites partenaires et à travers différentes publications papier. C'est
pourquoi, l'adresse du type http://www.notresite.com doit être claire, courte et explicite.
Un ensemble de pages statiques et/ou dynamiques reliées entre elles par des liens. Ces
pages seront développées dans une technologie dépendante de l'objectif et du contenu
du site.
Les pages seront ensuite hébergées chez un prestataire ou en interne en fonction
notamment de la technologie utilisée, du volume du site, du trafic escompté, du budget
alloué.
IV.2 Objectifs et cible
Il est crucial de s'interroger sur la finalité du site car il doit répondre à un besoin et non pas
à une envie.
Définir l'objectif du site (complément d'un outil spécifique, sources d'informations,
portail, commerce en ligne, base de données...).
Quel est le public visé ? Est-ce un groupe d'amis, des personnes partageant les mêmes
idées ou de futurs clients ? Il faut donc ensuite cadrer le style : les informations doivent-
elles être pointues ou vulgarisées ?
Que sera l'environnement cible des visiteurs:
type de configuration (PC/Mac),
navigateur, outils disponibles (Pack office, décompresseur type Winzip, messagerie),
puissance des machines, performance et durée des connexions (l'accès à Internet se fait
il par modems ou via une ligne à haut débit ?).
IV.3 Les technologies utilisées
Une bonne connaissance du langage L'HTML s’avère indispensable pour créer des
pages Web. A savoir qu’il existe des éditeurs (WYSIWYG : What you see is what you
get), comme FrontPage, DreamWeaver, HTMLPad, Nvu…,qui nous assiste à la
création rapide des pages Web.
A savoir qu’il existe des systèmes de gestion de contenu « CMS » : est une famille
de logiciels destinés à la conception et à la mise à jour dynamique de site web ou
d'application multimédia.
Page 14
Programmation web 1
Chapitre I Généralités et notions de base
Compte rendu : menez une recherche sur les différents CMS du marché ainsi que leurs
fonctionnalités.
Publicité
JavaScript
/ DHTML (animation simple de texte,
interactivité réduite via des
formulaires).
Flash (animation graphique avancée) à réserver aux sites en Intranet ou dédiés au
graphisme.
Pages actives : il existe plusieurs technologies pour la création de pages actives (c'est
à dire capables de générer un contenu dynamique en fonction d'informations données
par le visiteur ou l'administrateur du site) : ASP, JSP, PHP et les CGIs avec PERL
associées à plusieurs SGBD (MYSQL, SQL Server, ACCESS, Oracle…).
IV.4 Présentation du site
La charte graphique et l'ergonomie d'un site sont deux points à ne pas négliger.
Obtenir la charte graphique existante et l'adapter pour une diffusion en ligne.
Créer et structurer une charte suivant les besoins énumérés.
Respecter les contraintes des services et les critères de communication de groupe
(disposition de logo, informations légales).
Savoir limiter le poids (en chargement) de la charte en fonction des objectifs et du
public visé.
Toute navigation doit être intuitive quel que soit
le média. A ce titre, nous
respecterons les règles d'usage d'accès aux informations à savoir : maximum 3 clics et 7
grandes
rubriques d'informations par page. Le contenu et
l'organisation des
informations du site devront donc s'y plier.
De quelle façon peut-on rappeler les principaux éléments et sections du site ? Par une
bannière horizontale, verticale, un arbre de navigation ?
Il est appréciable de disposer d'un plan du site afin de s'y retrouver.
Page 15
Programmation web 1
Chapitre I Généralités et notions de base
V Le référencement et la gestion
V.1 Le référencement Le référencement est une étape importante dans la création d'un site web, puisqu'il est inutile
de mettre en ligne un site fabuleux s'il n'est pas visible par le public. En effet,
le
référencement a pour mission de faire connaître le site à des moteurs de recherche et à
d’autres
Il existe deux types de référencement:
sites.
Le référencement automatique assuré par des "spiders" programme qui scrute les
pages d'un site en s'appuyant sur les balises META situées dans la balise d'en-tête de
page <HEAD> et la description des liens et des images.
Le référencement manuel, comme sur Yahoo, c’est le fait d’ajouter l’URL du site à la
liste d’URLs de ce moteur de recherche.
Il existe plusieurs façons de se référencer :
De manière gratuite.
De manière payante.
V.2 La gestion
Afin d'assurer la continuité du site, il est nécessaire de suivre son évolution, d'enrichir
son contenu et de corriger les éventuelles erreurs, c'est la tâche du webmaster.
Afin d'anticiper sur les modifications à apporter et de vérifier l'audience du site, nous
aurons recours à des outils statistiques. En effet, il est utile voir indispensable de quantifier et
qualifier le trafic du site. Ces outils sont soit fournis par l'hébergeur, ou bien disponibles
(même gratuitement) sur Internet, ils nous renseignent notamment sur :
La provenance des visiteurs (pays, site référant, moteur de recherche).
Les pages consultées, pendant combien de temps et à quelle heure.
Le nombre de visites, visiteurs et pages vues.
Page 16
Programmation web 1
Chapitre I Généralités et notions de base
Conclusion
L'objectif de cette première leçon est de donner une idée globale sur Internet et les
phénomènes qui en dérivent. Les définitions et la description des différentes étapes qui
ont marqué l'évolution du réseau mondial on été présentées au début, ensuite on a abordé
les différents services offerts par Internet et leurs utilisations, ainsi que les divers formats
de fichiers manipulés sur ce réseau.
Tout au long de cette leçon on a énuméré les éléments qui tournent autour d’un site
web, ainsi que les étapes à suivre avant de se lancer dans l’implémentation et le codage.
Aussi on a vu les technologies qu’on peut utiliser afin de concevoir et de développer notre
site, ainsi que les éléments de gestion et de référencement.
Nous allons passer à apprendre les outils permettant de créer et de programmer
des contenus pour le Web.
Page 17
CCHHAAPPIITTRREE IIII
LLeess bbaasseess dduu HHTTMMLL
PPrréé--rreeqquuiiss
- Notion du Web. - Les techniques de création d’un site Web.
OObbjjeeccttiiffss ggéénnéérraauuxx
Savoir concevoir un site web. Connaitre la syntaxe des principales balises du langage HTML.
PPllaann
Introduction.
II.. Le corps du document –body. IIII.. Les métas.
Conclusion.
Page 18
Programmation web 1
Chapitre II Les bases du HTML
Chapitre II : Les bases du HTML
Introduction
Le HTML (HyperText Markup Language) est le format de données conçus pour présenter
des pages web qui pouvant être lues par des navigateurs (Exp : Netscape, Internet Explorer, Mozilla
Firefox, Opera …).
C'est un langage de présentation de données, et non pas un langage de programmation. Il est
figé, c'est-à-dire qu'une fois le document chargé dans le navigateur, il ne répond à aucune action de
l'utilisateur sur le contenu de la page. Ce langage est pourvu d'un système de balisage (basé sur les
balises) qui va permettre de structurer les documents [4].
I Qu'est-ce qu'une balise HTML ?
Une balise HTML est un élément qui s’ajoute au texte de départ. La balise sera interprétée par
le navigateur, «dire au navigateur de quelle manière va afficher le texte », elle est toujours délimitée
par les signes « < » et « > ».
Une balise peut en plus comporter de zéro à plusieurs attributs. Les attributs sont des
informations
complémentaires
qui
la
caractérisent.
Ils
se
présentent
sous
la
forme
« nomattribut="valeur" ».