Comment monter son propre site WEBLes outils (partie 2)

Présenté au ClubRIB

par Daniel Pelletier

le 10 mars 2011

But de la présentation

• Comment fonctionne un navigateur Web et HTTP.

• Comment fonctionne HTML.

• Outils pour faire un site Web

Comment s’affiche une page Web?

get

/logo.gif

enter

get "logo.g if"

/index.htm l

affiche

N avigateur W ebU tilisateur H ébergeur W eb R éperto iredu site W eb

C om m andes H TTP

logo.g if

index.htm l

Fichier HTML• Décrit comment est composée une page

Web

• 100% texte

• Contient des balises (« tags  ») qui indiquent comment formatter les sections de la page.

Format des balises HTML• Une étiquette encadrée entre un < et un >

(exemple: <table>)• Habituellement en couple qui encadre soit d’autres

balises, soit du texte: – balise de début (exemple <table>)

– balise de fin avec étiquette précédée par un /(exemple: </table> )

• Certaines sont célibataires: le / se trouve après l’étiquette (exemple: <br/>)

• Peuvent posséder un ou plusieurs attributs qui suivent le nom d’étiquette (exemple <table border="1">)

Types de balises• <p> : changement de paragraphe• <br>: retour à la ligne (« break »)• <strong> ou <b>: texte en gras• <em> ou <i>: texte en italique• <a>: hyperlien (« anchor »)• <img> : image• <div> : conteneur de section• <h1> <h2> <h3>… : titres de niveau• <table> <tr> <td>… : tableau• <ul> <li> : liste énumérative (« unordered »)• <ol> <li> : liste numérotée (« ordered »)

Exemple d’une page HTML

Pour en savoir plus sur le HTML

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

• http://mendeleiev.cyberscol.qc.ca/carrefour/formation/html/html1.html

• http://www.startyourdev.com/HTML/Balise-DIV.html

Outils pour faire un site Web• Aucune connaissance en informatique

requise.

• Requiert les outils:– Un éditeur HTML, pour composer les pages

Web sous forme de fichiers HTML.– Un programme de transfert FTP, qui permet de

transférer les fichiers vers l’hébergeur.

Editeurs HTML• KompoZer et Komodo Edit: gratuitiels de

grande qualité – WYSIWYG et/ou source HTML– Transfert FTP intégré– Aperçu des pages

• Notepad++: gratuitiel– éditeur de texte HTML seulement– Outils d’édition

Transfert FTP

• Peut se faire au moyen d’un navigateur, par exemple: ftp://pages.videotron.com/

• WinSCP: gratuitiel FTP très convivial avec interface Windows Explorer

Téléchargements

• KompoZer et son guide d’utilisation

• Komodo Edit

• WinSCP et son guide d’utilisation

• Notepad++