Web - HTML/CSS Bazic
Construieste-ti primele pagini web - de la zero la portofoliu personal!
📋 Ce poti face cu OneCompiler:
📝
Editare separata - Tab-uri pentru HTML, CSS (styles.css) si JavaScript (scripts.js)
👁️
Preview in timp real - Vezi rezultatul imediat pe masura ce scrii codul
🔗
Share & Publish - Fa pagina publica si primeste un link pe care il poti trimite oricui!
🤖
AI Generator - Descrie ce vrei sa creezi si AI-ul genereaza codul pentru tine!
🎯 Cum incepi:
- Deschide onecompiler.com/html
- Scrie codul HTML in tab-ul principal
- Adauga stiluri in tab-ul styles.css
- Adauga interactivitate in tab-ul scripts.js
- Apasa Run pentru a vedea rezultatul!
- Apasa Share pentru a face pagina publica
Vreau sa creez pagini web!
Dupa aceste lectii, vei putea crea site-uri web profesionale cu HTML si CSS.
<!-- Prima ta pagina web -->
<html>
<head>
<title>Pagina Mea</title>
<style>
body { background: #8b5cf6; }
h1 { color: white; }
</style>
</head>
<body>
<h1>Salut, lume!</h1>
</body>
</html>
PARTEA 1: FUNDAMENTE HTML
1
Introducere in HTML
🎯 Inteleg ce este HTML si structura de baza
2
Text si Titluri
🎯 Formatez text cu headings, paragrafe, bold/italic
3
Liste si Linkuri
🎯 Creez liste ordonate/neordonate si hyperlink-uri
4
Imagini in HTML
🎯 Adaug si dimensionez imagini pe pagina web
PARTEA 2: STILIZARE CSS
5
Introducere in CSS
🎯 Invat sa stilizez cu culori, fonturi, fundaluri
🎮
Proiect: Portofoliu Personal
🎯 Creez propriul site de prezentare cu HTML/CSS
🚀 SNIPPET-URI UTILE
Copiaza aceste template-uri pentru a incepe rapid! Apasa butonul de copiere, apoi lipeste in OneCompiler.
📄 Template HTML5 de Baza
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<title>Pagina Mea</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f0f0f0;
padding: 20px;
}
</style>
</head>
<body>
<h1>Bine ai venit!</h1>
<p>Aceasta este pagina mea web.</p>
</body>
</html>
🎴 Card cu Imagine si Text
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<title>Card Prezentare</title>
<style>
body { font-family: Arial; background: #eee; padding: 40px; }
.card {
background: white;
border-radius: 12px;
padding: 20px;
max-width: 300px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.card img { width: 100%; border-radius: 8px; }
.card h2 { color: #333; margin: 15px 0 10px; }
.card p { color: #666; }
</style>
</head>
<body>
<div class="card">
<img src="https://picsum.photos/300/200" alt="Imagine">
<h2>Titlu Card</h2>
<p>Descriere scurta a cardului.</p>
</div>
</body>
</html>
🔘 Buton Interactiv (CSS Hover)
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<title>Buton Interactiv</title>
<style>
body { font-family: Arial; padding: 40px; background: #1a1a2e; }
.btn {
background: #8b5cf6;
color: white;
padding: 15px 30px;
border: none;
border-radius: 8px;
font-size: 18px;
cursor: pointer;
transition: all 0.3s;
}
.btn:hover {
background: #7c3aed;
transform: scale(1.1);
box-shadow: 0 5px 20px rgba(139, 92, 246, 0.4);
}
</style>
</head>
<body>
<button class="btn">Click pe mine!</button>
</body>
</html>
📍 Meniu de Navigare
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<title>Meniu Navigare</title>
<style>
body { font-family: Arial; margin: 0; }
nav {
background: #333;
padding: 15px;
display: flex;
gap: 20px;
}
nav a {
color: white;
text-decoration: none;
padding: 10px 15px;
border-radius: 5px;
}
nav a:hover { background: #555; }
.content { padding: 30px; }
</style>
</head>
<body>
<nav>
<a href="#">🏠 Acasa</a>
<a href="#">📖 Despre</a>
<a href="#">📧 Contact</a>
</nav>
<div class="content">
<h1>Bine ai venit!</h1>
<p>Acesta este continutul paginii.</p>
</div>
</body>
</html>
🎮 Quizuri Interactive
Testeaza-ti cunostintele si castiga XP!
🧩 Concepte pe care le inveti
📊 Progresul tau
0 din 6 lectii completate