Structure HTML Materialize:structure HTML

1. Disposition de la page

images/07RI23.png

Exemple de contenu

La page de démonstration ci-dessus peut être découpée en entités logiques.

images/07RI24.png

Découpage HTML en entités logiques

Le tableau ci-dessous reprend la définition des différentes entités avec leur correspondance dans le code HTML.

Entité

Description

Lignes HTML

1

Barre de navigation

Contient le titre à gauche et les icônes d’action à droite.

28 à 40

2

Titre

30

3

Actions

Icônes permettant d’initier une action.

31 à 38

4

Contenu

Bloc contenant le contenu de la page.

42 à 59

5

Bloc

Bloc de type ICON.

45 à 51

6

Bloc

Bloc de type BIG_TEXT avec un footer.

45 à 57

La page est découpée en sections correspondant au code HTML ci-dessous :

01: <!DOCTYPE html>  
02: <html>  
03: <head>  
04:  <!--Import Google Icon Font-->  
05:  <link  
06: href="https://fonts.googleapis.com/icon?family=Material+Icons"  
07:  rel="stylesheet">  
08:  <!--Import materialize.css-->  
09:  <link type="text/css" rel="stylesheet"  
10:        href="css/materialize.min.css"   
11:        media="screen,projection"/>  
12:  <meta charset="UTF-8">  
13:  <!--Let browser know website is optimized for mobile-->...
couv_LF2PYRASPFL.png

Découvrez 

le livre :

Aussi inclus dans nos :

Précédent
Présentation
Suivant
Template Jinja