Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Formation HTML / CSS Jalals.info 1 http://jalals.info Les finalités 1. Apprendr

Formation HTML / CSS Jalals.info 1 http://jalals.info Les finalités 1. Apprendre une bonne organisation des fichiers 2. Maitrise des langages HTML et CSS 3. Ecrire du code claire et lisible 4. Connaitre la procédure d'upload vers un host 5. Comment se procurer un nom de domaine 2 http://jalals.info Partie 1: HTML 3 http://jalals.info – Histoire : • HTML 1 : c'est la toute première version créée par Tim Berners-Lee en 1991. • HTML 2 : la deuxième version du HTML apparaît en 1994 • HTML 3 : apparue en 1996 • HTML 4 : il s'agit de la version la plus répandue du HTML apparue en 1998 • xHTML 1.0 : eXtensible HyperText Markup Language apparue en 2000 • HTML 5 : apparue en 2011 Qu’est ce que le HTML ? 4 http://jalals.info né le 8 juin 1955 « Je n'ai fait que prendre le principe d’hypertexte et le relier au principe du TCP et du DNS et alors – boum ! – ce fut le World Wide Web ! » Développe aussi le premier navigateur web et l'éditeur web. Source : http://fr.wikipedia.org/wiki/Tim_Berners-Lee Tim Berners-Lee 5 http://jalals.info – Plus concrétement Le HTML est comme le XML (les 2 sont issues du SGML: Standardized Generalised Markup Language) - Ils sont des langages de balisage ! - Une balise ? => <balise> - Ils ont une balise ouvrante et une autre fermante (sauf dans certains cas) => <balise>contenu </balise> Exemple avec XML : On imagine une société, qui à 2 gérants, et plusieurs employés Qu’est ce que le HTML ? 6 http://jalals.info <jalals> <dirigeants> </dirigeants> <employes> </employes> </jalals> 7 http://jalals.info <jalals> <dirigeants> <dirigeant>Rida</dirigeant> <dirigeant>Yassine</dirigeant> </dirigeants> <employes> <employe>….</employe> <employe>….</employe> </employes> </jalals> 8 http://jalals.info <jalals> <dirigeants> <dirigeant role="pdg">Rida</dirigeant> <dirigeant role="cofondateur">Yassine</dirigeant> </dirigeants> <employes> <employe role="comptable" cnss="3445333">….</employe> <employe>….</employe> </employes> </jalals> 9 http://jalals.info Concernant le HTML : - Un langage stricte (on ne peut pas choisir n’importe quoi pour le nom des balises) - Des noms spécifiques et une structure à suivre 10 http://jalals.info Notepad++ NetBeans Eclipse Dreamweaver Sublime Text Les éditeurs 11 http://jalals.info Mozilla Firefox Google Chrome Opera Safari Internet explorer Les navigateurs 12 http://jalals.info La structure d'une page web (body) L’en-tête (header) Menu horizontal (nav bar) Menu vertical Corp – contenu Corp – contenu (footer) B o d y 13 http://jalals.info La structure d'une page web (head) 14 http://jalals.info Le titre – La description - Favicon Les meta tags – Média – Scripts - Styles <doctype> <html> <head> <title>Le titre de la page</<title> <meta> <link> <script> </head> <body> Le contenu <body> </html> Code HTML général 15 http://jalals.info Doctype ou DTD (Déclaration de Type de Document) - Indique la version du HTML - Indispensable pour les validateurs (http://validator.w3.org/) - Un site bien validé et un site plus rapide Qu’est ce que le doctype 16 http://jalals.info HTML 1 --------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> HTML 4 ---------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> xHTML ----------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> HTML 5 ---------------------------------------------------------- <!DOCTYPE html> Les différents doctypes 17 http://jalals.info - Afficher les extensions - Win XP : -> Poste de travail -> Outils -> Options des dossiers -> Options des dossiers -> Décocher « masquer les extensions des fichiers dont le type est connu » - Win7 : -> Ordinateur -> Organiser -> Option des dossiers et de recherche -> Affichage -> Décocher « masquer les extensions des fichiers dont le type est connu » - Win 8 : -> Ordinateur -> Affichage -> Décocher « extensions de noms de fichiers » Notre première page ! 18 http://jalals.info - Création d’un dossier de travail + dossier pour images - Création d’un fichier nommé « index.html » - Mettre du contenu ! - Sauvegarder et ouvrir ! Notre première page ! 19 http://jalals.info - Mettre le bon doctype - Mettre un titre - Mettre une favicon si souhaité - Choisir le bon encodage <meta charset="utf-8"> - Définir les meta « description » et « keywords » <meta name="description" content="texte"/> <meta name="keywords" content="key, key, key" /> Les balises, attributs et commentaires 20 http://jalals.info - La balise <script> ? <script type="text/javascript"></script> - La balise <style> ? <style type="text/css"></style> - Les balises médias <link rel="stylesheet" href="style.css“> <link rel="stylesheet" media="screen" href="petite_resolution.css" /> Les balises, attributs et commentaires 21 http://jalals.info - Commantaires :  - A quoi sert un commentaire ? 1 - Mettre des infos utiles pour nous même 2 - Commenter du code sans le perdre Les balises, attributs et commentaires 22 http://jalals.info - Les paragraphes : <p> texte </p> - Le retour à la ligne : <br> - Les titres : Du <h1> au <h6> - Les listes a puces : <ul> - Les listes a numérotées : <ol> Les balises, attributs et commentaires 23 http://jalals.info - Les attributs des listes à puces : Type (circle, square, disc) - Les attributs des listes à numérotées: Type (1, A, a, I, i) Start (préciser un numéro) Les balises, attributs et commentaires 24 http://jalals.info - Créer un lien : <a href=" votre lien " target=" votre target " > Le texte de votre lien </a> Les targets : _blank (ouvre le lien dans une nouvelle fenêtre) _self (ouvre le lien dans la même fenêtre) Exemple : <a href="jalals.info" target="_blank">jalals</a> Les balises, attributs et commentaires 25 http://jalals.info - Les liens relatifs et absolus - Exemple : http://jalals.info/presentation/ - Lien relatif : <a href="presentation">Présentation de jalals</a> - Lien absolu: <a href=" http://jalals.info/presentation/">Présentation de jalals</a> Les balises, attributs et commentaires 26 http://jalals.info - L'arborescence de fichiers Les balises, attributs et commentaires 27 http://jalals.info /images/ciel.jpg /fondecran/fond1.jpg /images/fondecran/fond1.jpg /index.html ../../index.html Index.html /images ciel.jpg chateau.jpg /fondecran fond1.jpg fond2.jpg Root ../ciel.jpg ../index.html - Afficher une image <img src="image.jpg" alt="titre de l’image" width="200" height="400"> - Une image avec un lien ? <a href="lien"> <img src="image.jpg" alt="titre de l’image" width="200" height="400"></a> Les balises, attributs et commentaires 28 http://jalals.info - Les tableaux simples : <table> : pour définir le cadre du tableau <tr> : définir une ligne <td> : définir une cellule Exemple : <table border="1"> <tr> <td> Cellule 1</td> <td> Cellule 2</td> </tr> </table> Les balises, attributs et commentaires 29 http://jalals.info Les tableaux simples avec titre et en-tête : <table border="1"> <caption>Le titre de mon tableau</caption> <tr> <th>en-tête 1</th> <th>en-tête 2</th> </tr> <tr> <td> Cellule 1</td> <td> Cellule 2</td> </tr> </table> Les balises, attributs et commentaires 30 http://jalals.info Les tableaux structurés : Les balises, attributs et commentaires 31 http://jalals.info <table border="1"> <caption>Le titre de mon tableau</caption> <thead> <tr> <th>en-tête 1</th> <th>en-tête 2</th> </tr> </thead> <tfoot> <tr> <th>en-tête 1</th> <th>en-tête 2</th> </tr> </tfoot> <tbody> <tr> <td> Cellule 1</td> <td> Cellule 2</td> </tr> </tbody> </table> 32 http://jalals.info Les inputs : <input type="text" value="une valeure primaire" name="nom"> Type : (text, password, submit, reset, button, checkbox, color, date, email, file, hidden, radio, search, tel, url) -------------------------------------------------------------------- <textarea name="nom">Texte</textarea> Les balises, attributs et commentaires 33 http://jalals.info Exemple : <form method="get" action="index.php"> Nom : <input type="text" name="nom" placeholder="Nom"> Email : <input type="text" name="email" placeholder="Email"> Message : <textarea name="message" placeholder="message"></textarea> <input type="submit" value="envoyer" > </form> NB: PHP est nécessaire pour l’envoi des infos Les balises, attributs et commentaires 34 http://jalals.info Mettre du audio : <audio src="audio.mp3"></audio> Attributs : autoplay: jouer automatiquement Loop: rejouer automatiquement Controls : afficher play, pause, stop Problème : Firefox ne possède pas de licence mp3 Alternative : .ogg Les balises, attributs et commentaires 35 http://jalals.info Mettre du audio : <audio> <source src="audio.ogg" type="audio/ogg"> <source src="audio.mp3" type="audio/mpeg"> </audio> Les balises, attributs et commentaires 36 http://jalals.info Mettre du audio : La méthode flash : http://www.alsacreations.fr/dewplayer.html Les balises, attributs et commentaires 37 http://jalals.info Mettre une vidéo : <video src="film.mp4" width="360" height="240“ poster="image.jpg" controls></video> Attributs : Controls : afficher les controlleurs Poster : afficher un aperçu Problème : Firefox ne détient pas la licence mp4 Les balises, attributs et commentaires 38 http://jalals.info Mettre une vidéo : <video controls width="360" height="240" poster="apercu.jpg"> <source src="film.ogv" type="video/ogg"> <source src="film.mp4" type="video/mp4"> </video> Les balises, attributs et commentaires 39 http://jalals.info Balises purement HTML 5: <header> <section> <nav> <article> <footer> <canvas> Les balises, attributs et commentaires 40 http://jalals.info http://jalals.info 41 http://www.w3schools.com/html/html5_new_elements.asp http://jalals.info 42 http://jalals.info 43 http://www.mediafire.com/view/34atcjy9ggz1u6u/HTML5.pdf Datalist <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> http://jalals.info 44 Autofocus <input type="text" autofocus> http://jalals.info 45 Autres balises utiles Citation : <q> : Citation courte <cite> : Citation du titre d'une œuvre ou d'un évènement <blockquote> : Citation longue Les balises, attributs et commentaires 46 http://jalals.info Autres balises utiles Mettre du text en valeur <b> : mettre en gras + importance pour les moteurs de recherche <strong> : mettre en gras <mark> : mettre en gras Les balises, attributs et commentaires 47 http://jalals.info Les balises universelles <span> et <div> La balises <div> - Prend toute la largeur - C’est un conteneur - Un élément block ! Les balises, attributs et commentaires 48 http://jalals.info Un élément block Un autre élément block Un autre élément block 100% La page Les balises universelles <span> et <div> La balises <span> - Prend uniquement la taille de son contenu - Un élément inline ! Les balises, attributs et commentaires 49 http://jalals.info inline Inline uploads/Litterature/ formation-html.pdf