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

../../dev/atohm-tv/index.html

qui est le plus simple pour commencer

Vous allez sur le site ci-dessus avec votre navigateur préféré. Vous cherchez dans les menus : 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 et des informations sur les fichiers css avec le chemin où ils se trouvent. Pour l'instant, nous allons rester garder le doctype minimum.

Continuer sans le site atohm-tv et récupèrez l'intégralité du texte en haut de cette page-ci, avec le texte en gras, faites un copier/coller intègrez-le dans le bloc-notes et enregistrez-le tout dans un dossier que vous avez crée, appelez-le : index.html. Assurez-vous que dans votre application bloc-notes, l'option type de fichier est bien : Tous les fichiers et type : UTF-8 avec nomenclature. N'oubliez surtou pas l'extension .html. Voilà, c'est fait, c'est votre premier fichier HTML . Gardez-le, nous allons travailler avec lui.

Ouvrez-le dans votre navigateur, donc allez chercher le fichier : index.html et déposez-le sur le navigateur

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

Dans votre fichier (bloc-notes) rajoutez entre les balises <body> et </body>

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

Le <p> veut dire paragraphe. c'est une balise HTML, avec 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.html, reprenez votre navigateur, déplacer le fichier index.htm sur votre navigateur. Que voyez-vous ?
La phrase en haut à gauche : mon curriculum-vitae sur Internet. Bravo vous avez créé votre première page web.

Les petits sites
../../dev/jpf-com/
../../dev/news-info/
Nous continuons avec l’intégration de fichier CSS cette fois-ci avec appel d'un fichier externe appelé : style.css qui se trouve dans le même dossier que vos l'ensemble de vos fichiers
Reprenons notre fichier : index.html
Cette ligne ci-dessous doit être placé entre les balises <head> et </head> de votre le fichier index.html, 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 à le même dossier que l'ensemble des fichiers de votre page

Puisque la page HTML index.html 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.html, 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 peut-être 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, vous avez sélectionné : tous les fichiers. Nommez-le : style.css et placez-le dans le dossier qui contient votre fichier index.html.

  .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 le nom de votre class le point, puis le mot maphrase suivit d’une accolade. (Ne jamais l’oublier après le nom de la class, elle s’ouvre, elle ne se ferme qu'en bas de la déclaration; avec ni les deux points ni les points-virgules de fermetures, la syntaxe doit être parfaite, sinon, cela 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.

Puis, vous avez top (haut) et left (gauche) ce sont des instructions de positionnement dans votre page (px est l’abréviation du mot pixel qui est la référence en matière d'espace entre deux points de l'écran ). 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.html. 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 en haut de la fenètre du navigateur et à 50 pixels du bord gauche dans la page html, Essayez avec des valeurs différentes (des nombres différents) et vous verrez votre phrase à 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 utilisation

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 avec les versions 5.0 du html et les CSS 3.0, sans trop de problèmes de compatibilité. Pour réalisez un site complet si vous serrez les dents. 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 se ferme pas.
la balise HR cela 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 votre site. J’ai l’habitude de travailler avec un dossier par sujet abordé puis vous développez par la suite, c’est plus simple à retrouver avec tout ce qu’ils contiennent dans chacun des dossiers où sont placés les pages html, il faut donc 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 souciez 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ée dans le même dossier que le fichier index.html. La taille et la largeur sont exprimées 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-radio.com/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 (avec une traduction, ça donne cela : 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: 12px;
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