S31-S32-S33-S34 – Crearea unei Pagini Web Personale și a Paginii Clasei
Proiect Practic: Crearea unei Pagini Web Personale și a Paginii Clasei
Durata: 8 ore
Nivel: Clasa a IX-a
Obiective:
- Crearea unei pagini web personale utilizând HTML și CSS.
- Construirea unei pagini centralizate pentru clasa utilizatorului.
- Examinarea metodelor de stocare și publicare a paginilor web.
- Dezvoltarea abilităților de organizare și colaborare prin aplicații practice.
Etapele Proiectului:
1. Planificarea și structura proiectului (1 oră)
- Definirea scopului paginii personale:
- Informații personale (ex.: nume, hobby-uri, contacte).
- Prezentarea unei galerii foto și a intereselor personale.
- Pagina clasei:
- Include informații generale despre clasă (ex.: lista colegilor, orar, evenimente).
- Crearea unor legături către paginile personale ale elevilor.
- Structura paginilor:
- Pagina principală a clasei:
- Titlu și descriere generală.
- Link-uri către paginile personale.
- Paginile personale:
- Descriere personală, galerie foto, hobby-uri.
2. Crearea paginii personale (2 ore)
- Codul HTML de bază pentru pagina personală:
<!DOCTYPE html>
<html>
<head>
<title>Pagina mea personală</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
}
header {
background-color: #4CAF50;
color: white;
padding: 15px;
text-align: center;
}
nav {
margin: 20px;
text-align: center;
}
nav a {
margin: 0 15px;
text-decoration: none;
color: #4CAF50;
}
section {
margin: 20px;
padding: 20px;
background-color: white;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
footer {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Bine ați venit pe pagina mea personală!</h1>
</header>
<nav>
<a href=”#despre”>Despre mine</a>
<a href=”#hobby-uri”>Hobby-uri</a>
<a href=”#contact”>Contact</a>
</nav>
<section id=”despre”>
<h2>Despre mine</h2>
<p>Numele meu este [Nume Elev]. Sunt elev în clasa a IX-a și pasionat de tehnologie și programare.</p>
</section>
<section id=”hobby-uri”>
<h2>Hobby-uri</h2>
<ul>
<li>Fotografie</li>
<li>Sport</li>
<li>Lectură</li>
</ul>
</section>
<section id=”contact”>
<h2>Contact</h2>
<p>Email: exemplu@email.com</p>
<p>Telefon: 07xx xxx xxx</p>
</section>
<footer>
<p>© 2024 Pagina mea personală</p>
</footer>
</body>
</html>
3. Crearea paginii clasei (2 ore)
- Codul HTML pentru pagina clasei:
<!DOCTYPE html>
<html>
<head>
<title>Pagina Clasei</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #eef;
}
header {
background-color: #2196F3;
color: white;
padding: 15px;
text-align: center;
}
section {
margin: 20px;
padding: 20px;
background-color: white;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
ul {
list-style: none;
padding: 0;
}
ul li {
margin: 10px 0;
}
ul li a {
text-decoration: none;
color: #2196F3;
}
</style>
</head>
<body>
<header>
<h1>Pagina Clasei a IX-a</h1>
</header>
<section>
<h2>Elevii clasei</h2>
<ul>
<li><a href=”pagina_personala_1.html”>Elev 1</a></li>
<li><a href=”pagina_personala_2.html”>Elev 2</a></li>
<li><a href=”pagina_personala_3.html”>Elev 3</a></li>
</ul>
</section>
<section>
<h2>Orarul Clasei</h2>
<p>Link: <a href=”orar_clasa.html”>Vizualizați orarul</a></p>
</section>
</body>
</html>
4. Modalități de stocare a paginilor web (1 oră)
- Stocare locală:
- Salvarea paginilor și imaginilor în același director.
- Organizarea fișierelor într-o structură clară:
- folder principal: paginile HTML.
- subfoldere: pentru imagini și alte fișiere.
- Stocare online:
- Introducerea noțiunilor despre platforme gratuite de hosting (ex.: GitHub Pages, Netlify).
- Publicarea paginilor folosind opțiuni gratuite de hosting.
5. Prezentarea proiectului și concluzii (2 ore)
- Fiecare elev prezintă pagina personală și contribuția sa la pagina clasei.
- Se analizează structura paginilor și organizarea informației.
- Feedback și concluzii despre proiect.
Rezultate așteptate:
- Elevii vor avea o înțelegere practică a creării și publicării unei pagini web.
- Vor învăța să colaboreze și să creeze pagini interconectate.
- Vor experimenta stocarea și organizarea paginilor web.
Criterii de evaluare:
- Corectitudinea codului HTML și CSS (30%).
- Creativitatea și aspectul paginilor (20%).
- Funcționalitatea și legăturile dintre pagini (30%).
- Prezentarea și claritatea proiectului (20%).
Total: 100 puncte.