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>

Pour bien faire, récupérez l'intégralité du texte ci-dessus qui est en gras, avec une sélection du code, puis clic-droit, faites copier et coller-le dans une page vierge de l'éditeur de texte appelez bloc-notes (notepad en anglais). Dans le haut de la page du bloc-notes, faites coller (notepads) et enregistrez-le tout dans un fichier sur votre "bureau" et appelez-le : index.html. Assurez-vous que l'option "type de fichier" que vous avez sélectionnés est : UTF-8. C'est votre premier fichier HTML . Gardez-le, nous allons travailler avec et sur ce document.

Allez chercher le fichier : index.html sur le bureau et faites un double-clic dessus. Il s'affiche dans une page vierge dans votre navigateur.

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

Dans votre fichier (et le bloc-notes windows) rajoutez entre les balises (la balise est un mot en anglais avec deux crochets <> <body> et </body>

Mon curriculum-vitae sur Internet>/p>

Le  veut dire paragraphe. c'est une balise HTML, un crochet qui s'ouvre, un p, un crochet qui se ferme. Après la balise, l'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 : 

Enregistrez votre fichier index.html, reprenez votre navigateur, ouvrez le fichier index.html 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.

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

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 à la racine de votre site, donc il faudra le placer sur le bureau à coté du fichier "index.html".

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 :

mon curriculum-vitae sur Internet

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, (index.html) comme précisé plus haut, ce dossier devra dans cet exemple être sur le bureau. 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.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 la nomination de votre class "le point" puis "maphrase" suivit d’une accolade qui s'ouvre {. (Ne jamais l’oublier après le nom de la class, elle s’ouvre, elle se ferme en bas de la déclaration. N'oublier pas non plus 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, c'est une unité de mesure ). 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


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, l'on me voit moins et tout a commencé le 13 mars dernier. Parce qu'écrire que ne pas inviter 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 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.


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

mon curriculum-vitae sur Internet

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, je vous conseil de 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 gras
Mettre en italique italique
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   (en minuscule c’est mieux pour les moteurs de recherche) donc   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   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

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é dans le même dossier que le fichier index.html. 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

Correction des "bugs" le 01/04/2023