Szkolenie MS 55319 HTML5 and CSS

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)

Choć jakiekolwiek doświadczenie w HTML lub programowaniu jest plusem, wszystko, czego potrzebujesz, to podstawowa znajomość obsługi komputera oraz chęć nauki tworzenia stron internetowych.