Trucsweb.com

Trucsweb.com

HTML

Introduction au HTML

RDFFav

Formation - 4. Ma première page Web

Une simple page Web avec les base du HTML5.FTP, WYSIWYG, éditeur, Bloc-Notes, Kompozer, FilezillaFormation - 4. Ma première page Web

Formation - Introduction

Comme on la vue précédemment, il suffit d’un fichier texte pour créer une page Web. Sans une seule ligne de code HTML, le navigateur sera en mesure d’afficher votre texte sans aucun problème. En d’autres mots, le HTML permet de structurer le contenu et votre texte, mais il n’est aucunement obligatoire pour publier un texte sur le Web (un texte brut, c’est à dire sans structure ni élément comme les images). À preuve, ouvrez le document suivant exemple.txt, un simple fichier texte avec l’extension « .txt ».

Comme on peut voir, avec l’extension « .txt » le texte respecte les sauts de ligne, mais n’interprète pas le HTML. Sans plus. En ajoutant l’extension « .html » c’est l’inverse. Le résultat perd tout saut de ligne, mais interprète le HTML (exemple.htm). Copiez-collez ces trois paragraphes sans HTML dans un fichier texte et sauvegardez-le avec l’extension « .html » :

Sans HTML
Lorem ipsum

Lorem ipsum dolor sit amet...

Lorem ipsum dolor sit amet...

Résultat dans le navigateur

Lorem ipsum Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet...

Comme on peut voir, sans HTML, le résultat ne tiennent pas compte des sauts de ligne. C’est normal, c’est pourquoi le HTML, ou langage de balisage existe. Pour indiquer au navigateur comment afficher le texte avec des sauts de ligne par exemple. Noter en passant que c’est précisément la même chose avec les espaces. Une seule espace est affichée à la fois. Vous pouvez ajouter un nombre illimité d’espaces entre deux caractères, le navigateur en affichera qu’une seule.

Note : L’usage du « Lorem ipsum » comme texte de remplissage est un classique pour les programmeurs.


La balise d’exception, la balise <pre>

Pour tenir compte des espaces et des sauts de ligne, on peut certes utiliser la balise d’exception <pre> qui simule le fichier texte en préservant les caractères cachés. Ainsi :

<pre>
Lorem ipsum                    Lorem ipsum  

Lorem ipsum dolor sit amet...

Lorem ipsum dolor sit amet...
</pre>

Résultat identique

Lorem ipsum                    Lorem ipsum  

Lorem ipsum dolor sit amet...

Lorem ipsum dolor sit amet...

C’est déjà ça, vous pouvez copier-coller n’importe quel texte, l’imbriquer entre les balises <pre> et </pre> et vous aurez un texte lisible disponible en ligne. Texte qui respecte un minimum de mise en page. Bien sûr cet exemple n’est pas conseillé. C’est uniquement pour mettre en évidence la différence entre un texte normal, qui contient des caractères cachés comme les sauts de ligne, avec un texte HTML qui ne contient aucun caractère caché.


Avec HTML
<h1>Lorem ipsum</h1>

<p>Lorem ipsum dolor sit amet...</p>

<p>Lorem ipsum dolor sit amet...</p>

Résultat

Lorem ipsum

Lorem ipsum dolor sit amet...

Lorem ipsum dolor sit amet...

Voilà donc un exemple avec deux nouvelles balises. Le paragraphe <p> et le titre de niveau 1 <h1>. C’est tout ce que ça prend pour faire votre première page Web.

Ma première page Web
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Trucsweb - Ma première page Web</title>
    <!-- Balises métas ou métadonnées -->
  </head>

  <body>
    <header>
      <h1>Lorem ipsum dolor sit amet...</h1>
    </header>
    <section>
      <h2>Lorem ipsum dolor sit amet...</h2>
      <p>Lorem ipsum dolor sit amet...</p>
      <p>Lorem ipsum dolor sit amet...</p>
    </section>
  </body>
</html>

Résultat

Lorem ipsum dolor sit amet...

Lorem ipsum dolor sit amet...

Lorem ipsum dolor sit amet...

Lorem ipsum dolor sit amet...

N’oubliez pas de sauver vos fichiers avec l’encodage UTF-8 et la balise d’entête <meta charset="utf-8" >.
Conclusion de la formation
  1. Le texte HTML perd les saut de lignes;
  2. Bien former le code HTML;
  3. Nouvelle balises de type « bloc »:
    - <!-- ... --> : Commentaire HTML
    - <pre> : Texte pré-formaté
    - <h1> : Entête de niveau 1
    - <h2> : Entête de niveau 2
    - <h3>-</h6> : Et ainsi de suite jusqu’au niveau 6
    - <p> : Paragraphe
  4. Nouvelle balise de type « en-ligne »:
    - <strong> ou <b> : Caractère gras


Références
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

    Ajouter un commentaire
    Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
    Votre évaluation du tutoriel

    10/10 sur 1 revues.
           Visites : 6587 - Pages vues : 6652
    X

    Trucsweb.com Connexion

    Connexion

    X

    Trucsweb.com Mot de passe perdu

    Connexion

    X

    Trucsweb.com Conditions générales

    Conditions

    Responsabilité

    La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

    Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

    Droit applicable et juridiction compétente

    Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Glossaire

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Trucsweb

    Conditions

    Aucun message!

    Merci.

    X
    Aucun message!
    X

    Trucsweb.com Créer un compte

    Créer un compte

    .
    @