[Partie 1] Apprenez le HTML

Statut
N'est pas ouverte pour d'autres réponses.

HaRiBoMoDzz✓

ABSENT juqu'au 18 Aout
Premium
Inscription
12 Mai 2014
Messages
2 608
Réactions
1 358
Points
2 433
Salut a tous

Je vais vous presenter un tuto pour : Apprendre le HTML [Partie 1]

Ce tuto se divisera en plusieurs parties (Je ne sais pas encore en combien)

Je vais essayer d'etre le plus comprehensible pour que tout le monde puisse comprendre
Je vais donc me lancer sans plus tarder


Tout d'abord, comment creer des sites web :

La question que tout le monde se pose, comment creer un site web, eh bien c'est simple, et on est la pour sa.

Pour creer un site web, il suffit tout simplement de prendre un editeur de texte (oui vous m'avez bien entendu), un navigateur web (chrome, firefox, explorer...) et de rentrer du code (ce que nous allons apprendre)
Bloc note suffit comme editeur de texte (Personnellement, j'utilise sublim text 3 qui est un tres bon editeur)

Qu'on soit claire des le debut, html sert seulement a faire la "structure" du site pas le design
Pour le design, il faut apprendre un autre langage, le CSS (Tres facile a apprendre)


Voila a quoi ressemble un site seulement avec html
html6.png


Voila a quoi ressemble un site avec css
css1.jpg



Voila a quoi ressemble un code HTML
html1.png


Effrayant n'est pas ? Ne vous inquitez pas, j'ai eu la meme reaction quand j'ai commencé a l'apprendre
Mais ne commencez pas a vous inquitez, c'est tres tres facile

Voila les presentations fini, on va tout de suite passer a la pratique

Avant de rentrer dans le vif du sujet, je vais tout d'abord vous montrer comment enregistrer une page html

Il suffit tout simplement d'aller dans : Fichier>Enregister (sur bureau par exemple) et de mettre un titre MAIS a la fin du titre, mette .html. Par exemple, site.html
Cela va vous mettre une icone sur le bureau avec icone comme votre navigateur par defaut (chrome pour ma part)

En theorie, il suffirait juste de mettre du texte dans l'editeur de texte et de l'enregistrer en .html
En theorie biensur, certes cela marche, il y'aura du texte dans votre site web, mais cela n'est pas comme sa que l'on fais un site
Voila le code minimal pour creer un site web (je vous expliquerais dans le prochain tuto comment rentrer du texte etc)

HTML:
<!DOCTYPE html>[/B][/CENTER]
[B][CENTER]<html>
    <head>
        <meta charset="utf-8" />
        <title>Titre</title>
    </head>

    <body>

    </body>
</html>




Wouaww, vous etes impressionné je suppose pourtant rien de dure, seulement quelque expliquation s'impose:
Tout d'abord je vais vous expliqué la base des bases de ce langage qui sans sa on ne pourrais creer des sites webs, c'est ce que l'on appelle des balises (retenez bien ce mot)

Une balise, qu'est ce que c'est ? Tout d'abord, je tiens a vous dire qu'elles ne seront pas visibles par l'utilisateur (sinon quel bordel !).

A quoi sa sert ? Sa sert tout simplement a donner des instructions a l'ordinateur (grossierement)
Elles indiquent la nature du texte entourer, par exemple si on veut rentrer du texte on utilisera la balise <p> (je revienderais la dessus la prochaine fois), pareil pour les images sa sera la balise <img/>

Maitenant, il y a 2 type de balise :
Les balises en paire.
Elles ressembleront a sa <title>Bla bla bla </title>
Cela veut dire que tout ce se trouve entre les balises <title></title> est le titre

Les balises orpheline :
Elles ressembleront a sa <img/>,<a/>
Comme vous le voyez, il n y a qu une seule balise finit par un slash (tres important)
Elles serviront surtout a inserer des elements (image, liens...)

Dans ces balises, il y aura quasiment tout le temps des attributs
Qu'est qu'un un attribut ? Un attribut est une sorte d'option pour les balises
Par exemple, la balise <a/> (je reviendrais la dessus plus tard) doit etre obligatoirement accompagné de l'attribu href. Cette attribut sers a mettre le lien du site que vous voulez.

Rappelez vous du code que vous est mis tout a l'heure, je vais l'expliquer
On va decortiquer le code ligne par ligne

Tout d'abord le <!DOCTYPE html> : Elle indique que c'est bien une page html, a mettre au debut de tous vos codes
Ensuite juste en bas, on as une balise qui s'ouvre tout en haut (juste en bas du DOCTYPE) qui se nomme donc <html> et qui se ferme tout en bas, on doit tout mettre entre ces balises, c'est comme sa
Ensuite le head : entre ces 2 balisesse trouve tout se que l utilisateur ne vera pas (sauf le titre et encore)
Le meta charset sert grossierement a gerer les accents, les caracteres speciaux, etc... (je reviendrais la dessus)
Et enfin le body, c'est entre ces 2 balises que se passera tout ce que l'utilisateur verra, texte, image etc...

Voila pour cette 1ere partie, j'espere avoir ete le plus clair possible

Tutoriel realisé par mes soins, n'hesitez pas de me poser des questions, ou de me dire comment amerliorer mon tuto

YV
 
Dernière édition:

Switch.

Codeur Web à ton service | > Python
Premium
Inscription
13 Janvier 2013
Messages
2 956
Réactions
968
Points
6 491
Je ne veux pas être méchant mais c'est lourd à lire, fait des sous parties, des listes et surtout vas dans l'ordre des priorités
 

DrGenius RMK™

"Ain’t nobody who’s as good at what I do
"
Premium
Inscription
28 Novembre 2013
Messages
1 969
Réactions
944
Points
4 686
je trouve que c'est bien expliqué travail un peu la presentation et tu seras au top ;)
 

HaRiBoMoDzz✓

ABSENT juqu'au 18 Aout
Premium
Inscription
12 Mai 2014
Messages
2 608
Réactions
1 358
Points
2 433
J'ai refais la presentation, je n'ai pas tout refais, car cela prendrais des heures, j'espere que vous serez present pour la suite de cette serie ;)
 

✌️ Le S

Vendeur de Crédit FIFA 17 PS4 Rédacteur SEE
Premium
Inscription
22 Octobre 2012
Messages
3 349
Réactions
1 439
Points
17 095
Merci sa peut toujours servir
 
Statut
N'est pas ouverte pour d'autres réponses.
Haut