Ghidul incepătorului cu exemple practice, în crearea unui site web simplu: HTML și CSS
Creare site web simplu
Hai să explorăm impreuna crearea unui site web simplu folosind limbajul HTML și CSS.
Aceasta este o introducere de bază, dar este un punct bun de plecare pentru cei care doresc să înceapă să înțeleagă structura și stilizarea unei pagini web.
Crearea unui site web simplu
Pasul 1: Setarea documentului HTML
Deschide un editor de text simplu, cum ar fi Notepad pe Windows sau TextEdit pe macOS.
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Site Web Simplu</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Bine ați venit pe Site-ul Meu!</h1>
</header>
<section>
<h2>Despre Noi</h2>
<p>Aici vom spune ceva despre noi.</p>
</section>
<section>
<h2>Contact</h2>
<p>Puteți să ne contactați la adresa de email: <a href="mailto:contact@siteulmeu.com">contact@siteulmeu.com</a></p>
</section>
<footer>
<p>© 2023 Site-ul Meu. Toate drepturile rezervate.</p>
</footer>
</body>
</html>Pasul 2: Crearea fișierului CSS (style.css)
Crează un fișier separat numit style.css în același director cu fișierul HTML și adaugă următorul cod:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em 0;
}
section {
max-width: 800px;
margin: 2em auto;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em 0;
position: fixed;
bottom: 0;
width: 100%;
}Pasul 3: Deschiderea site-ului în browser
Salvează ambele fișiere și deschide fișierul HTML cu un browser web. Poți face acest lucru făcând clic dreapta pe fișier și selectând „Deschide cu” și alegând browserul tău preferat.
Veți vedea o pagină web simplă cu un antet, două secțiuni și un subsol. Aceasta este o bază simplă pe care o poți construi mai departe.
Acest tutorial acoperă doar aspectele de bază, dar te familiarizează cu structura HTML și stilizarea CSS a unei pagini web. Noi vom mai realiza astfel de tutoriale pentru a va familiariza cu acest domeniu.
Articol scris în data de: 17 noiembrie 2023.
Ultima actualizare articol: 17 noiembrie 2023, 18:02, făcută de: Echipa WOWBRANDS Group
