Introduction aux langages HTML5 et CSS3 - BTS SIO

Cet article a pour mission de vous faire découvrir les bases de la programmation lorsque vous intégrez la formation pour le BTS SIO option SLAM.

Nous allons brièvement aborder les principaux langages de programmation tels que HTML5 et CSS3, nécessaires afin de créer un site web.

Afin de commencer à développer vous devez vous munir d’un éditeur de code qui vous permettra de coder votre site. Il existe plusieurs types d’éditeurs de code mais pour faciliter la tâche je vous conseille d’être en possession de Visual Studio Code.
Cet éditeur est pratique, ergonomique et facile dans son utilisation.

Avant tout vous devez savoir que le langage de base pour la création d’un site est HTML5. Quant à CSS3, lui il rentre en jeu pour donner du style et de l’animation à votre page.

HTML est composé d’éléments applicables à des fragments de texte dans un document pour leur donner un sens différent, pour structurer un document en sections logiques et pour intégrer du contenu comme images ou vidéos dans une page.
Il est donc un langage de balisage qui sert à indiquer au navigateur comment structurer les pages web visitées.

Structure de base d’une page HTML

<!DOCTYPE html>

<html>

<head>

<meta charset= »utf-8″ />

<title>Titre</title>

</head>

<body>

</body>

</html>

Ce langage se compose donc d’une série d’éléments avec lesquels vous pouvez encadrer, envelopper ou baliser différentes parties du contenu pour les faire apparaître ou agir d’une certaine manière.

Ainsi les balises se repèrent facilement. Elles sont entourées de « chevrons », c’est-à-dire des symboles < et >. Il existe des balises en paires avec une balise ouvrante exemple <p> et une balise fermante </p> et les balises orphelines <img/> (Celles-ci n’ont pas besoin d’avoir des balises ouvrantes et fermantes). Les balises contiennent le type de la balise (paragraphe, image, titre etc..) ainsi que des attributs type la description d’une image ou des class/id qui nous serviront pour le code CSS3. Les class peuvent se répéter sur plusieurs balises, les id sont unique à une seule balise.

Ces attributs ce sont un peu les options des balises. Ils viennent les compléter pour donner des informations supplémentaires. L’attribut se place après le nom de la balise ouvrante

Balises principales

Premièrement il faut savoir que le contenu de l’entière page se trouve dans les balises <html> et </html>. Ensuite, à l’intérieur de ces balises, vous avez l’en-tête contenue dans les balises <head> et </head> et le contenu effectif de la page dans les balises <body> et </body>.

L’en-tête est une partie du document qui n’est pas affichée par le navigateur au chargement de la page. Elle contient des informations comme le titre (<title>) de la page dans le navigateur, des liens aux CSS et JavaScript, des liens aux favicons personnalisés et d’autres métadonnées (auteur du document, mots-clés décrivant le document, adaptation de la page aux différents écrans etc.). La balise <meta charset= »utf-8″ /> indique l’encodage utilisé dans le fichier .html. Cette balise détermine comment les caractères spéciaux vont s’afficher (accents, idéogrammes chinois et japonais, caractères arabes, etc.). UTF-8 est la méthode d’encodage qui permet d’afficher sans aucun problème pratiquement tous les symboles de toutes les langues de notre planète !

C’est dans le <body> que tout le contenu de votre page va être affiché dans le navigateur.

Nous différencions plusieurs types de balises à l’intérieur du body. Les plus utilisées sont :

Balises de structuration du texte

<h1> – <h6> : titre de différents niveaux
<p> – </p>: paragraphe
<img /> : image grâce aux attributs src (adresse de l’image enregistrée dans un répertoire) et alt (description de l’image)
<mark> – </mark> : mise en valeur visuelle (le texte est surligné)
<strong> – </strong> : mise en valeur forte (le texte est en gras)
<em> – </em> : mise en valeur faible (le texte est en italique)
<figure> – </figure> : figure (image, code…)
<audio> – </audio> : son
<video> – </video> : vidéo
<source> – </source> : indique un format possible pour les balises <audio> et <video>
<a> – </a> : lien hypertexte grâce à l’attribut href.
<br /> : retour à la ligne
<address> – </adresss> : adresse de contact
<time> – </time> : date ou heure

Balises de listes

Ces balises permettent de créer des listes (numérotées, à puces…).

<ul> – </ul>: liste à puces, non numérotée
<ol> – </ol> : liste numérotée
<li> – </li>: élément de la liste à puces

Balises de tableau

Ces balises ont pour but de créer un tableau structuré avec des lignes et des colonnes.

<table> – </table> : tableau
<caption> – </caption> : titre du tableau
<tr> – </tr>: ligne de tableau
<th> – </th> : cellule d’en-tête
<td> – </td> : cellule
<thead> </thead> : section de l’en-tête du tableau
<tbody> – </tbody> : section du corps du tableau
<tfoot> – </tfoot> : section du pied du tableau

Balises de formulaire

Ces balises permettent de créer des formulaires de contact par exemple.

<form> – </form> : délimite un formulaire (method : indique la méthode d’envoi du formulaire (get ou post). Si vous ne savez pas quoi utiliser, mettez post
action : la page vers laquelle le visiteur doit être redirigé lorsqu’il a validé votre formulaire.)
<fieldset> – </fieldset> : permet de regrouper plusieurs éléments d’un formulaire
<legend> – </legend> : titre d’un groupe dans un formulaire
<label> – </label> : titre d’un élément de formulaire
<input /> : champ de formulaire grâce à l’attribut type
<textarea> – </textarea> : zone de saisie multiligne grâce aux attributs rows et cols (nombre de lignes et de colonnes)
<select> – </select> : liste déroulante
<option> – </option> : élément d’une liste déroulante
<optgroup> – </optgroup> : groupe d’éléments d’une liste déroulante

Autres types de balises

Vous avez également des balises dites de section qui permettent d’organiser votre body de manière à ce que le navigateur reconnaisse chaque partie de la page

Ces balises vous servent à construire les éléments de base d’un site web.

<header> – </header> : en-tête
<nav> – </nav>: liens principaux de navigation
<footer> – </footer> : pied de page
<section> – </section> : section de page
<article> – </article> : article (contenu autonome)
<aside> – </aside> : informations complémentaires

Dans votre code vous serez amenés à structurer votre page également à l’aide des balises génériques. Il y a deux balises génériques : l’une est inline, l’autre est block. Elles n’ont pas de sens sémantique.

<span> – </span> : balise générique de type inline

Autorise les autres éléments à venir s’asseoir à gauche et à droite.

Ne se redimensionne pas avec width et height.

Respecte les marges gauches et droites, mais pas les marges haut et bas.

<div> – </div> : balise générique de type block

Force un passage à la ligne.

Ne tolère pas d’élément à gauche ou à droite.

Se redimensionne avec width et height. Respecte toutes les marges.

Langage CSS3

Après avoir parlé et détaillé le langage HTML5 nous allons maintenant découvrir le CSS3. Ce langage vient donc compléter le HTML pour vous aider à mettre en forme votre page web.

C’est lui qui vous permet de choisir la couleur de votre texte, sélectionner la police utilisée, définir la taille du texte, les bordures, le fond sur votre site.

Et aussi, c’est lui qui permet de faire la mise en page de votre site. Vous pourrez dire : je veux que mon menu soit à gauche et occupe telle largeur, que l’en-tête de mon site soit calé en haut et qu’il soit toujours visible, etc.

Pour écrire du code CSS3 vous avez trois possibilités :

dans un fichier .css (méthode la plus recommandée) ;
dans l’en-tête <head> du fichier HTML ;
directement dans les balises du fichier HTML via un attribut style (méthode la moins recommandée).

Écrire du code dans le fichier .css

En créant un fichier .css vous pouvez écrire du code séparément au code HTML. Afin que le CSS soit effectif vous devez rajouter une balise link dans le head du code HTML :

<!DOCTYPE html>

<html>

<head>

<link rel= »stylesheet » href= »style.css » />

<title>Premiers tests du CSS</title>

</head>

…

Ce fichier vous permet donc d’appliquer des styles sur différents éléments sélectionnés dans le document HTML associé. Par exemple, vous pouvez sélectionner tous les éléments d’une page HTML qui sont paragraphes et afficher leurs textes en rouge :

p {

color : red;

}

Structure des règles CSS3

Dans la structure d’une règle CSS vous pouvez donc distinguer :

Sélecteur : C’est le nom de l’élément HTML situé au début de l’ensemble de règles. Il permet de sélectionner les éléments sur lesquels appliquer le style souhaité (en l’occurrence, les éléments p). Pour mettre en forme un élément différent, il suffit de changer le sélecteur. Si le sélecteur concerne une class alors vous devez l’indiquer avec un point et le nom de la class (.photo1), s’il concerne un id cela s’indique avec un # (#photo1)
Déclaration : C’est une règle simple comme color : red; qui détermine les propriétés de l’élément que l’on veut mettre en forme.
Propriétés : Les différentes façons dont on peut mettre en forme un élément HTML (dans ce cas, color est une propriété des éléments p). En CSS, vous choisissez les différentes propriétés que vous voulez utiliser dans une règle CSS.
Valeur de la propriété : À droite de la propriété, après les deux points, on a la valeur de la propriété. Celle-ci permet de choisir une mise en forme parmi d’autres pour une propriété donnée (par exemple, il y a d’autres couleurs que red pour la propriété color).

Autres éléments de la syntaxe

Les autres éléments importants de la syntaxe sont :

chaque ensemble de règles, à l’exception du sélecteur, doit être entre accolades ({}).
pour chaque déclaration, il faut utiliser deux points (:) pour séparer la propriété de ses valeurs.
pour chaque ensemble de règles, il faut utiliser un point-virgule (;) pour séparer les déclarations entre elles.

Ainsi, si vous voulez modifier plusieurs propriétés d’un coup, vous pouvez utiliser plusieurs déclarations dans une seule règle en les séparant par des points-virgules :

p {

color: red;

width: 500px;

border: 1px solid black;

}

Vous pouvez également utiliser plusieurs déclarations pour plusieurs éléments. Pour ce faire vous allez indiquer les éléments sépares par des virgules :

p, li, h2 {

color: red;

width: 500px;

border: 1px solid black;

}

Déclaration de la police

Dans le fichier CSS vous pouvez déclarer la police que vous allez utiliser pour votre site. La déclaration se fait à l’aide de la règle @font-face. Cette police peut être chargée depuis un serveur distant ou depuis l’ordinateur de l’utilisateur.

En permettant aux auteurs de fournir leurs propres polices, il n’est plus nécessaire de dépendre uniquement des polices qui sont installées sur les postes des utilisateurs.

Il est courant d’utiliser les deux formes url() et local() afin de pouvoir utiliser une police locale si elle est disponible ou d’en télécharger une autre au cas où.

@font-face {

font-family: « Open Sans »;

src: url(« /fonts/OpenSans-Regular-webfont.woff2 ») format(« woff2 »),

url(« /fonts/OpenSans-Regular-webfont.woff ») format(« woff »);

}

Une fois que la police est déclarée vous pouvez l’associer à l’élément de votre page en utilisant la propriété font-family. Ex :

p {

font-family : “nom de la police déclarée”;

}

Media Queries

Enfin vous pouvez adapter votre page web à tout écran à l’aide des media queries. Ce sont des règles à appliquer pour changer le design d’un site en fonction des caractéristiques de l’écran. Grâce à cette technique, vous pourrez créer un design qui s’adapte automatiquement à l’écran de chaque visiteur.

Il y a deux façons de les utiliser :

en chargeant une feuille de style .css différente en fonction de la règle (ex. : « Si la résolution est inférieure à 1 280 px de large, charge le fichier petite_resolution.css ») ;
en écrivant la règle directement dans le fichier .css habituel (ex. : « Si la résolution est inférieure à 1 280 px de large, charge les propriétés CSS ci-dessous »).

Dans le premier cas vous pouvez ajouter un attribut media à la balise <link /> du code HTML. Ici vous allez écrire la règle qui doit s’appliquer pour que le fichier soit chargé :

Dans le deuxième cas vous pouvez écrire ces règles dans le même fichier CSS que d’habitude. Dans ce cas, la déclaration des media queries se fait à la fin du code CSS de base. Vous écrivez la règle dans le fichier .css comme ceci :

@media screen and (max-width: 1280px)

{

/* Rédigez vos propriétés CSS ici */

}

Une réponse à “Introduction aux langages HTML5 et CSS3”

Comprendre et utiliser W3C pour son site internet – BTS SIO – Le blog dit :

3 mai 2022 à 13h06

[…] une pour ensuite la publier sur internet, je vous invite à aller voir un article sur l’introduction aux langages HTML5 et CC3 par un camarade pour en créer […]