Le Guide du Débutant sur HTML et CSS
Bien que vous puissiez trouver de nombreuses technologies différentes alimentant nos sites aujourd’hui, les deux fichiers les plus importants sur l’ensemble d’Internet sont HTML et CSS. Oui, si vous avez besoin de quelque chose de complexe, vous aurez également besoin de plus de technologies pour les accompagner. Mais si tout ce que vous voulez est de créer une simple page personnelle, HTML et CSS sont tout ce dont vous avez besoin.
Introduction aux bases
Ceci est un guide pour débutants sur HTML et CSS qui vous montrera comment créer un site simple aussi rapidement que possible. Les résultats ne seront pas nécessairement “conformes aux normes”. Et vous devrez faire un peu de lecture par vous-même si vous souhaitez le modifier et l’étendre davantage. Mais ce sera un site et il fonctionnera “comme il se doit” dans la plupart des navigateurs.
Puisque l’espace est limité, nous n’allons pas plonger trop profondément dans chaque aspect du développement et du design web. Au lieu de cela, nous vous guiderons à travers les étapes pour passer de zéro à une page web entièrement fonctionnelle, en expliquant ce que fait chaque élément dans le processus.
Les deux fichiers nécessaires
Un site moderne se compose de nombreux fichiers, mais deux sont les plus essentiels : un fichier HTML et un fichier CSS. Le fichier HTML définit les éléments et la structure d’une page. Le fichier CSS définit l’apparence de ces éléments.
Les deux sont essentiellement des fichiers texte typiques, contenant un texte spécifiquement structuré. Vous n’avez besoin d’aucun type de programme spécial pour les créer ou les modifier : n’importe quel éditeur de texte “simple” fera l’affaire. Par “simple”, nous entendons votre application typique de style bloc-notes, pas quelque chose comme l’éditeur de LibreOffice ou Microsoft Word qui pourrait “enrichir” le texte de quelque manière que ce soit.
La première étape consiste à créer un nouveau dossier sur votre bureau avec deux fichiers texte vides à l’intérieur. Nommez l’un d’eux “index.html” et le second “style.css.”
Configurez votre espace de travail
Exécutez votre navigateur préféré et chargez le fichier HTML dedans, soit en sélectionnant “Fichier -> Ouvrir” soit en faisant glisser et déposer le fichier dans sa fenêtre.
Ouvrez à la fois le fichier HTML et le fichier CSS dans votre éditeur de texte de type bloc-notes préféré.
Être capable de voir les trois fenêtres en même temps est le moyen le plus pratique de travailler. Si vous n’avez pas deux écrans pour les étendre, nous vous recommandons d’organiser les fenêtres comme sur notre image ci-dessous.
“Collez” votre fenêtre de navigateur sur un côté de l’écran pour occuper la moitié (verticalement) et placez les deux fenêtres de bloc-notes de l’autre côté, l’une sous l’autre.
Blocs de construction
Écrivez quelque chose dans le bloc-notes avec le fichier HTML et enregistrez les modifications. Ensuite, actualisez votre fenêtre de navigateur en appuyant sur F5. Vous verrez immédiatement le texte que vous avez écrit apparaître dans votre fenêtre de navigateur.
Félicitations pour avoir configuré votre premier site ! Et nous ne plaisantons pas, puisque les premiers sites sur Internet ne différaient pas beaucoup dans leur apparence par rapport à ce que vous venez de créer. L’important, à l’époque, était le contenu lui-même.
HTML vous permet de “marquer ce que chaque morceau de contenu est”, en utilisant un ensemble spécifique de “codes”. Certains des plus importants sont :
html : Indique un document html. Doit être au début de chaque fichier html.body : Tout le contenu que vous voyez dans un navigateur est contenu dans cette balise body. Elle représente l’aspect visuel d’un document html.p : Paragraphe de texteimg : Imagesa href : Liens vers des adresses webdiv : Définit une “boîte” autour de n’importe quel morceau de contenu que vous pouvez ensuite “styliser” avec CSS.
Pour “définir” un morceau de contenu, il doit généralement être contenu entre le même code avec une légère différenciation au début et à la fin. Par exemple, un paragraphe de texte est défini comme :
Paragraphe de texte standard
“
” indique que “ce qui suit est un paragraphe” et “
” que “le paragraphe se termine ici.” En remplaçant “p” par “div” dans les deux cas, vous définissez une boîte contenant le contenu plutôt que de “le marquer comme un paragraphe.”
Notez qu’il y a des exceptions : des éléments tels que les images (img) et les lignes de séparation (hr) ne nécessitent pas de “code de fermeture.”
Changer et actualiser
Remplacez tout dans votre fichier HTML par ce qui suit :
CONTENU
PIED DE PAGE
Actualisez votre navigateur (F5), et vous verrez les mots EN-TÊTE, CONTENU et PIED DE PAGE apparaître l’un sous l’autre. Nous venons de créer trois “div” invisibles et autonomes. Chacune d’elles contient un des mots.
Pour pouvoir définir leur apparence à travers CSS, nous avons attribué un mot-clé à chacune, une “identité” (le “id=name” dans le code), correspondant à leur contenu : en-tête, contenu et pied de page. Tous les éléments d’une page web peuvent avoir un tel alias, configuré comme une “classe” ou un “id.” Les classes définissent des alias pour des éléments qui apparaissent plusieurs fois sur la même page web, comme des paragraphes, des liens, etc. Les ID définissent des alias pour des éléments qui apparaissent une seule fois dans chaque page, comme le nom ou le logo d’un site.
Contenu réel
Supprimez le mot “EN-TÊTE” entre les codes div – sans changer leur structure – et entrez à la place le nom que vous souhaitez pour votre site.
Faites de même pour votre “CONTENU”, mais au lieu de simplement entrer du texte, assurez-vous également de “marquer” le début et la fin de chaque paragraphe comme nous l’avons vu plus tôt. Remplacez le “CONTENU” par deux ou trois paragraphes de texte.
Il est également temps de parler des liens. Pour convertir n’importe quelle phrase de votre texte en un lien, structurez-la comme suit :
Vous pouvez copier-coller cela et remplacer “ADRESSE” par “ce à quoi vous voulez que votre lien pointe” et le “TEXTE” par la phrase qui apparaîtra sur votre site. Nous avons lié une phrase dans notre pied de page à notre site avec ce qui suit :
Rendre la technologie plus facile
Enfin, remplacez le mot “PIED DE PAGE” par votre nom, une petite phrase indiquant qui a conçu ou possède le site ou tout autre chose que vous souhaitez.
Enregistrez les modifications et actualisez votre navigateur pour les voir.
Vous avez du style (.CSS)
Le premier élément de toute page web est l’en-tête. Dans celui-ci, nous trouvons généralement du code qui définit l’identité du site, son nom, son créateur et sa langue, ainsi que toutes les technologies – en dehors de HTML – utilisées dans celui-ci. C’est là que se trouvent la plupart des liens vers des fichiers JavaScript et CSS externes. Ajoutez-en un à votre site en insérant ce qui suit tout en haut de votre fichier HTML, juste après la balise html :
Pour pouvoir styliser les éléments d’une page web avec CSS, vous devrez charger le fichier CSS depuis l’intérieur de l’HTML. Et cela signifie l’inclure dans votre “en-tête.” Ce qui suit indique que la page HTML “liera” à un fichier “stylesheet”, de type “text/css”, nommé “style.css” :
Copiez et collez notre code, exactement comme vous le voyez, “à l’intérieur” de l’en-tête – c’est-à-dire sous “
” et au-dessus de “”. Enregistrez les modifications et concentrez-vous sur le fichier CSS. Là, entrez ce qui suit :
body {}
#header, #content,#footer{}
#header,#footer{}
#header{}
#content{}
#footer{}
img {}
Site réel
CSS, ou feuilles de style en cascade, sont simplement des ensembles de règles d’affichage qui correspondent à des éléments spécifiques d’une page web. Avec CSS, nous pouvons styliser à la fois “où” et “comment” tout apparaîtra sur une page web.
Dans l’étape précédente, nous avons introduit un ensemble de règles vierges pour tous les éléments de notre page. Maintenant, voyons comment nous pouvons ajouter des paramètres à celles-ci qui définiront leur apparence.
Commencez par le corps, qui inclut tout sur votre site web. Modifiez-le comme suit :
body {
width:100%;
position:relative;
margin:0;
padding:0;
}
Les règles ci-dessus indiquent que nous voulons que notre site occupe toute la largeur de la fenêtre du navigateur (width: 100%), que nous ne voulons pas qu’il ait de distance par rapport aux bords de la fenêtre du navigateur (margin: 0), et que nous ne voulons pas d’espace vide autour (padding: 0).
Toutes les règles pour un élément doivent être contenues entre des accolades, et chaque règle doit se terminer par un “;” comme suit :
#Element_ID{
RULE 1;
RULE 2;
RULE 3;
}
Continuez en mettant à jour votre CSS “#header, #content, #footer” comme suit :
#header, #content,#footer{
float:left;
position:relative;
}
Avec cela, vous dites que la position de tous les trois éléments doit suivre certaines règles communes : chacun doit être “relatif” au précédent et “suivre” celui-ci ( float: left). Peu importe leur taille, forme, apparence ou tout autre facteur, chacun d’eux “poussera” l’élément suivant, et ils ne se chevaucheront jamais.
Mettez à jour #header, #footer avec ce qui suit pour faire en sorte que votre page web ressemble davantage à un site réel :
#header,#footer{
width:100%;
height:100px;
background:rgba(0,0,0,0.9);
color:rgba(255,255,255,0.9);
text-align:center;
font-size:12px;
}
Ce qui précède définit que nous voulons que l’en-tête et le pied de page de notre site soient larges de 100%, hauts de 100 pixels, et que le texte affiché dans ceux-ci soit de 3em de taille et centré.
Les règles de fond et de couleur spécifient, respectivement, quelle couleur aura l’ensemble de la “boîte div” de l’en-tête et du pied de page et la couleur de tout texte contenu dans ceux-ci. “RGBA” définit la couleur en fonction de la norme de mélange de couleurs Rouge – Vert – Bleu. Chaque couleur peut avoir une valeur de 0 à 255, les combinaisons de différentes valeurs de Rouge, Vert et Bleu permettant d’afficher n’importe quelle couleur. Le dernier nombre correspond à la transparence. Ainsi, RGBA(255,0,0,0.5) nous donnerait un rouge translucide, tandis que RGBA(50,50,255,1) donnerait un bleu vif et “solide”.
Terminez en vous concentrant sur le contenu de base du site. Définissez son apparence comme :
#content{
width:80%;
background:rgba(255,255,255,0.9);
color:rgba(0,0,0,0.9);
margin:010%;
}
Enregistrez à nouveau toutes les modifications et actualisez votre fenêtre de navigateur pour les voir.
Stylisation des images
Pour ajouter des images à votre site, vous devez revenir au fichier HTML. Là, “à l’intérieur” du contenu mais avant le premier paragraphe, entrez ce qui suit :
Où “CHEMIN” et “FICHIER.JPG” sont la “localisation” et le nom de fichier de n’importe quelle image, disponible soit en ligne soit localement, et “TEXTE” une description de ce qu’elle représente à des fins d’accessibilité.
Si vous essayez d’enregistrer et de vérifier les modifications après cet ajout, vous constaterez que votre site est déformé. Le problème sera résolu une fois que vous aurez créé des règles CSS sur la façon dont les images doivent être affichées sur votre site web.
Retournez au fichier CSS et déclarez comment vous souhaitez que toutes les images (img) soient alignées à gauche, suivant le flux des autres éléments (float: left et position: relative).
Pour ne pas dépasser les limites de la page, spécifiez comment vous souhaitez que leur largeur soit au maximum celle de la page elle-même (width: 100%). Pour éviter que les images ne touchent votre texte, ajoutez une marge verticale en haut et en bas. Le résultat devrait ressembler à ceci :
img {
float:left;
position:relative;
width:100%;
margin:5px0;
padding:0;
}
Complétez en ajoutant une autre image, cette fois alignée à gauche ou à droite. Comme auparavant, vous devez d’abord revenir au code HTML et coller un lien vers votre image là-bas, comme nous l’avons vu plus tôt. La différence est que vous devrez ajouter une “classe”, un identifiant à l’élément. Ensuite, vous spécifierez via des règles d’affichage CSS sur celui-ci et tout autre élément où la même classe est “attachée.”
Nous avons nommé notre classe “alignright” puisque nous voulons que tout objet, où elle est attachée, soit affiché sur le côté droit de la page.
Essayez de créer le code vous-même. Ajoutez une classe .alignright {} dans votre “style.css,” puis créez des règles qui devraient la styliser. Le code CSS devrait spécifier que nous voulons que les éléments flottent sur le côté droit de la page et soient larges de 46% (width: 46%). Nous ne voulons pas que les images touchent le texte, donc nous devrions également ajouter un écart de 2% autour d’eux, réparti en 1% de marge (la distance de tout autre élément) et 1% de padding (un “espace vide supplémentaire autour de l’élément”).
Ainsi, nos règles devraient définir que toute image avec une classe .alignright attachée occupera 46% de la largeur de la page, plus 1% de marge de chaque côté, plus 1% de padding de chaque côté. Cela totalise 50% – exactement la moitié de la largeur de la page. Le résultat devrait ressembler à ceci :
img.alignright{
float:right;
width:46%;
margin:1%;
padding:1%;
}
Page suivante
Votre première page web est prête et entièrement opérationnelle. En apprenant davantage sur HTML et CSS, vous pouvez encore enrichir son contenu, ajouter de nouveaux éléments et améliorer son apparence. Comme prochaine étape, essayez de copier et de renommer le fichier HTML, de modifier son contenu et de lier chaque nouvelle page aux autres.
Cela ne semble pas trop difficile, n’est-ce pas ? Bienvenue dans le développement web : en copiant, modifiant et liant différentes pages à travers des liens, vous aurez créé votre premier site complet, “propre”, multi-pages !
Crédit d’image : Pluks kittens, Pluks kittens, IMG_20171124_142629
