Cours HTML pour débutant

Formation HTML pour débutant, tutoriel & guide de travaux pratiques en pdf.

Structure d’un site Web

Un site web se décompose en 2 parties bien distinctes : le contenu et le contenant Le contenu : les messages à faire passer, l’information, l’objectif du site Le contenant : comment amener l’information, faire passer les messages
Dans cet exemple, le contenant est en vert et le contenu est en orange. Le cours est organisé en 3 parties séparées sur 3 pages distinctes.
Le langage HTML permet de travailler sur la structure des informations (le choix des pages, des liens entre elles, utilisation des cadres, des menus) et sur leur mise en page (les couleurs, les polices,…).

Le logiciel NVU http://www.nvu.com/

NVU est un éditeur HTML graphique, c’est-à-dire qu’il permet de voir ce que l’on va obtenir sans se soucier du code HTML derrière (même s’il laisse la possibilité de le voir). NVU se présente donc comme un éditeur de texte de type Word.
La zone principale de la fenêtre est occupée par la page en cours d’édition. Plusieurs vues sont possibles (ces vues sont accessibles via les onglets au bas de la page) : • La vue de base du mode édition • La vue avec les balises html • La vue du code html • La vue « résultat » (ce que l’on doit obtenir à la fin) La barre de menu située en haut de la fenêtre comprend principalement deux zones, que nous appellerons « zone texte » et « zone html ». La première regroupe les fonctionnalités de mise en forme de texte, la seconde les fonctionnalités propre au HTML, comme les tableaux, les liens, les images, les formulaires. Grâce à ces deux zones, il sera très facile d’incorporer un nouvel élément dans la page.
Bien que NVU soit très pratique, j’attire votre attention sur le fait que bien connaître le code HTML est essentiel. En effet, il arrivera que NVU ne donne exactement pas le résultat attendu, il faudra alors se plonger dans le code pour modifier certaines valeurs à la main.
Mettre en ligne avec le client FTP « FileZilla » http://sourceforge.net/projects/filezilla/

1. Pré-requis
Avant de pouvoir mettre en ligne cotre site au moyen d’un client FTP, vous devez savoir où le mettre en ligne. Pour cela vous devrez trouver un hébergeur de site internet. Il en existe de nombreux comme iFrance (www.ifrance.com) ou ClaraNet (www.claranet.fr/), mais votre fournisseur d’accès (Orange, Free, Noos, Club-Internet …) peut aussi vous proposer d’héberger vos pages. Il est impossible de comparer toutes les offres ici : les coûts sont très variés, de même que la capacité de stockage (argument essentiel si vous mettez beaucoup de photos en ligne). Un bref coup d’œil sur Google permet de se faire une opinion et de trouver des comparatifs entre les solutions (www.linternaute.com/internetpratique/hebergeurs/comphebergeurs.shtml).
Lorsque vous aurez créé un compte chez un hébergeur, vous disposerez : • D’un nom d’utilisateur (login) • D’un mot de passe
• D’une adresse de connexion à un serveur FTP
Votre site internet sera accessible à une adresse que vous aura précisé votre hébergeur. Vous pourrez également acheter un nom de domaine (disponible, voire obligatoire, suivant les offres d’hébergement), par exemple en vous rendant sur www.domaine.fr/.

2. mettre le premier travail en ligne
FilleZilla est très simple d’utilisation. Les quatre champs à remplir sont situés en haut de la fenêtre :
• Adresse (exemple ftpperso.free.fr)
• Utilisateur (mon_nom)
• Mot de passe (mon_mot_de_passe)
• Port (généralement : 21) Une fois ces 4 champs remplis, cliquez sur le bouton Connexion rapide. Si vous avez bien tout rempli, vous voyez apparaître dans la zone « Site Distant » le contenu de votre site Internet. Ce contenu est gérable exactement comme le contenu de votre disque dur : suppression, déplacement, re-nommage …