Bien débuter avec HTML E-Book

Rémy Lentzner

• Herausgeber: Remylent
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Französisch
• Veröffentlichungsjahr: 2020

Seitenzahl: 94

Beschreibung

Bienvenue dans la programmation HTML. Ce livre s’adresse aux personnes qui souhaitent découvrir ce langage afin de créer des pages Internet. HTML ou HyperText Markup Language possède une structure particulière qui utilise des balises comme < p >,< a >,< div > ou < form >. Vous apprendrez à écrire ces marques et à les organiser de manière progressive en réalisant des ateliers d’écriture. Dans cet ouvrage, vous étudierez aussi les styles qui sont fondamentaux pour la présentation des textes, des titres, des images, des cadres, des tableaux ou des listes. Les pages Web proposent souvent des formulaires qui contiennent des zones à remplir. Les interactions avec l’internaute sont contrôlées à l’aide du langage JavaScript complètement intégré à HTML. Des exemples de fonctions JavaScript vous aideront à mieux comprendre cette interactivité au sein d’une page Internet.

À PROPOS DE L'AUTEUR

Rémy LENTZNER est formateur en informatique depuis 1985. Spécialisé dans la maîtrise des outils bureautiques, il accompagne les entreprises dans la formation professionnelle de leurs salariés. Autodidacte, il a une quinzaine d'ouvrages informatiques à son actif.

Leseprobe

REMY LENTZNER

Bien débuter avec HTML

EDITIONS REMYLENT, Paris, 1ère édition, 2020

R.C.S. 399 397 892 Paris

25 rue de la Tour d’Auvergne - 75009 Paris

[email protected]

www.REMYLENT.FR

ISBN EPUB : 978-2-490275-32-8

Le Code de la propriété intellectuelle interdit les copies ou reproductions destinées à une utilisation collective. Toute représentation ou reproduction intégrale ou partielle faite par quelque procédé que ce soit, sans le consentement de l’auteur ou de ses ayants droit ou ayants cause, est illicite et constitue une contrefaçon, aux termes des articles L.335-2 et suivants du Code de la propriété intellectuelle.

Couverture : Anna Lentzner - www.lheuredelasieste.fr

Un très grand merci à Isabelle et Raymond pour la relecture

Un immense merci à Anna pour la couverture

INTRODUCTION

Ce livre s'adresse aux débutants qui souhaitent apprendre à réaliser des pages Web en écrivant du code HTML de la manière la plus efficace. Lorsque vous naviguez sur des pages Internet, les informations sont disposées d'une certaine façon en fonction du sujet que vous avez choisi.

Par exemple, lorsque vous consultez votre compte bancaire, l'accès y est réglementé par un nom d'utilisateur et un mot de passe. Au moment où vous cliquez sur un bouton pour valider ces deux informations, un mécanisme les transfère vers un serveur qui testera les bonnes coordonnées de votre compte. Vous pourrez ensuite voir vos écritures bancaires. Le dispositif qui fait apparaître la page Internet fait appel à un langage très spécifique appelé HTML ou Hyper Text Markup Language ou encore Langage hypertexte à balises. Il s'agit d'un langage qui a évolué en même temps que les navigateurs Internet. Aujourd'hui, la dernière version est HTML5. Lorsque des tests sont réalisés sur une page, par exemple pour vérifier que les informations sont bien remplies, on utilise le langage JavaScript qui est totalement intégré à HTML.

HTML est un langage structuré avec des règles définies par un consortium appelé World Wide Webou W3C. C'est l'organisation créée pour fixer des normes dans Internet. Pour qu'une page Web puisse montrer une image, il faudra une balise de type image. Les balises indiquent au navigateur comment afficher le document.

Lorsque vous consultez une page Web, vous ne voyez pas les balises telles quelles. C'est le navigateur qui les interprète et qui affiche le résultat.

En lisant ce livre, vous découvrirez progressivement les balises qui permettent de structurer le contenu d'une page Web. Vous apprendrez à séparer la présentation des données grâce au mécanisme des styles. Ce dispositif de séparation est très important et de nombreux exercices pratiques vous permettront de vous entraîner.

Bien débuter avec HTML, c'est d'abord comprendre l'organisation du langage mais aussi réaliser des exercices pratiques afin de mettre la main dans le moteur. HTML est un langage parfaitement accessible, à la seule condition d'y consacrer régulièrement un peu de temps.

Ce livre vous propose cinq chapitres :

Le chapitre 1 porte sur la structure du langage avec les balises, les styles et la manière d'écrire le code.

Le chapitre 2 s'intéresse aux styles qui sont fondamentaux pour formater le texte dans la page et séparer la présentation des données.

Le chapitre 3 expose les techniques de création de formulaires, la manière de présenter les champs de saisie grâce aux styles et les différentes façons de valider le formulaire. Vous pourrez découvrir le langage JavaScript qui facilite les contrôles.

Le chapitre 4 détaille l'utilisation des événements qui peuvent se capturer au moment de la saisie des informations, dans un objet HTML de la page Web.

Le chapitre 5 termine ce livre par quelques exemples de mise en page avec des exemples de menus.

J’espère que la lecture de ce livre vous intéressera et vous permettra de mieux comprendre la structure et le fonctionnement des pages HTML.

Vous pouvez me contacter à [email protected] si vous avez des remarques sur ce livre ou bien des questions. Je ne manquerai pas de vous répondre.

Bonne lecture.

L’auteur

Table des matières

Chapitre 1 Les bases du langage HTML

1.1 Une structure particulière

1.1.1 Ecrire et tester son premier code HTML

1.1.2 Que se passe-t-il du côté du serveur ?

1.1.3 Des balises dans un arbre

1.1.4 Où trouver des informations sur toutes les balises ?

1.1.5 Quelques exemples sans formatage

1.1.6 Les tableaux

1.1.7 Les listes avec des puces

1.1.8 Les listes avec des nombres

1.1.9 Les listes imbriquées

1.1.10 Insérer une image

1.1.11 Insérer un lien hypertexte sur une image

1.1.12 Afficher la cible d'un lien dans une nouvelle fenêtre

1.1.13 Définir un dossier par défaut avec la balise <base>

1.2 Les cadres

1.2.1 Les attributs les plus courants

1.2.2 Ateliers : construction de cadres

Atelier 1 : Une image dans un cadre

Atelier 2 : Agrandir le cadre pour voir l'image

Atelier 3 : Une bordure noire et un alignement pour un cadre

Atelier 4 : Trois cadres ensemble dans une page

1.3 Voir le code des pages HTML existantes

1.3.1 Les utilitaires de développement de Google Chrome

1.2.2 Les utilitaires de développement de Safari

1.2.3 L'éditeur Bracket pour la gestion du HTML et du CSS

Chapitre 2 Les feuilles de style CSS

2.1 Styles et feuilles de style en cascade

2.2 Atelier d'écriture

2.2.1 Une page HTML sans feuille de style

2.2.2 Une page HTML avec les styles regroupés en local

2.2.3 Une page HTML liée à une feuille de style CSS externe

2.3 Les attributs de style

2.3.1 Les attributs de couleur

2.3.2 Quelques attributs

2.3.3 Un exemple d'application

2.3.4 Les erreurs de programmation à ne pas faire

2.4 La cascade et la hiérarchie des styles

2.4.1 La cascade

2.4.2 L'héritage

2.4.3 Réalisation d'un menu

Chapitre 3 Les formulaires

3.1 A quoi sert un formulaire ?

3.2 Le contenu d'un formulaire HTML

3.2.1 Les balises qui créent des éléments

3.2.2 La balise <input>

3.2.3 Atelier d'écriture avec la balise input

Atelier 1 : Un formulaire le plus simple possible

Atelier 2 : Un formulaire avec une fonction JavaScript

Atelier 3 : Un formulaire avec des styles

Atelier 4 : Calculer son IMC

Atelier 5 : Un formulaire qui calcule votre âge

Atelier 6 : Travail avec les cases à cocher

Atelier 7 : Des groupes de boutons radio

3.2.4 La balise <select> pour choisir dans une liste

3.3 Un formulaire client-serveur

3.3.1 Les protocoles mailto et post

3.3.2 Récupérer les champs vers mailto avec JavaScript

3.3.3 Action et protocole post

3.3.4 Le protocole de communication get

Chapitre 4 Les événements

4.1 Qu'est-ce qu'un événement ?

4.1.1 Les événements de type clavier

4.1.2 Les événements de type souris

4.1.3 L'écouteur passif addEventListener

4.1.4 Les événements appliqués aux éléments

4.1.5 Les événements appliqués à la balise body

4.2 Capture des événements onload et onfocus

Chapitre 5 Mise en page

5.1 La structure d'une page web

5.1.1 Une page, deux colonnes, un en-tête et un pied de page

5.1.2 Une page web avec des menus

Atelier 1 : Un menu horizontal

Atelier 2 : Encadrement d'options

Atelier 3 : Un menu vertical

Atelier 4 : Un menu et des images

5.1.3 Un menu avec une liste

5.1.4 Des listes imbriquées

5.2 Des listes hiérarchisées

Lexique

Chapitre 1 Les bases du langage HTML

L'apprentissage de n'importe quel langage passe par la connaissance des règles et de la syntaxe. HTML fonctionne par blocs définis par des étiquettes emboîtées qui forment des éléments. Ces blocs définissent la structure et la présentation de la page Internet.

1.1 Une structure particulière

Une page Web est un document HTML structuré, comme le montre la figure 1.1. On voit que les balises sont toutes entourées par des signes < et >. Par exemple, l'élément qui correspond au corps du texte commence par <body> et se termine par </body>.

Figure 1.1 : Emboîtement des balises

Ce marquage par balise est nécessaire parce que les ordinateurs ignorent si un texte sera un titre, un en-tête, un paragraphe ou un résumé.

Sans codage, le navigateur Internet ne sait pas afficher le texte pour qu'il ressemble au document réel souhaité.

Le langage HTML fait une distinction très importante : la structure des éléments et la présentation. Lorsque vous définissez un texte qui doit être considéré comme un titre, avec les balises <title> et</title>, vous ne dites rien sur sa présentation. Vous n'indiquez pas si le titre sera dans une police spécifique avec une taille donnée. Ces caractéristiques de présentation sont définies ailleurs dans une autre structure appelée les styles et définie entre les balises <style> et </style>. On parle souvent de feuilles de style quand les styles sont intégrés dans un fichier externe.

Quand vous naviguez sur Internet, vous tapez une adresse dans le navigateur pour accéder à une page précise. Par exemple, si vous souhaitez consulter des horaires de train en France, vous accédez au portail de la SNCF. Cette page Web a été créée par des développeurs et est stockée sur un serveur accessible par tous. La page possède donc des informations (des données) et une présentation. Par exemple, il peut y avoir un menu avec différents choix, des publicités, des boutons sur lesquels, on peut cliquer pour rechercher telle ou telle information. Au moment de la création de la page Web, les données ont été séparées de la présentation parce qu'il est plus facile de faire des mises à jour par la suite.

Cette distinction entre structure et présentation est importante, parce qu'elle permet aussi la lecture du code HTML dans un environnement à plusieurs plates-formes. Par exemple, une page Web peut être lue sur un Mac, un PC, un système Unix, un système Linux ou d'autres encore. De même, en ce qui concerne les navigateurs, vous pouvez travailler avec Google Chrome, Safari, Opéra, Internet Explorer, Firefox, etc. Les informations contenues sur les pages Web doivent pouvoir être affichées quel que soit le support, ce qui n'était pas toujours le cas dans le passé. Les pages s'affichaient mal d'un navigateur à l'autre, la présentation n'était pas parfaite, les pages ne se cadraient pas automatiquement en fonction de la largeur de l'écran.

Grâce à l'amélioration du langage HTML et des composants externes qui peuvent s'y rajouter, ces problèmes techniques sont définitivement oubliés et aujourd'hui, les pages Internet sont présentes sur les ordinateurs mais aussi sur les tablettes, les iphones et les smartphones. Le code de la présentation des données est mieux séparé de celui de la structure, les pages HTML sont maintenant plus robustes avec des balises proposant de nombreuses fonctionnalités.

Un nouveau langage appelé XML (Extensible Markup Language) a été approuvé en janvier 1998 par les membres du W3C pour résoudre des questions techniques que le langage HTML n'était pas en mesure de régler. À la différence de HTML, XML permet de définir ses propres étiquettes, ce qui est un atout formidable de flexibilité. XML permet d'utiliser des variables et de les définir à l’extérieur de la page, ce qui transforme XML en parfait langage de programmation.

Le langage XML est aussi un langage à balises pour la création de pages Internet mais aussi pour la compatibilité entre des applications informatiques. Par exemple, il est courant d'extraire des données comptables d'une application de gestion commerciale pour les envoyer vers un tableur comme Microsoft Excel, Open Office Calc ou Google Sheets. Les fichiers extraits ont souvent une structure organisée en XML (et non pas en HTML).

1.1.1 Ecrire et tester son premier code HTML