Cześć! W tych notatkach poznasz podstawy tworzenia stron internetowych -...
Wszystko o HTML: Kompletny przewodnik







Wprowadzenie do tworzenia stron
HTML (Hypertext Markup Language) to podstawowy język używany do budowania stron internetowych. Oparty jest na znacznikach (tagach), które mówią przeglądarce, jak powinna wyświetlać zawartość.
Każda strona internetowa, którą odwiedzasz, ma w tle kod HTML! Ten język pozwala na umieszczanie tekstu, obrazów, linków i wielu innych elementów.
Ciekawostka: Nawet najprostsze strony internetowe składają się z wielu znaczników HTML, które współpracują ze sobą, tworząc to, co widzisz na ekranie!
Kiedy widzisz elementy jak menu, logo, czy przycisk wyszukiwania na stronie - wszystkie one są zbudowane przy pomocy znaczników HTML, które określają ich funkcję i położenie.

Czym jest HTML?
HTML to język, który służy do tworzenia struktury strony internetowej. Działa jak szkielet, na którym opiera się cała strona.
Za pomocą HTML możesz tworzyć nagłówki, akapity, listy, linki i wiele innych elementów. Każdy element jest definiowany przez parę znaczników - otwierający <tag> i zamykający </tag>.
Te znaczniki mówią przeglądarce, jak interpretować zawartość między nimi. Dzięki nim wiesz, co jest tytułem, co jest paragrafem tekstu, a co jest linkiem do innej strony.
Wskazówka: Wyobraź sobie HTML jak plan budowy domu - określa, gdzie będą ściany, drzwi i okna, ale nie mówi, jakiego będą koloru!
Twoja przeglądarka (Chrome, Firefox, Safari) czyta ten kod i zamienia go w stronę, którą widzisz na ekranie.

Historia HTML
Tim Berners-Lee, fizyk z CERN, zaczął wszystko od stworzenia prototypu nazwanego ENQIRE, a później projektu WorldWideWeb (W3). To dało początek językowi HTML, jaki znamy dzisiaj.
Pierwsza wersja HTML z 1991 roku miała tylko 22 znaczniki! Dla porównania, dzisiejszy HTML ma ich ponad 100. W 1994 powstała organizacja W3C, która zajęła się rozwojem standardów internetowych.
Z czasem HTML ewoluował - w 1995 pojawiła się nowa wersja, a w 1998 roku dołączył do niego CSS, który pozwolił na stylizację stron. HTML5, którego używamy obecnie, został oficjalnie wprowadzony dopiero w 2014 roku.
Czy wiesz? HTML przeszedł długą drogę od prostego języka z migającymi napisami i kolorowymi czcionkami do zaawansowanego narzędzia, które umożliwia tworzenie nowoczesnych, interaktywnych stron!
Ta ewolucja pokazuje, jak internet rozwinął się z prostych stron tekstowych do zaawansowanych aplikacji, których używamy codziennie.

Struktura dokumentu HTML
Każda strona HTML ma podobną podstawową strukturę. Na samej górze znajduje się deklaracja <!DOCTYPE html>, która informuje przeglądarkę, że dokument jest napisany w HTML5.
Cały dokument jest zawarty między znacznikami <html> i </html>. Wewnątrz znajdują się dwie główne sekcje:
-
Sekcja head (
<head>) - tutaj umieszczamy informacje o stronie, takie jak tytuł, kodowanie znaków, czy podłączenie arkuszy stylów CSS. Zawartość tej sekcji nie jest widoczna dla użytkownika. -
Sekcja body (
<body>) - to właściwa zawartość strony, którą zobaczy użytkownik.
Pomocna wskazówka: Dobrą praktyką jest dzielenie strony na logiczne sekcje za pomocą znaczników
<header>,<section>,<footer>. Dzięki temu kod jest czytelniejszy i łatwiejszy w utrzymaniu!
Dla lepszej organizacji możesz podzielić swoją stronę na trzy główne "boksy": nagłówek (header) na górze z logo i menu, sekcję główną (section) ze właściwą treścią i stopkę (footer) na dole z danymi kontaktowymi.

Czym jest CSS?
CSS (Cascading Style Sheets) to język, który odpowiada za wygląd strony internetowej. Podczas gdy HTML tworzy strukturę, CSS decyduje o kolorach, czcionkach, odstępach i układzie elementów.
Za pomocą CSS możesz zdefiniować style dla całej strony lub pojedynczych elementów. Na przykład, możesz ustawić wszystkie nagłówki na kolor niebieski, a paragrafy na czarny.
CSS działa na zasadzie selektorów - wybierasz element HTML (np. wszystkie nagłówki h1) i definiujesz jego właściwości (np. kolor: niebieski, rozmiar czcionki: 20pt).
Świetna rada: Wyobraź sobie, że HTML to szkielet człowieka, a CSS to jego ubranie, fryzura i makijaż - wszystko co nadaje mu wygląd!
W przykładzie z notatek widzimy, jak można zastosować różne style do nagłówka i paragrafów, a nawet tworzyć klasy (jak .red_txt), które można wykorzystać do stylizowania wybranych fragmentów tekstu na czerwono.

Zastosowania CSS w praktyce
CSS zrewolucjonizował świat stron internetowych i jest kluczowy w wielu obszarach:
E-commerce wykorzystuje CSS, aby tworzyć atrakcyjne sklepy internetowe dostosowane do różnych branż. Dzięki niemu strony sklepów są przyjemne wizualnie i intuicyjne w obsłudze, co przekłada się na zwiększenie sprzedaży.
CSS znacznie ułatwia utrzymanie strony. Zamiast zmieniać style bezpośrednio w setkach plików HTML, możesz zmodyfikować jeden plik CSS i natychmiast zaktualizować wygląd całej strony!
W mediach społecznościowych CSS jest niezbędny do tworzenia interaktywnych interfejsów. Facebook, Instagram i inne platformy używają zaawansowanych technik CSS, aby zapewnić spójny wygląd i działanie.
Praktyczna rada: Dzięki CSS możesz sprawić, że twoja strona będzie wyglądać świetnie na różnych urządzeniach - od komputerów po telefony, co jest kluczowe w dzisiejszych czasach!
CSS umożliwia też zaawansowaną obsługę obrazów - możesz kontrolować ich rozmiar, położenie, a nawet efekty specjalne bez modyfikowania oryginalnych plików.
We thought you’d never ask...
What is the Knowunity AI companion?
Our AI companion is specifically built for the needs of students. Based on the millions of content pieces we have on the platform we can provide truly meaningful and relevant answers to students. But its not only about answers, the companion is even more about guiding students through their daily learning challenges, with personalised study plans, quizzes or content pieces in the chat and 100% personalisation based on the students skills and developments.
Where can I download the Knowunity app?
You can download the app in the Google Play Store and in the Apple App Store.
Is Knowunity really free of charge?
That's right! Enjoy free access to study content, connect with fellow students, and get instant help – all at your fingertips.
Similar Content
Most popular content: HTML
1Most popular content in Matematyka
9Właściwości funkcji liniowej
Zrozumienie funkcji liniowej: definicja, współczynniki a i b, monotoniczność oraz sposób wyznaczania równania prostej. Dowiedz się, jak określić dziedzinę, zbiór wartości oraz punkty przecięcia z osiami. Idealne dla uczniów przygotowujących się do egzaminów z matematyki.
Skróty klawiszowe
Skróty klawiszowe
Nauka i technologia
Poznaj podstawowe terminy związane z nauką i technologią, takie jak Bluetooth, przeglądarka internetowa i kamera wideo, w języku angielskim.
Podstawy Pythona
Odkryj podstawowe funkcje Pythona, w tym potęgowanie, deklarowanie zmiennych, wczytywanie danych oraz konwersję typów. Idealne dla początkujących programistów. Zawiera przykłady kodu i wyjaśnienia kluczowych koncepcji.
Podstawy C++: Typy i Operatory
Zrozum podstawowe typy danych i operatory w C++. Dowiedz się o zmiennych, operatorach logicznych, relacyjnych oraz instrukcjach warunkowych. Idealne dla początkujących programistów. Typ materiału: Podsumowanie.
Podstawy Grafiki Komputerowej
Zrozumienie grafiki komputerowej: różnice między grafiką wektorową a rastrową, formaty plików (PDF, SVG, EPS, PNG, TIFF, PSD, JPG, BMP, GIF), modele kolorów (RGB, CMYK, HSV) oraz kompresja danych. Idealne dla studentów informatyki i web developmentu.
Znaczniki HTML i selektory CSS
Krótki opis wybranych znaczników HTML i selektorów CSS.
Relacyjne Bazy Danych
Zrozumienie relacyjnych baz danych: definicje, typy relacji (jeden do jednego, jeden do wielu, wiele do wielu), klucze podstawowe i obce, oraz modele baz danych. Idealne dla studentów informatyki i osób pragnących zgłębić temat baz danych.
C++ Podstawy Programowania
Odkryj kluczowe elementy programowania w C++, w tym zmienne, typy danych (int, float, double), pętle (while, do-while, for), instrukcje warunkowe (if, else, switch) oraz operatory logiczne i arytmetyczne. Idealne dla początkujących programistów, którzy chcą zrozumieć podstawy języka C++ i jego zastosowania.
Most popular content
9Przedwiośnie: Analiza Tematów
Zanurz się w analizę powieści 'Przedwiośnie' Stefana Żeromskiego. Odkryj kluczowe motywy, takie jak dojrzewanie, rewolucja i podróż, oraz ich znaczenie w kontekście niepodległej Polski. Notatka zawiera szczegółowe omówienie bohaterów, narracji oraz symboliki, co czyni ją idealnym materiałem do nauki i przygotowania do egzaminów.
Analiza Lalki Prusa
Szczegółowa analiza powieści 'Lalka' Bolesława Prusa, obejmująca kompozycję, problematykę, głównych bohaterów oraz kontekst społeczny Warszawy lat 70. i 80. XIX wieku. Zawiera omówienie miłości Wokulskiego do Izabeli Łęckiej, różnorodności narracji oraz otwartości zakończenia. Idealna dla studentów literatury i miłośników polskiej prozy.
Analiza 'Lalki' Prusa
Szczegółowa analiza powieści 'Lalka' Bolesława Prusa, obejmująca gatunek, czas i miejsce akcji, kluczowych bohaterów, oraz motywy literackie. Zawiera omówienie postaci Stanisława Wokulskiego jako romantyka i pozytywisty oraz realistyczny obraz Warszawy i Paryża. Idealne dla studentów literatury polskiej.
Wprowadzenie do lektury Zemsta
Sprawdź znajomość czasu i miejsca akcji oraz głównych wątków komedii Aleksandra Fredry.
Makbet: Analiza Tragedii Szekspira
Odkryj kluczowe cechy dramatu 'Makbet' Williama Szekspira, w tym złamanie zasady decorum, psychologię postaci oraz tematykę zbrodni i ambicji. Zrozum, jak Szekspir przekształca klasyczną tragedię, wprowadzając elementy fantastyki i psychologii. Idealne dla uczniów i studentów literatury. Typ: analiza literacka.
biologia- ryby klasa 6
Przed odpowiedzią ustnią idealny do powtórki ❤️
Wesele: Analiza Symboli
Zanurz się w głęboką analizę dramatu 'Wesele' Stanisława Wyspiańskiego. Odkryj kluczowe symbole, takie jak chochoł i złoty róg, oraz ich znaczenie w kontekście polskiego społeczeństwa przełomu XIX i XX wieku. Notatka zawiera omówienie genezy, kompozycji, tematów oraz portretu społecznego, co czyni ją idealnym materiałem do nauki i przygotowań do egzaminów.
Korzeń- organ podziemny rośliny
prawie wszystko w temacie "korzeń- organ podziemny rośliny "
Karta rowerowa
UwU
Can't find what you're looking for? Explore other subjects.
Students love us — and so will you.
The app is very easy to use and well designed. I have found everything I was looking for so far and have been able to learn a lot from the presentations! I will definitely use the app for a class assignment! And of course it also helps a lot as an inspiration.
This app is really great. There are so many study notes and help [...]. My problem subject is French, for example, and the app has so many options for help. Thanks to this app, I have improved my French. I would recommend it to anyone.
Wow, I am really amazed. I just tried the app because I've seen it advertised many times and was absolutely stunned. This app is THE HELP you want for school and above all, it offers so many things, such as workouts and fact sheets, which have been VERY helpful to me personally.
Wszystko o HTML: Kompletny przewodnik
Cześć! W tych notatkach poznasz podstawy tworzenia stron internetowych - języki HTML i CSS. To dwa najważniejsze narzędzia, które pozwalają budować wszystkie strony, które odwiedzasz codziennie w internecie. Dowiesz się, jak działa HTML odpowiedzialny za strukturę strony oraz CSS odpowiedzialny...

Wprowadzenie do tworzenia stron
HTML (Hypertext Markup Language) to podstawowy język używany do budowania stron internetowych. Oparty jest na znacznikach (tagach), które mówią przeglądarce, jak powinna wyświetlać zawartość.
Każda strona internetowa, którą odwiedzasz, ma w tle kod HTML! Ten język pozwala na umieszczanie tekstu, obrazów, linków i wielu innych elementów.
Ciekawostka: Nawet najprostsze strony internetowe składają się z wielu znaczników HTML, które współpracują ze sobą, tworząc to, co widzisz na ekranie!
Kiedy widzisz elementy jak menu, logo, czy przycisk wyszukiwania na stronie - wszystkie one są zbudowane przy pomocy znaczników HTML, które określają ich funkcję i położenie.

Czym jest HTML?
HTML to język, który służy do tworzenia struktury strony internetowej. Działa jak szkielet, na którym opiera się cała strona.
Za pomocą HTML możesz tworzyć nagłówki, akapity, listy, linki i wiele innych elementów. Każdy element jest definiowany przez parę znaczników - otwierający <tag> i zamykający </tag>.
Te znaczniki mówią przeglądarce, jak interpretować zawartość między nimi. Dzięki nim wiesz, co jest tytułem, co jest paragrafem tekstu, a co jest linkiem do innej strony.
Wskazówka: Wyobraź sobie HTML jak plan budowy domu - określa, gdzie będą ściany, drzwi i okna, ale nie mówi, jakiego będą koloru!
Twoja przeglądarka (Chrome, Firefox, Safari) czyta ten kod i zamienia go w stronę, którą widzisz na ekranie.

Historia HTML
Tim Berners-Lee, fizyk z CERN, zaczął wszystko od stworzenia prototypu nazwanego ENQIRE, a później projektu WorldWideWeb (W3). To dało początek językowi HTML, jaki znamy dzisiaj.
Pierwsza wersja HTML z 1991 roku miała tylko 22 znaczniki! Dla porównania, dzisiejszy HTML ma ich ponad 100. W 1994 powstała organizacja W3C, która zajęła się rozwojem standardów internetowych.
Z czasem HTML ewoluował - w 1995 pojawiła się nowa wersja, a w 1998 roku dołączył do niego CSS, który pozwolił na stylizację stron. HTML5, którego używamy obecnie, został oficjalnie wprowadzony dopiero w 2014 roku.
Czy wiesz? HTML przeszedł długą drogę od prostego języka z migającymi napisami i kolorowymi czcionkami do zaawansowanego narzędzia, które umożliwia tworzenie nowoczesnych, interaktywnych stron!
Ta ewolucja pokazuje, jak internet rozwinął się z prostych stron tekstowych do zaawansowanych aplikacji, których używamy codziennie.

Struktura dokumentu HTML
Każda strona HTML ma podobną podstawową strukturę. Na samej górze znajduje się deklaracja <!DOCTYPE html>, która informuje przeglądarkę, że dokument jest napisany w HTML5.
Cały dokument jest zawarty między znacznikami <html> i </html>. Wewnątrz znajdują się dwie główne sekcje:
-
Sekcja head (
<head>) - tutaj umieszczamy informacje o stronie, takie jak tytuł, kodowanie znaków, czy podłączenie arkuszy stylów CSS. Zawartość tej sekcji nie jest widoczna dla użytkownika. -
Sekcja body (
<body>) - to właściwa zawartość strony, którą zobaczy użytkownik.
Pomocna wskazówka: Dobrą praktyką jest dzielenie strony na logiczne sekcje za pomocą znaczników
<header>,<section>,<footer>. Dzięki temu kod jest czytelniejszy i łatwiejszy w utrzymaniu!
Dla lepszej organizacji możesz podzielić swoją stronę na trzy główne "boksy": nagłówek (header) na górze z logo i menu, sekcję główną (section) ze właściwą treścią i stopkę (footer) na dole z danymi kontaktowymi.

Czym jest CSS?
CSS (Cascading Style Sheets) to język, który odpowiada za wygląd strony internetowej. Podczas gdy HTML tworzy strukturę, CSS decyduje o kolorach, czcionkach, odstępach i układzie elementów.
Za pomocą CSS możesz zdefiniować style dla całej strony lub pojedynczych elementów. Na przykład, możesz ustawić wszystkie nagłówki na kolor niebieski, a paragrafy na czarny.
CSS działa na zasadzie selektorów - wybierasz element HTML (np. wszystkie nagłówki h1) i definiujesz jego właściwości (np. kolor: niebieski, rozmiar czcionki: 20pt).
Świetna rada: Wyobraź sobie, że HTML to szkielet człowieka, a CSS to jego ubranie, fryzura i makijaż - wszystko co nadaje mu wygląd!
W przykładzie z notatek widzimy, jak można zastosować różne style do nagłówka i paragrafów, a nawet tworzyć klasy (jak .red_txt), które można wykorzystać do stylizowania wybranych fragmentów tekstu na czerwono.

Zastosowania CSS w praktyce
CSS zrewolucjonizował świat stron internetowych i jest kluczowy w wielu obszarach:
E-commerce wykorzystuje CSS, aby tworzyć atrakcyjne sklepy internetowe dostosowane do różnych branż. Dzięki niemu strony sklepów są przyjemne wizualnie i intuicyjne w obsłudze, co przekłada się na zwiększenie sprzedaży.
CSS znacznie ułatwia utrzymanie strony. Zamiast zmieniać style bezpośrednio w setkach plików HTML, możesz zmodyfikować jeden plik CSS i natychmiast zaktualizować wygląd całej strony!
W mediach społecznościowych CSS jest niezbędny do tworzenia interaktywnych interfejsów. Facebook, Instagram i inne platformy używają zaawansowanych technik CSS, aby zapewnić spójny wygląd i działanie.
Praktyczna rada: Dzięki CSS możesz sprawić, że twoja strona będzie wyglądać świetnie na różnych urządzeniach - od komputerów po telefony, co jest kluczowe w dzisiejszych czasach!
CSS umożliwia też zaawansowaną obsługę obrazów - możesz kontrolować ich rozmiar, położenie, a nawet efekty specjalne bez modyfikowania oryginalnych plików.
We thought you’d never ask...
What is the Knowunity AI companion?
Our AI companion is specifically built for the needs of students. Based on the millions of content pieces we have on the platform we can provide truly meaningful and relevant answers to students. But its not only about answers, the companion is even more about guiding students through their daily learning challenges, with personalised study plans, quizzes or content pieces in the chat and 100% personalisation based on the students skills and developments.
Where can I download the Knowunity app?
You can download the app in the Google Play Store and in the Apple App Store.
Is Knowunity really free of charge?
That's right! Enjoy free access to study content, connect with fellow students, and get instant help – all at your fingertips.
Similar Content
Most popular content: HTML
1Most popular content in Matematyka
9Właściwości funkcji liniowej
Zrozumienie funkcji liniowej: definicja, współczynniki a i b, monotoniczność oraz sposób wyznaczania równania prostej. Dowiedz się, jak określić dziedzinę, zbiór wartości oraz punkty przecięcia z osiami. Idealne dla uczniów przygotowujących się do egzaminów z matematyki.
Skróty klawiszowe
Skróty klawiszowe
Nauka i technologia
Poznaj podstawowe terminy związane z nauką i technologią, takie jak Bluetooth, przeglądarka internetowa i kamera wideo, w języku angielskim.
Podstawy Pythona
Odkryj podstawowe funkcje Pythona, w tym potęgowanie, deklarowanie zmiennych, wczytywanie danych oraz konwersję typów. Idealne dla początkujących programistów. Zawiera przykłady kodu i wyjaśnienia kluczowych koncepcji.
Podstawy C++: Typy i Operatory
Zrozum podstawowe typy danych i operatory w C++. Dowiedz się o zmiennych, operatorach logicznych, relacyjnych oraz instrukcjach warunkowych. Idealne dla początkujących programistów. Typ materiału: Podsumowanie.
Podstawy Grafiki Komputerowej
Zrozumienie grafiki komputerowej: różnice między grafiką wektorową a rastrową, formaty plików (PDF, SVG, EPS, PNG, TIFF, PSD, JPG, BMP, GIF), modele kolorów (RGB, CMYK, HSV) oraz kompresja danych. Idealne dla studentów informatyki i web developmentu.
Znaczniki HTML i selektory CSS
Krótki opis wybranych znaczników HTML i selektorów CSS.
Relacyjne Bazy Danych
Zrozumienie relacyjnych baz danych: definicje, typy relacji (jeden do jednego, jeden do wielu, wiele do wielu), klucze podstawowe i obce, oraz modele baz danych. Idealne dla studentów informatyki i osób pragnących zgłębić temat baz danych.
C++ Podstawy Programowania
Odkryj kluczowe elementy programowania w C++, w tym zmienne, typy danych (int, float, double), pętle (while, do-while, for), instrukcje warunkowe (if, else, switch) oraz operatory logiczne i arytmetyczne. Idealne dla początkujących programistów, którzy chcą zrozumieć podstawy języka C++ i jego zastosowania.
Most popular content
9Przedwiośnie: Analiza Tematów
Zanurz się w analizę powieści 'Przedwiośnie' Stefana Żeromskiego. Odkryj kluczowe motywy, takie jak dojrzewanie, rewolucja i podróż, oraz ich znaczenie w kontekście niepodległej Polski. Notatka zawiera szczegółowe omówienie bohaterów, narracji oraz symboliki, co czyni ją idealnym materiałem do nauki i przygotowania do egzaminów.
Analiza Lalki Prusa
Szczegółowa analiza powieści 'Lalka' Bolesława Prusa, obejmująca kompozycję, problematykę, głównych bohaterów oraz kontekst społeczny Warszawy lat 70. i 80. XIX wieku. Zawiera omówienie miłości Wokulskiego do Izabeli Łęckiej, różnorodności narracji oraz otwartości zakończenia. Idealna dla studentów literatury i miłośników polskiej prozy.
Analiza 'Lalki' Prusa
Szczegółowa analiza powieści 'Lalka' Bolesława Prusa, obejmująca gatunek, czas i miejsce akcji, kluczowych bohaterów, oraz motywy literackie. Zawiera omówienie postaci Stanisława Wokulskiego jako romantyka i pozytywisty oraz realistyczny obraz Warszawy i Paryża. Idealne dla studentów literatury polskiej.
Wprowadzenie do lektury Zemsta
Sprawdź znajomość czasu i miejsca akcji oraz głównych wątków komedii Aleksandra Fredry.
Makbet: Analiza Tragedii Szekspira
Odkryj kluczowe cechy dramatu 'Makbet' Williama Szekspira, w tym złamanie zasady decorum, psychologię postaci oraz tematykę zbrodni i ambicji. Zrozum, jak Szekspir przekształca klasyczną tragedię, wprowadzając elementy fantastyki i psychologii. Idealne dla uczniów i studentów literatury. Typ: analiza literacka.
biologia- ryby klasa 6
Przed odpowiedzią ustnią idealny do powtórki ❤️
Wesele: Analiza Symboli
Zanurz się w głęboką analizę dramatu 'Wesele' Stanisława Wyspiańskiego. Odkryj kluczowe symbole, takie jak chochoł i złoty róg, oraz ich znaczenie w kontekście polskiego społeczeństwa przełomu XIX i XX wieku. Notatka zawiera omówienie genezy, kompozycji, tematów oraz portretu społecznego, co czyni ją idealnym materiałem do nauki i przygotowań do egzaminów.
Korzeń- organ podziemny rośliny
prawie wszystko w temacie "korzeń- organ podziemny rośliny "
Karta rowerowa
UwU
Can't find what you're looking for? Explore other subjects.
Students love us — and so will you.
The app is very easy to use and well designed. I have found everything I was looking for so far and have been able to learn a lot from the presentations! I will definitely use the app for a class assignment! And of course it also helps a lot as an inspiration.
This app is really great. There are so many study notes and help [...]. My problem subject is French, for example, and the app has so many options for help. Thanks to this app, I have improved my French. I would recommend it to anyone.
Wow, I am really amazed. I just tried the app because I've seen it advertised many times and was absolutely stunned. This app is THE HELP you want for school and above all, it offers so many things, such as workouts and fact sheets, which have been VERY helpful to me personally.