Formation Vidéo Tutoriel au HTML, CSS et CMS - initiation

Dans cette formation vidéo tutoriel HTML, CSS, serveur web et CMS, vous découvrirez les bases des langages et technologies qui constituent la majorité des sites Internet d’aujourd’hui. Le formateur vous propose tout d’abord une brève initiation au langage HTML. Deux chapitres sont ensuite consacrés à la compréhension et à l’utilisation des styles CSS au sein de Dreamweaver. Dans les 2 derniers chapitres, vous découvrirez le principe de fonctionnement d’un serveur web et comment installer un CMS, puis le modifier avec Dreamweaver. Les leçons de ce Tutoriel HTML, CSS, CMS : Premiers Contacts sont extraites des Tutoriels Dreamweaver CS4 et Dreamweaver CS5…

Initiation au HTML

Sous-titre

Premier fichier - Premières balises :

Je vous propose de suivre cette initiation très courte au langage HTML qui vous permettra de mieux comprendre ce langage et d'acquérir des notions importantes telle que la signification de certains termes, nous verrons ce qu'est une balise, ce qu'est un attribut, nous verrons tous ces termes.
Nous créerons notre premier fichier puis nous verrons à quoi ressemble la structure d'un document HTML, et nous verrons comment dreamweaver nous aide à travailler le code HTML à l'aide de l'autocomplétion et d'une aide documentaire très complète.
Débarrassons-nous avant tout de deux idées fausses.
Souvent les personnes qui s'initient à la création de site internet pensent qu'on a besoin d'un logiciel spécifique pour créer des sites internet.
En l'occurrence par exemple dreamweaver.
Eh bien c'est faut.
Pour créer un site internet, on a besoin de presque rien : un navigateur de fichier, et un logiciel tel que le bloc note tout à fait basique.
A quoi donc sert dreamweaver ?
Eh bien, il nous facilite la création de documents HTML et la gestion du site internet.
La seconde idée fausse serait qu'un langage HTML serait un langage de programmation trop compliqué pour quelqu'un qui n'est pas formé à la programmation.
C'est faux, le langage HTML n'est pas un langage de programmation à proprement parler.
Il s'agit d'un langage qui permet de structurer de façon sémantique.
A l'aide de délimiteurs nommés balises nommées tags.
Cela signifie que si vous savez lire et écrire à l'aide d'un clavier, vous pouvez taper du HTML.
Nous allons donc créer notre premier fichier HTML, pour cela, en cliquant à droite, je vais sélectionner nouveau, puis document texte, mais cela importe peu puisque je vais changer l'extension.
Je vais nommer mon fichier index.html.
Lorsque j'appuie sur entrée, une nouvelle fenêtre me demande si je veux vraiment modifier l'extension et je clique sur oui.
Mon premier document HTML est créé.
Lorsque je double clique, je peux déjà le lancer dans mon navigateur.
Alors bien entendu, le document est entièrement vide, et je vais maintenant éditer ce fichier HTML à l'aide du logiciel le plus basique de mon système d'exploitation, le bloc note.
Nous allons maintenant écrire notre première balise HTML.
On écrit une balise avec une syntaxe spécifique et notamment à l'aide de deux signes, le signe inférieur et le signe supérieur.
Entre ces deux signes, on écrit le nom de la balise.
Les balises ont des noms différents, si je souhaite par exemple un paragraphe, je dois nommer ma balise p.
Après cette balise, je vais donc écrire mon premier paragraphe, et puisque nous avons dit que les balises sont des délimiteurs, nous allons ajouter après ce paragraphe une balise dite fermante, il s'agit de la même que la balise ouvrante, mais en plus du nom de la balise, on ajoute une barre oblique ou slash.
On a donc un paragraphe qui est délimité par deux balises : une balise ouvrante et une balise fermante.
Toutes les balises que nous ajouterons ont la même syntaxe entre les signes supérieurs et inférieurs on nomme la balise.
Il existe de nombreuses balises HTML, mais les plus courantes sont au nombre d'une trentaine et elles sont faciles à mémoriser.
Je vais enregistrer ce document, et je vais afficher à nouveau mon navigateur et actualiser ma page.
Comme vous le voyez, mon premier paragraphe a bien été affiché dans le navigateur.
En plus de ce premier paragraphe, je peux également ajouter d'autres balises, par exemple au dessus, une balise de titre nommé h1.
H pour header ou en tête.
1, car c'est un titre de niveau 1 ou titre principal.
J'ajoute donc mon premier titre et je ferme ma balise.
On remarque donc la même syntaxe : une balise ouvrante, une balise fermante nommée de la même manière avec une barre oblique juste avant le nom de la balise.
J'enregistre et je lance mon navigateur et j'actualise la page.
Le titre est apparu.
Alors, je peux continuer et ajouter d'autres balises, par exemple copier ce bloc en allant dans édition et copier.
Je retourne à la ligne et j'ajoute le bloc copier en le collant, et je vais modifier cette balise h1 et mettre un 2 à la place du 1.
C'est donc maintenant un titre ou header de second niveau, j'enregistre et je relance la page dans le navigateur.
Lorsque je le remets à jour, mon titre de second niveau apparaît.
On comprend donc qu'à partir du choix de la balise, le texte délimité prend un sens différent, titre de niveau 1, sous titre, paragraphe.
Si par exemple, je remplace la balise de paragraphe et que j'insère un titre de niveau 3 à la place, je change donc le nom de la balise, j'enregistre, lorsque je relance mon navigateur et que j'actualise ma page, eh bien le texte ici n'est plus considéré comme un texte de paragraphe, il s'agit désormais d'un sous-titre.
C'est une notion très importante.
Les balises ont un sens, il faut utiliser les bonnes balises pour structurer le document de façon sémantique.
Maintenant que nous avons créé notre premier document HTML et notre première balise toujours sans utiliser dreamweaver, nous allons dans la vidéo suivante découvrir comment est structuré un fichier HTML.

Les autres vidéos gratuites de la formation HTML – CSS – CMS : Premiers contacts

(cliquez sur les titres en bleu pour visualiser les vidéos, la qualité des vidéos gratuites est moins bonne que celle de la version complete qui elle est sur CD/DVD, cela vient du fait de la compression des fichiers pour un affichage plus rapide sur votre écran)

• Structure d'un document HTML
• Balises auto-fermantes et attributs
• Créer et éditer un document

Les autres vidéos contenues dans la formation complète sur le HTML, CSS et CMS : Premiers contacts que vous pouvez commander en cliquant ci-dessous: