HTML Rappels des fondamentaux Connaître les principales balises html Maîtriser les outils permettant d’analyser une page web Savoir analyser la partie <head> d’une page html
Boîte à outil Éditeur de texte (notepad++,dreamweaver, sublime) ou éditeur online : http://codepen.io Outil développeur du navigateur (f12) Mode de compatibilité sur Internet Explorer Client ftp
Repères Historique du HTML et rôle du W3C Le HTML5 Structure d’une page html La partie <head> : partie masquée balise <title> balises META (description, author, keywords, robots,…) doctype et la définition du jeu de caractères balises <link> (appel css, shortcut icon) balises <script> La partie <body> : partie visible
Analyse de la page d’accueil de Wordpress Balise <head> balise <title> balises META (description, author, keywords, robots,…) doctype et la définition du jeu de caractères balises <link> (appel css, shortcut icon) balises <script> Balise <body>
Principes de base de la syntaxe html Balises ouvrantes, fermantes, auto-fermantes Imbrication des balises Attributs communs à toutes les balises (class, id, style…) Propres à certaines balises (alt, href, src, width…) 2 types de comportement : block inline
Description des principales balises html (1) Marquage d’un document html <html>, <head>, <title>, <body> Balises <meta> Balises générales Paragraphe (<p>) Sous-titre (<h1>,<h2>,…) Container (<div>) <span> Gras (<strong>) Retour à la ligne (</br>) Séparateur (</hr>)
Description des principales balises html (2) Images Balise <img/> et attributs alt, title, width Formats d’images : jpeg, png, gif Chemin d’accès absolu/relatif Liens Lien absolu/relatif Attributs href et target Liens spéciaux : mailto et ancres Listes à puce Listes ordonnées : <ol><li></li></ol> Listes non ordonnées : <ul><li></li></ol>
Description des principales balises html (3) Tableaux Créer un tableau : <table> <tr> <td> attributs du tableau : cellpadding, cellspacing, border, width Ajout d’une entête avec <th> Ajouter un titre au tableau (caption) Colspan, rowspan Formulaires Les balises <form>, <placeholder>, <legend> La zone de texte <input type="text"> Les labels <label> Zone de texte multiligne <textarea> et attributs Bouton d’envoi <input type="submit"> Rapide présentation des autres éléments (checkbox, radio, select) Quelques balises html5 : <header>,<nav>,<section>…
A vous de jouer ! Connectez-vous à l’adresse supdepub.avelook.fr/crea pour télécharger les cas pratiques