ST20 TE 01 19 Activite1-Apprendre

SÉQUENCE 1
ACTIVITÉ 1
Apprendre
1. Initiation à l’HTML
A. Introduction
Pour consulter des informations nous pouvons naviguer simplement sur
le Web et consulter des sites Web. Pour présenter ces informations, nous
utilisons un navigateur comme Mozilla, Chrome.
En fait, nous saisissons l’adresse d’un site web sous forme textuel www.nom_site_web.fr qui correspond
à l’URL du site Web (Uniform Resource Locator), Nous verrons plus tard dans le cours ce qui se cache
derrière cette adresse Web.
Le Web désigne un réseau d’ordinateurs qui donnent accès à différentes informations comme : texte,
image, vidéo, animations, base de données, etc.
B. Ce qu’il y a derrière une page Web

Taper l’adresse web : www.ffme.fr sur un navigateur comme Chrome.
Effectuer un clic droit puis afficher le code source.
Nous constatons que nous ne visualisons plus une page Web de la même
façon, mais des balises (liste de commandes textuelles) apparaissent en
rose encadrant des informations.
CNED – SECONDE – SCIENCES NUMÉRIQUES ET TECHNOLOGIQUE 1

C. Première page Web
Il est possible de créer une page Web de façon très simple en utilisant un simple éditeur de texte très
basique comme : brackets ou le blocnote ou notepad++ par exemple. Mais nous allons plutôt utiliser
un éditeur qui permet une aide dans l’écriture d’une page Web en HTML comme Brackets que l’on peut
télécharger ici.
(http://brackets.io/ )
Il est aussi possible d’utiliser un outil en ligne comme : https://thimble.mozilla.org. Cet outil est identique
à Brackets, mais demande une connexion Internet permanente. Tous les exercices pourront être réalisés,
soit à l’aide de Brackets ou de Thimble (dans ce cas, voir https://vimeo.com/207612449).
Nous allons créer une page Web, pour cela, vous pouvez suivre les étapes suivantes.
Lancer Brackets puis créer un nouveau document.
Enregistrer le fichier HTML en index.html.
Saisir la page Web suivante.
Nous allons visualiser la première page Web à l’aide d’un navigateur. Pour cela dans Brackets, il suffit de
taper sur l’icône en haut à droite.
2 CNED – SECONDE – SCIENCES NUMÉRIQUES ET TECHNOLOGIQUE

Que constatez-vous ?
Et oui, il y a un souci, on voulait afficher notre texte sur deux lignes. Or, le texte est présenté sur une
seule ligne ! Cela signifie qu’il faudra utiliser un langage spécial pour pouvoir présenter des informations
sur une page web, c’est ce que nous allons découvrir avec le langage HTML. Nous allons voir comment
présenter le texte sur deux lignes.
2. HTML, un langage à base de balises
A. Que signifie HTML ?

Le HTML (« Hypertext Markup Language ») est un langage dit de « marquage » (de « structuration » ou de
« balisage ») dont le rôle est de formaliser l’écriture d’un document avec des balises de formatage.
B. Les balises
Les balises permettent d’indiquer la façon dont doit être présenté les informations dans la page Web et
les liens établis avec d’autres documents.
En regardant la page Web proposée (essai.html), indiquer la fonction des différentes balises données
dans le tableau ci-dessous.
Pour cela, ouvrir la page essai.html à l’aide du navigateur Chrome, puis cliquer droit sur inspecter.
Aide complémentaire si nécessaire : http://www.codeshttp.com/baliseh.htm

Balise
<!DOCTYPE html>
<html>
<title>
<head>
<body>
< !-- -->
<h1>
<p>

<a href=»http://www.ffme.fr»>lien vers une page web</a>
<br/>
<img src=»ipage.jpg» alt=»texte» title=»titre» width=»200» height=»133»>
<ul><li>
<ol><li>
<a href=»#paragraphe»>Aller à paragraphe</a>
<meta name=»keywords» content=»mot clé 1, mot clé 2...»>
Une balise est un élément de texte (un nom) encadré par le caractère inférieur ( « < » ) et le caractère
supérieur ( « > » ).
Exemple
la balise <br> pour un saut de ligne.
Une balise (de début) fonctionne avec une autre balise (de fin) qui permet d’encadrer une action associée
à un élément.
<nom_balise> éléments…</nom_balise>
C’est donc en HTML que vous écrirez ce qui doit être affiché sur la page : du texte, des liens, des images.
Vous direz par exemple : « Ceci est mon titre, ceci est mon menu, voici le texte principal de la page, voici
une image à afficher, etc. ».
3. Liens hypertextes
Dans l’exemple précédent, il est possible d’avoir accès à d’autres pages Web depuis la page Web de
départ nommée essai.html.
Ainsi, on peut dessiner un graphe associé à ces liens hypertextes.
Somment ou nœud (page Web)
Arrête ou arc (lien hypertexte)
Il est possible de dessiner ce graphe à l’aide du site : http://graphonline.ru/en/

Ce graphe comporte alors 3 sommets et 2 arrêtes. On remarquera que le graphe est dit orienté, car on
remarque des sens de déplacement imposés entre sommets (pages Web). On va par exemple de la pages
Web essai.html vers la page d’accueil de www.ffme.fr et pas l’inverse. On représente alors le lien par une
flèche orientée dans un sens donné.

4. Création d’un mini site Web
À partir de l’exemple ci-dessous, vous allez créer un petit site Web composé de deux pages Web. Vous
créerez un lien orienté dans la page Web page1.html vers la page2.html, et réciproquement, un lien
hypertexte dans la page2.html vers la page1.html.
Il vous faudra modifier quelques balises HTML pour répondre au cahier des charges imposé.
Ouvrir les pages Web à l’aide de Brackets et modifier les balises pour répondre aux commentaires.
Pour la page1.html
Pour la page2.html
Vérifier que votre site Web fonctionne avec ses liens hypertextes.
Créer le graphe du site Web à développer. Le dessiner avec http://graphonline.ru/en/
5. Initiation à CSS
A. Introduction
Le langage (HTML) permet de créer des pages Web pour qu’elles soient visualisables à l’aide d’un
navigateur qui interprète les balises HTML et présente correctement les informations.
Voici alors deux pages Web (index.html et index2.html) qui semble identiques. Mais quelle est la
principale différence entre ces deux pages Web ?

Effectivement, la différence est la mise en forme et le placement des informations.
Nous allons maintenant regarder le contenu HTML de ces deux pages Web.
Que constatez-vous ?
B. Le fichier CSS
En fait, la mise en forme de la page Web en HTML est réalisée à l’aide d’un autre fichier appelé fichier
CSS, ici style.css.
Ce fichier style.css va donner la mise en forme associée à des balises HTML (agencement,
positionnement, décoration, couleurs, taille du text, etc.).
Le CSS pour Cascading Style Sheets est un langage de feuille de style.
Dans l’exemple fourni, on s’aperçoit que toutes les données à afficher, en tant que titre de niveau1 (grâce
à la balise <h1>), seront affichées en vert (green). Puis la police utilisée est fantasy.

Fichier CSS :
Valeur
Propriété
En effet, le code ici indique que toutes les informations qui sont intégrées dans une balise <h1> et
présentent dans toute la page Web, seront présentées en vert, et police Fantasy.
C. Modifier un fichier CSS

Modifier la couleur des informations dans les balises h1 pour un affichage en rouge (red).
D. Lien entre fichier CSS et fichier HTML

Pour que la page Web puisse utiliser la mise en forme imposée dans le fichier style.css, il faudra
que dans la page Web, on indique où se trouve le fameux fichier CSS (ici style.css).
Pour cela, il faut positionner dans la zone <head> la commande suivante :
<link href=”style.css” rel=”stylesheet” type=”text/css”> Appel de la page de styles
On définit alors le chemin d’accès ainsi que le nom du fichier CSS dans la partie
href=’chemin_acces\nom_fichier.css’
Dans notre exemple le fichier style.css se trouve au même endroit que la page web index2.html.
Un même fichier CSS peut alors être utilisé par plusieurs pages Web en même temps, ce qui est très
pratique pour définir une charte graphique pour un site Web complet. Cela évite alors de modifier la
présentation de toutes les pages Web, page par page. On peut ainsi modifier le design d’un site entier très
rapidement.

Toutes les pages Web qui utilisent le même fichier CSS seront alors modifiées en même temps.
E. Exemples de commandes CSS

Nous avons découvert deux commandes CSS permettant de fixer la couleur de la police ainsi que le type
de police.
Mais il existe de nombreuses autres commandes CSS. L’objectif dans ce cours n’est, bien sûr, pas de
connaître toutes les commandes CSS.
Commande CSS Effet
font-size: 16px; Taille de la police en pixels

font-size: 16pt ; Taille de la police en points
Couleur de la police en utilsant les composant RGB (voir thème photogra-
Color rgb(0,0,255) ;
phie numérique)
font-style: italic; Police en italic
font-weight: bold; Police en gras
text-align: center; Texte aligné en mode centré
text-align: left; Texte aligné à gauche (mode par défaut)
text-align: right; Texte aligné à droite
Texte « justifié ». Cela signifie que le texte prend toute la largeur (en fin de
text-align: justify
ligne)
background-color: black; Couleur de fond de la page Web en noir

ST20 TE 01 19 Activite1-Apprendre

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

ST20 TE 01 19 Activite1-Apprendre

Încărcat de

Drepturi de autor:

Formate disponibile

SÉQUENCE 1

B. Ce qu’il y a derrière une page Web

CNED – SECONDE – SCIENCES NUMÉRIQUES ET TECHNOLOGIQUE 1

Enregistrer le fichier HTML en index.html.

Saisir la page Web suivante.

2 CNED – SECONDE – SCIENCES NUMÉRIQUES ET TECHNOLOGIQUE

2. HTML, un langage à base de balises

A. Que signifie HTML ?

Aide complémentaire si nécessaire : http://www.codeshttp.com/baliseh.htm

CNED – SECONDE – SCIENCES NUMÉRIQUES ET TECHNOLOGIQUE 3

Somment ou nœud (page Web)

Arrête ou arc (lien hypertexte)

Il est possible de dessiner ce graphe à l’aide du site : http://graphonline.ru/en/

4 CNED – SECONDE – SCIENCES NUMÉRIQUES ET TECHNOLOGIQUE

CNED – SECONDE – SCIENCES NUMÉRIQUES ET TECHNOLOGIQUE 5

6 CNED – SECONDE – SCIENCES NUMÉRIQUES ET TECHNOLOGIQUE

C. Modifier un fichier CSS

D. Lien entre fichier CSS et fichier HTML

<link href=”style.css” rel=”stylesheet” type=”text/css”> Appel de la page de styles

CNED – SECONDE – SCIENCES NUMÉRIQUES ET TECHNOLOGIQUE 7

E. Exemples de commandes CSS

Commande CSS Effet

font-size: 16px; Taille de la police en pixels

8 CNED – SECONDE – SCIENCES NUMÉRIQUES ET TECHNOLOGIQUE

S-ar putea să vă placă și