| 1 |
Html & CSS
Apprendre les bases du langage pour créer des sites web
Introduction
Qui suis-je ?
Steven Berg
Graphiste | Développeur | Formateur Consultant en communication digitale
Html5 / CSS3, Sass, Bootstrap, RWD, JavaScript, jQuery, WordPress Intégration et Développement, FlutterFlow, Glide, Adobe InDesign, Adobe Photoshop, Adobe Illustrator
Introduction
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
Introduction
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).
Introduction
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.
Introduction
Quelles langages sont utilisés pour créer un Site Internet ?
| Page Web |
| Backend |
Frontend
Introduction
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
Introduction
Les langages FrontEnd
HyperText Markup Language
(langage de balisage d’hypertexte)
Contenu de page, texte, photos…
Sans forme ni couleur.
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…
Introduction
Les langages FrontEnd
JavaScript
Permet d’apporter de l’intéraction entre le site et l’utilisateur.
Introduction
Les langages FrontEnd
| = |
+ +
Développement frontend
Introduction
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.
Introduction
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.
Introduction
C’est quoi un Navigateur Web ?
Les navigateurs les plus connus
IE / Edge
Très connu et répandu car il a longtemps été installé par défaut au sein du système d’exploitation Windows.
Safari
Développé par Apple et installé par défaut sur le système d’exploitation Mac OS.
Mozilla Firefox
Ses principaux atouts étant d’être un logiciel libre, gratuit, et multiple-plateforme.
Google Chrome
Développé par Google, ce logiciel est gratuitement mis à disposition du grand public depuis fin 2008.
Introduction
Comment mettre un site internet en ligne ?
Visible par l’internaute et accessible depuis n’importe où
| ??? |
Site sur mon ordinateur
Introduction
Comment mettre un site internet en ligne ?
Visible par l’internaute et accessible depuis n’importe où
| Serveur webhttps://www.mondomaine.fr/ |
Site sur mon ordinateur
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.
Introduction
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
Introduction
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
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
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.
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
| 01 |
HTML 5
Introduction et notions de base
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 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é
<balise> Bonjour ! </balise>
* Contenu *
Balise ouvrante
< = chevron ouvrant
> = chevron fermant
Balise fermante
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
<baliseautofermante>
Exemple de balises auto-fermantes :
<br> <img> <meta> <input> <link> …
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 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.
<p id=“section1“> Bonjour ! </p>
Attribut
Balise Valeur
Exemple avec l’attribut charset : <meta charset=“utf-8“>
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
<img src=“monimage.png“>
src=“ “ => donne la source (d’une image dans cet exemple)
Lien
<a href=“https://www.google.fr“> Texte du lien </a> href=“ “ => donne la destination d’un lien
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
<p> Contenu de paragraphe <!– avec un commentaire –> </p>
Affichage dans le navigateur
Contenu de paragraphe
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 5
L’indentation
Sans indentation Avec indentation
