Fiche de révision : Introduction aux langages et gestion de sites web

📋 Plan du Cours

1. Langages web front-end
2. HTML structure et balises
3. DOM et arbre HTML
4. CSS stylisation site
5. JavaScript interactivité
6. WordPress bases
7. Installation WordPress
8. Thèmes et plugins
9. Publication contenu

📖 1. Langages web front-end

🔑 Notions clés & Définitions

Front-end : partie visible et interactive d’un site web, exécutée par le navigateur.
Back-end : gestion de la logique, des mécanismes et des bases de données, exécutée par le serveur.
Navigateur web : logiciel qui affiche le contenu du site web en exécutant le code front-end.
Langage front-end : code utilisé pour créer la partie visible et interactive d’un site web, exécuté par le navigateur.
Langage back-end : code qui gère la logique et les données du site, exécuté par le serveur.

📝 Points essentiels

Le front-end constitue la partie visible et interactive d’un site web, qui est exécutée par le navigateur. Il inclut tout ce que l’utilisateur peut voir ou avec quoi il peut interagir. Le back-end, en revanche, gère la logique interne, les mécanismes et les bases de données, et fonctionne sur le serveur. Les trois langages principaux pour le front-end sont HTML, CSS et JavaScript, qui permettent de construire et d’animer la partie visible du site.

💡 À retenir

La distinction entre front-end et back-end est fondamentale pour comprendre le rôle de chaque langage web, le front-end étant dédié à l’affichage et à l’interactivité, tandis que le back-end gère la logique et les données.

📖 2. HTML structure et balises

🔑 Notions clés & Définitions

HTML (HyperText Markup Language) : langage de balisage qui crée la structure et les éléments d’une page web, indispensable pour toute page.
Balise ouverte : balise qui démarre un élément HTML, par exemple <p>.
Balise fermée : balise qui clôt un élément HTML, par exemple </p>.
Balise auto-fermante : balise qui ne contient pas de contenu et se ferme directement, par exemple <img />.
Attribut HTML : information supplémentaire ajoutée à une balise pour préciser ou modifier son comportement, par exemple src ou alt dans <img>.

📝 Points essentiels

HTML construit la structure et les composants d’une page web, ce qui est essentiel pour sa création. Les balises encadrent le contenu et définissent ses éléments, comme <p> pour un paragraphe, <a> pour un lien, <img> pour une image, <table> pour un tableau, et <br /> pour un retour à la ligne. Ces balises s’emboîtent selon une organisation hiérarchique, formant une arborescence appelée DOM (Document Object Model). Lorsqu’une balise ne contient pas de contenu, elle s’écrit sous la forme <balise />. Les attributs, tels que src ou alt, ajoutent des précisions ou des fonctionnalités aux balises, permettant d’enrichir leur comportement ou leur apparence.

💡 À retenir

Maîtriser la syntaxe des balises HTML et leur rôle dans la structuration permet de concevoir efficacement une page web claire et organisée.

📖 3. DOM et arbre HTML

🔑 Notions clés & Définitions

DOM (Document Object Model) : structure hiérarchique représentant la page web sous forme d’un arbre imbriqué, permettant la manipulation dynamique du contenu.

Arborescence HTML : organisation visuelle et structurelle des éléments HTML dans un arbre, où chaque balise est un nœud connecté à ses éléments enfants.

Imbrication des balises : processus d’insertion de balises HTML à l’intérieur d’autres balises, créant une hiérarchie visible dans le DOM.

Modèle d’objet du document : représentation abstraite de la structure HTML sous forme d’un arbre, accessible et modifiable via des scripts pour manipuler le contenu de la page.

📝 Points essentiels

Le DOM représente la structure HTML sous forme d’un arbre imbriqué, où chaque élément est un nœud connecté à ses éléments enfants. Cette organisation en arbre permet d’accéder et de modifier facilement chaque partie de la page web. L’imbrication des balises crée une hiérarchie visible dans le DOM, facilitant la compréhension de la structure globale. L’indentation dans le code HTML aide à visualiser cette hiérarchie en montrant clairement la relation entre les balises parentes et leurs enfants, rendant la lecture et la maintenance du code plus aisées.

💡 À retenir

Visualiser la page web comme une structure arborescente permet une meilleure compréhension et manipulation du contenu via le DOM, en facilitant la navigation et la modification de la hiérarchie des éléments HTML.

📖 4. CSS stylisation site

🔑 Notions clés & Définitions

CSS (Cascading Style Sheets) : langage de style qui définit l’apparence et le design des éléments HTML, en contrôlant leur présentation visuelle.

Feuille de style : document contenant un ensemble de règles CSS, qui ciblent des éléments HTML via des sélecteurs pour appliquer des styles.

Sélecteur CSS : motif ou expression permettant de cibler précisément un ou plusieurs éléments HTML pour leur appliquer des propriétés CSS.

Propriété CSS : attribut qui définit une caractéristique visuelle d’un élément, comme la couleur, la taille ou la marge.

Pseudo-classe :hover : sélecteur spécial qui modifie le style d’un élément lors du survol de la souris, permettant d’interagir dynamiquement avec l’utilisateur.

📝 Points essentiels

CSS sert à définir l’apparence et le design des éléments HTML, transformant la structure en un rendu visuel attrayant. Une feuille de style CSS contient des règles qui ciblent ces éléments à l’aide de sélecteurs. Ces règles précisent des propriétés CSS, telles que la couleur, la taille, ou les marges, pour personnaliser l’aspect visuel. La pseudo-classe :hover permet de modifier le style d’un élément lors du passage de la souris, facilitant des effets interactifs.

💡 À retenir

CSS est l’outil principal pour transformer la structure HTML en un design visuellement attractif, en utilisant des règles ciblées et dynamiques.

📖 5. JavaScript interactivité

🔑 Notions clés & Définitions

JavaScript : langage de programmation qui ajoute des fonctionnalités interactives aux pages web, permettant de modifier dynamiquement le contenu et le comportement de la page.

Interactivité web : capacité d’un site à réagir aux actions de l’utilisateur, grâce à des scripts exécutés côté client, pour enrichir l’expérience utilisateur.

Validation de formulaire : processus par lequel JavaScript vérifie les données saisies dans un formulaire avant leur envoi, afin d’assurer leur conformité et d’éviter les erreurs.

Chargement dynamique : technique permettant de charger du contenu supplémentaire ou modifié sans recharger la page entière, souvent via des requêtes AJAX, pour une expérience fluide.

Effets et animations : modifications visuelles contrôlées par JavaScript, comme des transitions ou des effets visuels, qui améliorent l’aspect esthétique et l’interactivité du site.

📝 Points essentiels

JavaScript permet d’ajouter des fonctionnalités interactives aux pages web, rendant celles-ci plus dynamiques et personnalisées. Il facilite la validation des formulaires côté client, ce qui évite d’envoyer des données incorrectes ou incomplètes au serveur. Grâce à la technique AJAX, JavaScript peut charger du contenu supplémentaire ou le mettre à jour sans nécessiter de rechargement complet de la page, améliorant ainsi la fluidité de l’expérience utilisateur. Enfin, il gère les effets visuels et animations, permettant d’enrichir l’apparence et la navigation du site web, pour une interface plus attrayante et intuitive.

💡 À retenir

JavaScript agit comme le moteur qui dynamise et personnalise l’expérience utilisateur sur le web, en rendant les pages plus interactives, réactives et esthétiques.

📖 6. WordPress bases

🔑 Notions clés & Définitions

WordPress : Plateforme de gestion de contenu (CMS) qui facilite la création et la gestion de sites web, basée sur PHP et MySQL.
CMS (Système de gestion de contenu) : Logiciel permettant de créer, modifier, organiser et publier du contenu numérique, notamment des sites web.
PHP : Langage de programmation côté serveur utilisé par WordPress pour générer dynamiquement les pages web.
MySQL : Système de gestion de base de données relationnelle qui stocke toutes les données du site WordPress, telles que les articles, les utilisateurs et les réglages.
WordPress.org vs WordPress.com : Deux versions principales de WordPress. La version WordPress.org est auto-hébergée, nécessitant un hébergement externe et une installation manuelle. La version WordPress.com est hébergée par WordPress, avec une gestion simplifiée mais des options de personnalisation limitées.

📝 Points essentiels

WordPress est un CMS basé sur PHP et MySQL, facilitant la création de sites web. Il permet la gestion collaborative et la publication de contenu numérique, grâce à ses fonctionnalités d’administration conviviales. Il existe deux versions principales : WordPress.org, qui nécessite un hébergement indépendant, et WordPress.com, hébergé par WordPress avec une gestion intégrée. Ces différences influencent la flexibilité, la personnalisation et la gestion technique du site.

💡 À retenir

WordPress est une plateforme flexible et accessible, utilisant PHP et MySQL, qui permet de créer et gérer facilement des sites web, que ce soit en auto-hébergement ou via une solution hébergée.

📖 7. Installation WordPress

🔑 Notions clés & Définitions

Installation WordPress : processus d’installation du système de gestion de contenu WordPress sur un serveur web compatible avec PHP, permettant de créer et gérer un site internet.

Configuration serveur : étape consistant à préparer le serveur pour accueillir WordPress, en assurant sa compatibilité avec PHP et en configurant ses paramètres pour un fonctionnement optimal.

Base de données MySQL : système de gestion de données relationnelles utilisé par WordPress pour stocker le contenu, les paramètres et les utilisateurs du site.

Fichier wp-config.php : fichier de configuration essentiel qui établit la connexion entre WordPress et la base de données MySQL, en précisant notamment les identifiants et le nom de la base.

Accès FTP : protocole permettant de transférer les fichiers WordPress depuis un ordinateur vers le serveur, en utilisant un logiciel client FTP pour gérer les fichiers du site.

📝 Points essentiels

L’installation de WordPress nécessite un serveur web compatible avec PHP et une base de données MySQL. Le serveur doit être configuré pour supporter ces technologies afin d’assurer le bon fonctionnement du site. Le fichier wp-config.php joue un rôle central en configurant la connexion à la base de données, en indiquant notamment le nom, l’utilisateur, le mot de passe et l’hôte de celle-ci. L’accès FTP est indispensable pour transférer manuellement les fichiers WordPress sur le serveur, en utilisant un logiciel dédié, ce qui permet de déployer le site une fois tous les fichiers en place.

💡 À retenir

Pour déployer un site WordPress, il faut d’abord installer et configurer un serveur compatible avec PHP et MySQL, puis transférer les fichiers via FTP et configurer le fichier wp-config.php pour établir la connexion à la base de données.

📖 8. Thèmes et plugins

🔑 Notions clés & Définitions

Thème WordPress : logiciel qui contrôle l’apparence visuelle du site WordPress, incluant la mise en page, les couleurs, les polices et le design global.
Plugin WordPress : extension logicielle qui ajoute des fonctionnalités spécifiques au site, permettant de personnaliser et d’étendre ses capacités.
Personnalisation du site : processus consistant à modifier l’apparence et les fonctionnalités du site WordPress en utilisant thèmes et plugins.
Extension fonctionnelle : module ou composant logiciel qui enrichit le site d’une nouvelle capacité ou améliore une fonctionnalité existante.
Installation et activation : étape nécessaire pour rendre opérationnels un thème ou un plugin, impliquant leur ajout au site puis leur mise en service.

📝 Points essentiels

Les thèmes contrôlent l’apparence visuelle du site WordPress, influençant la mise en page, le style et le design global.
Les plugins ajoutent des fonctionnalités spécifiques, permettant d’étendre ou de modifier le comportement du site selon les besoins.
L’installation et l’activation sont indispensables pour utiliser thèmes et plugins, nécessitant leur ajout via l’interface WordPress ou autres outils.

💡 À retenir

Les thèmes et plugins sont les leviers principaux pour personnaliser et étendre WordPress, permettant d’adapter le site à ses besoins sans modifier le code de base.

📖 9. Publication contenu

🔑 Notions clés & Définitions

Article WordPress : contenu publié sous forme d’un texte ou d’un média, créé dans l’éditeur WordPress, qui apparaît sur une page ou un article du site.
Page WordPress : contenu statique, distinct de l’article, permettant d’afficher des informations permanentes ou importantes, créé dans l’éditeur WordPress.
Éditeur WordPress : interface permettant de rédiger, mettre en forme et organiser le contenu d’un article ou d’une page, facilitant la création de contenu sans nécessiter de compétences techniques avancées.
Publication : étape qui consiste à rendre accessible le contenu créé en le rendant visible aux visiteurs du site, après validation dans l’éditeur.
Optimisation SEO : ensemble de techniques visant à améliorer la visibilité du contenu sur les moteurs de recherche, en ajustant notamment la structure, les mots-clés et la lisibilité.

📝 Points essentiels

WordPress offre la possibilité de créer et de publier séparément des articles et des pages, permettant une gestion claire du contenu.
L’éditeur WordPress facilite la rédaction et la mise en forme du contenu, en proposant une interface conviviale pour organiser textes, images et autres médias.
Une fois le contenu prêt, la publication le rend accessible aux visiteurs du site, en le rendant visible en ligne.
L’optimisation SEO intervient pour augmenter la visibilité du contenu sur les moteurs de recherche, en améliorant ses caractéristiques pour le référencement.

💡 À retenir

La publication dans WordPress constitue le cœur de la gestion d’un site, permettant de rendre le contenu accessible et visible tout en optimisant sa visibilité pour attirer un public.

📅 Repères chronologiques

📊 Tableaux de Synthèse

⚠️ Pièges & Confusions Fréquentes

1. Confondre balises auto-fermantes (<img />) avec celles qui nécessitent une fermeture explicite.
2. Penser que le DOM est une simple représentation visuelle : c’est une structure hiérarchique manipulable par script.
3. Confusion entre HTML (structure) et CSS (style) : ne pas mélanger leur rôle.
4. Croire que JavaScript ne sert qu’à faire des animations : il gère aussi la validation, le chargement dynamique, etc.
5. Confusion entre front-end (client) et back-end (serveur), notamment concernant les langages utilisés.
6. Oublier que pseudo-classe :hover modifie le style lors du survol sans intervention JavaScript.
7. Penser que WordPress est uniquement un constructeur visuel sans gestion technique sous-jacente.

✅ Checklist Examen

1. Expliquer la différence entre front-end et back-end.
2. Citer les trois principaux langages front-end.
3. Définir une balise HTML ouverte, fermée et auto-fermante avec un exemple.
4. Décrire ce qu’est le DOM et son rôle dans la manipulation du contenu web.
5. Expliquer comment CSS permet de styliser une page web avec un exemple de sélecteur.
6. Définir une pseudo-classe CSS :hover et son utilité.
7. Indiquer comment JavaScript peut améliorer l’interactivité d’un site web.
8. Décrire le rôle de WordPress comme CMS.
9. Mentionner deux technologies utilisées par WordPress pour gérer les données.
10. Expliquer ce qu’est une feuille de style CSS.
11. Donner un exemple d’attribut HTML et son utilité.
12. Rappeler l’importance de l’organisation hiérarchique dans l’arborescence HTML.