Tutoriel Tutoriel - Bien débuter en langage HTML.

[deleted427552]

Bonjour à tous.
Aujourd'hui on se retrouve pour un nouveau tutoriel, je vais vous apprendre les bases du langages HTML en différents petits "cours"/"tutos".

Commençons sans plus attendre :

Créer des colonnes de hauteurs égales :​

1. Il va falloir créer 2 colonnes, comme ceci :​

<div id="colonne1">
</div>

<div id="colonne2">
</div>

Exemple de 2 colonnes montées différemment :

#colonne1
{
width:140px;
height:100px;
background-color:#0033CC;
float:left;
}

#colonne2
{
width:140px;
height:60px;
background-color:#0033CC;
float:right;
}

1. Il faut à présent englober les 2 colonnes par une balise <div> appelé conteneur :​

<div id="conteneur">

<div id="colonne1">
</div>

<div id="colonne2">
</div>

</div>

#conteneur
{
width:300px;
margin-top:20px;
padding-bottom:25px;
padding-top:5px;
}

#colonne1
{
width:140px;
height:100px;
background-color:#0033CC;
float:left;
}

#colonne2
{
width:140px;
height:60px;
background-color:#0033CC;
float:right;
}

Nous allons maintenant voir comment mettre ces 2 colonnes à la même hauteur :

Il faut mettre une image de fond à notre balise <div> conteneur qui permettra de donner une impression : Que les colonnes continuent.
Pour faire cela, il faut prendre une capture d'écran puis l'ouvrir avec un logiciel de retouche d'image. Prenez une partie de l'image où on voit les 2 colonnes.

Maintenant enregistrer cette image dans le dossier image de votre site, et après il faut le mettre comme fond à notre balise <div>conteneur.

<div id="conteneur">

<div id="colonne1">
</div>

<div id="colonne2">
</div>

</div>

#conteneur
{
width:300px;
margin-top:20px;
padding-bottom:25px;
background-image:url(images/fond.jpg);
padding-top:5px;
}

#colonne1
{
width:140px;
height:100px;
background-color:#0033CC;
float:left;
}

#colonne2
{
width:140px;
height:60px;
background-color:#0033CC;
float:right;
}

/!\ Cette manipulation est la plus importante de ce mini tutoriel alors faites très attention /!\

En ce moment vous avez 3 balises <div>​

• Le conteneur.​
• Nos 2 colonnes.​

Avec ce code le fond ne marche pas. Pourquoi ? Parce que les colonnes qui ont la priorité float: n'agrandissent pas le conteneur. Pour ça il va falloir utiliser encore une autre balise <div> dans laquelle nous devons appliquer la priorité CSS. (clear:both.) cette priorité est faite pour placer la balise <div> à laquelle la priorité s'applique en bas des autres balises ( <div> ) ayant la priorité float:. En clair notre balise <div> va s'agrandir.

<div id="conteneur">

<div id="colonne1">
</div>

<div id="colonne2">
</div>

<div id="bas">
</div>

</div>

#conteneur
{
width:300px;
margin-top:20px;
padding-bottom:25px;
background-image:url(images/fond.jpg);
padding-top:5px;
}

#colonne1
{
width:140px;
height:100px;
background-color:#0033CC;
float:left;
}

#colonne2
{
width:140px;
height:60px;
background-color:#0033CC;
float:right;
}

#bas
{
clear:both;
}

Tadam ! Les 2 colonnes ont la même taille !
J'espère avoir été assez clair et j'espère surtout en avoir aidé plus d'un.


[SECOND TUTORIEL EN COURS DE RÉDACTION]​

 

[Jordan']

Bon tuto et bien rédigé +1

 

[L3NNY]

Bon tuto

 

[deleted34147]

Tu devrais donner une preview. Sur un site, ou sur un screen

 

[deleted427552]

Tu devrais donner une preview. Sur un site, ou sur un screen

J'avais prévu de donner pleins de screens à la fin du topic et il me reste encore 3/4 tutos à faire lol.