[Partie 2] 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

On se retrouve pour la 2nd partie du tuto : Apprenez le HTML

J'espere que vous avez retenus et compris le tuto 1, si ce n'est pas le cas, je vous conseil et invite de retourner au tuto 1, en effet, si ces choses ne sont pas retenues, vous ne pourrez comprendre la suite, car ce sont les bases de l'html.

Aujord'hui, on va parler des balises et de leurs roles

Rappelez vous du code "minimal" que je vous avez presenté
Code:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Titre</title>
    </head>

    <body>

    </body>
</html>

C'est le code minimal, a mettre tout le temps

Maintenant, c'est bien beau d'avoir ce code minimal, mais on en fait quoi ?
C'est vrai, je vous l'avoue, que si on enregistre ce fichier en .html (rappelez vous de l'autre cour), on aura une page blanche.
Je vous rassure, c'est normal.

On va donc pour l'instant, ce concentrer uniquement sur les 2 balises : <body>/</body>

La ce passera tout ce que l'utilisateur verra

Il faudra donc mettre ce que je vais vous apprendre, entre les balises body

On va donc voir differente balise pour faire differente chose

C'est partit, on commence par une premiere balise, dite paire (rappelez vous de l'autre cour)

LES TITRES :

Cette balise ce nomme : <p>bla bla bla</p>

Ici, vous mettrez le texte que vous voudrez afficher, tout simplement

Exemple :
Code:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Titre</title>
    </head>

    <body>
          <p>Voici du texte</p>
    </body>
</html>

Et donc, quand vous enrengistrez en .html, la page affichera : Voici du texte

Maintenant si on veut passer une ligne, il suffit simplement de rajouter la balise orpheline, la ou vous voulez passer une ligne (j'espere que vous avez bien saisi le concept) : <br/>
Il faudra simplement fermer la balise </p>
a la fin du texte, cela signifie que la balise <br/> sera a l'interieur de la balise <p>.
Voici un code exemple :
Code:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Titre</title>
    </head>

    <body>
          <p>Bonjour et bienvenue sur mon site<br/>
                Amusez vous bien</p>
    </body>
</html>

Ce qui va donner au final :

html1.jpg


Je pense avoir tout dis sur cette balise

Passons maintenant a une autre balise, celle qui permet d'afficher des titres
Qu est ce que des titres, bah ce sont des titres :trollface:

Ces balises serviront donc a afficher des titres, mais des titres speciaux, si par exemple un titre est important, on utliseras la balise <h1></h1>, le titre sera affiché en grand, <h2> en un peu moins grand (utilisé dans les sous titres au meme titre que <h3>) et donc <h3>
Il y a aussi <h4>,<h5>et<h6>, mais qui sont rarement utlisé, concentré vous sur ces 3 citées plus haut.


Voici un exemple d'utilisation de titre
Code:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Titre</title>
    </head>

    <body>

   <h1>Bienvenue sur mon site !</h1>
   <h2>De quoi parle mon site </h2>
   <p> Mon site parlera, d'informatique !</br>
          En effet, l'informatique est ma passion, et j'ai decidé
          faire un petit site pour vous apprendre l'HTML ! </p>
    </body>
</html>

html2.jpg


Facile, non ?

Il reste quelque balise a vous presenter

La mise en valeur

En effet, il y a 2-3 balises qui permettent d'indiquer que le texte est important

!!! ATTENTION !!!
Ces balises ne serviront pas a mettre en gras, italique etc..., servent seulement a dire a l'ordinateur : Tiens ce mot est important, met le en valeur. Je sais que c'est dur a comprendre, mais croyé moi, on utilisera le css pour ce genre de chose


Donc je vais vous presenter 3 balises

La balise <em> </em> servira a faire ressortir le texte en le mettant en italique (relisez l'avertissement)
Par exemple :​
Code:
<body>

   <h1>Bienvenue sur mon site !</h1>
   <h2>De quoi parle mon site </h2>
   <p> Mon site parlera, <em>d'informatique !</em></br>
          En effet, l'informatique est ma passion, et j'ai decidé
          faire un petit site pour vous apprendre l'HTML ! </p>
    </body>
Dans cette exemple, le mot informatique sera en italique

Cette fois ci, la balise <strong> </strong> mettra de l'importance au texte en le mettant en gras
Code:
<body>

   <h1>Bienvenue sur mon site !</h1>
   <h2>De quoi parle mon site </h2>
   <p> Mon site parlera, <strong>d'informatique !</strong></br>
          En effet, l'informatique est ma passion, et j'ai decidé
          faire un petit site pour vous apprendre l'HTML ! </p>
    </body>

Et enfin, la balise <mark><mark> surlignera le texte
Code:
<body>[SPOILER="http://induste.com/threads/partie-1-apprenez-le-html.339410/"][/SPOILER]

   <h1>Bienvenue sur mon site !</h1>
   <h2>De quoi parle mon site </h2>
   <p> Mon site parlera, <mark>d'informatique !</mark></br>
          En effet, l'informatique est ma passion, et j'ai decidé
          faire un petit site pour vous apprendre l'HTML ! </p>
    </body>

Bon alors voila, je pense en avoir assez dit la dessus, je pensais vous apprendre plus de chose, mais le topic est deja long, donc je pense que la suite va venir ce soir ou demain

N'hesitez pas si vous avez des questions, ou si j'ai mal expliqué un truc

Voila et a bientot ;)

Lien de la partie 1 : http://induste.com/threads/partie-1-apprenez-le-html.339410/​
 
Dernière édition:

HaRiBoMoDzz✓

ABSENT juqu'au 18 Aout
Premium
Inscription
12 Mai 2014
Messages
2 608
Réactions
1 358
Points
2 433
Vous voulez une 3eme partie ou non, je vois que pas beaucoup de personne le suive :/
 

ARBEL

Premium
Inscription
15 Octobre 2013
Messages
2 245
Réactions
832
Points
12 466
+1 Même si je sais déjà codé l'HTML mais ça aide pour ceux qui ne savent pas ;)
 
Statut
N'est pas ouverte pour d'autres réponses.
Haut