HTML i CSS: pierwsze strony

Kurs tworzenia stron WWW od zera: struktura dokumentu HTML, listy, linki, tabele i formularze, a potem CSS - kolory, tekst, odstępy i układ strony jak w arkuszach INF.03. Kod piszesz w przeglądarce i od razu widzisz wynik w podglądzie. Kolejne tematy (strona z kilku sekcji, responsywność, JavaScript na stronie) w przygotowaniu.

Dla kogo: Klasy 7-8, liceum i technikum: pierwsze strony WWW, przygotowanie do INF.03. Więcej o kursie

Pierwsza strona w HTML

Poznajesz budowę każdej strony internetowej: szkielet dokumentu HTML, nagłówki h1-h6 i akapity. Nauczysz się łamać linie, wyróżniać tekst pogrubieniem i kursywą oraz pisać komentarze w kodzie.

Listy, linki i obrazki

Porządkujesz treść w listy punktowane i numerowane, także zagnieżdżone. Tworzysz linki do kotwic na tej samej stronie i spis treści, a obrazki wstawiasz jako emoji albo rysujesz kodem w SVG.

Tabele

Budujesz tabele w HTML: wiersze, komórki, nagłówki i podpis, a potem sekcje thead, tbody i tfoot. Na koniec łączysz komórki atrybutami colspan i rowspan, co jest stałym elementem zadań na egzaminie INF.03.

Formularze

Formularz to miejsce, w którym użytkownik wpisuje dane: imię, wiek, e-mail albo wybiera opcje z listy. Poznasz znaczniki form, label, input w różnych odmianach, select, textarea i button. Nasze formularze niczego nie wysyłają na serwer - uczymy się ich budowy, która często pojawia się na egzaminie INF.03.

CSS: kolory, tekst i selektory

CSS zmienia wygląd strony bez ruszania jej treści. Nauczysz się pisać reguły w znaczniku style, wybierać elementy selektorem znacznika, klasy i id, ustawiać kolory tekstu i tła, rozmiar, krój i wyrównanie tekstu. Na koniec zobaczysz, jak kaskada rozstrzyga, która reguła wygrywa.

CSS: odstępy, ramki i układ

Każdy element strony to pudełko z treścią, wewnętrznym odstępem, ramką i marginesem. Poznasz model pudełkowy, szerokość, właściwość display i podstawy flexboxa. Na końcu zbudujesz klasyczny układ strony z banerem, blokami i stopką, taki jak w arkuszach egzaminu INF.03.