HTML : LES BASES 1

LeSorcier · 7 Mars 2018

Bonjour/Bonsoir (,)

Aujourd'hui nous allons commencer tous ensemble à apprendre l'html ! Tout les liens utiliser dans le tutoriel seront donné

.

ⒽⓉ

Ⓛ : ⓁⒺⓈ ⒷⒶⓈⒺⓈ™

Les Logiciels à posséder :
╔═════════════════╗
Les Editeurs de Texte :
- notepad++ (éditeur de texte)
- sublimetext (éditeur de texte)
╚═════════════════╝

Dans ce tutoriel nous allons nous consacrer aux corps d'une page html.

I : Créer un fichier en .html

Tout d'abord, lancer vôtre éditeur de texte et enregistrer un fichier en .html
Puis une fois le fichier en .html ouvert, entrer une phrase.
Dans mon cas j'ai entrer ceci :

Code:

CC MTX
VOUS ALLEZ BIEN ?

Une fois la phrase écrite, rendez-vous sur l'emplacement de votre dossier et double cliquer dessus. Si tout se passe bien, votre navigateur internet devrais s'ouvrir et vous afficher votre phrase :

(Dans mon cas sa s'affiche comme si-dessous)

"

"

Mais alors vous regarder bien et vous vous dites, "mais il n'a pas sauter de ligne ?"
Ne paniquer pas, c'est normal. Il suffit d'entrer le code comme ceci :

Code:

CC MTX
<br />
VOUS ALLEZ BIEN ?

et magique, si vous sauvegarder et vous recharger la page, la phrase est allé à la ligne.
"

"
II : Le titre de votre site

Nous allons maintenant passer à l'étape suivante. Elle vous permettra d'avoir un nom à votre onglet.
Trève de bavardage, pour renommer l'onglet de votre site, il suffit de rajouter la balise suivante à votre site :

Code:

<title> MTX LE PLU BEAU </title>

Résultat :
"

"

Mais c'est quoi balise en Html ?
Définitions du sites developper.com

Une balise HTML est un élément que l'on va ajouter au texte de départ pour dire au navigateur de quelle manière l'afficher. Elle n'est pas affichée telle quelle dans le navigateur, elle est interprétée par celui-ci. Elle est toujours délimitée par les signes < et >.

Bref maintenant que vous avez compris c'est quoi une balises ont va pouvoir commencer les choses sérieuse.

III : Enlever les erreurs d'accent

Vous en avez marre de voir vos erreurs d'accent à chaque é qui devient @"ççè(' pas de problème, il suffit d'insérer ce code à votre texte déjà existent ce qui vous donnes se code :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <title> MTX LE PLU BEAU </title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" media="screen" title="Essai" href="Index.css"/> </head> <body>
CC MTX
<br />
VOUS ALLEZ BIEN ? é </body>
</html>

Faites attention à ne jamais oublier de fermer les balises.

-------------
IMPORTANT : Lors de l'ouverture d'une balises il y en à une autre qui s'ajoute pour la fermer.
Exemple :

<baliseouverte> Blablabla </balisequiferme>
-------------

Et si vous avez bien suivis mon tutoriel, à la fin, sa devrait vous donnez ceci :

é

au lieu de cela

Ã©

Bref merci d'avoir suivis le tutoriel et nous nous retrouvons bientôt pour un nouveau tutoriel !
HeyGuys

AyZenSantos · 7 Mars 2018

très utile ! gg

moi personellement je suis au stade genre des boutons qui rédigé vers les liens , surtout comment faire un jolie boutons et genre placer les textes à X endroit et tout comment fait-on pourrait tu m'aider enfin plutôt m'apprendre ^^ ?

Taink · 7 Mars 2018

AyZenSantos à dit:
très utile ! gg

moi personellement je suis au stade genre des boutons qui rédigé vers les liens , surtout comment faire un jolie boutons et genre placer les textes à X endroit et tout comment fait-on pourrait tu m'aider enfin plutôt m'apprendre ^^ ?

Ça c'est plus du Javascript :s

LeSorcier à dit:
╔═════════════════╗
Les Editeurs de Texte :
- notepad++ (éditeur de texte)
- sublimetext (éditeur de texte)
╚═════════════════╝

Sublime text master race, c'nul notepad++ :c

LeSorcier · 7 Mars 2018

Taink à dit:
Ça c'est plus du Javascript :s

Sublime text master race, c'nul notepad++ :c

notepad <3

Wilders à dit:
Salut,

C'est faux, il y a même un contre-exemple dans ton exemple: la balise meta dans le head ne possède pas de balise fermante, un autre exemple: la balise img (qui permet d'insérer une image en HTML), ce sont des balises orphelines.
Pour les accents, il suffit juste d'enregistrer le fichier en UTF-8, ou tout simplement d'ajouter <meta charset="utf-8"> dans le head.
Le reste est inutile. En gros on aurait le code de base suivant:

Code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test pour MTX</title> </head> <body> </body> </html>

Au cas ou tu n'as pas compris mon tutoriel sert à faire comprendre se que son les bases de l'html. Sa ne sert à rien de leur donner une bases toute faites, il faut qu'ils comprennent par eux mêmes. Si tu es pas content tu peux t'abstenir et passer ta route

AyZenSantos · 7 Mars 2018

LeSorcier à dit:
notepad <3

Au cas ou tu n'as pas compris mon tutoriel sert à faire comprendre se que son les bases de l'html. Sa ne sert à rien de leur donner une bases toute faites, il faut qu'ils comprennent par eux mêmes. Si tu es pas content tu peux t'abstenir et passer ta route

moi je connais déjà tout les bases grâces à un site et il te fait carrément des exercices ce qui est + pratique ^^

LeSorcier · 7 Mars 2018

AyZenSantos à dit:
moi je connais déjà tout les bases grâces à un site et il te fait carrément des exercices ce qui est + pratique ^^

Je vais essayer de finir rapidement les bases et de passer au css et au js pour avoir des animations, ect ...
Pourquoi pas apprendre à relier des compte steam aux sites sa pourrais être cool

ZarosOVH · 7 Mars 2018

LeSorcier à dit:
Pourquoi pas apprendre à relier des compte steam aux sites sa pourrais être cool

Tellement simple, vraiment besoin d'un tuto pour ca ?

᠌ ᠌ ᠌ ᠌ ᠌ ᠌᠌ ᠌ ᠌ ᠌ · 7 Mars 2018

LeSorcier à dit:
Bonjour/Bonsoir (,)

Aujourd'hui nous allons commencer tous ensemble à apprendre l'html ! Tout les liens utiliser dans le tutoriel seront donné .

ⒽⓉⓁ : ⓁⒺⓈ ⒷⒶⓈⒺⓈ™

Les Logiciels à posséder :
╔═════════════════╗
Les Editeurs de Texte :
- notepad++ (éditeur de texte)
- sublimetext (éditeur de texte)
╚═════════════════╝

Dans ce tutoriel nous allons nous consacrer aux corps d'une page html.

I : Créer un fichier en .html

Tout d'abord, lancer vôtre éditeur de texte et enregistrer un fichier en .html
Puis une fois le fichier en .html ouvert, entrer une phrase.
Dans mon cas j'ai entrer ceci :

Code:

CC MTX VOUS ALLEZ BIEN ?

Une fois la phrase écrite, rendez-vous sur l'emplacement de votre dossier et double cliquer dessus. Si tout se passe bien, votre navigateur internet devrais s'ouvrir et vous afficher votre phrase :

(Dans mon cas sa s'affiche comme si-dessous)

"

"

Mais alors vous regarder bien et vous vous dites, "mais il n'a pas sauter de ligne ?"
Ne paniquer pas, c'est normal. Il suffit d'entrer le code comme ceci :

Code:

CC MTX <br /> VOUS ALLEZ BIEN ?

et magique, si vous sauvegarder et vous recharger la page, la phrase est allé à la ligne.
"

"
II : Le titre de votre site

Nous allons maintenant passer à l'étape suivante. Elle vous permettra d'avoir un nom à votre onglet.
Trève de bavardage, pour renommer l'onglet de votre site, il suffit de rajouter la balise suivante à votre site :

Code:

<title> MTX LE PLU BEAU </title>

Résultat :
"

"

Mais c'est quoi balise en Html ?
Définitions du sites developper.com

Bref maintenant que vous avez compris c'est quoi une balises ont va pouvoir commencer les choses sérieuse.

III : Enlever les erreurs d'accent

Vous en avez marre de voir vos erreurs d'accent à chaque é qui devient @"ççè(' pas de problème, il suffit d'insérer ce code à votre texte déjà existent ce qui vous donnes se code :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <title> MTX LE PLU BEAU </title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" media="screen" title="Essai" href="Index.css"/> </head> <body> CC MTX <br /> VOUS ALLEZ BIEN ? é </body> </html>

Faites attention à ne jamais oublier de fermer les balises.

-------------
IMPORTANT : Lors de l'ouverture d'une balises il y en à une autre qui s'ajoute pour la fermer.
Exemple :

<baliseouverte> Blablabla </balisequiferme>
-------------

Et si vous avez bien suivis mon tutoriel, à la fin, sa devrait vous donnez ceci :

é

au lieu de cela

Ã©

Bref merci d'avoir suivis le tutoriel et nous nous retrouvons bientôt pour un nouveau tutoriel !

Avant de faire un tuto sur les bases du HTML commence par les connaitres :x

Nestor · 7 Mars 2018

Beaucoup plus simple et complet d’aller directement içi: https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3

HTML : LES BASES 1

LeSorcier

Nouveau né

AyZenSantos

Psychopathe

Taink

El Magnifico

LeSorcier

Nouveau né

AyZenSantos

Psychopathe

LeSorcier

Nouveau né

ZarosOVH

Modérateur

᠌ ᠌ ᠌ ᠌ ᠌ ᠌᠌ ᠌ ᠌ ᠌

Psychopathe

Nestor

Geek suprême