Académique Documents
Professionnel Documents
Culture Documents
Le HTML
Aperçu de Notepad++
La norme
Le W3C (abréviation de World Wide Web Consortium) est un organisme dont la mission va être de
"surveiller" l'évolution du web : il faut éviter que certaines grosses entreprises tentent de
stopper son évolution pour des raisons commerciales. Le W3C aura aussi la tâche de proposer au
fur et à mesure de nouvelles versions du HTML, justement afin que le Web évolue.
Créer un standard, ça permet donc de s'assurer que tout le monde parle et comprend le même
langage.
Les Balises
Un documents XHTML est constitué de balises qui permettent d’identifier les différentes parties
du document
Les balises existent soit par paires <balise> </balise> ; soit toutes seules, <balise/>
S'il y a des attributs dans une balise fonctionnant par paire, on ne les met que dans la balise
ouvrante
Les Attributs
Les attributs permettent de donner des précisions sur une balise. On peut trouver des attributs
sur les deux types de balises (par paire ou seules).
Voici le code de base d'une page web, qui va servir de point de départ à chacune de nos pages :
< !Doctype > : dit au navigateur que la page utilise le langage XHTML version 1.0.
<html> </html>. C'est la balise principale qui englobera toute votre page (x)HTML. Comme vous
pouvez le voir, on ne la ferme qu'en dernier avec </html>, qui indique que votre page (x)HTML
s'arrête là. Il n'y a donc rien après le </html>.
<html> contient un attribut intéressant :
xml:lang : cet attribut sert à indiquer dans quelle langue est rédigée votre page web. Si vous
écrivez une page web en français, mettez "fr" comme je l'ai fait.
Si la page est en anglais, mettez "en"
<head> </head> :contient quelques informations d'en-tête pour votre page web :
Le titre de votre page web (<title> </title>). Ici, le titre est …………………….
<meta/>. Indique que vous allez taper des caractères spécifiques au français : é è à ê ...
<body> </body> : c'est le corps de votre site. Vous taperez 99% du contenu de votre page web à
l’intérieur. Pour le moment, il n'y a rien entre ces 2 balises.
- Taper le code précédent à l’aide de notepad++, enregistrer sous le nom : index.html puis tester le
résultat.
Le Texte
………………………………………………………………………………………………………………
………………………………………………………………………………………………………………
Le Lien
• Les liens internes à son site : normalement, votre site comportera plusieurs pages XHTML. Si
vous voulez faire un lien d'une page à une autre, vous ferez le plus souvent ce qu'on appelle des
liens relatifs. Un lien relatif est assez court, par exemple "fichiers/cible.html".
• Les liens vers d'autres sites : ce sont par exemple des liens vers "www.lp-prevert-
combs.org/.Ce lien est appelé lien absolu et, contrairement au lien relatif, il commence souvent
par "http://".
- Lien relatif : créer sur la page d’accueil un lien vers la deuxième et la troisième page de votre
site.
……………………………………………………………………………………………………………..
L’Image
Toutes les images diffusées sur Internet sont compressées. Cela veut dire que l'ordinateur fait
des calculs pour qu'elles soient moins lourdes et donc plus rapides à charger :jpeg, png, gif …
- Insérer une image sur votre page web 2 et 3. Vous utiliserez les images présentant les horaires
et le règlement d’examen du document de présentation
……………………………………………………………………………………………………………..
Votre page manque de style, elle n’est pas très esthétique et personnelle.
Pour cela, le CSS est toujours ajouté au XHTML.
CSS signifie : "Cascading Style Sheets" et peut être utilisé de 2 manières différentes :
Ce fichier se nomme :
indexstyle.css
• Il faudra rajouter une ligne dans votre fichier HTML entre les balises <head> et </head>
- On souhaite que le titre principal soit en rouge de taille 18px (pixels). Pour cela vous utiliserez
les propriétés CSS color et font-size.
L’attribut class permet de différencier des blocs de même nature afin de leur appliquer des
propriétés différentes
HTML
CSS
- Vérifier le rôle des propriétés CSS suivantes :
<div></div> (block) : balise très utile surtout pour créer le design de votre site. Vous allez voir
qu'un design, en fait, c'est une série de blocks qu'on dispose comme on veut.
Une balise de type "block" sur votre page web crée automatiquement un retour à la ligne avant et
après. Il suffit d'imaginer tout simplement un bloc.
Votre page web sera en fait constituée d'une série de blocks à la suite les uns des autres.
Ce fichier se nomme :
indexstyle.css
Menu Corps
(partie centrale)
……………………………………………………………………………………………………………
- Placer les paragraphes « La formation » et « Stage en entreprise » entre des balises div
On souhaite que le texte des paragraphes occupe la moitié de la page et que le texte soit justifié.
Pour cela vous utiliserez les propriétés CSS width et text-align.
…………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………
On souhaite que le texte du dernier paragraphe soit encadré d’une bordure correspondant à un
trait simple de largeur 2 pixels et de couleur noire.
Pour cela vous utiliserez la propriété CSS border.
• Le positionnement absolu : il permet de placer un block n'importe où sur la page (en haut à
gauche, en bas à droite, tout au centre etc.)
• Le positionnement fixe : il permet de placer un block n'importe où sur la page, mais cette
fois le block reste toujours visible, même si on descend plus bas dans la page.
a- positionnement absolu
Après il faut indiquer grâce aux 4 propriétés CSS où on veut placer le block :
On peut leur donner une valeur en pixels, comme "14px", ou bien une valeur en pourcentage,
comme "50%".
Télécom et réseaux
…………………….
La formation
Dans des ateliers d'électronique, ou des salles informatiques l’élève travaille sur des systèmes industriels réels ou adaptés à l’enseignement.
L’élève ………………………..
Stage en entreprise
Au cours de sa première année de formation (année de la seconde), l’élève doit effectuer un stage en entreprise d’une durée de semaines. En
première …………………
b- positionnement fixe
Le fonctionnement est exactement le même que pour le positionnement absolu, sauf que cette fois
le block reste fixe, même si on descend plus bas dans la page (avec les ascenseurs).
Il faut taper dans notre CSS:
Le position:fixed; est particulièrement utile pour faire un menu qui reste toujours visible comme
un menu positionné à gauche par exemple.
- Utiliser le positionnement absolu pour placer un menu sur votre page d’accueil contenant les
liens suivants :
Menu
Présentation
Horaires
Examen
Test
Une fois terminé, il est nécessaire de vérifier si votre page répond aux normes W3C.
- Pour cela il faut aller sur le site http://validator.w3.org/ pour vérifier le code XHTML.
- Ensuite si le test est correct aller sur le site http://jigsaw.w3.org/css-validator/ pour vérifier
le code CSS.
Il est indispensable de corriger toutes les erreurs pour un fonctionnement correct sur tous les
navigateurs Internet (IE, Firefox, Opera, …).
Vous devez vous aidez du site suivant pour réaliser le travail demandé
http://www.siteduzero.com/
Vous allez réaliser vos pages HTML en utilisant le logiciel Kompozer. Ce logiciel permet la
création et l’administration de page WEB en mode visuel ( WYSIWYG : « What you see is what
you get » ; « ce que vous voyez est ce que vous obtenez » )
http://extensions.geckozone.org/HandCoder/
http://extensions.geckozone.org/NsmConText/
http://info.sio2.be/kpz/1/1.php