Accueil
Conseils
Nom de Domaine
Agences Immo
Municipalités / OTSI
Boutique Internet
Insertion Agenda
Exemples
Références
Location de Sites
Animation/ MAJ
Entretien
Assistance
Fiscalité Sites
Tarifs
Devis en ligne
Conditions
Arnaques
F.A.Q
Programmation

Agenda

Contact

réalisation :
Sitecom.biz

Cours de programmation :
le langage html...


COURS de PROGRAMMATION HTML, par SITECOM.BIZ Définition
Html (ou hyper text mark up language), est le langage universel sur Internet, où son code est interprêté directement par le navigateur ou "browser" comme Firefox, Internet Explorer ou Netscape qui sont les plus utilisés.
C'est le "world wide web consortium" qui à standardisé le langage html depuis le début (html 2.0).
Une page html porte l'extension de fichier .html ou .htm

Pour transiter le plus rapidement possible sur des lignes téléphoniques à l'époque "très bas débit", on a adopté un format de texte très compact mais peu sophistiqué, sans fioritures comme on peut le visualiser dans le Bloc-notes ou Notepad.

De plus ce format ASCII a été amputé d'un bit (7 bits au lieu de 8) ce qui empêche l'utilisation de certains caractères spéciaux ou accentués (é, è, ê, à, ù...) pour lesquels il faudra passer par des codes particuliers.
- Mais le résultat est là :
"Html est un langage universel qui s'adapte à toutes les plate-formes : Windows, Macintoch, Unix, OS/2..."


COURS de PROGRAMMATION HTML, par SITECOM.BIZ Les navigateurs
Il existe de nombreux navigateurs qui ne gèrent pas tous les mêmes versions de html, on compte parmi eux :
Internet Explorer navigateur installé par défaut sur le système d'exploitation Windows,
Mozilla Firefox (ensemble de logiciels comprenant un navigateur et une application de messagerie)
Netscape
Opéra (navigateur alternatif)
Apple Safari (navigateur d'Apple pour MAc Os)
Konqueror
(navigateur Linux tournant sous le desktop KDE)


COURS de PROGRAMMATION HTML, par SITECOM.BIZ Principe du langage HTML
Le langage Html est composé de balises ou (tags) qui permettent de structurer le texte, de le mettre en forme et d'insérer des images.
Ces instructions sont le plus souvent de la forme :
<balise d'ouverture> texte </balise de fermeture>

Une balise correspond à une action et peut avoir des propriétés (ou attributs) indiquant comment l'action doit être effectuée.

Le plus souvent on trouve une balise d'ouverture :<>et une de fermeture : </>
La balise <b> détermine le caractère gras, par exemple pour mettre le mot Internet en gras on écrira :
<b>Internet</b>


COURS de PROGRAMMATION HTML, par SITECOM.BIZ Structure d'une page HTML
Pour qu'une page portant l'extension .html ou .htm soit interprêté correctement dans le navigateur, celle-ci doit posséder des balisesélémentaires dans un ordre précis exemple de code :

Les balises obligatoires du HTML
Tous les documents html débutent par la balise <HTML> et finissent par </HTML>,
Puis les balises <HEAD> et </HEAD> définissent l'entête du document.
On y trouve entre autres <TITLE> </TITLE> qui encadre le titre du document, puis les balises meta.
Les balises <BODY> et </BODY> encadrent le contenu du document, c'est à dire ce qui sera affiché par le navigateur, textes et images.


Autres balises HTML
Ouverture Fermeture Action
<a> </a> lien hypertexte
<b> ou <strong> </b> ou </strong> texte en gras
<blockquote> </blockquote> retrait de texte
<code> </code> code informatique
<frameset> </frameset> frames ou cadres
<font> </font> balise de texte
<hr> </hr> trait horizontal
<td> </td> cellule de tableau
<i> ou <em> </i> ou </em> texte en italique
<img> </img> insertion d'une image
<li> </li> élément de liste
<ol> </ol> liste
<p> </p> paragraphe
<strike> </strike> ligne barrant un texte
<style> </style> feuille de style
<sub> </sub> chiffre en indice
<sup> </sup> chiffre en exposant
<table> </table> tableau
<td> </td> cellule de tableau
<tr> </tr> ligne de tableau
<tt> </tt> texte télétype
<u> </u> ligne de sous-lignement
<ul> </ul> liste à puces

Il est toujours possible de consulter le code source d'une page web sur laquelle on se trouve, pour cela utiliser la commande "affichage-source", si cela ne fonctionne pas, enregistrer la page avec la commande "fichier-enregistrer sous" et l'ouvrir ensuite avec un éditeur html ou le bloc note de Windows.


Créer un tableau
Avec le Html, les tableaux servent non seulement à aligner des chiffres ou caractères mais surtout à placer des éléments à un emplacement voulu pour avoir une mise en page agréable à consulter.

Un tableau est composé de lignes et de colonnes formant les cellules du tableau.

balises obligatoires pour créer un tableau :
<table></table> : Début et fin de tableau
<tr></tr> : Début et fin de ligne
<td></td> : Début et fin de cellule.

exemple de code pour un tableau :
<table border="1" bordercolor="#CC2222">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

Commentaires
L'attribut border définit l'épaisseur du tableau, en le supprimant, la bordure n'apparaît plus.
<tr></tr> désignent une ligne du tableau
<td></td> une cellule.

Attributs de la balise <table>
<TABLE cellspacing=?> espace entre les cellules
<TABLE cellpadding=?> marge intérieure des cellules
<TABLE width="400"> ou <table width=40%> la largeur du tableau peut se définir en pixels ou en %
<TABLE bordercolor="#000000"> couleur de la bordure du tableau
<TABLE background="image.jpg"> définit une image en arrière plan
<TABLE bgcolor="#000000"> couleur de fond du tableau

Attributs de la cellule <td>
<TD bgcolor="#FFFFFF"> définit une couleur d'arrière plan
<TD background="image.gif"> définit une image d'arrière plan
<TD width="100" > définit la largeur d'une cellule
<TD height="100"> définit la hauteur d'une cellule
<TD align="left"> aligne le texte à gauche dans la cellule
<TD align="right"> aligne le texte à droite dans la cellule
<TD align="center"> aligne le texte au centre de la cellule (horizontal)
<TD valign="top"> aligne le texte en haut de la cellule
<TD valign="middle"> aligne le texte au milieu de la cellule (vertical)
<TD valign="bottom"> aligne le texte en bas de la cellule.


COURS de PROGRAMMATION HTML, par SITECOM.BIZ Les liens hypertexte
Avec le langage html vous pouvez créer des liens qui permettent d'atteindre :
- une autre page du site,
- un autre endroit de la page,
- un autre site Internet.
Le lien hypertexte est souvent visualisé par une main lorsque l'on passe le curseur de la souris dessus.

Syntaxe
<a href="nom de la page.htm">nom de la page</a>

Lien local
Il permettra de pointer vers un fichier se trouvant dans le site.
exemple
On admet içi que vos pages se trouvent à la racine du site !
<a href="index.htm">accueil</a>
le mot "accueil" clické vous emmenera à la page "index.htm" du site.

Lien interne
Il permet de se diriger vers un autre endroit de la même page ou d'une autre ; on l'appelle aussi "ancre"
<a name="top"></a> (définit la cible à atteindre) on ajoutera le lien dans la même page pour y pointer.
exemple
<a href="#top">haut de page</a>

on peut aussi pointer ce lien à partir d'une autre page
<a href="url#top">page choisie</a>

Lien externe
Chaque site Internet possède une adresse qui lui est propre, c'est donc l'adresse à atteindre qui devra être pointée sur le site
exemple
<a href="http://sitecom1.free.fr">Sitecom.biz</a>
le mot "Sitecom.biz" cliqué aboutira au domaine sitecom1.free.fr

Attributs de la balise <a>
target : indique la manière d'ouvrir la cible
_blank : ouvre la cible dans une autre fenêtre
_parent : ouvre la cible dans la fenêtre d'origine
title : permet d'afficher un texte lors du passage de la souris sur le lien
alt : permet d'afficher un texte lors du passage de la souris sur le lien (autres navigateurs)

exemple
<a href="http://sitecom1.free.fr" target="_blank" title="Cours de programmation Html">Sitecom.biz</a>

Lien vers un FTP
<a href="ftp://www.monsite/ftp1.com>ftp</a>

Lien de messagerie
Il est de forme :
<a href="mailto:sitecom1@free.fr">contact</ a>
Le fait de cliquer sur "contact" ouvrira le logiciel de messagerie du visiteur : Outlook Express ou un autre.
Si vous souhaitez (pour faciliter le tri à la réception) qu'un sujet précis s'inscrive automatiquement, il faudra rajouter ?subject= dans le code après l'adresse du destinataire.

exemple
<a href="mailto:webmaster@sitecom.biz?subject=demande%de% renseignement">liens-hypertexte</a>
Comme vous l'avez constaté, si vous désirez insérer des espaces dans le sujet il faudra les remplacer par le caractère %.


COURS de PROGRAMMATION HTML, par SITECOM.BIZ Insérer des images
Les formats
Les principaux formats d'images sur le Web sont le JPEG et le GIF.
- Le JPEG donne souvent un meilleur résultat pour les dégradés et les photos,
- le GIF est plus réservé aux logos, puces, et permet d'afficher des images animées ou des bannières publicitaires.; il est limité à 256 couleurs, ce qui permet un chargement plus rapide de la page Web.

Le meilleur format est donc celui qui donnera le meilleur résultat à poids égal car plus la taille des images sera grande et plus le temps de chargement de la page Web sera long.
(on appelle poids, la taille du fichier exprimée en kilo-octets).

Une page html ne devrait pas avoir un poids (total) de plus de 70ko env pour charger correctement à bas débit (modem 56 k) même si le haut débit tend à se généraliser en France.

Balises des images
C'est <img> qui sert à afficher une image dans la page Web

exemple
<img src="logo.jpg">
Le compément src indique le chemin où est stockée l'image.

Attributs de la balise <img>
Il s'agit pour l'essentiel des dimensions et de commentaires.
width
: largeur de l'image,
height : hauteur de l'image,
border : définit l'épaisseur de la bordure de l'image,
background : définit l'image d'arrière plan d'une page Web, d'un tableau ou d'une cellule.
alt ou title : permet d'afficher un texte quand le pointeur se trouve sur l'image ou à la place de l'image si elle n'est pas affichée.

exemples
<img src="logo.jpg" alt="Logo de Sitecom.biz ">
<img src="logo.jpg" width="50" height="30">
<img src="photo.jpg" border="0"> (pas de bordure)
<body background="fond-page.jpg"> (ici pour toute la page Web)

Inérer un lien sur une image
<a href="http://www.monsite.com/tarifs.htm"><img src="photo.jpg"
alt="photo d'un produits "></a>


COURS de PROGRAMMATION HTML, par SITECOM.BIZ Les codes des couleurs
Voici les codes des principales couleurs utilisées sur Internet.
Chacune de ces combinaisons doit être précédée du signe #


PALETTE de COULEURS INTERNET

000000

202020

404040

606060

808080

a0a0a0

c0c0c0

e0e0e0

ffffff

000000

000020

000040

000060

000080

0000a0

0000c0

0000e0

0000ff

002000

002020

002040

002060

002080

0020a0

0020c0

0020e0

0020ff

004000

004020

004040

004060

004080

0040a0

0040c0

0040e0

0040ff

006000

006020

006040

006060

006080

0060a0

0060c0

0060e0

0060ff

008000

008020

008040

008060

008080

0080a0

0080c0

0080e0

0080ff

00a000

00a020

00a040

00a060

00a080

00a0a0

00a0c0

00a0e0

00a0ff

00e000

00e020

00e040

00e060

00e080

00e0a0

00e0c0

00e0e0

00e0ff

00ff00

00ff20

00ff40

00ff60

00ff80

00ffa0

00ffc0

00ffe0

00ffff

200000

200020

200040

200060

200080

2000a0

2000c0

2000e0

2000ff

202000

202020

202040

202060

202080

2020a0

2020c0

2020e0

2020ff

204000

204020

204040

204060

204080

2040a0

2040c0

2040e0

2040ff

206000

206020

206040

206060

206080

2060a0

2060c0

2060e0

2060ff

208000

208020

208040

208060

208080

2080a0

2080c0

2080e0

2080ff

20a000

20a020

20a040

20a060

20a080

20a0a0

20a0c0

20a0e0

20a0ff

20e000

20e020

20e040

20e060

20e080

20e0a0

20e0c0

20e0e0

20e0ff

20ff00

20ff20

20ff40

20ff60

20ff80

20ffa0

20ffc0

20ffe0

20ffff

400000

400020

400040

400060

400080

4000a0

4000c0

4000e0

4000ff

402000

402020

402040

402060

402080

4020a0

4020c0

4020e0

4020ff

404000

404020

404040

404060

404080

4040a0

4040c0

4040e0

4040ff

406000

406020

406040

406060

406080

4060a0

4060c0

4060e0

4060ff

408000

408020

408040

408060

408080

4080a0

4080c0

4080e0

4080ff

40a000

40a020

40a040

40a060

40a080

40a0a0

40a0c0

40a0e0

40a0ff

40e000

40e020

40e040

40e060

40e080

40e0a0

40e0c0

40e0e0

40e0ff

40ff00

40ff20

40ff40

40ff60

40ff80

40ffa0

40ffc0

40ffe0

40ffff

600000

600020

600040

600060

600080

6000a0

6000c0

6000e0

6000ff

602000

602020

602040

602060

602080

6020a0

6020c0

6020e0

6020ff

604000

604020

604040

604060

604080

6040a0

6040c0

6040e0

6040ff

606000

606020

606040

606060

606080

6060a0

6060c0

6060e0

6060ff

608000

608020

608040

608060

608080

6080a0

6080c0

6080e0

6080ff

60a000

60a020

60a040

60a060

60a080

60a0a0

60a0c0

60a0e0

60a0ff

60e000

60e020

60e040

60e060

60e080

60e0a0

60e0c0

60e0e0

60e0ff

60ff00

60ff20

60ff40

60ff60

60ff80

60ffa0

60ffc0

60ffe0

60ffff

800000

800020

800040

800060

800080

8000a0

8000c0

8000e0

8000ff

802000

802020

802040

802060

802080

8020a0

8020c0

8020e0

8020ff

804000

804020

804040

804060

804080

8040a0

8040c0

8040e0

8040ff

806000

806020

806040

806060

806080

8060a0

8060c0

8060e0

8060ff

808000

808020

808040

808060

808080

8080a0

8080c0

8080e0

8080ff

80a000

80a020

80a040

80a060

80a080

80a0a0

80a0c0

80a0e0

80a0ff

80e000

80e020

80e040

80e060

80e080

80e0a0

80e0c0

80e0e0

80e0ff

80ff00

80ff20

80ff40

80ff60

80ff80

80ffa0

80ffc0

80ffe0

80ffff

a00000

a00020

a00040

a00060

a00080

a000a0

a000c0

a000e0

a000ff

a02000

a02020

a02040

a02060

a02080

a020a0

a020c0

a020e0

a020ff

a04000

a04020

a04040

a04060

a04080

a040a0

a040c0

a040e0

a040ff

a06000

a06020

a06040

a06060

a06080

a060a0

a060c0

a060e0

a060ff

a08000

a08020

a08040

a08060

a08080

a080a0

a080c0

a080e0

a080ff

a0a000

a0a020

a0a040

a0a060

a0a080

a0a0a0

a0a0c0

a0a0e0

a0a0ff

a0e000

a0e020

a0e040

a0e060

a0e080

a0e0a0

a0e0c0

a0e0e0

a0e0ff

a0ff00

a0ff20

a0ff40

a0ff60

a0ff80

a0ffa0

a0ffc0

a0ffe0

a0ffff

c00000

c00020

c00040

c00060

c00080

c000a0

c000c0

c000e0

c000ff

c02000

c02020

c02040

c02060

c02080

c020a0

c020c0

c020e0

c020ff

c04000

c04020

c04040

c04060

c04080

c040a0

c040c0

c040e0

c040ff

c06000

c06020

c06040

c06060

c06080

c060a0

c060c0

c060e0

c060ff

c08000

c08020

c08040

c08060

c08080

c080a0

c080c0

c080e0

c080ff

c0a000

c0a020

c0a040

c0a060

c0a080

c0a0a0

c0a0c0

c0a0e0

c0a0ff

c0e000

c0e020

c0e040

c0e060

c0e080

c0e0a0

c0e0c0

c0e0e0

c0e0ff

c0ff00

c0ff20

c0ff40

c0ff60

c0ff80

c0ffa0

c0ffc0

c0ffe0

c0ffff

e00000

e00020

e00040

e00060

e00080

e000a0

e000c0

e000e0

e000ff

e02000

e02020

e02040

e02060

e02080

e020a0

e020c0

e020e0

e020ff

e04000

e04020

e04040

e04060

e04080

e040a0

e040c0

e040e0

e040ff

e06000

e06020

e06040

e06060

e06080

e060a0

e060c0

e060e0

e060ff

e08000

e08020

e08040

e08060

e08080

e080a0

e080c0

e080e0

e080ff

e0a000

e0a020

e0a040

e0a060

e0a080

e0a0a0

e0a0c0

e0a0e0

e0a0ff

e0e000

e0e020

e0e040

e0e060

e0e080

e0e0a0

e0e0c0

e0e0e0

e0e0ff

e0ff00

e0ff20

e0ff40

e0ff60

e0ff80

e0ffa0

e0ffc0

e0ffe0

e0ffff

ff0000

ff0020

ff0040

ff0060

ff0080

ff00a0

ff00c0

ff00e0

ff00ff

ff2000

ff2020

ff2040

ff2060

ff2080

ff20a0

ff20c0

ff20e0

ff20ff

ff4000

ff4020

ff4040

ff4060

ff4080

ff40a0

ff40c0

ff40e0

ff40ff

ff6000

ff6020

ff6040

ff6060

ff6080

ff60a0

ff60c0

ff60e0

ff60ff

ff8000

ff8020

ff8040

ff8060

ff8080

ff80a0

ff80c0

ff80e0

ff80ff

ffa000

ffa020

ffa040

ffa060

ffa080

ffa0a0

ffa0c0

ffa0e0

ffa0ff

ffe000

ffe020

ffe040

ffe060

ffe080

ffe0a0

ffe0c0

ffe0e0

ffe0ff

ffff00

ffff20

ffff40

ffff60

ffff80

ffffa0

ffffc0

ffffe0

ffffff



COURS de PROGRAMMATION HTML, par SITECOM.BIZ Les feuilles de style
Les feuilles de style ou css (cascading style sheets = feuilles de style en cascade) permettent de définir une fois pour toute la présentation d'une page web tant au niveau du contenu que des liens hypertexte.
Il existe plusieurs types de feuilles de style :

les styles "dans le texte"
Ils ne sont à utiliser que pour une petite portion de texte, en définissant un style qui n'est pas amené à se retrouver dans une autre partie de la page ou dans d'autres pages du site.

exemple
<span Style="Font: 14px Arial; color:red;">Attention !</span>
mettra en rouge, dans la police Arial, et en taille 14 pixels, le mot : Attention !

Attention
On peut appliquer un style à de nombreuses balises HTML, sauf : html, head, title, style, script, meta, base, basefont, param.

la feuille de style interne à la page
Utilisation conseillée lorsque les styles reviennent régulièrement dans une page, mais ne concerne pas les autres pages du site.
On définit alors la feuille entre les balises <head> et </head> de la page.

exemple
<style type="text/css">
<!--

.Style5 { color: #003399;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
-->
</style>


Pour l'appliquer au texte on ajoutera dans ce style dans la balise <span class="style5">

exemple
<span class="style5">essai style de page</span>

L'attribut class peut être également introduit dans les balises <p>, <a>,<div>

modifier l'arrière plan d'une page
On peut aussi modifier l'arrière plan d'une page web en insérant un style entre les balises <head> et </head> de l'en-tête.

exemple
<style type="text/css">
body {
background-image: url(images/
nomdelimage.jpg);
}
</style>


la feuille de style externe à la page
Il s'agit d'un fichier portant l'extension .css qui contiendra tous les styles communs au site et qui sera appelé par chaque page.

L'intérêt, est que pour changer un paramètre de présentation sur tout le site en même temps, il suffira de le modifier dans ce fichier.

exemple
<link href="monsite.css" rel="stylesheet" type="text/css" media=all>
Placé juste avant la balise </head> de chaque page, ira charger les informations de style dans le fichier : monsite.css

insérer une couleur d'arrière plan
<style type="text/css">
body {
background-color:
#339966;
}
</style>



COURS de PROGRAMMATION HTML, par SITECOM.BIZ Les meta tags
Utilité des metas tags ?
Les meta-tags ou meta-balises sont des balises qui se placent dans l'en-tête du code html, entre les balises <head> et </head>.
Elles contiennent des informations d'identification et de description du site, qui seront analysés par les robots des moteurs de recherche.
D'où l'importance de les installer correctement.

exemple
<title>Apprendre à programmer en html </title>
<meta name="Description" content="Auto-apprentissage du langage de programmation HTML">
<meta name="Keywords" content="cours html,programmation site web... ">
<meta name="Author" content="P.H">
<meta name="Identifier-URL" content="http://sitecom1.free.fr">
<meta name="Copyright" content="Sitecom.biz">
<meta name="Robots" content="all">


COURS de PROGRAMMATION HTML, par SITECOM.BIZ Création de pop-up
Bien que pour cette fonction, nous sortions de la programmation html pour entrer dans le javascript, voici ce qu'il faut savoir pour créer sur votre site ces petites fenêtres qui s'ouvrent le plus souvent contre votre gré sous forme de publicité.

Programmer les pop-up


Notre annonceur Déco-2000
SITECOM.BIZ
Tel : 06 23 56 97 13
Copyright © Tous droits réservés.
Siret 451 486 831 00014 - TVA Intra : FR35451486831


nievre 58
Création de site, site Internet, réferencement de sites, location longue durée de sites, audit Internet, boutique virtuelle Internet, annonce immobilière Internet, mise à jour de site, promotion de sites web, veille concurrentielle, protection de pages web, prospection commerciale Internet, informatique nivernaise, Mise à jour rapide, évolution de sites déjà existants, communication commerciale, Publicité Internet, agence de publicité, publicité sur Internet, referencement de sites, hebergement de sites, Web agency Nievre, infographie et création de sites, optimisation de pages web, publicité par email, E-mailing promotionnel, E-mailing B to B, creation de rédactionnel Internet, reférencer son site, promouvoir son site, communication sur Nevers, promotion activités Nièvre, conseil en communication, sécurite informatique, services aux mairies, services aux associations, développer son commerce par la création de site, services aux collectivites, conseils réferencement et création de site pour entreprises, activites pre-presse et création de site, infographie, services Internet, Création de site web agences immobilières, référencement de votre site sur le Web, formation Internet.