Notes collectives Gr1

# Notes collectives Gr1 * 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**és**umé et faire des essais. * Nous utiliserons ce **HackMD** pour prendre des notes de ==manière== collaborative= --- ## SALLE 4 Il faut tout d’abord indiquer au navigateur le codage a utiliser. La norme de codage la plus utilisée est utf-8. Puis, en indiquant l’instruction <meta charset="utf-8"> dans la partie <head>…</head>** de chaque page du site, le navigateur affichera correctement toutes les pages. Le site n’aura plus de problèmes d’affichage et les caractères choisis seront affichés et visibles. ## SALLE 2 Pour résoudre votre problème il faut : 1. Aller dans votre éditeur de texte 2. Vérifier que votre éditeur de texte utilise le codage utf-8 (*cette information se trouve en bas à droite de votre éditeur*) Sur notepad++, on peut le modifier dans la fenêtre encodage. 3. Indiquer dans la partie **<head>…</head>** , l'instruction suivante : **<meta charset="utf-8">** :::info Attention : cette instruction doit être mise dans chaque page de votre site. ::: ==SALLE 3== # FAQ **Que faire si les caractères spéciaux comme les lettres accentuées ne s’affichent pas correctement sur certains navigateurs ?** Dans ton éditeur de texte, tu dois simplement indiquer dans la partie <head>…</head>** de chaque page de votre site par l’instruction suivante : '<meta charset="utf-8">' Car le navigateur ne sait pas en réceptionnant une page web ce qu’on lui demande d’afficher avec quelle table de codage. Ainsi, étant perdu, il n'affiche pas les lettres accentuées comme tu l'as écrit. Fais bien attention à ce que ton éditeur de texte soit encodé utf-8 sinon cela ne marchera pas (en bas à droite) :smile: :::info N'oublie pas de faire cette étape à chaque page de ton site. ::: Si c'est un problème de compaptibilité 1) retourner dans l'éditeur de texte 2) modifier le document afin qu'il soit en meta charset : utf-8 3) L'ordinateur ne sachant pas quelle table de codage utiliser, il en choisit une par défaut # La liste de nos outils ==SALLE 2== https://www.w3schools.com/html/html_editors.asp **w3schools** Voici un site sur lequel vous pouvez retrouver des tutoriels pour en apprendre plus sur l'HTML, il propose également des exercices d'entrainement. Si vous souhaitez modifier votre page web, vous devez utiliser votre éditeur de texte (notepad++, atom ...) car w3schools.com permet juste de visualiser de potentielles modifications, mais n'aura pas d'impact direct sur le code source de votre page web. **Inspecteur / examineur d'éléments** Lorsque vous vous trouvez sur une page web vous pouvez visualiser le code source (clic droit --> (afficher) code source de la page ) Cela permet de visualiser instantanément une modification, sans l'appliquer au code source initial. **Notepad++ / Atom** Deux éditeurs de texte permettant de créer et éditer des fichiers texte en langage HTML. **HACKMD** ==Salle 1== Les éditeurs de texte: Atom & Notepad++ Ces logiciels permettent de rédiger un langage html. Ainsi, ce langage peut être traduit en tant que site web. https://www.w3schools.com Ce site permet d'apprendre à coder en langage HTML. Les navigateurs: Chrome, Firefox, Safari, .... Ils permettent l'accès aux sites en langage HTML. HACKMD est collbaoratif est permet de s'entrainer et rediger comme sur un éditeur de texte. ==Salle 4== * Pour t'entraîner, tu peux utiliser : https://www.w3schools.com C'est un site qui donne des cours pour t'apprendre à faire ton site web et à maitriser le langage HTML. Tu pourras notamment t'apprendre à utiliser correctement les éditeurs HTML mais aussi comment faire des listes de description, par exemple. De plus, tu peux ensuite essayer toi-même ce que tu as appris au long du cours et voir tes erreurs et t'améliorer. * Pour éditer ton texte tu peux utiliser des logiciels comme Notepad++ ainsi que Atom qui te permettent de modifier ton site internet. * Également, pour apprendre un peu plus, si tu es curieux, tu peux aller sur n'importe quel site web et faire un clic droit et choisir "Code source de la page". Ainsi, tu pourras voir comment ils ont procédé pour créer ce site et t'en inspirer pour le tien. * HackMD, lui est un outils en ligne qui permet d'écrire avec le langage Markdown et de traduire visuellement et en direct son contenu pour voir ce que cela donne. Il est possible de s'en servir comme d'un éditeur de texte collaboratif ==Salle 3== * Atom & Notepad++ = éditeur de texte pour créer une page. * HackMD = document collaboratif surlequel on peut s'entrainer à rediger comme sur un éditeur de texte. * w3schools = site avec tutorials pour apprendre et s'entrainer à rédiger en HTML en temps réel. Agis tel un simulateur de navigateur puisque l'on peut voir directement le résultat du texte et de la page que l'on souhaite créer. * Outil Navigateur = sert à traduire le langage HTML en langage courant ==Salle 5== - Notepad++ et Atom : ce sont des éditeurs de texte permettant de créer une ou plusieurs pages html qui serviront à la création d'un site internet. - Nous avons aussi appris à utiliser un outil qui nous permet de voir le code source d'une page (Clic droit puis selectionner *Afficher le code scource de la page*) - HackMd : document collaboratif pour échanger et proposer nos idées - w3schools :logiciel qui nous permet de mieux comprendre le langage html en temps réel et assez rapidement. Grâce à des exercices proposés sur le site, nous pouvons nous entrainer ainsi que nous améliorer sur ces manipulations (grâce au résulat instantané) **w3schools** W3schools est un site sur lequel vous pouvez retrouver des tutoriels pour en apprendre plus sur l’HTML, il propose également des exercices d’entrainement. Il intègre un éditeur HTML couplé à un pseudo navigateur qui permet de visualiser instantanément le rendu web du code HTML saisi dans l'éditeur. Il ne peut malheureusement pas se substituer à l'éditeur de texte. **HACKMD** HackMD permet de manipuler et de créer autant de documents que l'on veut. Il s'agit d'un éediteur en ligne collaboratif qui utilise le langage markdown proposant une interprétation instantanée de notre code markdown en version web. On l'utilise pour faire de la prise de notes collaborative. **Editeurs de texte (notepad ++, atom,...)** Ce sont des éditeurs syntaxiques, ils reconnaissent la syntaxe HTML et donc ils colorisent les documents pour nous aider à la rédaction. **Navigateurs** Le navigateur ne traduit pas, il interprète. Il prend nos fichiers HTML, il les interprètent créant ainsi une vue de présentation. **L'inspecteur** Nous permet, une fois la page Html téléchargée, de voir toutes les caractèristiques techniques **Salle 4:** * Fond d'écran = de blanc à gris * Changement de police noir -> bleue * police en gras * Cadre autour de la photo * Typographies différentes H1 et H2 * paragraphe encadrer en bleu et centré. * Changement du titre de couleur rouge = texte centré * Dans le langage HTML, il y a la feuille de style **Salle 5** - Changement couleur du fond (blanc à gris) - Cadre autour de la photo - Changement de police - Différente couleur (noir à bleu et noir à rouge) - Encadrés bleus pour les textes, séparation en plusieurs paragraphes - Police en italique dans les encadrés bleus - Encadrés bleus centrés - Agencement texte (de gauche à droite) **Salle 1:** - Le fond n'est plus blanc mais gris. - La police est différente, la couleur du texte aussi : il passe du noir au bleu. - Une partie de texte est encadrée sur fond bleu et en italique. - La photo est encadrée. - Certaines phrases sont passées de noir à rouge. - L'agencement du texte n'est pas le même. - Il y a un carré sur chaque page, à gauche de l'écran. - L'image de la 1er page a rétrécie. **Salle 2** La police La couleur de la police L'arrière plan Alignement du texte Encadrement autour de la photo Arrière-plan police Une barre Majuscules pour le titre Texte devient italique **salle 3 ** la couleur de fond (blanc > gris) la taille des titre (petit > gros) l’image (pas contour > contour) la typographie (changement de police) les paragraphes (blanc > bleu / changement de police / contour / alignement) l’alignement (vers la droite) couleur texte ( noir > bleu / noir > rouge) marge contour des cases taille des titres Salle 4: h1 -Le backgroud-color permet de changer le fond blanc en d'autre couleur. -Le fond-family permet de changer la police. -Le text-align right permet d'aligner le texte à gauche. -Le font-size 3em, permet de modifier la taille du titre. -Le front variant caps: small caps, permet de mettre en majuscule le titre. h2 - -Le texte align center, permet d'aligner le texte au centre. - p - - **salle 1** * front size : 3em = taille de l'écriture (%, pixel ou em) * front variant caps : small cpas = mini majuscule * padding : valeur de marge intérieur * Margin : valeurs des marges extérieures. * Border : (contour de bloc) choix de l’épaisseur **Salle 2 ** * police -> {font-family} * taille de la police -> {font-size:} * Border :choix de l'épaisseur * Margin : la valeur de la marge extérieur * pour modifier la couleur --> {color:} * aligner le texte->{text-align:} * grandes ou petites capitales->{font-variant-caps: } * couleur du fond ->{background-color:} Salle 5 : * {color:} -> pour changer la couleur de la police * {background-color:} -> couleur du fond * {font-family:} -> police * {text-align:} -> aligner le texte * {font-size:} -> taille de la police * {font-variant-caps: } -> grandes ou petites capitales * {font-style:} -> pour écrire en italic * {border-left:} -> définir la taille de la bordure gauche * {margin-left:} -> valeur de la marge extérieure gauche * {margin-right:} -> valeur de la marge extérieure droite * {padding:} -> valeur des marges intérieures * {border-right:} -> définir la taille de la bordure droite **Salle 3** * Pour changer la couleur {background-color: couleur que tu veux frère} * Pour changer la police {font-family:} * Pour changer la couleur de la police {color: } * Pour aligner le texte {text-align:} * Pour définir la taille de la police {font-size:} * Pour écrire en petites capitales {font-variant-caps:} * Pour définir un style à la police {font-style: } * Pour définir la taille d'une marge extérieure gauche {margin-left: } * Pour définir la taille d'une marge extérieure droite {margin-right: } * Pour définir la taille de la marge intérieur {padding: } * Pour définir la taille d'une bordure gauche {border-left: } :::info ne pas oublier le ; à la fin de chaque ligne ex: border: 1px; text-align: center; ::: **COURS SUR LA MISE EN LIGNE** url : web-peda-iutb.univ-lille.fr/~prénom.nom/page1.html(ou le nom de notre page html) :::info ~:altGr + 2 "lacher" + espace ~: sur mac > "option"+ n ::: Navigateur = client web Le serveur répond aux demandes d'un client, si la demande n'est pas possible = error 404 Travailler en local = travailler sur sa machine sans le partager (privé) client/serveur FTP et http cohabitent dans une même machine. (ferme ta porte) (File Transfert Protocol) (fouille tes poches) (file ton portable) Métaphore du bar : 2 rue du chien qui pète. c'est une autre porte attention *alain preux 2021*ERROR 404 porte = port les serveurs sont associés à des PORCS en gros ya des porcs qui rentrent dans des bistrots pour avoir des bières si j'ai bien compris Y a embrouille avec les ftp et les http tu serais pas http? pcq sans toi jsuis :/ fébrile http = seulement pour avoir une copie de la page 1. on a besoin du nom de la machine Hôte (url) = celui qui accueille et celui qui est accueilli 2. le nom d'utilisateur 3. le mdp 4. on va faire du SFTP (secure file transfert protocol)its a prank enfait c'est du sftp y nous a eu 5. le nom du port 2222 000 l'oeuvre "on peut pas verifier que c'est bien chtikidikilé kilébien chtikidikilé" alain preux 2021 :::info l'artiste ![](https://i.imgur.com/047Uojg.png) AVANT LE COVID ICONE ![](https://i.imgur.com/MIgUQna.png) APRéS LE COVID ![](https://i.imgur.com/TUuE0Pb.png) bebou sa fille<3333333333 trop mims ![](https://i.imgur.com/lW1pzQo.png) ![](https://i.imgur.com/wbRAGWs.png) j'ai peur de cet homme ![](https://i.imgur.com/Lsh7WqF.png) jeune entrepreneur VALENTIN va manger des pommes au puy le boss la question elle est vite répondue ::: titi = dossier public_html = tout mon compte Fichiers à côté de public_html ne sont pas accessibles avec le web c'est pq il faut mettre dans le fichier public_html. Je peux utiliser mon compte FTP pour copier des fich Mettre en ligne son site c'est le recopier dans son espace. le cracage la roue libre on peut mettre titi ou toto url : Unified, Ressource, Locator. 3 pages -> menu Au moins une image et un texte Mise en page, en 4 zone. web-peda-iutb.univ-lille.fr/~prénom.nom/.html. ### FTP File Transfer Protocol Client FTP On a besoin de 5 infos : - Nom de la machine hôte (celui qui heberge) - Identifiant - Mot de passe - numéro de port - type de FTP ### Comment se connecter au serveur ? Protocole --> SFTP Hôte --> web-peda-iutb.univ-lille.fr Port --> 2222 Identifiant --> prenom.nom Mdp --> Quand on se connecte on a deux côté. A gauche les fichers present sur notre machine (en local). A droite les fichers distant qui sont sur le serveur. Si on modifie un fichier ça ne modifie pas ce qui à été copier sur le serveur. ### Comment rendre un fichier public ? Il existe un dossier particulier : public_html Tout ce qu'on veut qui soit accecible par le grand public, on doit le mettre dans ce dossier. ### Comment l'ouvrir sur un navigateur ? écrire dans la barre de recherche : web-peda-iutb.univ-lille.fr/~prenom.nom/nomdudossier/nomdufichier.html Sur une même machine il peut y avoir plusieurs serveurs (serveur web / serveurs FTP...). En fonction du port dans lequel il est rentrer c'est tel ou tel serveur qui repond. Serveru FTP sert à faire des copies d'un côté à l'autre. Le serveur web permet de repondre à la demande. ### Problème lors de la mise en ligne : Faire maj en rechargeant la page car si non le navigeteur ouvre ce qui est dans le cache. Cours du 19/03/21: <header> --- --- ---- </header> <nav> --- --- ---- </nav> <main> </main>

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.