KodoKelias

HTML Pamokos

HTML Pagrindai

Kas yra HTML?

HTML yra žymėjimo kalba, kuri leidžia aprašyti tinklalapio struktūrą ir turinį. Jis naudojamas naršyklėse (pvz., Chrome, Firefox) tinklalapių atvaizdavimui.

HTML Dokumento Struktūra

Kiekvienas HTML dokumentas turi pagrindinę struktūrą:

Paaiškinimas:

  • <!DOCTYPE html> – Nurodo, kad dokumentas yra HTML5.
  • <html lang="lt"> – Šakninė HTML žyma, nurodanti, kad turinys yra lietuvių kalba.
  • <head> – Skiltis, kurioje apibrėžiami metaduomenys, tokie kaip pavadinimas ir simbolių rinkinys.
  • <meta charset="UTF-8"> – Nustato simbolių koduotę.
  • <title> – Nustato tinklalapio pavadinimą, rodoma naršyklės skirtuke.
  • <body> – Skiltis, kurioje yra matomas tinklalapio turinys.

Pagrindiniai HTML Elementai

Antraštės

HTML turi šešias antraščių lygmenis nuo <h1> iki <h6>, kur <h1> yra svarbiausia.

Pastraipos

Pastraipos yra apibrėžiamos <p> žyma.

Nuorodos

Nuorodos (hipersaitai) sukuriamos naudojant <a> žymą su href atributu.

Vaizdai

Vaizdai įterpiami naudojant <img> žymą su src ir alt atributais.

Sąrašai

Tvarkyti sąrašai (numeruoti)

Tvarkyti netvarkyti sąrašai (bulleted)

Lentelės

Lentelės sukuriamos naudojant <table>, <tr>, <th> ir <td> žymas.

  • <table> – sukuria lentelę.
  • <tr> – eilutė.
  • <th> – stulpelių pavadinimai.
  • <td> – lentelės duomenys.

Formos

Formos leidžia vartotojams įvesti informaciją.

  • <form>:
    • action – kur siunčiami formos duomenys.
    • method – kaip duomenys siunčiami (pvz., post arba get).
  • <input>:
    • type – nurodo įvesties laukelio tipą (pvz., text, email).
    • placeholder – tekstas, rodomas laukelyje prieš įvedant duomenis.

Semantinis HTML

Semantiniai elementai padeda naršyklėms ir paieškos sistemoms geriau suprasti turinio struktūrą.

Pavyzdys:

  • <header> – antraštės sekcija.
  • <nav> – navigacijos elementas.
  • <main> – pagrindinis turinys.
  • <section> – atskiros turinio dalys.
  • <footer> – poraštės sekcija.

HTML Lentelės – Detaliau

Papildomi Lentelės Elementai

1. <thead>, <tbody>, <tfoot>

Naudojami lentelės turinio suskirstymui į dalis:

  • <thead> – Antraščių eilutė.
  • <tbody> – Lentelės pagrindinis turinys.
  • <tfoot> – Pabaigos eilutė (pvz., išvados, sumos).

Pavyzdys:

Paaiškinimas:

  • <thead> yra lentelės viršus su stulpelių pavadinimais.
  • <tbody> yra pagrindinė lentelės dalis.
  • <tfoot> yra lentelės pabaiga (pvz., suma, pastabos).

2. Langelių sujungimas: colspan ir rowspan

  • colspan – sujungia kelis stulpelius.
  • rowspan – sujungia kelias eilutes.

Paaiškinimas:

  • rowspan="2" – “Pienas” langelis užima dvi eilutes.
  • colspan="2" – “Obuoliai” langelis apima du stulpelius.

HTML Formos – Detaliau

Pagrindiniai Formos Elementai

1. Teksto laukeliai (<input type="text">)

Pavyzdys:

  • for – nurodo, su kuriuo laukeliu susijusi etiketė.
  • placeholder – tekstas, rodomas laukelyje prieš įvedant duomenis.
  • name – nurodo laukelio pavadinimą, naudojamą duomenų siuntimui.

2. Slaptažodžio laukelis (<input type="password">)

Pavyzdys:

Slaptažodžio laukelyje įvesti simboliai rodomi kaip taškai arba žvaigždutės.

3. Mygtukai (<input type="submit">, <button>)

Pavyzdys:

  • type="submit" – siunčia formos duomenis.
  • type="button" – atlieka veiksmą, bet nesiunčia duomenų.

4. El. pašto laukelis (<input type="email">)

Pavyzdys:

Šis laukelis automatiškai patikrina, ar įvesta el. pašto adreso formatas yra teisingas.

5. Radijo mygtukai (<input type="radio">)

Pavyzdys:

  • name – tas pats visiems tos grupės radijo mygtukams, kad būtų galima pasirinkti tik vieną variantą.

6. Žymėjimo laukeliai (<input type="checkbox">)

Pavyzdys:

Vartotojas gali pasirinkti kelis variantus.

7. Išskleidžiamasis meniu (<select>)

Pavyzdys:

  • <option> – kiekvienas pasirinkimo variantas.

Formos Patvirtinimo (Validation) Funkcijos

Formų laukelius galima patikrinti naudojant HTML atributus:

  1. required – nurodo, kad laukelis turi būti užpildytas.

2. min ir max – skaičių laukelio ribos.

3. maxlength – riboja simbolių skaičių.

HTML5 Multimedija

HTML5 Multimedijos Elementai

1. Audio – Garso Įrašai

Garso įrašai pateikiami naudojant <audio> elementą.

Pavyzdys:

controls – prideda garso grotuvo valdiklius (play, pause, volume).

<source> – nurodo garso failo šaltinį ir formatą.

Audio Atributai:

  • autoplay – automatiškai paleidžia garso įrašą.
  • loop – kartoja įrašą be sustojimo.
  • muted – išjungia garsą paleidžiant.
  • preload – nurodo, kaip naršyklė turi iš anksto užkrauti įrašą:
    • none – nieko neužkrauna.
    • metadata – užkrauna tik informaciją apie įrašą.
    • auto – bando užkrauti visą įrašą.

Pavyzdys su atributais:

2. Video – Vaizdo Įrašai

Vaizdo įrašai pateikiami naudojant <video> elementą.

Pavyzdys:

controls – prideda valdiklius (play, pause, fullscreen).

width ir height – nustato vaizdo įrašo dydį.

Video Atributai:

  • autoplay – automatiškai paleidžia vaizdo įrašą.
  • loop – kartoja vaizdo įrašą.
  • muted – išjungia garsą paleidžiant.
  • poster – nurodo vaizdą, kuris rodomas, kol video nepradėtas leisti.

Pavyzdys su atributais: