C’est votre premier pas vers votre merveilleux futur de développeur web : créer un site « simple ». Il y a des pages web, il est beau, il est magnifique et voilà. Pour la version la plus basique, vous aurez besoin:
- De connaitre ce qu’il faut de HTML
- D’avoir les bases de CSS (et plus si affinités: il y a beaucoup de possibilités pour s’amuser)
Déjà, avec ça, vous pouvez faire des pages web. (Partie 1)
Toutefois, cela ne me semble pas suffisant. D’une part, un site basique contient en général un système de blog et d’articles et d’autre part, il faut une certaine uniformité à votre site et qu’il soit facile à maintenir, qu’il n’y ait pas de redondance (vous comprendrez précisément un peu plus loin). Nous verrons donc aussi les bases du PHP et des bases de données SQL. (Partie 2)
Partie 1. Coder une page web en HTML-CSS
Nous commençons par présenter le HTML et le CSS et donnons un exemple de page, qui nous servira de référence par la suite.
Partie 2. Coder un site web en PHP et/ou javascript
Ensuite, nous allons faire plusieurs pages et utiliser des langages de programmation pour rendre sa structure plus facile à maintenir et créer un formulaire.
Partie 3. Finaliser le site web avec une base de données
Enfin, on affinera les éléments, comme le classement des fichiers, et on va ajouter une base de données, qui pourra stocker les informations sur les articles, ainsi que les formulaires envoyés.
[En cours de conception]
Partie 1. Coder une page web en HTML-CSS
1.I. Le HTML: le cadre
Une rapide introduction au HTML
1.II. Mettre en page: le CSS
Une rapide introduction au CSS
1.III. Notre exemple de page web HTML-CSS
Un exemple expliqué de page codée uniquement grâce au HTML et CSS
1.I. Le HTML: le cadre
Le HTML permet de structurer votre page web. Il délimite des zones entourées par des « balises », comme <head> </head> et <body> </body>. Ces deux balises sont d’ailleurs la première structure de votre page. Vous allez en effet renseigner les informations relatives à la page web elle-même entre les balises HEAD, comme, par exemple, le type de langage HTML et l’adresse des feuilles de style (= fichier qui contiennent le code CSS qui modifie l’apparence de la page). C’est entre les balises <body> que vous allez écrire le contenu de votre page elle-même: titres, textes, images, etc.
Entre les balises <body>, il y aura essentiellement 3 zones: le header, le main et le footer. [rq: c’est ce qu’on appelle de la « sémantique », car cela donne du sens à votre page. Concrètement, vous pourriez utiliser des divisions basiques <div>, cela ne changerait pas l’apparence]. Il y a d’autres balises sémantiques de blocs importantes: <aside> pour les barres latérales, <section> pour les ensembles de blocs et <article> pour les blocs (ex: une cartouche avec une image, un titre et un texte).
Ensuite, il y a une multitude d’éléments. Parmi les plus importants, il y a <a>, qui vous permet de faire des liens, <img> pour insérer une image, les titres (on dit « Hn » pour h1, h2, h3, etc.) et <ul> pour les listes à puce.
Attention à ne pas confondre
- la balise <head> </head>, qu’on pourrait appeler « en-tête », qui inclut des instructions « invisibles »
- avec la balise <header> </header>, qu’on appelle « header » et désigne une partie de la page, en principe la zone supérieure (le menu principal jusqu’en haut).
Je parlerais du « head » pour le premier et du « header » pour le second.
Voilà à quoi ressemble le squelette d’une page web (vous aurez un exemple plus complet après):
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>1.II. Mettre en page: le CSS
Une page avec uniquement du HTML, qu’on se le dise, c’est moche. Vous aurez une suite de ligne avec des lettres plus ou moins grosses, en gras ou non … et voilà. Pour avoir une belle page, vous devez la mettre en forme grâce au CSS.
Le CSS a ceci de particulier qu’ il peut implémenter de trois façons:
- dans la balise elle-même (ex: <p style= » propriété: valeur; » > Texteloremipsumtoussa </p>)
- au début du document, dans le head, entre des balises <style type= »text/css »> [Votre CSS] </style>
- dans un fichier dédié, qui s’appelle en général style.css et est appelé dans le head par « stylesheet = [chemin vers le fichier] » Cette méthode me semble la seule à être utilisée.
Vous allez souvent créer des classes et des identifiants pour pouvoir modifier des éléments spécifiquement. Par exemple, vous pouvez placer un identifiant id= »menu-primaire » sur votre menu primaire, pour le distinguer. Un identifiant est unique, au contraire de la classe, qui pourra concerner plusieurs éléments (exemple: les miniatures des articles dans une page de blog est formatée de manière semblable). Vous pourrez notamment modifier :
- votre texte: police, taille, épaisseur de trait, hauteur de ligne, etc.
- vos blocs: marges, bordures, ombres portées …
- votre mise en page générale, notamment avec les flexbox et la grid.
Vous pourrez même créer des animations, mais nous verrons cela une autre fois.
Les principales difficultés du CSS vont porter sur:
- le choix des sélecteurs: comment faire pour sélectionner précisément l’élément qu’on souhaite modifier. Par exemple, comment sélectionner le « troisième élément « p » dans la « div » sous l’élément dont l’id est « x » ?
- la combinaison des propriétés : les propriétés peuvent souvent interagir de manière surprenante. [Comment débugguer son CSS?]
Pour aller plus loin sur ce sujet, vous pouvez consulter ces articles :
- Faire du CSS avec Bootstrap
1.III. Notre exemple de page web HTML-CSS
Nous venons de voir les (très) grandes lignes du HTML et du CSS. Maintenant, nous allons vous présenter un exemple en l’expliquant. Je dois travailler sur mon site Discover The Greentech, donc on va prendre sa refonte comme exemple.
C’est une site d’information, de type blog, qui a vocation à synthétiser ce qu’il y a à savoir sur l’innovation écologique. Il y aura en haut un menu secondaire, qui permettra de naviguer entre différentes thématiques. Il y aura un menu principal, qui permettra de naviguer entre d’autres grandes parties du site.
Dans la partie principale, vous avez des filtres, qui permettent de n’afficher que les articles ayant telle ou telle catégorie; puis une liste d’articles.
Enfin, un footer avec un petit menu.
Je passe sur le <head>, qui n’a rien de spécial. Avant tout, j’ai utilisé un fichier CSS pour « normaliser » mon style. En effet, les navigateurs ont tendance à nativement rajouter des règles (ex: des marges) alors que vous n’en voulez pas. Pour l’éviter, il y a des feuilles de style disponibles en ligne, dont le contenu permet de contredire ces règles (et donc les supprimer).
Dans le header, vous avez deux menus (balisés par <nav>), chacun encapsulé dans une division <div> avec un id spécifique, pour qu’on puisse leur appliquer des règles différentes. Pour faire un menu, on utilise classiquement une liste ul. Voici un article sur le détail: faire un menu basique en HTML et CSS. Il y a plusieurs difficultés pour un débutant, comme savoir quel élément cibler, par exemple pour aligner horizontalement les éléments (nav ? ul ? li ?). Je reviens dessus en détail dans ledit article. Notez que, sur la gauche du menu principal, il y a le logo (classique, on mettra un lien vers la page d’accueil dessus). Pour que les éléments soient alignés l’un à gauche et l’autre à droite, j’ai mis une marge à gauche d’une valeur « auto » sur la liste. J’ai également utilisé des flexbox (propriété « display: flex; ») pour gérer l’alignement horizontal des éléments.
Ensuite, il y a les filtres. Je les ai mis sous forme de boutons (<button>) qui, lorsqu’on passe le curseur dessus, devienne légèrement colorés. Ils ne sont pas encore actifs, ils seront utiles lorsque le site sera interactif. Enfin les articles sont présentés sous forme de « cartes » (c’est le terme classique): une image, un titre, une description.
Globalement, j’ai eu quelques difficultés pour limiter l’expansion du contenu sur les côtés (au-delà de 1000px, cela devient assez laid, trop distendu), tout en conservant les grandes bandes sur toute la largeur. Je détaille la résolution de cette difficulté dans cet article.
Pour le code final, vous le trouvez ici : https://github.com/AlexandreBaumann/projets-tutos/tree/main/tuto-html-css
Partie 2. Coder un site web dynamiquement
Maintenant, notre site ressemble à quelque chose, mais il n’est vraiment pas pratique: si j’ai plusieurs pages, je devrais à chaque fois rajouter le header par exemple, alors qu’il devrait être le même partout (ou en tout cas être généré procéduralement). De même, en principe il y a plusieurs articles différents et c’est leur image/titre/texte qui devrait venir s’ajouter procéduralement. PHP et javascript permettent de gérer cela.
Pour un site vraiment basique, il me semble important d’avoir deux choses:
- une structure homogène entre vos pages
- un système de blogs et d’articles
Idéalement nous aurions besoin d’une base de données, néanmoins c’est assez lourd et contre-intuitif comme mécaniques. Nous les verrons dans la troisième partie de ce guide. Ici, nous ferons sans, en utilisant de simples tableaux (array). Nous allons faire une page accueil avec une injection automatique de « cartes » représentant chaque article, 6 articles, une page contact et un système d’injection automatique des parties récurrentes et du H1. La page contact contiendra un formulaire qui permettra d’afficher les données que vous venez d’envoyer.
Je vous présente en détail cet exemple dans un article dédié: [Exemple] Coder un site web grâce à javascript ; [Exemple] Coder un site web en PHP. Ici je ne présenterai que les grandes lignes.
2.I. Créer un système de blog – d’article
Un système de blog consiste à créer une base de donnée d’articles qui vont s’afficher automatiquement, idéalement selon un système de catégories. C’est la partie un peu complexe, qu’on va détailler ensemble, avant de partir sur les deux sites exemples.
Sur la page de blog et les pages catégorie, vous allez vouloir que les articles remontent. Vous allez donc devoir programmer une « boucle » qui va interroger la base de données et proposer un bloc (on parle de « carte ») présentant chaque article, du plus récent au plus ancien. Pour chaque article, il faudra présenter:
- L’image l’illustrant (l’image en avant sur wordpress)
- Le titre de la publication
- Un extrait donnant un aperçu de la publication (en principe les premières lignes)
Vous allez donc créer une fonction construisant cette « cartouche » (on parle plutôt de « card », carte en anglais), puis une autre qui va l’appliquer à tous vos articles.
Notez que pouvoir customiser l’apparition des articles est une des motivations qui m’a poussées à apprendre le développement.En effet, dans la plupart des thèmes, la mise en forme est assez horrible: extraits à rallonge, images énormes … Pour avoir une belle remontée d’article, il faut que l’image soit d’un format constant ( carré en principe) idéalement avec un peu d’ombrage pour faire ressortir, puis le titre et un peu de texte illustrant l’article. C’est simple et pourtant c’est souvent un manque.
2.II. Coder un site web en PHP
Pour coder un site web en PHP, il faudra disposer d’un serveur, vous devrez donc en installer un, comme MAMP. C’est très simple, je vous explique comment faire dans l’article.
Le PHP permet de créer une page par partie récurrente et de l’insérer dans la page. Ainsi, nous allons avoir des fichiers head.php, header.php et footer.php que nous pourrons insérer dans chaque nouvelle page grâce à « include ([chemin du fichier]) » dans les zones adéquates. De même, le fichier boucle.php va venir insérer la boucle dans la page d’accueil.
Lorsqu’on met des informations dans le formulaire et qu’on valide, on est redirigé vers une page gestion_contact.php, qui va afficher ce que vous venez d’envoyer.
2.III. Coder un site web en Javascript
Pour le javascript, il n’y a pas besoin de serveur: c’est le navigateur (« client ») qui fait les calculs. Cela permet un affichage dynamique, qui peut répondre à l’utilisateur sans avoir besoin de faire appel au serveur.
On appelle le fichier « structure.js » en fin de page (il faut que le reste ait fini de charger) et il va venir injecter le HTML dans les différentes parties récurrentes. De même, le fichier boucle.js va injecter la boucle dans page d’accueil.
Lorsqu’on met des informations dans le formulaire et qu’on valide, les données envoyées sont affichées dans la console.
Je suis allé un peu plus loin que pour le php en activant le système de filtre et en rajoutant des catégories au articles. Ainsi, on peut n’afficher que les articles de la catégorie « hydrogène ». Le tout, sans recharger la page. [rappel: voilà l’article]
Partie 3. Finaliser le site web avec une base de données
Une fois que nous sommes là, nous avons :
- une jolie structure HTML et CSS
- une structure « scalable », pouvant être utilisée pour de nombreuses pages,
- un formulaire
- une boucle d’articles
Maintenant, nous allons finaliser le site, qui va mobiliser du PHP et du javascript ET une base de données.
3.I. Javascript ou PHP ?
La structure de javascript est a priori plus simple, même pour la structure, mais il a un problème de taille: google le lit très mal. En effet, le robot a très peu d’énergie à consacrer à chaque page. Aussi, il ne lit pas nativement le javascript, qui lui demande un effort supplémentaire (rappelez-vous: c’est l’ordinateur du client, l’utilisateur donc, qui fait les calculs). Au contraire, en PHP, c’est le serveur qui construit la page et l’envoie à l’utilisateur. On privilégiera donc PHP pour la structure et la boucle. NÉANMOINS … il est depuis peu possible de construire les pages côté serveur en javascript. On peut donc utiliser les deux (mais si on utilise javascript, il faut faire attention à distinguer ce qu’on fait « coté serveur » et ce qu’on fait « côté client »). Ce genre de raisonnements, indispensables pour le SEO (si vous ne voulez pas être invisible pour Google …) me semblent indispensable à avoir en tête quand on code.
Pour le formulaire, on peut utiliser JS ou PHP, c’est assez indifférent. Au contraire seulement javascript permet de faire les filtres. De plus, je trouve que configurer un serveur JS est plus pratique (MAMP et autres serveurs buguent un peu chez moi).
On pourrait donc se limiter au javascript, ce qui est le genre de solutions que vous pourrez préférer, car il est pratique de n’utiliser qu’un seul langage, cela évite les confusions. Néanmoins, il est intéressant de pouvoir faire la comparaison entre différentes solutions, donc nous ferons aussi un exemple reposant sur le PHP.
3.II. Structurer les fichiers
3.III. La base de données
On choisira MySQL, qui est la solution la plus courante.