HTML nuorodos ir sąrašai – vieni pirmųjų ir svarbiausių elementų, kuriais remiasi bet kuri paprastesnė ar sudėtingesnė interneto svetainė. Šio praktinio gido tikslas – parodyti, kaip suprasti pagrindinių HTML žymų paskirtį, išvengti dažniausiai pasitaikančių sintaksės klaidų ir įgauti pasitikėjimo mokantis savarankiškai. Aptarsime ir paveikslėlių naudojimą, nes jie dažnai jungiasi su nuorodomis ir sąrašais tiek mokyklinėse, tiek realiose užduotyse.

HTML nuorodos ir sąrašai: kas tai ir kam reikalinga?

Nuorodos (<a>) leidžia pereiti iš vienos svetainės ar puslapio į kitą – jos būtinos navigacijai, išoriniams ar vidiniams resursams. Sąrašai (<ul>, <ol>, <li>) struktūruoja informaciją, padeda sugrupuoti duomenis, išvardyti veiksmus ar kriterijus. Paveikslėliai (<img>) – vaizdinei informacijai, tačiau dažnai apjungia nuorodų ar sąrašų turinį (pvz., produktų galerijose).

Kaip tinkamai kurti HTML nuorodas?

Kurdami nuorodas HTML kode, naudokite <a> žymą su href atributu:

  • Pavyzdys: <a href="https://progmis.lt">PROGMIS programavimo mokymo platforma</a>
  • Tekstas tarp žymų matomas svetainės lankytojui, nuoroda veda į nurodytą adresą.
  • Galimos kelios rūšys: vidinės (į tą pačią svetainę), išorinės (į kitą), nuorodos į failus.

Kurdami nuorodas kritiškai įvertinkite, ar nurodytas adresas veikia, ar tekstas tiksliai apibūdina tai, kas bus rodoma paspaudus. Venkite bereikalingo teksto „spausti čia“.

Dažniausios nuorodų klaidos ir kaip jų išvengti

Mokiniai dažnai apsirinka:

  • Palieka tuščią href="", todėl nuoroda niekur neveda.
  • Netiksliai nurodo adresą (pvz., praleistas https:// ar papildomos raidės).
  • Pamiršta uždaryti <a> žymą – nutraukia visą teksto ar sąrašo struktūrą.
  • Anchor tekstui nenaudoja aprašomo, informatyvaus žodžio – neaišku, kur veda nuoroda.

Norint išvengti šių klaidų, rekomenduojame patikrinti savo kodą prieš pateikimą ir naudoti aiškius, aprašomuosius anchor tekstus. PROGMIS dažniausiai užduodami klausimai skiltyje rasi papildomų atsakymų apie HTML nuorodų kūrimą ir testavimą.

HTML sąrašai: pavyzdžiai ir praktinės situacijos

HTML sąrašai skirstomi į:

  • Nenumeruotą sąrašą (<ul>): elementai pateikiami su taškeliais. Naudojamas, kai tvarka nėra svarbi.
  • Numeruotą sąrašą (<ol>): elementai sunumeruoti – puikiai tinka žingsniams ar prioritetams.

Kiekvienas sąrašo punktas rašomas naudojant <li> žymą:

<ul> <li>Pirmas punktas</li> <li>Antras punktas</li> </ul>

Praktinė situacija: projekto užduočių planas, prekių sąrašas ar HTML meniu struktūra. Sąrašai dažnai naudojami kuriant navigacijas (<nav> su <ul> viduje).

Klaidos darant HTML sąrašus

Iš praktikos ir Tipinės mokinių HTML klaidos analizės matyti, kad dažniausiai pasitaiko šie dalykai:

  • Pamirštama uždaryti ar atidaryti <ul>, <ol> ar <li> žymas.
  • Sąrašai rašomi netinkamai – pvz., <li> dedami ne sąrašo viduje, o laisvai.
  • Painiojami <ul> ir <ol> pagal užduotį ar perteikiamą informaciją.

Atminkite, kad viską rašome tvarkingai, švariai, struktūriškai. Pirma atidarome visą sąrašą (<ul> ar <ol>), jame – <li>, o po to tik uždarome viską reikiama tvarka.

Paveikslėliai HTML struktūroje

Norint HTML puslapyje įterpti paveikslėlį, naudojama <img> žyma su src (adresas/kelias iki failo) ir alt (aprašas) atributais. Pavyzdys:

<img src="mano_paveikslelis.webp" alt="Produkto nuotrauka">

Dažniausiai pasitaikančios klaidos:

  • Netiksliai nurodytas failo kelias (pavadinimas ar adresas su klaida).
  • Trūksta alt atributo – ypač svarbu prieinamumui (jei paveikslėlio nemato, skaito aprašymą!).
  • Bandoma naudoti <img> be uždarymo (HTML5 leidžia naudoti be / gale, bet visada geriau būti nuosekliems).

Paveikslėlius dažnai deriname su nuorodomis: <a href="..."><img src="..." alt="..."></a>, - tai leidžia vaizdo paspaudimu vesti į kitą puslapį ar resursą.

Naudingos platformos ir praktika

Norint praktikuotis kuriant HTML nuorodas, sąrašus ir paveikslėlius bei gauti automatinį atgalinį ryšį, verta išbandyti PROGMIS programavimo mokymo platforma. Joje rasi aiškias užduotis, teoriją ir automatinį sprendimų testavimą – taip greičiau pastebėsi, jei padarei dažną klaidą. Užduočių sąvadas pritaikytas tiek 8–12 klasių mokiniams, tiek ir informatikos mokytojams, norintiems integruoti šias temas į pamokas.

Detalesnių patarimų ir tipinių HTML darbų vertinimo kriterijų rasi HTML darbų vertinimo mokykloje apžvalgoje. Tai padės atsakyti, ko tikisi mokytojai ir kaip tinkamai pasirengti HTML atsiskaitymams.

Dažniausiai užduodami klausimai apie HTML elementus

  • Kiek nuorodų, sąrašų ar paveikslėlių gali būti viename puslapyje? Techninių ribų praktiškai nėra, svarbu – logiška struktūra ir tvarka.
  • Ar galima sąrašo punkte dėti nuorodą? Taip! <li><a href="...">Aprašymas</a></li>.
  • Ką daryti, jei paveikslėlis nerodomas? Patikrink failo pavadinimą ir kelią, ar nėra klaidos src reikšmėje, ar failas įkeltas į tinkamą aplanką.
  • Ar reikia būtinai naudoti alt? Taip – tai ir prieinamumui, ir techniniam svetainės kokybės vertinimui svarbu.

Pilnesnius, patikrintus atsakymus į mokinių ir mokytojų klausimus gali rasti PROGMIS dažniausiai užduodami klausimai rubrikoje.