Jak zrobić fajną stronę HTML w Notatniku: Prosty przewodnik

Otwórz

Michał

21.05.2022

Informatyka

Tworzenie strony internetowej cz.I

Przedmioty

Informatyka

Jak zrobić fajną stronę HTML w Notatniku: Prosty przewodnik

Name: Knowunity
Brand: Knowunity

Język HTML jest podstawą tworzenia stron internetowych. Poznanie jego struktury i podstawowych znaczników pozwala na stworzenie prostej strony WWW. Do pisania kodu HTML można użyć prostego notatnika lub bardziej zaawansowanych edytorów. Prawidłowa struktura dokumentu HTML zawiera niezbędne elementy takie jak DOCTYPE, head i body.

...

21.05.2022

1145

TWORZENIE STRONY
INTERNETOWEJ
Podstawowe infromacje na temat HTML
@szyszusiowe_notatki CZEGO
DOWIESZ SIĘ W
TEJ NOTATCE?
1. Czym jest język H

Zobacz

Czego dowiesz się z tej notatki?

Ta część przedstawia główne zagadnienia, które zostaną omówione w notatce. Czytelnik dowie się:

Czym jest język HTML
Jakich programów można użyć do napisania strony internetowej
Jak wygląda podstawowa struktura strony w języku HTML
Jak wykonać własną prostą stronę internetową

Highlight: Notatka zapewnia kompleksowe wprowadzenie do tworzenia stron internetowych, od teorii po praktykę.

Zobacz

Czym jest język HTML?

Ta sekcja wyjaśnia istotę języka HTML:

HTML $Hypertext Markup Language$ to język znaczników używany do tworzenia stron internetowych. Wbrew powszechnemu przekonaniu, HTML nie jest językiem programowania.

Definition: HTML $ang. Hypertext Markup Language$ to język znaczników służący do tworzenia struktury i zawartości stron internetowych.

Highlight: Zrozumienie, że HTML jest językiem znaczników, a nie programowania, jest kluczowe dla początkujących twórców stron WWW.

Zobacz

Jaki program do napisania strony?

Ta część omawia narzędzia do tworzenia stron internetowych:

Prostą stronę można stworzyć nawet w podstawowym notatniku, dostępnym na każdym komputerze. Istnieją jednak bardziej zaawansowane, darmowe programy ułatwiające tworzenie stron WWW.

Najpopularniejsze programy do tworzenia stron internetowych to:

Notepad++
Brackets
Visual Studio Code

Highlight: W kolejnych notatkach będziemy korzystać z programów Notepad++ i Visual Studio Code.

Vocabulary: Program do tworzenia stron internetowych - specjalistyczne oprogramowanie ułatwiające pisanie kodu HTML i tworzenie stron WWW.

Zobacz

Podstawowe znaczniki języka HTML na stronie internetowej

Ta sekcja przedstawia kluczowe elementy struktury dokumentu HTML:

<!DOCTYPE HTML> lub <html> - deklaracja typu dokumentu
<head> - sekcja nagłówkowa, zawierająca metadane
<title> - tytuł strony
</head> - zamknięcie sekcji nagłówkowej
<body> - główna zawartość strony
</body> - zamknięcie głównej zawartości
</html> - zamknięcie dokumentu HTML

Definition: Struktura dokumentu HTML to podstawowy szkielet strony internetowej, składający się z określonych znaczników definiujących jej poszczególne części.

Highlight: Prawidłowa struktura dokumentu HTML jest kluczowa dla poprawnego wyświetlania strony w przeglądarkach.

Zobacz

Przykładowa strona internetowa

Ta część prezentuje prosty przykład kodu HTML:

<!DOCTYPE HTML>
<head>
<title> To moja strona </title>
</head>
<body>
<center>
<h1>To jest moja strona :)</h1>
</center>
</body>
</html>

Example: Powyższy kod tworzy prostą stronę z wycentrowanym nagłówkiem "To jest moja strona :)".

Highlight: Aby wyświetlić efekt naszego kodu, plik należy zapisać z rozszerzeniem .html.

Zobacz

I oto efekt napisanego przez nas kodu

Ta sekcja pokazuje, jak wygląda strona utworzona przy użyciu przykładowego kodu HTML:

Strona wyświetla prosty nagłówek "To jest moja strona :)" wycentrowany na środku ekranu. Tytuł strony widoczny w zakładce przeglądarki to "To moja strona".

Highlight: Nawet prosty kod HTML może stworzyć funkcjonalną stronę internetową.

Zobacz

Co dalej?

Ta część zapowiada kolejne kroki w nauce tworzenia stron internetowych:

W następnych notatkach zostaną omówione:

Podstawowe znaczniki służące do formatowania strony internetowej
Pogłębienie wiedzy na temat stron internetowych
Aspekty estetyczne tworzenia stron WWW

Highlight: Kontynuacja nauki pozwoli na tworzenie bardziej zaawansowanych i estetycznych stron internetowych.

Nie ma nic odpowiedniego? Sprawdź inne przedmioty.

Knowunity jest aplikacją edukacyjną #1 w pięciu krajach europejskich

Knowunity zostało wyróżnione przez Apple i widnieje się na szczycie listy w sklepie z aplikacjami w kategorii edukacja w takich krajach jak Polska, Niemcy, Włochy, Francje, Szwajcaria i Wielka Brytania. Dołącz do Knowunity już dziś i pomóż milionom uczniów na całym świecie.

Pobierz z

Google Play

Pobierz z

App Store

Knowunity jest aplikacją edukacyjną #1 w pięciu krajach europejskich

4.9+

Średnia ocena aplikacji

21 M

Uczniowie korzystają z Knowunity

#1

W rankingach aplikacji edukacyjnych w 17 krajach

950 K+

Uczniowie, którzy przesłali notatki

Nadal nie jesteś pewien? Zobacz, co mówią inni uczniowie...

Użytkownik iOS

Tak bardzo kocham tę aplikację [...] Polecam Knowunity każdemu!!! Moje oceny poprawiły się dzięki tej aplikacji :D

Filip, użytkownik iOS

Aplikacja jest bardzo prosta i dobrze zaprojektowana. Do tej pory zawsze znajdowałam wszystko, czego szukałam :D

Zuzia, użytkownik iOS

Uwielbiam tę aplikację ❤️ właściwie używam jej za każdym razem, gdy się uczę.

Przedmioty

Informatyka

•

1145

•

21 maj 2022

•

8 strony

Jak zrobić fajną stronę HTML w Notatniku: Prosty przewodnik

Michał

@szyszusiowe_notatki

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.

Czego dowiesz się z tej notatki?

Ta część przedstawia główne zagadnienia, które zostaną omówione w notatce. Czytelnik dowie się:

Czym jest język HTML
Jakich programów można użyć do napisania strony internetowej
Jak wygląda podstawowa struktura strony w języku HTML
Jak wykonać własną prostą stronę internetową

Highlight: Notatka zapewnia kompleksowe wprowadzenie do tworzenia stron internetowych, od teorii po praktykę.

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 język HTML?

Ta sekcja wyjaśnia istotę języka HTML:

HTML $Hypertext Markup Language$ to język znaczników używany do tworzenia stron internetowych. Wbrew powszechnemu przekonaniu, HTML nie jest językiem programowania.

Definition: HTML $ang. Hypertext Markup Language$ to język znaczników służący do tworzenia struktury i zawartości stron internetowych.

Highlight: Zrozumienie, że HTML jest językiem znaczników, a nie programowania, jest kluczowe dla początkujących twórców stron WWW.

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.

Jaki program do napisania strony?

Ta część omawia narzędzia do tworzenia stron internetowych:

Prostą stronę można stworzyć nawet w podstawowym notatniku, dostępnym na każdym komputerze. Istnieją jednak bardziej zaawansowane, darmowe programy ułatwiające tworzenie stron WWW.

Najpopularniejsze programy do tworzenia stron internetowych to:

Notepad++
Brackets
Visual Studio Code

Highlight: W kolejnych notatkach będziemy korzystać z programów Notepad++ i Visual Studio Code.

Vocabulary: Program do tworzenia stron internetowych - specjalistyczne oprogramowanie ułatwiające pisanie kodu HTML i tworzenie stron WWW.

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.

Podstawowe znaczniki języka HTML na stronie internetowej

Ta sekcja przedstawia kluczowe elementy struktury dokumentu HTML:

<!DOCTYPE HTML> lub <html> - deklaracja typu dokumentu
<head> - sekcja nagłówkowa, zawierająca metadane
<title> - tytuł strony
</head> - zamknięcie sekcji nagłówkowej
<body> - główna zawartość strony
</body> - zamknięcie głównej zawartości
</html> - zamknięcie dokumentu HTML

Definition: Struktura dokumentu HTML to podstawowy szkielet strony internetowej, składający się z określonych znaczników definiujących jej poszczególne części.

Highlight: Prawidłowa struktura dokumentu HTML jest kluczowa dla poprawnego wyświetlania strony w przeglądarkach.

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.

Przykładowa strona internetowa

Ta część prezentuje prosty przykład kodu HTML:

<!DOCTYPE HTML>
<head>
<title> To moja strona </title>
</head>
<body>
<center>
<h1>To jest moja strona :)</h1>
</center>
</body>
</html>

Example: Powyższy kod tworzy prostą stronę z wycentrowanym nagłówkiem "To jest moja strona :)".

Highlight: Aby wyświetlić efekt naszego kodu, plik należy zapisać z rozszerzeniem .html.

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.

I oto efekt napisanego przez nas kodu

Ta sekcja pokazuje, jak wygląda strona utworzona przy użyciu przykładowego kodu HTML:

Strona wyświetla prosty nagłówek "To jest moja strona :)" wycentrowany na środku ekranu. Tytuł strony widoczny w zakładce przeglądarki to "To moja strona".

Highlight: Nawet prosty kod HTML może stworzyć funkcjonalną stronę internetową.

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.

Co dalej?

Ta część zapowiada kolejne kroki w nauce tworzenia stron internetowych:

W następnych notatkach zostaną omówione:

Podstawowe znaczniki służące do formatowania strony internetowej
Pogłębienie wiedzy na temat stron internetowych
Aspekty estetyczne tworzenia stron WWW

Highlight: Kontynuacja nauki pozwoli na tworzenie bardziej zaawansowanych i estetycznych stron internetowych.

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.

Tworzenie strony internetowej - podstawy HTML

Strona HTML to podstawa każdej witryny internetowej. Ta notatka wprowadza w świat tworzenia stron WWW przy użyciu języka HTML, prezentując kluczowe informacje dla początkujących.

Główne punkty:

Definicja języka HTML
Programy do tworzenia stron internetowych
Podstawowa struktura dokumentu HTML
Praktyczny przykład prostej strony

Highlight: HTML to nie język programowania, a język znaczników służący do tworzenia stron internetowych.

Nie ma nic odpowiedniego? Sprawdź inne przedmioty.

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

4.9/5

App Store

4.8/5

Google 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 S

uż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 Klich

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

Anna

użytkownik iOS

Kocham tę aplikację! Pomaga mi w zadaniach domowych, motywuje mnie i polepsza mi dzień. Dzięki tej aplikacji moje oceny się poprawiły. Lepszej aplikacji nie znajdę!🩷

Patrycja

użytkowniczka iOS

Super aplikacja! Ma odpowiedzi na wszystkie zadania. Testuję ją od paru miesięcy i jest po prostu perfekcyjna.

Szymon

użytkownik Android

Super aplikacja do nauki i sprawdzania wiedzy. Można znaleźć notatki z WSZYSTKICH przedmiotów. Polecam tym, którzy celują w oceny 5 i 6 😄

Szymon

użytkownik iOS

Aplikacja jest po prostu świetna! Wystarczy, że wpiszę w pasku wyszukiwania swój temat i od razu mam wyniki. Nie muszę oglądać 10 filmów na YouTube, żeby coś zrozumieć, więc oszczędzam swój czas. Po prostu polecam!

Kuba T

użytkownik Androida

W szkole byłem bardzo kiepski z matematyki, ale dzięki tej aplikacji radzę sobie teraz lepiej. Jestem bardzo wdzięczny, że ją stworzyliście.

Kriss

użytkownik Androida

Korzystam z Knowunity od ponad roku i jest mega! Najlepsze opcje z tej apki: ⭐️ Gotowe notatki ⭐️ Spersonalizowane treści ⭐️ Dostęp do chatu GPT W WERSJI SZKOLNEJ ⭐️ Konwersacje z innymi uczniami 🤍 NAUKA WRESZCIE NIE JEST NUDNA 🤍

Gosia

użytkowniczka Android

Bardzo lubię aplikację Knowunity, ponieważ pomaga mi w nauce. Odkąd ją mam moje oceny się poprawiają :)

Sara

użytkowniczka iOS

Aplikacja jest niezawodna! Polecam 👍💙

Krzysztof

użytkownik Android

Bardzo fajna aplikacja. Pomaga przygotować się do sprawdzianu, kartkówki lub odpowiedzi ustnej.

Oliwia

użytkowniczka iOS

Stefan S

użytkownik iOS

Samantha Klich

użytkownik Androida

Anna

użytkownik iOS

Kocham tę aplikację! Pomaga mi w zadaniach domowych, motywuje mnie i polepsza mi dzień. Dzięki tej aplikacji moje oceny się poprawiły. Lepszej aplikacji nie znajdę!🩷

Patrycja

użytkowniczka iOS

Super aplikacja! Ma odpowiedzi na wszystkie zadania. Testuję ją od paru miesięcy i jest po prostu perfekcyjna.

Szymon

użytkownik Android

Super aplikacja do nauki i sprawdzania wiedzy. Można znaleźć notatki z WSZYSTKICH przedmiotów. Polecam tym, którzy celują w oceny 5 i 6 😄

Szymon

użytkownik iOS

Kuba T

użytkownik Androida

W szkole byłem bardzo kiepski z matematyki, ale dzięki tej aplikacji radzę sobie teraz lepiej. Jestem bardzo wdzięczny, że ją stworzyliście.

Kriss

użytkownik Androida

Gosia

użytkowniczka Android

Bardzo lubię aplikację Knowunity, ponieważ pomaga mi w nauce. Odkąd ją mam moje oceny się poprawiają :)

Sara

użytkowniczka iOS

Aplikacja jest niezawodna! Polecam 👍💙

Krzysztof

użytkownik Android

Bardzo fajna aplikacja. Pomaga przygotować się do sprawdzianu, kartkówki lub odpowiedzi ustnej.

Oliwia

użytkowniczka iOS