-------------------------------------------
HTML et CSS en peu de temps !
-------------------------------------------
1
Introduction
	HTML né au CERN en 91: centre recherche nucléaire
		Physiciens accélérateur de particuleurs
		Produire des documents techniques

	Objectifs : Word pour écrire un document technique.
	Dans notre page HTML, on trouve : 
		Titres
		Paragraphes
		Liste à points ou à numéros
		Images
		Liens
		Tableaux (compliqué)

		+ de la "structure" = "armature" autour

	Un fichier HTML c'est "comme" un fichier Word
		- fichier .docx : ouvert avec programme Word
		- fichier .html : ouvert avec un navigateur : chrome
			=> on voit la mise en page et le style
		- fichier .html : ouvert avec un éditeur de texte :
			VS-Code ou sublime-text
			=> on voit le texte du code HTML

-------------------------------------------
Outils : 
	1 Navigateur : chrome ou firefox : edge à bannir !
	2 IDE : Visual Studio Code et SublimeText

-------------------------------------------
2
Rappels sur les fichiers : 
   -------------------------------------------------
	Un fichier .htlm c'est un fichier "texte"
		il est lisible dans sublimeText ou VS Code
	Un fichier .docx c'est un fichier "binaire"
		il est lisible dans Word

	2 types de fichiers : texte ou binaire

   -------------------------------------------------
	Autre classement des fichiers : document ou programme (ou les 2 à la foix-
		Exemples :
			      .docx, .html : document
			chrome.exe         : programme
			      .html        : document texte et un programme

	Un fichier .html est un programme texte quand il est ouvert avec un navigateur : chrome
		Chrome interprète les balises et affiche ce qu'il faut
	
	Un fichier .html est un document texte quand il est ouvert avec un éditeur de texte : VC code ou Sublime Text
		L'éditeur affiche les caractères contenus dans le fichier

	4 catégories de fichiers : 
		texte document	   : 	mon_cours.txt
		texte programme   :	.html, .py, .cpp, .c
		binaire document  :  .docx, .xlsx
		binaire programme :  chrome.exe, sublimeText.exe
-------------------------------------------
3
Principes du code HTML :
	des balises (tag en anglais) : <nom>   </nom>
		une balise a une "ouvrante" : <nom> et une fermante </nom>
	
	Exemples : 
		Titre : 
			<h1>mon titre</h1>
			<h2>, <h3> .. <h6>
		Paragraphe : <p> </p>
-------------------------------------------
4
Premier exemple de code : 

	<h1>Présentation HTML</h1>
	<h2>Généralités</h2>
	bla bla bla
	<h2>Exemples</h2>
	bla bla bla

	Pour écrire ce code, on utilise un éditeur :  VS Code ou SublimeText

	On ajoute une liste à points
		ul + li

		<ul>
		    <li>elément 1</li>
		    <li>élément 2</li>
		</ul>

		ol pour une liste à numéro : ol + li
		<ol>
		    <li>elément 1</li>
		    <li>élément 2</li>
		</ol>

-------------------------------------------
5
Syntaxe et vocabulaire
	toutes les balises ont une "ouvrante" et une "fermante"
		ouvrante <p>
		fermante </p>

	SAUF les balises "orpheline" : pas de fermante

	Dans les balises ouvrantes et orphelines on peut mettre des couples clé="valeur" : on appelle aussi ça des "attributs"
	Exemple
		<img src="./img/html.png" width="50">

	 	on a 2 attributs : src et width avec des valeurs 
	 		src="./img/html.png"
			width="50"

		On a l'attribut "src" avec la valeur "./img/html.png"
		et l'attribut "width" avec la valeur "50"

-------------------------------------------
6
image et chemin d'accès
	<img src="./img/html.png" width="50">

	Notre image se trouve dans le dossier img qui se trouve directement dans notre dossier de travail

	Avec VS code, on tape ./ et VS code propose ce qu'il y a dans le dossier de travail : notre dossier img

	On selectionne img, on a ./img/ et VS code propose ce qu'il y a dans le dossier img : notre fichier html.png

-------------------------------------------
7
Lien : a href

	Avec visual, on tape a et tabulation et on obtient
		<a href=""></a>
	href est un attribut pour donner le lien
	par exemple : 
		href="http://google.com"

	Pour aller sur une autre page du même site :
	<a href="./page2.html">page 2</a>

	Dans la balise (entre l'ouvrante et la fermante) :
		on met un texte qui sera cliquable et conduira à la page demandée.

	Autre exemple : 
	<a href="http://bliaudet.free.fr/">site bliaudet</a>


-------------------------------------------
Exercice : faire un fichier page 1 qui affiche : 
	un titre, 
	un paragraphe bla bla, 
	une image 
	et un lien vers une page2
La page 2 affiche :
	un titre,
	un paragraphe bla bla 
	et un lien vers la page 1
-------------------------------------------
8
Comment faire un tableau ?
	C'est une table excel
		exemple : table des élèves : prénom, classe, age

			prénom,	classe,	age
			Mohand	GC4      26
			Louiza	GC4		28

	Le code : 

		<table>
			tr : 1ère ligne
			th : cellule

			tr : lignes suivantes
			td : cellule
		</table>


	Je ne me souviens plus de la syntaxe : je fais quoi ?		
		1) Je cherche sur google : 
				table html w3school
			w3school  est un site qui fait du HTML, PHP, python, SQL, etc.
		 
		2) je demande à chatGPT : 
			"écrit un code html pour faire un tableau de 2 lignes avec 1, 2, 3 puis 4, 5, 6, sans css et sans structure"

			On précise sans css et sans structure pour avoir le code minimum

	Dans la balise table on met un attribut border : 
		<table border>
		Ca permet d'avoir des bordures facilement.

-------------------------------------------
9
Créer l'armature du fichier HTML
	Dans visual : ! + tab
	
	ça donne :

		<!DOCTYPE html>
		<html lang="en">
		<head>
		    <meta charset="UTF-8">
		    <meta name="viewport" content="width=device-width, initial-scale=1.0">
		    <title>Document</title>
		</head>
		<body>
		    
		</body>
		</html>

	On peut changer le contenu de title et mettre par exemple "atpc" : c'est le nom de l'onglet de notre page dans notre navigateur.

	On met tout notre code dans la balise body

-------------------------------------------
10
Vérification du code
	A ce stade, on a un premier code HTML qui marche.

	Il existe un site W3C pour valider que le code HTML est propre : 
		https://validator.w3.org/

		Il faut avoir 0 erreur 0 warning
		sauf le border dans la table qui est pratique pour le moment mais qu'on modifiera à terme.

-------------------------------------------
11
Indentation automatique : formater et Mode plan
	Pour avoir un code propre, avec VS code on tape : 
		Alt  + Maj + F 
		C'est très pratique pour avoir un code propre.

	On peut aussi fermer tous les blocs : 
		ctrl-k-0 (ou cmd-a + cmd-k-0 sur mac)
		
		Ca permet de ne voir que la structure: le plan 
		On peut aussi faire ça avec ce document texte.

	Cf document : raccourcis VS-Code

--------------------------------------------
12
Les Balises de structuration : 
	Ce sont des balises du HTML-5
	Elles permettent de regrouper les parties du site en blocs habituels : 

	Bloc header = en-tête: on la retrouve sur toutes les pages 
		<header> </header>

	Comment on faisait en HTML-4 : on utilisait la balise div 
		<div> </div> : on structure sans préciser 
		Comment on distinguait les div ?
		<div id="header">
		ou 
		<div class="header"> : bizarre d'utiliser une class
		=> divite ! maladie qui d'apparition massive de div 
		=> id-ite : mettre des id partout 
		=> class-ite : mettre des class partout 

	Bloc footer : pied de page <footer></footer> 
	
	Bloc nav : menu de navigation pour passer d'une page à l'autre : ul li a 

	Bloc main : ce pourquoi la page est là <main> </main>

	Bloc article : pour les articles du main 

	Il y a 2 autres balises : 
		section : équivalent div : morceau de la page 
			ce n'est pas très utile. Le div le remplace très. 
		
		aside : "à côté" : colonne de droite qui n'est pas le main 
			et qui n'est pas le header et le footer
			
	Les balises de structuration, c'est utile pour mieux comprendre la strucuture du code

	Bilan 
		header, footer, nav, main, article, div
		(aside, section) 

		id, class

	Shéma type d'une page WEB : cf 

-------------------------------------------
13
TP1 (d'abord sans CSS) : on fait la page Intranet anthropocène

	Les données du tableau sont là : 

		Titre                         Année  Réalisateur
		Une vérité qui dérange        2006   Davis Guggenheim
		Don't look up                 2021   Adam McKay
		Beasts of the southern wild   2012   Benh Zeitlin
		Melencholia                   2011   Lars von Trier
		Sauve qui peut (la vie)       1980   Jean-Luc Godard
		Nope                          2022   Jordan Peele
		L'amour à mort                1984   Alain Resnais

TP2 (d'abord dans CSS) : l'exemple de CSS de w3school : 

Welcome to my HomePage
https://www.w3schools.com/css/css_intro.asp

On code le HTMM de cette page (uniquement le Welcome to my HomePage).

--------------------------------------------
--------------------------------------------
--------------------------------------------
14
CSS (première approche : )
	Le CSS c'est plus compliqué que le HTML

	Exemple :
		https://www.w3schools.com/css/css_intro.asp
		
	Le but du CSS c'est 
		d'accéder à des balises du HTML
		puis :
			de les "colorer" (design)
			de les mettre en page (mise en page)
			de décider si on les affiche ou pas (design responsive)

--------------------------------------------
	Accéder à une balise : 
		h1 {

		}
		tous les h1 du HTML auront ce que je mets dans les accolades
		pour le moment : rien dedans 

		Commentaires possible en CSS  : /*  */
			Si vous écrivez des trucs faux : il n'en fait rien 
			on peut aussi mettre un _ devant un attribut qu'on ne veut plus

		h1 {
			_background-color : couleur de fond
			background-color : yellow;
			color : red;
		}

--------------------------------------------
	Attribut CSS les plus courants : 
		margin : les marges à l'extérieur de la bordure
		padding : les marges à l'intérieur de la bordure
		border : la bordure
		color : couleur de l'élément
		background-color : couleur de fond de l'élément
		list-style-type : none; Pour supprimer le point des li 
		text-decoration : none; Pour supprimer le souligné des a 
		float : pour que le texte entoure l'image

--------------------------------------------
	Comment faire le lien avec le CSS 
		3 techniques : avec un fichier, dans le head, dans les balises

		1 : link d'un fichier CSS : 
			dans le head : 
				<link rel="stylesheet" href="./css/style.css"> 

		C'est la bonne méthode : le fichier style.css !!!
		Les autres méthodes c'est quand on ne peut pas utiliser la première.

		2 : balilse style dans le head : 
			Dans la balise, on met ce qu'on met dans le fichier css
			<style>
				body {
					background-color: #pink;
				}
			</style>

		3 : Directemet sur les balises du HTML avec l'attribut style
			<body style="background-color : #yellow">

--------------------------------------------
	Accéder aux balises : 
		2 techniques : préciser le chemin ou utiliser id et class

		1 : préciser le chemin :
			nav ul {}
			=> il faut privilégier cette technique
			=> c'est plus lisible

		2 : avec un attribut id ou un attribut class dans les balses : 
		on accède à ou aux balise avec : 
		#nom_id ou .nom_class

		Précisions sur le chemine :
			si on écrit :
			main article#anthropocene p img { }
				article et #anthropocene sont collés car #anthropocene est un attribut de article et pas une balise dans article

			On pourrait écrire : 
			main #anthropocene p img { }

--------------------------------------------
	3 types de CSS : coloration, mise en page, design responsive 
		1 : coloration : couleur, bordure, centrée, etc.
				on a déjà un peu abordé le sujet
		2 : mise en page : mise en colonnes 
				cf ci-dessous
		3 : design responsive : changer l'affichage selon qu'on est sur ordi ou sur téléphone

--------------------------------------------
	La mise en page : flex 
		La technique moderne de mise en page, c'est le "flex"
			Pour mettre en colonne, il faut une balise "conteneur" qui contient des balises "items"

		mise à l'horizontal du menu */ 
			ul : bloc conteneur
			li : les items

			il suffit de faire : 
				nav ul {
					display: flex;
				}
				et les li sont mis à l'horizontal 
				
				Si on veut que les lis s'étalent sur tout la largeur on écrit : 
				nav ul li {
					flex: 1;
				}

		Si on a 3 blocs, par exemple article1, article2 et article3 dans un contenair, par exemple main, et qu'on veut mettre article2 et article3 en colonne, comment fait-on ?

			il faut mettre article2 et article3 dans une div et faire un display : flex pour la div !

--------------------------------------------
	Le design responsive : 
		@media (max-width: 992px) {
			cf poly de cours !