Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                

SNT TH3 - Le Web - Activité 3 - ORDI Ecriture Dune Page WEB

Télécharger au format pdf ou txt
Télécharger au format pdf ou txt
Vous êtes sur la page 1sur 6

Sciences Numériques et Technologie

Classe de seconde - enseignement commun

THEME 3 : Le Web

Activité 3 : Ecriture d’une page WEB

Activité 3 : Ecriture d’une page WEB - Ordinateur

Livre pages 62 et 63

Durée : 2 « séances groupe » de 2 heures = 4 heures

Activité Numérique AN1


Création de votre page Web

HTML

Choisir un thème que vous appréciez et rédigez une page Web,


en utilisant le modèle proposé, sur ce contenu en intégrant :

 Un titre : <h1>….</h1>
 Un paragraphe : <p>….</p>
 Des sous titres : <h2>….</h2>
 Deux images minimum : <img …./> (dont le logo SNT)

1
Sciences Numériques et Technologie
Classe de seconde - enseignement commun

THEME 3 : Le Web

Activité 3 : Ecriture d’une page WEB

Modèle proposé : « TH3 - ma page web.html »

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Ma page Web - SNT Theme 3 - Le WEB </title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<h1>début de ma page Web</h1>

<h1>fin de la page Web</h1>


</body>

</html>

Balise HTML permettant de sauter une ligne :


<br>

Balise HTML permettant de centrer des élèments :


<center>.…</center>

Balise HTML permettant d’insérer une image :


<img src='SNT_logo01.jpg' alt='logo SNT' width='100' height='66' />

Balise HTML permettant d’insérer un son :


<audio controls><source src='musique.mp3'></audio>
2
Sciences Numériques et Technologie
Classe de seconde - enseignement commun

THEME 3 : Le Web

Activité 3 : Ecriture d’une page WEB

Activité Numérique AN2


Création de votre site Web

Votre site Web sera constitué de 3 pages Web :

 Votre page Web


 Une page Web 2 illustrant la création de tableaux
 Une page Web 3 illustrant l’utilisation de JavaScript

Toutes les pages seront liées entre elles par des liens hypertexte
(ou hyperliens) qu’il faudra coder.

HTML

HTML HTML

Balise HTML permettant de créer des liens hypertexte :


<a href="TH3 - page web 2.html">vers la page 2</a>

<a href="TH3 - page web 3.html">vers la page 3</a>

3
Sciences Numériques et Technologie
Classe de seconde - enseignement commun

THEME 3 : Le Web

Activité 3 : Ecriture d’une page WEB

Ensemble de balises HTML permettant de créer des tableaux :

<table>….</table>

<tr>….</tr> tr  r : row = une ligne

<td>….</td>

<table border=1>
<tr>
<td>cellule 1</td>
<td>cellule 2</td>
</tr>
<tr>
<td>cellule 3</td>
<td>cellule 4</td>
</tr>
<tr>
<td>cellule 5</td>
<td>cellule 6</td>
</tr>
</table>

L’attribut « border » permet de créer une bordure autour de


chaque case du tableau.

Il est possible d’intégrer une image dans une cellule :



<tr>
<td>cellule 5</td>
<td><img src='SNT_logo01.jpg' alt='logo SNT' width='100' height='66' /></td>
</tr>

4
Sciences Numériques et Technologie
Classe de seconde - enseignement commun

THEME 3 : Le Web

Activité 3 : Ecriture d’une page WEB

Activité Numérique AN3


Ajout d’une apparence commune à toutes vos pages
Création d’un style en langage CSS

Choisir un thème graphique simple en utilisant le modèle


proposé.

Modèle de style CSS proposé : « style.css »

CSS

HTML

HTML HTML

5
Sciences Numériques et Technologie
Classe de seconde - enseignement commun

THEME 3 : Le Web

Activité 3 : Ecriture d’une page WEB

Modèle de style CSS proposé : « style.css »

body {
background-color: dodgerblue;
font-family: "Open Sans", sans-serif;
padding: 5px 25px;
font-size: 18px;
margin: 0;
color: #B40431;
}

h1 {
font-family: "Open Sans", sans-serif;
font-size: 54 px;
}

h2 {
font-family: "Merriweather", serif;
font-size: 24px;
}

Vous aimerez peut-être aussi