1. HTML
Le langage HTML (Hyper Text Markup Language ) est crée par l’inventeur du web Tim Berners Lee en 1989.
L'« hypertexte » désigne les liens qui relient les documents web . la liason peut etre interne ou externe.
W3C HTML specification ( version 4.01)
« To publish information for global distribution, one needs a universally understood language, a kind of publishing mother tongue that all computers may potentially understand. The publishing language used by the World Wide Web is HTML (from HyperText Markup Language). »
HTML est défini comme un langage de balisage. Un langage à base de balises est simplement un moyen pour annoter un document afin de distinguer les annotations du texte annoté. Les langages de balisage tels que HTML, Tex, XML et XHTML permettent aux utilisateurs de contrôler la disposition et l’affichage du texte et les éléments visuels.
Donc HTML est un langage à balisage qui sert décrire la structure logique d'un document hypertexte.
Les balises sont utilisées pour annoter du texte, des images et d'autres contenus. La balise donne des informations sur le contenu différents du contenu (entouré par la balise).
Cette « information sur le contenu » en HTML est implémentée via des tags (ou plus formellement, des éléments HTML)
Un exemple
des balises HTML: <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>, <video>, <ul>, <ol>, <li> ….etc
FIGURE 3.1 HTML timeline (ricardo hoar)
1. HTML 5
La clé de l'apprentissage du HTML dans toutes les spécifications HTML5 est la syntaxe des éléments et des attributs.
Les documents HTML sont composés de contenu textuel et des éléments HTML.
L'élément HTML est souvent utilisé de manière interchangeable avec le terme balise
Une balise HTML est composé du nom de l'élément, entouré par des crochets.
Dans la syntaxe HTML, la plupart des éléments sont écrits avec une balise de début et une balise de fin(avec / après le crochet d’ouverture <), avec le contenu entre les deux.
2. Elément HTML
Syntaxe
<tagname>content</tagname>
Exemple
<p> Mon premier paragraphe HTML. </p>
Les éléments HTML peuvent également contenir des attributs. Un attribut HTML est une paire nom=valeur qui fournit plus d'informations sur l'élément HTML.
1. Imbrication des éléments HTML
Les éléments HTML peuvent être imbriqués.
Dans un ce cas, l'élément conteneur est dit un parent de l'élément contenu, ou enfant. Tous les éléments contenus dans l'enfant sont dits descendants de l'élément parent ; de même, tout élément enfant donné peut avoir une variété d'ancêtres. Ce contenu forme une hiérarchies des éléments qu’on peut le représenter par un arbre.
Exemple
|
<!DOCTYPE html> |
1. Balise sémantique
Avant avec html on peut decrire la presentaion du contenu (coleur, taille de po ;lice ..etc) mais maintenant cette pratique est vue comme une mauvaise pratique.
Actuellement html est utilisé seulement pour décrire la structure de document web(basic structural information in a document, such as headings, lists, paragraphs, links, images, navigation, footers, and so on) . Etg les informations concernant la présentation visuelle du contenu par le navigateur est laissé au langage CSS.
Par conséquent, il est souvent conseillé aux auteurs HTML débutants de créer des documents HTML sémantiques. Autrement dit, un document HTML ne doit pas décrire comment présenter visuellement le contenu, mais seulement décrire la sémantique structurelle ou la signification de son contenu.
Structure d’un document HTML
HTML5 contient de nombreux éléments de structure et de présentation, trop nombreux pour être entièrement couverts dans ce cours.
1. Headings
h1 à h6
|
Headings.(h1..h6) Describes the main structure of document. There are six levels of headings. Paragraphs. (p) The basic unit of text in HTML. As block-level elements, browsers typically add newlines before and after the element. Link. (a ) Hyperlinks are essential feature of all web pages and can reference another page or another location in same page. Inline Text Elements. (em strong) These do not change the flow of text and provide more information about text. Image. (img) Used to display an image by specifying a filename or URL Unordered List.(ul) Used to display a bulleted list. Within a list is a collection of list item elements. Division.(div) Container for text or other HTML elements. Like paragraphs, they are also block-level elements Character Entity.(alt..) The mechanism for including special symbols (such as ©) or characters that have a reserved meaning in HTML. Horizontal Rule.(hr) Indicates a thematic break in the text. Usually displayed as a horizontal line. Semantic Block Element(footer header..). Special containers in HTML5 for describing structural elements in a document |
1. Éléments structurels HTML5
1. CSS
CSS est une norme W3C pour décrire l'apparence des éléments HTML.
CSS peut être ajouté directement à n'importe quel élément HTML (via l'attribut style), dans l'élément <head> ou, le plus souvent, dans un fichier texte séparé contenant uniquement du CSS.
2. Syntaxe CSS
Un document CSS se compose d'une ou plusieurs règles de style.
Une règle se compose d'un sélecteur qui identifie l'élément ou les éléments HTML qui seront affectés, suivi d'une série de paires propriété:valeur (chaque paire est également appelée une déclaration), comme illustré à la Figure 4.2. La série de déclarations est également appelée bloc de déclaration.
1. Sélecteur
identifie l'élément ou les éléments HTML qui seront affectés par les déclarations dans la règle.
Un pattern pour identifier les éléments qui vont recevoir le style. Il y’v a plusieurs facon pour ecrire les sélecteurs.
2. Proprietés
Chaque déclaration CSS doit contenir une proprieté. Les noms des proprietés sont définis par le CSS.
1. Valeur
Chaque déclaration CSS contient également une valeur pour une propriété. L'unité d'une valeur donnée dépend de la propriété.
Certaines valeurs de propriété sont tirées d'une liste prédéfinie. D'autres sont des valeurs de mesures de longueur, des pourcentages, des nombres sans unités, des valeurs de couleur et des URL.
Exemple color : red, green……
Height : 30px….
|
<head> <meta charset="utf-8"> <title>Chapter 4</title> <style> h1 { font-size: 24pt; } h2 { font-size: 18pt; font-weight: bold; } </style> </head> <body> |
il existe plusieurs manieres pour spécifier une unité de mesure. La mesure peut etre absolue ou relative ( une très bonne pratique).
|
px Pixel. In CSS2 this is a relative measure, while in CSS3 it is absolute (1/96 of an inch). Relative (CSS2) Absolute (CSS3) |
|
em |
Equal to the computed value of the font-size property of the element on which it is used. When used for font sizes, the em unit is in relation to the font size of the parent. |
|
% relative |
A measure that is always relative to another value. The precise meaning of % varies depending upon the property in which it is being used. |
|
Inch Cm Mm Pt Points (equal to 1/72 of an inch) |
absolues |