Zaawansowany HTML

LICZBA DNI: 3 (24h)

KOD KURSU: HTML/ADV

Powiadom
o kolejnych terminach

# html

Autor szkolenia:
Krzysztof Ścira

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

  • możliwości zastosowania HTMLa
  • wersje i standaryzacja języka HTML
  • podstawowe znaczniki blokowe
  • podstawowe znaczniki tekstowe
  • atrybuty
  • readability
  • usability
  • accessibility
  • UX i DX
  • dostępność dla osób niepełnosprawnych
  • czytelność witryny
  • atrybuty WAI-ARIA
  • semantyka bloków: ASIDE, MAIN, ARTICLE, SECTION, itd.
  • struktura nagłówków
  • 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
  • adresy względne i bezwzględne
  • atrybuty target i rel dla linków
  • linki i SEO
  • język dokumentu i jego zmiana
  • specjalne tagi meta dla portali społecznościowych
  • tag BASE
  • favikona
  • normalize.css / reset Meyera*
  • animate.css
  • baseline by Stephane Curzi
  • Bootstrap
  • Foundation
  • Surface
  • Bulma
  • budowanie interfejsu aplikacji z wykorzystaniem minimalnej ilości CSSa
  • tworzenie wyglądu aplikacji z wykorzystaniem wybranego frameworka CSS
  • sposoby wczytywania stylów CSS
  • src i data base64
  • figure, figcaption, picture
  • srcset
  • 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
  • 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
  • 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
  • uruchamianie aparatu telefonu z poziomu formularza HTML
  • wybór pliku
  • wybór wielu plików
  • ograniczenie do danego typu plików
  • tabindex
  • używanie skrótów klawiaturowych
  • drzewo DOM
  • etapy renderowania stron www
  • rendering i malowanie
  • kolejność wczytywania i działania zewnętrznych zasobów do przeglądarki
  • 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
  • audio
  • video
  • wiele źródeł - source
  • 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
  • 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
  • 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
  • transformacja i przygotowanie danych do wyświetlenia
  • instrukcje warunkowe
  • pętle
  • wstrzykiwanie zmiennych
  • dzielenie projektu na subtemplatki
  • separacja struktury, wyglądu i działania
  • podział plików na mniejsze struktury
  • korzystanie z zewnętrznych plików, CDNów
  • 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

POLITYKA COOKIES:

Korzystamy z plików cookies, by móc jak najlepiej dostosować stronę do Twoich potrzeb oraz wyświetlać Ci przydatne i adekwatnych dla Ciebie reklamy w serwisie i poza nim. Możesz kontrolować ustawienia ciasteczek w swoich ustawieniach swojej przeglądarki. Odwiedzając tę stronę, wyrażasz zgodę na wykorzystywanie przez nas plików cookies.