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

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

https://www.linkedin.com/in/netpresta

http://creativecommons.org/

http://netpresta-formation.fr/




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







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







Internet, Réseaux et serveurs

Ordinateurs

Algorithmes

Téléphones

Programmation WebDesign Bureautique

. . .

Où se situe le Web dans l'informatique ?

4 / 35







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







La diversité du Web

Pourriez-vous citer les différents types de site web ?

-

-

-

-

-

-

6 / 35







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







Les outils web de la transformation numérique

8 / 35







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













10 / 35







Web : un vocabulaire spécifique

11 / 35







Exemples de langages Exemples d'outilsde création

Web : De la création …

12 / 35







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







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







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













16 / 35







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







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







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> , <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"


20 / 35







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


21 / 35







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


22 / 35







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).


23 / 35







HTML : pour les accents

<meta charset="UTF-8"

A placer avant le reste du code

/>fermeture de la balise simple

<head>

</head>


24 / 35







: Structure minimum<!DOCTYPE html>

<html>

<head>

<title> Onglet </title>

</head>

<body>

Mon texte.

</body>

</html>

25 / 35







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 / 35







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







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







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


30 / 35







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


31 / 35







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


32 / 35







Le code


33 / 35







Le résultat


34 / 35







Philippe BOUQUETFormateur et Webmaster

06 70 77 59 [email protected]

A vous la parole.

Réponses à vos questions.

35 / 35