Titre de la page

====== Initiation à HTML ===== ===== Bref historique ===== {{:langages:html:html5.png?nolink&100 |}} {{ :nsi:premiere:sir_tim_berners-lee.jpg?direct&200|}} **H**yper**T**ext **M**arkup **L**anguage est une des trois inventions à la base du **W**orld **W**ide **W**eb, avec le **H**yper**T**ext **T**ransfer **P**rotocol et les adresses web. Un **hypertexte** est un document ou un ensemble de documents contenant des unités d'information liées entre elles par des **hyperliens**. HTML a été inventé pour permettre d'écrire des documents hypertextuels liant les différentes ressources d’Internet. En 1991, **Tim Berners-Lee** -- ci-contre -- un informaticien britannique travaillant au CERN, annonce publiquement le web et donne le lien d'un document ''.html''. En 2021, nous en sommes à la version 5 de HTML. ===== Langage à balise interprété ===== Le HTML est un langage **descriptif**. C'est à dire qu'il se contente de décrire l'apparence du résultat mais qu'il ne donne pas lieu à une exécution d'instructions. Un fichier ''.html'' est un simple fichier texte. À l'aide de **balises** il indique les éléments de mise en forme. Quand on ouvre le fichier avec un éditeur de texte, on voit les balises telles qu'elles sont écrites dans le fichier. {{ :langages:html:browsers.png?direct&200|}} Un navigateur -- //Firefox, Chrome, Safari...// -- à l'ouverture du fichier, interprète ces balises ce qui modifie l'apparence du texte. La plupart des balises fonctionnent comme des parenthèses : //balise ouvrante//, //balise fermante//. ===== Page élémentaire ===== Contenu d'un fichier ''.html'' élémentaire.




  
    
    Titre de la page

//Les indentations ne sont pas indispensables.// ===== block et inline ===== Dans un document ''.html'', les retours à la ligne sont ignorés et en l'absence de balises, tout le contenu apparaîtrait à la suite, sans retour à la ligne. Dans cette perspective, on distingue deux types de balises : * Les balises de type //block// qui forment un paragraphe. Elles commencent sur une nouvelle ligne et quand elles se terminent on revient en début de ligne. * Les balises de type //inline// qui ne font pas revenir à la ligne. Par exemple, si je veut **mettre des mots en gras**, c'est un élément de mise en forme qui nécessite une paire de balises, mais je ne veux pas que ces balises fassent revenir en début de ligne. C'est un cas //inline//. Les balises ont un fonctionnement par défaut, soit //block//, soit //inline//. Mais tout est modifiable. ===== Les balises ===== ==== Les commentaires ====

==== Le charset ==== Dans un fichier texte, les caractères sont codés avec un code -- [[nsi:premiere:caracteres|Voir cours]]. Comme un fichier internet peut être vu dans le monde entier et que les caractères des différents pays peuvent être très différents, il est important de préciser l'encodage utilisé. En Europe on utilisera le plus souvent UTF8.

==== Retour à la ligne ==== En général, on ne devrait pas en avoir besoin. On peut utiliser des éléments de type //block// et des marges. Si on a besoin de laisser un espace vertical, il est plus rigoureux d'utiliser des marges plutôt que de sauter des lignes. Cela est également vrai pour un document de traitement de texte comme Word.

==== Titres ==== //Balises de type block//


Titre de niveau 1
Titre de niveau 2
Titre de niveau 3
Titre de niveau 4
Titre de niveau 5
Titre de niveau 6

==== Mises en forme élémentaires ==== //Balises de type inline//


Texte en gras
Texte en italique

==== Paragraphes ==== Élément standard permettant de former proprement les paragraphes de texte sans recours à ''%%
%%''.


mon paragraphe...

==== Blocs génériques ==== Il peut être utile de délimiter une zone pour lui appliquer une mise en forme personnalisable ou pour identifier la zone.


... 
...

==== Liens hypertextes ====


Texte d'un lien hypertexte

==== Listes à puces ====



  Un item
  Un autre item

==== Listes numérotées ====



  Un item
  Un autre item

==== Tableaux ====


  ...  
    
    Une cellule
    Une autre cellule

===== Styles ===== Pour ajouter des couleurs, des marges, des cadres... on utilise les styles CSS //Cascading Style Sheets//. Il existe beaucoup d'options CSS. Le mieux est d'aller voir sur une [[https://www.w3schools.com/cssref/default.asp|Référence]] chaque fois que nécessaire. Les éléments de style CSS peuvent être indiqués de diverse façons. ==== Méthode 1 : au niveau des balises ====




  
    
    Illustration méthode 1
  
  
    Petit bloc de texte comme exemple.
    Autre bloc de texte comme exemple.
    Autre bloc de texte mais écrit en couleur.

Cette méthode est mauvaise : - rend le code HTML très embrouillé, très peu lisible : on a du mal à trouver le contenu au milieu des éléments de styles, - répète de nombreuses fois la même chose puisque tous les paragraphes seront stylés de la même façon, - risque de rendre l'affichage inhomogène : si on se trompe d'une balise à l'autre, elles pourront avoir un style différent ce qui n'est pas rigoureux, - d'une façon général, il faut séparer fond et forme. ==== Méthode 2 : Les styles regroupés dans le head ====




  
    
    Illustration méthode 1
    
  
  
    Petit bloc de texte comme exemple.
    Autre bloc de texte comme exemple.
    Autre bloc de texte mais écrit en couleur.

Cette méthode est déjà meilleure : elle est beaucoup plus lisible. * Le style défini en ligne 8 s'applique à tous les éléments de type ''%%

%%'', * le style en ligne 14 s'applique à tous les éléments de type ''%%

%%'' ayant la classe ''%%encouleur%%'' * En lignes 18 et 19, les balises ''%%

%%'' se voient affecter le style de la ligne 8 * En ligne 20, la balise ''%%

%%'' a la classe ''%%encouleur%%''. Le bloc se verra affecter les styles des lignes 8 et 14. ==== Méthode 3 : Fichier CSS à part ==== On commence par définir un fichier CSS : /* Fichier styles.css */ body { width:80%; } p { font-family:Arial, sans-serif; font-size:12pt; text-align:justify; text-indent: 20px; } p.encouleur { color: #FF0000; } Et on fait le lien vers ce fichier dans le HTML : Illustration méthode 1

Petit bloc de texte comme exemple.


    Autre bloc de texte comme exemple.
    Autre bloc de texte mais écrit en couleur.

C'est la meilleure option : * Le graphiste s'occupe de créer les styles et il les rassemble dans le fichier CSS, * Celui qui écrit le contenu se contente de faire référence au fichier CSS et il a la garantie que le styles sera toujours homogène, * On peut récupérer des styles tout fait. Une même balise peut recevoir plusieurs classes CSS en même temps.