Présentation des balises HTML simples

Messages : 111 Date d'inscription : 08/01/2013

Balises HTML simples

Présentation du tutoriel

Voici une petite description des balises courantes utilisées en html.

Hiérarchisation

Il est nécessaire de fragmenter sa page HTML en différents niveaux, et lui mettre des titres, sous-titres, etc. Tout le style est modifiable dans le CSS. Nous ne le verrons pas ici.

Code:

<h1> </h1>

Titre principal.

Code:

<h2> </h2>

Titre secondaire, ou sous-titre.
Vous pouvez aller jusqu'à h6.

Code:

<p> </p>

Un paragraphe. Indispensable entre deux balises de titre. Et partout sur votre page. Dès que vous écrivez, vous mettez dans un paragraphe.

Exemple
Spoiler:

Code:

<h1>Titre principal </h1>
<h2>Titre secondaire</h2>
<p> Mon texte, blablabla.</p>

<h2>Titre secondaire</h2>
<h3>Sous-titre</h3>
<p>Paragraphe de blablabla.</p>

<h3>Sous-titre</h3>
<p>Paragraphe encore une fois... </p>

Mise en forme basique

Le HTML propose quelques balises de mises en page. Mais privilégiez quand même le CSS.

Code:

<b> </b>

Gras.

Code:

<i> </i>

Italique.

Code:

<s> </s>

Souligner.

Code:

<mark> </mark>

Surligner.

Code:

<del> </del>

Barrer.

Balises générales

Il existe également des balises qui ont un sens lorsqu'on les utilise.

Code:

<blockquote> </blockquote>

Citation.

Code:

<em> </em>

Emphase, c'est-à-dire qu'elle met l'accent sur un texte.

Code:

<strong> </strong>

Cette balise met en avant un texte. (Notamment dans les moteurs de recherche, etc.)

Et des balises à usage régulier, ne vous en privez pas.

Code:

<a href="lien" target="_blank"> </a>

Ici, vous pouvez mettre votre lien, et vous aurez donc un lien hypertexte !
target="_blank" : pour que le lien redirige vers une nouvelle page. C'est très utile.

Code:

<br /> ou <br>

Saut de ligne. C'est une balise auto-fermante, elle n'a pas besoin d'une deuxième balise pour la fermer.

Code:

<hr />

Ligne horizontale. Auto-fermante également.

Code:

<img src="lien" alt="texte" title="titre" />

Image. Placez l'url à la place de "lien". A la place du texte, vous pouvez placer un descriptif de votre image. Le "titre" est le titre que vous pourriez donner pour décrire votre image.

Voici pour les balises principales.
A bientôt pour un nouveau tuto !

Messages : 111 Date d'inscription : 08/01/2013

Balises HTML 5

Présentation du tutoriel

Les nouvelles normes ont proposé des nouvelles balises, plus parlantes de part leur nom pour remplacer l'utilisation excessive des balises div.

Code:

<header></header>

Entête de la page.

Code:

<section></section>

Section générique traitant du même sujet.

Code:

<article></article>

Sous-ensemble d'une section. Il englobe des éléments qui, séparés du reste, sont compréhensibles.

Code:

<nav></nav>

Liens permettant la navigation sur la page.

Code:

<aside></aside>

"Sur le côté", un complément, quelque chose qui n'a pas du lien avec le contenu de "section".

Code:

<footer></footer>

Fin de la page.

Chaque balise peut contenir les balises normales connues en HTML.

Voilà pour les balises du HTML 5.
A bientôt pour un nouveau tuto !

Messages : 111 Date d'inscription : 08/01/2013

Structure de page

Présentation du tutoriel

Pour gérer des pages html de façon indépendantes, il est indispensable de savoir les structurer.

La structure de base se présente de cette façon :

Code:

<!DOCTYPE html>
<html>
   <head>
   <meta charset="utf-8" />
   <title>Titre</title>
   <style type="text/css">Feuille de style CSS</style>
   </head>

   <body>
   Corps de la page html
   </body>
</html>

Une page sera donc toujours composée de ces éléments.

Code:

<!DOCTYPE html>

Indique au navigateur qu'il s'agit d'un document html. Toujours en début de page.

Code:

<html></html>

Là où on place le code html. Le navigateur ne prendra en compte que ce qui est entre ces deux balises.

Code:

<head> </head>

Entête de la page : la feuille de style CSS, le titre, et toutes les informations permettant d'identifier votre document. Tout ce qui est ici n'apparaîtra pas sur votre page.

Code:

<meta charset="utf-8" />

Langage utilisé. Permet de garder les accents, etc.

Code:

<title>Titre</title>

Titre de votre page. Il apparaîtra sur l'onglet.

Code:

<style type="text/css">Feuille de style CSS</style>

Feuille de style CSS.

Code:

<body>Corps de la page html </body>

Code html. Toutes vos balises, votre texte, etc.

Voilà pour la structure d'une page.
A bientôt pour un nouveau tuto !

» Fiche de pub - iframe - revoir structure page html
» Fiche de présentation - Mia.