HTML sur Serveur Apache

Un fichier HTML (HyperText Markup Language) est un document texte standard qui sert de base à toute page web. Il contient du code structuré avec des balises (tags) qui indiquent au navigateur comment afficher le contenu, tel que les titres, paragraphes, images, liens et tableaux. Ce fichier, enregistré avec l'extension .html ou .htm, ne décrit pas directement la mise en forme visuelle complète (rôle du CSS), mais définit la structure sémantique et le contenu de la page. Il peut être créé avec n'importe quel éditeur de texte et visualisé immédiatement dans n'importe quel navigateur web (Chrome, Firefox, Safari, Edge) qui interprète le code pour rendre la page à l'écran.

Apache HTTP Server (ou simplement Apache) est un serveur web gratuit, open-source et multiplateforme développé par la Apache Software Foundation.

Son rôle principal est d'écouter les requêtes entrantes via le protocole HTTP/HTTPS, d'interpréter ces demandes et de renvoyer les fichiers correspondants (pages HTML, images, CSS) aux navigateurs des visiteurs.

HTML sur le web

Pour exposer sur le web, à un niveau local ou public, un dossier contenant des fichiers .html, il vous suffit de le "lier" à un serveur web (ici Apache).

Docker Hub

Le fichier HTML

Pour créer un fichier HTML, il suffit d'utiliser un éditeur de texte (comme le Bloc-notes, TextEdit, ou un IDE comme Visual Studio Code), d'écrire le code, puis d'enregistrer le document avec l'extension .html

La structure minimale d'un fichier HTML repose sur des éléments et des balises qui encadrent ou spécifient le contenu :

<!DOCTYPE html> Déclare le type de document (HTML5 pour les navigateurs).
<html lang="fr"> Indique la langue
<head> et <title> Le titre qui s'affiche sur l'onglet (SEO)
<meta charset="UTF-8"> Affichage des caractères spéciaux et langues internationales
<body> Encadre le contenu visible
<h1> Titre et valeur d'importance (h1, h2, h3 etc)
<p> Paragraphe du texte

1. Création des fichiers

Struture du fichier

Créez deux fichiers HTML (ou plus). Utilisez un éditeur de texte (comme Bloc-notes, Notepad, ou autre), inscrivez le code, puis enregistrez le document avec l'extension .html (test1.html par exemple).

NB Quand vous enregistrez votre fichier, indiquez à Type : Tous les fichiers et changez Nom du fichier par nomdufichier.html

(Ouvrir la bascule).

STRUCTURE MINIMALE

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Titre dans le navigateur</title>
</head>
<body>
    <h1>Titre texte</h1>
    <p>Paragraphe du texte.</p>
</body>
</html>

2. Création du dossier

Créez un dossier (que vous pouvez nommer "html" pour cette démo) dans le répertoire de votre choix.

Téléverser, dans ce dossier, les fichiers que vous avez créés au point précédent.

3. Configuration Console

3.1. Application personnalisée

Cliquez sur l’icône + en haut à droite de la page d’accueil au-dessus des tuiles et sélectionnez Installer une application personnalisée.

3.2. Onglet YAML

La fenêtre des paramètres de votre application s’ouvre et cliquez sur l'onglet, en haut à droite, avec pour libellé YAML.

3.3. Copier-Coller le YAML

Copier-coller dans la fenêtre, à la place de ce qui est inscrit, le code de configuration ci-dessous (ouvrir la bascule).

YAML

Apache

services:
  apache:
    command: null
    deploy:
      resources:
        limits:
          memory: 4GB
          cpus: "1.00"
        reservations:
          memory: 256MB
          cpus: "0.00"
      placement: {}
    entrypoint: null
    image: httpd:latest
    labels:
      icon: https://images.seeklogo.com/logo-png/31/1/apache-logo-png_seeklogo-314278.png
    network_mode: bridge
    ports:
      - mode: ingress
        target: 80
        published: "8081"
        protocol: tcp
    restart: no
    volumes:
      - type: bind
        source: /media/ZimaOS-HD/Media/html
        target: /usr/local/apache2/htdocs
x-casaos:
  hostname: ""
  icon: https://images.seeklogo.com/logo-png/31/1/apache-logo-png_seeklogo-314278.png
  index: /
  is_uncontrolled: false
  main: apache
  port_map: "8081"
  scheme: http
  title:
    custom: APACHE
name: apache

Ne cliquez pas sur Installer, mais sur l'onglet de gauche Formulaire

3.4. Paramètres d'Apache

Port (optionnel) : changez le port d'écoute (8081) si besoin à "Redirection des ports" puis à "URL Web".

Volumes : Mappez le chemin du dossier contenant vos fichiers .html.

3.5. Installer

Cliquez sur Installer et patientez le temps de l’installation.

Puis, cliquez sur la nouvelle tuile créée pour ouvrir une nouvelle page web.

Si vous avez installé et activé ZFW, créez une règle pour le port 8081 (si vous n'utilisez pas le Proxy Inversé).

4. Interface web

4.1. Page index

Par défaut, le serveur cherche le fichier index.html. Si ce fichier n'est pas présent, comme c'est le cas pour cette première partie de l'article, une page index est "générée" et présentée sous forme de sommaire avec les liens de vos fichiers .html.

4.2. Page de présentation

Pour ouvrir directement sur une page de présentation, vous devez créer ou renommer un fichier en : index.html (dans le dossier des fichiers).

4.3. Nom de Domaine

Pour exposer vos pages HTML sur le web, redirigez un Nom De Domaine (NDD) ou Sous-Domaine ou un Wildcard. Avec un Proxy Inversé, obtenez un certificat SSL pour ce NDD ou Wildcard et lier le port d'écoute correspondant (ici le 8081).

morgyann

Curieux de nature, j’ai découvert le monde des serveurs et plus particulièrement les applications Docker en apprenant au fil des essais et des ressources partagées sur le web. En retour, je partage ce que je connais et plus particulièrement à l'intention des débutants.

Vous pouvez me retrouver sur Forum des NAS sur lequel je participe régulièrement.

Soutenons l'utilisation des applications open source et leurs développeurs.

← Article précédent