Chap 2 - Créer Sa Page Web

Créer sa page Web
f 29
LES BALISES HTML

Début document html <!DOCTYPE html>
<html>
"utf-8" Début de l’entête Fin du titre
<head> de l’onglet
permet d’utiliser
Début du titre de l’onglet <metacharset="utf-8"/>
les caractères avec
accent : à, é, ê … Fin de l’entête
<title> Site Web – votre prénom </title>
</head>
Chaque balise est placée 2 fois : <body>

Début de la page Web
z pour marquer le début < > 1C’est ici qu’est votre page web ¡
z pour marquer la fin </> Fin de la page Web </body>
avec en plus / dans la balise.
Fin du document html </html>
1) Combien est utilisé de balises pour encadrer ? …... Une pour déterminer le ………. et une pour déterminer la …….
2) Quelle est la balise du début de l’entête (head) ? ……………… Quelle est sa balise de fin ? ………………
3) Que permet d’utiliser utf-8 ? …………………………………………..
RÉDIGER UNE PAGE HTML
n Sélectionner le dossier «Créer sa page Web», dans espace classe 1 SNT et copier-le dans votre espace personnel.
n Ouvrir le fichier «structure_page » avec notepad++ avec un clic droit de souris (vous placerez la fenêtre à gauche pour programmer).
n Recopier comme ci-dessus en modifiant les balises de début et de fin de chaque fonction <html> <head> <title> <body> .
n Ouvrir une 2ème fois avec Firefox avec un autre clic droit (vous placerez la fenêtre à droite pour voir le résultat). »
I) Les balises de structure (titre, paragraphe …) :

Balises <h1> </h1> <h2> … <h6> <p> </p> <br />
Début de Titre Fin de Titre Titre Titre moins Début de Fin de Aller
Indique très important très important important important paragraphe paragraphe à la ligne
n Modifier les balises pour mettre en forme votre page et remplacer les ??. Exemple : <Début Titre très important> 1 <h1>
II) Les balises de texte (gras, italique, souligné …) :

Balise <b> (= bold) </b> <i> <u> (= underline) <mark>
texte Début du mot en gras Fin du mot en gras italique souligné surligné
n Mettre en gras le mot bienvenue et site dans le paragraphe : « Bonjour et bienvenue sur mon site : OpenClassrooms.»
n Mettre en italique les mots : « apprendre, programmer, construire »
n Souligner le titre <h1> : Bienvenue sur OpenClassrooms !
n Surligner le titre <h2> : « Des cours pour des lycéens débutants »
III) Utiliser des liens hypertextes (enfin !!) : f 30
1) Vers un autre site : Pour faire un lien, la balise à utiliser est : <a> (pour ancre ou anchor en anglais).
Il faut lui ajouter un attribut, href (hypertext reference), pour indiquer vers quelle page le lien doit conduire :
Adresse URL où vous mènera le lien hypertexte

<body>
<p>Pour faire une recherche sur Ecosia <a href="https://www.ecosia.org " > cliquez ici </a>.
</body> h ref est dans la balise <a > ⁄
On va pouvoir cliquer sur ce texte
n Ouvrir le fichier «liens hypertexts » Compléter avec la balise ancre <a href … comme ci-dessus |
n Adapter le programme avec l’adresse URL du site du lycée Valin avec la phrase : "Pour aller sur le site de Valin. Cliquez ici"
n Adapter le programme pour ouvrir le lien dans un nouvel onglet en ajoutant » : target = " _blank " dans la balise <a> :
<p>Pour faire une recherche sur Ecosia <a href="http:// www.ecosia.org"target="_blank" >cliquez ici</a>.
2) Vers une autre page : Pour nommer les pages ou les images,
Les 2 pages HTML seront liés avec un lien cliquable pour passer de l'une à l'autre. il faut absolument ne pas mettre :
Les 2 pages doivent être dans le même dossier. d’espaces, de Majuscules ou d’àccents.
0 Réécrire le nom "Page 1.html" pour que le lien hypertexte puisse s’appliquer : ……….………………
<h1>Je suis sur la page 1.</h1>
<p>Un lien pour aller sur la <a href="Page 2.html">page 2.</a> </p>
n Ouvrir le fichier page1 et compléter les ?? du programme sur notepad++
n Renommer en faisant un clic droit sur le nom du fichier "Page 2.html" et corriger 2 erreurs intentionnelles.
3) Vers une image :

Pour insérer une image, il faudra le faire dans un paragraphe <p> et utiliser la balise <img /> qui est une balise orpheline
car il n'est pas nécessaire de délimiter le début et la fin de l'image. La balise est accompagnée de 2 attributs obligatoires :
6 scr (source) : il permet d'indiquer où se trouve l’image que l’on veut insérer. Exemple : SNT /images/fleurlotus.jpe
Comment s’appelle l’image ? …………………..
Elle est dons le dossier ……………. qui est dans le dossier ……….……..
6 Alt : C’est le texte alternatif affiché à la place de l’image si elle n’est pas chargée.
Exemple : alt = "une fleur".
Cas 1 : L’image lotus.jpe se trouve dans le même dossier que la page HTML.
<p> Voici une fleur de lotus : <br /> <img src="lotus.jpe" alt="Fleur de lotus"> </p>
n Ouvrir le fichier : "insertion_image.html " et copier le programme ci-dessus |
Cas 2 : L’image lotus.jpe se trouve dans le sous dossier « images » <img src="images/lotus.jpe" alt="Fleur de lotus">
n Créer un dossier image, placez y l’image "lotus" et adapter le programme comme ci-dessus. Survolez la photo
avec la souris pour voir
n Ajoutez à la suite dans la balise img : title="C'est une belle fleur quand même !" l'infobulle apparaître.
<img src="images/lotus.jpe" alt="Fleur de lotus" title="C'est une belle fleur quand même !">
Je sais déplacer Balises structures : Balises textes : Je sais enregistrer et

Page html un dossier body, h1, p … Gras, italique … actualiser mes pages
Nombre d’Aquis : / 14 /2A /2A

vers site web vers page 2 Insertion image infobulle
Lien hypertexte /2A
elle
Ecosia Valin N fenêtre image Dossier image
IV) Les balises de liste 1) 2) 3) ou  : f 31
Balises <li> <ul> <ol>

liste devant chaque mot de la liste non ordonnée  ordonnée 1) 2) 3)
<h2>Fruits préférés</h2>
<h2>Ma journée</h2>
<ul>
<ol>
<li>Fraises</li>
<li>Je me lève</li>
<li>Framboises</li>
<li>Je mange et bois</li>
<li>Cerises</li>
<li>Je me couche</li>
</ul>
</ol>
n Ouvrir le fichier «Listes » avec notepad++. Modifier les balises de la liste non ordonnée de vos 3 fruits préférés.
n Créer toutes les balises dans le 2ème partie de la page web pour créer la liste ordonnée de vos 3 plats préférés.
V) Créer un lien vers un endroit plus loin sur la page :

L’ancre <a> va cette fois-ci être utilisée comme point de repère dans vos pages HTML lorsqu'elles sont très longues.
En effet, il est parfois utile de faire un lien amenant plus bas dans la même page pour que le visiteur puisse sauter
directement à la partie qui l'intéresse. Cela se passe en 2 temps :
 Créer un lien avec l'attribut href avec un dièse "#" <a href="#planter">Aller vers l'ancre</a>
suivi du nom de l'ancre. ctrl + alt gr + touche 3 1 # La balise <a> va nous permettre d’aller vers l’ancre "planter"
 L'attribut id sera l’ancre pour le point d’arrivé
Il sera écrit dans une balise qui va alors servir de repère. <h2 id="planter">Comment planter un lotus ?</h2>
Ce peut être n'importe quelle balise, un titre par exemple. planter servira de balise d’arrivée
n Ouvrir le programme "ma_grande_page.html ", enregistrer-le dans votre espace personnel.

n Adapter et compléter le programme en insérant les balises id="ancre"et <a href="# ancre"> c’est là où je vais <a/>
Vous pourrez nommer les ancres roller pour les rollers et arc pour le tir à l’arc.
Révision sur la programmation HTML :

1) Comment souligner un mot ? …………………………………….……………………. ou utilisant le langage CSS.
2) La page web se situe entre les 2 balises : < ………..… > et < ………… >
3) Quelle différence entre h1 et title ? h1 est le titre dans l’onglet / la page web et title est le titre dans ………..…
4) Qu’est-ce qu’une liste ordonnée ? ……………………………………… désordonnée ? ……….…………………
5) Pour faire une liste, il faut utiliser 2 balises : < ….. > pour les tirets de chaque ligne de votre liste.
et < ….. > pour préciser si c’est une liste numérotée ou < ….… > pour une liste avec des puces
6) La balise <a> est une balise …………….. qui permet de localiser. href permet de créer un ……… ……………………
<img src="banque_images/drapeau.jpe" alt="oups" title="Quel beau drapeau que celui de la France">
7) Dans quel dossier est l’image drapeau ? …………………………. Quel sera l’infobulle ? …………….…………………..
A quoi sert alt pour une image ? …………………………………………………..… qui pour le drapeau sera : …………
8) Où est l’image lotus : <img src="lotus.jpe" alt="Fleur"> </p> ? z Dans le ……….…… dossier que le fichier HTML
9) Qu’est-ce qu’une balise orpheline ? …………………..………………………… Citez-en 2 : ………...... , ……..…….
Liste : Lien vers un endroit

Page HTML non-ordonnée ordonnée de la page
Questionnaire
Nombre d’Aquis : / 10 /3A /5A
f 32 UTILSATION DU LANGAGE CSS
I) Ecrire en CSS :
On va créer une autre page en format .css que l’on va avoir sur notepad++ qui va mettre en forme la page.
On aura nos 2 fichiers disponibles en onglets : l’un en format .html et l’autre en format .css
Pour appliquer le css à la page html on va insérer dans l’entête <head> la ligne suivante :
<link rel="stylesheet" href="style.css" />
href va cette fois-ci créer un lien
href va chercher le fichier "style" et l’appliquer entre la page html et la page css
p Le programme CSS h1
{ { CSS va colorer en jaune
color: green;
va colorer en vert color: yellow; le titre très important <h1>
} tous les paragraphes <p> }
n Ouvrir le fichier "mon_super_site.html " avec notepad++ Cliquez sur nouveau fichier et nommez-le "super_site.css "
n Colorer le paragraphe en bleu et le titre h1 en rouge.
n Exécuter la page en ouvrant le fichier "mon_super_site.html " avec firefox.
II) Mettre en forme le texte :

1) Taille du texte : font-size :…… ;
Taille En pixel Avec les mots :
font-size :…… ; 16 px xx-small ; x-small ; small ; medium large ; x-large ; xx-large ;
n Mettre le paragraphe en taille x-large et le titre h1 en taille small.
2) Italique, gras, souligné, alignement …

Mettre en italique Alignement du texte left; center; Gauche ; centré ; droite ;
right; justify; exploite toute la largeur
font-style : italic ; text-align:
Mettre en gras Habillement du texte underline;
souligné ; barré ;
line-through;
font-weight : bold ; text-decoration: overline; blink; ligne au dessus ; clignotant.
n Mettre le paragraphe aligné à droite en gras bleu et le titre h1 en italique orange souligné centré.
3) Police : font-family : police1, police2, police3 …

Le navigateur essaiera d'abord d'utiliser la police 1. S'il ne l'a pas, il essaiera la police 2. Sinon 1 police3, et ainsi de suite.
Si le nom de la police comporte un espace, il est conseillé de l'entourer de guillemets, comme pour "Arial Black".
Voici une liste de polices qui fonctionnent bien sur les navigateurs : p
Arial ; Arial Black ; Comic Sans MS ; Courier New ; Georgia ; {
font-family: Impact, "Arial Black"
Impact ; Times New Roman ; Trebuchet MS ; Verdana. }
n Mettre le paragraphe avec la police Comic sans MS et le titre h1 avec la police Arial Black
4) Couleurs :
Fond de page Insérer une image “neige” en fond de page
Background-color :…… ; background-image:url("neige.png");
Texte Transparence background-attachment:fixed ou scroll ;(bouge avec la page)

background-repeat: no-repeat; (l’image ne se répète pas)
opacity: 0.3
color :…… ; background-position: top,left, right,bottom,center
0 < valeur < 1
body
n Insérer un fond de page de la couleur de votre choix. {
background-image:url("neige.png");
n Insérer l’image : "fleur-de-lotus-1.jpg" en fond de page, centrée et sans répétition. }
5) Bordures : f 33
border:… … … ;
Les différents styles :
Taille en px Couleur Style
body
{
border: 3px blue dashed;
}
Qui a dit que vous étiez obligés d'appliquer la même bordure aux quatre côtés de votre élément ? Taratata, si vous voulez
mettre des bordures différentes en fonction du côté (haut, bas, gauche ou droite), vous pouvez le faire sans problème.
Dans ce cas, vous devrez utiliser ces 4 propriétés : 6 border-left: bordure gauche 6 border-right: à droite
6 border-top: en haut 6 border-bottom: en bas
n Mettre à la page une bordure de 4 pixels d’épaisseur trait continue bleu.
Vous pouvez créer des bordures arrondies avec : border-radius: 10px
6) Les ombres :
Ombre encadrée Ombre de texte
box-shadow: 6px 6px 0px black; text-shadow: 2px 2px 4px black;
 décalage horizontal de l'ombre  décalage vertical  adoucissement du dégradé  couleur de l'ombre.

On peut aussi rajouter une 5ème valeur facultative : inset. Dans ce cas, l'ombre sera placée à l'intérieur du bloc.
n Mettre à la page une ombre décalée de 4 pixels à droite, 4 pixels en bas, 3 pixels d’atténuation et jaune.
n Mettre au texte du paragraphe une ombre décalée de 2 pixels à droite, 2 pixels en bas, pas d’atténuation et noire.
7) Taille des blocs et leurs marges :

Largeur Hauteur Largeur minimum
width: 750px; height:1500px min-width: 750px;
La largeur et la hauteur peuvent aussi être exprimée pourcentage : width: 50%;

C’est utile pour créer un design qui s'adapte automatiquement à la résolution d'écran du visiteur.
Marge extérieur Marge intérieur

padding-top margin -left
padding:750px; padding-right margin:50px; margin -bottom
margin : auto; 0 On peut donc demander à ce que le bloc soit centré avec auto
Lorsqu'on définit des dimensions précises pour nos blocs, il arrive qu'ils deviennent trop petits pour le texte qu'ils contiennent.
CSS permet de contrôler ces dépassements… et décider quoi faire si jamais cela devait arriver. overflow : couper un bloc
hidden caché Si le texte dépasse les limites, il sera tout simplement coupé.
Couper un bloc On ne pourra pas voir tout le texte.
Le texte sera coupé, sauf que cette fois, le navigateur mettra
scroll suivi des barres de défilement pour lire l'ensemble du texte.
overflow: …; c'est le mode « pilote automatique ». C'est le navigateur qui décide
auto automatique de mettre ou non des barres de défilement.
word-wrap: break-word; permet de couper les textes trop larges
n Définir à votre page une largeur mini de 750 pixels, une marge extérieure 12 pixels, et couper les blocs en automatique.
8) Apparences dynamiques : f 34
a : active
a : hover {
{ text-decoration: underline; background-color: red;
color: green; } }
Le fond du texte du lien"a"

Quand la flèche desouris survole le lien "a" devient rouge,
il souligne et se colorer en vert. lorsque vous cliquez dessus.
a: hover 1 se traduit par : « Quand la flèche de la souris est sur le lien » (quand on pointe dessus).
p: hover 1 On peut aussi désigner un paragraphe en écrivant Quand on pointe un paragraphe.
a: active 1 Ne s’applique que lorsque vous cliquez sur le lien cela reste donc peu visible.
a : focus a : visited Une fois que le lien
Une fois que vous avez cliqué,
{ { a été consulté,
le lien reste « sélectionné »
background-color: yellow; color: blue; Le texte devient et
} il devient et reste sur fond jaune. } reste bleu.
n Ouvrir le fichier "liens_dynamiques.html " et créer votre fichier"liens_dynamiques.css "avec notepad++

n Créer un survol qui devient une ombre de texte orange pour le paragraphe et fond jaune pour le titre.
n Créer un fond cyan lorsque vous avez cliqué sur le lien pour aller sur le site de valin.
9) Les balises structurantes :

<header> est l’entête en haut de votre page. On y trouve le plus
souvent un logo, une bannière, le slogan de votre site …
A ne pas confondre avec «head» qui ne fait pas partie du corps
« body » de la page, mais qui donne certaines propriétés.
<footer> est le pied de page qui se situe en bas. n y trouve des
informations comme des liens de contact, le nom de
l'auteur, les mentions légales, etc.
<nav> doit regrouper tous les principaux liens de navigation du site.
Vous y placerez par exemple le menu principal de votre site.
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="forum.html">Forum</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<section> sert à regrouper par blocs des contenus en fonction de leur thématique.
<aside> contient des informations complémentaires au document que l'on visualise (généralement placées sur le côté).
<article> sert à englober une portion généralement autonome de la page. C'est une partie de la page qui pourrait ainsi être
reprise sur un autre site. C'est le cas par exemple des actualités (articles de journaux ou de blogs).
n Structurer le fichier "Fleur_Lotus_a_compléter.html" et créer votre fichier"lotus.css "avec notepad++
Je sais enregistrer Colorer en bleu p Taille, italique, gras, Fond de page colorée
Page avec CSS pages html et css et en rouge h1 souligné, polices … centrée sans répétition
Nb d’Aquis : /6 /2A /2A
Page avec CSS Bordures Ombre Taille page / marges Apparences dynamiques
Nb d’Aquis : /6 /2A /2A

Chap 2 - Créer Sa Page Web

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Chap 2 - Créer Sa Page Web

Transféré par

Droits d'auteur :

Formats disponibles

Créer sa page Web

LES BALISES HTML

Chaque balise est placée 2 fois : <body>

RÉDIGER UNE PAGE HTML

I) Les balises de structure (titre, paragraphe …) :

II) Les balises de texte (gras, italique, souligné …) :

Adresse URL où vous mènera le lien hypertexte

3) Vers une image :

Je sais déplacer Balises structures : Balises textes : Je sais enregistrer et

Nombre d’Aquis : / 14 /2A /2A

Balises <li> <ul> <ol>

V) Créer un lien vers un endroit plus loin sur la page :

n Ouvrir le programme "ma_grande_page.html ", enregistrer-le dans votre espace personnel.

Révision sur la programmation HTML :

Liste : Lien vers un endroit

II) Mettre en forme le texte :

n Mettre le paragraphe en taille x-large et le titre h1 en taille small.

2) Italique, gras, souligné, alignement …

3) Police : font-family : police1, police2, police3 …

Texte Transparence background-attachment:fixed ou scroll ;(bouge avec la page)

n Mettre à la page une bordure de 4 pixels d’épaisseur trait continue bleu.

Vous pouvez créer des bordures arrondies avec : border-radius: 10px

 décalage horizontal de l'ombre  décalage vertical  adoucissement du dégradé  couleur de l'ombre.

7) Taille des blocs et leurs marges :

La largeur et la hauteur peuvent aussi être exprimée pourcentage : width: 50%;

Marge extérieur Marge intérieur

word-wrap: break-word; permet de couper les textes trop larges

Le fond du texte du lien"a"

n Ouvrir le fichier "liens_dynamiques.html " et créer votre fichier"liens_dynamiques.css "avec notepad++

9) Les balises structurantes :

Vous aimerez peut-être aussi