Tworzenie strony internetowej od podstaw
Celem tego kursu jest opisanie krok po kroku procesu jak zrobić stronę internetową HTML przy pomocy HTML5 i CSS3.
Tworzenie własnej strony internetowej może wydawać się skomplikowane, ale z odpowiednimi narzędziami i wiedzą możesz to zrobić od podstaw, nawet jeśli jesteś początkujący. Co więcej w tej lekcji pokażę Ci krok po kroku, jak stworzyć prostą stronę internetową za pomocą HTML i CSS.
Co to jest HTML i CSS?
HTML (HyperText Markup Language) to podstawowy język używany do tworzenia struktur stron internetowych. Pozwala na dodawanie tekstu, obrazów, linków i innych elementów do Twojej strony.
CSS (Cascading Style Sheets) to język służący do stylizowania stron internetowych. Dzięki CSS możesz zmieniać kolory, czcionki, układ i inne aspekty wizualne strony.
Jak zrobić stronę internetową HTML
Przede wszystkim w tym kursie początkujący oraz średnio zaawansowani użytkownicy poznają techniki przygotowania pliku HTML oraz CSS, których poprawność kodu poddamy sprawdzeniu zgodności ze standardami określonymi przez organizację W3C, która od wielu lat zajmuje się tworzeniem zasad budowania stron www.
Zaczniemy od „przelania” pomysłu na ekran monitora. Następnie przygotujemy szablon strony w HTML. Z kolei w pliku CSS3 zdefiniujemy wygląd poszczególnych elementów strony takich jak tło, menu, przyciski. Na koniec gotową już stronę wgramy na serwer i poczynimy kroki w kierunku promocji naszej witryny.
Dodatkowo przechodząc przez kolejne lekcje opisujące tworzenie witryny internetowej krok po kroku przygotujemy prostą stronę www, którą w miarę poznawania nowych właściwości będzie można dowolnie rozbudować.
Krok 1: Przygotowanie narzędzi
Zanim zaczniemy, potrzebujesz kilku rzeczy:
- Edytor tekstu: Możesz użyć prostego Notatnika (Windows) lub TextEdit (Mac). Lepszym wyborem będzie jednak bardziej zaawansowany edytor kodu, taki jak Visual Studio Code, Sublime Text czy Atom.
- Przeglądarka internetowa: Aby zobaczyć rezultaty swojej pracy, możesz używać dowolnej przeglądarki, takiej jak Google Chrome, Mozilla Firefox czy Safari.
Krok 2: Utworzenie pliku HTML
- Otwórz swój edytor tekstu.
- Utwórz nowy plik i zapisz go jako
index.html.
W pliku index.html dodaj poniższy kod:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moja Pierwsza Strona</title>
</head>
<body>
<h1>Witaj na mojej stronie!</h1>
<p>To jest moja pierwsza strona stworzona za pomocą HTML i CSS.</p>
</body>
</html>Powyższy kod to podstawowa struktura dokumentu HTML:
<!DOCTYPE html>deklaruje typ dokumentu.<html lang="pl">otwiera znacznik HTML i ustawia język na polski.<head>zawiera metadane, takie jak kodowanie znaków (<meta charset="UTF-8">) i tytuł strony (<title>).<body>zawiera treść strony, w tym nagłówek (<h1>) i akapit (<p>).
Krok 3: Utworzenie pliku CSS
- Utwórz nowy plik i zapisz go jako
style.css. - Dodaj poniższy kod do pliku
style.css:
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
margin: 0;
padding: 20px;
}
h1 {
color: #0073e6;
}
p {
font-size: 18px;
}Powyższy kod CSS stylizuje elementy na stronie:
- Styl dla
bodyustawia czcionkę, kolor tła, kolor tekstu oraz marginesy i odstępy. - Styl dla
h1zmienia kolor nagłówka. - Styl dla
pustawia rozmiar czcionki dla akapitów.
Krok 4: Połączenie HTML i CSS
Aby połączyć plik HTML z CSS, dodaj poniższy kod do sekcji <head> w pliku index.html:
<link rel="stylesheet" href="style.css">Po dodaniu kod wygląda tak:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moja Pierwsza Strona</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Witaj na mojej stronie!</h1>
<p>To jest moja pierwsza strona stworzona za pomocą HTML i CSS.</p>
</body>
</html>Krok 5: Zapisz i otwórz stronę
Zapisz oba pliki (index.html i style.css). Następnie otwórz plik index.html w przeglądarce internetowej. Powinieneś zobaczyć swoją pierwszą stronę internetową z podstawowym formatowaniem.
Jak zrobić stronę internetową HTML – podsumowanie
Gratulacje! Stworzyłeś swoją pierwszą podstawową stronę internetową przy użyciu HTML i CSS. od podstaw. Jednak to dopiero początek Twojej przygody z tworzeniem stron internetowych. Możesz teraz eksperymentować z różnymi znacznikami HTML i stylami CSS, aby uczynić swoją stronę bardziej atrakcyjną i funkcjonalną. Pamiętaj, że praktyka czyni mistrza, więc nie bój się próbować nowych rzeczy i uczyć się na błędach. Powodzenia!
W kolejnej lekcji rozbudujemy powyższy szablon i wzbogacimy go wizualnie. Zapraszam do kolejnej lekcji!
