Zacznij

Informatyka194Zaktualizowano 31 sie 20266 strony

Podstawowe Znaczniki HTML i CSS: Wskazówki i Selektory

Zgłoś
user profile picture
Marcel Brodziak@brojas
Dodaj do źródeł Google
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ę.
Znaczniki HTML i selektory CSS – strona 1

Zarejestruj się, aby zobaczyć notatkę.
To nic nie kosztuje!

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 atrybutami class lub id, żeby później móc je ostylować w CSS.

Znaczniki HTML i selektory CSS – strona 2

Zarejestruj się, aby zobaczyć notatkę.
To nic nie kosztuje!

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.

Znaczniki HTML i selektory CSS – strona 3

Zarejestruj się, aby zobaczyć notatkę.
To nic nie kosztuje!

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-align wyrównuje tekst (left, right, center, justify), a margin ustawia zewnętrzne odstępy wokół elementu.

Znaczniki HTML i selektory CSS – strona 4

Zarejestruj się, aby zobaczyć notatkę.
To nic nie kosztuje!

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: width i height kontrolują rozmiar elementu. Możesz użyć pikseli (px), procent (%) lub auto (przeglądarka sama zdecyduje).

Znaczniki HTML i selektory CSS – strona 5

Zarejestruj się, aby zobaczyć notatkę.
To nic nie kosztuje!

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: border dodaje ramkę wokół elementu. Możesz ustawić jednocześnie grubość, styl i kolor: border: 2px solid red.

Znaczniki HTML i selektory CSS – strona 6

Zarejestruj się, aby zobaczyć notatkę.
To nic nie kosztuje!

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...

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.

Aplikację możesz pobrać z Google Play i Apple Store.

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: Matematyka

Matematyka

Wł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.

130 030849
Informatyka

Podstawy Sieci Komputerowych

Zrozumienie podstawowych koncepcji sieci komputerowych, w tym protokołów TCP/IP, topologii sieci, systemów liczbowych oraz bezpieczeństwa w sieci. Materiał obejmuje kluczowe elementy architektury sieci, takie jak routery, przełączniki i karty sieciowe. Idealne dla studentów informatyki i osób pragnących zgłębić tematykę sieci komputerowych.

13447133
Informatyka

Elementy i Media Sieciowe

Zrozumienie kluczowych elementów sieci komputerowych, w tym okablowania, punktów dystrybucyjnych oraz mediów transmisyjnych. Dowiedz się o różnych typach kabli, takich jak UTP, STP i światłowody, oraz ich zastosowaniach w architekturze sieci. Idealne dla studentów informatyki i technologii sieciowych.

15088
Informatyka

Systemy 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.

15157
Informatyka

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.

4267976
Informatyka

Fundamenty Sieci Komputerowych

Zrozum podstawowe koncepcje sieci komputerowych w tej prezentacji. Obejmuje rodzaje sieci (LAN, MAN, WAN), topologie (fizyczne i logiczne), media transmisyjne (kable miedziane i światłowodowe), modele warstwowe (ISO/OSI i TCP/IP) oraz protokoły aplikacji (HTTP, FTP). Idealne dla studentów i osób pragnących zgłębić temat komunikacji sieciowej.

1210258
Informatyka

Systemy Liczbowe w Informatyce

Zrozumienie systemów liczbowych, w tym systemów binarnego, ósemkowego, dziesiętnego i szesnastkowego. Dowiedz się, jak konwertować liczby między tymi systemami oraz zastosowania w informatyce. Idealne dla studentów informatyki i osób przygotowujących się do egzaminów.

13443
Informatyka

Terminologia Poligraficzna

Zbiór kluczowych pojęć poligraficznych uporządkowanych alfabetycznie, idealny dla studentów grafiki i poligrafii cyfrowej. Poznaj terminologię z zakresu typografii, technik artystycznych oraz systemów znaków, aby wzbogacić swoją wiedzę i umiejętności w dziedzinie poligrafii.

462538
Informatyka

Algorytmy i Rozwiązywanie Problemów

Zgłębiaj zasady projektowania algorytmów oraz ich zastosowanie w rozwiązywaniu problemów. Ta notatka zawiera szczegółowy opis algorytmu uporządkowanego, schematów blokowych oraz języków programowania. Idealna dla studentów informatyki i programowania, którzy chcą zrozumieć podstawy algorytmiki.

14919

Najpopularniejsze notatki

Biologia

Budowa i funkcje skóry

Szczegółowa notatka z biologii dla klas 7, podręcznik wydawnictwa nowej ery - Puls życia. Temat: Budowa i funkcje skóry.

7 SP5253165
Język polski

Antyk / Starożytność

ramy czasowe, cywilizację, sztuka antyczna, cechy literatury, szkoły filozoficzne, filozofowie, wzorce osobowe, budowa teatru, budowa tragedii antycznej i jej cechy

18163144
Język polski

Inny Świat: Wspomnienia z Jercewa

Odkryj 'Inny Świat' Gustawa Herlinga-Grudzińskiego, autobiograficzną powieść dokumentalną, która ukazuje brutalne realia życia w radzieckim obozie pracy. Autor, oskarżony o szpiegostwo, dzieli się swoimi przeżyciami, refleksjami na temat ludzkiej psychiki oraz relacjami z innymi więźniami. Poznaj głębokie analizy moralności, cierpienia i nadziei w nieludzkich warunkach. Idealne dla studentów literatury i historii, którzy pragną zrozumieć kontekst wojenny i totalitarny.

311 604264
Język polski

Części Mowy: Odmienne i Nieodmienne

Zrozumienie części mowy w języku polskim: szczegółowe omówienie odmiennej (rzeczownik, przymiotnik, czasownik, liczebnik, zaimek) oraz nieodmiennej (przysłówek, spójnik, przyimek, partykuła, wykrzyknik) części mowy. Idealne dla uczniów przygotowujących się do egzaminów lub chcących pogłębić wiedzę o gramatyce.

6 SP31 2761227
Język angielski

Czasy w Języku Angielskim

Kompleksowe notatki dotyczące podstawowych czasów w języku angielskim, idealne dla maturzystów 2025. Zawierają szczegółowe omówienie Present Simple, Present Continuous, Past Simple, Past Perfect i innych, z przykładami i zasadami użycia. Przygotuj się skutecznie do egzaminu z tym 46-stronicowym materiałem!

422 1681174
Język polski

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.

2135 6034359
Język polski

Młoda Polska: Kluczowe Tematy

Odkryj istotne cechy i motywy epoki Młodej Polski, w tym dekadentyzm, sztukę dla sztuki oraz wpływ filozofii Nietzschego i Schopenhauera. Analiza najważniejszych twórców, ich dzieł oraz typów bohaterów. Idealne dla studentów literatury i kultury polskiej.

1117 8445027
Język polski

Walka o Godność w Getcie

Analiza 'Zdążyć przed Panem Bogiem' Hanny Krall, koncentrująca się na powstaniu w warszawskim getcie oraz dążeniu do godnej śmierci. Obejmuje kluczowe wydarzenia, postacie oraz filozoficzne refleksje dotyczące ludzkiej motywacji i cierpienia. Typ: reportaż.

1112 3395244
Język polski

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.

1105 9004776

Zobacz, co mówią o nas nasi użytkownicy. Pokochali nas, pokochasz też i Ty.

4.6/5App Store
4.7/5Google Play
Stefan Sużytkownik iOS

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.

Samantha Klichużytkownik Androida

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.

Annaużytkownik iOS

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.