Je donne des initiations à la création de page WEB (HTML) au club informatique de Montélimar la plupart des samedi de 17h à 18h.
Je mettrai une partie de cours en ligne
Logiciels
- Editeur de page : PSPAD
- Site de l’éditeur : http://www.pspad.com/fr/
- Tranfert de fichier (FTP) : FileZilla
- Site de l’éditeur : http://filezilla-project.org/
Vous pouvez télécharger ces logiciels dans la rubrique « Documents joints » ci-dessous.
Les dates de séances sont publiés sur le site du club http://www.cim26.net à l’aide de l’agenda Google
Vous pouvez le consulter à cette adresse : http://www.google.com/calendar/embed?src=club.cim%40gmail.com
RESUME : Le cours complet est disponible au CIM
Introtuction
Le but du HTML est de publier des informations compatibles avec l’ensemble des systèmes informatiques.
Le HTML (HyperText Markup Language) est le langage des pages Web. Ce n’est pas un langage de programmation, mais un langage pour structurer les informations. Le HTML sert à définir une structure d’un document qui permet à un navigateur de rendre visible, il permet d’inclure du texte, des fichiers multimédia, des formulaires, … il est appelé langage à balises. Exemple de navigateur :
- Internet Explorer
- Mozilla Firefox
- Opera
- Safari On note que le langage HTML était très simple et les possibilités d’enrichissement graphique assez faibles. Mais aujourd’hui il offre de plus en plus de possibilité.
Il faut spécifier qu’un document HTML n’est rien de plus qu’un fichier texte ; Le but du HTML étant l’interopérabilité, il existe des normes rédigées par le World Wide Web Consortium (W3C), qui regroupe des acteurs majeurs du Web.
Quelques termes :
- Une URL (Uniform Resource Locator) est une chaîne de caractères utilisée pour adresser les ressources du World Wide Web : document HTML, image, son, boîte aux lettres électronique, etc.
- HTTP : “Hypertext Transfer Protocol” le serveur précise au navigateur le type de fichier. Le navigateur représente le contenu du fichier si il le connaît (HTML) sinon il invite l’utilisateur à télécharger le fichier ou de l’ourir directement avec une application locale.
Principe d’un site internet
Un site internet est en fait un ensemble de pages (de fichiers .html) reliés ensemble par des liens hypertextes.
Il s’agit d’un dossier qui contient des fichiers et d’autres sous-dossiers, installé sur un ordinateur (ou serveur), qui est en permanence connecté sur Internet, chez un hébergeur.
Une page web HTML
Une page HTML c’est le contenu et sa mise en forme
- Contenu : page HTML avec vos éléments (textes, images, ..)
- Mise en forme : CSS feuilles de style en cascade (Cascading Style Sheets) est utilisé pour décrire la présentation d’un document structuré écrit en HTML ou en XML.
Plus de détails sur les -> Feuilles_de_style_en_cascade
Principe du HTML
Le HTML fonctionne sur le principe des balises ouvrantes et fermantes. Une balise ("tag" en anglais) est un mot (ou un ensemble de caractères) qui sera entouré d’un signe inférieur "<" et d’un signe supérieur ">". Les balises fonctionnent la plupart du temps par paire, avec sa balise d’ouverture <balise> et sa balise de fermeture </balise>. Le "/" sert donc à fermer une instruction.
Exemple : <html> et </html>
Le squelette de la page
- Le DTD
Toute page HTML doit commencer par la déclaration du Document Type Definition (DTD), qui précise au navigateur quelle version de HTML vous utilisez.
- HTML 4 strict, qui respecte parfaitement la distinction fond (HTML) / forme (CSS)
- HTML 4 transitionnel, qui supporte encore des attributs ou éléments obsolètes
- Il existe d’autres DTD, par exemple celui pour les frames (cadres), mais c’est très déconseillé.
- La Structure
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
Description du document |
<html> |
Début du document HTML |
<head> |
Ouverture de la zone d’entête |
<title> Exemple de HTML </title> |
Titre de la page |
<meta name="description" content="Création de sites">
<meta name="keywords" content="site, initiation"> |
Meta pour faciliter l’indexation dans les moteurs de recherche |
</head> |
Fermeture de la zone d’entête |
<body> |
Ouverture du corps du document |
| Mon site web | Contenu du site, le texte et les images |
</body> |
Fin du corps du document |
</html> |
Fin du document HTML |
RSS 2.0