Tutoriels HTML

HTML est un langage informatique pour le web, facile à apprendre. Le HTML donne au navigateur le contenu à afficher et sa structure : titres, paragraphes, images, liens, multimédias..

Les bases HTML5

Comprendre rapidement l’essentiel du langage HTML

Présentation Les balises Les attributs Les symboles Page Web 

HTML – page web

Les balises pour créer l’ossature d’une page web

body head doctype html

HTML – formatage

Les balises utiles pour formater le contenu texte :

h1-h6 p b i pre bdo br

HTML – sémantique

Balises pour donner plus de signification au contenu

strong em address time s u del ins mark abbr dfn small sup sub blockquote q cite code kbd var samp

HTML – Formulaire

Utilisez les formulaires pour permettre aux internautes de s’exprimer, de partager, de s’enregistrer

button datalist fieldset form input keygen label legend meter optgroup option output progress select textarea

HTML – Navigation

Les liens jouent un rôle important et sont utilisées pour naviguer sur le web

a area link

HTML – Interaction

Le HTML peut fournir des informations au navigateur, aux moteurs de recherche et interagir avec d’autres fichiers

base script style meta link title

HTML – Tableau

Utiliser les tableaux pour présenter des informations en lignes et en colonnes

table tr td th caption thead tfoot tbody colgroup col

HTML – Intégration

Le HTML5 offre plusieurs solutions pour intégrer du contenu multimédia (videos, illustrations, animations..)

area audio canvas embed figcaption figure iframe img map object param source track video

HTML – Section

Nécessaire à la mise en page, le HTML peut sectionner le contenu de la page et mieux l’organiser

header footer section aside nav article main

HTML – balises universelles

Il existe des balises sans signification particulière mais utiles pour la présentation CSS

div span

HTML – Grouper

Il est souvent nécessaire de regrouper le contenu de votre page web

Balises pour grouper

div ul ol li dl dt dd hr

HTML – Attributs

Les attributs fournissent des informations supplémentaires sur les éléments HTML. Les attributs sont toujours spécifiés dans la balise de début. Certains attributs (globaux) peuvent être utilisés sur n’importe quel élément HTML. D’autres sont spécifiques à l’élément en question. Certains attributs permettent de déclencher des scripts (en javascript) à partir de la souris, du clavier, du chargement de la page ou encore des éléments de formulaire..

Attributs événements

Ils permettent de déclencher des scripts (en javascript)

– Evénements souris

onclick ondblclick ondrag ondragend ondragenter ondragleave ondragover ondragstart ondrop onmousedown onmousemove onmouseout onmouseover onmouseup onmousewheel onscroll

– Evénements clavier

onkeydown onkeypress onkeyup

– Evénements formulaire

onblur onchange oncontextmenu onfocus onformchange onforminput oninput oninvalid onreset onselect onsubmit

Attributs globaux

Ils peuvent être utilisés sur n’importe quel élément HTML

accesskey class contenteditable contextmenu data-* dir draggable dropzone hidden id lang spellcheck style tabindex title translate

Références HTML

<!–> <!DOCTYPE> <a> <abbr> <address> <area><article> <aside> <audio> <b><base> <bdi> <bdo><blockquote> <body> <br><button> <canvas> <caption><cite> <code> <col> <colgroup> <datalist> <dd> <del> <details> <dfn><dialog> <div> <dl> <dt> <em> <embed> <fieldset><figcaption> <figure> <footer><form> <head> <header> <h1> – <h6> <hr> <html> <i> <iframe> <img> <input> <ins><kbd> <keygen> <label><legend> <li> <link> <main><map> <mark> <menu*> <meta> <meter> <nav><noscript> <object> <ol><optgroup> <option> <output> <p> <param> <picture> <pre><progress> <q> <rp*> <rt*><ruby*> <s> <samp> <script><section> <select> <small> <source> <span> <strong> <style> <sub> <summary><sup> <table> <tbody> <td><textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <u> <ul> <var><video> <wbr>