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 ?

1. Nom de domaine dans la barre d’adresse du navigateur
2. Transcrit en adresse IP du serveur du site
3. Le serveur envoie le site demandé
4. 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