Le Web - séance 5 ·

(1)

SNT – ELLA

LEWEB : HTMLETCSS

S ÉANCE 5 - E NRICHISSEMENTS D ’ UNE PAGE WEB

TEST DES CAPACITÉS EXPÉRIMENTALES

NOM : . . . Prénom : . . . Classe :. . .

P

ARTIE

1

: JE RÉSUME MES CONNAISSANCES –ORDINATEUR INTERDIT 1. En html, à quoi sert la balise<h1> ...< /h1>?

2. Que faut-il rajouter entre les balises<head> ...</head>pour que les caractères accentués apparaissent correctement ?

3. On dispose d’une image nomméephoto.jpg. Quelle instruction faut-il ajouter dans le fichier HTML pour l’afficher ?

4. Compléter le balisage du fichier HTML suivant pour obtenir le résultat affiché à droite

<!DOCTYPE html>

<html>

<head>

</head>

BALISAGE

Très important !

Malheureusement, ce texte est très mal balisé.

Il faut que tu corriges cela immédiatement.

Fais très attention à toutes les balises.

</html>

5. Que signifie CSS et à quoi le fichier CSS d’une page WEB est-il réservé ?

6. On dispose d’un fichier css appelédeco.cssque l’on souhaiterait lier à une page html appeléedevoir.html.

Quelle instruction faut-il rajouter entre les balises<head> ...</head>?

(2)

7. Un élève a crée une page web dans lequelle il a balisé 2 blocs appelésbloc1etbloc2

a) Compléter le fichier css nommédeco.css associé à cette page afin d’obtenir le résultat ci-dessous.

h1 {

text-align : ... ; }

.bloc1 {

display : ... ; width : 300px;

height : ... ; margin : ... ; border : ... ; text-align : ... ; }

.bloc2 {

display : ... ; width : ... ; height : ... ; margin : ... ; border : ... ; text-align : ... ; }

b) Voici lebodydu fichier HTML associé. Le baliser correctement.

DISPOSITION DES BLOCS

Bonjour,

Le plus important est de rester concentré, durant tout le devoir.

Bonjour,

Je suis d’accord !

C’est particulièrement vrai en SNT.

Bon courage !!!

.

8. En css, il existe deux types de marges. Donner ces deux types ainsi qu’une brève description de chacun d’entre eux.

Une fois sûr de tes réponses, remets cette fiche au professeur pour pouvoir passer à à la suite

(3)

SNT – ELLA

LEWEB : HTMLETCSS

S ÉANCE 5 - E NRICHISSEMENTS D ’ UNE PAGE WEB

TEST DES CAPACITÉS EXPÉRIMENTALES

P

ARTIE

2

: ANALYSE ET CONCEPTION D’UNE PAGEWEBDE TRAVAIL –ORDINATEUR INTERDIT

On considère une page web constituée des deux fichiers S5_contenu.html etS5_deco.css. Cette page HTML contient un gros titreh1et de deux blocs nommés.corps et.pied.

h1

.corps

.pied

50px 50px

Body du fichierS5_contenu.html

<body>

<h1>h1</h1>

<div class="corps">

.corps

</div>

<div class="pied">

.pied

</div>

</body>

FichierS5_deco.css(pointillés à compléter)

body {

font-size :15px;

margin : 20px auto ; /* centrage automatique du body */

width : 810px;

border : dashed 5px #CCCCCC;

}

h1 {

width : 470px ; /* tenir compte des marges des des bordures */

height : 80px ;

margin : 45px auto 25px auto; /* centrage du bloc */

border : solid 5px #000000;

padding :10px;

} .corps {

width : ... ; height : ... ; margin : ... ; border : solid 5px #000000 ;

padding :10px;

} .pied {

width : ... ; height : ... ; margin : ... ; border : solid 5px #000000;

padding :10px;

}

Important :la taille totale d’un bloc doit tenir compte de ses marges et de ses bordures

(4)

P

ARTIE

3

: GESTION DU CONTENU :LE FICHIERHTML –ORDINATEUR AUTORISÉ

1. I

MPORTANT

!

Avant toute chose :

• Créer un nouveau dossier appeléWEB11dec

• Télécharger les fichiersS5_contenu.html etS5_deco.css surentraide-ella.fr et les déposer dans le dossierWEB11dec

2. M

ODIFICATION DU CONTENU

!

Avecnotepad++, éditeruniquementle fichierS5_contenu.htmlet modifier son contenu, afin d’obtenir un rendu ressemblant à ceci. (Piocher les informations sur wikipedia)

DEPÔT 1

S5_contenu.html sur votre zone dehttp://entraide-ella.fr

P

ARTIE

4

: GESTION DE LA DÉCORATION : LE FICHIERCSS

1. E

TAPE

1 :

GESTION DES BORDURES ET DES FONDS

E1

Le but de cette partie est de :

• Arrondir la bordure des blocs.corpset.pied

• Tracer en pointillés celle du bloch1

• Colorer le fond de cache bloc d’une couleur de son choix.

(5)

1. Éditer le fichierS5_deco.cssavecnotepad++.

2. Rajouter une lignes aux classes.corpsafin de rajouter la propriétéborder-radius.

3. Modifier la propriété border de la classe h1 en remplaçantsolidpardotted.

4. Modifier les couleurs des bordures afin que la bordure deh1soit rouge, la bordure de.corpssoit bleue et la bordure de.piedsoit verte.

5. Rajouter une propriétébackgroundà chacun des trois blocs afin de colorer chaque fond d’une couleur de son choix.

FichierS5_deco.css

.corps { ...

border-radius : 10px;

} .pied {

...

border-radius : 20px;

} h1 { ...

border : dotted 5px #000000;

...

}

DEPÔT 2

S5_deco.css sur votre zone dehttp://entraide-ella.fr

Cette partie est un bonus

2. E

TAPE

2 :

GESTION DES CARACTÈRES

E2

Le but de cette partie est d’apprendre à :

• Modifier la taille du texte.

• Modifier la police de caractère du texte.

Avant toute chose :

• Dupliquer le fichierS5_contenu.html enS5_contenu2.html

• Dupliquer le fichierS5_deco.css enS5_deco2.css

• Éditer le fichierS5_contenu2.htmlet modifier sa 6ème ligne pour le lier au fichierS5_deco2.css

(6)

1. Éditer le fichierS5_deco2.cssavecnotepad++.

2. a) Rajouter une ligne à la classe.corpsafin de rajouter la propriétéfont-size : 20px ;

b) Compléter de même les classes.piedeth1avec une propriétéfont-size.

3. a) Rajouter une ligne à la classe.corpsafin de rajouter la propriététext-align : left ;

b) Compléter de même les classes.piedeth1avec une propriététext-align.

4. Pour un résultat plus esthétique :

• Supprimer la propriétéheightde la classeh1.

• Modifier la propriétépadding des classes .corps et.piedpour augmenter les marges intérieures en haut et en bas.

FichierS5_deco2.css

h1 { ...

font-size : ... ; text-align : ... ; }

.corps { ...

font-size : 20px;

text-align : left;

} .pied {

...

font-size : ... ; text-align : ... ; }

DEPÔT 3

S5_contenu2.html et S5_deco2.css sur votre zone dehttp://entraide-ella.fr

5. Modification des polices de caractères.

a) Aller sur le site

https://fonts.google.com et sélectionner 3 polices de son choix en cliquant à chaque fois sur

+

select this style.

b) Dans le fenêtre sur Selected Family qui apparait à droite de la page, cliquer sur@IMPORT.

c) Copier lecontenu uniquementde la balise<style>

d) Coller ce contenu tout en haut du fichier S5_deco2.css.

e) Copier/coller la première ligne de CSS rules to specify familiesdans la classeh1.

f) Copier/coller la deuxième ligne de CSS rules to specify familiesdans la classe.corps.

g) Copier/coller la troisième ligne de CSS rules to specify familiesdans la classe.pied.

h) Pour un résultat plus esthétique il sera certainement nécessaire de modifier certaines propriétésfont-size.

FichierS5_deco3.css

@import url(’https://fonts.googleapis.com/...’);

h1 { ...

font-family: ... ; }

.corps { ...

.pied { ...

DEPÔT 4

S5_contenu3.html et S5_deco3.css sur votre zone dehttp://entraide-ella.fr