School-Ynov/Web-Full-Stack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

debut tp react

Browse Source
This commit is contained in:
Pauline Srifi
2023-10-26 14:07:23 +02:00
parent 99a463b283
commit 9697129b6e
28 changed files with 18201 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
srv/tp1/index.html
View File

@@ -1,11 +1,127 @@
<!DOCTYPE html>
<html lang="en">
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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>

10
srv/tp1/src/scripts/main.js Normal file
View File

@@ -0,0 +1,10 @@
function toogleArticle(id) {
let el = document.getElementById("more"+id);
if(el.classList.contains("hidden")) {
el.classList.remove("hidden");
document.getElementById("btn"+id).innerText = "Voir moins"
} else {
el.classList.add("hidden");
document.getElementById("btn"+id).innerText = "Voir plus"
}
}

15
srv/tp1/src/styles/layout.css Normal file
View File

@@ -0,0 +1,15 @@
body {
display: flex;
flex-direction: column;
min-height: 100vh;
padding: 0 20px;
& > header {
height: 80px;
}
& > main {
flex: 1;
}
& > footer {
height: 80px;
}
}

53
srv/tp1/src/styles/my.css Normal file
View File

@@ -0,0 +1,53 @@
/*
Le titre "Développement web" dans le header doit avoir un font-weight de 400.
*/
h1 {
font-weight: 400;
}
/*
La nav doit s’afficher sur 1 ligne (pas en colonne) et sur la même ligne que le
titre (pensez à la valeur baseline )
*/
h1, nav{
margin-right: 20px;
display: inline;
vertical-align: baseline;
}
/*
Le main sera une succession d’articles disposés en colonne, espacés de 20px
et séparés d’un <hr>
*/
article:after {
margin: 20px unset;
}
/*
Tous les titres doivent avoir un font-weight de 400
*/
main h2 {
font-weight: 400;
}
/*
Les articles sont composés d’une partie toujours visible et d’une partie pouvant
apparaître (les détails de l’article), cette partie aura par défaut une classe CSS
hidden permettant de la masquer.
*/
div.hidden {
display: none;
}
/*
Stylisez le bouton avec une couleur spécifique et une bordure arrondie issue de
variables css. Voir l’image de rendu du site à la fin de l’énoncé.
*/
button.btn {
color: var(--color-secondary);
border: none;
border-radius: var(--border-radius);
background-color: var(--background-color-secondary);
/* padding optionnel pour ressembler a l'ennonce */
padding: 5px 10px;
}

14
srv/tp1/src/styles/reset.css Normal file
View File

@@ -0,0 +1,14 @@
html,
body {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
font-size: 16px;
color: var(--color-primary);
background-color: var(--background-color-primary);
line-height: 1.5;
box-sizing: border-box;
}
hr {
width: 100%;
}

7
srv/tp1/src/styles/variables.css Normal file
View File

@@ -0,0 +1,7 @@
:root {
--color-primary: #333;
--color-secondary: #fff;
--background-color-primary: #fff;
--background-color-secondary: blue;
--border-radius: 3px;
}