or
or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up
Syntax | Example | Reference | |
---|---|---|---|
# Header | Header | 基本排版 | |
- Unordered List |
|
||
1. Ordered List |
|
||
- [ ] Todo List |
|
||
> Blockquote | Blockquote |
||
**Bold font** | Bold font | ||
*Italics font* | Italics font | ||
~~Strikethrough~~ | |||
19^th^ | 19th | ||
H~2~O | H2O | ||
++Inserted text++ | Inserted text | ||
==Marked text== | Marked text | ||
[link text](https:// "title") | Link | ||
 | Image | ||
`Code` | Code |
在筆記中貼入程式碼 | |
```javascript var i = 0; ``` |
|
||
:smile: | ![]() |
Emoji list | |
{%youtube youtube_id %} | Externals | ||
$L^aT_eX$ | LaTeX | ||
:::info This is a alert area. ::: |
This is a alert area. |
On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?
Please give us some advice and help us improve HackMD.
Do you want to remove this version name and description?
Syncing
xxxxxxxxxx
Notes collectives Gr1
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 :
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)
- 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é
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
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:
Salle 5
Salle 1:
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
**Salle 2 **
Salle 5 :
Salle 3
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
000 l'oeuvre
"on peut pas verifier que c'est bien chtikidikilé kilébien chtikidikilé" alain preux 2021
l'artiste
ICONE
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 :
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: