Base de l’Html

Un site web est composé généralement de balise , donc je vais en plusieur bloque décomposer le code et expliquer le fonctionnement.

Mais avant toute chose pour commencer à faire tous çà il faut quelque truc! 😀 :

  • Un éditeur de text de préférence : Notepad++ ou Dreamweaver
  • Un environement de développement , Wamp , Lamp( jle kiff pas trop lui 😦 ), EasyPhp quand nous passerons au Php 😀
  • et enfin une chose essentiel notre cervelle 😀 😛
<!DOCTYPE html>
 <html> 
  <head> <!-- En-tête du document --> 
      <title>Mon site Web</title> <!--titre --> 
  </head>
 <body> <!--Corps du document--> 
       <h1>Un titre</h1> <!-- titre du document -->
 <p>du texte, du texte du texte, du texte</p> 
       <h2>Sous-titre</h2>
     <p>du texte, du texte du texte, du texte</p> <!-- un paragraphe--> 
</body> 
</html>

Le Doctype:

Le DOCTYPE est toujours inséré au  début de votre page et permet ainsi à votre navigateur ( Chrome , Firefox,Opéra…) d’interprété convenable le document.

ATTENTION!

Ne pas confondre:

<title> : Qui ne fait pas référence au titre de votre page mais au titre de votre onglet

et

<h1> :Car on peut dire qu'il défini un titre de niveau 1 à 6( donc 1 dans le cas présent) et plus on augmente de niveau plus le titre grossira

Syntaxe :

      • <html><body></body></html> : correct. Une balise qui est ouverte à l’intérieur d’une autre doit  être fermée à l’intérieur.

      • <html><body></html></body> : incorrect, les balises s’entremêlent.

Comme vous l’avez bien remarquer on ferme une balise comme ceci :

</balise>

A l’exception d’une cette balise  qui permet le saut de ligne :

 <br/>
<html></html> Définit un document html
<head> </head> Définit l’en-tête d’un document
<title> </title> Définit le titre d’un document
<body> </body> Définit le corps de la page
<p> </p> Définit un paragraphe

Et voila vous avez les bases en quelque seconde 😀 B-| . Dans un article plus bas vous avez toutes les balises , et elles fonctionnent de la même façon!

Le prochain article portera sur le CSS3. 😀

Publicités

HTML5 : Les balises

Toutes les balises concernant le HTML5 😀

Ce tableau est une oeuvre de : http://41mag.fr de plus il contient tout ce qu’il faut pour apprendre à développer et lorsque vous cliquez sur l’une des balises vous disposez de sa méthodologie.

Balise Description
<!– … –> Définit un commentaire
<!DOCTYPE> Définit le type du document
<a> Définit un lien
<abbr> Définit une abréviation
<address> Définit une adresse
<area> Définit une zone à l’intérieur d’une image
<article>NOUVEAU Définit un article
<aside>NOUVEAU Définit une partie latérale au contenu
<audio>NOUVEAU Définit un fichier audio
<b> Texte en gras
<base> Définit une URL de base pour tous les liens de la page
<bdo> Définit la direction du texte
<blockquote> Définit une longue citation
<body> Définit le corps de la page
<br> Saut de ligne
<button> Définit un bouton cliquable
<canvas>NOUVEAU Définit un graphique
<caption> Légende du tableau
<cite> Définit une citation
<code> Mise en forme d’un texte en code informatique
<col> Définit une colonne d’un tableau
<colgroup> Définit un groupe de colonne pour un tableau
<command>NOUVEAU Définit un bouton de commande
<datalist>NOUVEAU Définit une liste d’options
<dd> Définition d’un terme
<del> Définit un texte supprimé
<details>NOUVEAU Définit les détails d’un élément
<dfn> Définition
<div> Définit un calque ou une section
<dl> Liste de définition
<dt> Définition d’un terme
<em> Mise en exergue d’un texte – italique
NOUVEAU Définit un contenu extérieur (audio, vidéo …)
<fieldset> Regroupe plusieurs éléments d’un formulaire
<figcaption>NOUVEAU Légende d’un groupe d’élément multimédia
<figure>NOUVEAU Définit un groupe d’élément multimédia
<footer>NOUVEAU Définit le bas d’un section ou d’une page
<form> Définit un formulaire
<h1> to <h6> Définit un titre par degré importance de 1 à 6
<head> Définit l’en-tête d’un document
<header>NOUVEAU Définit le haut d’une section ou d’une page
<hgroup>NOUVEAU Regroupe les informations du haut d’une page ou section
<hr> Barre horizontale
<html> Définit un document html
<i> Texte en italique
<iframe> Introduit un page html dans une frame
<img> Définit une image
<input> Définit un champ
<ins> Définit un texte insérer
<keygen>NOUVEAU Générateur de clé pour un formulaire
<kbd> Raccourcis ou touche du clavier
<label> Légende d’un groupe d’élément de formulaire
<legend> Titre d’un groupe d’élément d’un formulaire
<li> Élément d’une liste
<link> Définit les relations entre les documents
<map> Définit une carte
<mark>NOUVEAU Mise en valeur d’un mot ou d’un texte – Texte marqué
<math>NOUVEAU Définit une formule mathématique
<menu> Définit un menu en liste
<meta> Définit des informations relatives au document
<meter>NOUVEAU Définit une unité de mesure
<nav>NOUVEAU Définit un groupe de liens de navigation
<noscript> Définit une alternative au script non supporté
<object> Définit un objet du contenu extérieur multimédia
<ol> Définit une liste ordonné
<optgroup> Regroupe d’une liste d »option dans un formulaire
<option> Option d’une liste dans un formulaire
<output>NOUVEAU Définit un type de sortie
<p> Définit un paragraphe
<param> Définit les paramètres d’un objet
<pre> Texte pré-formaté
<progress>NOUVEAU Définit une progression
<q> Définit une courte citation
<rp>NOUVEAU Annotation ruby si le script n’est pas supporté
<rt>NOUVEAU Annotation ruby d’explication
<ruby>NOUVEAU Définit une annotation en ruby
<samp> Définit un échantillon de code
<script> Définit un script
<section>NOUVEAU Définit une section
<select> Définit une liste sélectionnable
<small> Minimise l’importance d’un texte
<source>NOUVEAU Définit la source d’un contenu multimédia
<span> Définit une section de type inline
<strong> Mise en exergue d’un texte – Texte en Gras
<style> Définit un style CSS
<sub> Mise en indice d’un texte
<summary>NOUVEAU Définit l’en-tête des détails d’un document ou section
<sup> Mise en exposant d’un texte
<svg>NOUVEAU Définit une image vectorielle
<table> Définit un tableau
<tbody> Définit le corps d’un tableau
<td> Définit une cellule d’un tableau
<textarea> Définit une zone de texte
<tfoot> Définit le bas d’un tableau
<th> Définit une cellule d’en-tête d’un tableau
<thead> Définit le haut d’un tableau
<time>NOUVEAU Définit une unité de temps
<title> Définit le titre d’un document
<tr> Définit une ligne de tableau
<track>NOUVEAU Définit une unité de temps pour les éléments <audio> et <video>.
<ul> Définit une liste non-ordonné
<var> Définit une variable
<video>NOUVEAU Définit une vidéo
<wbr>NOUVEAU Définit un possible retour à la ligne