Quels sont les étapes de la création d’un Site Internet ?
1/ Cahier des charges -> Définir les besoins du client
2/ Proposition commerciale -> Devis 3/ Validation
4/ Graphisme
5/ Validation de la maquette
6/ Intégration
7/ Développement
8/ SEO -> Moteur de recherche
9/ Formation du client au backoffice 10/ Livraison
Comment est né Internet ?
Le chercheur britannique Tim Berners-Lee a inventé le World Wide Web en 1989, lorsqu’il travaillait
au CERN. À l’origine, le projet a été conçu et développé pour que des scientifiques travaillant
dans des universités et instituts du monde entier puissent s’échanger des informations
instantanément.
L’idée de base du WWW était de combiner les technologies des ordinateurs personnels, des réseaux
informatiques et de l’hypertexte pour créer un système d’information mondial, puissant et facile à
utiliser.
En 1991, Internet devient accessible à tous. Le mot, qui date de 1974, est l’abréviation de
Interconnection of networks (interconnexion de réseaux).
De quoi se compose un Site Internet ?
Serveur Client
Un site internet c’est un ensemble de fichiers (des fichiers en code, des images, des polices
d’écritures, des vidéos, etc…) et hébergés sur un serveur. Ces fichiers sont accessibles depuis
n’importe où, grâce à un nom de domaine (l’adresse du site) et à l’aide d’un navigateur qui les
interprète et les affiche.
Quelles langages sont utilisés pour créer un Site Internet ?
Page Web
Frontend Backend
Quelles langages sont utilisés pour créer un Site Internet ?
Les langages Frontend
HyperText Markup Language
(langage de balisage d’hypertexte)
Cascading Style Sheets
(Feuilles de style en cascade)
JavaScript
Html/CSS – Steven Berg – MAJ 01/2023
7
Introduction
Les langages FrontEnd
HyperText Markup Language
(langage de balisage d’hypertexte)
Contenu de page, texte, photos…
Sans forme ni couleur.
Html/CSS – Steven Berg – MAJ 01/2023
8
Introduction
Les langages FrontEnd
Cascading Style Sheets
(Feuilles de style en cascade)
Mise en forme de la page, position des éléments, couleurs, police d’ecriture…
Html/CSS – Steven Berg – MAJ 01/2023
9
Introduction
Les langages FrontEnd
JavaScript
Permet d’apporter de l’intéraction entre le site et l’utilisateur.
Html/CSS – Steven Berg – MAJ 01/2023
10
Introduction
Les langages FrontEnd
+ +
Développement frontend
Quelles langages sont utilisés pour créer un Site Internet ?
Les langages Backend
- Hypertext Preprocessor
- Une petite dizaine de langages de programmation peuvent aujourd’hui être utilisés pour construire
- le back-end d’un site.
- Le plus utilisé est PHP.
C’est quoi un Navigateur Web ?
Logiciel qui permet de visualiser sur un écran le rendu d’une page Web. (ordinateur, téléphone, de
tablette… )
Il interprète le code source d’une page web et le met en forme.
C’est au moment où la page Web est lue par le navigateur que celui-ci va appeler les médias et
autres scripts qui sont liés à la page Web et mettre le tout en forme visuellement.
C’est quoi un Navigateur Web ?
Les navigateurs les plus connus
- IE / Edge
- Safari
- Mozilla Firefox
- Google Chrome
Très connu et répandu car il a longtemps été installé par défaut au sein du système d’exploitation
Windows.
Développé par Apple et installé par défaut sur le système d’exploitation Mac OS.
Ses principaux atouts étant d’être un logiciel libre, gratuit, et multiple-plateforme.
Développé par Google, ce logiciel est gratuitement mis à disposition du grand public depuis fin
2008.
Comment mettre un site internet en ligne ?
Visible par l’internaute et accessible depuis n’importe où
Site sur mon ordinateur
Comment mettre un site internet en ligne ?
Visible par l’internaute et accessible depuis n’importe où
Site sur mon ordinateur
Serveur web
https://www.mondomaine.fr/
Pour mettre en ligne on fait passer les fichiers de l’ordinateur du créateur à un serveur web.
Notre site sera alors accessible via un nom de domaine.
Comment mettre un site internet en ligne ?
- Nom de domaine dans la barre d’adresse du navigateur
- Transcrit en adresse IP du serveur du site
- Le serveur envoie le site demandé
- Affichage sur l’écran de l’utilisateur
Comment mettre un site internet en ligne ?
Pour pouvoir mettre un site sur un serveur, il faut prendre un abonnement chez un hébergeur qui
vous louera un espace disque et un nom de domaine
Hébergeur gratuit
Pour mieux comprendre ce qu’est un site web :
Votre nom de domaine, c’est l’adresse postale de la maison, L’hébergement est la maison
Les fichiers de site, ce sont les meubles.
Les outils
Quels outils pour développer un site Web ?
Un navigateur web
Le premier outil à avoir pour développer un site web, est un navigateur. De préférence Google
Chrome ou Mozilla Firefox.
Tous les navigateurs ne gèrent pas le code de la même façon, et ne sont pas égaux en terme de mise
à jour.
Vérification du comportement des navigateurs avec l’outil CanIUse https: /caniuse.com/
Google Chrome
Html/CSS – Steven Berg – MAJ 01/2023
19
Les outils
Quels outils pour développer un site Web ?
Un éditeur de code
Un éditeur de code est un logiciel qui nous permet d’écrire du code. Il reconnait la majorité des
langages utilisés dans le développement.
Le plus utilisé aujourd’hui est Visual Studio Code.
Visual Studio
Code
- https: /code.visualstudio.com/
- Editeur spécialisé
- Auto-complétion, retour à la ligne, coloration syntaxique, plugins, etc…
- Gratuit pour Mac et Windows
Html/CSS – Steven Berg – MAJ 01/2023
20
Les outils
Ressources et aides en ligne
World Wide Web Consortium
Le W3C est une organisation, créée en 1994, chargée de standardiser et faire évoluer le langage
HTML. L’objectif recherché est qu’un même code s’affiche de la même manière sur tous les
navigateurs.
- Tim Berners-Lee, fondateur du W3C et inventeur du HTML
- 378 entreprises membres qui peuvent faire des propositions (Microsoft, Apple, Mozilla, Opera,
Adobe, etc.) - Propose un validateur de code pour toujours avoir un code propre et valide :
https://validator.w3.org/
Les avantages d’un code valide et propre : meilleure compatibilité assurée entre les navigateurs et
prédisposition améliorée pour un référencement naturel.
Html/CSS – Steven Berg – MAJ 01/2023
21
Les outils
Ressources et aides en ligne
Les balises et les attributs HTML sont nombreux, et on les mémorise généralement par l’usage. Il
est souvent nécessaire d’avoir recours à de la documentation, qu’on peut facilement trouver sur le
web.
Pour un « dictionnaire » des tags et des attributs du HTML :
Sur le MDN : https: /developer.mozilla.org/fr/docs/Web/HTML/Element Sur le W3C :
https://www.w3.org/TR/html-markup/elements.html
Html/CSS – Steven Berg – MAJ 01/2023
22
HTML 5
Introduction et notions de base
Html/CSS – Steven Berg – MAJ 01/2023
23
Html 5
Définition
Hypertext Markup Language (HTML)
Langage de balises qui permet de structurer des pages Langage interprété par les navigateurs
Différentes versions depuis 1989 Aujourd’hui HTML5
Html/CSS – Steven Berg – MAJ 01/2023
24
Html 5
C’est quoi une balise ?
Une balise est un mot entre chevrons
Les balises structurent le contenu de la page (texte, images, etc.) Chaque balise a un rôle et
donne du sens au contenu présenté
Bonjour !
- Contenu *
Balise ouvrante
< = chevron ouvrant
= chevron fermant
Balise fermante
Html/CSS – Steven Berg – MAJ 01/2023
25
Html 5
C’est quoi une balise ?
Balises auto-fermantes ou Balises Orphelines
Certaines balises bien particulières n’ont pas besoin d’être fermées, on les dit « auto- fermantes
», elles n’ont ni contenu ni balise fermante
Exemple de balises auto-fermantes : …
Le nom des balises (fermantes et auto-fermantes) est prédéfini dans les spécifications HTML, on ne
peut donc PAS en inventer !
Html/CSS – Steven Berg – MAJ 01/2023
26
Html 5
Attributs et valeurs
Certaines balises peuvent être complétées par des attributs précisant certains paramètres
(l’adresse des liens, source d’une image à afficher, etc…).
Une balise peut contenir plusieurs attributs.
Les attributs se mettent toujours dans la balise ouvrante.
Bonjour !
Attribut
Balise Valeur
Exemple avec l’attribut charset :
Html/CSS – Steven Berg – MAJ 01/2023
27
Html 5
Attributs et valeurs
Les attributs sont des éléments prédéfinis dans le HTML, on ne peut pas en inventer.
On peut les mettre entre simple quote, double quote ou rien. Par convention nous choisissons les
doubles quotes “ “.
Image
src=“ “ => donne la source (d’une image dans cet exemple)
Lien
Texte du lien href=“ “ => donne la destination d’un lien
Html/CSS – Steven Berg – MAJ 01/2023
28
Html 5
Les commentaires
Les commentaires sont des morceaux de texte ignorée par le navigateur.
Souvent une note ou une annotation que l’on peut ajouter pour y voir plus clair et se repérer plus
rapidement dans un code-source.
Pratiques lors d’un travail en équipe.
Code
Contenu de paragraphe
Affichage dans le navigateur
Contenu de paragraphe
Html/CSS – Steven Berg – MAJ 01/2023
29
Html 5
L’indentation
Indenter correspond à créer des retraits en début de ligne de code de façon cohérente et logique en
utilisant la tabulation.
Indenter permet d’avoir un code plus propre et plus lisible, donc plus compréhensible. Indenter
permet également de plus facilement détecter les erreurs potentielles dans un code.
Le but de l’indentation est de nous permettre de discerner plus facilement les différents éléments
ou parties de code.
Html/CSS – Steven Berg – MAJ 01/2023
30
Html 5
L’indentation
Sans indentation Avec indentation
Html/CSS – Steven Berg – MAJ 01/2023
31
