Page 1 à 6
Université Abdelhamid Mehri – Constantine 2 Cellule e-learning
2017-2018. Semestre 2
Informatique – Niveau 3
Informatique avancée
– Cours 5 –
Pages Web avec MS Expression Web 4 (1/4)
Introduction au Web
Staff pédagogique
Nom Grade Faculté/Institut Adresse e-mail
Chaouche Ahmed-Chawki MCB Nouvelles technologies [email protected] Mili Redha MAA Sciences économiques [email protected]
Etudiants concernés
Faculté/Institut Département Année Spécialité
Psychologie Psychologie Licence 2 Tronc commun
Sciences économiques Tous les départements Licence 2 Toutes les spécialités
Objectifs du cours 5
Comprendre les notions de bases du Web Assimiler l’interface de MS Expression Web Créer sa première page Web
Page 2 à 6 Le Web est le terme communément employé pour parler du World Wide Web, ou WWW. Il fait référence au système hypertexte fonctionnant sur le réseau informatique mondial Internet.
Par abus de langage, le Web désigne de façon plus large tout ce qui se rapproche à cet univers internet. On ne fait plus aujourd'hui la distinction technique entre ce que définit le Web et ce que définit Internet.
1. Histoire
Le Web a été inventé par Tim Berners-Lee et Robert Cailliau à la fin des années 1980, le Web se résume à cet outil qui permet la consultation, via un navigateur, de pages, de sites Internet (ou sites Web). Il ne représente qu'une partie de ce que comporte réellement Internet avec, notamment, les applications de courrier électronique et le partage de fichiers.
Il existe de nombreux termes et expressions rattachés au Web comme surfer sur le Web, audience, serveur http, navigateur web, moteur de recherche, blog, etc.
2. Différence entre Web et Internet
Pour bien comprendre le Web, il faut connaitre les términologies propres au Web. Nous allons voir les plus importantes.
Terme Signification Exemples/Remarques
En ligne connecté à un réseau, en l'occurrence
le réseau informatique Internet
Un hôte est un ordinateur en ligne
Une ressource du Web Une entité informatique accessible via internet.
texte, image, forum, boîte aux lettres électronique, etc.
HTTP
(HyperText Transfer Protocol)
est le protocole de communication HTTPS est la variante sécurisée de ce protocole.
Une URL
(Uniform Resource Locator)
pointe sur une ressource. Elle indique l’emplacement pour toute ressource du Web
http://elearning.univ- constantine2.dz/
HTML
(HyperText Markup Language)
un langage informatique permettant de décrire le contenu d'un document (titres, paragraphes, disposition des images, etc.) et d'y inclure des hyperliens
Un document HTML un document décrit avec le langage HTML
Un serveur Web
un hôte sur lequel fonctionne, un serveur HTTP (ou serveur Web), le logiciel qui répond aux requêtes d’un client
Page 3 à 6 Un navigateur Web un logiciel client HTTP conçu pour
accéder aux ressources du Web.
Google Chrome Mozilla Firefox Internet Explorer
Une page Web (ou page)
un document destiné à être consulté avec un navigateur Web.
Un éditeur HTML (ou éditeur Web)
un logiciel conçu pour faciliter l'écriture de documents HTML et de pages Web en général.
MS Expression Web Adobe Dreamweaver
…
Un site Web (ou site)
un ensemble de pages Web et
d'éventuelles autres ressources. Le site web de l’université
Visiter un site Web consulter ses pages Web
Une adresse Web une URL de page Web www.google.dz
Un hébergeur Web
une entreprise de services informatiques hébergeant (mettant en ligne) sur ses serveurs Web les ressources constituant les sites Web de ses clients.
« Djaweb » en algérie
Une agence Web une entreprise de services informatiques réalisant des sites Web pour ses clients.
Surfer sur le Web consulter le Web
Un annuaire Web un site Web répertoriant des sites Web.
Un service Web une technologie client-serveur basée sur les protocoles du Web.
Messagerie électronique Banque en ligne
Réservation de billets en ligne
Page 4 à 6
3. Microsoft Expression Web
Dans cette partie, nous apprenons l’application que nous utiliserons pour créer notre pemière page Web. Il s’agit de Microsoft Expression Web 4.0.
3.1. Créer un nouveau site Web
Pour créer notre site web, nous allons suivre les étapes suivantes :
1) Dans la barre de menu, cliquez sur Site puis choisissez sur New Site (Nouveau site)
2) Dans la boite de dialogue qui s’ouvre, donnez un nom à votre Site Web et choisissez : General One page web site,
Un emplacement pour l’enregistrer (Location)
Page 5 à 6 3) Le Site Web sera créé avec une seule page nommée default.html. Renommez la page en index.html en
cliquant sur le fichier avec le bouton droit .
3.2. Créer sa première page Web
Dans le cas où vous avez créé un Site Web vide. Suivez les étapes suivantes pour ajouter une première Page Web. Cette première page sera la page d’accueil de notre Site Web. MS Expression Web peut créer différentes types de page mais dans cette première partie de cours on créé uniquement une page HTML avec sa feuille de style CSS.
Définitions
HTML (HyperText Markup Language) est le format de données conçu pour élaborer les pages Web. C’est un langage de balisage permettant d’écrire de l’hypertexte (c-à-d. des liens) et d’inclure des ressources multimédias tels que des images et des formulaires de saisie. Il est souvent utilisé conjointement avec le langage de programmation JavaScript et des feuilles de style en cascade (CSS).
CSS (Cascading Style Sheet), est un langage qui décrit la présentation des documents HTML. Il permet d'insérer des styles sur une page HTML afin de gérer très précisément son design. Le principal avantage de CSS pour la mise en forme d'un site réside dans la possibilité de modifier tous les titres du site en une seule fois en modifiants une seule partie du fichier CSS.
Page 6 à 6 3.2.1. Créer une page Web vide
1) Cliquez sur : File New HTML,
2) Selon l’extension que vous avez choisie, un fichier Untitled_1.html sera créé mais pas enregistré, 3) Enregistrez le fichier sous le nom "index.html"
3.2.2. Créer une feuille de style CSS 1) Cliquez sur : File New CSS,
2) Donnez un nom à votre feuille de style CSS, par exemple "style.css", 3) Enregistrez votre feuille de style CSS.
3.2.3. Attacher la page HTML avec la feuille de style CSS
Pour finir le travail, il faudra attacher la page HTML et la feuille de style CSS ensemble. Il faut cliquez sur
"Attach Style Sheet..." dans l’onglet "Manage Styles".
Références du cours
Les étudiants peuvent consulter ces références pour approfondir leurs connaissances dans ce cours :
http://www.expression-templates.org/tutorials/expression-web-4-ver2-2.pdf
http://www.conseil-creation-web.fr/site-web-pour-quoi-faire/differents-types-sites-internet/
http://www.techno-science.net/?onglet=glossaire&definition=1395
Remarque
Sous MS Expression Web, les types de pages qui peuvent être créées sont : HTML (ou HTM), ASPX, ASP, PHP, CSS, Javascript, …
Remarque
MS expression Web sera abordé plus en détail dans les prochains cours.
