Înapoi la IT & Programare
IT & Programare · Începător
Cum să îți faci primul tău site simplu (HTML & CSS de la zero)
Progres
0 / 6
0%
Nu ai nevoie de cunoștințe avansate pentru a-ți crea propriul site. În acest tutorial, vei crea o pagină web simplă de prezentare folosind doar HTML și CSS. La final, vei avea un site funcțional pe care îl poți deschide în orice browser.
Pregătire
1
Creează structura folderului
Creează structura folderului: Creează un folder pe desktop numit site-ul-meu. În interior, creează un fișier numit index.html.
2
Scrie scheletul HTML
Scrie scheletul HTML: Deschide fișierul index.html și scrie:
html
<!DOCTYPE html>
<html>
<head>
<title>Site-ul Meu</title>
</head>
<body>
<h1>Bun venit pe site-ul meu!</h1>
<p>Acesta este primul meu paragraf.</p>
</body>
</html>
3
Deschide site-ul în browser
Deschide site-ul în browser: Salvează fișierul (Ctrl+S) și dublu-click pe el. Browserul îl va deschide automat. Felicitări, ai creat primul tău site!
Ce este HTML? HTML (HyperText Markup Language) este scheletul site-ului. Fiecare element este înconjurat de tag-uri (<h1>, <p>, <div>, etc.) care îi spun browserului cum să afișeze conținutul.
4
Adaugă stil cu CSS
Adaugă stil cu CSS: Creează un fișier nou în același folder numit style.css. Adaugă în el:
css
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
}
h1 {
color: #6a4cff;
}
5
Leagă CSS-ul de HTML
Leagă CSS-ul de HTML: Adaugă în interiorul tag-ului <head> din index.html:
html
<link rel="stylesheet" href="style.css">
6
Adaugă o poză și un buton
Adaugă o poză și un buton: Experimentează! Adaugă un tag <img> pentru o poză și un tag <a> pentru un link. Iată un exemplu:
html
<img src="poza.jpg" alt="Poza mea" width="300">
<br><br>
<a href="https://google.com">Mergi la Google</a>
Verifică-ți cunoștințele
Ce înseamnă HTML?
Schimbă culoarea titlului din CSS și adaugă o umbră de fundal pe pagină. Caută pe Google „CSS box-shadow” sau „CSS background gradient” pentru inspirație.
Materiale
- MDN Web Docs – cea mai bună documentație gratuită pentru HTML și CSS.
- W3Schools – tutoriale interactive pentru începători.
- CodePen – editează cod HTML/CSS direct în browser, fără instalare.