`, ``, `

Czym tak naprawdę jest HTML i dlaczego to fundament całego internetu?

HTML, czyli HyperText Markup Language, to język znaczników, który służy do tworzenia struktury i treści stron internetowych. Wyobraź sobie go jako szkielet budynku to on definiuje, gdzie znajdą się ściany, okna czy drzwi, ale nie zajmuje się ich kolorem czy wykończeniem. W HTML-u używamy specjalnych "znaczników" (ang. tags), aby oznaczyć różne elementy treści, takie jak nagłówki, akapity, obrazy czy linki.

Dzięki HTML przeglądarki internetowe wiedzą, jak interpretować i wyświetlać zawartość strony. To właśnie HTML jest fundamentem, na którym opiera się praktycznie każda strona w internecie. Bez niego nie byłoby możliwe przeglądanie artykułów, oglądanie zdjęć czy klikanie w linki wszystko, co widzisz na ekranie, ma swoje korzenie w kodzie HTML.

HTML, CSS, JavaScript: Poznaj kluczowe trio i zrozum, za co odpowiada każde z nich

Tworzenie nowoczesnych stron internetowych opiera się na trzech filarach: HTML, CSS i JavaScript. Każdy z nich pełni inną, ale równie ważną rolę. HTML, jak już wiesz, odpowiada za strukturę i treść strony. To on mówi, co jest nagłówkiem, co akapitem, a co obrazem.

Następnie mamy CSS (Cascading Style Sheets), czyli kaskadowe arkusze stylów. Jeśli HTML to szkielet, to CSS jest niczym dekorator wnętrz. Odpowiada za wygląd strony kolory, czcionki, rozmiary, marginesy, układ elementów. Dzięki CSS Twoja strona nie będzie tylko czarno-białym tekstem, ale zyska estetyczny i przyjemny dla oka wygląd.

Ostatnim elementem jest JavaScript. To on dodaje stronie interaktywność. Myśl o nim jak o mechanizmie, który sprawia, że przyciski reagują na kliknięcia, formularze wysyłają dane, a galerie zdjęć zmieniają obrazy. JavaScript pozwala na dynamiczne zmiany na stronie bez konieczności jej przeładowywania, co znacząco poprawia doświadczenie użytkownika.

Niezbędnik początkującego kodera czego potrzebujesz, by zacząć

Edytor kodu, czyli Twoje cyfrowe biurko od Notatnika po VS Code

Aby pisać kod HTML, potrzebujesz edytora tekstu. Na początek, dosłownie każdy edytor się nada nawet systemowy Notatnik w Windowsie czy TextEdit na macOS. Jednakże, aby Twoja praca była wygodniejsza i bardziej efektywna, gorąco polecam użycie dedykowanego edytora kodu. Oferują one funkcje takie jak podświetlanie składni (kolorowanie różnych części kodu, co ułatwia czytanie), autouzupełnianie i wiele innych udogodnień, które przyspieszą Twoją naukę i pracę.

• Visual Studio Code (VS Code): Darmowy, niezwykle popularny i rozbudowany edytor od Microsoftu. Moim zdaniem to najlepszy wybór dla początkujących i zaawansowanych.
• Sublime Text: Lekki, szybki i elegancki edytor, dostępny również w darmowej wersji testowej.
• Atom: Darmowy edytor stworzony przez GitHub, również bardzo popularny i konfigurowalny.

Przeglądarka internetowa: Twoje okno do podglądu efektów pracy

Po napisaniu kodu HTML musisz go gdzieś zobaczyć. Do tego celu służy przeglądarka internetowa. To ona interpretuje Twój kod i wyświetla go w formie, którą znamy jako stronę internetową. Możesz użyć dowolnej nowoczesnej przeglądarki, takiej jak Google Chrome, Mozilla Firefox czy Microsoft Edge. Aby zobaczyć efekty swojej pracy, wystarczy, że zapiszesz plik HTML, a następnie otworzysz go w wybranej przeglądarce. To właśnie w niej będziesz na bieżąco śledzić, jak Twoja strona nabiera kształtów.

Szkielet każdej strony internetowej anatomia dokumentu HTML

Magiczna formuła startowa: Co oznaczają ``, ``, `` i ``?

Każdy dokument HTML5 zaczyna się od pewnej standardowej struktury, która informuje przeglądarkę, z jakim typem pliku ma do czynienia i jak ma go interpretować. To absolutna podstawa, którą musisz znać. Deklaracja </code> na samej górze informuje przeglądarkę, że ma do czynienia z dokumentem HTML5. Następnie cała zawartość strony jest zamknięta w znaczniku . Wewnątrz niego znajdują się dwie główne sekcje: i . Sekcja zawiera metadane o stronie (informacje dla przeglądarki i wyszukiwarek, które nie są bezpośrednio widoczne dla użytkownika), takie jak tytuł strony, linki do arkuszy stylów CSS czy ustawienia kodowania znaków. Natomiast sekcja to serce Twojej strony to tutaj umieszczasz całą widoczną treść: tekst, obrazy, linki, listy i wszystko, co użytkownik zobaczy na ekranie.

Tytuł strony i polskie znaki: Pierwsze kluczowe ustawienia w sekcji ``

W sekcji umieszczamy informacje, które nie są bezpośrednio widoczne na stronie, ale są kluczowe dla jej działania i wyświetlania. Jednym z najważniejszych znaczników jest . Tekst umieszczony między otwierającym a zamykającym znacznikiem pojawi się jako tytuł zakładki w przeglądarce. To bardzo ważne dla użytkownika, aby szybko zorientował się, jaką stronę właśnie przegląda.

Kolejnym absolutnie niezbędnym elementem, zwłaszcza w języku polskim, jest znacznik . Musisz go umieścić w sekcji , aby Twoja przeglądarka poprawnie wyświetlała polskie znaki diakrytyczne, takie jak ą, ć, ę, ł, ó, ś, ż, ź. Bez tego ustawienia, zamiast pięknych polskich liter, zobaczysz nieestetyczne "krzaczki". Zawsze pamiętaj o tym znaczniku!

Jak poprawnie zapisać plik i otworzyć go w przeglądarce? Praktyczny mini-poradnik

Po napisaniu kodu musisz go zapisać, aby móc go otworzyć i zobaczyć efekty w przeglądarce. To prosty, ale kluczowy krok:

1. Napisz swój kod: W edytorze tekstu (np. VS Code) wpisz kod HTML, który stworzyłeś.
2. Zapisz plik: Przejdź do menu "Plik" (File) i wybierz "Zapisz jako..." (Save As...).
3. Wybierz nazwę i rozszerzenie: Nadaj plikowi nazwę, np. index.html. Bardzo ważne jest, aby plik miał rozszerzenie `.html` (lub `.htm`). Nazwa "index.html" jest standardową nazwą dla strony głównej.
4. Wybierz lokalizację: Zapisz plik w wybranym folderze na swoim komputerze. Stwórz sobie osobny folder na projekty, aby zachować porządek.
5. Otwórz w przeglądarce: Przejdź do folderu, w którym zapisałeś plik. Dwukrotnie kliknij na plik index.html. Automatycznie otworzy się on w Twojej domyślnej przeglądarce internetowej. I voilà! Widzisz swoją pierwszą stronę!

Klocki LEGO Twojej strony najważniejsze znaczniki HTML, które musisz znać

Nagłówki i akapity (``, `

`): Jak nadać tekstowi strukturę i hierarchię?

Nagłówki są niezwykle ważne dla strukturyzowania treści i tworzenia hierarchii na stronie. Mamy ich sześć poziomów, od

Witaj na mojej stronie!
O mnie
Cześć, nazywam się Oskar i to jest moja pierwsza strona HTML. Uczę się programowania i jestem bardzo podekscytowany!
Moje zainteresowania
Lubię czytać książki, podróżować i odkrywać nowe technologie.

Linki (``): Jak po połączyć swoją stronę z innymi miejscami w sieci?

Linki, czyli hiperłącza, to jeden z najważniejszych elementów internetu. Pozwalają one łączyć strony ze sobą, tworząc sieć informacji. Tworzymy je za pomocą znacznika (od "anchor"). Kluczowym atrybutem jest href, który określa adres docelowy linku. Może to być adres zewnętrznej strony internetowej lub ścieżka do innej strony w Twoim projekcie.

Odwiedź moją ulubioną wyszukiwarkę: Google.
Dowiedz się więcej o mnie na stronie O mnie.

Obrazy (``): Jak ożywić stronę grafiką i dlaczego atrybut "alt" jest tak ważny?

Obrazy potrafią ożywić każdą stronę. Wstawiamy je za pomocą znacznika . Jest to tzw. znacznik samodomykający się, co oznacza, że nie ma znacznika zamykającego . Ma on dwa kluczowe atrybuty: src (od "source"), który wskazuje ścieżkę do pliku obrazu, oraz alt (od "alternative text"). Atrybut alt jest niezwykle ważny zawiera tekstowy opis obrazu, który wyświetli się, jeśli obraz się nie załaduje, a także jest czytany przez czytniki ekranowe dla osób niewidomych. Ma również znaczenie dla SEO!

Listy (``, ` `, ``): Idealny sposób na uporządkowanie treści

Listy to świetny sposób na uporządkowanie informacji i uczynienie ich bardziej czytelnymi. W HTML mamy dwa główne typy list: nieuporządkowane (unordered list), które używają punktorów, oraz uporządkowane (ordered list), które numerują elementy. Listę nieuporządkowaną tworzymy za pomocą znacznika

Moje ulubione hobby:
 
Czytanie książek
 
Gra na gitarze
 
Wędrówki po górach
 
Kroki do stworzenia strony:
 
Napisz kod HTML
 
Zapisz plik z rozszerzeniem .html
 
Otwórz plik w przeglądarce

   

 
Witaj na mojej stronie!
 
Cześć, nazywam się Oskar Kwiatkowski i to jest moja pierwsza strona internetowa, którą stworzyłem samodzielnie!
 
Kim jestem?
 
Jestem początkującym entuzjastą web developmentu, który z pasją odkrywa tajniki HTML, CSS i JavaScript. Każdy dzień to dla mnie nowa lekcja i krok w kierunku tworzenia coraz ciekawszych projektów.
  
To ja, w trakcie kodowania!
 
Moje zainteresowania
 
Poza kodowaniem mam wiele innych pasji, które pomagają mi zachować równowagę i czerpać radość z życia:
 
 
Podróże: Uwielbiam odkrywać nowe miejsca i kultury.
 
Książki: Od fantastyki po literaturę faktu, zawsze znajdę czas na dobrą lekturę.
 
Sport: Regularna aktywność fizyczna to dla mnie podstawa.
 
Gry planszowe: Świetny sposób na spędzanie czasu z przyjaciółmi.
 
 
Skontaktuj się ze mną!
 
Jeśli masz pytania lub po prostu chcesz porozmawiać o web developmencie, śmiało napisz!
 
Możesz odwiedzić mój profil na LinkedIn (link otworzy się w nowej karcie).