Accueil > Technicité > HTML, organiser le contenu de votre page : (...)

HTML, organiser le contenu de votre page : notions de base

jeudi 4 septembre 2008, par Claire Mélanie, Lucien impression

Mots-clefs :: HTML :: Tutoriels :: Tutoriels pour débutant ::

Organisation générale de la page - Placement du texte.

Pour plus d’informations sur les notions de body (corps de document) et balise : voir notre article sur la structure générale d’une page HTML


Nous allons voir quelques notions de base avant d’aborder la présentation des balises de structuration du corps de document HTML

Balises block et inline

Chaque balise est par défaut dit de bloc (block) ou en-ligne (inline).

- Les balises de bloc par défaut ont pour conséquence de faire aller à la ligne automatiquement. On empile les blocs les un en dessous des autres.

<div>première balise bloc</div>
<div>seconde balise bloc</div>

Résultat :

première balise bloc
seconde balise bloc

- Les balises en-ligne par défaut prennent en charge des contenus qui se placeront l’un à coté de l’autre

<span>première balise en ligne</span> <span>seconde balise en ligne</span>

Résultat :

première balise en ligne seconde balise en ligne

La balise <img /> qui permet de placer une image est par défaut en-ligne.

- Connaître les balises qui sont par défaut bloc ou en-ligne est donc important pour bien placer son contenu.

Par exemple, le code qu’il faudra écrire pour placer deux images, sans maîtriser le CSS, sera la conséquence, de son caractère en ligne. Par défaut, deux balises <img /> à la suite feront s’afficher deux images sur la même ligne.

Il faudra donc employer d’autres ressources pour les faire s’afficher l’une en dessous de l’autre (par exemple d’autres balises HTML, ce que nous verrons dans un autre article sur les balises de hiérarchisation).

Affichage par défaut, apport du CSS

- Chaque navigateur interprète à sa manière les balises si leurs attributs ne sont pas définis. Les navigateurs ont chacun un réglage par défaut qui fait par exemple que pour une balise <h1></h1> l’affichage sera plus ou moins grand, que les marges d’un paragraphe seront plus ou moins larges , etc.

- Nous verrons alors par la suite comment définir le style de ces balises (correspondant à une partie de leur attribut) en utilisant plus particulièrement les feuilles de style (CSS). En effet, cette différence d’affichage peut s’avérer fort ennuyeuse quand vous avez prévu un rendu bien spécifique et que par défaut ce rendu n’est pas respecté selon les navigateurs.

Articles relatifs :

- Les codes couleurs HTML

- HTML, la mise en forme du texte

- Faire défiler un texte en HTML

- Optimiser son contenu pour le référencement


© Tous les textes et documents disponibles sur ce site, sont, sauf mention contraire, protégés par une licence Creative Common (diffusion et reproduction libres avec l'obligation de citer l'auteur original et l'interdiction de toute modification et de toute utilisation commerciale sans autorisation préalable).

carre_trans Avec les mêmes mots-clefs
puce Recherche avancée sur Google
puce Vie privée : sécurisez votre navigation internet
puce Sécurisez vos échanges sous Android : chatter protégé
puce Sécurisez vos échanges : chatter protégé
puce Vie privée : sécurisez vos recherches internet
puce Gérer ses adresses e-mail d’envoi sous Gmail.com
puce Recherche avancée ou de l’usage des booléens
puce Apprendre à taper au clavier grâce à Dactylo 6.0
puce HTML, la mise en forme du texte
puce HTML, organiser le contenu de votre page : les balises de hiérarchisation
puce La structure générale d’une page (X)HTML
puce Comment prendre une capture d’écran sous Windows XP et Vista
puce Comment faire un copier coller ?
puce Comment utiliser sa souris ?
puce Faire défiler un texte en HTML
puce Test du lecteur multimedia
puce Optimiser son contenu pour le référencement
puce HTML 5 un premier brouillon publié.
puce Codes couleurs HTML
puce Android et vie privée : Applications, permissions et localisation
puce Du vélo sous la pluie ou de l’art d’affronter les éléments
puce Microsoft étudiant : état des lieux des offres éducation 2013
puce 5 applications pour améliorer l’ergonomie de votre mobile Android.
puce Utiliser Python 101 : prise en main
puce Android : 5 applications pour améliorer votre productivité mobile.
puce Android : supprimer les sons de l’appareil photo du Galaxy Note 2.
Equipe Eclairement L'association
La lettre S'abonner
Facebook Twitter
Histoire   sport   Roman   Métier   Photographie   Spectacle   Installation   Windows Vista   Littérature   Europe   Edito   Anime   Pages Ouvertes   Société   Techniques   Séries TV   Peinture   Android   Windows   Education   HTML   Tutoriels   Tutoriels pour débutant   BD   Culture générale   arts visuels   Théâtre   Urbanisme   Musique   Bases de données   Cours   Manga   Fable   Windows Mobile   Firefox   Droit   Cinéma   Poésie   Linux   Microsoft Office   Windows 7   Recherche d’information bibliographique   Vie privée  
Eclairement © 1998 - 2012
Mentions légales - Contact - Partenaires