LES BASES DU HTML 5 https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3 Open Class Room SOMMAIRE Les bases HTML5... 3 1 : comment fait-on pour créer un site web... 3 Deux langages : HTML et CSS... 3 HTML : le fond... 3 CSS : la forme... 3 Anciennes versions... 3 Navigateur... 3 Rôle du Navigateur... 3 Afficher le code HTML et le code CSS... 4 Afficher les pages sans le CSS... 4 Versions des navigateurs... 4 Editeur de texte... 4 Pour tous les OS... 4 Windows... 4 MAC... 4 Linux... 4 Les éditeurs WYSIWYG : à éviter!... 4 2 : Principes du code HTML... 6 Principes... 6 Première page, sans balise... 6 Balises... 6 Principes... 6 Toutes les balises, par ordre alphabétique... 6 Toutes les balises, par catégorie... 6 Balise orpheline... 6 Attributs... 6 Principes... 6 Tous les attributs, par balise... 7 Tous les attributs globaux : qui valent pour toutes les balises... 7 Structure... 7 Principes... 7 Exemple de base... 7 Les commentaires... 7 Balise meta... 7 Présentation... 8 Simplification du HTML5... 8 3 : organiser son texte... 9 Principes... 9 Balises <p> et <br/>... 9 Paragraphe : <p>... 9 Saut de ligne : <br/>... 9 Espace insécable... 9 Balises titre <h1>, <h2> jusqu à <h6>... 9 Attention : le titre, c est de la structure, pas de la mise en page... 9 Mise en valeur de mot : <strong> <em> <mark>... 9 Attention : les mises en valeur, c est de la structure, pas de la mise en page... 10 Problèmes d accents... 10 Les bases du HTML 5 page 1/14 - Open Class Room
Liste à puces, non ordonnée : <ul> et <li>... 10 Liste à numéros, ordonnée : <ol> et <li>... 10 4 : Créer des liens des infobulles télécharger des fichiers... 11 Principes... 11 Balise «a» avec attribut «href»... 11 Lien absolu... 11 Lien relatif : interne à notre site... 11 Syntaxe... 11 Nom des fichiers, nom des dossiers... 11 Le bon usage :... 11 Lien vers un autre endroit de la même page : id= «monlien»... 11 Ouverture dans un nouvel onglet... 12 mailto... 12 Ouverture d un fichier : a href ="nom d un fichier"... 12 a href ="nom d un fichier"... 12 Téléchargement direct d un fichier : attribut download dans le <a href... 12 Attribut download... 12 Infobulle : attribut title dans toutes les balises... 12 5 : Les images : balise img... 13 Format d images... 13 Balise orpheline img avec 2 attributs : src et alt (texte alternatif si il n y a pas d image)... 13 La balise img... 13 L attribut alt... 13 Les autres attributs... 13 Infobule : attribut title... 13 Image cliquable... 13 Image miniature... 13 Redimensionner une image : heigh et width... 14 Remarque... 14 Balise <figure> : HTML 5... 14 6 : Exercice... 14 Les bases du HTML 5 page 2/14 - Open Class Room
LES BASES HTML5 Le cours s inspire du cours public Open Class Room de 2016. https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3 Webographie : http://www.w3schools.com : site de référence HTML, CSS et d autres http://www.w3schools.com/tags/default.asp : toutes les balises http://caniuse.com: pour savoir quel navigateur gère quoi https://www.w3.org : le site de référence du W3C 1 : comment fait-on pour créer un site web Deux langages : HTML et CSS HTML : le fond HTLM décrit le contenu et son organisation : titre, paragraphe, liste à numéro, etc. HTML 1 : 1991 par le fondateur WWW, Tim Berners-Lee (chercheur au CERN). Puis HTML 2, 3 (tableaux), 4 : la plus longuement utilisé. HTML 5 : nouveau, très bien! https://fr.wikipedia.org/wiki/html5 CSS : la forme CSS décrit la mise en page et le graphisme. En-têtes en haut de page, pied de page en bas, paragraphe en bleu, titres centrés, etc. CSS 1: 1996, puis CSS 2, 2.1, la plus longuement utilisée. CSS 3 : nouveau, TB. https://fr.wikipedia.org/wiki/feuilles_de_style_en_cascade#css3 CSS zend garden : http://www.csszengarden.com/tr/francais/ HTML sans CSS : (développement, désactiver les styles) : c est le texte brut sans mise en forme. Avec zend garden : on teste différents CSS et on a plusieurs affichages différents. On peut voir qu on a le même code HTML (texte sans mise en forme) dans les différentes pages. Anciennes versions Le code HTML5 et CSS3 est, en certains endroits, simplifié. Penser à utiliser ces simplifications et à ne pas utiliser sans réfléchir les usages des anciennes versions. Navigateur Rôle du Navigateur Il transforme du code HTML-CSS en résultats visibles à l écran. Les bases du HTML 5 page 3/14 - Open Class Room
Navigateurs : Firefox, Safari, google chrome, ie remplacé par edge, safari, opera, etc. Les exemples du cours seront donnés sur Firefox et Safari (en général). Les navigateurs évoluent tout le temps et prennent plus ou moins en charge les possibilités des différentes versions de HTML5 et CSS3. Que sait faire chaque navigateur sur canisue.com. Par exemple : http://caniuse.com/#search=h1 On a aussi l info sur w3schools. Par exemple : http://www.w3schools.com/tags/tag_hn.asp Afficher le code HTML et le code CSS Dans le navigateur, on peut afficher les codes source HTML et CSS. On trouve en général un menu autour de la notion de «développement» Firefox : Outils/développement web/code source de la page - Outils/développement web/editeur de style Safari : Développement / afficher le code source ou Développement / afficher les ressources. Afficher les pages sans le CSS On peut afficher les pages sans le CSS. Safari : Développement / désactiver les styles. Firefox : Affichage / syle de la page / aucun style. Versions des navigateurs Certaines anciennes versions de navigateurs ne gèrent pas toutes les possibilités. Il faut parfois prendre ça en compte dans nos sites. Editeur de texte Le code source s écrit dans un éditeur de texte, type «bloc note» et pas word! «Bloc note» est trop simple. Mieux vaut utiliser des éditeurs de texte faits pour la programmation. Pour tous les OS Windows MAC Linux Sublime Text : TB (fond noir, moins fatigant), Brackets, JEdit, etc. Notepad++, pspad, context, etc. espresso, smultron, textwrangler, gedit, Kate, vim, emacs Les éditeurs WYSIWYG : à éviter! WYSIWYG : what you see is what you get. Ce sont des programmes qui permettent de créer une page sans code mais avec du graphique. Les bases du HTML 5 page 4/14 - Open Class Room
Par exemple : Dreamweaver, Mozilla Composer, Microsoft Expression Web, etc. Le défaut est que le code HTML et CSS n est pas de bonne qualité. C est à éviter pour les programmeurs! Les bases du HTML 5 page 5/14 - Open Class Room
2 : Principes du code HTML Principes Du texte, des balises (tag en anglais) et des attributs dans un éditeur et un fichier.html Première page, sans balise EXEMPLE 1 : 00-TEST TEXTE Salut! Comment ça va Ca s affiche sur une seule ligne, à la suite, en supprimant tous les doublons d epsace. Balises Principes <balise> : un mot avec 2 chevrons </balise> : fin de balise La balise dit au navigateur ce qu il doit faire <h1> le titre </h1> : pour avoir un titre (en gros et en gras!) Toutes les balises, par ordre alphabétique http://www.w3schools.com/tags/default.asp Toutes les balises, par catégorie http://www.w3schools.com/tags/ref_byfunc.asp Balise orpheline Une balise orpheline n est pas associée à une fin de balise. Elle a un / à la fin. <image /> : le / n est pas obligatoire, mais c est plus clair avec. <br/> : balise de retour à la ligne Attributs Principes <balise attribut = «valeur»> Je peux mettre autant d attributs que je veux <balise attribut1= «valeur1» attribut 2= «valeur2»> <img src="maphoto.jpg" width="100px"/> EXEMPLE 2 : 01-TEST BALISE <h1>présentation</h1> Les bases du HTML 5 page 6/14 - Open Class Room
bonjour Bertrand, comment ça va?</br> Voici ma photo : <img src="maphoto.jpg" width="100px"/> Ca affiche un titre, du texte et une photo. On voit que la photo est à la suite du texte, sur la ligne de texte. Tous les attributs, par balise http://www.w3schools.com/tags/ref_attributes.asp Tous les attributs globaux : qui valent pour toutes les balises http://www.w3schools.com/tags/ref_standardattributes.asp Structure Principes Une page HTML est structurée de façon standard. La balise!doctype: c est la première ligne. Elle est devenue très simple : html! La balise html : contient tout le code : l en-tête et le code La balise head : contient l en-tête. Le jeu de caractères (utf8 plutôt que iso) et la titre de la page surtout. La balise body : le contenu réel de la page. Finalement, jusqu à la balise body, on le plus souvent la même chose à part le titre de la page. Exemple de base EXEMPLE 2 : 02-PAGE VIDE <!DOCTYPE html> : indique qu on fait une page en HTML 5 <html> : englobe toute la page web <head> : informations d entête <meta charset="utf8" /> : balise meta, orpheline : utf8 pour que ce soit lisible! <title>mon titre</title> : titre de la page dans le navigateur </head> <body> corps de la page web : le contenu de la page, rien pour le moment! C est la qu on va beaucoup travailler! </body> </html> Les commentaires <!-- ceci est un commentaire --> Balise meta Les bases du HTML 5 page 7/14 - Open Class Room
Présentation La balise meta permet de définir des éléments généraux sur la page. Elle présente plusieurs attributs. Les principaux sont charset et name http://www.w3schools.com/tags/tag_meta.asp charset : pour le jeu de caractères utilisés. UTF-8 est le plus sur pour gérer tous les accents. name : pour décrire des caractères généraux du site : les keywords pour les moteurs de recherche, l auteur, etc. Simplification du HTML5 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> Aujourd hui on écrit <meta charset="utf8" /> Les bases du HTML 5 page 8/14 - Open Class Room
3 : organiser son texte Principes Paragraphe, titre, liste à puces <p> <br/> <h1> <h6> <strong> <em> <mark> <ul> <ol> <li> Balises <p> et <br/> Dans la balise <body> EXEMPLE 3 : 03-TEST AVEC DU TEXTE Paragraphe : <p> <p> ceci est un paragraphe </p> Pour passer à la ligne, il faut un paragraphe. Les espaces multiples ne sont pas prises en compte. EXEMPLE 4 : 04 PARAGRAPHES Saut de ligne : <br/> Tout le texte s écrit à la suite, sans espace supplémentaire et sans saut de page. La balise br permet de forcer le saut de page. <br/> Espace insécable ou Balises titre <h1>, <h2> jusqu à <h6> EXEMPLE 5 : MON SUPER SITE Jusqu à 6 niveaux de titre. Les paragraphes sont dans les titres. Les titres s affichent par défaut d une certaine façon. Attention : le titre, c est de la structure, pas de la mise en page Il ne faut pas choisir un titre pour la façon dont il s affiche mais pour la logique de structure. C est avec le CSS qu on contrôlera l affichage du titre (typo, taille, italique, gras, couleur, etc.). Exemple : CSS ZenGarden http://www.csszengarden.com/tr/francais/ On affiche la page sans style : on voit les titres de niveau 1, 2, 3, etc. La structure du site. Quand on regarde le code, on voit les titres h1, h2, h3 correspondant. Ils sont entourés de CSS! Mise en valeur de mot : <strong> <em> <mark> EXEMPLE 6 : MON SUPER SITE AVEC DES BALISES EN PLUS ET DES BUGS! <strong> : pour dire qu un mot est important. Il passe en gras mais ça pourrait être autre chose Les bases du HTML 5 page 9/14 - Open Class Room
<em> : un peu important : le mot est en italique par défaut. <mark> : mise en valeur : surligné jaune : ça ne marche pas dans ie Ces mises en valeur peuvent être paramétrées, dans le CSS particulièrement. Attention : les mises en valeur, c est de la structure, pas de la mise en page Les mises en valeurs doivent être utilisées d un point de vue sémantique (l organisation du contenu donc le HTML) et pas du point de vue de l apparence (en gras, souligné, etc. donc le CSS). Problèmes d accents Quand on compare les deux fichier 6 et 7, ils semblent identiques et pourtant le 6 a des problèmes d accents! Il faut sauvegarder en UTF8 pour corriger le problème. Pour faire apparaître le problème : on peut sauvegarder en «western» par exemple. Attention : si on «reopen» en UTF8, on va voir tous les problèmes apparaître dans le fichiers source. Liste à puces, non ordonnée : <ul> et <li> EXEMPLE 7 : MON SUPER SITE UTF 8 <ul> : pour insérer une liste à puce <li> : une puce de la liste à puce, dans la balise <ul> <ul><li>choix 1</li><li>choix 2</li></ul> Liste à numéros, ordonnée : <ol> et <li> <ol> : pour insérer une liste à numéros <li> : un numéro de la liste à numéro. Seul le <ol> diffère d un type de liste à l autre (c est facile d en changer!) <ol><li>choix 1</li><li>choix 2</li></ol> Les bases du HTML 5 page 10/14 - Open Class Room
4 : Créer des liens des infobulles télécharger des fichiers Principes Le lien, le surf, le téléchargement Lien hypertexte : mot et image sur lesquels on peut cliquer. <a href="url"> target, id Balise «a» avec attribut «href» Lien absolu EXEMPLE 1 : LIEN GOOGLE <a href= «http://monsite»> bla bla </a> Le «bla bla» est bleu souligné : on peut contrôler ça avec le CSS, plus tard. Lien relatif : interne à notre site EXEMPLE 2 : PAGE 1 Lien relatif : dossier/ma_page.html : pour circuler de page en page dans notre site. Syntaxe <a href="url">link text</a> http://www.w3schools.com/html/html_links.asp Nom des fichiers, nom des dossiers Avec le lien vers un fichier se pose la question des règles de nommage des fichiers. 39 caractères permis : les 26 lettres de l'alphabet latin, majuscules et minuscules, les 10 chiffres arabes (0, 1, 2,, 9), le point (.), le tiret bas (_) et le trait d'union (-). Eviter : les espaces, les caractères accentués (à, é, è, etc.) et les signes de ponctuations autres que les 3 mentionnés (apostrophe, barre oblique, guillemets, etc.). Attention : Linux distingue entre minuscule et majuscule mais pas Windows. Le bon usage : Tout en minuscule (pour éviter les problèmes de distinction entre minuscules et majuscules) On sépare les morphèmes avec des «_» (underscore, tiret bas) Lien vers un autre endroit de la même page : id= «monlien» EXEMPLE 3 : LIENS INTERNES Quand il y a beaucoup de texte dans une page, on peut vouloir sauter dans la page attribut id= «monlien» dans la balise où l on veut arriver href= «#monlien» pour accéder à l id= «monlien» En général, on appelle cette id où on veut sauter une «ancre». Les bases du HTML 5 page 11/14 - Open Class Room
On peut mettre n importe quel nom pour l ancre. On peut aussi faire un lien sur une ancre dans une autre page : href= «mapage.html#ancre» Ouverture dans un nouvel onglet Attribut target= «_blank» dans la balise < a mailto <a href= mailto :liaudet.bertrand@wanadoo.fr > Contactez-moi</a> A éviter pour éviter les spams! il faut faire des formulaires à traiter en PHP Ouverture d un fichier : a href ="nom d un fichier" Tous visualiser toutes sortes de fichiers dans un navigateur : les pdf, les txt, les jpg, etc. EXEMPLE 3 : LIENS INTERNES a href ="nom d un fichier" <a href="dossier/fichier.txt">fichier à afficher</a> Quand on clique, le navigateur affiche le fichier. On peut l ouvrir dans un nouvel onglet. On peut aussi faire un «enregistrer sous» Ne marche pas avec Safari L enregistrer sous ne fonctionne pas avec Safari : http://www.w3schools.com/tags/att_a_download.asp Téléchargement direct d un fichier : attribut download dans le <a href Attribut download Si on ajoute l attribut download sur le <a href, le navigateur propose d enregistrer le fichier sans l afficher. <a href="dossier/fichier.txt" download="mon_document.txt> fichier à télécharger</a> On peut préciser le nom qu on veut donner au fichier à enregistrer. Si on ne le fait pas, le nom sera celui du fichier source. Ne marche pas avec Safari Avec safari, l attribut download n a aucun effet : on revient au fonctionnement du <a href Infobulle : attribut title dans toutes les balises EXEMPLE 4 : ENTETE CV : PDF A TELECHARGER On peut mettre un attribut title dans toute les balise pour avoir un info-bulle <balise title= «voici l info» Les bases du HTML 5 page 12/14 - Open Class Room
5 : Les images : balise img Format d images png, gif, jpg : utilisable sur le web. Bitmap (.bmp) et Tiff sont trop lourds. Une photo : jpg : bonne réduction du poids de l image (16 millions de couleurs) Dessin, schéma, logo : png. Il existe du png 8 bit (256 couleurs) et 24 bits (16 millions de couleurs, moins efficace que le jpg). Image animée : gif Balise orpheline img avec 2 attributs : src et alt (texte alternatif si il n y a pas d image) La balise img http://www.w3schools.com/tags/tag_img.asp Pour afficher une image, on utilise la balise orpheline img et l attribut src. La balises image doivent être placées dans une balise, en general une balise paragraphe : <p><img src="images/berenice.jpg"/></p> Le chemin peut être relatif ou absolu : <p><img src="http://bliaudet.free.fr/img/aurelien.jpg"/></p> L attribut alt <p><img src="images/berenice.jpg" alt="image de berenice" /></p> Alt permet d avoir un texte à la place de l image si on n a pas d accès à l image. Ce ne marche pas sous Safari. EXEMPLE 5 : IMAGE Les autres attributs http://www.w3schools.com/tags/tag_img.asp Infobule : attribut title Sur les images comme sur toutes les balises! Image cliquable <a href="http://www.google.fr"><img src="images/aurelien.jpg" alt="aurelien" /></a> Image miniature On peut afficher une petite image et pouvoir charger une grande. <a href="img/image.jpg"> <img src="img/image_mini.jpg" alt="mon image" title="cliquez pour agrandir" /> </a> Les bases du HTML 5 page 13/14 - Open Class Room
Redimensionner une image : heigh et width Remarque <img src="images/berenice.jpg" alt="berenice" width=10%/></p> Avec width=10%, l image à une largeur à 10% de sa taille réelle et la hauteur proportionnelle. On peut aussi mettre un nombre de pixels : heigh=100. La largeur suivra proportionnellement. Si on met height et width, en pixels, on peut déformer l image. Il faut éviter d afficher des grosses images en petit pour éviter de fournir une image de bonne qualité si on ne le souhaite pas et éviter d alourdir le chargement de la page. Balise <figure> : HTML 5 La balise «figure» a un rôle sémantique : ne fait rien mais indique que l image a un sens. Ca peut permettre de récupérer les images d un site. La balise «figcaption» permet d associer une légende à une ou plusieurs images qui seraient dans la balise «figure». <figure> <img src= <img src= <figcaption>légende de mes images</figcaption> </figure> http://www.w3schools.com/tags/tag_figure.asp http://www.w3schools.com/tags/tag_figcaption.asp EXEMPLE 5 : IMAGE 6 : Exercice EXEMPLE 6 : CV DE BASE Faire un CV structuré en HTML, sans mise en forme. Y mettre au moins : Un chapitre formation Un chapitre expérience Un chapitre compétences informatiques Un chapitre autres activités Mettre une photo en petit sur laquelle on peut cliquer pour accéder à une photo en grand. Mettre des liens vers des sites internet (pour votre expérience, les écoles où vous êtes passées, la ville d où vous venez, etc.). Utiliser des balises inline type strong, em ou mark pour mettre en valeur certains mots. Les bases du HTML 5 page 14/14 - Open Class Room