Vous le savez déjà, la plupart des pages web sont écrites en HTML (sigle de hypertext markup language). Ce langage, créé par le consortium W3, décrit essentiellement la mise en forme basique du contenu d'une page web via ses éléments. Par exemple, un lien (élément de type a) sera souligné, ou un titre (élément de type h1) sera affiché en gras avec un corps plus grand que le reste du texte.
Ce cours traite du langage CSS (sigle de cascading style sheets), qui est un complément de HTML également créé par le W3C. Ce langage décrit notamment la mise en forme du contenu d'une page web à la manière des styles utilisés en traitement de texte pour impression papier. Mais il en décrit aussi la mise en page, et offre aux auteurs de sites web des possibilité de design plus adaptées au traitement de texte pour impression écran.
Les 4 premiers TDs présentent le langage CSS du point de vue mise en forme et mise en page simples, nous ne chercherons pas à atteindre la capacité à concevoir un site web moderne qui s'adapte au support (ordinateur, tablette, smartphone...). L'objectif principal est plutôt d'avoir une idée du fonctionnement de base d'un navigateur lors de l'affichage d'une page web au format html lorsqu'elle est accompagnée d'une feuille de style css, et de continuer à appréhender la mise en forme comme une notion globale structurée, de la même manière qu'on utilise des styles de paragraphes avec différents niveaux de titres en traitement de texte.
Les TDs qui suivent le premier partiel introduiront des possibilités avancées de mise en page, nous chercherons à résoudre des problèmes d'affichage en explorant différentes méthodes (notamment pour contrôler l'affichage ou non de certains blocs).
Nous allons utiliser un éditeur de texte particulier dans ce cours, qui met en valeur les balises HTML et les règles CSS les plus répandues. On utilisera par exemple Notepad++ ou Bluefish qui sont des logiciels gratuits. Vous en aurez besoin chez vous pour travailler sous Windows. Vous pouvez également utiliser d'autres logiciels du même type et ayant une version gratuite comme Sublime Text ou Text Wrangler par exemple (en particulier si vous travailler sous MacOS).
Voici un lien pour l'installation de Notepad++. Téléchargez la version courante.
Sur les machines en TD, vous pouvez rechercher notepad++ via la barre de recherche windows située dans la barre des taches (en bas de l'écran). Ensuite vous pouvez attacher le raccourci à la barre des taches en cliquant droit sur l'icône y apparaissant lorsque l'application est ouverte.