création de site internet

13
Complément sur l’HTML 1

Upload: amethyst-fry

Post on 03-Jan-2016

20 views

Category:

Documents


1 download

DESCRIPTION

Création de site internet. Complément sur l’HTML. La gestion par blocs. Les balises HTML se divisent en 2 catégories : En blocs : les uns en dessous des autres , , , , ...,... En ligne : les un à la suite des autres , , , , ,... - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Création de site internet

Complément sur l’HTML

1

Page 2: Création de site internet

La gestion par blocsLes balises HTML se divisent en 2 catégories :

En blocs : les uns en dessous des autres <p>, <ul>, <li>, <div>, <h1>...<h6>,...

En ligne : les un à la suite des autres <a>, <strong>, <em>, <span>, <img>,...

Il est possible d’imbriquer des blocs :Une balise bloc peut contenir tout type de balise

et avoir une largeur et une longueurUne balise en ligne ne peut contenir que des

balises en ligne !

2

Page 3: Création de site internet

Les blocs DIVLa balise la plus adaptée pour le

positionnement est la balise DIVBalise neutre (invisible)Conteneur/délimiteurConfigurable à souhait (position, couleurs,

tailles,...)

Utilisation du CSSEn ligne : <div style="color:#123">Bla</div>Classes : <div class="monDiv">Bla</div>

3

Page 4: Création de site internet

Les classes CSSExemple de classe CSS :

.bloc {width: 100px;

height: 100px;

background-color: yellow;

margin-left: 15px;

margin-top: 200px;

}

4

Page 5: Création de site internet

Positionnement des blocsPar défaut :

Se place en haut à gauche de son conteneur.Prend toute la largeur de ce conteneur.

Grâce au CSS :Modifier la position relative grâce aux margesChanger la taille du bloc

Le CSS permet d’utiliser différentes mesures :px : nombre de pixels% : pourcentage de la taille du contenantem : taille d’un caractère

5

Page 6: Création de site internet

Exemple (par marges)

6

Body

<div class="test">

.test{Margin-top:30px;Margin-left:10%;Width:100px;Height:50em;

}

Page 7: Création de site internet

Positionnement des blocsPositionnement flottant

permet de positionner un bloc à gauche ou à droite dans un conteneur

Le reste du conteneur occupera alors l’espace laissé libre.

Permet par exemple de placer des images à droite :

<div class="conteneur">texte bla bla bla....<img style="float:right;" .../>

</div>

7

Page 8: Création de site internet

Positionnement des blocsPositionnement absolu

Permet de donner un positionnement rigideSeul moyen de superposer deux blocsRetiré du « flux » HTML (n’interfèrera pas avec

les autre)Il est placé par rapport à son bloc conteneur

8

Page 9: Création de site internet

Exemple (position absolue)

9

Body

<div style="position:absolute;">

<div style="position:absolute;left:50px;top:50px;">

Page 10: Création de site internet

Les tableauxPour simplifier la mise en page

<table> : pour commencer un tableau<caption> : pour le titre du tableau<th> : Définit l'en-tête de chaque

colonne<tr> : Définit une ligne<td> : Définit une cellule

Possible de spécifier un style pour chaque balise

10

Page 11: Création de site internet

Exemple<table border=1>

    <caption>Légende du tableau</caption>

    <tr>

        <th>Colonne 1</th>

        <th>Colonne 2</th>

    </tr>

    <tr>

        <td>Cellule 1</td>

        <td>Cellule 2</td>

    </tr>

</table>

11

Page 12: Création de site internet

Alignementalign=left : (par défaut) Les données sont alignées à gauche de la

cellule (pour td) ou de toutes les cellules (pour th ou tr)align=right : Les données sont alignées à droite de la cellule (pour

td) ou de toutes les cellules (pour th ou tr)align=center : Les données sont centrées à l'intérieur de la cellule

(pour td) ou de toutes les cellules (pour th ou tr)valign=middle : (défaut) Les données sont centrées verticalement

à l'intérieur de la cellule (pour td) ou de toutes les cellules (pour th ou tr)

valign=top : Les données sont en haut de la cellule (pour td) ou de toutes les cellules (pour th ou tr)

valign=bottom : Les données sont en bas de la cellule (pour td) ou de toutes les cellules (pour th ou tr)

valign=baseline : Toutes les données des cellules sont alignées sur une ligne commune (uniquement pour th ou tr)

12

Page 13: Création de site internet

Fusionner des cellulesPour une ligne :

<td colspan=2>2 cellules fusionnées</td>Pour une colonne :

<td rowspan=2>2 cellules fusionnées</td>

13