Revenir
Revenir

Les bases des langages HTML & CSS

Le DOM. (Document Object Model), modèle d'objet de document, est une représentation hiérarchique et structurée...

Sommaire

HTML & CSS : l'essentiel en 18 minutes chrono - VidéoQu'est-ce que le DOM (Document Object Model) ?
HTML, un langage à balises pour organiser le contenuQu'est-ce que le HTML ?Liens utilesQuelques éléments et attributs HTMLExemple de fichier HTML - Fichier
CSS, un langage de styles pour mettre en forme le HTMLQu'est-ce que le CSS ?Comment un fichier HTML est-il lié à une fichier CSS ?Exemple de fichier CSS - Fichier
Structure d'un site webComment organiser les fichiers d'un site web statique ?
Liens utiles
Qu'est-ce qu'un CMS ?
Exemple de structure de la page d'accueil d'un site web - Schéma

HTML & CSS : l'essentiel en 18 minutes chrono - Vidéo

https://www.youtube.com/watch?v=Q-WXtlz_ZHE

https://www.youtube.com/watch?v=Q-WXtlz_ZHE

Qu'est-ce que le DOM (Document Object Model) ?

Le DOM. (Document Object Model), modèle d'objet de document, est une représentation hiérarchique et structurée d'un document HTML ou XML qui permet aux programmes informatiques tels que les navigateurs web de manipuler et d'interagir avec le contenu des pages web.
Il divise le document en une structure d'objets et chaque élément, attribut et partie de texte du document devient un nœud dans cette structure. Les nœuds sont organisés dans une hiérarchie et chaque nœud peut avoir des nœuds enfants, des nœuds parents et des nœuds frères. Cette hiérarchie est souvent représentée sous la forme d'un arbre avec un nœud de niveau supérieur appelé nœud racine.
Le DOM permet aux développeurs d'accéder et de manipuler des éléments de pages web à l'aide de langages de programmation tels que JavaScript. Il fournit une interface de programmation riche qui permet de modifier dynamiquement le contenu, la structure et le style des pages web.
Les développeurs utilisant DOM peuvent ajouter, supprimer, modifier et relooker des éléments sur une page web, attacher des gestionnaires d'événements qui répondent aux actions de l'utilisateur, effectuer des animations, valider des formulaires, etc. Le DOM joue un rôle fondamental dans la création d'interactions dynamiques et réactives sur le Web. 

HTML, un langage à balises pour organiser le contenu

Qu'est-ce que le HTML ?

HTML (Hypertext Markup Language) est le langage de balisage standard utilisé pour créer la structure et le contenu d'une page web. Le HTML indique la signification sémantique du contenu, c'est-à-dire la fonction et la structure des éléments sur la page. Il établit la base de la structure de la page, mais il ne se concentre pas sur l'apparence visuelle. 
Le HTML est composé de balises qui décrivent la signification et la structure des éléments sur la page. Les balises HTML sont entourées de chevrons ("<" et ">") et sont souvent utilisées par paires, avec une balise d'ouverture et une balise de fermeture.
Une page web est un simple fichier texte contenant des balises et enregistré avec l’extension ".html". On peut donc construire une page web à l’aide d’un éditeur de texte gratuit tel queNotePad++par exemple. Un fichier HTML est un simple fichier texte ayant l'extension ".html" dont la structure de base est rappelée au début de ce document. 
Remarques :
  • L’indentation et les sauts de ligne dans le code source ne sont absolument pas obligatoires (le navigateur les supprime à la lecture du fichier) : on pourrait très bien décrire une très longue page HTML dans un fichier sur une seule (très longue) ligne ! Cependant, le code source apparaît beaucoup plus clair et lisible si on prend soin de le structurer avec des indentations...
  • Toute balise ouverte doit être refermée.
  • Les balises doivent être correctement imbriquées : une balise incluse dans une autre doit être refermée avant que la précédente ne le soit.
  • On peut ajouter des commentaires dans un code HTML de la manière suivante :
    < ! -- Ceci est un commentaire -->

Liens utiles

https://notepad-plus-plus.org/

https://notepad-plus-plus.org/

Quelques éléments et attributs HTML

Un élément HTML peut être soit constitué d’une paire de balises et d’un contenu, soit (plus rarement) d’une balise unique qu’on dit alors orpheline (par exemple la balisebrqui indique un saut de ligne).
La balise ouvrante d’un élément HTML peut contenir desattributs(parfois obligatoires) possédant une valeur. Par exemple, l’élémenta (pour « anchor ») servant à créer des liens vers d’autres sites ou d’autres pages, va avoir besoin d’un attributhref (« hypertext reference ») qui va prendre comme valeur l’adresse (relative ou absolue) de la page vers laquelle on souhaite faire un lien.
L’élémentimg, servant à insérer une image dans une page HTML, va quant à lui nécessiter deux attributs :srcetalt. L’attributsrcva prendre comme valeur le nom et l’emplacement de l’image tandis que l’attributaltva afficher un texte alternatif dans le cas où l’image ne serait pas disponible.

Exemple de fichier HTML - Fichier


CSS, un langage de styles pour mettre en forme le HTML

Qu'est-ce que le CSS ?

Le CSS (Cascading StyleSheets) est un langage de style utilisé pour définir l'apparence et la mise en page d'une page web. Il permet de contrôler le design, la couleur, la typographie, la disposition des éléments, les marges, les bordures, les arrière-plans, etc.
L’utilisation de feuilles de style au format CSS repose sur l’idée de séparation du contenu et de la mise en forme :
  • le contenu est fourni par des fichiers au format HTML (index.html ou page1.html par exemple) ;
  • la mise en forme est définie dans un (ou plusieurs) fichier(s) texte au format CSS (style1.css ou style2.css par exemple).
Le CSS fonctionne en associant des règles de style à des éléments HTML en utilisant dessélecteurs.Les règles de style CSS sont utilisées pour spécifier comment chaque élément doit être présenté sur la page. Une feuille de style pouvant modifier le comportement d'éléments HTML, on parle souvent de surcharge CSS.
Un bloc de règles de style CSS se présentera sous la forme suivante :
sélecteur {
     propriété1 : valeur1;
     propriété2 : valeur2;
     ...
}
Exemple : règles de style appliquées au sélecteur HTML "p" (paragraphe).
p{
     font-family : arial;
     font-size : 12px;
     color : red;
     text-align : justify;
}
Dans l'exemple précédent, les règles de style modifieront la police, la taille, la couleur et l'alignement de tous les textes situés à l'intérieur de la balise de paragraphe.
Le CSS peut être appliqué à plusieurs pages web, ce qui permet une gestion cohérente du style sur l'ensemble d'un site.
Remarque :
  • Indenter en CSS est également très important afin de conserver le plus de clarté possible dans son code.
  • On écrit dans un fichier CSS les commentaires de la manière suivante :  /* Je suis un commentaire  */

Comment un fichier HTML est-il lié à une fichier CSS ?

Pour que les règles de style du fichier CSS puissent s’appliquer sur les éléments de la page HTML, il faut que celle-ci y fasse référence. Si les instructions CSS sont dans un fichier "style.css" situé dans un même dossier au même niveau d'arborescence que le fichier "index.html", on écrira dans ce dernier, à l’intérieur de la balise d’en-tête ‹head› l’instruction surligné dans la copie d'écran figurant au début de ce document. Si tel n'est pas cas, il faudra indiquer le chemin relatif conduisant au fichier CSS en partant de l'endroit où se trouve le fichier HTML ciblé.

Exemple de fichier CSS - Fichier


Structure d'un site web

Comment organiser les fichiers d'un site web statique ?

Lors de la création d’un site contenant plusieurs pages web dont la page d’accueil est "index.html", il est conseillé de structurer les fichiers et les dossiers selon l’exemple ci-dessus.
Le dossier accueillant l'intégralité du site web peut être déposé sur un ordinateur pour une consultation locale ou à la racine d'un serveur web pour une consultation en ligne. Dans ce dernier cas, le transfert des fichiers se fait en FTP à l'aide d'un logiciel open source et gratuit tel queFileZilla.
Attention : il faut impérativement écrire les noms de tous les fichiers et de tous les dossiers en minuscules, sans espace et sans accentuation.

Liens utiles

https://filezilla-project.org/

https://filezilla-project.org/

Qu'est-ce qu'un CMS ?

Un CMS (Content Management System) est une plate-forme logicielle utilisée pour créer, gérer et organiser le contenu d'un site Web. Il fournit aux utilisateurs des outils faciles à utiliser pour publier, modifier et supprimer facilement du contenu sans connaissances techniques avancées en programmation Web.
Un avantage majeur d'un CMS est qu'il permet de séparer le contenu de la conception et des fonctionnalités du site Web. Cela signifie que les utilisateurs peuvent se concentrer sur la création de contenu sans se soucier des aspects techniques.
Un CMS fournit généralement une interface utilisateur intuitive avec des fonctionnalités telles qu'un éditeur de texte, un gestionnaire de médias, des outils de gestion des utilisateurs et des options de personnalisation de thème.
Les CMS sont largement utilisés pour créer des sites Web tels que de simples blogs, des sites commerciaux, des sites de commerce électronique et même des sites gouvernementaux. Les exemples courants de CMS incluent WordPress, Joomla, Drupal, Magento et Spip.

Exemple de structure de la page d'accueil d'un site web - Schéma