FICHE PEDAGOGIQUE : Séance 1/5
Production de Pages Web
Plan de la leçon : Durée
: Réflexions Pédagogiques :
I- Introduction
II- Création de pages web avec Front Page
1- Activité
III- Conception de pages web en HTML
1- Balises de base 2- Exemple
Application 1 : création d’une page
web simple à l’aide du langage HTML.
10 mn 30 mn 10 mn 10 mn 10 mn 40 mn
Objectifs de la leçon :
Présenter les différentes méthodes de création de pages web.
Produire une page web à l’aide d’un éditeur.
Produire une page web en langage HTML.
Méthode envisagée :
Notions de cours.
Aspect pratique.
Documentation : Questions à Poser :
Documentation personnelle.
Recherche internet.
Quel sont les avantages et les inconvénients de chacune de ces méthodes?
?
Difficultés prévues :Notion de balises dans le langage Html
Difficultés rencontrées : Thermes techniques :
HTML
Balises
Lien Hypertexte
FICHE PEDAGOGIQUE : Séance 2/5
Production de Pages Web
Plan de la leçon : Durée
: Réflexions Pédagogiques :
Rappel : balises de Html
III- Conception de pages web en HTML
3- Insertion d’une image 4- Insertion d’un lien
hypertexte
Application 2 : Création d’une page
web à l’aide de Front Page.
Voir le code source de cette page.
Application 3 : Création d’une page
web à l’aide du langage HTML.
05 mn
15 mn 15 mn
30 mn
40 mn
Objectifs de la leçon :
Produire une page web à l’aide d’un éditeur.
Produire une page web en langage HTML.
Méthode envisagée :
Notions de cours.
Aspect pratique.
Documentation : Questions à Poser :
Documentation personnelle.
Recherche internet.
Difficultés prévues :
Notion de balises dans le langage Html Insertion de lien hypertexte.
Difficultés rencontrées : Thermes techniques :
HTML
Balises
Lien Hypertexte
1ère Séance : -2 Heures-
PRODUCTION DE PAGES WEB
I- Introduction :
Pour produire des pages web, on a le choix entre
Utiliser un éditeur qui génère automatiquement les pages tel que Front Page.
Écrire directement le code source en langage HTML (Hyper Text Mark up Language) qui n’est pas un langage de programmation : HTML permet simplement de spécifier l'apparence d'un document. Un fichier HTML est un fichier texte qu'on peut ouvrir et modifier avec un éditeur quelconque.
Outre le texte du document, le fichier contient des balises qui précisent la structure et l'apparence du document.
II- Création des pages web avec Front Page:
Cet éditeur fonctionne en mode WYSIWYG (What You See Is What You Get), mais on peut à tout moment passer au code HTML et apporter des modifications.
Activité:
Démarrer le logiciel Microsoft Front Page et créer la page web suivante à l’aide de l’éditeur existant puis passer au mode code pour voir le code Html correspondant.C’est ma première page en Front page.
Front Page est très simple à utiliser.
On peut écrire en gras Ou en italique.
III- Conception des pages en HTML:
Dans un deuxième temps, la balise peut porter sur une partie précise du document, elle doit s'ouvrir et se refermer : <nom_de_balise> texte concerné <
/
nom_de_balise>Le signe / annonce la balise fermante.
Enfin, il peut être nécessaire de préciser le comportement de la balise, cela se fait avec des attributs, selon la syntaxe suivante :
<nom_de_balise liste_attributs> texte concerné </nom_de_balise>
1. Balises de base
Il est possible en HTML de définir différents types de listes :
des listes non ordonnées (balise UL) ;
des listes ordonnées (balise OL) ;
des listes de définition (balise DL).
2. Exemple :
B Gras I italique U Souligné
S Barré
BIG plus gros SMALL plus petit
FONT changement de police, taille et couleur H1 titre de niveau 1
EM mettre du texte en avant center pour centrer
SUB un indice SUP un exposant
BR passage à la ligne P paragraphe HR tirer un trait IMG insérer une image
<HTML>
<HEAD>
<TITLE> Exemple Simple </TITLE>
< /HEAD >
<BODY>
<H1> HTML est Simple à apprendre < /H1 >
<H2> Ce titre est plus petit </H2>
<P> Bienvenue au mode HTML
C’est le premier paragraphe – Ligne 1 <BR> - Ligne 2 </P>
<P> C’est le deuxième paragraphe </P>
</BODY>
</HTML
