HTML 5 a CSS 3 - základy tvorby webov

IVIT - Inštitút vzdelávania informačných technológií, s.r.o.

Popis kurzu

Obsah kurzu

• ÚVOD DO TVORBY WEBOVÝCH STRÁNOK VŠEOBECNE
• Vznik a história vývoja jazyka HTML
• Obecný zápis dokumentov HTML
• Jazyk XHTML – popis, história a porovnanie s HTML
• Charakteristika najpoužívanejších verzií – HTML 4.01, XHTML 1.0 a 1.1, HTML 5
   
• ZÁKLADNÝ HTML5 DOKUMENT
• Zobrazenie HTML elementov bez správnej štruktúry a prečo je dôležité dodržiavať správnu HTML štruktúru
• Správna základná HTML5 štruktúra, určenie DOCTYPE a jazyk dokumentu
   
• HTML5 – PRÁCA S TEXTOM
• Základné HTML tagy pre prácu s textom: h1-6, p, br, strong, em, b, i, hr, blockquote
• Linkovanie, linky (v novom okne), odkazy, kotvy, novšie formáty linkov ako telefónne číslo, či email
• Zoznam v HTML dokumente – typy zoznamov: neusporiadaný, usporiadaný
• Spojenie zoznamu a linkov – vytvorenie prvého jednoduchého navigačného menu stránky
• HTML tag nav a správne vytvorenie navigácie stránky
   
• HTML5 – PRÁCA S OBRÁZKOM
• Ako vložiť obrázok do HTML, základný HTML tag img a jeho vlastnosti
• Základné pravidlá používania obrázkov na web stránke v skratke
• Možné formáty obrázkov vkladaných do HTML (jpg, png, gif, svg), optimalizovanie obrázkov (tinypng)
• Zmena šírky / výšky obrázka vo vlastnosti tagu img, deformovanie obrázka vs. zachovanie pomeru strán
   
• HTML5 – S PRÁCA TABUĽKOU
• Základný zápis tabuľky v HTML
• Tabuľka so záhlavím, základné HTML vlastnosti tabuľky
• Novší HTML5 zápis tabuľky: thead, tbody, tfoot, caption
   
• HTML5 – FORMULÁR, ZÁKLADNÉ PRVKY
• Základná štruktúra/zápis pre formulár
• Formulárové prvky: input, checkbox, selectbox, radiobutton
• Dôležitá vlastnosť „name“ pri formulárových prvkoch
   
• CSS3 – ÚVOD, ZÁPIS A PRIPOJENIE CSS SÚBORU
• Čo je CSS?
• Základné CSS vlastnosti
• Zápis štýlu do HTML prvku
• Pripojenie vlastného CSS súboru do hlavičky HTML
   
• CSS3 – ÚPRAVA VLASTNOSTÍ HTML PRVKOV, ÚPRAVA ZA POMOCI CLASS A ID
• Úprava vlastností základných HTML prvkov ako napr. h1, p, body, ...
• Class a ID, rozdiel medzi nimi, kedy ktorý použiť
• Zmena vlastností pomocou vlastnej class a dedičnosť
• Možnosti zápisu farieb v CSS
   
• CSS3 – ÚPRAVA PÍSMA POMOCOU CSS
• Určenie typu písma pomocou font-family
• Pripojenie vlastného typu písma
• Zmena vlastností písma pomocou CSS (veľkosť, farba, štýl, dekorácie, tieň, ...)
   
• CSS3 – ELEMENTY A POUŽITIE DIV-u
• Základné typy – blokový a inline
• DIV – blokový element ako základný stavebný prvok pre rozdelenie stránky
• Vytvorenie vlastného bloku pomocou DIV a class
• Pevné rozmery blokového elementu, pretekanie textu a jeho úprava overflow
• SPAN – inline základný element, inline-block vlastnosť
   
• WEBSTRÁNKA – VYTVORENIE VLASTNÉHO LAYOUTU
• Určenie základného rozloženia stránky (header, main, footer) a prvkov v nich
• Pozície elementov: relative a absolute
• Prekrytie relatívneho prvku (napr. kocka) druhým absolútnym a ukážka z-index
• Obtekanie elementov: FLOAT, zrušenie obtekania clear
   
• WEBSTRÁNKA – HEADER
• Určenie obsahu hlavičky (logo, menu)
• Vloženie loga ako obrázok, zarovnaný doľava
• Vloženie menu ako zoznamu, upravený pomocou CSS a zarovnaný doprava
   
• WEBSTRÁNKA – MAIN
• Určenie obsahu hlavnej obsahovej časte (ľavá strana – text, užšia pravá strana podmenu, odkazujúca na kotvy v texte)
• Nastavenie CSS pre main
• Štruktúrovanie textu – vloženie nadpisov s kotvami, obrázky
   
• WEBSTRÁNKA – FOOTER
• Určenie obsahu footra (vľavo rok a copyright, vpravo autor stránky)
• Nastavenie CSS
   
• WEBSTRÁNKA – HOMEPAGE
• Vytvorenie úvodnej stránky s pozmeneným layoutom – header a footer sú rovnaké, časť main bude obsahovať jeden veľký reklamný obrázok na celú šírku, pod ním 3 boxy (nadpis, krátky text pod ním a tlačítko ako odkaz na podstránku napr. so službou), pod boxami text na celú šírku
• Nastavenie v CSS
   
• WEBSTRÁNKA – KONTAKT
• Vytvorenie stránky kontaktu (header a footer sú rovnaké, mení sa len main), hore s textom, pod textom vľavo google mapa, vpravo jednoduchý kontaktný formulár
• Nastavenie v CSS
   

Cieľová skupina

IT kurz HTML5 & CSS3 - základy tvorby webov je určený pre začínajúcich programátorov a tvorcov webov a tiež pre všetkých, ktorí chcú vytvárať svoje vlastné statické webové prezentácie v modernom dizajne a porozumieť webovým aplikáciám od ich úplných základov.

POŽADOVANÉ VSTUPNÉ VEDOMOSTI:
Vyžadujú sa znalosti práce s počítačom na užívateľskej úrovní -  vedieť písať, vymazávať a kopírovať, otvárať a ukladať súbory, pohybovať sa v priečinkoch, ovládať prácu s internetovým prehliadačom.

FIREMNÉ IT KURZY v priestoroch vašej spoločnosti:
Preferujete uzatvorený firemný kurz v priestoroch Vašej spoločnosti? 
Kontaktuje nás, radi ho pripravíme a prispôsobíme Vašim predstavám, potrebám a možnostiam - kontaktujte nás pre  bližšie info (ivit.sk) »»» 

Cena kurzu zahŕňa: občerstvenie (káva, čaj, minerálka, keksíky, prípadne ovocie), osvedčenie, ktoré je potvrdením absolvovania počítačového školenia, sadu neriešených príkladov.

Hodnotenie