127 lines
7.4 KiB
HTML
127 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Développement web</title>
|
|
<link rel="stylesheet" href="src/styles/my.css">
|
|
<link rel="stylesheet" href="src/styles/reset.css">
|
|
<link rel="stylesheet" href="src/styles/layout.css">
|
|
<link rel="stylesheet" href="src/styles/variables.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Développement web</h1>
|
|
<nav>
|
|
<a href="#concepts">Concepts</a>
|
|
<a href="#infratructures">Infrastructures</a>
|
|
<a href="#html">HTML</a>
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
<article id="concepts">
|
|
<h2>Concepts</h2>
|
|
<h3>Qu'est-ce que le web ?</h3>
|
|
<p>
|
|
Le web est un système d'information mondial, accessible via Internet, qui permet de
|
|
consulter, sous forme de pages, des documents hébergés sur des serveurs. Ces
|
|
documents peuvent être du texte, des images, des vidéos, etc. Ils sont liés entre eux
|
|
par des hyperliens, formant ainsi une "toile" d'informations.
|
|
</p>
|
|
<button id="btnConcept" class="btn" onclick="toogleArticle('Concept')">Voir plus</button>
|
|
<div class="hidden" id="moreConcept">
|
|
<h3>Comprendre le client et le serveur</h3>
|
|
<p>
|
|
Lorsque vous visitez un site web, votre navigateur (le client) envoie une demande à unExamen de Fin de Module : HTML, CSS & JavaScript 5
|
|
serveur. Le serveur traite cette demande et renvoie les informations nécessaires pour
|
|
afficher la page web sur votre navigateur
|
|
</p>
|
|
<h3>Introduction aux langages de base</h3>
|
|
<ul>
|
|
<li>
|
|
<strong>HTML (HyperText Markup Language) :</strong> C'est le langage de balisage utilisé pour
|
|
structurer le contenu d'une page web (titres, paragraphes, liens, etc.).
|
|
</li>
|
|
<li>
|
|
<strong>CSS (Cascading Style Sheets) :</strong> Il permet de styliser le contenu HTML (couleurs,
|
|
polices, espacement, etc.).
|
|
</li>
|
|
<li>
|
|
<strong>JavaScript :</strong> C'est un langage de programmation qui permet d'ajouter de
|
|
l'interactivité à une page web (formulaires, animations, etc.).
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</article>
|
|
<hr/>
|
|
<article id="infratructures">
|
|
<h2>Infrastructure</h2>
|
|
<p>
|
|
Lorsque nous naviguons sur le web, la facilité avec laquelle nous accédons à des
|
|
informations, des images ou des vidéos peut nous donner l'impression que tout cela est
|
|
magique.<br />
|
|
Cependant, derrière chaque clic, chaque recherche et chaque page chargée, il y a une
|
|
infrastructure web complexe et robuste qui rend tout cela possible.<br />
|
|
Cette infrastructure est le socle sur lequel repose l'ensemble du web, garantissant que
|
|
les données sont transmises, reçues et affichées de manière fluide et efficace.
|
|
</p>
|
|
<button id="btnInfratructures" class="btn" onclick="toogleArticle('Infratructures')">Voir plus</button>
|
|
<div class="hidden" id="moreInfratructures">
|
|
<p>L'infrastructure web englobe une multitude d'éléments interconnectés, allant des
|
|
serveurs physiques qui stockent les données aux protocoles qui définissent comment
|
|
ces données sont échangées, en passant par les systèmes de noms de domaine (DNS)
|
|
qui traduisent les URL conviviaux en adresses IP. Chaque composant joue un rôle
|
|
essentiel pour assurer que les ressources web sont accessibles et fonctionnent comme
|
|
prévu.<br />
|
|
Dans cette section, nous allons décomposer et explorer les différentes facettes de
|
|
l'infrastructure web. Nous plongerons dans les détails de ce qui se passe "sous le
|
|
capot" chaque fois que vous ouvrez votre navigateur. Que vous soyez un développeur
|
|
web en herbe ou simplement quelqu'un de curieux de comprendre les coulisses du
|
|
web, cette exploration vous fournira une perspective éclairante sur les fondations sur
|
|
lesquelles repose le monde numérique d'aujourd'hui.
|
|
</p>
|
|
</div>
|
|
</article>
|
|
<hr/>
|
|
<article id="html">
|
|
<h2>HTML</h2>
|
|
<p>
|
|
Lorsque nous ouvrons une page web, nous sommes accueillis par une variété de
|
|
textes, d'images, de liens et parfois même de vidéos et d'animations.<br />
|
|
Mais derrière cette présentation visuelle riche et interactive se cache une structure
|
|
sous-jacente qui donne forme et fonction à chaque élément de la page. Cette structure
|
|
est créée à l'aide du HTML, ou Hypertext Markup Language, qui est véritablement la
|
|
fondation sur laquelle repose le web.
|
|
</p>
|
|
<button id="btnHtml" class="btn" onclick="toogleArticle('Html')">Voir plus</button>
|
|
<div class="hidden" id="moreHtml">
|
|
<p>
|
|
HTML est le langage de balisage standard utilisé pour créer et concevoir des pages
|
|
web. Il permet aux développeurs de définir la structure d'une page, d'organiser son
|
|
contenu et d'établir des relations entre différents éléments. À l'aide de balises, le HTML
|
|
indique au navigateur comment afficher le contenu, où placer les images, comment
|
|
créer des liens vers d'autres pages et bien plus encore.<br />
|
|
Chaque élément sur une page web, qu'il s'agisse d'un simple paragraphe de texte ou
|
|
d'une galerie d'images complexe, est représenté et structuré à l'aide de HTML. C'est le
|
|
squelette qui soutient l'apparence et la fonctionnalité de chaque site web que nous
|
|
visitons.<br />
|
|
Dans cette section, nous allons plonger dans le monde fascinant du HTML. Nous
|
|
explorerons sa syntaxe et la manière dont il interagit avec d'autres technologies pour
|
|
donner vie au web
|
|
</p>
|
|
<ul>
|
|
<li>HTML (HyperText Markup Language) : C'est le langage de balisage utilisé pour structurer le contenu d'une page web (titres, paragraphes, liens, etc.).</li>
|
|
<li>Le HTML décrit la structure de la page, définissant des éléments tels que les entêtes, les paragraphes, les listes et les liens.</li>
|
|
<li>Chaque élément HTML est représenté par une "balise", qui entoure le contenu et lui donne une signification spécifique.</li>
|
|
<li>Une structure de qualité optimise le référencement et l'accessibilité d'un site web.</li>
|
|
</ul>
|
|
</div>
|
|
</article>
|
|
|
|
</main>
|
|
<footer>
|
|
<p>Par <i>Srifi Pauline</i>, le jeudi 26 octobrec 2023</p>
|
|
</footer>
|
|
</body>
|
|
<a href="..">Back</a>
|
|
<script src="src/scripts/main.js"></script>
|
|
</html> |