terminal-media.fr
icon icon facebook icon icon icon icon
cross

 
rss
 
SERVICES

Comment construire son site web en HTML et CSS

<!DOCTYPE html>
<html lang="fr">

<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Titre de la page</title>
</head>

<body>

</body>
</html>

Nous allons travailler à partir du site suivant

http://www.terminal-media.fr/dev/beatles/index.htm

qui est le plus simple pour commencer



Vous allez sur le site ci-dessus avec votre navigateur (Internet explorer pour l'exemple). Vous sélectionnez dans le menu : affichage, puis source. Vous affichez la source, c’est-à-dire le code et vous observez les premières lignes. Regardez le fichier en haut entre les balises <head> et </head> cela s'appelle le doctype il y a encore d'autres choses ce sont des meta-words. Pour l'instant, nous allons rester garder le doctype minimum.

Récupèrerez l'intégralité du texte en haut de cette page, le texte en gras dans le bloc-notes de Windows (notepad) faites un copier/coller intègrez-le dans le bloc-notes et enregistrez-le tout dans un fichier et appelez-le : index.htm. Assurez vous dans l'option type de fichier que vous avez sélectionné : Tous les fichiers. C'est votre premier fichier HTML . Gardez-le, nous allons travailler avec lui

Ouvrez-le dans votre navigateur, donc allez chercher le fichier : index.htm

Regardez le résultat, il n'y a rien, c'est normal

Dans votre fichier (avec le bloc-note windows) rajoutez entre les balises <body> et </body>

<p>Mon curriculum-vitae sur Internet>/p>

Le <p> veut dire paragraphe. c'est une balise HTML, un crochet qui s'ouvre, un p, un crochet qui se ferme. Après la balise, on y place le texte : mon curriculum-vitae sur Internet, on ferme la balise avec le crochet, la barre oblique et le crochet de fermeture : </p>

Enregistrez votre fichier index.htm, reprenez votre navigateur, ouvrez le fichier index.htm dans votre navigateur. Que voyez-vous ?
La phrase en haut à gauche : mon curriculum-vitae sur Internet. Bravo vous avez créé votre première page web.

Mes sites
http://www.terminal-media.fr/dev/jpf-com/
http://www.terminal-media.fr/dev/news-info/

Nous continuons avec l’intégration de fichier CSS cette fois-ci avec appel d'un fichier externe appelé : style.css


Reprenons notre fichier : index.htm
Cette ligne ci-dessous doit être placé entre les balises <head> et </head> de votre le fichier index.htm, il faut donc, rajouter la ligne ci-dessous :

<link href="style.css" rel="stylesheet" type="text/css"/>

Observons cette ligne. Link veut dire lien, on appelle donc le fichier style.css qui se trouve à la racine de votre site

Puisque la page html index.htm appelle le fichier style.css, il faut indiquer où se trouve la déclaration d'instruction. Dans la balise d'ouverture de votre texte : mon curriculum-vitae sur Internet, il faut déclarer la "class" : maphrase01. maphrase01 est un nom simple qui permet de s'en souvenir facilement.

Voici l'instruction complète :

<p class="maphrase01">mon curriculum-vitae sur Internet</p>

Ajoutez l'instruction ci-dessus dans votre fichier index.htm, toujours entre les balises <body> et </body>

Maintenant, nous allons créer un nouveau fichier, ce sera un fichier de mise en page appellé style.css Le fichier style.css est placé dans le même répertoire que la page html, il est unique, il contient toutes les instructions des feuilles de styles (CSS, Cascading Style Sheet). Enregistrez le texte ci-dessous dans un fichier avec l’extension .css. Assurez vous dans l'option type de fichier que vous avez sélectionné : Tous les fichiers. Nommez-le : style.css placez-le dans le dossier qui contient votre fichier index.htm.

  .maphrase {
position: absolute ;
top : 60px ;
left : 50px ;
witdth : 40px ;
height : 40px ;
border : 1 solid black ; }



N'oubliez pas le point avant le mot maphrase, c'est important

Voici ce que contient votre premier fichier css, regardons-le de plus près 

Au début, il y a la nomination de votre class le point maphrase suivit d’une accolade. (Ne jamais l’oublier après le nom de la class elle s’ouvre, elle se ferme en bas de la déclaration; ni les deux points ni les points-virgules, la syntaxe doit être parfaite, sinon, ça ne marche pas)

Ensuite, il y a l’instruction css position: absolute; avec le point-virgule qui ferme l’instruction. Pour l’instant nous allons rester avec "absolute" c’est suffisant.

Ensuite vous avez top (haut) et left (gauche) ce sont des instructions de positionnement dans votre page (px est l’abréviation de pixel ). Plus bas, vous avez width (largeur) et height (hauteur) et une valeur exprimée en pixel, avec px, ici 40:px; donc 40 pixels

Revenez à votre fichier index.htm. Rajoutez du texte comme dans ce paragraphe

<p class="montexte">
S'il avait voulu l'être, il l'aurait fait, il l'aurait dit depuis un certain temps. Vous êtes responsable de cette phrase et qu'il a regardé le journal télévisé, hier, contre le Mali musulman qui est au cœur d'une polémique. Là, nous avons un bidonville et les gamins ne vont pas à l'école, on me voit moins et tout a commencé le 13 mars dernier. Parce qu'écrire que ne pas invité dieudonné sur un média grand public c'est une faute professionnelle, c'est hallucinant.Car pour faire un débat avec nab, c'était juste ça au départ et vous passez sur France 2 avec une commande historique. Nous allons ouvrir le journal et comme je voudrai une église pauvre pour les pauvres, notamment disponible avec 40% de sel en moins, vous avez utilisé le mot historique, que Gérard depardieu ne nomme pas du tout et ce dans aucune télévision ou radio française. Oui, Gérard nous allons vous interviewez parce qu'il il avait fait des courses juste avant et qu'il voulait absolument qu'on voit la baguette de pain, qu'il a bien acheté et c'est un rituel.
</p>

Donc nous récapitulons : Dans votre fichier html, il y a une déclaration de balise de type paragraphe :<p> avec la déclaration d'une class, en l'occurence le nom: maphrase.

<p class="maphrase">mon curriculum-vitae sur Internet</p>

Cette déclaration on la retrouve dans le fichier css qui donne l’ordre au navigateur de placer la phrase « mon curriculum-vitae...» d’être à 60 pixels du haut du navigateur et à 50 pixels à gauche dans la page html, Essayez avec des valeurs différentes (des nombres différents) et vous verrez votre phrase sera à l’endroit où vous le souhaitez.

C’est valable pour à peu près pour toutes les balises html, mais attention pas toutes, alors prudence dans son exploitation

Faites des tests

Le livre que je recommande doit contenir les spécifications HTML et CSS avec l'ensemble des balises et les instructions CSS pour bien faire chercher les éditions des versions les plus récentes d'html et des css. Il est indispensable pour aller vite et plus loin, sinon sur Internet, c’est plutôt assez mal documenté ou incompréensible, faites l'expérience... Toutes les balises html 5 et les instructions css ce n’est pas à l’infini, vous vous en sortirez, haut la main pour réalisez un site complet si vous serrez les dents. Et vous verrez ensuite avec un peu de pratique c’est simple et très utile. Une fois que vous aurez le squelette de votre site tout est affaire de copier/coller et de quelques lignes de code. Et un site c’est un « Must have »


LE HTML

Les balises de texte pour :

Mettre en gras <b>gras</b>
Mettre en italique <i>italique</i>
Barré le texte <del>barré</del>


Il y en a d'autres en css

Vous verrez tout ça très bien et seul avec le livre pour approfondir

Pour effectuer un saut de ligne, il faut utiliser la balise <BR> (en minuscule c’est mieux pour les moteurs de recherche) donc <br> en minuscule c'est mieux. C’est une balise seule elle est utilisée pour les sauts de ligne

Exemple :

<p class="maphrase">
mon curriculum-vitae
<br>
<br>
sur Internet
</p>


Autre chose pour séparer votre texte avec une fine ligne grise, il y a le séparateur : <hr>

La balise séparatrice est <hr> comme la balise <br> elle est unique, elle ne ferme pas.
la balise HR ça donne ceci :

Préambule

Pour bien préparer votre travail, il faudra faire un dessin d'une arborescence simple avec les sujets que vous voulez aborder dans ton site. J’ai l’habitude de travailler avec un dossier par sujet abordé puis développer par la suite, c’est plus simple à retrouver avec tout ce qu’ils contiennent puis dans chacun des dossiers où sont placé les pages html il faut créer un dossier qui contiendra les images (donc un dossier nommé images) voici un schéma pour comprendre
  • arborescence
Mais pour l'instant ne vous soucier pas trop des dossiers, placer vos images et vos fichiers dans le même repertoire.

Les Images

<img src="nom-image-type-jpeg.jpg" width="640" height="500" alt="la description de mon image" />

Dans cet exemple l'image est placé dans le même dossier que le fichier index.htm. La taille et la largeur sont exprimés en pixels

Les liens

Lien local

<a href="mon-lien-vers-une-autre-page.htm" title="ce texte s'affiche quand la souris survole le lien">Mon lien vers...</a>

Lien international ou url

<a href="http://terminal-media.fr/index.htm" title="ce texte s'affiche quand la souris survole le lien">Mon site : la page d'accueil</a>

Lien adresse email

<a href="mailto:mon.nom@chez-moi.com">Mon Email</a>

LES CSS

Les déclarations CSS de position sur la page
position: absolute;
top: 50px;
left : 50px;
50 pixels à titre d'exemple ça peut-être plus ou moins

Les déclarations CSS d'encadrement

width : 400px;
height : 200px;
border : 1px solid black;
400 et 200 pixels à titre d'exemple ça peut-être plus ou moins. Border (Traduction : bordure, 1 pixel, ligne continue, couleur noir)

Les déclarations CSS de texte

Police
font-family: arial, helvetica, geneva, sans-serif;
Polices pour tous les écrans mac, pc, smartphone, tablettes

Taille police
font-size: 10px;
10 pixels à titre d'exemple ça peut-être plus ou moins

Bon courage pour le travail, c'est du solide et ça dure 20 ans
Page précédente Revenir à la rubrique Page suivante