owned this note changed 4 years ago
Published Linked with GitHub

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ésumé 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">

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)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

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: }

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)

~: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 2021ERROR 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

l'artiste

AVANT LE COVID
ICONE

APRéS LE COVID

bebou
sa
fille<3333333333
trop mims


j'ai peur de cet homme


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:

--- --- ----
Select a repo