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 ci...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
Passage de relai ancienn...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
Et vous ?
Esprit plutôt ...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
Internet, Réseaux et
ser...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
FTP : Transfert de
fichi...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
La diversité du Web
Pour...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
Site institution, portai...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
Les outils web de la
tra...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
Web : Les principales da...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
Passage de relai ancienn...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
Web : un vocabulaire
spé...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
Exemples de langages Exe...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
World Wide Web ( Toile d...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
Serveur
d'application
ex...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
HTML : Qui suis-je
Ses a...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
Passage de relai ancienn...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
Pour accéder ou sauvegar...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
HTML : Les composants
<p...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
HTML : Les composants
(s...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
<p> , <div>
<h1>, <h2>, ...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
HTML : Imbrication de 2 ...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
SavoirLiens hypertextes
...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
Les commentaires de code...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
HTML : pour les accents
...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
: Structure minimum
<!DO...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
URL (adresse web)Favicon...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
Passage de relai ancienn...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
Choix d'un nom de domain...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
Réservation d'un NDD che...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
Choix d'un hébergeur (cr...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
Inscription chez un hébe...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
Déposer Vos fichiers sur...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
Le code
HTML : Les compo...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
Le résultat
HTML : Les c...
P.Bouquet
maj. du 20/09/2016
P.Bouquet
Atelier "Créez et mettez en ligne
votre première page web"
Philippe BOUQUET
Formate...
Prochain SlideShare
Chargement dans…5
×

Webschool Tours du 15/09/2016 - Créez votre 1e page Web

134 vues

Publié le

Plan
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

Publié dans : Internet
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
134
Sur SlideShare
0
Issues des intégrations
0
Intégrations
70
Actions
Partages
0
Téléchargements
1
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Webschool Tours du 15/09/2016 - Créez votre 1e page Web

  1. 1. 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
  2. 2. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "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
  3. 3. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "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
  4. 4. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "Créez et mettez en ligne votre première page web" 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
  5. 5. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "Créez et mettez en ligne votre première page web" 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
  6. 6. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "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
  7. 7. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "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
  8. 8. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "Créez et mettez en ligne votre première page web" Les outils web de la transformation numérique 8 / 35
  9. 9. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "Créez et mettez en ligne votre première page web" 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
  10. 10. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "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
  11. 11. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "Créez et mettez en ligne votre première page web" Web : un vocabulaire spécifique 11 / 35
  12. 12. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "Créez et mettez en ligne votre première page web" Exemples de langages Exemples d'outils de création Web : De la création … 12 / 35
  13. 13. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "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 publiques reliées par des liens hypertexte fonctionnant sur Internet. Web : Définition 13 / 35
  14. 14. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "Créez et mettez en ligne votre première page web" 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
  15. 15. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "Créez et mettez en ligne votre première page web" 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
  16. 16. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "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
  17. 17. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "Créez et mettez en ligne votre première page web" 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
  18. 18. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "Créez et mettez en ligne votre première page web" 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
  19. 19. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "Créez et mettez en ligne votre première page web" HTML : Les composants (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
  20. 20. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "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
  21. 21. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "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 ouverture 1e balise ouverture 2e balise fermeture 2e balise fermeture 1e balise HTML : Les composants (suite) 21 / 35
  22. 22. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "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. Destination Affiché sur la page HTML : Les composants (suite) 22 / 35
  23. 23. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "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
  24. 24. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "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
  25. 25. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "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
  26. 26. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "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
  27. 27. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "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
  28. 28. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "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
  29. 29. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "Créez et mettez en ligne votre première page web" 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
  30. 30. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "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é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 Hébergement (Hosting) 30 / 35
  31. 31. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "Créez et mettez en ligne votre première page web" 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 Hébergement (Hosting) 31 / 35
  32. 32. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "Créez et mettez en ligne votre première page web" 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 Hébergement (Hosting) 32 / 35
  33. 33. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "Créez et mettez en ligne votre première page web" Le code HTML : Les composants (suite) 33 / 35
  34. 34. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "Créez et mettez en ligne votre première page web" Le résultat HTML : Les composants (suite) 34 / 35
  35. 35. P.Bouquet maj. du 20/09/2016 P.Bouquet Atelier "Créez et mettez en ligne votre première page web" Philippe BOUQUET Formateur et Webmaster 06 70 77 59 79 netpresta@gmail.com A vous la parole. Réponses à vos questions. 35 / 35

×