Les bases du html by https://padlet.com/laurentvergnac/xo9pe30165toa3zc formation pour grand débutant plein de motivation en-us 2021-09-22 17:43:32 UTC 2023-01-19 06:09:22 UTC hello@padlet.com https://padlet.net/icons/png/1f601.png Document html laurentvergnac https://padlet.com/laurentvergnac/xo9pe30165toa3zc/wish/1760780904

un doc html a une strucure de base
qui est toujours la même  (enfin presque) 

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

]]> 2021-09-22 17:44:15 UTC https://padlet.com/laurentvergnac/xo9pe30165toa3zc/wish/1760780904 document html - partie 2 laurentvergnac https://padlet.com/laurentvergnac/xo9pe30165toa3zc/wish/1760789202 <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

]]> 2021-09-22 17:47:38 UTC https://padlet.com/laurentvergnac/xo9pe30165toa3zc/wish/1760789202 On va créer un tableau laurentvergnac https://padlet.com/laurentvergnac/xo9pe30165toa3zc/wish/1760791902 Pour un tableau donné on a :
- le tableau,
- les lignes,
- les cellules,
en html, c'est défini par les balises
<table>
<tr>
<td>

]]> 2021-09-22 17:48:47 UTC https://padlet.com/laurentvergnac/xo9pe30165toa3zc/wish/1760791902 On va améliorer le tableau laurentvergnac https://padlet.com/laurentvergnac/xo9pe30165toa3zc/wish/1760825759 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;'>


]]> 2021-09-22 18:02:10 UTC https://padlet.com/laurentvergnac/xo9pe30165toa3zc/wish/1760825759 Exercice : laurentvergnac https://padlet.com/laurentvergnac/xo9pe30165toa3zc/wish/1760839014 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  ]]> 2021-09-22 18:07:59 UTC https://padlet.com/laurentvergnac/xo9pe30165toa3zc/wish/1760839014 et quoi d'autre comme personnalisation du tableau? laurentvergnac https://padlet.com/laurentvergnac/xo9pe30165toa3zc/wish/1760870363 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;


]]> 2021-09-22 18:21:07 UTC https://padlet.com/laurentvergnac/xo9pe30165toa3zc/wish/1760870363 les liens hypertexte laurentvergnac https://padlet.com/laurentvergnac/xo9pe30165toa3zc/wish/1775854362 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>

]]> 2021-09-28 20:12:06 UTC https://padlet.com/laurentvergnac/xo9pe30165toa3zc/wish/1775854362 inclure un fichier javascript et du css laurentvergnac https://padlet.com/laurentvergnac/xo9pe30165toa3zc/wish/1870531586 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" />]]> 2021-11-05 17:39:37 UTC https://padlet.com/laurentvergnac/xo9pe30165toa3zc/wish/1870531586 document html - partie4 laurentvergnac https://padlet.com/laurentvergnac/xo9pe30165toa3zc/wish/1873155508 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>
]]> 2021-11-07 18:05:08 UTC https://padlet.com/laurentvergnac/xo9pe30165toa3zc/wish/1873155508 document html - partie 3 laurentvergnac https://padlet.com/laurentvergnac/xo9pe30165toa3zc/wish/1873156985 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>
]]> 2021-11-07 18:06:11 UTC https://padlet.com/laurentvergnac/xo9pe30165toa3zc/wish/1873156985