Exercices Web 1 – HTML et CSS
De la puce aux TIC
1
Modalités
Ces exercices se font dans l’éditeur de code Phoenix.
Les exercices demandent une ou plusieurs saisies.
Les règles habituelles pour les saisies s’appliquent (voir précédents exercices).
Remettez le présent PPT à la fin de l’exercice.
2
1. Première page web
Pour effectuer ce premier exercice, seule la documentation HTML 1 – Intro est
nécessaire.
Avec l’éditeur Phoenix, créez un nouveau projet HTML5.
Modifiez la langue du code pour le français.
Modifiez le titre de la page (balise TITLE dans la section HEAD) pour votre nom.
Modifiez le titre H1 pour « Ma première page web »
Modifiez le contenu du DIV pour « Par: votre nom complet ici ».
NB: Insérez votre nom après Par, pas le texte tel quel.
Modifiez le libellé du bouton pour « Ne me cliquez pas svp! ».
Modifiez le code JS de l’événement onclick pour ceci:
3
1a. Code et rendu
Faites une saisie qui comprend votre code HTML et le rendu de la page, avec votre
nom et collez-la par-dessus ▼ .
4
1b. Saisie avec titre de l’onglet
Cliquez ensuite sur « Aperçu Votre nom
doit être
en direct » et faites une visible dans
nouvelle saisie du rendu de la l’onglet
page, cette fois avec le titre de
l’onglet.
Votre nom doit apparaître
dans le titre de l’onglet.
Collez-là par-dessus ➔
5
2. Exercice de balisage
Utilisez les balises vues dans le
document « HTML 2 balises
diverses » pour produire un page
web avec votre nom possédant le
rendu suivant ➔
Ayez le sens de l’observation!
La reproduction doit être quasi-
identique, sauf pour ce qui est de
votre nom.
<div> n’est pas en
6 Texte plus petit. italique et sa police
est à chasse fixe.
2. Balisage (saisie)
Faites une saisie de votre code et du rendu. Vous pouvez réduire la section HEAD.
7
3. Exercice CSS de base
Pour ce 3e exercice, refaites simplement
les étapes décrites dans le document
« CSS 1 intro ».
Ajoutez ensuite votre nom sous le titre
principal de la page.
Rendu attendu ➔
8
3. CSS de base (saisie)
Faites une saisie du code HTML et de votre rendu (en couleur évidemment):
9
4. CSS appliqué à l’exercice 2 Titre aligné à droite
Récupérez votre code HTML de l’exercice 2.
Modifiez le numéro de l’exercice pour 4.
Ajoutez du code CSS pour obtenir un rendu
qui s’approche de ceci ➔
10
4. Saisie
Faites une saisie
du code CSS et du Code CSS ici,
rendu. pas HTML.
Ajustez la largeur
des fenêtres pour
éviter une saisie
trop grande.
11
Exercice bonus
12
5. Pyramide
Voici un exercice classique de
CSS+HTML.
Veuillez produire le rendu suivant, avec
votre nom ➔
Utilisez uniquement les propriétés CSS
vues dans le document CSS 1. Vous n’avez
pas à chercher sur Internet. Il n’y a pas de
magie ici. Une certaine entité HTML
pourrait aussi être utile. Il y a plusieurs
solutions.
13
5a. Pyramide (saisie HTML)
Saisissez le code HTML et le rendu.
14
5b. Pyramide
(saisie CSS)
Saisissez le
code CSS et
le rendu.
15
16
Auto-évaluation et remise No Pointage Vos points
1 1½
2 4
Remplissez la grille et remettez ce PPT sur LÉA. 3 1½
Il est possible d’accumuler plus de 10 points pour 4 3
cet exercice. 5 (bonus) +½
Grille non
(-½)
remplie
Ajoutez facultativement un ou des
commentaires sur cet exercice dans TOTAL 10 (+½)
l’encadré orange.
17
