Un mini site Web tout en HTML et CSS

Ayant écrit un mini site Web, pour un utilisateur qui venait de s'enregistrer chez un hébergeur, il m'est venu à l'idée de décrire un peu mon expérience. 
Je n'ai cependant déposé ici qui quelques éléments, qui m'ont semblés importants, et je n'ai pas voulu commencer par un traditionnel début en programmation HTML/CSS, que l'on retrouvera par exemple sur w3schools.com.

C'est assez simple et très peu coûteux de faire les démarches pour recevoir un nom de domaine, une adresse email et un peu d'espace Web pour une ou quelques pages Web simples, et sans doute un peu minimalistes.
Avec un espace disque de 10Moctets, il est quand même possible de faire un joli site Web, mais évidemment sans aucune ressource comme Wordpress, Joomla voire même mySQL.

Le point de départ:

  • L'éditeur Notepad++. Sa coloration syntactique est vraiment agréable où l'on voit rapidement les fautes, comme des fins de balises oubliées ou mal codées.
  • Google search évidemment (mais attention à ces jolis articles incroyablement précis ... mais où ils ont oublié par exemple qu'Apple, Safari et les smartphone iPhone existaient ... et que cela ne fonctionnaient pas bien du tout sur ces appareils, pour des paramètres comme vh et vw (les unités du viewport)! Moi-même je n'ai jamais eu d'iPhone!
  • Quelques bonnes connaissances en HTML et aussi en CSS ... plutôt nouveau pour moi. Le résultat est sans doute loin d'être parfait, mais c'est joii et c'est l'essentiel. 

Le site Web dont je parle:  https://www.ornai.ch/ (Ornaï interior design)

J'ai eu quelques tentations d'utiliser du javascript, par exemple pour le formattage suivant le type d'appareil, mais je l'ai volontairement laissé de côté.

Le point de départ

J'ai reçu un certain nombre de photos et un document PDF préparés sur un MacBook : 5 photos et un PDF avec des demandes de textes avec des polices de caractères dont je n'avais jamais pas entendu parler!
La première photo faisait déjà presque 10 Moctes, dont la limite de quota sur ce site minimum et presque gratuit!
Lorsqu'on décide de souscrire à un nom de domaine, il est relativement aisé, pour un coût modique, de trouver un hébergeur qui va nous fournir la messagerie et un mini serveur Web sans possibilité d'y installer des outils comme Wordpress ou Joomla.  

Il fallait absolument que la présentation sur smartphone soit impeccable, donc la priorité avant le PC ou le Mac.

Le site Web a été construit avec une seule page HTML, c'est à dire avec le fichier index.html qui sera normalement activé, lorsqu'il est déposé sur la racine d'un hébergeur Web.

Au fichier index.html, j'ai évidemment associé une feuille de style styleE.css dans le répertoire css.

Ce qui n'est pas expliqué ici

Je n'indiquerai pas ici comment le lecteur pourra récupérer le fichier index.html du site http://www.ornai.ch, ni le fichier styleE.css ou encore les images et les polices, et ceci depuis leurs répertoires spécifiques.
Si quelqu'un veut faire ce travail, il devra avoir déjà les connaissances suffisantes et aussi pour installer les outils décrits ici.

Le premier travail sera de retirer les contenus des textes des balises meta, title et h1.
Ces contenus sont utilisés pour le référencement sur le Web.

Lorsqu'on développe sous Joomla ou Wordpress, que l'on veut commencer sur un PC en local, il sera nécessaire d'installer un serveur Web local.
Ici on n'a pas besoin. Il suffira de créer un répertoire de travail, de déposer le fichier index.html et de créer les sous-répertoires nécessaires.
Moi-même j'ai des associations dans mon explorateur pour les fichiers .html pour les visionner dans Firefox et les ouvrir dans Notepad++.
C'est pareil pour les .css associés à Notepad++.

Pour les images, j'utilise paint.net. C'est trop facile pour ce travail où il faut parfois redimensionner les images ou sélectionner un bloc particulier.

Lorsque le site a été terminé, j'ai évidemment fait un archivage de tous les fichiers. En cours de développement, j'ai souvent conservé mon travail afin de revenir sur des détails de style pour repasser à une version précédente.

Le gros avantage d'une feuille de style est de parvenir à écrite une page index.html qui contient le minimum de code et bien lisible lors de l'édition. On le voit très bien avec les blocs de texte en <font1> et <font2> et les images principales.

Des polices peu traditionnelles

Lorsque j'ai reçu la spécification des polices de caractères, j'ai été évidemment troublé avec ces trois qu'on me demandait ... vraiment (pas le choix):

'American Typewriter Light'
'American Typewriter Regular'
'
Chaparral Pro Regular'

Il me fallait alors les trouver quelque part et les installer! Je n'ai pas dû chercher trop longtemps: https://fontsgeek.com/

Tous les tests ont été réalisés sur un PC avec Windows 10 et des browsers comme Google Chrome, Firefox, Edge de Microsoft, Opera et même la dernière version de Safari existante sous Windows.
Le fichier index.html peut-être déposé dans n'importe quel répertoire d'un disque et visionné avec un browser et un URL typiquement comme file:///D:/SiteWeb/index.html.
Les polices seront alors déposées dans le sous-répertoire webfonts.

Je prendrai un exemple avec la police défini en couleur grise (color: #666666;) pour les textes en allemand.
La définition de la police est indiquée dans le fichier styleE.css:

@font-face {
font-family: 'American Typewriter Light';
font-style: normal;
font-weight: normal;
src: local('American Typewriter Light'), url('../webfonts/American Typewriter Light.ttf') format('truetype');
}

ainsi que la balise font2 qui sera utilisée dans index.html

font2 {
font-family: 'American Typewriter Light';
color: #666666;
font-size: 40px;
font-weight:bold
}

La raison de mettre cette police en gras (bold), c'est qu'elle est vraiment fine (light).

Les images

N'ayant à disposition sur notre hébergeur que 10 Moctets, il a fallu se concentrer sur la dimension des images en gardant une très bonne qualité.
Cependant, avec ce quota minimaliste, il est quand même possible d'installer pas mal d'images et évidemment beaucoup de texte (ce qui n'est pas trop la cas ici).
Un outil comme paint.net permet de sauvegarder les images en gardant la même dimension et en diminuant la qualité (sauf pour l'image logo où j'ai vraiment voulu conserver la meilleure qualité), en spécifiant une valeur de 60.
J'ai fait quelques essais pour vérifier cette qualité sur un smartphone de dernière génération.   

Voir ci-dessous le sujet sur le référencement.

Apparence smartphone ou PC

C'est la priorité que nous avons donnée: une belle apparence sur un Smartphone et convenable sur un PC. Comme déjà expliqué ci-dessus, nous avons vérifié l'apparence de la page Web sur un PC, avec différents navigateurs.
Mais c'est évidemment impossible de le faire sur un smartphone sans avoir effectué une installation sur le site définitif.
Une possibilité est d'installer par exemple un serveur comme Wampserver (https://www.wampserver.com/) pour permettre alors avec son réseau domestique et le WiFi de visionner, depuis un smartphone, la présentation de cette page et de ses images.
L'URL à activer sur son smartphone sera alors quelque chose comme http:/198.168.1.xxx/MonSite (adresse IP du serveur), pour un server wamp avec le port 80 par défaut et le fichier index.html et tous les répertoires nécessaires déposés dans le répertoire MonSite de la racine du serveur Web.  
 
Le lecteur pourra examiner la feuille de style CSS css/styleE.css.
Les balises body, font1font2 et img sont definies ou redéfinies dans styleE.css.
Ces quatre balises sont suffisantes pour l'écriture d'une page index.html simple et clair comme ici.
Quelques références ont été indiquées dans mon document Quelques références HTML et CSS.

La première chose demandée, à cause des images sur toute la largeur, est de mettre deux petites marges à gauche et à droite. avec border-left: 15px solid #FFFFFF; et border-right: 15px solid #FFFFFF; dans la balise BODY.
La couleur de fond du BODY ou des marges est pratique. Lors des vérifications, pendant la préparation du site sur son PC, on peut y mettre par exemple des FFFF00 ou 00FFFF pour voir les effets.

Le plus important sans doute dans  styleE.css, c'est vraisemblablement les blocs de code dans:

@media screen and (orientation:portrait) {

et

@media screen and (orientation:landscape) {

où l'on modifiera certaine caractéristique, comme les image à 100% en orientation portrait et 60% pour le portrait pour la largeur prise par l'image.
La grandeur des polices a aussi été adaptée!

Référencement Google Search

Comme déjà indiqué ci-dessus, si on utilise la page http://www.ornai.ch/ telle quelle, il faudra retirer les balises meta correspondantes au référencement, et évidement avant de modifier cette page et de l'installer sur son site définitif.
Modifié le contenu de la balise TITLE est essentiel, c'est ce qui vient sur la barre supérieure des explorateur internet.

Si je trouve le temps, et plus d'explications (pas encore très clair pour moi), je mettrai ici plus d'information.
C'est le cas en particulier de la balise meta google-site verification et du fichier sitemap.xml.

La balise meta name="description" permet d'inclure une description du site que l'on retrouvera ici en entrant site:ornai.ch dans Google Search.

La balise alt pour les images est très pratique lors de la préparation d'un site: on verra immédiatement si nous avons oublié l'image dans notre répertoire photo.
Cependant j'ai remarqué que le texte présent dans ce paramètre pourrait passer dans la description du site du résultat Google Search, si une image est présente en toute fin d'article.
J'ai mis un texte alt similaire pour toutes les images et aussi défini un nom de fichier d'image contenant en fait des mots clés qui semblent être identifié lors du référencement.
Je n'ai pas mis d'accent dans le nom des fichiers: il semble que cela pourrait causer des souci et je l'ai constaté sur un de mes hébergeurs. 

Google Search ne va pas être actif le premier jour après la création de votre site: il faudra être patient.
Après activation, j'ai souvent remarqué qu'un changement de texte qui apparaissait dans le résultat d'une recherche, pouvait être adapté après un peu plus d'un jour.

Il ne faut essayer de tricher avec Google, comme mettre des textes blancs en H1, sur un fond blanc: voir Hidden text and links

Après 3 semaines environ, j'ai constaté qu'une recherche du mot Ornaï dans Google, me retournait le site http://www.ornai.ch/ en première position (un sentiment d'avoir fait mon travail plutôt bien et compris pas mal de choses).