HTML et CSS, programmation web.

☞ Introduction

Tout d'abord, il faut savoir qu'absolument tous les sites qui tournent sur les internets ont une base HTML et CSS. Il s'agit d'un standard qui n'a pas de concurrent. Ce qui veux dire que si vous voulez coder un site internet, il faudra obligatoirement passer par du HTML et du CSS.

Pour programmer, il faut un logiciel de traitement de texte qui formate en «texte brute votre contenu». Il en exsite beaucoup certains sont propriétaires, d'autres libres ou encore open-source. Plus généralement ces logiciels sont appellés Environnement de développement ou IDE. Certains disposent d'options qui sont conçues pour faciliter le travail de programmation. L'autocomplétion ou l'affichage automatique du rendu de la page en sont des exemples.

IDE, liste non-exhaustive

☞ HTML et CSS

Le HTML ou HyperText Markup Language est autant une extention de ficher qu'un langage de programmation. Il constitue la partie structurelle et contient tout le contenu informationnel de la page. Le fichier HTML peut fonctionner seul, il constitue d'une certaine manière la «page internet minimale». Tout fichier avec l'extention .html est donc une page internet. Le HTML fonctionne par un système de balisage. Toute balise ouverte doit être refermée et constitue un bloc de contenu. par exemple :

Le CSS ou Cascading Style Sheet est un langage de programmation qui tend à définir les styles d'une page internet. Ainsi les couleurs, typographies ou autres choix esthétiques sont définis dans le CSS. Le fichier CSS ne peut être utilisé que si il est utilisé par une page HTML.

Pour être affiché correctement les fichiers HTML et CSS doivent être ouvert avec le logiciel approprié. Il faut utiliser un navigateur web qui va interpréter le code pour l'afficher correctement à l'écran.

Navigateurs web, liste non-exhaustive

☞ Organiser ses fichiers

Pour réaliser un site il est souvent nécéssaire d'utiliser plusieurs fichiers. Ainsi un fichier HTML sera très souvent associé à un CSS voir à des images ou des typographies... Il est donc nécessaire d'organiser les fichiers de manière stricte afin que votre site puisse fonctionner au mieux une fois posté en ligne. Il faut donc respecter une organisation des contenus conventionnelle.

Le fichier index.html constitue par défaut le premier fichier ouvert par le navigateur. Si il n'est pas disponible une erreur peut apparaître dans votre navigateur, entrainant le non fonctionnemnt de votre site.

Attention à bien nommer vos fichiers. Il ne faut pas utliser de carractères spéciaux ni d'espaces (il vaut mieux éviter aussi d'uliser les majuscules). À vous de choisir le formatage de votre texte. Il faut trouver une sorte d'autamatisme d'écriture. Vos fichiers doivent absolument disposer d'une extention de fichier.

Carractères à proscrire absolument : ; . : ! ? / \ ” # [ ] > < % * @ = & ^ ( )

Exemples de formatages

En programmation un dossier est signifié par un «/» et un fichier doit impérativement comporter une extension (.jpg, .html, etc.). Le ciblage des fichiers se fait par rapport à la «racine» d'un dossier. En HTML la racine est définie par le dossier qui contient le fichier index.html. Ainsi, en reprenant l'arborescence montrée plus haut. l'image «img-1.png» pourra être affichée dans la page index.html en respectant le chemin suivant : images/img-1.png.

Ce qui donne en HTML

☞ Analyse d'une balise HTML

Le premier «p» entouré de chevrons ouverts et fermés ouvre la balise. Le «p» correspond à paragraphe. Il existe plusieurs identifiants de balises selon les usages.

Le second «p» précédé de «/» referme la balise.

Le contenu «class=""» indique que la balise dispose d'une classe. Elle sera utilisée lors de la création des CSS

Le texte «texte-courant» constitue le nom de la classe, il est possible de choisir ce nom selon vos envies. Il sera utilisé dans le CSS pour cibler exactement ce contenu. Il est donc important de choisir un nom explicite.

Exemples de balises et fonctions

Il est intéressant de noter que les balises peuvent avoir plusieurs fonctions. Insertions d'images, mise en forme sommaire, structure, etc. À chaque balise est associée des propriétées par défaut.

Les balises sont aussi pensée pour être emboitées.

Exemple de balises emboitée

Qui sera affiché

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas rutrum odio sed orci aliquet, ac ultricies eros scelerisque. Morbi eget laoreet ex. Donec id magna eget ligula pellentesque rutrum. Fusce non lacus nec elit aliquet venenatis. Nam nulla dui, molestie a lacinia vitae, dignissim sit amet velit. Nam maximus porttitor.

☞ Le lien hypertexte

Un lien hypertexte, est un lien qui permet de naviguer d'une page à une autre, d'une page à un autre fichier (image, texte, pdf, etc.). C'est un élément extrèmement important qui constitue une des carractéristiques principales du HTML. Il peut s'afficher comme suit :

Texte du lien

Cette balise s'écrit :

Il est intéressant de noter qu'il est possible de faire un lien hypertexte au sein d'une même page et de cibler une partie spécifique de la page grâce à la définition d'un identifiant.

☞ Structure d'une page HTML

Une page html est constituée d'un header d'un body. Le header contient toutes les informations nécessaires à la bonne interprétation par le navigateur de la page. Alors que le body contient lui toutes les informations affichées sur la page : le contenu affiché qui concerne le lecteur.

Exemple de structure minimale d'une page HTML

Il est intéressant de noter que c'est dans la partie head que le fichier de styles CSS est lié au fichier html.

☞ Favicon

Une favicon est une icône informatique symbolisant un site web. Les navigateurs web peuvent utiliser la favicon dans la barre d'adresse, les signets, les onglets ou encore les autres raccourcis.

☞ Local VS en ligne

En local le site fonctionne par lui même sur votre propre ordinateur. Pas besoin d'internet, pas besoin de configurer un serveur. En ligne votre site sera visible par tout le monde. Il faudra cependant utiliser un logiciel de transfer de type FTP, un serveur d'hébergement et un nom de domaine. L'ensemble de ces éléments doit être paramétré afin d'assurer le bon fonctionnement de votre site.

La plupart du temps il est possible d'utliser les logiciels FTP (file transfer protocol) filezilla (libre) et cyberduck qui sont gratuit et les plus répandus. Il est aussi possible de passer en ligne de commande sans interface graphique pour les plus témerraires avec la commande ftp.

En ce qui concerne les hébergements, ils sont à choisir avec prudence. Ils sont pour la plupart payants.

☞ Unitées de mesure pour l'écran

Le pixel

Le pixel est souvent abrégé p ou px. Il est l'unité de base permettant de mesurer la définition d'une image numérique matricielle. Son nom provient de la locution anglaise picture element, qui signifie « élément d'image ». C'est une dimension absolue. Attention, car le nombre de pixels contenu dans un écran peut varier d'un ordinateur à un autre.

Le em

Le cadratin, en typographie, est une unité de mesure de longueur des espaces. Sa traduction anglaise em (de la lettre M) est utilisée comme symbole de l'unité. C'est une mesure relative à la taille de la typographie.

M
W
—
00

« M » apparaît occuper moins d'espace que « W », « — » et « 00 », ces trois derniers groupes de caractères occupant quant à eux un cadratina. « M » équivaut en fait à un cadratin lorsque l'on compte aussi son approche.

Le %

Le pourcentage est une unité relative à l'élément supérieur. Ainsi si la balise fait width:50% la balise fera alors 50% de la largeur de son contenant.

Le viewport

Le viewport est une unité relative à la dimension de la fenetre de navigateur. Elle peut s'exprimer en vw ou viewport width qui correspond à la largeur, ou en vh ou viewport height qui correspond à la hauteur.

☞ Structure de base d'une page CSS

Le langage CSS constitue un langage de programmation qui définit les styles d'une page. La syntaxe n'est pas la même que le HTML.

Exemplemple de définition CSS

Dans l'exemple précédent, la (ou les) balises «texte-courant» auront un style particulier : la taille de la typographie sera de 12px, la couleur de fond sera rouge et la couleur du texte sera jaune. La définition des styles CSS est contenue entre les deux accolades «{}» et chaque ligne de définition de styles est conclue par un «;».

En CSS il est possible de modifier les styles d'une balise (p, img, b, h1, etc.). Le ciblage de cette définition de style peut être :

Le ciblage direct aura pour effet d'affecter toutes les balises du même nom. L'identifiant quand à lui est unique, il ne peut être utilisé que sur une seule balise. Alors que la classe peut être utilisée sur plusieurs balises.

Exemple de fichier HTML et son CSS associé

☞ Quelques exemples de définitions CSS

Il existe beaucoup de définitions CSS selon les envies ou les besoins. Il n'est pas necessaire ici de toutes les donner. Certains sites comme W3S et mozilla offrent une liste exhausive de toutes les propriétés CSS.

☞ Classes et identifiants

Les attributs HTML class et id sont des attributs dits globaux car on va pouvoir les ajouter dans la balise ouvrante de n’importe quel élément HTML. Ces deux attributs vont être principalement utilisés dans un but de mise en forme : ils vont nous servir à appliquer des styles CSS aux éléments qui vont les contenir.

Il sera effectivement très facilem de se resservir de ces deux attributs en CSS grâce aux sélecteurs associés .class et #id.

☞ Structurer sa page avec les DIV

☞ Affichage inline et block

En html certaines balises sont agencés différemment. Certaines vont s'organiser les unes sous les autres (block). D'autres peuvent s'agencer les unes à la suite des autres (inline-block). Par défaut, certaines seront automatiquement en block comme par exemple les balises p, h1, h2, li, etc. D'autres seront automatiquement en inline-block a, span, textarea, etc. Il est bien sûr possible de changer ces valeurs par défaut en les définissant dans les styles CSS.

La définition CSS précédente pour effet de mettre en inline-block une balise paragraphe (qui est par défaut en block). La largeur du paragraphe est aussi défini à 200 pixels.

Sans styles CSS :

L'affichage des éléments structurels en inline-block avec la propriété CSS display.

Sens de lecture : de gauche à droite et de haut en bas.
Afin d'obtenir l'affichage attendu, il faut donner une largeur à votre conteneur. Ainsi en CSS le width doit être défini en pixel, poucentage ou encore viewport.
Les éléments en inline-block vont alors s'organiser les uns à coté des autres et non plus les uns sous les autres comme il était possible de le voir avec la propriété display block.
Selon la longeur des contenus, le blocs vont se redimensionner en hauteur. Pour avoir une gestion fine des alignements il est possible d'utiliser la propriété vertical align. Ainsi selon top, middle, bottom l'alignement des blocs pourra varier.
Il est bien sûr possible de différencier des conteneurs affichés en inline-block afin de faire varier la composition selon vos besoins. Par exemple ici le fonc rouge met en avant les éléments importants, le fond bleu contient le texte de labeur et le fond jaune les exemples.
Les éléments contenus par les divisions en inline-block peuvent être stylisés librement. Il est donc possible de concevoir une mise en page intérieure en display block.

Exemple de mise en page block dans une division en inline-block.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis, magna nec auctor efficitur, metus dolor elementum erat, quis aliquam quam arcu at libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam eget dapibus orci, at efficitur augue. Donec laoreet diam interdum nunc lobortis.

Afin d'optimiser la lisibilité de votre contenu il est nécessaire de travailler les mages intérieures (padding) et extérieures (margin).
Attention le padding et le margin influent sur la largeur et la longueur effectives de vos blocs.

Avec styles CSS :

L'affichage des éléments structurels en inline-block avec la propriété CSS display.

Sens de lecture : de gauche à droite et de haut en bas.
Afin d'obtenir l'affichage attendu, il faut donner une largeur à votre conteneur. Ainsi en CSS le width doit être défini en pixel, poucentage ou encore viewport.
Les éléments en inline-block vont alors s'organiser les uns à coté des autres et non plus les uns sous les autres comme il était possible de le voir avec la propriété display block.
Selon la longeur des contenus, le blocs vont se redimensionner en hauteur. Pour avoir une gestion fine des alignements il est possible d'utiliser la propriété vertical align. Ainsi selon top, middle, bottom l'alignement des blocs pourra varier.
Il est bien sûr possible de différencier des conteneurs affichés en inline-block afin de faire varier la composition selon vos besoins. Par exemple ici le fonc rouge met en avant les éléments importants, le fond bleu contient le texte de labeur et le fond jaune les exemples.
Les éléments contenus par les divisions en inline-block peuvent être stylisés librement. Il est donc possible de concevoir une mise en page intérieure en display block.

Exemple de mise en page block dans une division en inline-block.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis, magna nec auctor efficitur, metus dolor elementum erat, quis aliquam quam arcu at libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam eget dapibus orci, at efficitur augue. Donec laoreet diam interdum nunc lobortis.

Afin d'optimiser la lisibilité de votre contenu il est nécessaire de travailler les mages intérieures (padding) et extérieures (margin).
Attention le padding et le margin influent sur la largeur et la longueur effectives de vos blocs.

☞ Affichage flex

☞ Affichage grid

☞ Les effets CSS

☞ Les animations CSS

☞ Javascript