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

  1. Wstęp
    • możliwości zastosowania HTMLa
    • wersje i standaryzacja języka HTML
  2. Przypomnienie podstawowych zasad składni HTML
    • podstawowe znaczniki blokowe
    • podstawowe znaczniki tekstowe
    • atrybuty
  3. Wymagania stawiane stronom internetowym
    • readability
    • usability
    • accessibility
  4. Dostępność
    • UX i DX
    • dostępność dla osób niepełnosprawnych
    • czytelność witryny
    • atrybuty WAI-ARIA
  5. Semantyka
    • semantyka bloków: ASIDE, MAIN, ARTICLE, SECTION, itd.
    • struktura nagłówków
  6. 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
  7. Obsługa adresów i linków
    • adresy względne i bezwzględne
    • atrybuty target i rel dla linków
    • linki i SEO
  8. Tagi META
    • język dokumentu i jego zmiana
    • specjalne tagi meta dla portali społecznościowych
    • tag BASE
    • favikona
  9. Biblioteki i Frameworki CSS
    • normalize.css / reset Meyera*
    • animate.css
    • baseline by Stephane Curzi
    • Bootstrap
    • Foundation
    • Surface
    • Bulma
  10. 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
  11. Praca z obrazami
    • src i data base64
    • figure, figcaption, picture
    • srcset
  12. 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
  13. 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
  14. 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
  15. Formularze i media
    • uruchamianie aparatu telefonu z poziomu formularza HTML
    • wybór pliku
    • wybór wielu plików
    • ograniczenie do danego typu plików
  16. Kontrola HTMLa za pomocą klawiatury
    • tabindex
    • używanie skrótów klawiaturowych
  17. Renderowanie dokumentu HTML
    • drzewo DOM
    • etapy renderowania stron www
    • rendering i malowanie
    • kolejność wczytywania i działania zewnętrznych zasobów do przeglądarki
  18. 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
  19. Multimedia
    • audio
    • video
    • wiele źródeł - source
  20. 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
  21. 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
  22. 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
  23. 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
  24. Sposoby organizacji projektu
    • separacja struktury, wyglądu i działania
    • podział plików na mniejsze struktury
    • korzystanie z zewnętrznych plików, CDNów
  25. 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

Pytania?

* Wymagane.


Konsultant on-line
Skorzystaj z usług naszego konsultanta on-line.
Naciśnij przycisk ‘Skorzystaj’ aby przejść do okienka czatu
Kontakt
ul. Nowogrodzka 62c
02-002 Warszawa
Telefon +48 22 2035600
Fax +48 22 2035601
Email