html - Offirmo-team/wiki GitHub Wiki

HyperText Markup Language, le langage de balisage majoritairement utilisé pour représenter une page web.

Voir aussi : css, javascript, développement web, appli web, http...

Introduction

Références :

HTML5

Sécurité

iframes

Attacks:

sub-windows

NON ! window.open(url)

OUI :

// Needed for Security (removing access to window.opener on destination page)
const newWindow = window.open()
newWindow.opener = null
newWindow.location.replace(url)

bases

hyperliens / link / anchor

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

<a href="foo.html" target="_blank">...</a>


<a download href="README.md">download</a>

Structure

Head

Base template

<!doctype html>
<html>
  <head>
	<meta charset="utf-8">
	<title>Test CSS</title>
	<link rel="stylesheet" href="css/styles.css?v=1.0">
	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
  </head>
  <body>
	<script src="js/scripts.js"></script>
  </body>
</html>

style guide

http://www.w3schools.com/html/html5_syntax.asp

Combinations

Tables https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

<table style={{border: '1px solid orange'}}>
	<caption>Colors from CSS variable</caption>
	<thead>
		<tr>
			<th>CSS variable</th>
			<th>name</th>
			<th>foreground</th>
			<th>background</th>
		</tr>
	</thead>
	<tbody>
		{COLORS_VARS_RADIX.map(radix => {
			const css_var = `--o⋄color__` + radix
			return (
				<tr>
					<td className="o⋄font⁚roboto-mono">{ css_var }</td>
					<td>{ radix }</td>
					<td style={{color: `var(${css_var})`}}>foreground</td>
					<td style={{backgroundColor: `var(${css_var})`}}>background</td>
				</tr>
			)
		})}
	</tbody>
</table>

Details

<details>
	<summary>expand me...</summary>
	<p>Hello, world!</p>
</details>

Definition

<dl><dt>Term</dt><dd>Definition...</dd></dl>

Listes: ol, ul

Chargement d'une page

  1. Chargement du html
  2. Parsing du head...
  3. Chargement des scripts et CSS, + ou - en parallèle
  4. ...

syntaxe

balises

Le HTML est un langage structuré et sémantique. Une page web doit donc être écrite en se focalisant sur le contenu uniquement : titre, parties, séquence de paragraphes... et non sur l'apparence. Le rendu visuel d'une page web est le rôle d'autres technologies comme CSS.

/* tags HTML5 qui se comportent comme des blocs */ , canvas, datagrid, datalist, details, { display: block; } /* tags de type en ligne */ abbr, eventsource, mark, meter, time, progress, output, bb { display:inline; } -> Si seulement c'était si simple ! http://www.alsacreations.com/article/lire/626-impact-rendu-indentation-code.html Impact sur le rendu de la mise en forme du code HTML

balises sémantiques

http://playground.html5rocks.com/#semantic_markup

  • main https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main
  • article + header, section : article représente un texte indépendant, une portion de contenu, comme par exemple un article de journal, de blog ou de forum
  • aside est destiné au contenu tangentiel, une sorte de bonus au contenu principal, que ce soit pour un article ou l'ensemble d'un document HTML.
  • dialog
  • figure
  • header / hgroup, footer
  • menu
  • nav / ul
  • h1...h6
  • small/strong
  • em (emphasis)
  • ...

balises "techniques"

Conteneurs discutés

  • div
  • span
  • iframe
  • ...

balise auto-fermantes: non !

http://stackoverflow.com/questions/3558119/are-self-closing-tags-valid-in-html5

Intégration avec d'autres technos

javascript

Voir page dédiée.

DOM Manipulation

http://youmightnotneedjquery.com/

SVG

voir svg

Recettes

navigation au clavier

http://jehiah.cz/a/tabindex

favicones

https://realfavicongenerator.net

   <!-- Fav and touch icons -->
   <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
   <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
     <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
                   <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
                                  <link rel="shortcut icon" href="../assets/ico/favicon.png">

formulaires

<input type="email" placeholder="Enter email">

all HTML5 types :

<input type="file">

<form action="">
   <label>
      <input type="radio" name="foo" id="optionsRadios1" value="option1" disabled>
      Option three is disabled
   </label>
   <label>
      <input type="radio" name="foo" id="optionsRadios2" value="option2" disabled>
      Option three is disabled
   </label>
</form>

<label>
  <input type="checkbox" value="" disabled>
  Option two is disabled
</label>



<textarea rows="3"></textarea>

<select multiple class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
</select>

<button type="submit">Submit</button>

http://www.sitepoint.com/html5-forms-javascript-constraint-validation-api/

select

https://developer.mozilla.org/fr/docs/Web/HTML/Element/select

alignement

Voir CSS ;)

drag and drop

http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html

Ouvrir un lien dans un nouvel onglet

Attention faille de sécurité !

<a href="github.com" title="fork" target="_blank" rel="noopener noreferrer">Fork on Github</a>

Avancé

Extension

Compatibilité

What’s the Best Source for Browser Usage Stats? http://www.impressivewebs.com/browser-usage-stats/

problèmes rencontrés

...

à trier

Test footer

⚠️ **GitHub.com Fallback** ⚠️