Koduj razem: zbuduj prostą stronę internetową
Postępuj zgodnie z instrukcjami krok po kroku, aby utworzyć ciekawą stronę
Koduj razem: zbuduj prostą stronę internetową to bezpłatna lekcja HTML for Kids na CoddyKit. To lekcja 1 z 2. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML for Kids, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML for Kids zawiera 2 lekcji w sumie.
Tworzenie pierwszej strony internetowej
Programuj razem ze mną: zbuduj prostą stronę internetową
Witaj w swoim pierwszym projekcie programistycznym! W tej lekcji krok po kroku zbudujemy prostą stronę internetową. Wykonuj kolejne kroki, aby zobaczyć, jak współdziałają elementy HTML, CSS i podstawy projektowania.
Cel: Utworzenie strony profilu osobistego.
Konfigurowanie pliku
Krok 1: Konfigurowanie pliku
Najpierw utwórzmy folder na projekt i dodajmy plik HTML:
- Utwórz na komputerze nowy folder o nazwie MyWebPage.
- W folderze utwórz plik o nazwie
index.html. - Otwórz plik w edytorze kodu (np. Visual Studio Code).
Wskazówka: Nazwa pliku index.html jest często używana dla głównej strony witryny.
Dodawanie podstawowej struktury
Krok 2: Dodawanie podstawowej struktury
Teraz dodaj do pliku podstawową strukturę HTML. Obejmuje ona znaczniki <!DOCTYPE html>, <html>, <head> i <body>.
Przykład:
<!DOCTYPE html>
<html>
<head>
<title>My Profile Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is my personal profile page.</p>
</body>
</html>
Dodawanie sekcji profilu
Krok 3: Dodawanie sekcji profilu
Dodajmy sekcję wyświetlającą Twoje imię i krótki opis.
Przykład:
<body>
<h1>Welcome to My Page</h1>
<p>This is my personal profile page.</p>
<!-- Profile Section -->
<h2>About Me</h2>
<p>Hi, I’m [Your Name]. I’m learning web development, and this is my first project!</p>
</body>
Dodawanie obrazu
Krok 4: Dodawanie obrazu
Następnie dodajmy zdjęcie profilowe za pomocą znacznika <img>. Zapisz obraz w folderze projektu i połącz go z plikiem HTML.
Przykład:
<!-- Profile Picture -->
<img src="profile.jpg" alt="My Profile Picture" width="200" />
Dodawanie listy zainteresowań
Krok 5: Dodawanie listy zainteresowań
Utwórz nieuporządkowaną listę swoich zainteresowań za pomocą znaczników <ul> i <li>.
Przykład:
<!-- Hobbies Section -->
<h2>My Hobbies</h2>
<ul>
<li>Reading books</li>
<li>Playing video games</li>
<li>Coding projects</li>
</ul>
Dodawanie odnośnika
Krok 6: Dodawanie odnośnika
Dodaj odnośnik do swojej ulubionej witryny za pomocą znacznika <a>.
Przykład:
<!-- Favorite Website -->
<h2>My Favorite Website</h2>
<p>Check out my favorite website: <a href="https://example.com" target="_blank">Example</a>.</p>
Dodawanie stylów wbudowanych
Krok 7: Dodawanie stylów wbudowanych
Dodajmy podstawowe style bezpośrednio do kodu HTML za pomocą atrybutu style.
Przykład:
<h1 style="color: blue; text-align: center;">Welcome to My Page</h1>
<p style="font-size: 16px; color: gray;">This is my personal profile page.</p>
Powtórzenie wiadomości o projekcie strony
Świetna robota!
Gratulacje! Krok po kroku zbudowałeś swoją pierwszą stronę internetową. W tym projekcie nauczyłeś się porządkować kod HTML, dodawać treści i stylizować je za pomocą stylów wbudowanych. Eksperymentuj dalej i dodawaj nowe sekcje do swojej strony!
Wskazówka: Spróbuj hostować swoją stronę w GitHub Pages, aby udostępnić ją znajomym!
Często zadawane pytania
Czy lekcja „Koduj razem: zbuduj prostą stronę internetową” jest bezpłatna?
Tak — pełny tekst „Koduj razem: zbuduj prostą stronę internetową” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML for Kids, przejdź na CoddyKit PRO. Kurs HTML for Kids zawiera 2 lekcji w sumie.
Co nauczysz się w „Koduj razem: zbuduj prostą stronę internetową”?
Postępuj zgodnie z instrukcjami krok po kroku, aby utworzyć ciekawą stronę Ćwiczysz HTML for Kids z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML for Kids?
Nie wymagamy żadnego doświadczenia. HTML for Kids w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 2.
Ile czasu zajmuje lekcja „Koduj razem: zbuduj prostą stronę internetową”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML for Kids?
Tak. Każda lekcja HTML for Kids zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Koduj razem: zbuduj prostą stronę internetową
- Poszukiwanie skarbów w HTML