Comment fonctionne internet ? 

Internet est consulté sur des terminaux de plusieurs tailles (desktop, mobile, tablet, tv, montres, …)  

Avec des navigateurs (browsers) (Zen,Arc, Brave, Chrome, Firefox, Safari, Edge,…)
Je vous recommande d’utiliser Arc Brave

Ces navigateurs interprètent principalement 3 « langages clients » ou 3 types de code

1. HTML (HyperText Markup Language)
2. CSS (Cascading StyleSheet)
3. JS (Javascript) 

Ces 3 « langages » sont généralement (pas toujours) créés et envoyés au navigateur (client) par un serveur qui va chercher les données dans une base de données.

Le B:BNet par exemple utilise Haiilo qui est écrit en « python » et utilise React.js un framework Javascript. Les données du B:Bnet sont stockées dans une base de données 
Une grande partie des sites sur internet utilisent WordPress qui est écrit en PHP et utilisent aussi React.js, les données des sites wordpress sont aussi stockées dans une base de données.

Donc en règle générale, on pourrait imaginer le schéma simplifié suivant :

Html

Le html est un language de balisage qui permet de structurer les contenu d’une page web. Les balises peuvent s’imbriquer les unes dans les autres, mais elle ne doivent pas s’entrecroiser (cf exemple ✅ ❌ plus bas)

Syntaxe d’une balise

Une balise html est composé de

• deux chevrons: ouvert (<) et fermé (>)
• du nom de la balise (p,a) <p>
• d’une balise de fermeture qui reprend le nom de la balise avec un slash au début 
  <p>Contenu paragraphe</p>
  Exception: Certaines balises sont auto-fermantes elles n’ont pas de balise de fermeture
• souvent, les balises sont complétées avec un ou plusieurs attributs (id, class, href). Les attributs sont composés d’un nom et d’une valeur, séparés par un signe égal
  par exemple l’attribut href précise l’url vers lequel l’utilisateur sera redirigé au click

<balise attribut="valeur">Contenu de la balise</balise>

Exemple de balise

Un paragraphe :

<p>Contenu du paragraphe</p>

Un lien :

<a href="https://mi-ca.ch">Lien vers mi-ca.ch</a>

Balises texte à retenir pour ce 1er cours:

<a href="https://www.ch.ch">texte clickable</a> = lien 
Crée un lien hypertexte vers une autre page ou une ressource. Dans le cas présent, l’attribut href pointe vers le site ch.ch

<a href="#autre_attribut_id_sur_la_page">texte clickable</a> = ancre
Une ancre est un lien interne à la page. En ajoutant un dièse # au début de l’attribut href le navigateur va scroller vers l’élément ayant l’attribut id correspondant au href

<strong>texte en gras</strong> = Gras
Met en évidence le texte en le rendant visuellement plus fort (généralement en gras).
<em>italique</em> = emphase / italique 
Met en évidence le texte en lui donnant une importance stylistique (généralement en italique)

<span>Contenu</span> = Conteneur générique pour le texte inline ; utilisé pour appliquer des styles CSS à des parties spécifiques du texte.

<p>Contenu</p> = Création d’un paragraphe

Exemple de balises enfants juste et faux

<!-- code html correct -->
<p>Ceci est le contenu
   d'un paragraphe avec
   du <strong>texte en bold</strong> 
   et <a href="https://web.cpmd.ch">un lien</a> et même
   de l'<em>italique</em>
</p>

<!-- code html incorrect -->
<p>Ceci est le contenu
   d'un paragraphe avec
   du <strong>texte en bold 
   et <a href="https://web.cpmd.ch">un</strong> lien<em></a> et même
   de l'italique</em>
</p>

Anatomie d’une page web

Certaines balises sont obligatoires pour construire une page web. Il s’agit d’une sorte de déclaration tout en haut du code de la page web qui se présente ainsi :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Titre du document - très important pour le référencement google</title>
  <link rel="stylesheet" href="assets/style.css">
</head>
<body>
    
</body>
</html>

<!DOCTYPE html> Le doctype est une déclaration qui indique au navigateur le type de document HTML que vous utilisez. Il est toujours la première ligne de votre code HTML.

<html lang="fr"> encadre toute la page html, comme les autres balises, elle doit être fermée. Elle comporte dans sa balise d’ouverture un attribut lang pour préciser que le contenu du site sera en français.

La balise <head> contient des informations sur votre document, mais qui ne sont pas visibles par l’utilisateur. Elle est située juste après l’ouverture de la balise <html>

Les éléments les plus courants que vous pouvez trouver dans la balise <head> sont les suivants :

• <title> : le titre de votre document, qui apparaît dans la barre de titre du navigateur.
• <meta> : des métadonnées sur votre document, telles que le langage utilisé, les mots-clés, etc.
• <link> : des liens vers des ressources externes, telles que des feuilles de style CSS ou la petite icône du site appelée favicon.

Exercice

Installation de logiciel :

1. Le navigateur Arc Brave ou Zen
2. Visual Studio Code
3. Extension à ajouter à VS code : HTML CSS Support