Le Blog du HTML

Creer des tableaux

2008-12-09T09:26:00.000-08:00

Les tableaux sont très importants et utiles, ils permettent entre autre de faire des alignements verticales et horizontales.

Structure de base d'un tableau :

<table>

<tr>
<td> ... <td> <td> ... </td>
</tr>

</table>

Marqueur de tableau
Marqueur de ligne ("r"=row=rangée=ligne)
Marqueur de cellule et fin de cellule.
Chaque ... réalise une colonne."d"=data=donnée
Fin de ligne
Fin du tableau
Les cellules titres utilisent le marqueur à la place de
Pour obtenir un cadre, il suffit d'ajouter l'attribut border :

Les images

2008-12-08T11:55:00.000-08:00

Les images sont très importantes pour un site web, elles servent de fond d'écran, de lien comme nous l'avons vu précédemment, ou tout simplement d'image banal pour le site.

Il y a plusieurs formats d'images :
Jpeg : Le plus répandu, il supporte des millions de couleurs, adapté pour les fonds d’écran.
Png : Le plus récent, adapté pour tout à part les photos, il peut être rendu transparent.
Gif : Le plus vieux et que 256 couleurs, très utilisé mais inferieur aux Png, il peut etre animé.

Afficher une image

saha aidik

Creer des liens (des ancrages)

2008-12-06T05:09:00.000-08:00

Dans ce post, nous allons parler des liens, ces derniers sont à la base de la navigation Internet, ils permettent de naviguer soit dans votre propre site, dans votre propre page ou vers d'autres sites.

Liens externes dit absolu

Ce sont des liens qui permettent de naviguer vers d'autres sites. Par exemple si j'ai envie de créer un lien vers le site web de l'université d'Evry, voici le code que je dois faire

<a href=" l'adresse du site web "> Le nom de votre lien </a>

<a href=" http://www.univ-evry.fr/ "> Université d'Evry </a>

Université d'Evry

Bulles d'aide

La bulle d'aide crée par l'attribut title permet de fournir une brève description du lien. Donc quand on passe la souris sur le lien, sans cliquer on voit apparaitre cette fameuse bulle d'aide.

<a href="L'adresse du site web" title="La bulle d'aide">Le nom de votre lien</a>

<a href="http://www.univ-evry.fr/" title="Vous allez visitez le site de l'Université d'Evry">Université d'Evry </a>

Université d'Evry

Liens internes dit relatif

Ce sont des liens qui permettent de naviguer dans un même site, de lier les pages de votre site.

Le nom du lien

Lien pour envoyer un mail

Si vous souhaitez envoyez un mail à une personne, vous pouvez tout simplement créer un lien qui ouvrira directement votre boite mail.

<a href="mailto:fabdahustla@hotmail.fr">Me Contacter</a>

Me Contacter

Un lien vers une ancre

Une ancre c'est un lien interne à une même page, souvent quand on visite un site web et que l'on ai tout en bas de la page nous avons une sorte de fléche qui nous permet de remonter en haut de la page, c'est une ancre

<a href="#nom de l'ancre">Texte qui sera ciblé</a><span id="nom de l'ancre">Titre de la balise</span>

<a href="#dans">Allez en haut de la page</a>
<span id="dans">Dans</span>

Allez en haut de la page

Faire d'une image un lien

On commence a élever la difficulté, la on va créer un codage qui permet d'aller sur une autre page en cliquant sur une image

Cliquer sur l'image :-)

Styles et couleurs pour les liens

Ici nous allons voir comment mettre un peu de style, de couleurs a vos liens, nous verrons cette partie plus amplement lorsque nous traiterons du langage CSS, qui est le langage de la présentation, le HTML traitant plus du contenu.
Il y a 3 état pour un lien

Le lien non visité : la couleur du lien par défaut à l'origine'
a:link
Lle lien visité : couleur après avoir cliqué dessus'
a:visited
Le lien activé c'est lorque l'on passe le pointeur de la souris dessus sans cliqué.
a:hover

À placer entre les balises HEAD
<style>
A:link {text-decoration: none; color: #0000FF; font-size: 12pt}
A:visited {text-decoration: line-through; color: blue; font-size: 12pt}
A:active {text-decoration: none; color: #FF0000; font-size: 12pt}
A:hover {text-decoration: underline; color: #FF0000; font-size: 12pt}
</style>

- underline, soulignement.
- overline, surlignement.
- line-through, barrage.
- blink, clignotement (sauf ie).
- none, sans rien.

Combo

Nous allons dans ce post faire un mélange de tout ce que nous avons vu car nous pouvons additionner ces atttributs en l'occurence avoir une bulle d'aide et envoyer un email

<a href="mailto:fabdahustla@hotmail.fr" title="La bulle d'aide" >Le nom de votre lien</a>

Me Contacter

Questionnaire résumé partie 1

2008-11-08T12:16:00.000-08:00

Voici quelques balises !

2008-10-31T15:08:00.001-07:00

Bases : tout document HTML doit les contenir
<html></html> Balise principale qui englobe une page HTML
<head></head> On trouve la balise title, titre de la page web
<title></title> Titre de la page web dans la barre du navigateur
<body></body> Le contenu de la page web,

Paragraphes de texte :
<p></p> Paragraphes
<div></div> Utilisée pour diviser un document en plusieurs sections, très utile en combinaise avec le CSS
<<br/> Retour à la ligne
<blockquote></blockquote> Ces citation st légèrement en décalé à droite.
 Commentaire
<h1></h1> Taille du titre, Un titre crée un bloc, ce qui provoque un retour à la ligne. On peut aller de H1 à H6

Présentation de texte :
<strike> </strike> Texte barré.
<u> </u> Texte souligné
<strong> </strong>Texte en gras.
<em></em> Mettre en italique
<i></i>
<h1></h1> Taille du titre, provoque un retour en ligne
<sup></sup> Mettre en exposant
<sub></sub> Mettre en indice
<q></q> Guillemets

Liste
<ul></ul> : indentation puces non numérotées.
<ol></ol> : liste numérotée.
start= : 4, ça commence la numérotation à 4 en chiffre arabe par défaut.
type= : "I" (en chiffres romain), "A" (en lettres capitales) et "a" (en lettres minucules).
<li></li> : balise d'éléments de liste. on obtient une ligne de la liste précédée par une puce ou un numéro.

Debuter l'écriture en langage HTML

2008-10-31T13:56:00.000-07:00

Pour creer une page HTML il faut

un éditeur (Notepad..) téléchargeable ici
un navigateur (Internet Explorer, Firefox..)
creer un dossier où sera enregistré vos fichiers texte et html, histoire de vous y retrouver

Les balises sont des marqueurs pour les navigateurs, lorsque le navigateur lit une balise, il traduit cette balise, elle commence par < et finisse par >, il faut rajouter ⁄ pour la la balise fermante

Exemple balise par paire : <b>Outil Web<⁄b>
Exemple balise seul : <image⁄>

EXERCICE

Ouvrir votre Notepad, écrivez en language html : le blog du html, en gras et souligné.
Ensuite enregistrez votre document avec l'extension.html, exemple : monexercice.html

RÉPONSE

Voici la réponse : le blog du html mais ce qui nous interesse c'est plus le code, le voici : <b><u>le blog du html</u></b>

Votre première page web

2008-10-26T13:51:00.000-07:00

Voici la structure de base simplifiée obligatoire d'une vraie page Html :

<html>
              <head>
<title>Le nom de votre page web, important pour Google ^^ </title>
              </head>

              <body>
Contient le corps du document html en l'occurrence toutes les informations qui seront visibles par l'internaute.
              </body>

</html>

Vous devez remarquez certaines caractéristiques importantes :

-Les balises respectives ouvrantes et fermantes sont alignés verticalement, ce qui permet une distinction rapide, imaginez si tout était compacté, alignés sans espaces..
-La balise html englobe toujours toutes les autres !
-La balise head (tête), dans cette balise il y a la balise title où l'on met le titre de la page qui apparait en haut à gauche de votre navigateur, par exemple vous pouvez voir que mon title est : Le Blog du HTML.
-La balise body où se trouve le contenu de votre futur site web

Qu'est ce qu'un navigateur ?

2008-10-23T09:36:00.000-07:00

Un navigateur c'est un programme qui permet de voir les sites web, il lit les codes (html, css..) et affiche à quoi cela correspond.

Par exemple, vous mettez la balise ouvrante <b>, la balise fermante </b> encadrant un mot quelconque, ce qui donne :

<b> navigateur </b>

Votre navigateur afichera le mot navigateur en gras comme ceci :

navigateur

On peut dire que le navigateur est une sorte de traducteur.

Qu'est ce que le HTML ??

2008-10-21T11:34:00.000-07:00

Le HTML alias le HyperText Markup Language est un langage dit de "marquage" qui sert à écrire le contenu d'un site web à l'aide d'informations logiques : les balises et les codes, qui permet la création de sites internet.

Pour voir un code HTML, vous aller sur une page Internet, vous faites clic droit et vous cliquez sur Code source de la page et vola que s'affiche le code HTML que lit et transforme votre navigateur.