HTML i CSS to podstawowe języki tworzenia stron internetowych. HTML... Pokaż więcej
Informatyka186 wyświetleń·Zaktualizowano May 21, 2026·6 stronyPodstawowe 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.
Myśleliśmy, że nigdy nie zapytasz...
Czym jest Towarzysz AI z Knowunity?
Nasz asystent AI jest specjalnie dostosowany do potrzeb uczniów. W oparciu o miliony treści, które mamy na platformie, możemy udzielać uczniom naprawdę znaczących i trafnych odpowiedzi. Ale nie chodzi tylko o odpowiedzi, towarzysz prowadzi również uczniów przez codzienne wyzwania związane z nauką, ze spersonalizowanymi planami nauki, quizami lub treściami na czacie i 100% personalizacją opartą na umiejętnościach i rozwoju uczniów.
Gdzie mogę pobrać aplikację Knowunity?
Aplikację możesz pobrać z Google Play i Apple Store.
Czy aplikacja Knowunity naprawdę jest darmowa?
Tak, masz całkowicie darmowy dostęp do wszystkich notatek w aplikacji, możesz w każdej chwili rozmawiać z Ekspertami lub ich obserwować. Możesz użyć punktów, aby odblokować pewne funkcje w aplikacji, które również możesz otrzymać za darmo. Dodatkowo oferujemy usługę Knowunity Premium, która pozwala na odblokowanie większej liczby funkcji.
Najpopularniejsze notatki z Informatyka
9Najpopularniejsze notatki
9Nie ma nic odpowiedniego? Sprawdź inne przedmioty.
Zobacz, co mówią o nas nasi użytkownicy. Pokochali nas — pokochasz też i Ty.
4.6/5App Store
4.7/5Google Play
Aplikacja jest bardzo prosta i dobrze przemyślana. Do tej pory znalazłem wszystko, czego szukałem i mogłem się wiele nauczyć z innych notatek! Na pewno wykorzystam aplikację do pomocy przy robieniu prac domowych! No i oczywiście bardzo pomaga też jako inspiracja do robienia swoich notatek.
Stefan Sużytkownik iOS
Ta aplikacja jest naprawdę świetna. Jest tak wiele notatek i pomocnych informacji [...]. Moim problematycznym przedmiotem jest język niemiecki, a w aplikacji jest w czym wybierać. Dzięki tej aplikacji poprawiłam swój niemiecki. Polecam ją każdemu.
Samantha Klichużytkownik Androida
Wow, jestem w szoku. Właśnie wypróbowałam aplikację, ponieważ widziałam ją kilka razy reklamowaną na TikToku jestem absolutnie w szoku. Ta aplikacja jest POMOCĄ, której potrzebujesz w szkole i przede wszystkim oferuje tak wiele rzeczy jak notatki czy streszczenia, które są BARDZO pomocne w moim przypadku.
Annaużytkownik iOS
Informatyka186 wyświetleń·Zaktualizowano May 21, 2026·6 stronyPodstawowe 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 6Zarejestruj się, aby zobaczyć notatkę. To nic nie kosztuje!
- Dostęp do wszystkich materiałów
- Popraw swoje oceny
- Dołącz do milionów studentów
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 6Zarejestruj się, aby zobaczyć notatkę. To nic nie kosztuje!
- Dostęp do wszystkich materiałów
- Popraw swoje oceny
- Dołącz do milionów studentów
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 6Zarejestruj się, aby zobaczyć notatkę. To nic nie kosztuje!
- Dostęp do wszystkich materiałów
- Popraw swoje oceny
- Dołącz do milionów studentów
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 6Zarejestruj się, aby zobaczyć notatkę. To nic nie kosztuje!
- Dostęp do wszystkich materiałów
- Popraw swoje oceny
- Dołącz do milionów studentów
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 6Zarejestruj się, aby zobaczyć notatkę. To nic nie kosztuje!
- Dostęp do wszystkich materiałów
- Popraw swoje oceny
- Dołącz do milionów studentów
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 6Zarejestruj się, aby zobaczyć notatkę. To nic nie kosztuje!
- Dostęp do wszystkich materiałów
- Popraw swoje oceny
- Dołącz do milionów studentów
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.
Myśleliśmy, że nigdy nie zapytasz...
Czym jest Towarzysz AI z Knowunity?
Nasz asystent AI jest specjalnie dostosowany do potrzeb uczniów. W oparciu o miliony treści, które mamy na platformie, możemy udzielać uczniom naprawdę znaczących i trafnych odpowiedzi. Ale nie chodzi tylko o odpowiedzi, towarzysz prowadzi również uczniów przez codzienne wyzwania związane z nauką, ze spersonalizowanymi planami nauki, quizami lub treściami na czacie i 100% personalizacją opartą na umiejętnościach i rozwoju uczniów.
Gdzie mogę pobrać aplikację Knowunity?
Aplikację możesz pobrać z Google Play i Apple Store.
Czy aplikacja Knowunity naprawdę jest darmowa?
Tak, masz całkowicie darmowy dostęp do wszystkich notatek w aplikacji, możesz w każdej chwili rozmawiać z Ekspertami lub ich obserwować. Możesz użyć punktów, aby odblokować pewne funkcje w aplikacji, które również możesz otrzymać za darmo. Dodatkowo oferujemy usługę Knowunity Premium, która pozwala na odblokowanie większej liczby funkcji.
Najpopularniejsze notatki z Informatyka
9Najpopularniejsze notatki
9Nie ma nic odpowiedniego? Sprawdź inne przedmioty.
Zobacz, co mówią o nas nasi użytkownicy. Pokochali nas — pokochasz też i Ty.
4.6/5App Store
4.7/5Google Play
Aplikacja jest bardzo prosta i dobrze przemyślana. Do tej pory znalazłem wszystko, czego szukałem i mogłem się wiele nauczyć z innych notatek! Na pewno wykorzystam aplikację do pomocy przy robieniu prac domowych! No i oczywiście bardzo pomaga też jako inspiracja do robienia swoich notatek.
Stefan Sużytkownik iOS
Ta aplikacja jest naprawdę świetna. Jest tak wiele notatek i pomocnych informacji [...]. Moim problematycznym przedmiotem jest język niemiecki, a w aplikacji jest w czym wybierać. Dzięki tej aplikacji poprawiłam swój niemiecki. Polecam ją każdemu.
Samantha Klichużytkownik Androida
Wow, jestem w szoku. Właśnie wypróbowałam aplikację, ponieważ widziałam ją kilka razy reklamowaną na TikToku jestem absolutnie w szoku. Ta aplikacja jest POMOCĄ, której potrzebujesz w szkole i przede wszystkim oferuje tak wiele rzeczy jak notatki czy streszczenia, które są BARDZO pomocne w moim przypadku.
Annaużytkownik iOS