Prosta strona internetowa w HTML krok po kroku
Pierwsza strona internetowa stworzona w HTML nie będzie co prawda należała ani do najpiękniejszych, ani do najbardziej funkcjonalnych. Od czegoś trzeba jednak zacząć i taki projekt jest idealną okazją, by posiąść trochę podstawowych umiejętności, lub by łatwiej wykonać swoje zadanie na informatykę.
Stworzymy projekt od kompletnego zera. Pokażę krok po kroku jak zrobić prostą stronę internetową w HTML. Zachęcam Cię do przerobienia tego projektu od deski do deski i do późniejszego przerabiania go na własną rękę. Dzięki praktycznej nauce i przerabianiu lub dodawaniu kolejnych analogicznie działających modułów znacznie łatwiej będzie Ci się faktycznie czegoś nauczyć.
Co zrobimy:
- Stworzymy stronę kompletnie od zera, bez użycia frameworków, czy bibliotek HTML i CSS jak np. Bootstrap
- Będzie wyglądała dość surowo, ale i przejrzyście. Nie chcę używać zbyt wielu kolorów i obrazków.
- Pokażę też trochę podstaw CSS, dzięki któremu choć odrobinę dopieścimy warstwę wizualną naszej strony.
- Będę chciał zachowywać tu prostotę i nie poruszać bardziej zaawansowanych zagadnień. Od samego początku nie będziemy pracować wyłącznie w obrębie jednego pliku. Dałoby się, ale nie jest to na dłuższą metę zbyt dobry wybór, więc warto od samego początku tego unikać.
Krok 1: Utwórz folder z plikami
Na samym początku dobrze będzie zacząć od uporządkowania naszej struktury. Pliki w różnych katalogach mogą dostarczyć problemów z ustalaniem ścieżek przy tym, gdy będziemy się do nich odwoływać. Nie chcę komplikować Ci zadania, więc postaraj się o wrzucanie wszystkich omawianych tu plików do jednego folderu.
Tworzymy pliki takie jak:
- index.html
- omnie.html
- style.css
Krok 2: Otwórz plik index.html za pomocą notatnika lub dowolnego edytora kodu
Edytor kodu wcale nie jest niezbędny do tworzenia stron. Na dobrą sprawę można robić to nawet w Windowsowym notatniku i sam zaczynałem właśnie w taki sposób. Prawda jest jednak taka, że raczej mało który doświadczony koder postępuje w ten sposób. Szkoda nerwów i czasu.
Jeżeli myślisz o nauce tworzenia stron na poważnie, od razu proponuję Ci pobranie jakiegoś darmowego edytora kodu jak np. Visual Studio Code.
Krok 3: Utwórz w pliku index.html prosty szkielet strony
Plik index.html
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Index – Moja strona</title>
</head>
<body>
<h1>Witaj na mojej stronie</h1>
</body>
</html>Zaczynamy od zdefiniowania doctype, oraz języka naszej witryny w tagu <html>.
Poniżej znajduje się head, czyli “głowa” naszej strony, w której możemy ustawić między innymi kodowanie znaków (w przypadku języka polskiego polecam właśnie utf-8), załączyć dodatkowe arkusze CSS (będą nam potrzebne do nadania naszej stronie ciekawszego wyglądu), czy np. tag title, który pozwala na nadanie tytułu w karcie przeglądarki.
Krok 4: Dodaj header (nagłówek), menu, trochę treści i footer (stopkę)
Plik index.html
<!doctype html> <html lang="pl"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>Index – Moja strona</title> </head> <body> <div class="top"> <h1>Moja strona</h1> </div> <div class="menu"> <a href="index.html">Strona Główna</a> | <a href="omnie.html">O mnie</a> </div> <h2>Witaj na mojej stronie</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor atque eveniet id quasi autem quis porro molestiae dolorem laudantium qui corrupti, perspiciatis exercitationem blanditiis optio aliquam dolore necessitatibus aliquid recusandae placeat ducimus libero tenetur doloribus. Eligendi quibusdam architecto quisquam a dolorum temporibus illum quod quo reprehenderit, perspiciatis provident nemo quam harum laborum ipsum, aut nobis voluptatibus accusantium assumenda eos ullam alias repellendus! Reprehenderit optio expedita quo voluptate ad magni eos ratione temporibus architecto, necessitatibus assumenda. Consequatur amet, quod quibusdam quas corrupti facilis soluta nemo, culpa consectetur repellat mollitia sed quo quam provident fugit, tempore vero eaque! Sunt provident quisquam iure, similique obcaecati voluptas distinctio quidem autem corrupti dolore nihil tempora consequuntur esse nulla nostrum ea maiores eum eius. Sapiente provident corrupti non distinctio dicta ipsum. Nihil, a quae libero fugit aliquid odit! Neque voluptates, architecto illo quod dolore impedit? Possimus a corporis quia! Dolore, eligendi consequatur ea explicabo illo quidem quos est, natus provident error inventore consectetur nesciunt eum, culpa corporis deserunt vel adipisci quia sint omnis recusandae maxime unde! Totam fuga neque mollitia sed sunt debitis sequi id ratione! Officia quas optio eligendi harum assumenda ad distinctio nulla delectus voluptatibus veritatis placeat debitis at voluptates, ratione nam, culpa possimus ullam! Eligendi, laboriosam, tempora vel quam repellat ipsa necessitatibus totam laudantium natus accusantium, laborum numquam quod sequi libero enim voluptatem autem itaque! Quam laborum sapiente maxime placeat consequuntur, cupiditate, eos molestiae nihil odio tempora perspiciatis culpa quas. Voluptates rerum harum, nam voluptatum dolore, recusandae, a aliquam natus illum minus assumenda. Dolore, libero? Necessitatibus sit praesentium vel suscipit perferendis obcaecati quasi. Inventore, quasi repellendus eligendi magnam facere mollitia fugiat perspiciatis quaerat voluptate dolorum distinctio nisi, quisquam, nesciunt sed aliquid quia. Repellat nobis natus minima beatae debitis ab sunt, quia necessitatibus itaque voluptatum iure quod maiores harum! Animi odit aliquam eos a?</p> <div class="footer"> Moja strona internetowa | Admin 2021 </div> </body> </html>
Dodajemy elementy do sekcji body naszego dokumentu.
Zadziałałyby one nawet bez użycia znaczników <div> i </div> pomiędzy którymi muszą się znajdować, ale nie umieściłem ich tam przez przypadek. Dzięki nim i nadanym przez nas nazwom klas (atrybut class) będziemy mogli odwołać się do tych elementów w CSS, w którym nadamy im trochę parametrów poprawiających aspekty wizualne witryny.
W divie z menu użyliśmy także tagów <a>. Dzięki atrybutowi href możemy przekierować użytkownika po kliknięciu na dowolną inną stronę, w tym także podstronę naszego serwisu. Z pomocą tych znaczników umożliwimy użytkownikowi proste przemieszczanie się po naszej witrynie.
Dowiedz się więcej o linkach w HTML
Krok 5: Dodaj trochę CSS’a
Plik style.css
body {
background: #eee;
margin: 0 20%;
}
.top {
background: #cccccc;
border: 3px solid #acacac;
border-radius: 10px;
padding: 30px;
margin: 20px 0px;
text-align: center;
}
.menu, .footer {
background: #cccccc;
border: 3px solid #acacac;
padding: 10px;
text-align: center;
}
a {
color: #6b1d1d;
font-size: 18px;
font-weight: bold;
}Do całego body odwołujemy się właśnie za pomocą nazwy “body”. Do klas odwołujemy się ich indywidualną nazwą, poprzedzając je kropką. W przypadku klas “menu” i “footer” nadałem im takie same właściwości, dlatego nie rozbijałem ich na dwie klamry, a wstawiłem je po przecinku. W przypadku elementów <a> w naszym pliku HTML nie nadawałem im specjalnych klas (class) lub identyfikatorów (id), więc odwołuję się bezpośrednio do samego tagu. Należy jednak pamiętać o tym, że w takim przypadku każdy link na naszej stronie będzie ostylowany właśnie w taki sposób.
Pomiędzy klamrami ustawiłem poszczególne parametry, jak między innymi:
- background – odpowiedzialny za tło elementu (lub całej strony w przypadku body). Można zdefiniować go na przykład za pomocą kolorów RBG, lub HEX.
- margin – odległość od krawędzi, margines. Dzięki niemu mogłem w prosty sposób nieco zwęzić stronę, żeby nie była aż tak szeroka.
- border – ramka elementu, zdefiniowałem 3px szerokości, typ solid i szary kolor HEX. Zobacz: Generator ramek HTML.
- border-radius – zaokrąglenie ramki
- padding – odstęp, który w odróżnieniu od marginesu (margin) jest odstępem wewnątrz, a nie zewnątrz elementu
- text-align – ustawiony na center pozwolił mi wyśrodkować napisy w nagłówku, menu i stopce.
- color – określa kolor tekstu
- font-size – wielkość czcionki
- font-weight – grubosć czcionki
Polecam pobawić się tymi wartościami i pokasować niektóre z nich, pozmieniać wartości, albo pododawać tam coś innego. To bardzo dobry sposób na naukę.
Krok 6: Utwórz stronę “O mnie”.
Plik: omnie.html
<!doctype html> <html lang="pl"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>O mnie – Moja strona</title> </head> <body> <div class="top"> <h1>O mnie</h1> </div> <div class="menu"> <a href="index.html">Strona Główna</a> | <a href="omnie.html">O mnie</a> </div> <img src="https://webporady.pl/wp-content/themes/webporady-theme/img/logo-w.png" class="logo"> <h2>Mam na imię Michał</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim totam natus eaque obcaecati aut inventore, id repudiandae voluptatem pariatur numquam architecto quasi quis minus! Placeat aliquid ratione vero? Magni, laboriosam.</p> <ul> <li>Jakieś punkty</li> <li>I jeszcze jeden</li> <li>I jeszcze dwa</li> </ul> <div class="footer"> Moja strona internetowa | Admin 2021 </div> </body> </html>
Tak naprawdę kopiujemy poprzedni plik i zmieniamy wartość title i tytułu strony (h1). Zmieniona została też treść, w któej dodałem listę punktowaną (elementy <li> zawarte w tagu <ul>), oraz logo serwisu webporady.pl. Oprócz ścieżki pliku w atrybucie “src” dodałem też klasę logo. Klasa ta ma zdefiniowaną wartość margin, więc do arkusza CSS dodaj jeszcze następujący kod:
Klasa logo pliku: style.css (po jej dołączeniu obrazek obniży się trochę w dół, jak na poniższym screenie) – dodaj ten kod na dole pliku style.css.
.logo {
margin-top: 20px;
}
Aby otworzyć swoją stronę HTML wystarczy otworzyć plik index.html za pomocą dowolnej przeglądarki. W przypadku, w którym będziemy chcieli opublikować ją w sieci, powinniśmy skorzystać z jakiegoś serwera, lub hostingu. Dla prostych stron HTML stworzonych w celach nauki, w zupełności powinny wystarczyć darmowe hostingi współdzielone.
W tym poradniku pokazałem, w jaki sposób utworzyć bardzo prostą stronę opartą wyłącznie o proste funkcjonalności HTML i CSS. Jeżeli jesteście nowicjuszami, możecie rozwijać sobie ten projekt i trochę się na nim pouczyć. W przyszłości polecam Wam też zgłębienie chociażby podstaw języka PHP, który pozwoli między innymi na trzymanie kodu menu w osobnym pliku. Dzięki temu chcąc dodać nowy element, nie musielibyśmy zmieniać go w menu ręcznie dla każdej podstrony (co jest trochę uciążliwe, zwłaszcza wtedy, gdy mamy więcej niż kilka podstron). Alternatywnie można od razu pouczyć się tworzenia szablonów do gotowych już systemów CMS, jak na przykład WordPress.
