2. HTML 5, une présentation générale par Elisabeth de Pablo
Upcoming SlideShare
Loading in...5
×
 

2. HTML 5, une présentation générale par Elisabeth de Pablo

on

  • 1,830 views

Support de cours. Présentation générale du HTLM 5 dans le cadre du « Conception et réalisation d’un projet de communication numérique » (CIM 5a01d) - INaLCO

Support de cours. Présentation générale du HTLM 5 dans le cadre du « Conception et réalisation d’un projet de communication numérique » (CIM 5a01d) - INaLCO

Statistics

Views

Total Views
1,830
Slideshare-icon Views on SlideShare
570
Embed Views
1,260

Actions

Likes
0
Downloads
21
Comments
0

3 Embeds 1,260

http://webculturecommunication.wordpress.com 1251
https://webculturecommunication.wordpress.com 8
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    2. HTML 5, une présentation générale par Elisabeth de Pablo 2. HTML 5, une présentation générale par Elisabeth de Pablo Presentation Transcript

    • INALCO - CIM5A01D 19 OCTOBRE 2012 2. HTML 5.0, UNE PRÉSENTATION Rappel html HTML 5, une base 12012-2013 - Elisabeth de Pablo
    • Rappel Un site web ? • Y accéder >> à l’aide d’un navigateur ! Facile tout le monde sait le faire Faire un site ? • Nécessite de connaître un ou plutôt des langages informatiques dont HTML (HyperText Markup Language) et CSS (Cascading Style Sheets) Le navigateur traduit les langages pour faire apparaître sur votre ordinateur le site que vous désirez voir. 22012-2013 - Elisabeth de Pablo
    • Rappel La langage html a été inventé par Tim Berners-Lee en 1991 Il a créé le World Wide Web Consortium (W3C) http://www.w3.org/ Ainsi que la World Wide Web Foundation http://www.webfoundation.org/ De nombreuses améliorations ont été faites durant les dernières années = les versions différentes 32012-2013 - Elisabeth de Pablo
    • Rappel Que fait le langage HTML ? >> gère et organise le contenu de la page Jusqu’en 1996, il était tout seul… Est alors venu s’ajouter le CSS qui lui >> défini l’apparence de la page Un exemple bien connu pour se rendre compte des possibilités liées aux CSS : ZEN GARDEN 42012-2013 - Elisabeth de Pablo
    • HTML 5, une base Comment écrire du html ? Il existe beaucoup de logiciels permettant de réaliser des pages web plus ou moins facilement selon un type dit WYSIWYG ou Editeur de textes. Le plus connu actuellement : Adobe Dreamweaver (la version CS6 vient de sortir) Scriptol = page proposant une liste de logiciels gratuits Le moins onéreux mais orienté code >> utilisez un bloc-notes ou pour un peu plus de confort Note- Pad ou Note-Pad plus plus. 52012-2013 - Elisabeth de Pablo
    • HTML 5, une base Pour bien démarrer : les balises Prenons un éditeur de texte (notepad si possible) Le langage html utilise des “balises” pour coder ses éléments. Les balises sont repérables car elles sont encadrées par les signes < et > Il existe deux types de balises : les balises doubles ou paires et les balises simples ou orphelines. 62012-2013 - Elisabeth de Pablo
    • HTML 5, une base Balises doubles ou paires Elles encadrent un texte et sont composées de deux parties, une ouvrante < > et une fermante </ > <p> voici ma page web </p> Balises simples ou orphelines Elles servent à insérer un élément à un endroit déterminé, elles se placent généralement après un élément et peut être écrit : < br> ou <br/> 72012-2013 - Elisabeth de Pablo
    • HTML 5, une base Les attributs des balises Dans les balises, peuvent être ajoutés des attributs. Ce sont des textes qui fonctionnent comme des options <image nom=“monimage.jpg”> </image> On comprend ici que l’image à afficher est celle qui se nomme monimage.jpg. L’attribut est inscrit uniquement dans la balise ouvrante, on ne le répète pas dans la fermante. 82012-2013 - Elisabeth de Pablo
    • HTML 5, une base Structuration générale de la page HTML Il existe des impondérables pour créer et structurer une page : 1. Mention du DOCTYPE = mentionner qu’il s’agit d’une page web html <!DOCTYPE html> 2. Mention du langage <html> ici développement complet de la page </html> 92012-2013 - Elisabeth de Pablo
    • HTML 5, une base Structuration générale de la page HTML 2 3. L’en-tête et le corps Une page web est constituée de deux parties L’en-tête ou head = des informations générales sur la page qui ne sont pas affichées sur la page dans le navigateur. Ces informations restent au niveau du code mais sont importantes pour les moteurs de recherche par exemple. <head> </head> Le corps = le développement visible du site <body> </body> 102012-2013 - Elisabeth de Pablo
    • HTML 5, une base Structuration générale de la page HTML 3 4. L’encodage des caractères dans le <head> Sous quel format de caractère votre page est-elle enregistrée ? Il en existe plusieurs : ISO-8859, Windows… Normalement l’encodage “universel” est le utf-8 qui permet de lire tous les caractères utilisés dans le monde. <meta charset=“utf-8”/> 5. Balises meta <head> Ce sont des balises qui servent à écrire des méta données (metatags) – on les reverra plus tard. 112012-2013 - Elisabeth de Pablo
    • HTML 5, une base Structuration générale de la page HTML 4 6. Le titre <head> Donner un titre qui s’affichera dans l’onglet de votre navigateur <title> MA PAGE WEB </title> 7. Ecrire des commentaires dans le code pour laisser des indications, donner des informations, se répérer sur une page compliquée, … <head> et <body> <!-- <p> </p> --> 122012-2013 - Elisabeth de Pablo
    • HTML 5, une base Résumé <!DOCTYPE html> <html> <head> <meta charset:”utf-8”> <title> Ma Page Web </title> </head> <body> <p> entrer ici mon texte >/p> </body> 132012-2013 - Elisabeth de Pablo </html>
    • HTML 5, une base Le corps ou <body> Le texte sous forme de paragraphe et de retour à la ligne Paragraphe <p> bonjour et bienvenue sur mon site </p> Retour à la ligne <br> ou <br/> <p> bonjour et bienvenue sur mon site <br> Je suis heureux de vous présenter notre association </p> 142012-2013 - Elisabeth de Pablo
    • HTML 5, une base Le corps ou <body> 2 Les titres, sous-titres, texte courant, etc.  c’est là où le css est utile aussi. Par défaut, il y a 6 types de hierarchisation des caractères en html, nommés : <h1>, <h2>,…<h6> Autres mises en exergue de textes : mise en gras, en italique, surlignage, etc. Gras ou texte important : <strong> … </strong> Italique ou texte : <em> … </em> Surlignage : <mark> …. >/mark> 152012-2013 - Elisabeth de Pablo
    • HTML 5, une base Les listes Comment créer des listes et les référencer avec des puces, des tirets, etc. Les balises <ul> </ul> crées une liste Entre ces deux balises on désigne chaque élément entre deux autres balises <li> </li> <ul> <li> premier étage </li> <li> deuxième étage </li> </ul> 162012-2013 - Elisabeth de Pablo
    • HTML 5, une base Les listes 2 Comment créer des listes et les référencer avec des puces, des tirets, etc. Les balises <ol> </ol> crées une autre type de liste Entre ces deux balises on désigne chaque élément entre deux autres balises <li> </li> <ol> <li> premier étage </li> <li> deuxième étage </li> </ol> 172012-2013 - Elisabeth de Pablo
    • HTML 5, une base Faire des liens L’intérêt d’un site web > faire des liens vers d’autres pages ou d’autres sites Une balise à retenir <a> … </a> À laquelle vient s’ajouter un attribut : href Ainsi pour créer un lien dans une page on écrira : <a href=http://www.archivesaudiovisuelles.fr> Lien vers le site des archives audiovisuelles </a> 182012-2013 - Elisabeth de Pablo
    • HTML 5, une base Faire des liens 2 Il existe des liens absolus et des liens relatifs Liens absolus = adresse complète (href=“http://www.semionet.fr ”) Liens relatifs = adresse vers un fichier qui se trouve dans le dossier du site (href=“contact.html”) 192012-2013 - Elisabeth de Pablo
    • HTML 5, une base Faire des liens 3 Il est possible également de faire des liens vers une “ancre” = un point x de la page en cours ou vers un point y d’une autre page. Exemple de liens vers des sous-titres : <h2 id=“ancre1”> Les cours </h2> <p> texte </p> <h2 id=“ancre2”> Les Horaires</h2> <p> texte </p> L’appel au lien dans la page se fera : <a href=“#ancre1”> revoir les cours </a> L’appel au lien vers une ancre dans une autre se fera : <a href=“presentation.html#ancre1”> revoir les cours </a> 202012-2013 - Elisabeth de Pablo
    • HTML 5, une base Quelques indications supplémentaires Il est possible de faire ouvrir des liens dans un autre onglet du navigateur par exemple en rajoutant une cible <a href=“http://www.semionet.fr ” target=“blank” > ESCoM </a> Il est également possible de faire un lien vers un email <a href=“mailto:depablo@msh-paris.fr”> écrivez moi</a> Il est également possible de faire télécharger un document <a href=“document/nomfichier.pdf”> écrivez moi</a> 212012-2013 - Elisabeth de Pablo
    • HTML 5, une base Quelques indications supplémentaires 2 Il est possible de rajouter un texte qui s’affiche en surimpression lorsque la souris passe sur le lien <a href=“http://www.semionet.fr ” title=“Lien vers le site de l’ESCoM” > ESCoM </a> 222012-2013 - Elisabeth de Pablo
    • HTML 5, une base Insérer des images, Quels formats ? Choisir au mieux un format afin que l’image puisse s’afficher rapidement lors de la consultation de la page. Attention, il existe de nombreux formats, chacun est réservé à une fonction particulière. Pour le web, préférez : >> le jpg (jpeg), format très utilisé, permet de réduire le poids des photos et d’afficher jusqu’à 16 millions de couleurs >> le gif pour les graphiques, desssins ou tout fichier qui ne demande pas une grosse gestion des couleurs >> le png remplace le gif pour tous les graphiques 232012-2013 - Elisabeth de Pablo
    • HTML 5, une base Insérer des images Balise image simple accompagné de deux attributs : src (= l’emplacement de l’image en lien relatif ou absolu) et alt (=texte qui remplace l’image en cas de non affichage, pour accessibilité) <img src=“images/logo.jpg” alt=“logo du site” /> On peut ajouter un autre attribut pour générer une information bulle avec title=“…” 242012-2013 - Elisabeth de Pablo
    • HTML 5, une base Insérer des images 2 Vous pouvez maintenant insérer des images : 1. À l’intérieur de <p> …. </p> 2. à l’intérieur d’une balise <figure> … </figure> Si l’image illustre le texte, préférez <p> Si l’image apporte une information complémentaire au texte, préférez <figure> 252012-2013 - Elisabeth de Pablo
    • HTML 5, une base Insérer des images 3 Donnez une légende à votre image entre <figure> à l’aide de la balise <figcaption> : < figure > <img src=“images/logo.jpg” alt=“logo du site” /> <figcaption> Voici le logo du site </figcaption> </figure> 262012-2013 - Elisabeth de Pablo