DEVENIR-WEBMASTER.COM Log In
 2
close

Comprendre à quoi servent le HTML et le CSS

Visiter ma chaine Youtube

# On part d'un modèle fait en word close

Pour cette explication j'ai tout d'abord réalisé un petit document word en utilisant un logiciel de traitement de texte.

Il s'agit d'une fiche de jeu succincte et elle va nous servir de modèle pour la refaire en HTML et en CSS.

Fiche jeu black ops

On va refaire cette fiche en HTML et en CSS

Ce qui va être intéressant de voir c'est la répartition des informations puisque en fait on part d'un seul fichier (bon qui a lui aussi une feuille de style mais peu importe) et on va faire une répartition des informations vers deux fichiers.

# Comment vont se répartir les informations entre le HTML et le CSS ? close

Dans le HTML on va mettre les informations qui concernent la structure du document.

Dans le CSS on va mettre les informations qui concernent la mise en forme.

Vers le HTML ou vers le CSS

Je vais maintenant placer le code HTML dans une structure minimale nécessaire à son bon fonctionnement. Je ne détaillerai rien ici.

On prend le nom du jeu CALL OF DUTY et on en fait le titre de la page Web. On va le mettre dans ce que l'on appelle un élément HTML, l'élément title. Ça va devenir le nom de l'onglet.

Je vais ajouter une balise ouvrante <title> devant le nom du jeu . Cette ouverture de balise signifie que le texte qui va suivre va être le titre de la page web. Une fois que le titre est terminé je vais placer une balise fermante </title>

Code source HTML du titre de la page

En CSS on ne fait rien.

Ensuite on prend le nom BLACK OPS. Comme informations on a le fait que c'est un titre, qu'il est centré, qu'il a une couleur marron et une police de grande taille.

En HTML on va retenir le fait que c'est un titre.

Code source HTML du titre

En CSS on va retenir le fait qu'il est centré, marron et de grande taille.

Ça va donner ce code CSS.

Code source CSS du titre

On continue pour les autres composants de la fiche.

En HTML on arrive à ce code

Code HTML de la fiche

En CSS on arrive à ce code

Code CSS de la fiche

Voir le résultat

# Qu'est ce que l'on peut faire d'autre en HTML ? close

Etant donné que l'on se sert de HTML pour structurer le document on trouve bien sûr une palette d'éléments de structure.

Elément de structure en HTML

On trouve aussi des champs de saisie par exemple ceux dont vous vous servez pour rentrer un email ou un mot de passe.

Et on peut compléter la liste de ceux que l'on a déjà vu. Liens, titres, listes à puces, tableaux, images, vidéos.

# Qu'est ce que l'on peut faire d'autre en CSS ? close

En CSS il est possible d'avoir un peu d'interactivité avec l'opérateur notamment au survol d'une zone.

On a l'exemple ici d'un lien dont l'aspect est modifié avec le CSS.

Et ici on a l'exemple d'utilisation des transitions pour animer un peu la page.

Apprendre le HTML
Apprendre le CSS

# Qu'est ce qu'on ne peut pas faire avec HTML et CSS seuls ? close

Noter bien à ce stade que la page est à peu prêt inerte. Je veux dire qu'il n'y a que très peu d'interactivité avec les clics du visiteur. On peut bien sûr naviguer de page en page en cliquant sur les liens grâce au HTML. On peut avoir quelques effets visuels au survol de certains éléments grâce au CSS.

Par contre on ne peut pas aller chercher des données sur le serveur et s'en servir pour accéder au document de manière à le rafraîchir.

Si on veut pouvoir faire ce genre de choses il va falloir se servir du JAVASCRIPT et aussi d'AJAX.