NOMBRES - Curiosités, théorie et usages

 

Accueil                           DicoNombre            Rubriques           Nouveautés      Édition du: 04/03/2021

Orientation générale        DicoMot Math          Atlas                   Actualités                       M'écrire

Barre de recherche          DicoCulture              Index alphabétique        Références      Brèves de Maths

      

Informatique

 

Débutants

Général

Programmation

 

Glossaire

Algorithme

 

 

Index des pages

Programmation

 

>>> INDEX

 

Débutant

HTML

En commun

Ligne de code

HTML – Premiers pas

OUTILS de PROGRAMMATION

 

Sommaire de cette page

>>> Approche

>>> Structure HTML

>>> Mon premier programme

>>> Résultat à l'écran

>>> Pour poursuivre

>>> Pour visualiser le code HTML

>>> Le coin technique

 

 

 

 

Langage HTML

 

Une introduction pour savoir de quoi il retourne.

 

 

APPROCHE

 

*    Vous  êtes le responsable de la mise en page d'un document sur un écran. Vous souhaitez disposer le texte et les illustrations de façon à faciliter la lecture, à former une accroche du lecteur à certaines informations, à donner un ton plaisant à la forme du document. Comment s'y prendre?

*    Vous disposez du texte et des illustrations. Comment indiquer la façon de les disposer sur l'écran? Comment faire pour que tous les utilisateurs, quelles que soient leurs machines, puissent avoir accès à ce document avec sa mise en page.

*    La solution le langage html: un jeu de directives (instructions) qui donneront toutes les instructions pour disposer le texte à l'écran.

*  écrire un paragraphe

*  Mettre en gras, en italique …

*  dessiner un cadre

*  placer une image

*  insérer un lien

*  etc.
 

 

 

Structure HTML

 

*    Un document décrit en langage HTML comporte essentiellement deux parties:

*  L'en-tête qui inclut toutes les données communes à tout le document: le titre, les mots-clés, des directives informatiques… de même que par exemple, un module qui permettra de compter les visiteurs de cette page.

*  Le corps du texte qui comporte toutes les informations qui seront visibles à l'écran "entourées" d'une "sauce" qui précisera les emplacements et la manière de les présenter sur l'écran.
 

*    Pour reconnaître la "sauce" spécifique HTML, on utilise des balises (ou tags). Oui, le langage utilise des mots anglais.

 

*  Un tag est ouvert par le chevron    < 

*  Un tag est fermé par le chevron           >

 

Exemples

<p> veut dire: ce qui suit est le texte d'un nouveau paragraphe.

<align="right"> veut dire: aligner (justifier) le texte sur la droite.

<title> annonce le titre du document

 

*    Pour définir l'en-tête et le corps du document, on utilise des tags:

<head> annonce l'en-tête du document;

<body> annonce le passage au corps du document.

 

*    En informatique, la rigueur est de mise, c'est pourquoi un tag ouvert et soigneusement fermé en fin d'usage par un antislash:

</head> indique la fin de l'en-tête;

</body> indique la fin du corps du document.

 

 

Mon premier programme HTML

<html>

   <head>

           <title>

                     Mon premier document html         
           </title>

   </head>

    <body>

           <p>

Je suis fier de vous présenter mon premier document en programmation pour usage Internet.

           </p>

   </body>

</html>

 

 

SVP, je veux voir ce que cela donne!

 

*    Ouvrir le bloc-note (cliquez sur l'icône bulle window /tous les programmes / accessoires)

*    Tapez le texte ci-dessus.

*    Enregistrez au format .txt (exemple: essais html.txt)

*    Ouvrir l'explorateur (icône en forme de classeur),

*    Retrouvez le document et changer l'extension .txt en .htm (il suffit de cliquer deux fois lentement sur le texte à changer pour avoir la possibilité de modifier le texte)

*    Double-cliquez sur le nom de ce document et voilà ce qui apparaît:

 

 

Un éditeur comme les pros

Le logiciel Notepad ++  est un logiciel libre (gratuit) spécialement conçu pour vous aider à écrire votre code.

 

Pour poursuivre

 

*    Avec ces rudiments, pour pouvez vous lancer. On trouve de l'information sur Internet et dans les bouquins. Si vous n'avez jamais fait de programmation ce sera un peu coriace!

*    Il est vrai que de nombreux logiciels dispensent de bien connaître le langage et vous font des mises en pages avec génération automatique du code. C'est le cas de Dreamveaver (Adobe), un des plus utilisé. 

*    Pour ma part, j'utilise tout simplement Word (Microsoft). Il présente un grave inconvénient: il est très foisonnant (beaucoup de code inutile), mais un avantage indéniable: grande simplicité: vous faites du traitement de texte classique et le programme vous le transforme en code html sans que vous vous en soucier le moins du monde.
 

 

Pour visualiser le code HTML

 

*    Pour visualiser le code d'un document html, cliquez droit n'importe où dans le document. La fenêtre vous propose: "code source de la page" ou "afficher la source".

 

 

*    Essayez  de visualiser un document Internet quelconque pour vous rendre compte des possibilités du langage HTML. Oui! Il y a du monde …

 

*    Vous pouvez aussi utiliser la commande "examiner l'élément" obtenue par un clic-droit sur le morceau de document que vous voulez étudier.

 

 

Le coin technique

 

*    HTML = Hypertext Markup Language

 

*    Son but: représenter des pages web sur Internet.
 

*    C’est un langage utilisant des balises (tags)

*    Il permet, en particulier, l'usage des hyperliens, moyen très pratique pour passer d'un document un autre par simple clique sur un mot

 

*    Son rôle essentiel est de:

*  structurer sémantiquement un document,

*  de mettre en forme le contenu des pages,

*  d’inclure des ressources multimédias dont

*      des images,

*      des formulaires de saisie, et

*      des éléments programmables tels que des applets.

 

*    Il permet de créer des documents compatibles et interopérables avec les équipements très variés utilisés par Internet.

 

*    Il est souvent utilisé conjointement avec des langages de programmation (JavaScript) et des formats de présentation (feuilles de style en cascade).

 

Format

Au format .htm, le document est enregistré en deux parties

*  le fichier mondoc.htm d'un part, comprenant tous le texte et

*  le classeur mondoc_fichiers qui regroupe toutes les images.

Au format .mht, le document est enregistré sous un seul fichier. Inconvénient: certains explorateurs ne savent pas les lire (Firefox).

 

 

 

 

 

Suite

*    Comment mettre en commun?

*    Menu en en-tête

*    Programmation – Index

*    Signet

Voir

*    Programmation – En savoir un peu plus

*    Algorithme du monde de 2014 – XML

Livre

*    Apprendre le développement WEB au lycée – Cyprien Accard – ellipses – 2018

Sites

*    HTML – Wikipédia

*    Apprentissage HTML par Van Lancker

*    Didacticiel du HTML

*    Learn HTML Free in [2021] – Basic HTML Codes for Beginners – Ezequiel Bruni

Cette page

http://villemin.gerard.free.fr/aInforma/Langage/LangHtml.htm