Zaawansowany HTML
LICZBA DNI: 3 (24h)
KOD KURSU: HTML/ADV
Dostosowany program 
O szkoleniu
DLA KOGO?
Szkolenie jest adresowane do osób uczących się tworzenia stron internetowych, posiadających już podstawową wiedzę w tym zakresie
WYMAGANIA
Znajomość podstaw HTML lub wybranego systemu CMS z edytorem HTML
ZALETY
W szkoleniu występuje rzadko spotykany poziom kompleksowości i szczegółowości w omówieniu języka HTML
Cele szkolenia
Dogłębne poznanie języka HTML i obowiązujących standardów
Wprowadzenie do użycia CSSa, JavaScriptu oraz do podstaw SEO
Program
Wstęp
- możliwości zastosowania HTMLa
- wersje i standaryzacja języka HTML
Przypomnienie podstawowych zasad składni HTML
- podstawowe znaczniki blokowe
- podstawowe znaczniki tekstowe
- atrybuty
Wymagania stawiane stronom internetowym
- readability
- usability
- accessibility
Dostępność
- UX i DX
- dostępność dla osób niepełnosprawnych
- czytelność witryny
- atrybuty WAI-ARIA
Semantyka
- semantyka bloków: ASIDE, MAIN, ARTICLE, SECTION, itd.
- struktura nagłówków
SEO
- odpowiednie przygotowanie treści
- słowa / frazy kluczowe
- dzielenie treści na bloki tekstu i śródtytuły
- nagłówki
- atrybuty alt i title dla obrazków
Obsługa adresów i linków
- adresy względne i bezwzględne
- atrybuty target i rel dla linków
- linki i SEO
Tagi META
- język dokumentu i jego zmiana
- specjalne tagi meta dla portali społecznościowych
- tag BASE
- favikona
Biblioteki i Frameworki CSS
- normalize.css / reset Meyera*
- animate.css
- baseline by Stephane Curzi
- Bootstrap
- Foundation
- Surface
- Bulma
Nadawanie wyglądu elementom HTML
- budowanie interfejsu aplikacji z wykorzystaniem minimalnej ilości CSSa
- tworzenie wyglądu aplikacji z wykorzystaniem wybranego frameworka CSS
- sposoby wczytywania stylów CSS
Praca z obrazami
- src i data base64
- figure, figcaption, picture
- srcset
SVG
- szybkie wprowadzenie do grafiki wektorowej
- tworzenie ścieżek w programach graficznych, a bezpośrednio w kodzie
- łączenie SVG z HTML
- wprowadzanie zmian struktury w SVG po umieszczeniu go w HTML
- biblioteki do WYGODNEJ pracy z SVG
- biblioteki do rysowania wykresów za pomocą SVG
- maski przycinania tworzone za pomocą ścieżek
Formularze
- przyciski, pola edycyjne, checkboxy, radiobuttony
- pole typu number
- date picker, time select, color picker, camera
- natywna walidacja formularzy
- wyłączenie walidacji formularzy
- progress
- zastosowanie ukrytych pól formularzy
- stosowanie elementów formularzy jako elementów sterujących HTMLem
- DETAILS i SUMMARY
- atrybut autofocus
- dopełnianie formularzy i wyłączenie dopełniania
Dodatkowe operacje na formularzach
- adres na który ma zostać wysłany formularz
- metoda wysyłania formularza
- znacznik fieldset
- fieldset + problemy flex CSS
- stosowanie elementów input / button / select poza formularzem
- łączenie LABEL i kontrolki formularza (zagnieżdżanie i atrybut for)
- grupowanie labelek i inputów
- przewaga BUTTON submit nad INPUT submit
- dobór odpowiednich kontrolek do typu danych
- kontrolka select - wielokrotny wybór, grupowanie, wybór domyślny
- datalist
- search
- reset formularza
- zewnętrzne linki w ramach formularza
- dzielenie długich formularzy na mniejsze
Formularze i media
- uruchamianie aparatu telefonu z poziomu formularza HTML
- wybór pliku
- wybór wielu plików
- ograniczenie do danego typu plików
Kontrola HTMLa za pomocą klawiatury
- tabindex
- używanie skrótów klawiaturowych
Renderowanie dokumentu HTML
- drzewo DOM
- etapy renderowania stron www
- rendering i malowanie
- kolejność wczytywania i działania zewnętrznych zasobów do przeglądarki
Podstawowe operacje na drzewie DOM z użyciem JS
- wybieranie elementów
- modyfikacja drzewa DOM
- nadawanie, zdejmowanie klas
- tworzenie elementów HTML w JSie i wstrzykiwanie ich do drzewa DOM
- praca z elementami formularzy w JSie
Multimedia
- audio
- video
- wiele źródeł - source
Zagadnienia zaawansowane
- własne znaczniki
- trzymanie danych w atrybutach data-*
- białe znaki
- znaki specjalne - encje
- poprawki w drzewie DOM wykonywane przez przeglądarkę
- tworzenie layoutu a reprezentacja danych
- shadow DOM
Znaczniki do specjalnych zastosowań
- adres
- indeksy górne / dolne
- wyświetlanie kodu źródłowego - PRE, CODE, VAR
- cytowanie - BLOCKQUOTE, CITE
- znaczniki czasu - TIME i atrybut datetime
- skróty, akronimy i ich rozwinięcia - ABBR
- MATH - wzory i równania matematyczne
- KBD
- RUBY
- MARK
- mikroformaty
Sposoby tworzenia HTMLa
- przez systemy templatkowe
- przy pomocy edytorów wizualnych
- ręczne (bezpośrednio pisząc kod)
- przy pomocy back-endu
- przy pomocy JSa
- po przeparsowaniu innego języka (np. MarkDown)
- modyfikacja istniejących szablonów
Wstęp do generowania HTMLa po stronie serwerowej
- transformacja i przygotowanie danych do wyświetlenia
- instrukcje warunkowe
- pętle
- wstrzykiwanie zmiennych
- dzielenie projektu na subtemplatki
Sposoby organizacji projektu
- separacja struktury, wyglądu i działania
- podział plików na mniejsze struktury
- korzystanie z zewnętrznych plików, CDNów
Warsztat programisty
- przydatne praktyki formatowania kodu
- stosowanie konwencji nazewniczych
- tworzenie samodokumentującego się kodu HTML
- narzędzia sprawdzające usability
- rzetelne i aktualne źródła wiedzy
- częste pułapki i ich rozwiązania
- HTML i kontrola wersji GIT
Szkolenia powiązane
