BitEdu - liceum i technikum
INF.03
Lekcje otwarte możesz czytać od razu. Materiały oznaczone kontem zawierają zadania, kod lub pliki przeznaczone dla przypisanych uczniów.
HTML i CSS
Wprowadzenie do HTML — struktura dokumentu
Zanim nauczysz się cokolwiek liczyć czy zapisywać do bazy danych, strona internetowa musi w ogóle ISTNIEĆ jako dokument, który przeglądarka umie poprawnie odczytać i wyświetlić. HTML to fundament, na którym stawiasz wszystko inne — CSS (wygląd), JavaScript (in...
Listy, tabele i linki w HTML
Listy i tabele to naturalny sposób prezentowania wielu podobnych elementów — a to jest dokładnie to, co za chwilę (dział PHP) będziesz wyświetlać po pobraniu danych z bazy: listy produktów, tabele wyników zapytań SELECT. Linki z kolei łączą pojedyncze strony w...
Formularze HTML — pola, etykiety, przyciski
To jest most między tym, co widzi i wpisuje użytkownik, a tym, co za chwilę odbierze i zapisze do bazy danych PHP (Lekcja 7 i 10 działu Aplikacje internetowe PHP). Bez dobrze zbudowanego formularza żaden serwis z rejestracją, logowaniem czy koszykiem nie może...
Walidacja formularzy w HTML5
To pierwsza linia obrony przed błędnymi danymi — zanim jeszcze napiszesz jakikolwiek kod PHP czy JavaScript, sama przeglądarka może odrzucić oczywiście złe dane (puste pole, zły format e-maila). To też bezpośredni, nazwany wprost efekt podstawy programowej INF...
Wprowadzenie do CSS — selektory i podstawowe właściwości
Strona zbudowana tylko z HTML wygląda jak zwykły tekstowy dokument — CSS zamienia ją w coś, co realnie chcesz pokazać użytkownikowi. To narzędzie towarzyszące (nie jest osobno wymienione w podstawie programowej INF.03.5), ale praktycznie niezbędne do zbudowani...
Model pudełkowy i podstawy layoutu (flexbox)
Bez zrozumienia modelu pudełkowego i flexboxa nie da się poukładać elementów strony obok siebie w sposób przewidywalny — to jest narzędzie, dzięki któremu katalog filmów wyświetli się jako siatka kart, a nie pionowa lista jedna pod drugą.
Kolory i tła w CSS
Kolor to pierwsza rzecz, jaką widzi użytkownik na stronie — bez pewnego posługiwania się różnymi zapisami kolorów i właściwościami tła nie da się świadomie zaprojektować wyglądu żadnej strony, karty produktu czy przycisku.
Typografia — stylowanie tekstu w CSS
Dobrze dobrana typografia (czytelny rozmiar, odpowiednia wysokość linii, konsekwentne wyrównanie) odróżnia stronę, która wygląda profesjonalnie, od takiej, która wygląda na niedokończoną — a to jest jeden z pierwszych elementów, na które zwraca uwagę każdy odb...
Stylowanie linków i przycisków — pseudoklasy (:hover, :focus, :active)
Statyczny przycisk, który wygląda identycznie niezależnie od tego, co robi z nim użytkownik, sprawia wrażenie niedziałającego elementu — pseudoklasy to właśnie ten drobny, ale kluczowy szczegół, który sprawia, że strona "reaguje" i wygląda na w pełni funkcjona...
Stylowanie obrazów i efekty wizualne (cień, zaokrąglenia)
Nieostylowane zdjęcie wstawione wprost do HTML rzadko pasuje idealnie do reszty projektu — może być za duże, mieć złe proporcje względem miejsca, w którym ma się znaleźć, albo po prostu wyglądać "surowo" bez zaokrągleń i cienia, które dziś są standardem w każd...
Jednostki, margines, padding i box-sizing w praktyce
To jest DOKŁADNIE ten fragment CSS, którego brak najbardziej daje się we znaki w praktyce — bez zrozumienia jednostek i box-sizing elementy będą "nie chciały" mieć takich rozmiarów, jakich oczekujesz, a odstępy będą wyglądać na przypadkowe zamiast przemyślane.
Projekt: Mój Bohater — kompletna strona z HTML, CSS i odrobiną JS
To podsumowujący projekt całego działu HTML i CSS — zamiast uczyć się kolejnej, pojedynczej właściwości, zobaczysz, jak WSZYSTKIE dotychczas poznane elementy (struktura dokumentu, selektory, kolory, typografia, pseudoklasy, box model) składają się w JEDNĄ, spó...
Słowniczek — HTML i CSS
Zbiorcza ściąga wszystkich znaczników HTML i właściwości CSS poznanych w tym dziale — jedno miejsce, do którego warto wrócić przed sprawdzianem albo egzaminem, zamiast przeszukiwać wszystkie 11 lekcji z osobna.