#1 – 1er OCTOBRE 2019

UN PEU D’HISTOIRE…

HTML > 1993 (il faudra attendre 1996 pour l’arrivée de CSS et les années 2000 pour la compatibilité des Navigateurs)
HTML 4 >1997 (debut de l’internet grand public)
CSS > 1998 (70 nouvelles instructions….) >CSS2 2001 > CSS3 (debut du dev en 1999 pour une livraison 10 ans + tard !)
HTML 5 > 2014 (nouvelle ère)

INCONTOURNABLE car pas de concurrents !
INDISPENSABLE pour sites, appli, blog,…
UNE culture ESSENTIELLE (comprendre et dialoguer avec les dev ou les agences…)
HTML > Langage de balisage (donner du sens et une structure à du contenu)
CSS > Feuille de style en cascade, mettre en forme un style (mis en forme du contenu)

Le HTML, je vous l’ai dit, sert à différencier d’un point de vue sémantique les différents objets que l’on peut rencontrer et dont on peut avoir besoin (titre, paragraphe, espace, image, etc.).

HTML : définition

Le HTM sert à différencier d’un point de vue sémantique les différents objets et seulement ça !!!!
Pour construire une page web on aura sans doute besoin de :

de titres,
paragraphes,
espaces,
images,
etc..

HTML : 3 termes clé

Element > définir les objets dans la page web (p, H1, a, …)
Balises > paires de balises ouvrantes / fermantes !! Attention aux orphelines (ex : BR, break  
Attributs > Donner des indications supplémentaires aux éléments

ex : <a href= »http://www.esdac.fr »>bienvenue à l’ESDAC</a> —–> bienvenue à l’ESDAC

HTML : Structure (et imbrication !!!!)

Déclaration du doctype (type de document)
<!DOCTYPE html>
Déclaration du doctype (type de document)
<HTML>
<HEAD><TITLE><meta charset= »utf-8″> (langue latine)
</HEAD>
<BODY>

</BODY>
</HTML>

Ci-dessous on commence à coder un document HTML avec l’utilisation des premières balises Hn (H1, H2,…) et aussi les paragraphes (balise ). On utilise aussi la balise d’intégration des images <img src= » »>. L’attribut ALT (non encore vu en cours) viens préciser ce qui se trouve sur l’image ! On en reparlera au sujet du référencement de notre site.

Ci-dessus, le résultat de notre code précédent !!!

Le CSS : langage de styles ou la mise en forme

Il faut retenir que le code HTML est le « gros œuvre » (les murs porteur de notre maison !) et que le CSS gère le style (les tapisseries et la peinture !)

En utilisant les propriétés de CSS, on créé un fichier annexe (ex = cours.css) qui contiendra les instructions qui viendront contraindre nos divers éléments HTML.

Ex : changer la taille ou la couleur d’un texte !

Dans l’exemple ci-dessous, on comprend qu’il est nécessaire d’avoir 2 fichiers spécifiques (1 HTML et 1 CSS) mais aussi de l’importance de créer un lien entre ces 2 fichiers.

C’est le rôle de la ligne de code suivante :

Dans cet exemple, les couleurs sont déterminées simplement avec leur nom en anglais (red, blue, black,…) cependant pour une plus large palette de couleurs, on utilise une codification en HEXADECIMAL (codage en 16 bits) > de A à F et de 0 à 9

Quant aux tailles des caractères, ils sont exprimés en pixels (px) mais aussi en % ou en cadratin (em)

le rouge s’écrit alors #FF0000

INDENTER le code : bonne pratique pour tout simplement l’aérer ! Créer des espaces au début de certaines lignes afin de rendre le code plus lisible

COMMENTER le code : ajouter des commentaires pour la compréhension du développement (travail dans la durée, collaboration…. Les commentaires ne s’affichent pas dans la page web mais sont visibles si on édite le code source de la page. Pas d’information sensible !!!!
<!–Mon commentaire–>

QUELQUES ELEMENTS IMPORTANTS : Strong, Emphasis et Mark

STRONG > donne l’indication (aux moteurs de recherches !) qu’un contenu est particulièrement important
Emphasis > donne l’indication qu’un contenu est important MAIS un peu moins qu’avec STRONG
Mark > permet de faire ressortir un contenu

EXEMPLE :
HTML signifie HyperText Markup Language. Ce
<!–Em indique un texte d’importance relative–>
langage est utilisé pour marquer sémantiquement un contenu.
<!–Mark souligne un contenu particulier–>
 Les élèves doivent venir en cours le mardi après-midi car le prof est génial même si son cours estWTF !!!

RESULTAT (une fois édité dans un navigateur) :
HTML signifie HyperText Markup Language. Ce
langage est utilisé pour marquer sémantiquement un contenu.
Les élèves doivent venir en cours le mardi après-midi car le prof est génial même si son cours est WTF !!!

LES PRINCIPAUX ELEMENTS :

TITRES et paragraphes : balise <H.> et 
LISTES : non ordonnées <ul><li> et ordonnées <ol><li>
LIENS : internes et externes > <a href= » »></a> + arguments (class, target,…)
ANCRES : lien interne à la page Mon ancre</a> + <a href= »#monancre »>Mon ancre</a>
IMAGES* : <img src= »http://www.image.com/monimage.jpg »>

TEST

* Types, poids des images

1er octobre 2019