# data[].attributes.body
un doc html a une strucure de base
qui est toujours la même  (enfin presque)

<html>
<head>
</head>
<body>
</body>
</html>

# data[].attributes.body
<head>
dans un premier temps, on ne met rien dedans

<body>
c'est  là qu'on va mettre des choses!

du texte,

des listes

des tableaux

des images

des icônes

des formulaires (zones de saisie d'informations)

et bien d'autres

des liens vers d'autres pages /sites

des documents à télécharger

# data[].attributes.body
on y ajoute toutfois quelques infos utiles

la description de la page <meta ...>

l'auteur <meta ...>

le titre!  <title>

<html>
<head>
<title>StringArt Maker</title>
<meta name="description" content="Sla decription de la page">
<meta name="author" content="MizeBest">
</head>
<body>
</body>
</html>

# data[].attributes.body
et on y ajoute enfin des informations techniques

la langue employée

charset (= encodage des caracteres)

et doctype (= pour la compatibilite anciens navigateurs )

ça donne :

<!DOCTYPE html>
<html lang="fr">
<head>
<title>StringArt Maker</title>
<meta name="description" content="Sla decription de la page">
<meta name="author" content="MizeBest">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
</head>
<body>
</body>
</html>

# data[].attributes.body
Pour un tableau donné on a :
- le tableau,
- les lignes,
- les cellules,
en html, c'est défini par les balises
<table>
<tr>
<td>

# data[].attributes.attachment_link.readable_text
On va créer un tableau Pour un tableau donné on a : - le tableau, - les lignes, - les cellules, en html, c'est défini par

exemple :

cellule 1 1 | cellule 1 2 | cellule 1 3
cellule 2 1 | cellule 2 2 | cellule 2 3

# data[].attributes.body
Q1 : quelle balise correspond à une ligne d'un tableau dans le code html ?
Q2 :quelle balise correspond à une cellule (=une case) d'un tableau dans le code html ?
ex1 : ajouter 2 lignes au tableau

# data[].attributes.attachment_link.description
Find and create gamified quizzes, lessons, presentations, and flashcards for students, employees, and everyone else. Get started for free!

# data[].attributes.body
En lui ajoutant des bordures :

-> autour du tableau lui même
<td style='border:solid 3px black;'>

-> autour de chaque cellule
<td style='border:solid thin black;'>

# data[].attributes.attachment_link.readable_text
On va améliorer le tableau

On va lui ajouter des bordures :

-> autour du tableau lui même 
<table style='border:solid 3px black;'>

-> autour de chaque cellule
<td style='border:solid thin black;'>	


---------------------------------------------------
<table style='border:solid 3px black;'>
  <tr>
    <td style='border:solid thin black;'>cellule 1 1</td> 
    <td style='border:solid thin black;'>cellule 1 2</td>  
    <td style='border:solid thin black;'>cellule 1 3</td>  
  </tr>
  <tr>
    <td style='border:solid thin black;'>cellule 2 1</td> 
    <td style='border:solid thin black;'>cellule 2 2</td>  
    <td style='border:solid thin black;'>cellule 2 3</td>  
  </tr> 
</table>

# data[].attributes.headline
et quoi d'autre comme personnalisation du tableau?

# data[].attributes.subject
et quoi d'autre comme personnalisation du tableau?

# data[].attributes.body
On peut personnaliser le tableau en ajoutant, ou modifiant les règles de style,  ç-a-d en agissant à l'intérieur de l'attribut style
style="   ..on personnalise ici ... "

- style de bordure:

border: solid 2px blue;

border: dotted 1px red;

border: dashed 2px green;

-  taille d'une cellule, ou du tableau  (largeur et hauteur)

width:250px;

height:40px;

- la couleur de fond de la cellule:

background-color:yellow

- supprimer l' espace entre les cellules
(ça s'applique sur la balise <table>)

border-collapse:collapse;

# data[].attributes.body
Pour créer un lien vers une autre page :
on utilise la balise <a>
avec l'attribut href qui correspond à la page qu'on veut atteindre

exemple:
<a href="https://google.fr">recherche</a>

# data[].attributes.body
Dans le fichier html , dans le <head> on va ajouter :

pour je javascript :
<script type="text/javascript" src="nomdufichier.js"></script>

pour le css
<link rel="text/stylesheet" href="nomdufichier.css" />