Upload
netpresta
View
119
Download
0
Embed Size (px)
Citation preview
P.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "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.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
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.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
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.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
Internet, Réseaux et serveurs
Ordinateurs
Algorithmes
Téléphones
Programmation WebDesign Bureautique
. . .
Où se situe le Web dans l'informatique ?
4 / 35
P.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
FTP : Transfert de fichiers
DHCP : lien entre PC (adresse IP)
Protocoles IMAPSMTP / POP
Protocoles IRCmessagerie 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.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
La diversité du Web
Pourriez-vous citer les différents types de site web ?
-
-
-
-
-
-
6 / 35
P.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
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.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
Les outils web de la transformation numérique
8 / 35
P.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
Web : Les principales dates
1989 : Idée d'un système hypertexte surle réseau informatique du CERN parTim 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 Wikipedia2004 : Facebook
2012 : HTML 5 normalisé par le W3C
9 / 35
P.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
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
10 / 35
P.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
Web : un vocabulaire spécifique
11 / 35
P.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
Exemples de langages Exemples d'outilsde création
Web : De la création …
12 / 35
P.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
World Wide Web ( Toile d'araignée mondiale )
Système de pages statiques ou dynamiques publiquesreliées par des liens hypertextefonctionnant sur Internet.
Web : Définition
13 / 35
P.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
Serveur d'application
ex: PHP
1 2
3
4 5
67
89
serveurs DNS (ndd)
Serveur http. Ex :
Apache
Niveau 0
Serveur ou Serveurs Web ?
14 / 35
P.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
HTML : Qui suis-je
Ses amisIl 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 surun autre serveur.
DéfinitionDe l'anglais HyperText Markup Langage. Le HTML est un langage de descriptionde page matérialisé par des balises.
15 / 35
P.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
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
16 / 35
P.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
Pour accéder ou sauvegarder les fichiers du site weba. (Sous Windows) Ouvrir "explorer" de fichierb. 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 Apache3. Clic sur le bouton "Start" en face de MySQL4. Ouvrir un navigateur internet5. Dans la barre d'adresse des url, saisir :http:// localhost / cnam / mon_site.php
Modifier / Voir
17 / 35
P.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
HTML : Les composants
<p> texte </p>
Ouverture de la balise doubleElle 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 labalise doubleElle permet de définir la fin d'une information.
TexteC'est la partie affichée sur le site web (en général).
Exemple 1 :Balise "double"
18 / 35
P.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
HTML : Les composants (suite)
<img src = 'image.jpg' alt = 'chat noir' />
<imgouvertureet type dela balise
srcpropriété du1e attributde la balise img
chat1e valeur dela propriété alt
Exemple 2 : Balise "simple" />fermeture de la balise simple
altpropriétédu 2e attribut
1e attribut 2e attribut
image.jpgvaleur de la propriété srcdu 1e attributde la balise <img> noir
2e valeur dela propriété alt
19 / 35
P.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
<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"
HTML : Les composants (suite)
20 / 35
P.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
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
ouverture1e balise
ouverture2e balise
fermeture2e balise
fermeture1e balise
HTML : Les composants (suite)
21 / 35
P.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
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.
DestinationAffiché sur la page
HTML : Les composants (suite)
22 / 35
P.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
Les commentaires de code
<!-- Un commentaire -->
<!--balise de début
d'un commentaire
-->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).
HTML : Les composants (suite)
23 / 35
P.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
HTML : pour les accents
<meta charset="UTF-8"
A placer avant le reste du code
/>fermeture de la balise simple
<head>
</head>
HTML : Les composants (suite)
24 / 35
P.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
: Structure minimum<!DOCTYPE html>
<html>
<head>
<title> Onglet </title>
</head>
<body>
Mon texte.
</body>
</html>
25 / 35
P.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
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.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
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
27 / 35
P.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
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.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
Réservation d'un NDD chez un registrarJe 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 profil4. Clic sur ce lien : https://cpanel.hostinger.fr/order/domains-list5. 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.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
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éesPossibilité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 œuvreSécurité : Met en œuvre suffisamment de mesures pour limiter les attaques externes
Hébergement (Hosting)
30 / 35
P.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
Inscription chez un hébergeurJe 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 Vert6. Saisir votre NDD (Ex. : netpresta.xyz)7. Région du serveur : Europe8. Choisir votre mot de passe serveur + Continuer9. 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
Hébergement (Hosting)
31 / 35
P.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
Déposer Vos fichiers sur l'espace d'hébergementPour 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ébergement3. 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 fichiers6. 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
Hébergement (Hosting)
32 / 35
P.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
Le code
HTML : Les composants (suite)
33 / 35
P.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
Le résultat
HTML : Les composants (suite)
34 / 35
P.Bouquetmaj. du 20/09/2016
P.BouquetAtelier "Créez et mettez en ligne
votre première page web"
Philippe BOUQUETFormateur et Webmaster
06 70 77 59 [email protected]
A vous la parole.
Réponses à vos questions.
35 / 35