Vous êtes sur la page 1sur 7

TIC Prsentation Web

ACT1 Date : 01/10/2013

Quelques gnralits
Un fichier HTML n'est pas compil (ce n'est pas un programme) Un fichier HTML est un fichier texte simple, parfaitement lisible, respectant un ensemble de convention d'criture Un fichier HTML peut tre crit l'aide de n'importe quel diteur de texte simple (des diteurs plus volus existent galement) Lorsque vous consultez un site web, les fichiers HTML (extension .htm ou .html) sont envoys votre navigateur et le code html est interprt sur VOTRE machine par VOTRE navigateur Il n'est pas indispensable de possder un serveur HTTP pour crire des pages. Vous pouvez utiliser la fonction Ouvrir de votre navigateur pour consulter une page HTML enregistre sur votre ordinateur (ou une page que vous avez vous-mme cre) Les documents dans lesquels on peut naviguer laide de liens et qui sont structurs par des balises sappellent des documents hypertextes. La lecture nest plus continue comme dans un livre car on peut accder un autre document ou une autre partie du mme document en cliquant sur un hyperlien ou lien. Cest le cas des pages internet. Cest pour cela que lon appelle le langage utilis pour crire les pages internet (html) : lHyper Text Markup Language (Markup voulant dire balise en anglais). Le protocole utilis pour changer ces pages html sur Internet est lHyperText Transfert Protocol en abrg cela donne http.

Premires notions et premire page


Crez un dossier ACT1_TPHTML dans votre dossier sur \\servertechno\College\Technologie\9A\. Dans le dossier ACT1_TPHTML, crez un sous-dossier WEB dans lequel vous enregistrerez vos fichiers. Ouvrez un diteur de texte quelconque et crez un nouveau fichier baptis index.htm. Le texte que vous crirez dans ce fichier est le code html qui sera interprt par un navigateur pour visualiser le rsultat. Ce code est constitu de texte et dindications de mise en page. Ces indications sont appeles balises.

Les balises :
Une balise html (ou tag en anglais) respecte la syntaxe suivante : <balise> Une balise peut tre seule (balise orpheline), et son effet sapplique lendroit o elle se trouve, comme par exemple <br/> qui sert sauter une ligne, ou en couple balise ouvrante <balise> balise fermante </balise> pour indiquer sur quelle partie de votre code elle sapplique : son effet touche tout ce qui se trouve entre la balise ouvrante et la balise fermante. Une balise peut tre associe des attributs qui vont prciser son comportement, sa mise en forme. <balise attribut="valeur">
u - 01/10/2013 - Document1 - page 1/7

TIC Prsentation Web


Outil ddition :

ACT1 Date : 01/10/2013

Nous allons utiliser le Notepad++, mme si le Notepad intgr Windows pourrait suffire. Lavantage de np++ est quil permet aisment de dfinir le codage utilis et didentifier le code html ou css. Dmarrer le logiciel np++. Slectionner menu>Langage>H>HTML Cest ce qui permet lidentification du code HTML. Puis Encodage>UTF-8 (sans BOM) Cest ce qui va valider le codage des caractres

Un fichier minimum :
Pour dbuter, recopier les lignes suivantes dans votre fichier index.htm : <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> Ma premire page web !! </title> </head> <body> </body> </html> A prsent, pour visualiser le rsultat, choisissez menu > Excuter > ouvir dans firefox /chrome /IE Quobservez-vous ?

Ajoutez maintenant le texte Bonjour et bienvenue en ISN dans la section body et rechargez votre page dans le navigateur. Quobservez-vous lcran ?

u - 01/10/2013 - Document1 -

- page 2/7

TIC Prsentation Web


Quelques premires balises simples :

ACT1 Date : 01/10/2013

Dans la section body de votre fichier .htm, testez les effets des balises suivantes et indiquez pour chacune delle leur rle : <strong> </strong> <em> </em> <u> </u> <br/> <h1> </h1>

(Essayez ensuite avec les codes de h1 h5) Nous verrons plus loin comment jouer avec des mises en formes plus originales et globales. Listes Il existe deux faons de crer une liste ditems en html : les listes ordonnes ( numrotes ) et les listes non ordonnes. La structure dune liste ordonne est la suivante : <OL> <Li> item1 </Li> <Li>item2 </Li> <Li>item3 </Li> </OL> et non ordonne : <UL> <Li>item1 </Li> <Li>item2 </Li> <Li>item3 </Li> </UL> Testez-les dans votre fichier .htm. Quelle est la diffrence entre les deux ?

u - 01/10/2013 - Document1 -

- page 3/7

TIC Prsentation Web


Images :

ACT1 Date : 01/10/2013

Nous allons voir maintenant comment insrer une image dans une page web. Commencez par crer un sousdossier \images dans votre rpertoire \WEB. Puis chercher, sur le web, une image que vous sauvegarderez dans ce dossier. La balise pour insrer une image est IMG. Elle sutilise selon le modle suivant ( adapter votre nom de fichier image) : <IMG SRC= "images/monimage.jpg">

La balise image admet entre autre les proprits suivantes : WIDTH= Pixels ou pourcentages . HEIGHT= Pixels ou pourcentages . Essayer chacun dentre eux pour en comprendre les effets sur votre image et notez les ci-dessus. La syntaxe est la suivante : <IMG SRC="nomimage.jpg" width="100" height="200"/>

div : division, permet de structurer sa page en segments


<div align="center" style="border:1px solid red"> Voici un texte centre et encadr! </div> ALIGN= Top Bottom Middle Left Right BORDER= Pixels

. . . . . .

Rq : Il est prfrable dutiliser CSS pour modifier laspect en dfinisaant un identifiant de style. (Voir fin du TD)

u - 01/10/2013 - Document1 -

- page 4/7

TIC Prsentation Web


Liens :
Liens externes : <A HREF= "url"> Ceci est un lien </A> Exemple : ajoutez dans votre fichier la ligne suivante: <a href=http://www.fr.lyceechicago.org/>mon lyce</a> Sauvegardez et testez. Que constatez-vous ?

ACT1 Date : 01/10/2013

Liens internes : Dans un document de trs grande taille, on peut souhaiter placer quelques positions de rfrence vers lesquelles ensuite crer des liens. Ces liens guident vers un autre endroit du mme document et sont qualifis de liens internes. Pour placer une position de rfrence dans le texte et lui donner un nom : <A NAME= "TOP"> </A> Pour se rendre une position de rfrence dans le texte, on rutilise son nom, cest ce que lon appelle une ancre : <A HREF= "#TOP" > Retour vers la position de rfrence </A> Pour crer une ancre, il faut utiliser lattribut id : <p id= "TOP" > Vous tes en haut de la page </p> Exercices : Crez une page web contenant un texte trs long (quelconque, mais plusieurs page-cran de longueur), avec tout en bas de votre document, un lien interne vers le dbut du document, pour remonter plus vite. Crez une nouvelle page html ma deuxime page web ! et insrer un lien qui permet de passer de la premire page la deuxime et vice versa. Notez les lignes de commande que vous utilisez.

u - 01/10/2013 - Document1 -

- page 5/7

TIC Prsentation Web

ACT1 Date : 01/10/2013

La mise en forme globalise : CSS


Plus haut nous avons vu comment mettre en forme un morceau de texte ou une image. Position dans la page, taille, couleur, Le CSS (Cascading Style Sheets) permet de definir la mise en fo rme des styles existants (<p>, <h1>, ) mais galement de crer des formats personnels, grce aux attributs id et class notamment. Premire tape : Il faut appeler la feuille de style CSS. Pour cela, ajouter cette ligne dans le head de votre page web. <link rel="stylesheet" href="style.css" /> 2me tape : Crer le fichier CSS. Toujours dans np++, crer un nouveau fichier et choisir encodage UTF-8 et langage CSS. Sauvegarder le fichier dans le mme rpertoire que index.htm, avec le nom style.css.

Changer larrire-plan
body { background-color: black; font-family: Verdana, Arial, Helvetica, sans-serif; color: white; } La ligne background-color: black; dfinit le fond de la page en noir, voir plus loin quelques couleurs possibles. La ligne font-family: Verdana, Arial, Helvetica, sans-serif; dfinit les polices (fonts) utiliser en commenant par la premire et ainsi de suite si les polices prcdentes nexistent pas dans le systme Windows ou Macintosh qui lit la page. La ligne color: white; dfinit la couleur de la police de caractre (font) utilise par dfaut sur la page. Les couleurs peuvent tre dfinies en toutes lettres : black, gray, silver, white, red, lime (citron vert), blue, yellow, aqua, fuchsia, marron, orange, olive, purple, green, navy, teal (sarcelle, cest un canard)
On peut galement utiliser le code hexadcimal de la couleur : color : FFCC33 ou encore le code RGB color : (255,204,85) Palette de couleur en ligne : http://html-color-codes.info/Codes-couleur-HTML/

Il existe de nombreuse balise pour le CSS, on peut les appliquer de manire globale comme ci-dessus la balise Body. Mais cela devient vraiment intressant de dfinir des styles selon ce que lon souhaite mettre en page.

u - 01/10/2013 - Document1 -

- page 6/7

TIC Prsentation Web


Exercice :

ACT1 Date : 01/10/2013

En utilisant le fichier CSS, modifier le style <h1> pour quil saffiche en rouge sur fond orange et en gras.

Crer une sous-classe du paragraphe <p> appele dfinition qui sera mise en forme bleu marine, Courrier, Verdana ou sans-serif et en italic.

Conclusion
Il existe bien dautres balises, en particulier avec lapparition de HTML 5. Ce TP nest quune introduction et si vous souhaitez aller plus loin, vous pouvez utiliser les documents annexes. Le tutorial du site du zro est vraiment trs bien fait et le TP vous permet de structurer la cration dune page WEB en suivant une procdure rigoureuse.

Sources - bibliographie
Formation des professeur STI2D ac-lyon AP- HTML Lyce Branly Lyon Le site du Zro : http://www.siteduzero.com/informatique/tutoriels/apprenez-a-creer-votre-site-web-avechtml5-et-css3 Livre_Spcialit_ISN_en_Terminale_S Dowek et al. d. Eyrolles Fiches HTML & CSS - d. Eyrolles http://www.w3schools.com

u - 01/10/2013 - Document1 -

- page 7/7

Vous aimerez peut-être aussi