# Notes collectives Gr 2

* Ceci est un pad ***Markdown*** très pratique.
* Une première approche très rapide est accesible via le **?** dans le bandeau en haut de cette fenêtre.
* Prenez 5mns pour lire ce très court **résumé** et faire des essais.
* Nous utiliserons ce ***HackMD*** pour prendre des notes de manière collaborative.

Have fun <3 ***hey***

## titre niveau 2

:::info
Groupe 3 :

++Que faire si les caractères spéciaux comme les lettres accentuées ne s’affichent pas correctement sur certains navigateurs ?++

Pemièrement, vérifiez que votre éditeur de texte est bien sous la norme **UTF-8**.

Si ce n'est pas le cas :

*Sur Notepad++*
* Cliquer sur "encodage" qui se trouve dans la barre d'outil
* Sélectionnez **UTF-8**

*Sur Atom*
* Vérifiez que la norme **UTF-8** est bien renseigné en bas à droite.


:::

**Groupe 4** :
Que faire si les caractères spéciaux comme les lettres accentuées ne s’affichent pas correctement sur certains navigateurs ?

Vous rencontrez des problèmes avec vos **caractères spéciaux** ? Il sagit probablement d'une erreur de normes d'encodage. Pour la résoudre, suivez simplement ces étapes.

1- allez sur l'editeur de texte
2- verifiez que l'encodage de l'éditeur de texte soit bien en **utf-8**.

Personellement, nous vous conseillons l'éditeur **NotePad++** qui permet rapidement, de modifier ce petit problème en quelques manipulations.

>

**Groupe 5** :
## Question 1: Que faire si les caractères spéciaux comme les lettres accentuées ne s’affichent pas correctement sur certains navigateurs ?

* Tout d'abord, si vous possedez ce probème, cela vient tres certainement d'un probleme d'encodage de l'éditeur de texte et de décodage du navigateur.
* Pour remédier a cela, il vous faudrait changer de table de codage de référence et passer tout en "UTF-8".Elle est la norme de codage la plus utilsé dans l'écriture de site web.
* Vérifiez aussi que vous n'ayez pas fait de faute de frappe lors de l'écriture de votre instruction.

**Groupe 2**
## Question : Que faire si les caractères spéciaux comme les lettres accentuées ne s'affichent pas correctement sur certains navigateurs ?

> Le problème vient sûrement de la différence de la norme de décodage qui n'est pas la même que celle avec laquelle vous avez encodé votre site (norme d'encodage).
Pas de panique : vérifiez que l'encodage de votre éditeur de texte est conforme à la norme web de codage **utf-8**, norme universelle web la plus utilisée.

**Vous ne trouvez toujours pas ?** :-1:
Voici comment procéder sur ces différents éditeurs de texte :
- Sur **Atom** : Assurez-vous de voir apparaître la norme utf-8 en bas de la page

**Groupe 1**

Que faire si les caractères spéciaux comme les lettres accentuées ne s’affichent pas correctement sur certains navigateurs ?

Si vous rencontrez un problème avec les caractères spéciaux tels que les lettres accentuées, cela est sûrement du à un problème au niveau des normes d'encodages.
Pour y remédier, suivez ces étapes :
- vérifiez que votre encodeur est en "UTF-8"
=> si vous êtes sur Atom, cliquez sur l'encodage en bas à droite de votre écran, et selectionnez "UTF-8"
=> si vous êtes sur NotePad++,

-----------------------------------------------------------//////////////////////////

# Cours 2
-----
**Groupe 4**
> Les outils

- Afficher le code source.
Cela permet d'avoir un aperçu du code source et ainsi de savoir comment est composé le site. Celui-ci permet également de s'inspirer des codes sources d'autre sites.

- **PAD** Outil d'édition collaboratif
ex : HackMD

- **w3schools** : outil pour tester des élements de codage, :x: **ne remplace pas un éditeur de texte** :x:
Des exemples de listes html :
- HTML Liste non listée
<ul>
<li>Coucou</li>
<li>Salut</li>
<li>Hello</li>
</ul>

- **Editeur de texte** : Logiciel qui permet de créer des fichiers textes pouvant etre destiné à du codage
- **Encodeur** : Changer le format du code
Exemple : UTF8 encodage favoris pour les formats HTML
- Les Balises : Définir le début et la fonction d'une ligne de code

**outils : hackmd / w3schools / éditeur de texte / navigateur internet / inspecteur et / ou examinateur **

Pour inspecter et modifier le code source : **Alt + Cmd + I** sous MAC ou **Ctrl+Maj+I**
:x: Attention lorsque vous rafraîchissez la page à ne pas perdre vos modifications

**Groupe 1**

-Tout début de page doit commencer par la balise (**html**) et chaque fin de page doit se finir par la balise de fin.
-Tout notre contenu de page doit se trouver dans la balise (**body**)
-Différents éditeurs de texte: Notepad ++ ou Atom.
-Afficher le code source (**ctrl U** pour PC et clic droit puis cliquer sur: afficher le code source pour MAC)et inspecter (**ctrl+maj+I** pour PC et **ctrl+alt/i** pour MAC), cela permet de faire un aperçu + s'inspirer du code source de d'autres sites internet. Seulement disponible sur Mozilla ou Chrome.
-Toujours enregistrer en html
-Le site w3schools nous donnes accès à des cours simples et complets. Il nous permet de tester les nouvelles notions apprises et de coder facilement. Attention, il ne remplace pas un éditeur de texte.
-Ne pas oublier de fermer la balise à la fin de chaque ligne avec (**/**)

**Les différentes balises:**
-Balise insertion d'image (**img src=**)
-Balise insertion de lien (**a href=**)
-Balise pour du texte simple/paragraphe ( **p** )
-Balise pour les titres : (**h1**)= grand titre, (**h2**)= titre plus petit ....
-Balise pour liste ordonnée ; (**ol**)
-Balise pour liste non ordonnée ; (**ul**)

-PAD qui est un outil d'édition collaboratif. il permet de dialoguer à plusieurs sur une même plateforme simplement et efficacement. C'est un bon outil de travail à ne pas négliger.
a faire pour la semaine pro : **outils : hackmd / w3schools / éditeur de texte / navigateur internet / inspecteur et / ou examinateur **

**Groupe 5**

***Dans le navigateur Internet :***

**Pour afficher le code source :**
- Faire un clic droit
- Cliquer sur "afficher le code source de la page"

**Pour afficher l'inspecteur / l'examinateur (Mozilla) :**
- Sur Windows : Ctrl + MAJ + I
- Sur MAC : option + command + I

**Pour s'inspirer de la composition d'un site internet :**
- Cliquer sur "sélectionner un élément de la page" (en haut à gauche de l'examinateur)
- Puis déplacer votre souris sur le code source afin de comprendre la relation entre le code source et l'affichage du site internet.
En double-cliquant dans l'examinateur, il est possible de changer l'affichage du site internet. Mais les modifications ne s'enregistreront pas.

**L'éditeur en ligne w3schools**
- Il permet d'apprendre le HTML (c'est un éditeur html).
- Il est gratuit, et permet de s'entrainer à éditer un code HTML et de directement afficher les résultats dans notre navigateur. Il est très utile mais pour tester, cependant il ne remplace pas un éditeur de texte comme NotePad++ ou Atom notamment.
- On peut simplement y faire des copier-coller. Puis on clique sur "RUN" pour avoir un aperçu dans un navigateur. On ne peut enregistrer directement dans l'éditeur ce que l'on a fait dans w3schools.

**L'éditeur Hackmd**
De même qu'avec w3schools, on écrit à gauche, et on a le rendu à droite. Autrement dit, la droite est le rendu de la partie gauche. La partie gauche est un éditeur. L'éditeur Hackmd est un éditeur markdown.

**Le navigateur Internet**
--> Pourquoi on en a besoin ?
--> Pourquoi on l'utilise ?

---

**Groupe 3**
- Pour afficher le code source d'une page, il suffit d'effectuer la manipulation suivante : "ctrl+U" ou "clique droit + afficher le code source de la page"
- Pour pouvoir réaliser au mieux cette manipulation, il est conseillé d'utiliser Mozilla ou Chrome.
- Pour inspecter des éléments, on utilise le raccourci "Ctrl+maj+i" sur Windows et maj+cmd+i sur Mac.
Cette manipulation permet de faire des modifications sur le code source et de les visualiser.
***Attention!*** Ces modifications sont réalisées sur la copie html qu'a reçu votre ordinateur, il n'est pas possible de modifier le fichier source original. Par conséquent, lorsque vous rafraîchissez la page vos modifications sont perdues.
Le seul moyen d'effectuer une modification durable sur un fichier html est de le faire à partir de votre éditeur.

- Découverte de l'éditeur en ligne "w3schools": il nous permet de tester la construction de notre site avec une interface sous forme d'avant/après mais il ne remplace pas un éditeur comme Atom ou Notepad++ (seuls les copier/coller sont possibles).

**Groupe 2**
Pour accéder au code source : il faur faire clique droit

-------------------------------------

# COURS 3 01/02/21 ***Web/Html/css - 3 - Styles - DUT IC S2***

### **Groupe 1**
- La photo des pieds est encadrée par un rectangle bleu :
- Le fond du site web a été modifié avec un fond gris : **backgroung-color : lightgrey;**
- La typographie générale : **font-family : verdana;**
Couleur des h1 : **color: navy**
Couleur des h2 : **color : #b22222**
- La mise en page a changé, les textes sont devenus plus centrés

**Sur la deuxième page du site**
- Style de cadre bleu sur la deuxième page, écriture en italique

### **Groupe 2**

Sur la première page du site:
- Le fond du site passe du blanc au gris.
- Changement de couleur pour le premier titre et (noir a bleu pour le titre) (noir a rouge pour le sous titre)
- alignement a droite pour le titre, centré pour le sous titre
- Changement de la police (Times New Roman a Verdana ) Ainsi que la taille de la police pour le titre et le sous titre.
- Titre centré
- Cadre bleu autour de la photo des sandalettes

Sur la page 2 du site:
- le titre est centré et en bleu, avant il était aligné à droite et en noir
- Le texte est dans un cadre bleu et en italique
- Le titre est aligné à gauche
- Encadrement des paragraphe avec un fond bleu et une bordure de cadre a droite (bleu foncé)

Sur la troisième page:
- titre passe de noir à rouge et aligné au centre
- titre passe de noir à bleu avec un alignelent a droite.

***Suite:***

- la couleur de fond du body : blanc -> gris clair = **background-color : ligthgrey;**
- la typo : times -> verdana = **font-family : verdana;**
- l’alignement des h1 : gauche -> droite = **text-align : right;**
- la taille des titres : plus gros **font-size : 3em**
- la variation de casse du h1 : normal -> petites capitales **font-variant-caps: small-caps;**
- la couleur des h1 : noir -> bleu foncé **color : navy;**
- la couleur des h2 : noir -> rouge brique : **color : #000080**
- l’image : centrée avec cadre gris de 1px et petite marge intérieure = **border: 1px solid #1e7f9d;**
- Pour les paragraphes :
- couleur de fond : blanc -> bleu **background-color:deepskyblue;**
- variante typo : roman -> italique = **font-style: italic;**
- alignement : gauche -> justifié = **text-align: justify;**
- gouttière (respiration) à l’intérieur du bloc = **padding: 10px;**
- marges : 30% à gauche, 10% à droite = **margin-left : 30%;** **margin-right : 10%**
- contour de bloc : épaisseur, couleur à gauche uniquement **border-left: 6px solid #1e7f9d**

### **Groupe 3**
- Le fond d'écran est passé du blanc au gris clair.
- La police des titres a changé.
- Les titres sont plus gros.
- La police des titres principaux est passée en petites majuscules.
- Les titres principaux sont passés du noir au bleu.
- L'alignement des titres principaux n'est plus à gauche, mais à droite.
- L'alignement des sous-titres est centré.
- La couleur des sous-titres est passé du noir au rouge.
- Sur la page 1, l'image est alignée à gauche.
- Sur la page 2, le texte est dans un encadré au fond bleu.
- Le texte dans les encadrés est justifié.

- La couleur de fond du body : blanc -> gris clair --> background-color:lightgrey
- La typo : times -> verdana --> font-family : verdana
- La couleur des h1 : noir -> bleu foncé --> h1 {color: navy
- L’alignement des h1 : gauche -> droite --> text-align right
- La taille des titres : plus gros --> font-size: 3em
- la variation de casse du h1 : normal -> petites capitales --> font-variant-caps: small-caps
- couleur de fond : blanc -> bleu --> background color: deepskyblue
- la couleur des h2 : noir -> rouge brique --> color:#b22222
- variante typo : roman -> italique --> font-style : italic
- marges : 30% à gauche, 10% à droite --> border-left 6px solid #1e7f9d ,
-

### **Groupe 4**

- Le fond du site a changé passant de blanc à gris
- Le style de police du menu a changé
- Le titre principal a changé d'emplacement passant d'un emplacement à droite à un emplacement à gauche, la couleur du titre est passée de noire à bleue,
- l'image est encadrée
- la couleur du sous-titre de noir à rouge
- la taille du titre est plus grande

### **Groupe 5**
- Couleur de fond ==> est passée de blanche à grise = background-color: lightgrey
- couleur du titre h1 devient bleue = color : navy
- typographie / police = body font-family: verdana
- police du grand titre change : font-size : 3em
- certains caractère des grands titres changent : font-variant-caps : small-caps
- les paragraphes passent de roman à italic : font-style : italic
- alignement des grands titres à droite : text-align : right
- alignement des sous-titres au centre text-align : center
- alignement des paragraphes en justifié: text-align : justify
- alignement de l'image au centre : text-align : center
- cadre bleu ajouté autour de la photo des pieds : border : 1px solid #1e7f9d
- les paragraphes sont écrits dans un encadré bleu, avec une marge bleue foncée sur la gauche : background-color:deepskyblue; ,

# Cours du 19/02/2021 : La mise en ligne

Pour un serveur web donné, il faut toujours lui associer une adresse URL.
Serveur web HTTP : Hypertexte transfert protocole
Pour que le site soit accessible, il faut lui associer une URL.
Modèle clients/serveur.
Internet : interconnexion de réseaux. A certains endroits, il y a des noeuds. Un noeud est un serveur web. A ce serveur web on peut associer une URL.

:::danger
Le raccourci clavier pour faire un tilde ~ sur un Mac est Option (ou ALT) + n.

Sur un pc, on obtient ~ en cliquant simultanement sur Alt Gr et la touche 2 du clavier, ne pas oublier d'appuyer sur la barre d'espace (~est un accent et a besoin de se poser sur quelque chose, comme ^.)
:::

À chaque fois qu’il y a une modif, il y a une nouvelle mise à jour.
Faire des copies : utiliser un client FTP qui va se connecter sur le serveur de la machine
On copie sur un serveur, on ne le déplace pas. Donc la copie ne se modifie pas toute seule.
On travail en local (donc pour soi), puis on le publie avec la mise à jour, pour que ça ne soit plus local mais que tout le monde puisse y accéder.

Une fois publié, le site internet est visible de TOUS.

Pour transmettre sur la machine et le serveur, il faut :
- Clients/ Serveur FTP : pour transférer des fichiers/ échanges de fichiers
**FTP** = File transfert protocole
Dans une même machine, il y a 2 programmes : 1 serveur HTTP et 1 serveur FTP.

- **Les problèmes de sécurité** : rien ne peut nous empêcher de voir les fichiers s'ils ne sont pas protégés (pas de mot de passe, etc). Tout le monde peut accéder à son fichier dès que l'on a accès à l'url.
- => personne ne peut aller sur le serveur et modifier ou supprimer ce qu'il y a dessus.

On a besoin de :
- Dire le nom de la machine **hôte** ( la machine qui me reçoit, celle du serveur).
- Dire qui tu es : Le nom d'utilistateur
- un mot passe

Port = 2222 pour nous

- On va faire du SFTP ( sécurisé ): s'il y a le "S", c'est comme un certificat permettant d'être certain que l'on a la bonne identité en face de nous. Une autre entité vérifie tous les certificats, toutes les clés, pour être sûr de l'identité du site.

Filezella
web-peda-iutb.univ-lille.fr