HTML jest podstawowym językiem programowania używanym do tworzenia stron internetowych. Jeśli chcesz nauczyć się, jak zrobić stronę HTML, jesteś we właściwym miejscu. Ten kompletny przewodnik krok po kroku pokaże Ci, jak rozpocząć od zera i zbudować prostą, ale funkcjonalną stronę internetową.
W naszym artykule:
- Jak zrobić stronę w HTML?
Jak zrobić stronę HTML? Tworzenie struktury plików
Jak stworzyć stronę internetową HTML? Zanim przejdziemy do kodowania, musisz utworzyć strukturę plików dla swojej strony internetowej. Otwórz dowolny edytor kodu i utwórz nowy folder, w którym będziesz przechowywać wszystkie pliki związane z Twoją stroną.
- Utworzenie podstawowego szkieletu strony
Teraz, gdy masz już gotową strukturę plików, możemy rozpocząć od tworzenia podstawowego szkieletu naszej strony. Otwórz plik index.html w swoim edytorze kodu i wpisz poniższy kod:
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Moja Strona</title>
</head>
<body>
<h1>Witaj na mojej stronie!</h1>
</body>
</html>
- Dodanie stylów CSS
Teraz czas dodać trochę stylów CSS, aby nasza strona wyglądała bardziej atrakcyjnie. Utwórz nowy plik o nazwie style.css w folderze swojej strony i dodaj poniższy kod:
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}
h1 {
color: #333;
text-align: center;
margin-top: 50px;
}
- Dodanie nagłówka, menu i treści
Teraz możemy dodać nagłówek, menu i trochę treści do naszej strony. Otwórz plik index.html i zastąp jego zawartość poniższym kodem:
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Moja Strona</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Witaj na mojej stronie!</h1>
</header>
<nav>
<ul>
<li><a href="#">Strona główna</a></li>
<li><a href="#">O mnie</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
<section>
<h2>O mnie</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae ligula eu ipsum efficitur fermentum a eu neque. Ut varius mauris a cursus facilisis. Vivamus id felis vel nibh aliquam efficitur. Donec sit amet dui et odio placerat varius id a turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus rhoncus tortor nec volutpat tempus. Aliquam at mi sed lorem rhoncus luctus in eget justo. Nullam vulputate mauris nisi, ut vestibulum nisi tincidunt ac.</p>
</section>
<footer>
<p>© 2021 Moja Strona</p>
</footer>
</body>
</html>
- Dodanie efektów wizualnych
Teraz chcemy dodać kilka efektów wizualnych do naszej strony, aby wyglądała jeszcze lepiej. Otwórz plik style.css i dodaj poniższy kod:
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #666;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
margin-right: 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
section {
background-color: #fff;
padding: 20px;
margin: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
- Dodanie treści do podstrony „O mnie”
Teraz możemy utworzyć podstronę „O mnie” i dodać do niej treść. Utwórz nowy plik o nazwie omnie.html i dodaj poniższy kod:
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>O mnie - Moja Strona</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>O mnie</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="omnie.html">O mnie</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
<section>
<h2>Mam na imię [Twoje imię]</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae ligula eu ipsum efficitur fermentum a eu neque. Ut varius mauris a cursus facilisis. Vivamus id felis vel nibh aliquam efficitur. Donec sit amet dui et odio placerat varius id a turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus rhoncus tortor nec volutpat tempus. Aliquam at mi sed lorem rhoncus luctus in eget justo. Nullam vulputate mauris nisi, ut vestibulum nisi tincidunt ac.</p>
</section>
<footer>
<p>© 2021 Moja Strona</p>
</footer>
</body>
</html>
- Kontynuuj rozwijanie swojej strony
Gratulacje! Teraz masz podstawy do stworzenia swojej własnej strony internetowej w HTML. Możesz kontynuować rozwijanie swojej strony, dodając więcej treści, efektów wizualnych i interaktywnych elementów. Pamiętaj, że HTML to tylko podstawa, możesz również nauczyć się innych języków programowania, takich jak CSS i JavaScript, aby dodać jeszcze więcej funkcjonalności do swojej strony.
W tym przewodniku pokazaliśmy Ci, jak zrobić stronę HTML. Zachęcamy Cię do eksperymentowania, dodawania własnych treści i efektów wizualnych, aby dostosować stronę do swoich potrzeb. Pamiętaj, że nauka tworzenia stron internetowych wymaga czasu i praktyki, więc nie spiesz się i ciesz się procesem tworzenia swojej własnej strony internetowej.
