Créez et mettez en ligne votre 1e page web

P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
Les sociétés, marques cités dans ce document doivent être regardés comme appartenant à leurs propriétaires respectifs. Les produits et services cités dans ce document le sont à titre d'exemple.
NetPresta consent à l'utilisateur à reproduire entièrement ou partiellement cette présentation dans le cadre d'un usage strictement personnel, privé et non collectif. Toute mise en réseau
rediffusion ou commercialisation totale ou partielle de ce contenu, auprès de tiers, sous quelque forme que ce soit est strictement interdite, sans autorisation préalable et écrite de NetPresta.
Bonjour
à tous
Atelier : Créez et mettez en ligne votre première page web
1 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
Passage de relai ancienne nouvelle équipe
Présentation de la nouvelle formule WST
Quelques mots de vocabulaire lié au web
Atelier : Création d'une page web
Mettre en ligne : Conseils et choix
Planning de cet atelier
2 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
Et vous ?
Esprit plutôt Entrepreneur ou salarié ?
Qui a une phablette ?
Avez-vous déjà programmé une boucle ?
Qui connait l'acronyme W3C ?
Qui connaît le rôle d'Apache ? (pas l'indien ;)
3 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
Internet, Réseaux et
serveurs
Ordina
teurs
Algorithmes
Télépho
nes
Program
mation WebDesign Bureautique
. . .
Où se situe le Web dans
l'informatique ?
4 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
FTP : Transfert
de fichiers
DHCP : lien entre
PC (adresse IP)
Protocoles IMAP
SMTP / POP
Protocoles IRC
messagerie
instantanée
Protocole HTTP :
World Wide Web
(sites Web)
DNS : lien entre
IP et URL
217.70.180.152 =
http://netpresta.fr
Internet ou Web :
Quelle différence ?
5 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
La diversité du Web
Pourriez-vous citer les différents types de site web ?
-
-
-
-
-
-
6 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
Site institution, portail Site e-commerce Chaîne Vidéo Tutoriels, Wiki, forum
Réseau social Annuaire Site éditorial
etc …
La diversité du Web
7 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
Les outils web de la
transformation numérique
8 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
Web : Les principales dates
1989 : Idée d'un système hypertexte sur
le réseau informatique du CERN par
Tim Berners-Lee. concepts URL, HTML, HTTP
1993 : Interface graphique intégrant images
aux textes dans un nouveau navigateur
"NCSA Mosaic" => Netscape
1998 : Débuts de Google
2001 : Web 2.0 avec les début de Wikipedia
2004 : Facebook
2012 : HTML 5 normalisé par le W3C
9 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
10 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
Web : un vocabulaire
spécifique
11 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
Exemples de langages Exemples d'outils
de création
Web : De la création …
12 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
World Wide Web ( Toile d'araignée mondiale )
Système de pages
statiques ou dynamiques publiques
reliées par des liens hypertexte
fonctionnant sur Internet.
Web : Définition
13 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
Serveur
d'application
ex: PHP
1 2
3
4 5
6
7
8
9
serveurs
DNS (ndd)
Serveur http.
Ex :
Apache
Niveau 0
Serveur ou Serveurs Web ?
14 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
HTML : Qui suis-je
Ses amis
Il est souvent utilisé conjointement à d'autres langages :
- CSS : Langage des formats de présentation
- JS : Langage de script améliorant l'ergonomie
- PHP : Langage de programmation permettant
d'interroger des bases présentes sur
un autre serveur.
Définition
De l'anglais HyperText Markup Langage.
Le HTML est un langage de description
de page matérialisé par des balises.
15 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
16 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
Pour accéder ou sauvegarder les fichiers
du site web
a. (Sous Windows) Ouvrir "explorer" de
fichier
b. Les fichiers du site web sont stockés dans
le répertoire :
c: xampp htdocs cnam mon_site.php
Exploration fichiers / Navigation site
Pour naviguer sur votre site web local
1. Lancer la console XAMPP Control Panel.
2. Clic sur le bouton "Start" en face de Apache
3. Clic sur le bouton "Start" en face de MySQL
4. Ouvrir un navigateur internet
5. Dans la barre d'adresse des url, saisir :
http:// localhost / cnam / mon_site.php
Modifier / Voir
17 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
HTML : Les composants
<p> texte </p>
Ouverture de la balise
double
Elle permet de définir le début d'une
information. Elle n'est pas affichée
sur la page web dans le navigateur.
Fermeture de la
balise double
Elle permet de définir la fin
d'une information.
Texte
C'est la partie affichée sur le
site web (en général).
Exemple 1 :
Balise "double"
18 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
(suite)
<img src = 'image.jpg' alt = 'chat noir' />
<img
ouverture
et type de
la balise
src
propriété du
1e attribut
de la balise img
chat
1e valeur de
la propriété alt
Exemple 2 : Balise "simple" />
fermeture de la
balise simple
alt
propriété
du 2e attribut
1e attribut 2e attribut
image.jpg
valeur de la
propriété src
du 1e attribut
de la balise <img> noir
2e valeur de
la propriété alt
19 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
<p> , <div>
<h1>, <h2>, <h3>
<form>, <section>
<ul> <li>…</li> </ul>
<br/>, <hr/>
<img />
<a>
<strong>, <em>
<span>
Des balises de type :
"BLOC"
HTML : Les 2 types de balises
dans le corps du document
Des balises de type :
"En Ligne"
(suite)
20 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
HTML : Imbrication de 2 balises
<div> un bloc </div>
2 balises séparées
<strong> important </strong>
2 balises imbriquées
<div> un bloc <strong> important </strong> </div>
< … >
balises ouvrantes </ … >
balises fermantes
ouverture
1e balise
ouverture
2e balise
fermeture
2e balise
fermeture
1e balise
(suite)
21 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
SavoirLiens hypertextes
<a href="contact.html" > Nous contacter </a>
Différentes utilisations des liens ?
- Menu de navigation.
- Lien sur un mot dirigeant vers une autre page avec sa définition précise.
- Vers un endroit dans une autre page.
- Pour ouvrir un nouvel onglet dans le navigateur (Ex: Autre site web.)
- Lien sur une image ou un icône.
- Lien ouvrant un message vers l'email d'un destinataire.
- Transmission de paramètres pour personnaliser un affichage.
Destination
Affiché sur la page
(suite)
22 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
Les commentaires de code


balise de fin
d'un commentaire
Utilité
Les commentaires sont TRES importants. Ils servent à :
- Expliquer une / plusieurs lignes de son code.
- Séparer les différentes parties de son code.
Ils facilitent la maintenance et la relecture du code par un tiers.
Ils ne servent qu'aux développeurs (Ne sont pas affichés dans le navigateur).
(suite)
23 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
HTML : pour les accents
<meta charset="UTF-8"
A placer avant le reste du code
/>
fermeture de la
balise simple
<head>
</head>
(suite)
24 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
: Structure minimum
<!DOCTYPE html>
<html>
<head>
<title> Onglet </title>
</head>
<body>
Mon texte.
</body>
</html>
25 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
URL (adresse web)Favicon
(image)
Title (onglet)
h1
(titre page)
Meta Description (résumé)
h2
(sous-titre)
liens
navigation
(menu)
Mots en gras <strong>
Liens internes
Image
Texte
Widget réseaux sociaux
(liens externes)
Page WEB : Les éléments
26 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
27 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
Choix d'un nom de domaine (critères)
Parlant : Correspondre à votre activité ou votre marque ou vos produits.
Pas trop long et pas trop compliqué : facile à retenir.
Orthographe simple, trait d'unions possible.
Doit parler à vos clients (éventuellement étrangers).
Extension (TLD) : en fonction de votre activité .com .fr .net .info .org .xyz …
Vérifier si le NDD existe déjà ou pas (dans différentes extensions) :
Chez votre registrar ou par exemple sur http://domaine.fr/
Réserver plusieurs extensions : pour éviter un concurrent mal intentionné ou un homonyme.
Nom de Domaine (NDD)
28 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
Réservation d'un NDD chez un registrar
Je vous propose http://www.hostinger.fr
Procédure
1. Création d'un compte : clic en haut à droite "Créer un compte"
2. Remplir le formulaire + clic sur "Créer un compte"
3. Dans votre messagerie, dans le message reçu,
clic sur le lien pour activer le profil
4. Clic sur ce lien : https://cpanel.hostinger.fr/order/domains-list
5. Clic sur "Enregistrer un nouveau domaine"
6. Vérifier la disponibilité du NDD choisi (extension .xyz à 0.89€ / 1 an)
7. Dès que vous avez trouvé un NDD libre, clic sur continuer (bleu)
8. Remplir le formulaire pour louer votre NDD au près des instances internationales.
9. Clic sur continuer + clic sur commander à 0.89 € pour un an (pas de réduction).
10. Clic sur "Payer la facture".
11. Vérifier connexion sécurisée + Rentrer vos coordonnées payement Paypal + Valider.
Félicitations, vous êtes l'heureux locataire d'un nom de domaine.
Il sera actif d'ici moins de 24h.
Hébergement (Hosting)
29 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
Choix d'un hébergeur (critères techniques)
Stockage : Taille en Go disponible pour l'hébergement de votre(vos) site(s).
Dédié ou mutualisé : Dépend de du besoin et de votre compétence.
Bande passante : En fonction du contenu de votre site et de la fréquentation prévue.
Mémoire processeur dédiée : Pour nombre de connexion simultanées.
Cache : Pour rapidité d'accès aux pages.
BDD : Taille et nb. autorisées
Possibilités de multi-site, multi-domaines : Dépend du besoin.
Connexion SSH, certificat SSL : Pour des connexions sécurisé (Projet site e-commerce)
Langages supportés, version PHP / GIT : besoins spécifiques / maintenance.
Proximité géographique des serveurs : Temps de réactivité des requêtes HTTP.
Serveurs redondants sur plusieurs continents : en cas de panne sur un serveur.
Disponibilité du service d'hébergement : dépend de leur réactivité et moyens mis en œuvre
Sécurité : Met en œuvre suffisamment de mesures pour limiter les attaques externes
30 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
Inscription chez un hébergeur
Je vous propose http://www.hostinger.fr
Procédure :
1. Créer un compte chez http://hostinger.fr (si pas déjà fait pour le NDD)
2. Clic sur https://cpanel.hostinger.fr/
3. Clic sur "Nouvel Hébergement" (lien bleu)
4. Clic sur "Commander" un plan d'hébergement "gratuit" à 0.00 €
5. clic sur "Sous domaine" (en bleu) => "Domaine" apparaît en Vert
6. Saisir votre NDD (Ex. : netpresta.xyz)
7. Région du serveur : Europe
8. Choisir votre mot de passe serveur + Continuer
9. Confirmer la commande
Félicitations, Vous êtes l'heureux locataire d'un espace d'hébergement.
Cliquer sur votre nom de domaine + clic sur "Gérer" :
Vous accéder au C-panel (Panneau de configuration de votre hébergement).
Section "Comptes", cliquez sur "Info", vous obtiendrez toutes les infos utiles ultérieurement
31 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
Déposer Vos fichiers sur l'espace d'hébergement
Pour l'exemple sur Hostinger http://www.hostinger.fr
Procédure :
1. Se connecter à son compte Hostinger (si pas déjà fait) : https://cpanel.hostinger.fr/auth
2. Vous devez arriver dans une liste d'icones :
C'est le "c-panel" pour gérer votre hébergement
3. Dans la section Fichier (vers le bas), clic sur "gestionnaire de fichiers 2"
4. Clic sur le lien bleu "public_html"
5. Clic sur télécharger vos fichiers (html et image) : lien "upload",
puis clic sur "Choisissez un fichier", puis sur "add another" pour les autres fichiers
6. Valider le transfert des fichiers de votre PC vers l'hébergeur
(Clic sur coche verte au-dessus de la liste de vos fichiers)
7. Allez dans un nouvel onglet de votre navigateur et tapez
http://url-de-votre-espace.sonextension/nomfichier.html
Félicitations, les pages que vous avez créées devrait être visibles
par tous les internautes.
Exemple fait ensemble (disponible 21 jours) : http://webschool20160915.esy.es/test.html
32 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
Le code
(suite)
33 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
Le résultat
(suite)
34 / 35

P.Bouquet
maj. du 20/09/2016
P.Bouquet
Philippe BOUQUET
Formateur et
Webmaster
06 70 77 59 79
netpresta@gmail.com
A vous la parole.
Réponses à vos questions.
35 / 35

Créez et mettez en ligne votre 1e page web

Recommended

Recommended

More Related Content

What's hot

What's hot (10)

Similar to Créez et mettez en ligne votre 1e page web

Similar to Créez et mettez en ligne votre 1e page web (20)

Créez et mettez en ligne votre 1e page web