Le langage HTML (HyperText Markup Language) ou langage de balisage hypertexte est un système de codes en texte structurant les pages web sur internet. Créé en 1989 en Suisse au CERN (Conseil européen pour la recherche nucléaire) par le britannique Tim Berners-Lee, il est utilisé sur le Web (World Wide Web).
Le Web, à ne pas confondre avec Internet est une invention conjointe du britannique Tim Berners-Lee et du belge Robert Cailliau. Le World Wide Web Consortium, abrégé par le sigle W3C, est un organisme de normalisation à but non lucratif, fondé en 1994. HTML5 est la dernière révision majeure d'HTML. Cette version a été finalisée en octobre 2014.
sources Wikipédia
On peut utiliser n'importe quel traitement de texte pour rédiger du code html, par exemple notepad pour PC. Il est toutefois conseillé d'utiliser un logiciel dédié comme notepad++ ou Sublime Text (payant mais la version gratuite est largement suffisante) afin de disposer d'outils d'assistance durant la rédaction du code.
Les excellents cours de Nicolas Brignol : http://www.neeko.fr/cours/, qui ont très largement servi à la préparation de ces tutoriels.
Les cours de Johan Segura, enseignant de mathématiques au lycée St Exupéry: http://segura.ddns.net/lycee/index.php?d=about
<!DOCTYPE html> <html lang = "fr"> <head> <title> hello world! </title> </head> <body> hello world! </body> </html>
Le code est commenté pour favoriser la compréhension.
<!– Commentaire –>
<!-- nature du document, ouverture balise html et langue--> <!DOCTYPE html> <html lang = "fr"> <!-- ouverture balise entête --> <head> <!-- titre: basic.html --> <title>basic.html</title> <!-- encodage Unicode permettant de gérer la plupart des caractères--> <meta charset = "utf-8"/> <!-- fermeture balise entête --> </head> <!-- ouverture balise corps --> <body> <!-- titre --> <h1>titre de niveau 1</h1> <!-- ouverture balise paragraphe --> <p> Ceci est un paragraphe. Notez que le texte est automatiquement aligné. <!-- fermeture balise paragraphe --> </p> <!-- fermeture balise corps --> </body> <!-- fermeture balise html --> </html>
Le langage html est composé de balises qui encadrent les parties du code, balise ouvrante <head>, balise fermante </head>. Les balises peuvent contenir des attributs, des balises enfants ou du texte. On dit d'une balise “contenante” qu'elle est parent. L'ensemble constitue une arborescence, autrement dit un arbre d'où l'importance de hiérarchiser votre code pour révéler son organisation (imbrication), par une indentation et des sauts de ligne clairs.
Si vous êtes contributeur du wiki, vous êtes déjà sans le savoir familier de ce type de langage balisé!
La suite ici: HTML - Images, listes, liens...
Les cours suivants sont une compilation de cours de HTML/CSS effectués à l'IUT Multimédia d'Arles (par Zeineb EL KHALFI), du site de référence W3scools W3scools et MozzilaDevelopper.com :
Afin de rendre vos pages dynamique, les possibilités données par la CSS sont très importante, sans avoir à utiliser le JavaScript. Voici quelques documents utiles :
Il est possible de développer un site à partir d'un éditeur en WYSIWYG (What you see is what you get) tel que WordPress etc… Si vous utilisez ce genre d'outils, vous devez être capables de commenter chaque ligne de code.
Dans la mesure du possible, je vous conseille tout de même de développer votre site à partir des modèles développés en cours sur les éditeurs de votre choix (NotePad++, SublimeText, etc…). En effet, l'objectif est que vous sortiez de cette expérience avec une véritable compréhension et des compétences solides en programmation HTML/CSS.
En utilisant un éditeur WYSIWYG , vous êtes esclave de vos outils qui se comportent comme des boites noires dans lesquelles le contenu et la mise en forme sont noyés dans du code JavaScript…
Des exemples d'Éditeurs WYSIWYG :