Une envie soudaine d’utiliser le langage HTML, seul souci, vous ne savez pas comment commencer ?  Par quoi commencer ?  Voici un premier cours où  je vous explique quelques bases de ce langage sur le logiciel Notepad++

capture d'écran sur le travail qui doit être fait

(A la fin de ce cours, on devrait avoir un résultat de ce genre …)

Ce que vous devez savoir sur  le Langage HTML :

Qu’est ce que HTML ? 

Hyper Text Markup Langage (langage à balises pour hypertexte)  est un langage de description de documents web, il permet de structurer leur contenu.

Balises:

La structure des documents est organisée à l’aide de ces balises.

Les différentes formes de balises: 

Ouvrantes et fermantes :  

Exemple:   <element> </element>  ,   <h1>   </h1> , <p> </p>, <strong> </strong>.

Balises auto-fermantes: 

Exemple : </br>, </img>.

NB: Il n’ y a pas de secrets pour connaitre ces balises, sauf de les apprendre en pratiquant.

Voici quelques balises que vous devez apprendre : http://css.mammouthland.net/balises-html.php 

 Hypertexte:

Les documents contiennent des hyperliens permettant un accès direct à une autre partie du document.

Ex: <a href= »https://débuteravechtml »> Html</a>

Image: 

Les images sont intégrées à l’aide de  la balise : </img>.

Tuto: 

 

Support notepad++

Voici le support Notepad++ sur lequel on va concevoir notre travail :

Structure HTML: 

1- En premier, nous allons concevoir la structure  de base de tout travail sur Html :

structure de base du travail dur html

 

Entête : 

2- En deuxième,  nous allons concevoir la partie entête:

Comme vous pouvez le voir,  nous avons inséré la balise  <center > pour centrer le sous- titre , la balise <p> pour annoncer un  paragraphe, la balise <h1> pour sous titre, la balise <abbr>   pour introduire une abréviation, <font- color > pour ajouter de la couleur et la balise <mark> pour surligner un  mot.

 

capture de l’entête du travail

Listes: 

3- Voici maintenant,  comment on introduit une liste à pus ou une liste numérotée : 

commencez  par introduire la balise ouvrante et fermante  <ul>  </ul>, ceci dans le but d’avoir une liste à pus.

 Ajoutez la balise ouvrante et fermante <li> </li> pour avoir du texte. 

Ex : <ul> <li> Culture </li> </ul>

<ul> <li> Art </li> </ul>

<ul> <li> Sport </li> </ul>

Afin d’avoir une liste numérotée: 

introduisez la balise ouvrante et fermante <ol> </ol> afin d’avoir une liste numérotée.

   ajoutez la balise <li> </li> pour ajouter  du texte.

capture des balises pour créer des listes

Tableau: 

4-Voici maintenant,  comment on dessine un tableau sur HTML: 

balises pour créer un tableau

NB:  la balise <hr> est utilisée afin de concevoir le trait qui sépare le texte du tableau.

A-  pour commencer introduisez le tableau pour cela:  insérez la balise  ouvrante et fermante <table>.

Dans cet exemple , nous avons introduit  le tableau, la couleur de la bordure, et son alignement:<table border bgcolor= » lightGray » align= »center »>.

B-Même  système que celui des listes : Insérez  la balise ouvrante et fermante <thead> </thead>.  (représentant l’entête du tableau). 

<tr>  balise ouvrante et  fermante qui représente le début et la fin d’une ligne de tableau.

<td>  qui représente la cellule des données.

La balise   <col> qui représente les colonnes du tableau et <row> qui représente les lignes.

La balise <colspan>  permet de fusionner deux colonnes et <rowspan> permet de fusionner deux lignes.

Exemple: 

<table border bgcolor= » lightGray » align= »center »>

<thead>

<tr>

<th scope= »col »>Groupe</th>

<th scope= »col »>Dimanche</th>

<th scope= »col »>Lundi</th>

 

</tr>

</thead>

<tbody>

<tr>

<th scope= »row » >1er groupe</th>

<td rowspan= »2″ bgcolor= »yellow »>Marketing</td>

<td class= »red »>Technique</td>

</tr>

<tr>

<th scope= »row »>2ème Groupe</th>

<td>Finances</td>

</tr>

</tbody>

</table>

 

<table border bgcolor= »blue »align= »center »>

<tr> <bgcolor=color »blue »> <td> Marketing, digital</td>  </bgcolor></border> </tr>

 </table>

Voilà, ce premier cours est fini,  j’espère que cela a été utile pour vous , on se retrouve très prochainement pour un nouveau tuto HTML.

 

Share on FacebookTweet about this on TwitterShare on LinkedInShare on TumblrDigg thisShare on Google+Print this pageEmail this to someone

Share Your Thought