Bezpłatna konsultacja
Musisz wykonać pierwszą stronę internetową na informatykę lub chcesz nauczyć się tworzenia witryn od podstaw? Praktyka to najlepszy sposób nauki, dlatego też stworzyliśmy ten poradnik, który pomoże Ci krok po kroku opanować umiejętność pisania witryn internetowych przy pomocy języka HTML.
Przygotuj się na to, że taka strona nie będzie zgodna z aktualnymi trendami w tworzeniu stron internetowych, nie będzie nowoczesna i wyposażona w chatboty czy animacje, do których przywykliśmy. Jednak efekt, jaki osiągniesz i umiejętności, które nabędziesz, możesz porównać do stawiania fundamentów.
W tym artykule poznasz też podstawy związane z funkcjonowaniem CSS, dzięki któremu własnoręcznie stworzona witryna nabierze m.in. koloru.
Zacznij od początku – gdzie stworzyć stronę internetową za darmo w HTML-u?
Zanim w ogóle zaczniesz tworzyć pierwszą stronę internetową w HTML-u, będziesz potrzebować miejsca, gdzie będziesz pisać kod. Do wyboru masz kilka opcji, wybierz tę, która będzie dla Ciebie wygodniejsza.
Oto, gdzie możesz zapisywać kod swojej strony:
1. W notatniku 
Systemowy notatnik to świetna opcja na start, gdy nie chcesz tracić czasu i chcesz wykonać szybko zadanie na informatykę. Musisz jednak zdawać sobie sprawę, że notatnik nie wskaże Twoich błędów i będzie wymagał specjalnego zapisu.
Gdy już otworzysz notatnik, przejdź do sekcji Plik, kliknij Zapisz jako.
Następnie musisz dokonać kilku zmian, na początku w polu Typ zapisu wybierz wariant Wszystkie pliki, a później zmieniamy nazwę notatnika i na końcu dodajemy rozszerzenie .html.
Wystarczy, że klikniesz Zapisz, a notatnik będzie obsługiwał już format, który pomoże Ci tworzyć krok po kroku pierwszą stronę.
2. W Wordzie 
Alternatywą dla notatnika może być Word, którego większość użytkowników ma zainstalowanego na komputerze.
W tym przypadku również należy otworzyć nowy plik, kliknąć przycisk Plik, a następnie wybrać z lewej kolumny Zapisz jako.
Konieczna staje się też zmiana typu pliku z Dokument programu Word na Strona sieci Web, przefiltrowana.
Zmień nazwę pliku i kliknij Zapisz.
3. W edytorze tekstu 
Jak możesz się domyślić, profesjonaliści nie korzystają z Worda czy notatnika, gdy piszą stronę. Za to sięgają po bardziej rozbudowane i specjalnie stworzone w tym celu edytory tekstu.
Dobrym przykładem będzie tutaj Notepad++, który jest świetnym rozwiązaniem na początku, a dodatkowo jest dostępny całkowicie za darmo na licencji GNU, więc możesz pobrać go bez obaw na stronie twórcy.
Pobierz Notepad++ z oficjalnej strony
Jeśli chcesz naprawdę nauczyć się tworzenia stron i kodowania, to od razu wybierz ten edytor kodu.
Do dzieła! Tworzymy pierwszą stronę internetową w HTML-u krok po kroku za darmo
Krok 1 – Stwórz pliki strony
Na samym początku stwórz nowy folder, którego nazwij Pierwsza strona internetowa.
Następnie już w środku folderu stwórz 2 pliki, które będą wchodzić w skład tworzonej przez nas strony internetowej.
Utwórz pliki:
- index.html – będzie odpowiadać Twojej stronie głównej,
- style.css – ten plik pomoże Ci w umiejscowieniu różnych bloków w ustalonych pozycjach oraz w zmianie kolorów różnych elementów na stronie.
Krok 2 – Zapisz szkielet strony
Kliknij prawym przyciskiem myszy na plik index.html, a następnie na Otwórz za pomocą. Tam znajdziesz listę programów, które może wykorzystać do stworzenia swojej strony internetowej w HTML-u.
Jak już wcześniej pisaliśmy, doskonale sprawdzą się do tego Notatnik, Word oraz edytor kodu, taki jak np. Notepad++. Wybierz ten, który spełni Twoje oczekiwania i otwórz plik.
Teraz czas już do działania, czyli pisania strony w języku HTML.
Na początku trzeba zdefiniować doctype oraz język witryny przy pomocy tagu <html>. Następnie można przejść do rozpisania dwóch sekcji strony <head> oraz <body>.
Czym się one charakteryzują?
- HEAD – to sekcja głowa, której efekty nie są typowo widoczne na stronie, ale stanowią jej trzon. Tutaj należy sprecyzować sposób kodowania znaków (dla języka polskiego najlepszym wyborem jest język utf-8), ustawić meta dane, które mają wpływ na to, że Twoja strona będzie widoczna w Google czy też załączać dodatkowe arkusze, np. CSS. Aby zmienić wygląd strony, niezbędne jest załączenie pliku style.css. Wystarczy wtedy dodać zapisek <link rel=”stylesheet” href=”style.css”>.
- BODY – możesz utożsamiać sekcję <body> z ciałem strony, na którym widoczne są wszystkie zmiany, to tutaj dodajemy nowe kolumny, teksty, nagłówki, klasy, które następnie przy pomocy CSS zostają zmodyfikowane pod względem wizualnym.
Oto jak powinien prezentować się pierwszy szkielet strony:
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Moja pierwsza strona</title>
</head>
<body>
</body>
</html>W tej chwili nasza strona internetowa to tylko białe tło, dlatego musimy przejść do kolejnego etapu tworzenia strony html w notatniku.
Krok 3 – Wykorzystaj <div> i stwórz podstawowe elementy strony
Każda strona zawiera pewne stałe elementy, takie jak – menu, stopka (footer) czy nagłówki H1-H6 (jeden nagłówek H1 na jedną podstronę).
Aby je stworzyć, wykorzystamy element blokowy <div>, którego możemy wykorzystywać w sekcji <body> i jest swoistym pojemnikiem na treść.
Nie ma on wpływu na wygląd strony, ale można go ostylizować po dodaniu klas (np. <div class=”menu”>…</div>) i użyciu CSS, aby zupełnie odmienić wygląd strony.
Do stworzenia menu wykorzystaj tag <a>.
Z kolei atrybut href doskonale sprawdzi się do tego, aby po kliknięciu przekierować użytkownika w wybrane miejsce na stronie lub poza nią.
Tak może prezentować się kod:
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Moja pierwsza strona</title>
</head>
<body>
<div class="top">
<h1>Witaj na stronie</h1>
</div>
<div class="menu">
<a href="index.html">Strona Główna</a>
</div>
<div class="kim-jestem">
<h2>Kim jestem?</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.</p>
</div>
<div class="footer">
Realizacja: <a href="https://zdobywcysieci.pl">Zdobywcy Sieci</a>
</div>
</body>
</html>Tak przygotowany kod daje nam następujące efekty:
Coś już mamy, ale wygląda to trochę nudno.
Dodajmy trochę kolorów na naszej stronie 🙂
Krok 4 – Dodaj CSS
Następnie przejdź do pliku style.css.
W CSS-ie dzieją się cuda!
Podobne: Jakie kolory wybrać na stronę internetową?
Oto kilka przykładowych zmian, jakie możesz wykonać:
body {
background: #fefefe;
margin: auto;
max-width:1000px;
}
.top {
background: #cccccc;
border: 3px solid #acacac;
margin: 20px 0px;
text-align: center;
}
.menu .footer {
background: #cccccc;
text-align: center;
border: 3px solid #acacac;
}
.kim-jestem {
margin:0px 15px;
}
a {
color: #6b1d1d;
font-size: 18px;
}Ściąga, abyś wiedział, co oznaczają następujące parametry:
- background – zmiana tła,
- margin – odległość od krawędzi, margines,
- border – ramka,
- color – kolor tekstu,
- font-size – wielkość tekstu.
Teraz otwórz plik index.pl i podziwiaj, jak za darmo w notatniku, w Wordzie lub w edytorze kodu, stworzyłeś pierwszą stronę w HTML-u.
Nasz efekt wygląda następująco:
Podsumowanie
Jak widzisz, stworzenie prostej strony w html wcale nie jest tak trudne, jak może się wydawać. Metodą prób i błędów można osiągnąć naprawdę fajne efekty. Baw się kodem, testuj, a następnie podglądaj efekty swojej pracy w przeglądarce internetowej.
Mam nadzieję, że ten poradnik choć trochę przybliżył Ci podstawy języka html 🙂
