I CONCEPTION D'UNE PAGE WEB

Complément

• Créer une page WEB avec le langage de description HTML.

• Analyser une page WEB en langage HTML

• Comprendre le principe et l'intérêt de la séparation du contenu et de la mise en forme

• Acquérir les bases des langages HTML et CSS pour mettre en forme une page internet.

• Évaluer la qualité des pages du point de vue de la correction syntaxique et de l'efficacité du message.

• Faire un usage responsable des sciences du numérique

• Correction syntaxique (passage du validateur W3C),

• Utilisation d'un client FTP comme FileZilla pour mettre en ligne un site Web sur un serveur distant identifié et identifier les problèmes de sécurité.

ComplémentRessources

HTML5 : WWW.W3SCHOOLS.COM/TAGS/default.ASP

http://fr.html.net/tutorials/html/

W3C : www.w3org.com/TR/HTML-MARKUP/

CSS : www.w3schools.com/css/default.asp

APPRENDRE HTML5-CSS :

https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3

Ressources pour le cycle terminal général et technologique, Informatique et Sciences du Numérique,

Créer des pages Web : http://cache.media.eduscol.education.fr/file/ISN_Tle_S/26/9/lyceeGT_ressource_ISN_20_06_Tle_S_24_Page_Web_218269.pdf

Remarque

Pour conserver de la flexibilité dans vos pages WEB, il faudra absolument séparer le contenu de la page web (le fichier HTML) de son apparence : mise en page, polices, couleurs, bordures... (le fichier CSS).

SyntaxeI Langage HTML Hyper Text Markup Langage

Le World Wide Web a vu le jour en 1990 au CERN près de Genève.

L'un des formats enrichis utilisé pour écrire le contenu des pages web est le format HTML : Hypertext Mark-up Language.

Il s'agit d'un langage informatique de description qui permet de décrire la structure d'un document numérique destiné a

être transmis par le web et affiché dans un programme appelé navigateur internet (Exemple : Mozilla firefox, Google Chrome, Internet Explorer, Safari ... ).

HTML permet de structurer sémantiquement et de mettre en forme le contenu des pages, d'inclure des ressources multimédias, dont des images, des formulaires de saisie, et des programmes informatiques que vous allez pouvoir afficher dans votre navigateur (Firefox, Chrome, Opera,....).

Il permet de créer des documents interopérables avec des équipements très variés

Il est souvent utilisé conjointement avec des langages de programmation comme Java, JavaScript, PHP, ASP ...

HTML n'est pas un langage de programmation mais  de description à l'aide de balises.

Le langage HTML est développé par le consortium W3C.

Convertisseur de couleurs en HEX et RGB et visualisation.rar [rar]
UwAmp.rar [rar]

Pour obtenir le code HTML d'une page web, par exemple :

http://isnkoeberle.site.ac-strasbourg.fr/,

il suffit de l'ouvrir avec un navigateur, de faire un clic droit à un endroit quelconque de la page et de sélectionner « Voir le code source ».

Syntaxe1. Balisage d'un fichier HTML

1. Ouvrir le fichier: « La Cigale et la Fourmi.txt » (qui contient le poème mis en forme) et l'enregistrer-sous le format d'une page WEB : «La Cigale et la Fourmi.html »

Est-ce qu'un saut de ligne dans l'éditeur de texte se matérialise par un saut de ligne à l'affichage ?

Cigale et la fourmi.txt [txt]

2. Ecrivez le code source ci-dessous dans Notepad. Ce code correspond à la base d'une page web en HTML5 (remarquer l'utilisation de balises)

1
<!DOCTYPE html>
2
<html>
3
<head>
4
  	<meta charset="utf-8">
5
  	<title>La Cigale et la Fournmi</title>
6
 	</head>
7
<body>
8
.....
9
</body>
10
</html>
11
Observer que l'affichage correct du texte nécessite l'utilisation de l'Unicode grâce à l'emploi de la balise meta qui précise l'encodage de la page HTML.
caracteres speciaux.xlsx [xls]
Autres solutions (caractères spéciaux) :
« è »
&egrave;
« espace »
&nbsp;
« à »
&agrave;
« & »
&amp;
« û »
  &ucirc;
« " »
&quot;
« é »
&eacute;
« ê »
&ecirc;
« > »
&gt;
« € »
&euro;
«< »
&lt;
Balise
Description
<html>
Balise principale
<head>
En-tête de la page
<body>
Corps de la page
Remarques : Les balises s'ouvrent et se ferment dans un ordre précis et dans le sens inverse de leur ouverture.
<html><body></body></html> est un ordre de balises correct.
<html><body></html></body> est un ordre de balises incorrect,
les balises s'entremêlent.
Rajouter une balise <h1>La Cigale et la Fourmi </h1> dans le corps de votre page internet
Complément2. Les balises à insérer dans le corps de la page sont :
Balises
Création ....
<br>
... d'un saut de ligne
<p> .... </p>
....d'un paragraphe
<ol>........</ol>
... d'une liste numérotée
<ul>...........</ul>
... d'une liste non numérotée
<li>...........</li>
... d'items de liste
<h1> ....</h1>
... d'un très gros titre
<h2> ....</h2>
.... d'un gros titre
<h3> ....</h3>
.... d'un titre
<a href= « chemin/vers/fichier ou ancre »> Nom du lien </a>
Exemple :
<a href = "http://www.google.fr" > Cliquer ici </a>
<a href = "mailto: eric.langer@ac-strasbourg.fr " >Mon adesse mail </a>
.... d'un lien externe
<a name= « ancre » ></a>
.... d'un lien interne ou ancre
<!-- écrire un commentaire -->
.... d'un commentaire
<img src="url_de_l_image" alt="Texte remplaçant l'image" TITLE="Texte à afficher"></img>
Seuls les formats d'image JPEG, PNG et GIF sont acceptés en standard.
.... d'une image
Le document que vous êtes en train de réaliser est un document valide au sens de la norme proposée par le consortium W3C.Vérifions-le à l'aide du site : http://validator.w3.org
Complément3. Création de tableaux
Les tableaux permettent de synthétiser des données. La création d'un tableau débute avec la balise <table>.
Cette balise possède 2 attributs :
- border (épaisseur des bordures du tableau)
- cellspacing (espace entre les cellules du tableau, "0" : bordure "simple,
toutes les autres valeurs vous donneront une bordure "double". )
Ensuite, les balises <tr> vous permettent de créer les lignes de votre tableau. Les balises <td> vous permettant de créer des colonnes.
Exemple de Page Tableau.html [html]
1
<table border="2" cellspacing="0">
2
<tr>
3
<td>L1C1</td>
4
<td>L1C2</td>
5
<td>L1C3</td></tr>
6
<tr>
7
<td>L2C1</td>
8
<td>L2C2</td>
9
<td>L2C3</td>
10
</tr>
11
</table>
12
1
<table border="2" cellspacing="0"> 
2
<tr> 
3
	<td>L1C1</td> 
4
	<td>L1C2</td> 
5
	<td>L1C3</td> 
6
</tr> 
7
<tr> 
8
	<td>L2C1</td> 
9
	<td colspan="2">L2C2</td> 
10
	</tr> 
11
</table>
12
1
<table border="2" cellspacing="0"> 
2
<tr> 
3
	<td>L1C1</td> 
4
	<td>L1C2</td> 
5
<td rowspan="2">L1C3</td> 
6
</tr> 
7
<tr> 
8
	<td>L2C1</td> 
9
	<td>L2C2</td> 
10
	</tr> 
11
</table>
12
Exemple4. Création d'éléments de formulaires
Exemple de Page Input.html [html]
1
<input name="ident">
2
<input name="ident" value="Ecrire votre texte">
3
<input type="submit" value="Envoi">
4
<input type="checkbox" name="Systeme" value="linux" checked>Linux<br>
5
<input type="checkbox" name="Systeme" value="dos">dos<br>
6
<input type="checkbox" name="Systeme" value="win">windows<br>
7
<input type="radio" name="Media" value="cd" checked>CD<br>
8
<input type="radio" name="Media" value="dk">Disquette<br>
9
10
<input type="password" name="pass">
11
<select name="menu">
12
	<option> Pomme
13
	<option> Banane
14
	<option selected> Orange
15
	<option> Poire
16
<select> 
17
https://quizlet.com/fr/364644167/html-flash-cards/
MéthodeII/ Mise en forme CSS (Cascading Style Sheets, aussi appelées Feuilles de style)
Le design d'un site évolue toujours au fil du temps. Le problème, lorsqu'on n'utilise pas de feuilles de style, c'est qu'il faut reprendre toutes les pages HTML une à une pour modifier une police de caractère ou une couleur de fond...
La feuille de style CSS gère la mise en forme de la page web (agencement, positionnement, décoration, couleurs, taille du texte...). Ce langage est venu compléter le HTML en 1996.
Le terme Cascade dans la dénomination de CSS indique que la plupart (mais pas toutes) des propriétés des éléments parents sont héritées par les éléments fils.
Un fichier CSS est un simple fichier texte avec des définitions de règles de styles, qui doit être insérer dans toutes les pages du site.
Ainsi, lorsqu'on en modifiera un élément, cela se répercutera immédiatement sur toutes les pages html.»
1) Structuration du document : découverte des balises <span...> </span> et <div...></div>:
o Chaque strophe doit être écrite en bleue et centrée sur la page, grâce à une balise personnelle dite de type
<div class="strophe">...</div> (on parlera de classe CSS)
o Chaque rime doit être passée au fluo rouge(autrement dit, écrite en caractères gras sur fond rouge.), nous allons les baliser par une autre balise personnelle
<span class="surligner">....</span>
1
<div class="strophe">
2
		La Cigale, ayant <span class="surligner"> chant&eacute; </span><br> 
3
		Tout <span class="surligner">l'&eacute;t&eacute;,</span><br>
4
</div>
5
Que constate-t-on est ce normal ?
2) Création du fichier CSS
Nous allons définir la décoration que nous avons balisée dans le fichier HTML.
Pour cela, nous allons créer un fichier CSS appelé « styleperso.css » que nous allons d'abord lier à la page HTML en rajoutant une ligne dans les balises <head></head>
1
<head>
2
  	<meta charset="utf-8"/>
3
	<link rel="stylesheet" href="styleperso.css" type="text/css"/>
4
  	<title>La Cigale et la Fourmi</title>
5
</head>
6
Convertisseur de couleurs en HEX et RGB et visualisation.rar [rar]
Fichier « styleperso.css » :
1
/*Mon CSS perso*/
2
.strophe{
3
text-align:center; 	/*le texte sera aligné au centre*/
4
color : #0000FF; 	/*le texte est en bleu, les couleurs sont codées #rrvvbb de #000000 à #FFFFFF*/
5
}
6
7
.surligner {
8
color : #FF0000; 	/*le texte est en rouge */
9
font-weight: bold; 	/*la police est en gras */
10
}
11
12
Ouvrer alors le document HTML avec le navigateur. Le voilà enrichi suivant le cahier des charges !
Remarquer l'utilisation de couleurs codées selon le standard RGB (rouge/vert/bleu)
En hexadécimal , on écrit #FFFFFF pour blanc, #FF0000 pour rouge, #00FF00 pour vert,
#0000FF pour bleu
#FFFF00 pour jaune (selon le principe de la synthèse additive des couleurs
3) Compléter le fichier CSS par une définition de la balise <h1></h1>afin que le texte des très gros titres apparaisse aligné à droite, de couleur blanche sur fond gris.
1
2
h1{
3
color :............... ; 		/*Définition de la couleur de la police */
4
text-align : ..................; 		/* Alignement du texte */
5
background-color :.........................; 	/* Définition de la couleur du fond * /
6
4) Modifier uniquement le fichier « styleperso.css » pour que sans avoir à modifier le fichier html on ait :
- Les strophes alignées à droites et écrites en rouge.
- Les rimes écrites en noir sur fond jaune.
On constate que le fait de modifier la CSS modifie intégralement et instantanément le rendu de la page
HTML. Ainsi, on voit l'intérêt de séparer le fond et la forme des pages web.
5) Découverte de la syntaxe CSS pour la gestion des polices
Tous les attributs de la police de caractères sont optionnels. Ils peuvent être définis dans la feuille de style comme dans l'exemple ci-dessous :
1
h1{
2
	font-family: Serif ;		/* Police générique ressemblant à Times New Roman*/
3
	color : #00FF00 ;		/* Couleur des caractères */
4
	font-size : 22px ;		/* Taille en pixel */
5
	text-align : right ;		/* Alignement */
6
	font-weight : 800 ;	
7
  /*«Graisse» des caractères : donne des caractères gras doit être un multiple de 100*/
8
	font-style : italic ;		/* Style */
9
	text-decoration :underline ;	/* Souligné overline, underline,line-through*/
10
   background-color : azure; 	
11
  /* Définition de la couleur du fond * /
12
}
13
Remarques :
On a utilisé une unité de taille plus pratique que le pixel pour les polices, elle se note le « em ».
1em signifie de taille normale, 1.5em signifie 1.5x plus gros, 0.8em signifie 0.8x plus gros...
Cinq familles pour la propriété font-family d : Serif, Sans-Serif, Cursive, Fantasy et Monospace
6) Modifier la feuille de style pour que :
- Le texte des très gros titres <h1></h1>soit souligné dans la police Fantasy d'une taille de 30px
Le texte des gros titres <h2></h2>soit aligné à droite dans la police Cursive d'une taille de 20px
ComplémentIII Création de blocs pour la mise en page avec CSS
Poème:
- dimensions :
o largeur : 70% de la page
o hauteur : adaptée au contenu
- marge extérieure au cadre:
o gauche 320 et le reste non défini.
- marge intérieure au cadre :
o haut et bas : 15px
o droite et gauche : 10px
1) Mise en place des cadres:
Ouvrir le document HTML, puis baliser le poème par
<div class="poeme"></div>
1
<!DOCTYPE html>
2
<html>
3
<head>
4
  	<meta charset="utf-8"/>
5
	<link rel="stylesheet" href="styleperso.css" type="text/css"/>
6
  	<title>La Cigale et la Fourmi</title>
7
</head>
8
<body>
9
<div class="entete">
10
<h1>La cigale et la fourmi</h1>
11
</div>
12
<div class="main">
13
	<div class="liens">
14
		<h1> JEAN DE LA FONTAINE </h1>
15
		<h2>  Quelques liens utiles </h2> 
16
		<a href= "Photo.html"> Sa photo </a> <br>
17
		<a href= "#poeme"> Un po&egrave;me  </a> de Jean de la Fontaine <br>
18
		<a href= http://fr.wikipedia.org/wiki/Jean_de_La_Fontaine> Sa 
19
 				bibliographie</a><br>
20
	</div>
21
<div class="poeme">		
22
		<a name="poeme"></a>
23
		<h2> La cigale et la fourmi  </h2> 
24
		<div class="strophe">
25
			La Cigale, ayant <span class="surligner"> chant&eacute; </span><br> 
26
			...... 
27
</div>
28
	<h3>Jean de la Fontaine</h3>
29
</div>
30
</div>
31
</body>
32
</html>
33
Dans la CSS, le code qui donne les attributs du bloc de la <div class="poeme"></div> est le suivant :
1
.poeme {
2
		
3
		margin-left : 30%; 			/*marge gauche 310px*/
4
		padding : 15px 10px 15px 25px; 	/*marges intérieures :haut, droite, bas puis gauche*/
5
		width: 68%; 				/* largeur du bloc 70% de la page */
6
		height : auto; 				/*hauteur du bloc (automatique ici) */
7
		background-color : #555555; 		/*couleur de fond arbitraire afin de voir le bloc */
8
		}
9
En vous inspirant de cette syntaxe, créer une toute nouvelle feuille de style appelée styleperso2.css
pour définir la disposition des blocs : body, h1, liens, poeme et strophe
Pensez également à modifier en conséquence le <head></head> du document HTML
Valider la feuille de style CSS à l'aide du site : http://jigsaw.w3.org/css-validator/
1
body {
2
   background-image: url("paper.gif");
3
   background-color: #cccccc;
4
}
5
font-style
italic, oblique, normal
Italique
background-color
Identique à color
Couleur de fond
background-image
url('image.png')
Image de fond
background-attachent
fixed, scroll
Fond fixe
background-repeat
repeat-x, repeat-y, no-repeat, repeat
Répétition du fond
background-position
(x y), top, center, bottom, left, right
Position du fond