SlideShare une entreprise Scribd logo
Création d’un site web2017
Création d’un site
web
Jihen damerji toumi
Notion de site web
Est un ensemble de fichiers HTML,
liés par des liens hypertextes,
stockés sur un serveur web, c'est-à-
dire un ordinateur connecté en
permanence à internet, hébergeant
les pages web.
1. En éditant les fichiers HTML « à la main », c'est-à-
dire en saisissant le code HTML dans un fichier texte à
l'aide d'un simple éditeur de texte.
2. En Utilisant un éditeur HTML WYSIWYG (What You
See Is What You Get,): Il s'agit d'un logiciel
(exemple:Dreamweaver,Nvu,FrontPage,etc)
permettant de créer des pages web visuellement en
plaçant des objets et des contrôles. Le logiciel se
charge de générer le code HTML automatiquement
Il existe deux façons de créer ce type de
fichier :
Démarrage de Microsoft FrontPage
Lancer Microsoft FrontPage
Une page vide se lance automatiquement
Commencer l’insertion des informations.
Trois onglets sont sur le bord inférieur :
• NORMAL : Mode création pour insérer les informations avec divers
formats.
• HTML: Hypertext Markup Language : Langage de commandes
permettant d’inclure des attributs de texte, d’insérer des
différents formats d’information et des liens dans un document
Web.
• APERCU : Active un mode d’affichage qui présente la page sous un
aspect identique à celui qu’elle aurait dans le navigateur.
Activité:3P116
Activité:3P116 q1
1. Enregistrement
1)Menu Fichier.
2)Ouvrir le chemin d’accès de l’emplacement où on va
créer le dossier qui va contenir les pages à créer.
3)Créer le dossier avec le bouton Nouveau Dossier puis
(taper son nom)
4)Ouvrir le nouveau dossier dans le champs ‘ Dans : ‘
5)Saisir le nom de la page.
6)Cliquer sur le bouton ‘Enregistrer’
Activité:3P116 q2
2. Mise en forme d’un texte ou d’un paragraphe
1)Sélectionner le texte ou le paragraphe à mettre en forme
2)Appliquer un style (Gras, Italique, Souligné) ou un
alignement.
3)Agrandir ou rétrécir (éventuellement) la taille du texte
Ou
Cliquer le Menu FORMAT et choisir l’option POLICE
Activité:3P116 q3
3. Insertion d’une image :
1)se positionner à l’endroit d’insertion
2)cliquer dans la barre de menu sur Insertion.
3)cliquer sur Images (a partir du fichier/image
clipArt)
4)indiquer le chemin de recherche de l’image (disque
dur, Disquette)
5)valider l’insertion de l’image en cliquant sur Insérer.
4. Insertion d’un fichier :
1)se positionner à l’endroit d’insertion
2)cliquer dans la barre de menu sur Insertion.
3)cliquer sur fichier
4)indiquer le chemin de recherche de fichier (disque dur,
Disquette etc) ainsi que le type du fichier à insérer
5)valider l’insertion du fichier en cliquant sur ouvrir après
avoir sélectionner le nom du fichier.
5. Insertion d’un symbole :
Activité:3P116 q4
6.Insertion d'une ligne horizontal:
1)se positionner à l’endroit d’insertion
2)cliquer dans la barre de menu sur Insertion puis
choisisser la commande trait horizontal.
Activité:3P116 q5
7.Insertion d'un tableau:
1)Se positionner à l’endroit d’insertion
2)cliquer dans la barre de menu sur
Tableau.
3)cliquer sur Insérer.
4)Spécifier le nombre de lignes et de
colonnes.
5)Spécifier l'alignement, bordures et la
taille (en pourcentage ou en pixels).
Activité:3P116 q6
8.Listes numérotées et puces:
1)Sélectionner le texte ou le paragraphe à mettre sous
forme d’une liste
2)Activer le menu format puis la commande puces et
numéro
3)Choisir le type de la liste(numérotation ou puces)
Activité:3P116 q8
9.Insertion d’une couleur,
image ou thème d’Arrière Plan :
1)Cliquer dans le menu Format.
2)Choisir l’option Thème ou Arrière Plan.
3)Choisir un thème dans la liste des thèmes
affichés, dans l’autre cas choisir une couleur
dans la liste des couleurs ou une image
d’Arrière Plan en indiquant le chemin d’accès
du fichier image.
Activité:3P116 q9;10;11;12;13
10. Insertion d’un lien hypertexte :
Un lien hypertexte est une marque spéciale
représentant une URL d’une page Web cible qui
s’affiche en cliquant sur ce lien.
Les liens sont deux types : internes ou externes par
rapport à la page actuelle.
A. insertion d’un lien hypertexte
externe:
1)Sélectionner le texte du lien
2)Cliquer Menu Insertion puis l’option Lien hypertexte.
3)Choisir le fichier qui sera la cible du lien ou saisir url
s il s'agit d »un site web
Activité:3P116 q14
B. Lien interne:
1ere étape : Insertion d’un signet
1)Sélectionner le mot du signet
2)Cliquer Menu Insertion puis l’option Signet.
3)Dans la boite de dialogue qui s’affiche spécifier le nom
du signet.
4)Cliquer OK pour qu’il s’ajoute à la liste.
1)Sélectionner le texte ou
l’objet (marqueur du lien
qui peut être une image
ou un graphique comme
un bouton) du lien
2)Cliquer Menu Insertion puis l’option Lien hypertexte.
4)Dans la boite de dialogue choisir le signet correspondant
dans le champs Signet et confirmer dans le champs des
signets.
5)Cliquer Ok.
2ere étape : Liens internes vers le
signets :
11. Insertion d'un texte défilant:
• Se positionner à l’emplacement d’insertion
• Cliquer Menu Insertion puis l’option
Composant Web.
• Choisir dans la fenêtre effets dynamique
l'option texte défilant.
• Saisir le texte et appuyer sur OK.
12,Insertion d'un bouton sensitif:
• Se positionner à l’emplacement d’insertion
• Cliquer Menu Insertion puis l’option bouton interactif.
Saisir le texte du bouton
13.Transition de page
1.Choisir le menu format
2.Choisir la commande transition de page
3. Sélectionner un effet de transition
4.Sélectionner un événement
5.Choisir la durée
14.Bordure et trame:
choisir le menu format+ la commande bordure
et trame
Création d’un site web2017
Création d’un site web2017
Création d’un site web2017
Création d’un site web2017

Contenu connexe

Similaire à Création d’un site web2017

Documentation utilisateur media wall (2)
Documentation utilisateur media wall (2)Documentation utilisateur media wall (2)
Documentation utilisateur media wall (2)
gmert
 
Cours informatique éléments de présentation - 8ème
Cours  informatique éléments de présentation - 8èmeCours  informatique éléments de présentation - 8ème
Cours informatique éléments de présentation - 8ème
Tunisie collège
 
Utiliser site SPIP
Utiliser site SPIPUtiliser site SPIP
Utiliser site SPIP
Polidoro F.
 
C2i Web
C2i WebC2i Web
C2i Web
c2i
 
Formation WordPress médiathèque Mauguio (mai 2017)
Formation WordPress médiathèque Mauguio (mai 2017)Formation WordPress médiathèque Mauguio (mai 2017)
Formation WordPress médiathèque Mauguio (mai 2017)
Médiathèque Gaston Baissette à Mauguio
 
Utilisation slideshare2010
Utilisation slideshare2010Utilisation slideshare2010
Utilisation slideshare2010
Polidoro F.
 
Procédurier_Eklablog
Procédurier_EklablogProcédurier_Eklablog
Procédurier_Eklablog
UQAR
 
Formation wordpress
Formation wordpressFormation wordpress
Etre rédacteur d’un site spip
Etre rédacteur d’un site spipEtre rédacteur d’un site spip
Etre rédacteur d’un site spip
Collège Assomption
 
WebSchool Orléans Faire De La VidéO Sur Son Blog
WebSchool Orléans Faire De La VidéO Sur Son BlogWebSchool Orléans Faire De La VidéO Sur Son Blog
WebSchool Orléans Faire De La VidéO Sur Son Blog
WebSchool Orléans
 
Utiliser WordPress
Utiliser WordPressUtiliser WordPress
Utiliser WordPress
Daniel GUEYSSET
 
hassclic284.ppt
hassclic284.ppthassclic284.ppt
hassclic284.ppt
ABDENNACEURGHANDRI1
 
WordPress Bases e-learning
WordPress Bases e-learningWordPress Bases e-learning
WordPress Bases e-learning
Antonio Soto
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
RihabBENLAMINE
 
Créer un nouvel article www.sadcao.com
Créer un nouvel article www.sadcao.comCréer un nouvel article www.sadcao.com
Créer un nouvel article www.sadcao.com
SADC d'Abitibi-Ouest
 
Diffuser son information sur Mediaterre
Diffuser son information sur MediaterreDiffuser son information sur Mediaterre
Diffuser son information sur Mediaterre
madebyjay
 
Prise en main de Dreamweaver
Prise en main de DreamweaverPrise en main de Dreamweaver
Prise en main de Dreamweaver
Abdoulaye Dieng
 
Tp slideshare
Tp slideshareTp slideshare
Tp slideshare
stage1doc
 
Insérer une image et un lien dans un article de blog
Insérer une image et un lien dans un article de blogInsérer une image et un lien dans un article de blog
Insérer une image et un lien dans un article de blog
Bibliolab
 
Formation html5 css3 java script
Formation html5 css3 java scriptFormation html5 css3 java script
Formation html5 css3 java script
Arrow Group
 

Similaire à Création d’un site web2017 (20)

Documentation utilisateur media wall (2)
Documentation utilisateur media wall (2)Documentation utilisateur media wall (2)
Documentation utilisateur media wall (2)
 
Cours informatique éléments de présentation - 8ème
Cours  informatique éléments de présentation - 8èmeCours  informatique éléments de présentation - 8ème
Cours informatique éléments de présentation - 8ème
 
Utiliser site SPIP
Utiliser site SPIPUtiliser site SPIP
Utiliser site SPIP
 
C2i Web
C2i WebC2i Web
C2i Web
 
Formation WordPress médiathèque Mauguio (mai 2017)
Formation WordPress médiathèque Mauguio (mai 2017)Formation WordPress médiathèque Mauguio (mai 2017)
Formation WordPress médiathèque Mauguio (mai 2017)
 
Utilisation slideshare2010
Utilisation slideshare2010Utilisation slideshare2010
Utilisation slideshare2010
 
Procédurier_Eklablog
Procédurier_EklablogProcédurier_Eklablog
Procédurier_Eklablog
 
Formation wordpress
Formation wordpressFormation wordpress
Formation wordpress
 
Etre rédacteur d’un site spip
Etre rédacteur d’un site spipEtre rédacteur d’un site spip
Etre rédacteur d’un site spip
 
WebSchool Orléans Faire De La VidéO Sur Son Blog
WebSchool Orléans Faire De La VidéO Sur Son BlogWebSchool Orléans Faire De La VidéO Sur Son Blog
WebSchool Orléans Faire De La VidéO Sur Son Blog
 
Utiliser WordPress
Utiliser WordPressUtiliser WordPress
Utiliser WordPress
 
hassclic284.ppt
hassclic284.ppthassclic284.ppt
hassclic284.ppt
 
WordPress Bases e-learning
WordPress Bases e-learningWordPress Bases e-learning
WordPress Bases e-learning
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
 
Créer un nouvel article www.sadcao.com
Créer un nouvel article www.sadcao.comCréer un nouvel article www.sadcao.com
Créer un nouvel article www.sadcao.com
 
Diffuser son information sur Mediaterre
Diffuser son information sur MediaterreDiffuser son information sur Mediaterre
Diffuser son information sur Mediaterre
 
Prise en main de Dreamweaver
Prise en main de DreamweaverPrise en main de Dreamweaver
Prise en main de Dreamweaver
 
Tp slideshare
Tp slideshareTp slideshare
Tp slideshare
 
Insérer une image et un lien dans un article de blog
Insérer une image et un lien dans un article de blogInsérer une image et un lien dans un article de blog
Insérer une image et un lien dans un article de blog
 
Formation html5 css3 java script
Formation html5 css3 java scriptFormation html5 css3 java script
Formation html5 css3 java script
 

Plus de jihen damerji

filter result.pptx
filter result.pptxfilter result.pptx
filter result.pptx
jihen damerji
 
Nabheni high school Tunisia
Nabheni high school TunisiaNabheni high school Tunisia
Nabheni high school Tunisia
jihen damerji
 
Formation mail
Formation mail Formation mail
Formation mail
jihen damerji
 
How to manage twinspace
How to manage twinspace How to manage twinspace
How to manage twinspace
jihen damerji
 
Activité collaboratives de création de projet
Activité collaboratives de création de projet Activité collaboratives de création de projet
Activité collaboratives de création de projet
jihen damerji
 
Formation face to face 1 (eTwinning)
Formation face to face 1 (eTwinning)Formation face to face 1 (eTwinning)
Formation face to face 1 (eTwinning)
jihen damerji
 
Comment réussir un projet eTwinning
Comment réussir un projet eTwinningComment réussir un projet eTwinning
Comment réussir un projet eTwinning
jihen damerji
 
Our countries between history and the future: the dream has no limit
Our countries between history and the future: the dream has no limitOur countries between history and the future: the dream has no limit
Our countries between history and the future: the dream has no limit
jihen damerji
 
Etwinning : création de projet
Etwinning : création de projetEtwinning : création de projet
Etwinning : création de projet
jihen damerji
 
Python
PythonPython
Compétences Clés du 21ème siècle
Compétences Clés du 21ème siècleCompétences Clés du 21ème siècle
Compétences Clés du 21ème siècle
jihen damerji
 
europ hours of code: lbn presentation
europ hours of code: lbn presentationeurop hours of code: lbn presentation
europ hours of code: lbn presentation
jihen damerji
 
Les algorithmes de recherche2017i
Les algorithmes de recherche2017iLes algorithmes de recherche2017i
Les algorithmes de recherche2017i
jihen damerji
 
Introduction a la vidéo numérique
Introduction a la vidéo numériqueIntroduction a la vidéo numérique
Introduction a la vidéo numérique
jihen damerji
 
Tableuravancé2017
Tableuravancé2017Tableuravancé2017
Tableuravancé2017
jihen damerji
 
un système d’exploitation
un système d’exploitationun système d’exploitation
un système d’exploitation
jihen damerji
 
Flash: les variables
Flash: les variablesFlash: les variables
Flash: les variables
jihen damerji
 
scratch
scratchscratch
scratch
jihen damerji
 
Blogger
BloggerBlogger
Blogger
jihen damerji
 
Reseau et multimedia2009
Reseau et multimedia2009Reseau et multimedia2009
Reseau et multimedia2009
jihen damerji
 

Plus de jihen damerji (20)

filter result.pptx
filter result.pptxfilter result.pptx
filter result.pptx
 
Nabheni high school Tunisia
Nabheni high school TunisiaNabheni high school Tunisia
Nabheni high school Tunisia
 
Formation mail
Formation mail Formation mail
Formation mail
 
How to manage twinspace
How to manage twinspace How to manage twinspace
How to manage twinspace
 
Activité collaboratives de création de projet
Activité collaboratives de création de projet Activité collaboratives de création de projet
Activité collaboratives de création de projet
 
Formation face to face 1 (eTwinning)
Formation face to face 1 (eTwinning)Formation face to face 1 (eTwinning)
Formation face to face 1 (eTwinning)
 
Comment réussir un projet eTwinning
Comment réussir un projet eTwinningComment réussir un projet eTwinning
Comment réussir un projet eTwinning
 
Our countries between history and the future: the dream has no limit
Our countries between history and the future: the dream has no limitOur countries between history and the future: the dream has no limit
Our countries between history and the future: the dream has no limit
 
Etwinning : création de projet
Etwinning : création de projetEtwinning : création de projet
Etwinning : création de projet
 
Python
PythonPython
Python
 
Compétences Clés du 21ème siècle
Compétences Clés du 21ème siècleCompétences Clés du 21ème siècle
Compétences Clés du 21ème siècle
 
europ hours of code: lbn presentation
europ hours of code: lbn presentationeurop hours of code: lbn presentation
europ hours of code: lbn presentation
 
Les algorithmes de recherche2017i
Les algorithmes de recherche2017iLes algorithmes de recherche2017i
Les algorithmes de recherche2017i
 
Introduction a la vidéo numérique
Introduction a la vidéo numériqueIntroduction a la vidéo numérique
Introduction a la vidéo numérique
 
Tableuravancé2017
Tableuravancé2017Tableuravancé2017
Tableuravancé2017
 
un système d’exploitation
un système d’exploitationun système d’exploitation
un système d’exploitation
 
Flash: les variables
Flash: les variablesFlash: les variables
Flash: les variables
 
scratch
scratchscratch
scratch
 
Blogger
BloggerBlogger
Blogger
 
Reseau et multimedia2009
Reseau et multimedia2009Reseau et multimedia2009
Reseau et multimedia2009
 

Création d’un site web2017

  • 3. Notion de site web Est un ensemble de fichiers HTML, liés par des liens hypertextes, stockés sur un serveur web, c'est-à- dire un ordinateur connecté en permanence à internet, hébergeant les pages web.
  • 4. 1. En éditant les fichiers HTML « à la main », c'est-à- dire en saisissant le code HTML dans un fichier texte à l'aide d'un simple éditeur de texte. 2. En Utilisant un éditeur HTML WYSIWYG (What You See Is What You Get,): Il s'agit d'un logiciel (exemple:Dreamweaver,Nvu,FrontPage,etc) permettant de créer des pages web visuellement en plaçant des objets et des contrôles. Le logiciel se charge de générer le code HTML automatiquement Il existe deux façons de créer ce type de fichier :
  • 5. Démarrage de Microsoft FrontPage Lancer Microsoft FrontPage Une page vide se lance automatiquement Commencer l’insertion des informations.
  • 6. Trois onglets sont sur le bord inférieur : • NORMAL : Mode création pour insérer les informations avec divers formats. • HTML: Hypertext Markup Language : Langage de commandes permettant d’inclure des attributs de texte, d’insérer des différents formats d’information et des liens dans un document Web. • APERCU : Active un mode d’affichage qui présente la page sous un aspect identique à celui qu’elle aurait dans le navigateur.
  • 8. Activité:3P116 q1 1. Enregistrement 1)Menu Fichier. 2)Ouvrir le chemin d’accès de l’emplacement où on va créer le dossier qui va contenir les pages à créer. 3)Créer le dossier avec le bouton Nouveau Dossier puis (taper son nom) 4)Ouvrir le nouveau dossier dans le champs ‘ Dans : ‘ 5)Saisir le nom de la page. 6)Cliquer sur le bouton ‘Enregistrer’
  • 9. Activité:3P116 q2 2. Mise en forme d’un texte ou d’un paragraphe 1)Sélectionner le texte ou le paragraphe à mettre en forme 2)Appliquer un style (Gras, Italique, Souligné) ou un alignement. 3)Agrandir ou rétrécir (éventuellement) la taille du texte Ou Cliquer le Menu FORMAT et choisir l’option POLICE
  • 11. 1)se positionner à l’endroit d’insertion 2)cliquer dans la barre de menu sur Insertion. 3)cliquer sur Images (a partir du fichier/image clipArt) 4)indiquer le chemin de recherche de l’image (disque dur, Disquette) 5)valider l’insertion de l’image en cliquant sur Insérer.
  • 12. 4. Insertion d’un fichier : 1)se positionner à l’endroit d’insertion 2)cliquer dans la barre de menu sur Insertion. 3)cliquer sur fichier 4)indiquer le chemin de recherche de fichier (disque dur, Disquette etc) ainsi que le type du fichier à insérer 5)valider l’insertion du fichier en cliquant sur ouvrir après avoir sélectionner le nom du fichier.
  • 13. 5. Insertion d’un symbole :
  • 14. Activité:3P116 q4 6.Insertion d'une ligne horizontal: 1)se positionner à l’endroit d’insertion 2)cliquer dans la barre de menu sur Insertion puis choisisser la commande trait horizontal.
  • 15. Activité:3P116 q5 7.Insertion d'un tableau: 1)Se positionner à l’endroit d’insertion 2)cliquer dans la barre de menu sur Tableau. 3)cliquer sur Insérer. 4)Spécifier le nombre de lignes et de colonnes. 5)Spécifier l'alignement, bordures et la taille (en pourcentage ou en pixels).
  • 16. Activité:3P116 q6 8.Listes numérotées et puces: 1)Sélectionner le texte ou le paragraphe à mettre sous forme d’une liste 2)Activer le menu format puis la commande puces et numéro 3)Choisir le type de la liste(numérotation ou puces)
  • 17. Activité:3P116 q8 9.Insertion d’une couleur, image ou thème d’Arrière Plan : 1)Cliquer dans le menu Format. 2)Choisir l’option Thème ou Arrière Plan. 3)Choisir un thème dans la liste des thèmes affichés, dans l’autre cas choisir une couleur dans la liste des couleurs ou une image d’Arrière Plan en indiquant le chemin d’accès du fichier image.
  • 18. Activité:3P116 q9;10;11;12;13 10. Insertion d’un lien hypertexte : Un lien hypertexte est une marque spéciale représentant une URL d’une page Web cible qui s’affiche en cliquant sur ce lien. Les liens sont deux types : internes ou externes par rapport à la page actuelle.
  • 19. A. insertion d’un lien hypertexte externe: 1)Sélectionner le texte du lien 2)Cliquer Menu Insertion puis l’option Lien hypertexte. 3)Choisir le fichier qui sera la cible du lien ou saisir url s il s'agit d »un site web
  • 20. Activité:3P116 q14 B. Lien interne: 1ere étape : Insertion d’un signet 1)Sélectionner le mot du signet 2)Cliquer Menu Insertion puis l’option Signet. 3)Dans la boite de dialogue qui s’affiche spécifier le nom du signet. 4)Cliquer OK pour qu’il s’ajoute à la liste.
  • 21. 1)Sélectionner le texte ou l’objet (marqueur du lien qui peut être une image ou un graphique comme un bouton) du lien 2)Cliquer Menu Insertion puis l’option Lien hypertexte. 4)Dans la boite de dialogue choisir le signet correspondant dans le champs Signet et confirmer dans le champs des signets. 5)Cliquer Ok. 2ere étape : Liens internes vers le signets :
  • 22. 11. Insertion d'un texte défilant:
  • 23. • Se positionner à l’emplacement d’insertion • Cliquer Menu Insertion puis l’option Composant Web. • Choisir dans la fenêtre effets dynamique l'option texte défilant. • Saisir le texte et appuyer sur OK.
  • 24. 12,Insertion d'un bouton sensitif: • Se positionner à l’emplacement d’insertion • Cliquer Menu Insertion puis l’option bouton interactif. Saisir le texte du bouton
  • 25. 13.Transition de page 1.Choisir le menu format 2.Choisir la commande transition de page 3. Sélectionner un effet de transition 4.Sélectionner un événement 5.Choisir la durée
  • 26. 14.Bordure et trame: choisir le menu format+ la commande bordure et trame

Notes de l'éditeur

  1. La réalisation du site concerne la création des pages web . La création des pages web consiste à créer des fichiers HTML
  2. Un signet, est un mot clé qui sera l’adresse cible d’un ou plusieurs mots (ou tout autre objet : image, vidéo…) servant de point de chute aux liens y faisant référence. Un signet permet de se déplacer à l’intérieur d’une même page contenant une grande quantité d’informations au lieu d’utiliser les barres de défilement (ascenseurs).