Moduł 1: Krótka historia HTML i Internetu
Ten moduł wprowadza do HTML i CSS oraz narzędzi używanych do tworzenia stron internetowych. Omawia również wiele irytujących drobiazgów, o których należy wiedzieć przed tworzeniem nowoczesnych stron internetowych.
Lekcje
- Witaj!
- Historia
- Szczegóły, szczegóły, szczegóły...
- Cykl życia strony internetowej
- Definicje kodów stanu HTTP
- Najważniejsze rzeczy, których musi znać programista stron internetowych
Lab: Rozpoczęcie pracy z HTML
- Ćwiczenie 1 – Tworzenie strony internetowej
- Ćwiczenie 2 – Eksploracja opcji Visual Studio
- Ćwiczenie 3 – Eksperymentowanie z tagami
Moduł 2: Podstawowe elementy HTML
Ten moduł obejmuje używanie edytorów HTML, tworzenie stron, podstawowe tagi HTML i walidację HTML.
Lekcje
- Edytory HTML i CSS
- Tekst, spacje i tabulacje
- Praca z tagami
- Atrybuty
- Komentarze
- Tagi niestandardowe
- Każda strona zawiera...
- Rozszerzenia plików
- Podstawowe elementy strony
- Zagnieżdżanie
- Testowanie HTML
- HTML i tekst
Lab: Podstawowe elementy HTML
- Ćwiczenie 1 – Tworzenie i walidacja strony
- Ćwiczenie 2 – Narzędzia przeglądarki
- Ćwiczenie 3 – Dodawanie komunikatu o prawach autorskich
- Ćwiczenie 4 – Tworzenie arkusza stylów
Moduł 3: Kaskadowe arkusze stylów (CSS)
Chociaż CSS jest omawiane na przestrzeni całego tego kursu i jest wprowadzane i używane wraz z powiązanymi tagami HTML, ten moduł omawia podstawowe funkcje CSS, w tym selektory, jednostki CSS i model pudełkowy CSS.
Lekcje
- Przed CSS
- Z CSS
- Kaskadowe arkusze stylów (CSS)
- Dodawanie CSS do strony
- Kolejność przetwarzania CSS
- Eksperymentalne przedrostki dostawcy
- Jednostki CSS
- Model pudełkowy CSS
Lab: Kaskadowe arkusze stylów (CSS)
- Ćwiczenie 1 – Tworzenie i walidacja strony
- Ćwiczenie 2 – Model pudełkowy CSS – Dostosowanie nagłówka
- Ćwiczenie 3 – Model pudełkowy CSS – Dodanie kart nawigacyjnych
- Ćwiczenie 4 – Praca z pseudoklasą
- Ćwiczenie 5 – Walidacja kodu
Moduł 4: Czcionki i tekst
Ten moduł poświęcony jest używaniu czcionek i list w stronach HTML.
Lekcje
- Czcionki
- CSS dla tekstu
- Ciekawostki CSS o tekście!
- Praca z listami
- Aktualizacja do Windows 7
Lab: Czcionki i tekst
- Ćwiczenie 1 – Wybór czcionek
- Ćwiczenie 2 – Walidacja kodu
Moduł 5: Kolory i tła
W tym module eksplorujemy, jak kolory są używane i stosowane w HTML i CSS do tagów HTML, czcionek i tła.
Lekcje
- Określanie kolorów
- Stosowanie kolorów
- Gradienty
Lab: Kolory i tła
- Ćwiczenie 1 – Praca z kolorem
- Ćwiczenie 2 - Gradienty
Moduł 6: Kotwice i hiperłącza
„H” w HTML odnosi się do możliwości łączenia jednego dokumentu z drugim. W tym module będziemy pracować z tagiem kotwicy i przyciskami, aby budować hiperłączone dokumenty.
Lekcje
- HTML i CSS
- Hiperłącza z obrazami i innymi obiektami
- Przyciski
Lab: Kotwice i hiperłącza
- Ćwiczenie 1 – Dodanie linków do innych stron
- Ćwiczenie 2 – Linki zewnętrzne
- Ćwiczenie 3 – Linki obrazów
Moduł 7: Układ strony
W tym module przyjrzymy się opcjom HTML do kontrolowania tego, gdzie i jak zawartość jest rozmieszczana na stronie. Przyjrzymy się zarówno tagom HTML, jak i temu, co można zrobić za pomocą CSS.
Lekcje
- Opcje układu strony
- Tabele do danych
- DIV-y
- Pływanie
- SPAN
- Tagi HTML 5 podobne do DIV
- IFRAMES
Lab: Układy stron
- Ćwiczenie 1 – Obrazki pływające
- Ćwiczenie 2 – DIV-y pływające
- Ćwiczenie 3 – Badanie możliwości arkuszy stylów CSS
Moduł 8: Obrazy
Ten moduł eksploruje pracę z obrazami w stronach HTML. Będziemy badać typy plików, rozmiary plików, kompresję, obrazy tła, CSS sprite'y oraz najlepsze praktyki.
Lekcje
- Favicon
- Przygotowanie obrazów
- Pliki obrazów
- Tag IMG
- Obrazy tła
- Najlepsze praktyki związane z obrazami
- CSS sprite'y
Lab: Obrazy
- Ćwiczenie 1 – Dodawanie tła do strony
- Ćwiczenie 2 – Dodawanie obrazu tła do DIV-a
Moduł 9: Formularze HTML
W tym module będziemy badać tagi HTML do tworzenia, stylizowania i walidowania formularzy internetowych.
Lekcje
- Podstawowy formularz
- POST vs. GET
- name vs. id
- Podstawowe elementy formularza
- Podstawowy atrybut formularza
- Wybór
- Przesyłanie plików
- Udoskonalenia formularza HTML 5
- DataList
Lab: Formularze HTML
- Ćwiczenie 1 – Budowanie prostego formularza
Moduł 10: Multimedia
Ten moduł eksploruje dodawanie wideo i dźwięku do stron internetowych.
Lekcje
- Wideo i audio
- Wideo HTML 5
- CSS
- JavaScript
- Audio
- Hostowanie wideo w chmurze
- Praca z animowanymi GIF-ami
Lab: Dodawanie wideo do strony
- Ćwiczenie 1 – Dodanie wideo do strony
- Ćwiczenie 2 – Dodanie wideo z serwisu YouTube do strony (opcjonalne)