- Inscription
- 12 Mai 2014
- Messages
- 2 608
- Réactions
- 1 358
- Points
- 2 433
-
Réponse de HaRiBoMoDzz✓ Informatique et nouvelles technologies Développement : [Partie 2] Apprenez le HTML
- #1
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é
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 :
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
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>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
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://realitygaming.fr/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 :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Dernière édition:
