Zaawansowany HTML
LICZBA DNI: 3 (24h)
KOD KURSU: HTML/ADV
Weź udział w szkoleniu
Termin
Lokalizacja
Cena / os
31
maja
Warszawa,
Kraków,
Łódź,
Wrocław,
Gdańsk,
Poznań,
Zdalne,
Termin
31
maja
Lokalizacja
Warszawa,
Kraków,
Łódź,
Wrocław,
Gdańsk,
Poznań,
Zdalne,
Cena / os
Powiadom
o kolejnych terminach
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 CSS, JavaScript oraz do podstaw SEO
Program
Wstęp
- Możliwości zastosowania HTML
- 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 CSS
- 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, checkbox, radiobutton
- 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 HTML
- 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 labelów 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 HTML 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 JS i wstrzykiwanie ich do drzewa DOM
- Praca z elementami formularzy w JS
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 HTML
- Przez systemy szablonów
- Przy pomocy edytorów wizualnych
- Ręczne (bezpośrednio pisząc kod)
- Przy pomocy back-endu
- Przy pomocy JS
- Po przeparsowaniu innego języka (np. Markdown)
- Modyfikacja istniejących szablonów
Wstęp do generowania HTML po stronie serwerowej
- Transformacja i przygotowanie danych do wyświetlenia
- Instrukcje warunkowe
- Pętle
- Wstrzykiwanie zmiennych
- Dzielenie projektu na subtemplate’y
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
