Zacznij

Informatyka

Podstawy Tworzenia Stron Internetowych

HTML

Informatyka816Zaktualizowano 14 wrz 20266 strony

Wszystko o HTML: Kompletny przewodnik

Zgłoś
user profile picture
Oliwia@xyz10
Dodaj do źródeł Google
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 za jej wygląd.
HTML – strona 1

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

  • Dostęp do wszystkich materiałów
  • Popraw swoje oceny
  • Dołącz do milionów studentów

Rejestrując się akceptujesz Warunki korzystania z usługi i Politykę prywatności.

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.

HTML – strona 2

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

  • Dostęp do wszystkich materiałów
  • Popraw swoje oceny
  • Dołącz do milionów studentów

Rejestrując się akceptujesz Warunki korzystania z usługi i Politykę prywatności.

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.

HTML – strona 3

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

  • Dostęp do wszystkich materiałów
  • Popraw swoje oceny
  • Dołącz do milionów studentów

Rejestrując się akceptujesz Warunki korzystania z usługi i Politykę prywatności.

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.

HTML – strona 4

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

  • Dostęp do wszystkich materiałów
  • Popraw swoje oceny
  • Dołącz do milionów studentów

Rejestrując się akceptujesz Warunki korzystania z usługi i Politykę prywatności.

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:

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

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

HTML – strona 5

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

  • Dostęp do wszystkich materiałów
  • Popraw swoje oceny
  • Dołącz do milionów studentów

Rejestrując się akceptujesz Warunki korzystania z usługi i Politykę prywatności.

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.

HTML – strona 6

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

  • Dostęp do wszystkich materiałów
  • Popraw swoje oceny
  • Dołącz do milionów studentów

Rejestrując się akceptujesz Warunki korzystania z usługi i Politykę prywatności.

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.

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.

Podobne notatki

Informatyka

Podstawy HTML i CSS

Odkryj podstawy HTML i CSS w tej pierwszej części serii notatek. Dowiedz się, jak stworzyć swoją pierwszą stronę internetową, poznaj kluczowe znaczniki HTML oraz narzędzia do ich edycji, takie jak Notepad++ i Visual Studio Code. Idealne dla początkujących w web development.

3132132
Informatyka

Rekurencja i Fraktale w Pythonie

Zgłębiaj podstawy algorytmiki i programowania w Pythonie. Ta notatka obejmuje kluczowe koncepcje, takie jak rekurencja, fraktale, systemy liczbowe oraz metoda poławienia. Idealna dla studentów informatyki, którzy chcą zrozumieć te fundamentalne tematy.

3207939
Informatyka

Generowanie Liczb Losowych

Zgłębiaj moduł random w Pythonie, który umożliwia generowanie liczb losowych, wybieranie próbek oraz losowe permutacje. Dowiedz się, jak używać funkcji takich jak uniform, randint, sample i shuffle, aby efektywnie manipulować danymi. Idealne dla studentów programowania i analizy danych.

12338
Informatyka

Zarządzanie Zmiennymi w Pythonie

Odkryj, jak przechowywać dane w Pythonie, w tym zmienne, typy danych (stringi, liczby, boolean) oraz operator przypisania. Dowiedz się, jak używać funkcji input() do zbierania danych od użytkownika. Idealne dla początkujących programistów.

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

1268077
Informatyka

Branżowe Bramki Logiczne

Zrozumienie bramek logicznych, operatorów logicznych oraz tabel prawdy. Materiał przydatny dla studentów kierunku technik informatyk. Obejmuje AND, OR, NOT, NAND, NOR oraz EXOR. Idealne do nauki podstaw logiki boole'a.

1148256
Zobacz więcej

Najpopularniejsze notatki: HTML

Informatyka

Podstawy HTML i CSS

Odkryj podstawy HTML i CSS w tej pierwszej części serii notatek. Dowiedz się, jak stworzyć swoją pierwszą stronę internetową, poznaj kluczowe znaczniki HTML oraz narzędzia do ich edycji, takie jak Notepad++ i Visual Studio Code. Idealne dla początkujących w web development.

3132132

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

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

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

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

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

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

14949

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

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

312 394287
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 6371234
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 9551194
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 9004368
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.

1118 2965033
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 9085257
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.

1106 2584787

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.