ABC du WEB: Language HTML

Language HTML

L'HTML est un langage informatique utilisé sur l'internet. Ce langage est utilisé pour créer des pages web. L'acronyme signifie HyperText Markup Language, ce qui signifie en français "langage de balisage d'hypertexte". Cette signification porte bien son nom puis qu’effectivement ce langage permet de réaliser de l'hypertexte à base d'une structure de balisage.

Ce n'est pas à proprement parlé un langage de programmation, mais plutôt un langage qui permet de mettre en forme du contenu. Les balises permettent de mettre en forme le texte et de placer des éléments interactif, tel des liens, des images ou bien encore des animations. Ces éléments ne sont pas dans le code source d'une page codé en HTML mais "à coté" et la page en HTML ne fait que reprendre ces éléments.

Pour visualiser une page en HTML il est nécessaire d'utiliser un navigateur web. La plupart du temps d'autres langages informatique sont associé à une page codé en HTML. Par exemple le CSS, qui permet de mettre en forme le contenu d'une page codé en HTML. Il y a également des langage informatique qui dépendent entièrement du HTML, tel le JavaScript.

@charset "UTF-8"; :root { --initial-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, sans-serif; --size-body: 85rem; font-size: max(100%, 16px); --cols: 12; --gutter: 2.375rem; --radius: var(--small-gutter); --font-weight-headers: 400; } :root[class*="contrast"] { --font-weight-headers: 500; } :root:not([class*="dys"]) { --base-font: var(--initial-font); --font-family-headers: var(--initial-font); } :root.dyslexic { --base-font: 'Accessible DfA', var(--initial-font); --font-family-headers: 'Accessible DfA', var(--initial-font); } :root.dyslexic-comic { --base-font: 'Comic Sans MS', var(--initial-font); --font-family-headers: 'Comic Sans MS', var(--initial-font); } :root.initial-font { --initial-font: ""; --base-font: var(--initial-font); --font-family-headers: var(--initial-font); } :root[class*="dys"] .no-dyslexic, .initial-font { font-family: var(--initial-font); } .font-family-code { font-family: var(--font-family-monospace) !important; } @media (max-width: 19.9375rem) { :root { --gutter: 1.875rem; --font-size: 1.0625rem; } } @media (min-width: 20rem) { :root { --font-size: 1rem; } @media (max-width: 47.9375rem) { :root { --gutter: 1.875rem; } } @media (min-width: 48rem) { @media (min-width: 64rem) { :root { --size-body: 80.625rem; } } } } :root.dyslexic { --font-size: calc(1rem* .9); } :root.dyslexic-comic { --font-size: 1rem; } :root { --lh: 1.55; color-scheme: dark light; --font-family: var(--base-font); --blue: rgb(47, 110, 190); --darkblue: rgb(0, 36, 94); --lightblue: rgb(184, 207, 241); --applegreen: rgb(90, 130, 12); --lightgreen: rgb(212, 249, 201); --limegreen: rgb(210, 225, 0); --green: rgb(42, 129, 62); --orange: rgb(193, 71, 5); --orangered: rgb(255, 69, 0); --raspberry: rgb(205, 0, 55); --red: rgb(213, 43, 30); --yellow: rgb(255, 182, 18); --maroon: rgb(154, 90, 12); --antigua: rgb(130, 196, 206); --lightgray: rgb(211, 211, 211); --whitesmoke: rgb(252, 252, 252); --teal: rgb(0, 122, 124); --carbon: rgb(111, 113, 116); --basic-color: black; --basic-color-reverse: white; --outline-color: var(--link-color, blue); --outline-offset: 0.125rem; --outline-width: 0.125rem; --outline-style: solid; --text-decoration-style: dotted; --text-decoration-color: var(--primary-color); --text-decoration-thickness: 0.0625em; --small-radius: calc(var(--radius) / 2); --font-family-monospace: Consolas, Courier, monospace; --sticky-top: var(--header-outer-height); --negative-gutter: calc(var(--gutter) / 2 * -1); --half-gutter: calc(var(--gutter) / 2); --small-gutter: calc(var(--gutter) / 4); --tiny-gutter: calc(var(--gutter) / 8); --double-gutter: calc(var(--gutter) * 2); --negative-half-gutter: calc(var(--negative-gutter) / 2); --negative-small-gutter: calc(var(--negative-gutter) / 4); --background-color-page: rgb(248, 248, 248); --background-color-secondary: rgb(255, 255, 255); --background-color-hero: rgb(212, 207, 205); --background-color-hero-alpha: rgba(0, 0, 0, 0.05); --background-color-menus: rgb(255, 255, 255); --background-error-color: rgb(246, 197, 237); --primary-color: rgb(86, 98, 111); --heading-color: rgb(17, 17, 17); --box-shadow: rgb(219, 219, 219); --box-shadow-light: rgb(219, 219, 219); --under-box-shadow: 0 0.4375rem 0.3125rem -0.3125rem rgba(0, 0, 0, 0.3); --link-color: rgb(46, 86, 255); --link-color-alternate: rgb(39, 124, 58); --button-primary-background: rgb(7, 102, 255); --button-primary-foreground: rgb(255, 255, 255); --button-radius: 0.3125rem; --error-color: var(--raspberry); --message-dialog-error: var(--basic-color-reverse); --highlight-sentence: rgb(99, 54, 222); --code-area-background: rgba(73, 29, 29, 0.05); --code-area-foreground: var(--basic-color); --code-area-border: rgb(115, 46, 46); --set-outline-color: var(--green); } :root[class*="contrast"] { filter: contrast(105%); --outline-color: var(--basic-color, blue); --outline-style: solid; --outline-offset: 0.125rem; --outline-width: 0.1875rem; --text-decoration-style: solid; --link-color: rgb(46, 86, 255); --link-color-alternate: rgb(0, 78, 222); --background-color-hero: rgb(239, 239, 241); --background-color-hero-alpha: rgb(236, 238, 241); --text-decoration-color: currentColor; --box-shadow: rgb(186, 186, 186); --primary-color: rgb(50, 50, 50); --heading-color: rgb(0, 0, 0); --background-color-page: rgb(248, 248, 248); --background-color-secondary: rgb(255, 255, 255); --background-color-menus: rgb(255, 255, 255); } :root[class*="contrast"] img { filter: contrast(110%); } :root.prefers-contrast { --primary-color: rgb(16, 16, 16); --heading-color: black; } @media (prefers-color-scheme: dark) { :root { --applegreen: rgb(130, 190, 0); --green: yellowgreen; --blue: rgb(138, 180, 249); --limegreen: rgb(255, 253, 0); --carbon: rgb(137, 139, 143); --basic-color: white; --basic-color-reverse: black; --background-color-page: rgb(17, 23, 39); --background-color-secondary: rgb(29, 36, 63); --background-color-hero: rgb(8, 15, 19); --background-color-hero-alpha: rgba(0, 0, 0, 0.15); --background-color-menus: rgb(15, 14, 38); --background-error-color: rgb(246, 197, 237); --primary-color: rgb(175, 191, 209); --heading-color: rgb(255, 255, 255); --box-shadow: rgb(34, 32, 68); --box-shadow-light: rgb(49, 54, 65); --under-box-shadow: 0 0.4375rem 0.3125rem -0.3125rem rgba(0, 0, 0, 0.5); --link-color: rgb(114, 149, 255); --link-color-alternate: var(--yellow); --button-primary-background: rgb(7, 102, 255); --button-primary-foreground: rgb(255, 255, 255); --button-secondary-background: rgb(17, 17, 17); --button-secondary-foreground: rgb(218, 218, 218); --error-color: rgb(255, 169, 174); --highlight-sentence: var(--antigua); --code-area-background: rgb(21, 13, 31); --code-area-border: rgb(104, 68, 148); --set-outline-color: var(--antigua); } :root[class*="contrast"] { --primary-color: rgb(238, 238, 238); --heading-color: rgb(255, 255, 255); --box-shadow: rgb(136, 136, 136); --box-shadow-light: var(--box-shadow); --under-box-shadow: 0 0.4375rem 0.3125rem -0.3125rem rgba(0, 0, 0, 1); --background-color-page: rgb(17, 21, 25); --background-color-secondary: rgb(17, 21, 25); --background-color-hero: rgb(0, 0, 0); --background-color-hero-alpha: rgb(0, 0, 0); --background-color-menus: var(--background-color-secondary); --link-color: var(--applegreen); --link-color-alternate: rgb(255, 204, 2); --button-secondary-background: rgb(0, 0, 0); } } @media (max-width: 47.9375rem) { :root { --header-outer-height: 3.125rem; --size-icon-header: calc(var(--header-outer-height) * .35); } } @media (min-width: 48rem) and (max-width: 85.3125rem) { :root { --header-outer-height: 3.75rem; --size-icon-header: calc(var(--header-outer-height) * .4); } } @media (min-width: 85.375rem) { @media (max-height: 85.3125rem) { :root { --header-outer-height: 4.0625rem; --size-icon-header: calc(var(--header-outer-height) * .35); } } @media (min-height: 85.375rem) { :root { --header-outer-height: 4.375rem; --size-icon-header: calc(var(--header-outer-height) * .35); } } }

ABC du WEB

Language HTML

Événement de seul-jour

Événement de seul-jour