HTML5 et CSS3 : premiers pas

HTML (HyperText Markup Language) ou langage de balisage hypertexte, est le standard utilisé pour le développement de pages web, c'est un langage basé sur des balises qui structure les informations en fonction de la hiérarchie des contenus. En soi, HTML ne donne pas de caractéristiques graphiques à l'information qui est présentée, il l'organise seulement de telle manière qu'elle ait un ordre de lecture logique.
D'un autre côté CSS (Cascading Style Sheet) ou feuilles de style en cascade est un langage utilisé pour définir et créer la présentation d'un document structuré écrit en HTML, il est chargé de formuler la spécification des feuilles de style qui serviront de standard aux navigateurs.
Dans ce tutoriel nous allons présenter la structure de base d'un document HTML5, les étiquettes les plus populaires et l'ordre hiérarchique pour les déclarer. Tour à tour, nous expliquerons la relation entre HTML5 et CSS3, la manière dont ils peuvent être liés, la structure des déclarations faites dans CSS3 et les attributs graphiques qu'ils peuvent donner au document HTML.
Pour les exemples que nous allons réaliser, il est nécessaire de disposer d'un éditeur de code, dans notre cas l'éditeur sélectionné est Dreamweaver CC 2014, dans le tutoriel Les bases de Dreamweaver CS6 : Connaître l'environnement de travail les caractéristiques de l'application sont décrites qui restent les mêmes malgré la différence dans leurs versions
1. Structure d'un document HTML5

À) Cette balise indique la version que nous utiliserons dans le document, dans ce cas il s'agit de la version 5 de HTML.
B) Indique l'ouverture d'un document HTML, c'est la première balise qui est déclarée.
C) Vous pouvez inclure un titre pour le document, des scripts, des styles, des méta-informations, entre autres.
RÉ) Fournit des métadonnées sur le document HTML. Les métadonnées ne seront pas affichées sur la page, elles seront uniquement analysées en tant qu'informations jointes. Les éléments sont normalement utilisés pour spécifier la description de la page, les mots-clés, l'auteur du document, entre autres. Dans l'exemple montré dans l'image, nous avons utilisé l'attribut charset pour définir le jeu de caractères dans lequel la page sera affichée, charset = "utf-8" dans le cas de la langue espagnole.
ET) Il nous permet d'attribuer le nom de la page qui sera affichée dans les navigateurs.
F) La grande majorité des balises en HTML ont besoin d'une déclaration d'ouverture et d'une déclaration de fermeture :

 Contenu de l'étiquette 

Dans ce cas, l'image affichée ferme la balise head avec
G) Tout dans cet élément sera affiché par le navigateur, c'est-à-dire qu'à l'intérieur de cette balise, nous désignerons tout le contenu visuel de notre document HTML.
H) De la même manière qu'expliqué dans la section F c'est la fermeture de la balise
JE) De la même manière qu'expliqué dans la section F c'est la fermeture de la balise
Structure d'un document CSS3

À) .class : Toutes les déclarations commençant par un point sont de type classe, leurs caractéristiques graphiques peuvent s'appliquer à n'importe quelle balise HTML.
B) #Id : Les déclarations commençant par le signe dièse indiquent qu'il est de type ID. Les classes et les identifiants sont utilisés pour spécifier les attributs graphiques que nous voulons donner à notre contenu HTML. Cependant, les différences entre ces 2 types d'énoncés sont les suivantes :
Les identifiants sont uniques :
- Chaque élément ne peut avoir qu'un seul identifiant.
- Chaque page ne peut avoir qu'un seul élément avec cet ID.
Notre code HTML ne passera pas la validation si le même identifiant est utilisé dans plus d'un élément.
Les cours ne sont pas uniques :
- Une même classe peut être utilisée dans plusieurs éléments.
- Vous pouvez utiliser plusieurs classes dans le même élément.
Tout style qui doit être appliqué à plusieurs objets sur une page doit être fait avec une classe. Il est important de mentionner que tout ce qui est déclaré dans les documents CSS est sensible à la casse.
C) {Accouplement ouvrant qui commence la déclaration des attributs.
RÉ) } Clé qui ferme les déclarations faites à une classe ou à un ID.
ET) Structure d'attribut : après avoir déclaré un attribut, il est nécessaire de spécifier sa valeur, dans l'exemple montré dans l'image, nous attribuons une hauteur de 600 pixels à #Id.
Pour séparer les attributs et leurs valeurs, un point-virgule est utilisé; comme illustré dans l'image.
Ce sont, de manière simple, les caractéristiques générales de la structure d'un code HTML, les étiquettes nécessaires et comment les commander. Dans le cas d CSS les types de déclarations et leur structure générale. Avec ces connaissances, nous serons prêts à faire notre premier HTML et à donner aux étiquettes des caractéristiques graphiques.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif