Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Lycée BOUARGOUB 3èmeSI2 CSS3 TP_0 Exercice 0 : Compare les deux pages web ci-de

Lycée BOUARGOUB 3èmeSI2 CSS3 TP_0 Exercice 0 : Compare les deux pages web ci-dessous. page web ……………….css page web ……………….css C’est la ………………. page web sans et avec css. Le CSS ? Cascading Style Sheets, c’est cet autre …………………. qui vient compléter le HTML. C'est lui qui nous permet de choisir la couleur, la …………….., et la ……….……. de notre texte. Lui encore qui permet de définir les bordures, les ………….…., le ……….………., etc. Et aussi, c'est lui qui permet de faire la mise en …………………. de votre site. Nous pourrons dire : nous voulons que notre menu soit à gauche et occupe telle largeur, que l'en- tête de notre site soit calé en haut et qu'il soit toujours visible, etc. Grâce au HTML, nous avons pu rédiger le ……………….. de notre site, mais il est brut de décoffrage. Le CSS vient compléter ce code pour mettre en …………………… tout cela et donner au contenu l'apparence que l'on souhaite. Exercice 1 : 1. Lance l’éditeur de texte disponible puis saisis et enregistre le code html ci-dessous. AS : 2020/2021 1 Mr RJAIBI Omar Lycée BOUARGOUB 3èmeSI2 2. Cherche la balise qui indique que ce fichier HTML est associé à un fichier appelé style.css et chargé de la mise en forme. ………………………………………………………………………………………….......... 3. Crée un nouveau fichier vide dans votre éditeur de texte et saisis ce bout de code et l’enregistre sous le non style.css dans le même dossier que ton fichier html. signifie donc en français : « Je veux que tous mes ………... soient écrits en ….. » 4. Ouvre maintenant ton fichier html dans ton navigateur pour le tester. Regarde, c'est magique : les paragraphes sont écrits en………………. 5. Schématiquement, une feuille de style CSS ressemble donc à cela : AS : 2020/2021 2 Mr RJAIBI Omar Lycée BOUARGOUB 3èmeSI2 Cherche dans le web un code css de ton choix et copie-le ci-dessous. ………………………………........ ………………………………........ ………………………………........ ………………………………........ ………………………………........ ………………………………........ ………………………………........ ………………………………........ ………………………………........ ………………………………........ ………………………………........ ………………………………........ ………………………………........ ………………………………........ ………………………………........ ………………………………........ Exercice 2 : Efface le contenu du fichier style.css et essaye les codes css ci-dessous. ………………………………………………………………………………………………… ………………………………………………………………………………………………… Exercice 3 : class et id TOUS les paragraphes possèdent la même présentation, ils seront donc tous écrits en bleu. 1. Comment faire pour que certains paragraphes seulement soient écrits d'une manière différente ? Pour résoudre ce problème, on peut utiliser ces attributs spéciaux qui fonctionnent sur toutes les balises. L’attribut …………. L’attribut …………. 2. Apporte les modifications nécessaires aux codes html et css puis teste le résultat. AS : 2020/2021 3 Mr RJAIBI Omar Lycée BOUARGOUB 3èmeSI2 Seul le paragraphe appelé introduction s’affiche en bleu. 3. Et l’attribut id ? Il fonctionne exactement de la même manière que ...................................., à un détail près : Il ne peut être utilisé qu'.........................................dans le code. Lors de l’appel en css, il faudra faire précéder le nom de l' id par un …………….. Exemple : Code html ……………………………………………………………………………………………….. Code css ……………………………………………………………………………………………….. ……………………………………………………………………………………………….. ……………………………………………………………………………………………….. Exercice 4 : span et div 1. Je veux modifier uniquement bienvenue dans le paragraphe suivant : Cela serait facile à faire s'il y avait une balise autour de « bienvenue », mais malheureusement, il n'y en a pas. Par chance, on a inventé… la balise-qui-ne-sert-à-rien. C’est la balise …………………………………………… AS : 2020/2021 4 Mr RJAIBI Omar Lycée BOUARGOUB 3èmeSI2 Cette balise s'utilise …………………….d'un paragraphe 2. Mets en forme le mot « bienvenue ». Code html ……………………………………………………………………………………………….. Code css ……………………………………………………………………………………………….. ……………………………………………………………………………………………….. 3. Et la balise div ? C’est une balise qui entoure un ……………….. de texte. Elle est fréquemment utilisée dans la construction d'un design, comme nous le verrons plus tard. 4. En utilisant la balise div, place le bloc de texte qui comporte le titre et le premier paragraphe en haut et à droite de la page, et applique une couleur de fond grise. Code html ……………………………………………………………………………………………….. ……………………………………………………………………………………………….. ……………………………………………………………………………………………….. ……………………………………………………………………………………………….. ……………………………………………………………………………………………….. ……………………………………………………………………………………………….. ……………………………………………………………………………………………….. Code css ……………………………………………………………………………………………….. ……………………………………………………………………………………………….. ……………………………………………………………………………………………….. ……………………………………………………………………………………………….. ……………………………………………………………………………………………….. ……………………………………………………………………………………………….. Exercice 0 : Sans, avec, même, langage, police, taille, marges, fond, pages, contenu, forme. Exercice 1 : <link rel = "stylesheet" href = "style.css"> Paragraphes, bleu, bleu body { background-color:#f1f1f1; } p AS : 2020/2021 5 Mr RJAIBI Omar Lycée BOUARGOUB 3èmeSI2 { font-family:calibri; font-size:16pt; color:blue; } ul { list-style-type:none; float:right; position:absolute; top:20px; right:20px } Exercice 2 : Si plusieurs balises doivent avoir la même mise en forme, il suffit de combiner la déclaration en séparant les noms de balises par une virgule afin d’éviter la répétition. AS : 2020/2021 6 Mr RJAIBI Omar uploads/S4/ tp-css3.pdf