THEME 2 : LE WEB PARTIE 2 : Les langages HTML et CSS
I) Le fichier HTML
Pour écrire une page HTML, il ne suffit pas de taper le texte comme on le ferait dans un traitement de texte (l’accentuation et la mise en page ne sont pas respectées). Aussi, Il va falloir "décrire" la page HTML à l’aide de balises pour qu’elle soit interprétée correctement par le navigateur internet.
Comme on le voit , l’intégralité de la page html est balisée par la balise ouvrante <html> et la balise fermante
</html>
A l’intérieur de la page html on remarque deux parties :
• L’entête (non affiché à l’écran) : balisé par la balise ouvrante <head> et la balise fermante </head>
Permet d’utiliser les caractères accentués Titre de la page apparaissant dans l’onglet
• Le corps (affiché à l’écran) : balisé par la balise ouvrante <body> et la balise fermante </body>
Une page web écrite proprement est en fait constituée de deux fichiers :
• un fichier HTML qui va s’occuper du contenu brut de la page web.
• un fichier CSS qui va s’occuper de la décoration de la page web.
Quelques balises :
Structure correcte d'une page :
EXERCICE :
1) Télécharger le fichier : « ma premiere page web » avec notepad++
2) L'enregistrer dans vos document sous le nom : « ma premiere page web sans style » (avec l'extension html) 3) Dans body :
a) pour rajouter un titre, écrire :
<h1>Titre 1</h1>
b) pour rajouter un paragraphe, écrire :
<p>Bienvenue sur ma page sans style! </p>
c) pour rajouter un lien hypertexte d'un site extérieur, écire :
<a href="http://www.tesnieresbruno.jimdofree.com">Site tesnieres bruno</a>
Remarque : pour créer une liste de liens alignés, on écrit : <ul>...lien...</ul>
exemple :
<ul><a href="http://www.tesnieresbruno.jimdofree.com">Site tesnieres bruno</a></ul>
d) pour écrire un lien hypertexte d'une page du même site, écrire :
<a href="index.html">Page acueuil</a>
e) pour rajouter une photo, écrire :
<img src="einstein.gif" />
Remarque : il faut que le fichier de l'image soit dans le même dossier.
4) Aller dans le dossier qui contient votre fichier « ma premiere page web »et le lancer avec un navigateur.
5) Compléter le fichier pour obtenir la page suivante :
II) Le fichier CSS
1) Enregistrer le fichier précédent sous le nom « ma premiere page web avec du style » 2) Dans un nouveau fichier avec notepad++, taper les lignes suivantes:
body {
background-color: yellow;
font-family: Verdana, sans-serif;
font-size: 100%;
} h1 {
font-size: 200%;
color: pink;
text-align: center;
} h2 {
font-size: 150%;
color: red;
padding-left: 15px;
} ul {
font-size: 70%;
padding-left: 150px }
3) L'enregistrer avec le nom « style » et avec l'extension .css dans le même dossier que votre fichier « ma premiere page web avec du style »
4) Rajouter dans le fichier « ma premiere page web avec du style » et dans la partie <head>, la ligne suivante :
<link href="style.css" rel="stylesheet"/>
5) Lancer le fichier « ma premiere page web avec du style »
