HTML i CSS to podstawowe języki tworzenia stron internetowych. HTML...
Informatyka189 views·Updated Jun 15, 2026·6 pagesPodstawowe Znaczniki HTML i CSS: Wskazówki i Selektory
Marcel Brodziak@brojas
1 / 6
1
of 6
Podstawowe znaczniki HTML
Zacznijmy od fundamentów - <!DOCTYPE html> to jak wizytówka twojej strony, która mówi przeglądarce "hej, to jest dokument HTML!". Każda strona musi to mieć na samym początku.
Znacznik <html lang="pl"> to jak główny kontener na całą twoją stronę. Atrybut lang="pl" informuje Google i inne wyszukiwarki, że strona jest po polsku, co pomaga w lepszym pozycjonowaniu.
<link rel="stylesheet" href="..."> łączy twoją stronę HTML z plikiem CSS. To tak jakby podłączyć stylista do swojej garderoby - bez tego strona będzie wyglądać nudno i bez życia.
💡 Wskazówka: Znaczniki
<section>i<div>działają jak pudełka do organizowania treści. Użyj ich z atrybutamiclasslubid, żeby później móc je ostylować w CSS.
2
of 6
Nagłówki, linki i formularze
Nagłówki od <h1> do <h6> działają jak hierarchia ważności - <h1> to najważniejszy tytuł, a <h6> najmniej istotny. To jak struktura w szkole: dyrektor, wicedyrektor, nauczyciele...
Znacznik <p> dzieli tekst na czytelne akapity. Bez niego cały tekst skleiłby się w jedną nieczytelną masę.
<input> i <button> to podstawa każdego formularza na stronie. Input to pole, gdzie użytkownik wpisuje dane, a button to przycisk do kliknięcia. Button jest bardziej elastyczny - możesz w nim umieścić obrazki czy sformatowany tekst.
💡 Wskazówka: Linki
<a href="...">to mosty między stronami. Href to adres docelowy - może prowadzić na inną stronę lub do pliku na twoim komputerze.
3
of 6
Tabele i obrazy
Tabele to nie tylko nudne dane! Znaczniki <table>, <tr>, <th> i <td> tworzą uporządkowaną strukturę. <table> to cała tabela, <tr> to wiersz, <th> to nagłówek kolumny, a <td> to zwykła komórka z danymi.
Znacznik <img> wstawia obrazy na stronę. Atrybut alt to opis obrazu dla osób niewidomych i asystentów głosowych - zawsze go dodawaj!
Atrybut id to unikalny identyfikator elementu. Każde id może mieć tylko jeden element na stronie - to jak numer PESEL dla człowieka.
💡 Wskazówka: CSS zaczyna się od selektorów!
text-alignwyrównuje tekst (left, right, center, justify), amarginustawia zewnętrzne odstępy wokół elementu.
4
of 6
Marginesy i układy CSS
Margin i padding to jak osobista przestrzeń elementu. Margin to odstęp na zewnątrz (jak strefa wokół ciebie), a padding to odstęp wewnętrzny (jak wyściółka w kurtce).
Wartości podajesz w kolejności: góra, prawo, dół, lewo (jak ruch wskazówek zegara). Jedna wartość = wszystkie strony, dwie = góra/dół i prawo/lewo.
display: flex z flex-direction: column to nowoczesny sposób układania elementów. Flex robi z elementu elastyczny kontener, a column ustawia zawartość pionowo.
💡 Wskazówka:
widthiheightkontrolują rozmiar elementu. Możesz użyć pikseli (px), procent (%) lub auto (przeglądarka sama zdecyduje).
5
of 6
Kolory i czcionki
background-color zmienia kolor tła elementu. Możesz użyć nazw angielskich (red, blue), kodów hex (#FF0000) lub RGB.
font-family to lista czcionek - przeglądarka wybiera pierwszą dostępną. Zawsze dodawaj zapasowe opcje na wypadek, gdyby użytkownik nie miał twojej ulubionej czcionki.
color ustawia kolor tekstu, a font-size jego rozmiar. Te właściwości działają razem, tworząc spójny wygląd tekstu.
💡 Wskazówka:
borderdodaje ramkę wokół elementu. Możesz ustawić jednocześnie grubość, styl i kolor:border: 2px solid red.
6
of 6
Zaokrąglenia i finalne szlify
border-radius to magiczny selektor, który zaokrągla rogi elementów. Działa podobnie jak margin - wartości ustawiasz zgodnie z ruchem wskazówek zegara.
Jedna wartość zaokrągla wszystkie rogi jednakowo, a cztery różne wartości pozwalają na tworzenie unikalnych kształtów.
To właściwości, które zmieniają zwykłe prostokąty w eleganckie, nowoczesne elementy interfejsu.
💡 Wskazówka: Eksperymentuj z różnymi wartościami border-radius! Możesz stworzyć od lekko zaokrąglonych przycisków po idealne kółka.
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.
Most popular content in Matematyka
9
MatematykaWł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.
129,909848
S
InformatykaSkróty klawiszowe
Skróty klawiszowe
83,6425
N
Język angielskiNauka i technologia
Poznaj podstawowe terminy związane z nauką i technologią, takie jak Bluetooth, przeglądarka internetowa i kamera wideo, w języku angielskim.
81,0460
InformatykaPodstawy 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.
42,65475
InformatykaPodstawy 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.
88636
InformatykaPodstawy 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.
11,88588
InformatykaRelacyjne 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.
81,05125
InformatykaC++ 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.
12,958146
InformatykaSystemy Liczbowe: Działania
Zrozumienie systemów liczbowych: dwójkowy, dziesiętny i szesnastkowy. Praktyczne przykłady działań arytmetycznych, konwersji między systemami oraz kluczowe zasady dodawania, odejmowania, mnożenia i dzielenia. Idealne dla uczniów przygotowujących się do egzaminów.
14817
Most popular content
9
Język polskiPrzedwioś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.
1181,2427,271
Język polskiAnaliza 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.
4133,9114,302
Język polskiAnaliza '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.
4130,4526,097
W
Język polskiWprowadzenie do lektury Zemsta
Sprawdź znajomość czasu i miejsca akcji oraz głównych wątków komedii Aleksandra Fredry.
85,9710
Język polskiMakbet: 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.
4104,1894,738
B
Biologiabiologia- ryby klasa 6
Przed odpowiedzią ustnią idealny do powtórki ❤️
64,8014
Język polskiWesele: 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.
1183,6957,869
K
BiologiaKorzeń- organ podziemny rośliny
prawie wszystko w temacie "korzeń- organ podziemny rośliny "
54,3982
K
TechnikaKarta rowerowa
UwU
45,4003
Can't find what you're looking for? Explore other subjects.
Students love us — and so will you.
4.6/5App Store
4.7/5Google Play
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.
Stefan SiOS user
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.
Samantha KlichAndroid user
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.
AnnaiOS user
Informatyka189 views·Updated Jun 15, 2026·6 pagesPodstawowe Znaczniki HTML i CSS: Wskazówki i Selektory
Marcel Brodziak@brojas
HTML i CSS to podstawowe języki tworzenia stron internetowych. HTML odpowiada za strukturę i zawartość strony, a CSS za jej wygląd i stylizację.
1
of 6
Sign up to see the content. It's free!
- Access to all documents
- Improve your grades
- Join milions of students
Podstawowe znaczniki HTML
Zacznijmy od fundamentów - <!DOCTYPE html> to jak wizytówka twojej strony, która mówi przeglądarce "hej, to jest dokument HTML!". Każda strona musi to mieć na samym początku.
Znacznik <html lang="pl"> to jak główny kontener na całą twoją stronę. Atrybut lang="pl" informuje Google i inne wyszukiwarki, że strona jest po polsku, co pomaga w lepszym pozycjonowaniu.
<link rel="stylesheet" href="..."> łączy twoją stronę HTML z plikiem CSS. To tak jakby podłączyć stylista do swojej garderoby - bez tego strona będzie wyglądać nudno i bez życia.
💡 Wskazówka: Znaczniki
<section>i<div>działają jak pudełka do organizowania treści. Użyj ich z atrybutamiclasslubid, żeby później móc je ostylować w CSS.
2
of 6Sign up to see the content. It's free!
- Access to all documents
- Improve your grades
- Join milions of students
Nagłówki, linki i formularze
Nagłówki od <h1> do <h6> działają jak hierarchia ważności - <h1> to najważniejszy tytuł, a <h6> najmniej istotny. To jak struktura w szkole: dyrektor, wicedyrektor, nauczyciele...
Znacznik <p> dzieli tekst na czytelne akapity. Bez niego cały tekst skleiłby się w jedną nieczytelną masę.
<input> i <button> to podstawa każdego formularza na stronie. Input to pole, gdzie użytkownik wpisuje dane, a button to przycisk do kliknięcia. Button jest bardziej elastyczny - możesz w nim umieścić obrazki czy sformatowany tekst.
💡 Wskazówka: Linki
<a href="...">to mosty między stronami. Href to adres docelowy - może prowadzić na inną stronę lub do pliku na twoim komputerze.
3
of 6Sign up to see the content. It's free!
- Access to all documents
- Improve your grades
- Join milions of students
Tabele i obrazy
Tabele to nie tylko nudne dane! Znaczniki <table>, <tr>, <th> i <td> tworzą uporządkowaną strukturę. <table> to cała tabela, <tr> to wiersz, <th> to nagłówek kolumny, a <td> to zwykła komórka z danymi.
Znacznik <img> wstawia obrazy na stronę. Atrybut alt to opis obrazu dla osób niewidomych i asystentów głosowych - zawsze go dodawaj!
Atrybut id to unikalny identyfikator elementu. Każde id może mieć tylko jeden element na stronie - to jak numer PESEL dla człowieka.
💡 Wskazówka: CSS zaczyna się od selektorów!
text-alignwyrównuje tekst (left, right, center, justify), amarginustawia zewnętrzne odstępy wokół elementu.
4
of 6Sign up to see the content. It's free!
- Access to all documents
- Improve your grades
- Join milions of students
Marginesy i układy CSS
Margin i padding to jak osobista przestrzeń elementu. Margin to odstęp na zewnątrz (jak strefa wokół ciebie), a padding to odstęp wewnętrzny (jak wyściółka w kurtce).
Wartości podajesz w kolejności: góra, prawo, dół, lewo (jak ruch wskazówek zegara). Jedna wartość = wszystkie strony, dwie = góra/dół i prawo/lewo.
display: flex z flex-direction: column to nowoczesny sposób układania elementów. Flex robi z elementu elastyczny kontener, a column ustawia zawartość pionowo.
💡 Wskazówka:
widthiheightkontrolują rozmiar elementu. Możesz użyć pikseli (px), procent (%) lub auto (przeglądarka sama zdecyduje).
5
of 6Sign up to see the content. It's free!
- Access to all documents
- Improve your grades
- Join milions of students
Kolory i czcionki
background-color zmienia kolor tła elementu. Możesz użyć nazw angielskich (red, blue), kodów hex (#FF0000) lub RGB.
font-family to lista czcionek - przeglądarka wybiera pierwszą dostępną. Zawsze dodawaj zapasowe opcje na wypadek, gdyby użytkownik nie miał twojej ulubionej czcionki.
color ustawia kolor tekstu, a font-size jego rozmiar. Te właściwości działają razem, tworząc spójny wygląd tekstu.
💡 Wskazówka:
borderdodaje ramkę wokół elementu. Możesz ustawić jednocześnie grubość, styl i kolor:border: 2px solid red.
6
of 6Sign up to see the content. It's free!
- Access to all documents
- Improve your grades
- Join milions of students
Zaokrąglenia i finalne szlify
border-radius to magiczny selektor, który zaokrągla rogi elementów. Działa podobnie jak margin - wartości ustawiasz zgodnie z ruchem wskazówek zegara.
Jedna wartość zaokrągla wszystkie rogi jednakowo, a cztery różne wartości pozwalają na tworzenie unikalnych kształtów.
To właściwości, które zmieniają zwykłe prostokąty w eleganckie, nowoczesne elementy interfejsu.
💡 Wskazówka: Eksperymentuj z różnymi wartościami border-radius! Możesz stworzyć od lekko zaokrąglonych przycisków po idealne kółka.
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.
Most popular content in Matematyka
9MatematykaWł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.
129,909848
S
InformatykaSkróty klawiszowe
Skróty klawiszowe
83,6425
N
Język angielskiNauka i technologia
Poznaj podstawowe terminy związane z nauką i technologią, takie jak Bluetooth, przeglądarka internetowa i kamera wideo, w języku angielskim.
81,0460
InformatykaPodstawy 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.
42,65475
InformatykaPodstawy 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.
88636
InformatykaPodstawy 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.
11,88588
InformatykaRelacyjne 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.
81,05125
InformatykaC++ 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.
12,958146
InformatykaSystemy Liczbowe: Działania
Zrozumienie systemów liczbowych: dwójkowy, dziesiętny i szesnastkowy. Praktyczne przykłady działań arytmetycznych, konwersji między systemami oraz kluczowe zasady dodawania, odejmowania, mnożenia i dzielenia. Idealne dla uczniów przygotowujących się do egzaminów.
14817
Most popular content
9Język polskiPrzedwioś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.
1181,2427,271
Język polskiAnaliza 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.
4133,9114,302
Język polskiAnaliza '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.
4130,4526,097
W
Język polskiWprowadzenie do lektury Zemsta
Sprawdź znajomość czasu i miejsca akcji oraz głównych wątków komedii Aleksandra Fredry.
85,9710
Język polskiMakbet: 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.
4104,1894,738
B
Biologiabiologia- ryby klasa 6
Przed odpowiedzią ustnią idealny do powtórki ❤️
64,8014
Język polskiWesele: 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.
1183,6957,869
K
BiologiaKorzeń- organ podziemny rośliny
prawie wszystko w temacie "korzeń- organ podziemny rośliny "
54,3982
K
TechnikaKarta rowerowa
UwU
45,4003
Can't find what you're looking for? Explore other subjects.
Students love us — and so will you.
4.6/5App Store
4.7/5Google Play
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.
Stefan SiOS user
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.
Samantha KlichAndroid user
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.
AnnaiOS user