'' et chaque colonne dans une ligne est créée avec la balise ''''. Ici le tableau a une bordure de ''1px''.
| Les monstres célèbres par année de naissance |
| Monstres célèbres |
Année de naissance |
| King Kong |
1933 |
| Dracula |
1897 |
| Frankenstein |
1935 |
Note: L'argument ''colspan="2"'' permet que la cellule prenne deux places (fusion de deux cellules).
==== Balises structurantes ====
=== Div ===
''Div'' permet de **div**iser une page en plusieurs "conteneurs" afin, par exemple, de leur attribuer un style différent, de les faire pointer vers des liens, etc. Ici, un exemple avec quatre ''div'', avec chacun une couleur différentes. Le dernier est aussi un lien qui pointe vers [[http://korben.info|Korben.info]].
''div'' est déprécié, il faut lui préférer les nouvelles **balises structurantes** telles que ''header'', ''section'' et ''footer''.
=== Header ===
=== Section ===
=== Footer ===
==== Mise en forme ====
La mise en forme doit être réalisée dans le [[informatique:CSS3]] ! Au sein de l'HTML5, on peut seulement indiquer qu'un mot ou une phrase doit être mise en évidence avec ''strong'' ou ''em''.
=== Gras et emphase ===
On peut mettre un mot ou un groupe de mots en gras avec la balise '''' et en italique (emphase) avec la balise '''' :
Du texte avec du gras et une partie italique.
=== L'argument "style" ===
Ne doit pas être utilisé! La mise en forme doit se faire uniquement via [[informatique:CSS3]] !
Pour presque chaque élément de la structure, on peut rajouter des titres, de la couleur, choisir la taille du texte. On utilise l'argument ''style'' dans les balises correspondantes, comme par exemple :
Récapitulatif
Paragraphe simple
Paragraphe en 14 pixels
Paragraphe en rouge
Paragraphe en "Bodoni"
Paragraphe avec un fond en rouge
Un paragraphe
{{ :20160102-html-1.png?800 | Capture d'écran de Codecademy.com}}
=== Alignement ===
L'argument "style" permet également d'aligner un titre, un paragraphe, etc.
Titre à gauche
Titre au centre
Titre à droite
==== Gestion des images ====
Pour insérer une image, on utilise la balise ''img'' :
Il est important de mettre un texte alternatif, pour des raisons d'accessibilités et aussi pour que le navigateur affiche ce texte si l'image n'est plus disponible :
__Plus d'informations :__
* [[https://developer.mozilla.org/fr/docs/Web/HTML/Element/Img|Element Img sur developer.mozilla.org]]
* [[https://developer.mozilla.org/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web|Images adaptatives sur developer.mozilla.org]]
==== Sources, tutoriels et ressources ====
__ Documentation :__
* [[https://www.codecademy.com/fr/learn/web|Le cours HTML & CSS de Codecademy]]
* [[http://www.codeshttp.com/baliseh.htm|Toutes les balises HTML]]
__ Cours / Formations : __
* [[https://www.codecademy.com/|Codecademy.com]]
* [[https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3|openclassrooms.com]]
__ Images :__
* Creative Commons - Banque d'images (gratuites) : [[http://search.creativecommons.org/?lang=fr]]
* Pixabay (images gratuites du domaine public) : [[https://pixabay.com/]]
* Pexels (images gratuites) : [[https://www.pexels.com/]]
__ Ressources :__
* Codepen : [[https://codepen.io/ ]]
* Cssdeck : [[https://cssdeck.com/labs/vzqwhdoj]]
__ IDE : __
* VSCodium : [[https://vscodium.com/]] , VSCode sans trackers ni télémétrie. ;-)
* Live Server : [[https://github.com/ritwickdey/vscode-live-server-plus-plus]]
__ Validateurs : __
* Validateur HTML : [[http://validator.w3.org/]]
* Validateur CSS : [[http://jigsaw.w3.org/css-validator]]
* HTML Tidy Validator : [[https://addons.mozilla.org/en-US/firefox/addon/html-validator/]] |