26 SEPTEMBRE 2017

#1 – 26 SEPTEMBRE 2017

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 <br/>
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>

  • 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 <strong>HyperText Markup Language</strong>. Ce
<!–Em indique un texte d’importance relative–>
langage est utilisé pour <em>marquer sémantiquement un contenu</em>.
<!–Mark souligne un contenu particulier–>
<br/>Les élèves doivent venir en cours le mardi après-midi car <mark>le prof est génial</mark> même si son cours est<mark>WTF</mark> !!!

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 <p> 
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 <p id= »monancre »>Mon ancre</a> + <a href= »#monancre »>Mon ancre</a>
IMAGES* : <img src= »http://www.image.com/monimage.jpg »>

TEST 

 
* Types, poids des images 




Lire aussi les articles suivants :