Découvrez comment la plupart des pages web s’articulent autour des langages HTML et CSS.
Quand vous consultez une page web, il vous arrive peut-être de vous demander comment elle a été créée. Pour afficher une page web, votre navigateur lit et interprète tout un ensemble d’instructions. Ces dernières sont principalement écrites dans deux langages : HTML et CSS.
Le W3C (World Wide Web Consortium) définit les standards ou spécifications web de ces langages. Il est important de comprendre ces standards pour garantir l’affichage correct de vos pages dans les différents navigateurs. Dreamweaver inclut des fonctionnalités qui vous permettent de créer des pages conformes aux derniers standards du web. Découvrez comment fonctionnent conjointement les langages HTML et CSS pour créer une page web.
Les pages web affichent du contenu à partir d’une structure sous-jacente définie en HTML. Ce contenu peut inclure du texte, des images, des liens, voire même des séquences audio et vidéo. La plupart des éléments HTML sont composés de balises ouvrantes
définit le paragraphe, autrement dit le corps du texte ;
affiche une image spécifiée par un fichier src (fichier source).
Remarque : les balises HTML présentées ici ont été mises en majuscules pour mieux illustrer les concepts. Il est toutefois recommandé d’utiliser des minuscules lors de la programmation de vos propres pages.
Le langage HTML définit la structure de base de votre page web, mais ne permet pas vraiment de personnaliser le style ou la mise en page. Vous voudrez peut-être ajouter des couleurs, mettre en forme du texte et des images et repositionner certains éléments sur votre page. C’est précisément grâce au langage CSS que vous pouvez appliquer le style et la mise en forme souhaités à votre page web. Utilisez CSS pour rechercher un ou plusieurs éléments HTML, puis ajoutez des instructions (comme modifier la couleur de l’élément ou le centrer sur la page).
Dans l’exemple ci-dessous, le langage CSS a été utilisé pour modifier l’apparence des trois éléments HTML.
h1 Le titre a été aligné au centre.
p Le paragraphe a été mis en rouge et en gras, puis centré.
img Les nouvelles dimensions de l’image sont de 150 pixels par 100 pixels.
Contributeur
Jonathan Petersen