Zaawansowany HTML

Czas trwania szkolenia:3 dni (24h)

Kod kursu:HTML/ADV

Poziom zaawansowania:

html

Szkolenie na zamówienie

Szkolenie dostosowane do potrzeb Twojego zespołu.
Dostępne wyłącznie na zamówienie

  • Dostosowany program
  • Indywidualna wycena
  • Dowolny termin
Icon with laptop

O szkoleniu Zaawansowany HTML

W cenie otrzymasz:

  • Materiały szkoleniowe
  • Certyfikat ukończenia szkolenia
  • W przypadku szkolenia w trybie stacjonarnym zapewnimy Ci również lunch oraz sprzęt niezbędny do nauki

Dla kogo?

  • Szkolenie 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
  • Praktyka przed teorią - wszystkie szkolenia technologiczne prowadzone są w formie warsztatowej. Konieczna teoria jest wyjaśniana na przykładzie praktycznych zadań
  • Konkretne umiejętności - w ramach każdego szkolenia rozwijamy praktyczne umiejętności związane z daną technologią i tematyką
  • Nauka z praktykami - wszyscy trenerzy na co dzień pracują w projektach, gwarantuje to dostęp do eksperckiej wiedzy i praktycznego know-how

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

Podobne szkolenia