DokuWiki het

het:adding_color

Anonymous (anonymous@undisclosed.example.com) — 2015-12-16T17:46:27+00:00

<- Controlling typographyExternalizing styles -> reserved keywords rgb() rgba()

het:basic_html_syntax

Anonymous (anonymous@undisclosed.example.com) — 2015-12-01T00:06:44+00:00

<- The importance of HTMLThe current state of HTML ->tag

(opening+closing tag)attributes

Deux types d'attributs : * attributs “informatifs”, qui donnent des informations sur l'élément * attributs fonctionnels, Emphasize tagnestingfait de loger un élément (enfant) dans un autre (parent)

het:challenge_-_adding_sectioning_content

Anonymous (anonymous@undisclosed.example.com) — 2015-12-16T15:12:15+00:00
<- Using WAI-ARIA rolesSolution - Adding sectioning content ->

het:choosing_a_code_editor

Anonymous (anonymous@undisclosed.example.com) — 2015-12-01T00:32:20+00:00
<- HTML resourcesExploring an HTML document -> brackets.io

het:controlling_document_outlines

Anonymous (anonymous@undisclosed.example.com) — 2015-12-09T22:46:07+00:00
<- The value of structureThe nav element -> Les headings sont une première manière d'outliner le document. On les complète avec article, section, main, aside. (inversement dès qu'on utilise un sectioning element, il faut utiliser un heading pour lui donner un titre).

het:controlling_line_breaks

Anonymous (anonymous@undisclosed.example.com) — 2015-12-09T00:14:00+00:00
<- Formatting paragraphsEmphasizing text ->
line break (ne nécessite pas de tag fermant) Noter la différence entre un line break et un changement de paragraphe (taille d'espacement). En xhtml, les tags devant être fermés, les self-closing tags s'écrivent par ex
.

het:controlling_typography

Anonymous (anonymous@undisclosed.example.com) — 2015-12-16T17:34:09+00:00
<- The style elementAdding color -> “shorthand notation”, ex : margin:0 auto; font-family:nom,“nom avec espaces”;

het:controlling_whitespace

Anonymous (anonymous@undisclosed.example.com) — 2015-12-09T00:46:35+00:00
<- Displaying special charactersDisplaying images -> Par défaut les navigateur ignoreront tous les whitespaces (qui se suivent) sauf le premier. whitespace additionnel (non breaking space) On ne s'en sert pas pour faire des choses que l'on devrait faire en CSS ! Bien : * blabla :

het:creating_inline_styles

Anonymous (anonymous@undisclosed.example.com) — 2015-12-16T17:23:35+00:00
<- HTML and CSSThe style element -> :;”> L'attribut style a failli être viré des specs. Ne pas utiliser sans bonne raison.

het:description_lists

Anonymous (anonymous@undisclosed.example.com) — 2015-12-16T16:54:30+00:00
<- Ordered listsChallenge - Creating lists -> Anciennement definition lists. Constituées de deux parties, le term et la description. Syntaxe très flexible. Un des éléments les plus flexibles syntaxiquement du HTML.
description list
term (the term always come first)
description

het:displaying_images

Anonymous (anonymous@undisclosed.example.com) — 2015-12-15T19:37:18+00:00
<- Controlling whitespaceChallenge - Formatting page content -> Les tags images sont du replaced content : ils sont remplacés par l'élément auquel ils font référence. Attributssrcsourcealttexte alternatifwidth & heightopt. si omis image affichée dans taille originale. pas besoin de préciser 'px', ex width=

het:displaying_special_characters

Anonymous (anonymous@undisclosed.example.com) — 2015-12-09T20:13:48+00:00
<- Emphasizing textControlling whitespace -> Certains caractères sont réservés par HTML, il faut alors utiliser ce qui sont appelés les named character entities. Ils sont de la forme <&><;>, par example &. Pour afficher “&” et non &, on écrit & (<&><;>)

het:doctype_declarations

Anonymous (anonymous@undisclosed.example.com) — 2015-12-03T23:05:05+00:00
<- Exploring an HTML documentThe document head -> Le doctype est supposer indiquer au browser quelle version de HTML est utilisée. Trigger the quircks mode. DTD : DocType Declaration Voir www.w3.org/QA/2002/04/valid-dtd-list.html Aujourd'hui le dtd se résume à : Aucune importance si en majuscule ou minuscule.

het:emphasizing_text

Anonymous (anonymous@undisclosed.example.com) — 2015-12-09T00:30:41+00:00
<- Controlling line breaksDisplaying special characters ->Boldpresentation tag, grasStronglogical tag : strong importanceItalicpresentation tag, italiqueEmphasislogical tag : emphaseCitecitation d'un travail par ex, titre de livre Présentation tag : visuel, à des fins de présentation, pas de sens particulier transmis

het:exploring_an_html_document

Anonymous (anonymous@undisclosed.example.com) — 2015-12-03T23:05:50+00:00
<- Choosing a code editorDOCTYPE declarations -> Exploring an HTML document Doctype declarationIndique la version de HTML utiliséeContient le htmlinformations à propos du document, scripts et styles externescontenu

het:exploring_the_anchor_element

Anonymous (anonymous@undisclosed.example.com) — 2015-12-16T15:20:45+00:00
<- Solution - Adding sectioning contentLinking to pages within your site -> Exploring the anchor element : link, request external ressources : anchor, créer de liens entre et au sein de pages web. attributs communs targetcontrôle ou une page we s'ouvre (dans la page, nouvele fenêtre ou onglet, etc.relRelation de la cible avec l'objet lié

het:externalizing_javascript

Anonymous (anonymous@undisclosed.example.com) — 2015-12-16T19:47:29+00:00
<- Responding to eventsNext steps -> On note la différence avec le link tag : * tag fermant * src et non href

het:externalizing_styles

Anonymous (anonymous@undisclosed.example.com) — 2015-12-16T18:06:05+00:00
<- Adding colorChallenge - Controlling basic styling -> Dans le head :

het:formatting_content_with_html

Anonymous (anonymous@undisclosed.example.com) — 2015-12-08T23:22:56+00:00
<- Understanding content modelsUsing headings ->
HTML Preformatted TextLe texte contenu dans cet élément est généralement affiché dans une police qui n'est pas proportionnelle, tel qu'affiché dans le fichier. Les blancs contenus dans cet élément sont affichés tels qu'ils sont contenus dans le texte original.

het:formatting_paragraphs

Anonymous (anonymous@undisclosed.example.com) — 2015-12-09T00:08:42+00:00
<- Using headingsControlling line breaks -> Bien faire attention au paragraphe, les ouvrir et les fermer ! (même si les fermetures de
sont optionnelles, pas de bonne raison de les omettre). Les vertical spacing en css peuvent collapser (ex : un heading avec 20px de margin-bottom et un
avec un margin-top de 20px donneront un espacement de 20px).

het:html_and_css

Anonymous (anonymous@undisclosed.example.com) — 2015-12-16T17:23:26+00:00
<- Solution - Creating listsCreating inline styles ->

het:html_and_javascript

Anonymous (anonymous@undisclosed.example.com) — 2015-12-16T18:33:57+00:00
<- Solution - Controlling basic stylingThe script element -> minimum experience required

het:html_resources

Anonymous (anonymous@undisclosed.example.com) — 2015-12-01T00:28:03+00:00
<- The current state of HTMLChoosing a code editor -> Documents très techniques : * www.w3.org/TR/html5/ * www.whatwg.org/specs/web-apps/current-work/multipage/ Aussi : * www.webplatform.org * developer.mozilla.org/en-US/docs/Web/HTML/Reference

het:linking_to_downloadable_resources

Anonymous (anonymous@undisclosed.example.com) — 2015-12-16T15:54:53+00:00
<- Linking to external pagesLinking to page regions ->

het:linking_to_external_pages

Anonymous (anonymous@undisclosed.example.com) — 2015-12-16T15:43:50+00:00
<- Linking to pages within your siteLinking to downloadable resources -> target : attribut permet d'ouvrir l'onglet dans un nouvel onglet, une nouvelle fenêtre...

het:linking_to_page_regions

Anonymous (anonymous@undisclosed.example.com) — 2015-12-16T16:12:06+00:00
<- Linking to downloadable resourcesChallenge - Creating links -> Naviguer au sein d'une page avec les fragmented identifiers usage des id

het:linking_to_pages_within_your_site

Anonymous (anonymous@undisclosed.example.com) — 2015-12-16T15:37:58+00:00
<- Exploring the anchor elementLinking to external pages -> Linking to pages within your site hrefurl absolue ou relativetitleNotamment bien pour les utilisteurs de techno assistives pour en savoir un peu plus relative links uphref=“../../“downhref=“my/folders”

het:listening_for_an_event

Anonymous (anonymous@undisclosed.example.com) — 2015-12-16T19:41:30+00:00
<- Using the DOMResponding to events -> element.onclick = function() { //code }

het:next_steps

Anonymous (anonymous@undisclosed.example.com) — 2015-12-16T19:51:20+00:00
<- Externalizing JavaScript -> * w3.org/TR/html5 * validator.w3.org * validator.w3.org/nu * webplatform.org * developer.mozilla.org * html5rocks.com * html5doctor.com

het:ordered_lists

Anonymous (anonymous@undisclosed.example.com) — 2015-12-16T16:42:58+00:00
<- Unordered listsDescription lists -> Listes ordonnées : plus de paramètres ex:
-> Le compte comment à 6
-> compte à rebours
-> lettres capitales au lieu de chiffres (paramètre “1”, défaut)
-> lettres minuscules

het:other_semantic_elements

Anonymous (anonymous@undisclosed.example.com) — 2015-12-10T23:01:38+00:00
<- The div elementUsing WAI-ARIA roles -> header Contenu introductif à un élément sectionnant. main W3C : « L'élément
représente le contenu principal du d'un document ou d'une application.La zone du contenu principal consiste en un contenu directement relié à ou qui rejoint le sujet central du document ou les fonctionnalités centrales d'une application. » « L'élément main n'est pas sectionnant et n'a aucun effet sur le

het:responding_to_events

Anonymous (anonymous@undisclosed.example.com) — 2015-12-16T19:43:31+00:00
<- Listening for an eventExternalizing JavaScript -> element.classlist.add(""); element.classlist.remove("") element.classlist.toggle("")

het:the_article_element

Anonymous (anonymous@undisclosed.example.com) — 2015-12-10T12:53:19+00:00
<- The nav elementThe section elements -> Elements that stands alone

het:the_aside_element

Anonymous (anonymous@undisclosed.example.com) — 2015-12-10T13:14:46+00:00
<- the section elementsthe div element -> * Issu des sidebar. * représente du contenu relatif au contenu situé dans l'élément parent. (related to) W3C : « The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page. »

het:the_current_state_of_html

Anonymous (anonymous@undisclosed.example.com) — 2015-12-01T00:22:05+00:00
<- Basic HTML syntax HTML resources ->1991Tim Berner-Lee pulie un document appelé “HTML Tags”1995-97HTML2-4 sont publiés. Les débuts du HTML sont marqués par un développement rapide et une adoption inégale des standards2000Publication du XHTML 1.0 par le W2C, perçu comme le premier pas d'un mouvement de rapprochement vers le XML.

het:the_div_element

Anonymous (anonymous@undisclosed.example.com) — 2015-12-10T22:45:36+00:00
<- The aside elementOther semantic elements ->
is for divide, element permettant du grouper ou structurer des éléments sans véhiculer de sens particulier. Le W3C dit : « Les auteurs sont vivement encouragés à n'utiliser l'élément div qu'en dernier recours, si aucun autre élément n'est approprié. L'usage d'éléments mieux appropriés que les éléments div amènent une meilleure accessibilité pour les lecteurs et une meilleurs maintenabilité pour les auteurs. »

het:the_document_body

Anonymous (anonymous@undisclosed.example.com) — 2015-12-03T23:37:40+00:00
<- The document headUnderstanding content models -> élément frère de (enfant de )

het:the_document_head

Anonymous (anonymous@undisclosed.example.com) — 2015-12-03T23:19:11+00:00
<- DOCTYPE declarationsThe document body ->infos sur le documents, scripts et styles externes, instruction additionnelles sur comment le document doit être rendu Se situe sous le DTD, dans le . Au tag entrant on peut ajouter l'attribut lang avec la valeur fr par exemple :

het:the_importance_of_html

Anonymous (anonymous@undisclosed.example.com) — 2015-11-30T23:56:06+00:00
<- Basic HTML syntax ->HTMLEssential structureCSSPage designJSPage behaviour HTML = Readable and convey structure to user. Markup Language. What the content is and how it relate to other elements. HTML = Lisible, communique la structure du document au lecteur. Langage de markup (annotation?). Indique ce qu'est le contenu et quel est sa relation aux autres éléments.

het:the_nav_element

Anonymous (anonymous@undisclosed.example.com) — 2015-12-10T12:33:09+00:00
<- Controlling document outlinesThe article element -> Structurer des pages Véhiculer du sens au travers d'une structure Créer des pages correctement structurées est la base de tout site internet. Un solide structure sémantique permet de véhiculer du sens et de présenter correctement différents types de contenus avec rien de plus que le balisage (markup) de la page.

het:the_script_element

Anonymous (anonymous@undisclosed.example.com) — 2015-12-16T18:41:34+00:00
<- HTML and JavaScriptWriting a function ->

het:the_section_elements

Anonymous (anonymous@undisclosed.example.com) — 2015-12-10T13:00:53+00:00
<- The article elementThe aside element -> - supposé avoir un heading - not a generic container element W3C note : les auteurs sont encouragés à utiliser l'element article davantage que section s'il peut faire sens de syndicate les contenus de l'élément.

het:the_style_element

Anonymous (anonymous@undisclosed.example.com) — 2015-12-16T17:30:19+00:00
<- Creating inline stylesControlling typography -> Dans le head : element.class

het:the_value_of_structure

Anonymous (anonymous@undisclosed.example.com) — 2015-12-10T12:50:28+00:00
<- Solution - Formatting page contentControlling document outlines -> Semantics : structure of the webpage to show meaning, not just layout. HTML Sectioning Elements * headings :
à
* article * aside * nav * section Note : non,
n'est pas un élément sectionnant ! Sur MDN : Contenu sectionnant

het:understanding_content_models

Anonymous (anonymous@undisclosed.example.com) — 2015-12-04T00:02:28+00:00
<- The document bodyFormatting content with HTML -> Content models define the type of content expected inside an element, and control syntax rules such as element nesting. Avant html5, globalement que deux types de modèles : block et inline. En HTML5, de nouveaux *content models* ont été créé pour étendre les capacités structurelles et sémantiques d'

het:unordered_lists

Anonymous (anonymous@undisclosed.example.com) — 2015-12-16T16:34:38+00:00
<- Solution - Creating linksOrdered lists -> Listes : conçues pour grouper des éléments. Que ce soit dans des menus, formulaires, product informations. Unordered Lists
unordred list tag
list item tag Peuvent être nestés.

het:using_headings

Anonymous (anonymous@undisclosed.example.com) — 2015-12-08T23:58:20+00:00
<- Formatting content with HTMLFormatting paragraphs -> Avant le html5, le seul sectioning element étaient les headers. Ils sont maintenant complétés par d'autres éléments. Dans chrome fonction view outline disponible et permettant de visualiser la structure du document. stratégies d'optimisations :

het:using_the_dom

Anonymous (anonymous@undisclosed.example.com) — 2015-12-16T18:50:50+00:00
<- Writing a functionListening for an event ->

het:using_wai-aria_roles

Anonymous (anonymous@undisclosed.example.com) — 2015-12-10T23:19:39+00:00
<- Other semantic elementsChallenge - Adding sectioning content -> w3.org/TR/wai-aria landmark roles
”> w3.org/TR/2014/WD-aria-in-html-20140626

het:writing_a_function

Anonymous (anonymous@undisclosed.example.com) — 2015-12-16T18:44:48+00:00
<- The script elementUsing the DOM -> window.onload = function() { // code s'exécutant lors du chargement terminé de l'objet window }

DokuWiki het

het:adding_color

het:basic_html_syntax

het:challenge_-_adding_sectioning_content

het:choosing_a_code_editor

het:controlling_document_outlines

het:controlling_line_breaks

het:controlling_typography

het:controlling_whitespace

het:creating_inline_styles

het:description_lists

het:displaying_images

het:displaying_special_characters

het:doctype_declarations

het:emphasizing_text

het:exploring_an_html_document

het:exploring_the_anchor_element

het:externalizing_javascript

het:externalizing_styles

het:formatting_content_with_html

het:formatting_paragraphs

het:html_and_css

het:html_and_javascript

het:html_resources

het:linking_to_downloadable_resources

het:linking_to_external_pages

het:linking_to_page_regions

het:linking_to_pages_within_your_site

het:listening_for_an_event

het:next_steps

het:ordered_lists

het:other_semantic_elements

het:responding_to_events

het:the_article_element

het:the_aside_element

het:the_current_state_of_html

het:the_div_element

het:the_document_body

het:the_document_head

het:the_importance_of_html

het:the_nav_element

het:the_script_element

het:the_section_elements

het:the_style_element

het:the_value_of_structure

à

* article * aside * nav * section Note : non, n'est pas un élément sectionnant ! Sur MDN : Contenu sectionnant

het:understanding_content_models

het:unordered_lists

het:using_headings

het:using_the_dom

het:using_wai-aria_roles

het:writing_a_function

* article * aside * nav * section Note : non,
n'est pas un élément sectionnant ! Sur MDN : Contenu sectionnant