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.
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.
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.
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>.
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.
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.
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.
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.
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.
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.
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.
CSS est l’outil principal pour transformer la structure HTML en un design visuellement attractif, en utilisant des règles ciblées et dynamiques.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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é.
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.
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.
| Date | Événement |
|---|---|
| mai 1968 | Mentionné dans le résumé (dans la consigne) |
| Élément | Définition | Fonction | Langages / Technologies | Organisation |
|---|---|---|---|---|
| Front-end | Partie visible et interactive du site web | Affichage et interaction utilisateur | HTML, CSS, JavaScript | Exécutée par le navigateur |
| Back-end | Gestion de la logique et des données | Traitement, stockage, gestion des mécanismes | PHP, bases de données (MySQL) | Exécutée par le serveur |
| HTML | Langage de balisage pour structurer la page | Créer la structure et les éléments | Balises <p>, <a>, <img>, <table> | Organise la hiérarchie via DOM |
| DOM | Structure hiérarchique de la page web | Manipulation dynamique du contenu | Représentation en arbre | Accessible via scripts JavaScript |
| CSS | Langage de style pour l'apparence des éléments | Styliser la page web | Sélecteurs, propriétés CSS, pseudo-classes (:hover) | Appliqué via feuilles de style |
| JavaScript | Langage pour l'interactivité et la dynamique | Ajouter fonctionnalités interactives | Validation, effets, chargement dynamique (AJAX) | Exécuté côté client |
| WordPress | CMS pour gestion de contenu web | Création et gestion de sites facilement | PHP, MySQL, thèmes, plugins | Plateforme basée sur PHP/MySQL |
Teste dein Wissen zu Introduction aux langages et gestion de sites web mit 9 Multiple-Choice-Fragen mit detaillierten Korrekturen.
1. Quelle est la fonction principale d’un langage front-end dans le développement web ?
2. Quelle est la fonction principale des balises HTML dans la création d'une page web ?
Merke dir die Schlüsselkonzepte von Introduction aux langages et gestion de sites web mit 18 interaktiven Karteikarten.
Langages web front-end
HTML, CSS, JavaScript
HTML — rôle ?
Structurer la page web
DOM — définition ?
Structure hiérarchique de la page
Intelligence Artificielle
Bases de données
Bases de données
Bases de données
Importiere deinen Kurs und die KI erstellt in 30 Sekunden Lernzettel, Quizze und Karteikarten.
Lernzettel-Generator