` i składa się z sekcji `

` i ``.

Kluczowe znaczniki do treści to `

-

` (nagłówki), `` (akapity), `` (linki) i `` (obrazy).

Plik należy zapisać z rozszerzeniem `.html` i otworzyć w przeglądarce.

CSS jest niezbędny do stylizacji strony, a jego podstawy są kolejnym krokiem w nauce.

Twoja pierwsza strona HTML czego naprawdę potrzebujesz na start

Zanim zaczniesz tworzyć swoją pierwszą stronę internetową, warto zrozumieć, czym tak naprawdę jest HTML. To nie jest język programowania w potocznym rozumieniu, a raczej język znaczników. Oznacza to, że zamiast pisać skomplikowane algorytmy, Ty "oznaczasz" fragmenty tekstu, aby nadać im strukturę i znaczenie. To właśnie ta prostota sprawia, że HTML jest tak przyjazny dla początkujących i stanowi fundament każdej strony internetowej.

Do stworzenia swojej pierwszej strony HTML nie potrzebujesz żadnych drogich ani skomplikowanych narzędzi. Wystarczy Ci to, co prawdopodobnie masz już na swoim komputerze. Jednakże, aby praca była bardziej komfortowa i efektywna, warto rozważyć skorzystanie z darmowych edytorów kodu, które oferują wiele pomocnych funkcji.

HTML to nie język programowania, czyli co musisz wiedzieć, zanim zaczniesz

HTML, czyli HyperText Markup Language (język znaczników hipertekstowych), to fundamentalna technologia tworzenia stron internetowych. Jego głównym zadaniem jest strukturyzowanie treści określanie, co jest nagłówkiem, co akapitem, co linkiem, a co obrazkiem. W przeciwieństwie do języków programowania, takich jak Python czy JavaScript, HTML nie wykonuje operacji logicznych ani obliczeń. Jest to język opisowy, co czyni go niezwykle przystępnym dla osób rozpoczynających swoją przygodę z tworzeniem stron. Ta prostota jest jego ogromną zaletą, pozwalającą szybko zobaczyć efekty swojej pracy.

Narzędzia pracy: Czy zwykły Notatnik wystarczy?

Odpowiedź brzmi: tak! Zwykły edytor tekstu, taki jak Notatnik w systemie Windows czy TextEdit na macOS, jest absolutnie wystarczający do napisania kodu HTML. Jest on zawsze pod ręką i nie wymaga żadnej instalacji. Jego główną zaletą jest prostota i dostępność, co obniża barierę wejścia dla każdego, kto chce spróbować swoich sił. Wadą jest jednak brak jakichkolwiek udogodnień dla programistów brak podświetlania składni, autouzupełniania kodu czy wbudowanych narzędzi do sprawdzania błędów może sprawić, że pisanie dłuższych lub bardziej złożonych stron stanie się czasochłonne i podatne na pomyłki.

Przegląd darmowych edytorów kodu, które ułatwią Ci życie (Visual Studio Code, Notepad++)

Chociaż Notatnik wystarczy, aby zacząć, szybko odkryjesz, jak wiele czasu i frustracji mogą zaoszczędzić dedykowane edytory kodu. Oferują one funkcje, które znacząco usprawniają proces tworzenia stron. Warto wypróbować jeden z popularnych, darmowych programów, które są dostępne dla każdego.

• Visual Studio Code (VS Code): Bardzo popularny, darmowy edytor od Microsoftu. Posiada mnóstwo wtyczek, świetne wsparcie dla wielu języków programowania i technologii webowych, a także intuicyjny interfejs.
• Notepad++: Lekki i szybki edytor, szczególnie popularny wśród użytkowników Windows. Oferuje kolorowanie składni, obsługę wielu kart i wiele innych przydatnych funkcji.
• Sublime Text: Choć nie jest całkowicie darmowy (posiada nieograniczony okres próbny), Sublime Text jest uwielbiany za swoją szybkość, elegancję i rozbudowane możliwości personalizacji.
• Atom: Darmowy i otwarty edytor stworzony przez GitHub. Jest bardzo konfigurowalny i posiada dużą społeczność, co przekłada się na bogactwo dostępnych pakietów i wtyczek.

Anatomia strony internetowej: poznaj fundamentalną strukturę HTML5

Każda strona internetowa, niezależnie od jej złożoności, opiera się na pewnym podstawowym "szkielecie", który definiuje jej strukturę. Zrozumienie tej struktury jest kluczowe, aby poprawnie budować strony i zapewnić, że będą one prawidłowo interpretowane przez przeglądarki internetowe. W HTML5 ta struktura jest bardzo logiczna i intuicyjna.

Deklaracja `` dlaczego to pierwsza i najważniejsza linijka kodu?

Pierwsza linijka kodu na każdej stronie HTML powinna wyglądać dokładnie tak: </code>. Jest to deklaracja typu dokumentu. Informuje ona przeglądarkę internetową, że mamy do czynienia z dokumentem napisanym w najnowszej wersji języka HTML, czyli HTML5. Bez tej deklaracji przeglądarka mogłaby próbować interpretować stronę w starszym, mniej kompatybilnym trybie, co mogłoby prowadzić do nieoczekiwanych problemów z wyświetlaniem. To prosty, ale absolutnie niezbędny element.

Znacznik `` korzeń Twojego dokumentu

Po deklaracji `DOCTYPE` następuje główny kontener dla całej zawartości Twojej strony znacznik ``. Wszystko, co znajduje się na Twojej stronie internetowej, od metadanych po widoczną treść, musi być umieszczone wewnątrz tego znacznika. Można go traktować jako korzeń drzewa struktury dokumentu HTML.


 ... cała zawartość strony ...


Sekcja `` mózg strony, którego nie widać

Wewnątrz znacznika `` znajdują się dwie główne sekcje: `

` i ``. Sekcja `` zawiera informacje o stronie, które nie są bezpośrednio wyświetlane użytkownikowi, ale są kluczowe dla przeglądarki i wyszukiwarek. Znajdują się tu między innymi:

• : Określa tytuł strony, który pojawia się na karcie przeglądarki.
• : Definiuje kodowanie znaków, co jest niezbędne do poprawnego wyświetlania polskich liter i innych specjalnych znaków.
• Linki do zewnętrznych arkuszy stylów CSS (o czym więcej później).


 
 


Sekcja `` serce i dusza, czyli cała widoczna treść

Sekcja `

` to miejsce, gdzie umieszczasz całą treść, którą użytkownik zobaczy po załadowaniu strony. Wszystkie teksty, obrazy, linki, filmy, przyciski wszystko, co tworzy interaktywny i wizualny aspekt strony, znajduje się właśnie tutaj. To tutaj będziesz używać większości znaczników, o których powiemy w następnej sekcji.


 ... tutaj znajdzie się cała widoczna treść ...


Tworzymy zawartość: najważniejsze znaczniki, które musisz opanować

Teraz, gdy znasz już podstawową strukturę strony, czas na wypełnienie jej treścią. HTML oferuje bogaty zestaw znaczników, które pozwalają na tworzenie różnorodnych elementów. Oto te, które są absolutnie kluczowe na samym początku nauki:

Nagłówki `` do ``: Jak uporządkować treść i nadać jej hierarchię?

Nagłówki służą do tworzenia hierarchii w treści strony i ułatwiają czytelnikom zrozumienie jej struktury. Znacznik

jest zarezerwowany dla najważniejszego nagłówka na stronie (zazwyczaj tytułu głównego) i powinien być użyty tylko raz. Kolejne nagłówki, od

do

, tworzą podtytuły i pod-podtytuły, budując logiczną strukturę dokumentu. Są one również ważne dla wyszukiwarek internetowych (SEO).

Główny tytuł strony

Sekcja pierwsza

Treść w sekcji pierwszej...

Podsekcja pierwszej sekcji

Treść w podsekcji...

Akapity ``: Jak dodawać i formatować bloki tekstu?

Znacznik

(paragraph) jest podstawowym elementem do tworzenia bloków tekstu. Przeglądarka automatycznie dodaje odstępy przed i po każdym akapicie, oddzielając go od innych elementów. Jest to najczęściej używany znacznik do umieszczania treści tekstowej na stronie.

To jest pierwszy akapit mojej strony internetowej. Zawiera on jakąś treść, która ma być wyświetlona użytkownikowi.

A to jest drugi akapit, oddzielony od poprzedniego.

Linki ``: Jak połączyć swoją stronę z resztą internetu?

Znacznik (anchor) służy do tworzenia hiperłączy, czyli klikalnych odnośników, które pozwalają użytkownikom nawigować między stronami internetowymi. Kluczowym atrybutem jest href, który wskazuje adres docelowy linku. Może to być adres innej strony internetowej, plik do pobrania, adres e-mail, a nawet odnośnik do innej sekcji na tej samej stronie.

Przejdź do Google

Obrazy ``: Jak ożywić stronę za pomocą grafiki?

Znacznik pozwala na wstawianie obrazów na stronę. Jest to tzw. znacznik samodomykający się, co oznacza, że nie potrzebuje znacznika zamykającego (jak ). Wymaga on co najmniej dwóch atrybutów: src (source), który podaje ścieżkę do pliku obrazu, oraz alt (alternative text), który dostarcza tekstowy opis obrazka. Tekst alternatywny jest bardzo ważny dla dostępności (czytniki ekranu dla osób niewidomych) oraz dla SEO, gdy obrazek z jakiegoś powodu nie może zostać wyświetlony.

Listy uporządkowane i nieuporządkowane: Jak przedstawiać dane w czytelny sposób?

Listy są doskonałym sposobem na prezentowanie danych w sposób uporządkowany i łatwy do przyswojenia. HTML oferuje dwa główne typy list:

• Listy nieuporządkowane (
  ): Używane do prezentowania elementów, których kolejność nie ma znaczenia. Każdy element listy jest oznaczany znacznikiem
• (list item) i domyślnie poprzedzony jest kropką lub innym symbolem.
• Listy uporządkowane (
  ): Stosowane, gdy kolejność elementów jest ważna (np. instrukcje krok po kroku). Elementy listy również umieszcza się w znaczniku
• , a przeglądarka domyślnie numeruje je kolejno.




 
• Pierwszy element

 
• Drugi element

 
1. Krok pierwszy

 
2. Krok drugi

Od kodu do efektu: jak zapisać i wyświetlić swoją pierwszą stronę

Napisanie kodu to dopiero połowa sukcesu. Aby zobaczyć efekt swojej pracy, musisz wykonać jeszcze kilka prostych kroków. Nie martw się, to równie łatwe jak pisanie samego kodu.

Wybór nazwy i rozszerzenia `.html` klucz do sukcesu

Kiedy już skończysz pisać kod swojej strony w edytorze tekstu, musisz go zapisać. Najważniejszą rzeczą jest nadanie plikowi odpowiedniej nazwy i rozszerzenia. Pliki stron internetowych muszą mieć rozszerzenie .html (lub rzadziej .htm). Nazwa pliku powinna być krótka, opisowa i najlepiej bez spacji i polskich znaków. Standardową nazwą dla strony głównej witryny jest index.html. Inne strony mogą mieć nazwy takie jak o-nas.html, kontakt.html itp. Używanie myślników zamiast spacji jest dobrą praktyką.

Jak otworzyć plik w przeglądarce i zobaczyć swoje dzieło?

Po poprawnym zapisaniu pliku z rozszerzeniem .html, możesz go otworzyć w dowolnej przeglądarce internetowej (np. Chrome, Firefox, Edge, Safari). Istnieje kilka sposobów:

1. Dwukrotne kliknięcie: Najprostszy sposób to po prostu odnaleźć zapisany plik w folderze i dwukrotnie w niego kliknąć. System operacyjny powinien automatycznie otworzyć go w domyślnej przeglądarce.
2. Przeciągnij i upuść: Otwórz swoją przeglądarkę internetową, a następnie przeciągnij ikonę zapisanego pliku HTML z folderu bezpośrednio do okna przeglądarki.
3. Otwórz w przeglądarce z edytora: Niektóre edytory kodu (np. VS Code) mają wbudowaną funkcję "Otwórz w przeglądarce", która robi to automatycznie.

Co robić, gdy strona nie wyświetla się poprawnie? Prosty debugging dla początkujących

Jeśli Twoja strona wygląda inaczej, niż się spodziewałeś, lub w ogóle się nie wyświetla, nie panikuj! To normalna część procesu nauki. Oto kilka podstawowych rzeczy, które warto sprawdzić:

• Literówki: Sprawdź dokładnie, czy nazwy wszystkich znaczników i atrybutów są poprawnie napisane. Nawet jedna literówka może spowodować błąd.
• Zamknięte znaczniki: Upewnij się, że wszystkie znaczniki, które tego wymagają (np.
  ,
  , ), mają swoje odpowiednie znaczniki zamykające (np. , , ).
• Ścieżki do plików: Jeśli wstawiasz obrazy lub linki do innych plików HTML, sprawdź, czy ścieżki w atrybutach src i href są poprawne.
• Kodowanie znaków: Upewnij się, że w sekcji masz dodany znacznik , aby polskie znaki wyświetlały się prawidłowo.

HTML to nie wszystko: Czas na odrobinę stylu z CSS

HTML jest fantastyczny do tworzenia struktury i zawartości strony, ale sam w sobie wygląda dość surowo. Aby Twoja strona była atrakcyjna wizualnie, potrzebujesz czegoś więcej języka stylów. Tutaj na scenę wkracza CSS.

Czym jest CSS i dlaczego jest niezbędny do stworzenia nowoczesnej strony?

CSS (Cascading Style Sheets), czyli Kaskadowe Arkusze Stylów, to język, który pozwala Ci kontrolować wygląd elementów HTML. Podczas gdy HTML odpowiada za to, CO znajduje się na stronie (treść i jej struktura), CSS odpowiada za to, JAK to wygląda (kolory, czcionki, rozmiary, marginesy, układ, animacje i wiele więcej). Nowoczesne strony internetowe są nie do pomyślenia bez CSS, ponieważ to on nadaje im profesjonalny wygląd, czytelność i responsywność (dostosowanie do różnych rozmiarów ekranów).

Trzy sposoby na dodanie stylów: zewnętrzny arkusz, styl w nagłówku i styl inline

Istnieje kilka sposobów na dodanie stylów CSS do Twojej strony HTML. Oto trzy najpopularniejsze:

1. Zewnętrzny arkusz stylów: Jest to zdecydowanie najlepsza i najczęściej stosowana praktyka. Tworzysz osobny plik z rozszerzeniem .css (np. style.css), w którym umieszczasz wszystkie swoje reguły stylów. Następnie w sekcji Twojego pliku HTML dodajesz link do tego pliku za pomocą znacznika . Pozwala to na łatwe zarządzanie stylami wielu stron jednocześnie i utrzymanie czystego kodu HTML.

   
body { background-color: lightblue; }




2. Wewnętrzny arkusz stylów: Style możesz umieścić bezpośrednio w sekcji Twojego pliku HTML, wewnątrz znacznika . Jest to wygodne dla małych stron lub gdy chcesz zastosować style tylko do jednej konkretnej strony.

   
 


3. Style inline: To najbardziej bezpośredni sposób, ale jednocześnie najmniej zalecany do większych projektów. Style dodajesz bezpośrednio do konkretnego znacznika HTML za pomocą atrybutu style. Styl inline ma najwyższy priorytet, ale sprawia, że kod HTML staje się nieczytelny i trudny w utrzymaniu.

   Ten tekst jest zielony i ma większą czcionkę.

Praktyczny przykład: Jak zmienić kolor tła i czcionki na Twojej stronie?

Zobaczmy, jak prosto można zmienić wygląd naszej strony, używając wewnętrznego arkusza stylów. Dodajmy następujący kod do sekcji Twojego pliku HTML, a następnie zobaczysz efekt w przeglądarce.


 
 
 


Teraz Twój tekst będzie miał ciemniejszy kolor na jasnym tle, a cała strona będzie wyglądać bardziej profesjonalnie. To dopiero początek możliwości CSS!

Co dalej? Twoja mapa drogowa do zostania web developerem

Gratulacje! Właśnie stworzyłeś swoją pierwszą stronę HTML. To ogromny krok naprzód. Ale pamiętaj, że to dopiero początek fascynującej podróży w świat tworzenia stron internetowych. Świat web developmentu jest dynamiczny i pełen możliwości, a oto kilka kierunków, w których możesz dalej podążać:

• Poznaj semantyczne znaczniki HTML5: Poza podstawowymi znacznikami, HTML5 wprowadza znaczniki semantyczne, takie jak
  , , ,
  ,
  . Używanie ich poprawia strukturę strony, jej dostępność dla czytników ekranu oraz jest korzystne dla SEO.
• Zanurz się głębiej w CSS: Opanowanie CSS to klucz do tworzenia atrakcyjnych wizualnie i responsywnych stron. Poznaj selektory, własności, jednostki miar, Flexbox czy Grid Layout narzędzia te pozwolą Ci tworzyć złożone układy stron.
• Naucz się JavaScriptu: Jeśli chcesz, aby Twoje strony były interaktywne (np. reagowały na kliknięcia, wyświetlały dynamiczne treści, miały animacje), musisz poznać JavaScript. To język programowania, który ożywia strony internetowe.
• Poznaj narzędzia deweloperskie przeglądarki: Każda nowoczesna przeglądarka ma wbudowane narzędzia deweloperskie (zazwyczaj dostępne po naciśnięciu F12), które są nieocenione przy debugowaniu kodu HTML, CSS i JavaScript.

Przeczytaj również: Tabele HTML: Zbuduj, ostyluj i spraw, by były responsywne!

Gdzie szukać dalszej wiedzy i darmowych materiałów do nauki?

Na szczęście, zasoby do nauki web developmentu są na wyciągnięcie ręki i wiele z nich jest całkowicie darmowych:

• MDN Web Docs (Mozilla Developer Network): To prawdopodobnie najlepsze i najbardziej kompleksowe źródło wiedzy o technologiach webowych. Znajdziesz tam szczegółowe opisy HTML, CSS, JavaScript i wielu innych technologii.
• W3Schools: Popularna strona oferująca tutoriale i przykłady kodu dla początkujących. Jest bardzo przystępna i pozwala na interaktywne ćwiczenia.
• FreeCodeCamp: Ogromna platforma edukacyjna oferująca interaktywne kursy z certyfikatami, obejmujące całe spektrum technologii webowych.
• YouTube: Znajdziesz tam mnóstwo kanałów z darmowymi kursami i tutorialami prowadzonymi przez doświadczonych deweloperów.
• Kursy online (np. Udemy, Coursera): Chociaż wiele kursów jest płatnych, często można znaleźć promocje lub darmowe wersje wprowadzające.

Pamiętaj, że kluczem do sukcesu jest regularna praktyka. Eksperymentuj z kodem, twórz własne małe projekty i nie bój się popełniać błędów to najlepszy sposób na naukę!