Język znacznikowy HTML jest podstawą w tworzeniu stron internetowych, aplikacji webowych, a także hybrydowych aplikacji desktopowych czy mobilnych.
Adresaci szkolenia
Szkolenie jest adresowane do osób uczących się tworzenia stron internetowych, posiadających już podstawową wiedzę w tym zakresie.
Cel szkolenia
Celem szkolenia jest dogłębne poznanie języka HTML i obowiązujących standardów. Szkolenie wprowadza także do użycia CSSa, JavaScriptu oraz do podstaw SEO.
Mocne strony szkolenia
W szkoleniu występuje rzadko spotykany poziom kompleksowości i szczegółowości w omówieniu języka HTML.
Wymagania
- znajomość podstaw HTML lub wybranego systemu CMS z edytorem HTML
Parametry szkolenia
- Liczba godzin szkolenia: 24
- Forma: warsztat
- Maksymalna liczba uczestników: 10
Program szkolenia
- 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