Faire une page Web : partie 1 !

Voici la v2 de mon cours/tuto sur comment faire un site Web !


Tant que quelqu’un qui veut apprendre le web me diras que c’est trop compliqué, ne vous inquiétez pas, je vais le refaire en simplifiant au maximum !
Tout le monde en est capable ! Vous en faites tous dans le forum !
Bref, aujourd’hui, je vais parlez quels sont les bases du HTML et dans le cours suivant, nous allons voir les bases.
Tout d’abord, sachez que pour faire un site Web, il faut juste un navigateur Web et un éditeur de texte. Je vous redonne les trois principaux que vous pouvez utilisez et qui sont gratuit :
Notepad ++ : https://notepad-plus-plus.org/download/v7.5.6.html
Sublime Text 3 : https://www.sublimetext.com/3
Atom.io : https://atom.io
Prenez celui que vous voulez ou bien gardez le bloc note de base de système d’exploitation.

Bon ensuite continuons, comment allons nous créer notre premier site Web. Tout d’abord, créer un fichier texte (c’est le plus simple, mais ça devrait fonctionner avec n’importe quelle fichier). Bon ensuite , vous renommer ce fichier comme vous le voulez et changer l’extension de fichier par (.html). Bon je pense que c’est le point l’un des points les plus compliqué de ce cours, je vais donc vous expliquer !

Une extension de fichier sert a préciser quelle est le type de ce fichier. Par exemple, un « .mp4 » sert a dire à l’ordinateur que le ce fichier précisément est un fichier vidéo et qui doit être ouvert avec tel programme ( en l’occurence un lecteur de vidéo!) et bien c’est la même chose avec un fichier web ! Sauf que pour là, c’est l’extension « .html » qui sert à dire que l’ordinateur va savoir que le fichier sera une page web !

Bon ensuite ouvrez le grâce à votre éditeur de texte et écrivez «  » seulement avant que ce soit finis, appuyer sur « entrer »
La pleins de lignes devraient apparaître ! Bon comme dans le précédent tutos, je vais vous les expliquez une par une ^^

La première : Sert à dire que c’est du html !
Dans le deuxième bloc, le « head », vous allez mettre tous ce qui est vital à votre page.
Le fichier qui va servir à dire que la page doit avoir tel couleur de background ou encore que le site est affiché en tel ou tel police ! Mais aussi le titre qui sera affiché dans l’onglet du navigateur Web !
Pour l’instant c’est tout ce que vous allez mettre dans cette « section »
Et enfin la dernière : la balise « body »
C’est dans celle-ci que doit se trouver le principal de votre page Web, en l’occurrence le texte, les images ou les titres.

Bon pour finir ne soyez pas inquiétez par le vocabulaire : les balises vous en utilisez déjà dans vos messages : lorsque vous citez un message, que vous le mettez en gras, vous utilisez déjà des balises ! Ce n’est pas plus compliqué que ça !
Bon dans le prochain tuto qui arrivera dans peu de temps, je vais vous donner les balises de bases pour faire votre site Web !

Ca fait longtemps que je n'ai pas exercé mon HTML/CSS, je ferai peut-être ça, si j'arrive à dégager un peu de temps ce week-end.

Malheureusement c'est trop compliqué pour moi pour que j'essaye

Sinon c'est toujours sympa d'apprendre des petits trucs ^^

MeitanteiEdogawa a écrit:

Ca fait longtemps que je n'ai pas exercé mon HTML/CSS, je ferai peut-être ça, si j'arrive à dégager un peu de temps ce week-end. [smiley]https://2img.net/i/fa/i/smiles/icon_wink.gif[/smiley]

Cool @ME !

Dommage Misao, mais du coup ça veut dire que j'ai raté quelque chose est ce que c'est parce que c'est trop long ?

Envoyé depuis l'appli Topic'it

J'ai trouvé cette version très facile à suivre ! Bon boulot, SA !

Porto a écrit:

J'ai trouvé cette version très facile à suivre ! Bon boulot, SA ! [smiley]https://2img.net/u/2912/26/61/02/smiles/2812029075.png[/smiley]

Merci ^^
C'est vrai que dans l'ancienne version j'avais un peu mis pas mal de chose sans vraiment expliquer me disant que c'etait évident XD
Malheureusement ça m'arrive souvent et vu que quasiment toute ma famille savent faire du Web je peux pas leur demander de relire pour la base ^^

Envoyé depuis l'appli Topic'it

T'inquiète, ce sont des choses qui arrivent ! x)

Non mais t'inquiètes c'était pas trop long c'est juste que j'avais un peu de mal à suivre mais là c'est super ^^

Par contre je n'ai pas trop compris, quand on fait un site web, il est automatiquement public ou privé ?

tant que tu ne le publie pas il est privée ^^
Je ferais peut-être la mise en ligne vers la fin

Ah d'accord merci, j'essayerai de faire ça dans la semaine.

Je ne sais pas si tu l'as mis dans la suite du tuto, mais je voudrais juste préciser quelques points qui me paraisse plus intéressant qu'important :

1/
L’extension d'un fichier n'est pas obligatoire, vous pouvez mettre ce que vous voulez ou même ne rien mettre. Par exemple, vous pouvez renommer un fichier "fichier.pdf" tout simplement par "fichier" ou "fichier.bidule".
En faite, tous les fichiers peuvent théoriquement se lire sur un bloc-note (si on considère un bloc-note capable de lire tous les symboles), mais la plupart des fichiers sont codés (un code qui permet, en général, de créer une mise en forme plus belle qu'un simple texte). Pour décoder ce fichier, on utilise un logiciel, qui va traduire le code et présenter notre fichier comme il faut (en fonction du code).
Sauf qu'il y a plusieurs façon de coder, comme il y a plusieurs façon de mettre du texte en forme. Ça dépend juste de vos besoins. Et pour chaque "code", il y a un décodeur différent, donc un logiciel différent pour lire ce code.

Par exemple, en LateX, on écrit $\frac{1}{x}$ pour simplement représenter 1/x de façon "jolie" sur un pdf. Le logiciel LateX permet de traduire ce code et de le mettre en forme.

Il faut donc ouvrir notre fichier avec le bon logiciel pour pouvoir le lire (en version "décodé"). C'est pourquoi on a inventé une technique : l'extension. Après le nom de notre fichier, on rajoute un "." suivi de quelques lettres. Chaque extension va être associée à un logiciel, et l'ordinateur va donc savoir, grâce à cette extension, avec quel logiciel il doit ouvrir le fichier.

Maintenant, si je prend mon fichier, codé pour le pdf, mais sans extension, il me suffit de l'ouvrir avec un logiciel de lecteur pdf (click droit ... ouvrir avec...), et paf, ça marchera quand même.

2/
Pour rebondir la dessus, et pour répondre également en partie à la question de Misao, une page web est un fichier comme les autres. Il est codé avec un langage qu'on appelle le html. Les navigateur web sont des logiciels qui décode (et donc mettent en forme) les textes écrit en html.

Ce que nous apprend pour l'instant SA, c'est écrire en HTML, pour que notre texte soit comprit par un lecteur html. Donc comment "coder la mise en forme" en langage html.

Donc pour l'instant, il n'y a aucun lien avec internet, tu peux faire tout ça sans internet, sur ton propre ordinateur. Du coup, personne n'aura accès à ton fichier sans pouvoir accéder à ton ordinateur. Tu peux être tranquille et faire tes propres expériences. Ton navigateur web ne servira qu'à lire ton code.


Ensuite, si tu veux que ton code soit publique, donc accessible par tous, il faut que tu le mettes sur un serveur, en gros un ordinateur dont on peut accéder via internet. Ton fichier (donc ta page) sera stocké au milieu d'une multitude d'autres pages. Pour la retrouver, il faut dire où la chercher, donc, comme pour les maison, on associe son emplacement à une adresse. Comme ça, à partir de l'adresse, on peut la retrouver. Mais ça, ce n'est que si tu donnes accès à cet "ordinateur" (et qu'il soit allumé). Je ne rentre pas plus dans les détails, j'imagine que SA l'expliquera plus tard.

C'est exactement ça !
Je pensais l'aborder plus tard mais comme tu l'a fait c'est génial ^^
il faut juste que je me remettre à jour ...