1 of 31

LENTELĖS

HTML gairės�

2 of 31

Dažnai naudojamas, kompaktiškas, malonus akiai ir lengvai suprantamas informacijos pateikimo būdas yra lentelės.

Lentelei sukurti naudojamos  

<TABLE> ... </TABLE>.

​

Lentelės pavadinimui -

<CAPTION> ...  </CAPTION>.

​

Lentelės turinys rašomas tarp

<TBODY>... </TBODY>

​

​

3 of 31

​

Lentelę sudaro eilutės ir langeliai.

​

​

Eilutėms formuoti  (Table Row)

<TR> ...  </TR>

​

Antraštės eilutės langeliams formuoti (Table Header)

​

<TH> ... </TH>

. Gairės <TH> sukurtuose langeliuose duomenys pateikiami pusjuodžiu šrifto stiliumi ir lygiuojami centre.

​

​

Langeliams formuoti (Table Data)

<TD> ...  </TD>

​

4 of 31

<TABLE>

<CAPTION> Pavadinimas </CAPTION>�<TBODY>

<TR> < !-- stulpelių pavadinimai -->� <TH> Pirmas stulpelis </TH> 

<TH> Antras stulpelis </TH>� </TR>�

<TR> < !-- Pirma eilutė -->� <TD> Duomenys </TD> 

<TD> Duomenys </TD>� </TR>�</TBODY>

</TABLE>�

​

5 of 31

<TABLE>

<CAPTION> Pavadinimas </CAPTION>�<TBODY>

<TR> � <TH> 1 stulpelis </TH> 

<TH> 2 stulpelis </TH>

<TH> 3 stulpelis </TH>�</TR>�

<TR> 

<TD> Duomenys21 </TD> 

<TD> Duomenys22 </TD>

<TD> Duomenys23 </TD>� </TR>

<TR> 

<TD> Duomenys31 </TD> 

<TD> Duomenys32 </TD>

<TD> Duomenys33 </TD>� </TR>

<TR> 

<TD> Duomenys41 </TD> 

<TD> Duomenys42</TD>

<TD> Duomenys43 </TD>� </TR>

�</TBODY>

</TABLE>�

​

6 of 31

Lentelės kraštinių nesimato tada, kai nenurodomas specialus atributas „border“ arba jam priskiriama reikšmė lygi „0“

Duomenų langelyje gali būti tekstas, paveikslėlis, sąrašas, pastraipa, formos, horizontali linija, kitos lentelės ir pan.

Būna atvejų, kai tušti lentelės langeliai yra nerodomi.

​

Norint, kad būtų rodomi ir tušti langeliai, juose reikia įrašyti

&nbsp arba &#160

7 of 31

Align="left|right|center"

horizontalioji šios ląstelės turinio orientacija

​

Valign="top|middle|bottom|baseline"

vertikalioji šios ląstelės turinio orientacija

Gairių <TH> <TR> ir <TD> atributai

Bgcolor="spalvos_kodas"

ląstelės fono spalva.

Width="taškai|procentai"

Nurodo ląstelės plotį taškais arba procentais, lyginant su visos lentelės pločiu.

Dėmesio: Pakeitus vienos ląstelės plotį, keisis atitinkamai viso stulpelio ląstelių plotis.

​

Height="taškai|procentai"

Nurodo ląstelės aukštį.

Dėmesio: Vienos ląstelės auksčio koregavimas lems ir visos eilutės aukštį.

8 of 31

9 of 31

Užduotis Prezidentai.hrml�68 puslapis.

  • Sukurkite tinklalapį. Sąrašą pratęskite įtraukdami visus prezidentus.
  • Lentelės antraštė 24 pt.
  • Naudokite įvairias lentelės formavimo priemones:
  • Antraštės eilutė ir kitos eilutės skirtingų fono spalvų
  • Vardai ir pavardės - 18 pt. paryškinti palinkę spalvoti pasirinktu šriftu.
  • Lygiuotė: nuotrauka – langelio centre; pavardė – dešinė apačia; tekstas – kairė-viršus .
  • Rėmelis spalvotas, 5 pt. storio, atstumai: tarp rėmelių 3 pt., tarp duomenų ir rėmelio 10 pt.
  • Lentelė užima 90% lango pločio langelių aukštis 300 pt.

10 of 31

ARBA užduotis Pinigai.html�69 puslapis.

  • Sukurkite tinklalapį.
  • Sąrašą pratęskite įtraukdami visus naudotus pinigus
  • Lentelės antraštė 24 pt.

Naudokite įvairias lentelės formavimo priemones:

  • Eilutės skirtingų fono spalvų
  • Nominalas, vardai ir pavardės - 18 pt. paryškinti spalvoti pasirinktu šriftu.
  • Lygiuotė atitinka pvz.
  • Rėmelis spalvotas, 5 pt. storio

11 of 31

5* užduotis (papildoma)

Laukininkai.html�72 puslapis.

  • Sukurkite tinklalapį.
  • Naudokite įvairias lentelės formavimo priemones:

12 of 31

Gairių <TH> ir <TD> atributai

naudojami langelių apjungimui

​

Nowrap

Tai reikalavimas neskaidyti teksto ląstelėse į dalis taip, kad lentelė tilptų į peržiūros langą.

Analogišką rezultatą galima pasiekti visą ląstelės turinį "apskliaudžiant" komanda <NOBR>.

​

Colspan="skaičius"

Šis atributas naudojamas nurodyti, kiek stulpelių turi aprėbti konkreti ląstelė.

Paprastai ląstelės plotis yra vienas stulpelis, bet kartais reikalinga, kad ta pati ląstelė būtų kelių stulpelių pročio.

​

Rowspan="skaičius"

Analogiška COLsPAN bet eilučių atžvilgiu: nurodo kiek eilučių aprėbs konkreti ląstelė.

13 of 31

<TABLE border=“1” Align="right" width="70%">� <CAPTION> Antroji lentelė </CAPTION>

<TBODY>

<TR bgcolor="#C0C0C0">

<TH colspan=2> Pirmas stulpelis </TH> � <TH rowspan=2> Antras stulpelis </TH>

</TR>� <TR BGCOLOR="#C0C0C0">

<TH bgcolor="#808080"> Pirma stulpelio dalis </TH> � <TH> Antra stulpelio dalis</TH>

</TR>� <TR bgcolor="#FFFFFF" Align="Center">

<TD>Daug daug daug daug duomenų </TD> � <TD nowrap> Daug daug daug daug duomenų </TD>� <TD Valign="Bottom">Kiti duomenys</TD>

</TR>� <TR valign="Middle"> 

<TD Align="Right" rowspan=2>Duomenys <BR>Antra eilutė</TD> � <TD rowspan=2> Duomenys </TD>

<TD>Pirma eilutė</TD>

</TR>� <TR>

<TD ALIGN="Right">Antra eilutė</TD>

</TR>� </TBODY>

</TABLE>

14 of 31

Užduotis Himnas.html�70 puslapis.

  • Sukurkite tinklalapį.
  • Naudokite įvairias lentelės formavimo priemones:

15 of 31

6 užduotis�72 puslapis.

Papildoma

Herbai.html

  • Sukurkite tinklalapį.
  • Naudokite įvairias lentelės formavimo priemones:

16 of 31

17 of 31

18 of 31

Atributas BORDERCOLORLIGHT nuspalvina kairįjį

ir viršutinį visos lentelės ribas, ir dešinįjį ir apatinį

kiekvienos ląstelės ribas.

 Atributas BORDERCOLORDARK nuspalvina

priešingus atributui BORDERCOLORLIGHT

lentelės rėmelių elementus.

19 of 31

UŽDUOTYS

<TABLE ALIGN="RIGHT" BORDER=1>�<CAPTION> Pirmoji lentelė </CAPTION>

<TBODY>

<TR BGCOLOR="#C0C0C0"> � <TH> Pirmas stulpelis </TH> 

<TH> Antras stulpelis </TH>�</TR>�<TR BGCOLOR="#FFFFFF" ALIGN="Center">� <TD> Duomenys </TD> 

<TD> Duomenys </TD>

</TR>�<TR ALIGN="Middle">

<TD> Duomenys <BR> Antra eilutė</TD> 

<TD> Duomenys </TD>�</TR>�<TBODY>

</TABLE>

20 of 31

Pirmas stulpelis

Antras stulpelis

Pirma stulpelio dalis

Antra stulpelio dalis

Daug daug daug daug duomenų

Daug daug daug daug duomenų

Kiti duomenys

Duomenys �Antra eilutė

Duomenys

Pirma eilutė

Antra eilutė

<TD>, <TH> atributų panaudojimas

  Komanda  

<TABLE BORDER=1 ALIGN="RIGHT" WIDTH="70%">�<TR BGCOLOR="#C0C0C0"><TH COLsPAN=2> Pirmas stulpelis </TH> �<TH ROWsPAN=2> Antras stulpelis </TH></TR>�<TR BGCOLOR="#C0C0C0"><TH BGCOLOR="#808080"> Pirma stulpelio dalis </TH> �<TH> Antra stulpelio dalis</TH></TR>�<TR BGCOLOR="#FFFFFF" ALIGN="Center"><TD>Daug daug daug daug duomenų </TD> �<TD NOWRAP> Daug daug daug daug duomenų </TD>�<TD VALIGN="Bottom">Kiti duomenys</TD></TR>�<TR VALIGN="Middle"> <TD ALIGN="Right" ROWsPAN=2>Duomenys <BR>Antra eilutė</TD> �<TD ROWsPAN=2> Duomenys </TD><TD>Pirma eilutė</TD></TR>�<TR><TD ALIGN="Right">Antra eilutė</TD></TR>�</TABLE>

  Rezultatas  

�

21 of 31

SAITAI�NUORODOS

HTML gairės�

22 of 31

HTML dokumentai išsiskyrė kaip atskira informacijos pateikimo grupė ne todėl, kad taip galima patogiai perduoti tekstą ir vaizdus, bet todėl, kad jie turi nuorodas - aktyvius teksto elementus, kurių pagalba galima pereiti iš vieno dokumento į kitą, nesvarbu, kur tas kitas yra: tame pačiame kompiuteryje ar kitame pasaulio krašte, svarbu, kad jis egzistuoja ir yra teisingai nurodyta jo dislokacijos vieta.

​

Vartotojui tai suteikia galimybę klavišo paspaudimu lengvai keliauti WWW puslapiais.

​

Paprastai nuorodos (hyperlinks) išskiriamos iš teksto spalva ir pabraukimu, todėl būna nesunkiai atpažįstamos viso teksto fone.

23 of 31

Žiniatinklio terminais, nuoroda yra dokumento, patalpinto internete, adresas.

Dokumentas gali būti bet koks:

  • HTML puslapis,
  • tekstinis failas,
  • garsinis failas
  • video failas
  • ir kt.

​

Nuoroda rašoma tarp <A> … </A> žymų:

24 of 31

Norint sukurti nuorodą į kitą dokumentą, reikia naudoti gairę.

​

<A> ... </A>

Jos atributas “href” nurodo dokumento/svetainės adresą.

​

​

<A Href="url">Tekstas ar paveikslėlis, kuris bus rodomas</A>.

​

25 of 31

​

Nuorodą į kitą savo dokumentą, vardu „pvz2.html“

komanda atrodo taip:

�<A Href ="pvz2.html">Antras puslapis</A>

​

​

​

​

Nuoroda į HTML dokumentą, kuris yra WWW serveryje.

​

<A Href="http://www.manualai.lt/"> MANUALAI </A>

ši nuoroda nuves į www.manualai.lt

26 of 31

<BODY> ... </BODY>

Ši komanda turi daugybę atributų ir skirta ne tik išskirti HTML dokumento kūną, kaip atskirą jo struktūros elementą, bet ir nurodyti pagrindines dokumento charakteristikas.

Trumpas atributų aprašymas:

Bgcolor="spalvos kodas|vardas"

- nurodo, kokios spalvos bus viso HTML dokumento fonas.

Text="spalvos kodas|vardas"

- nurodo, kokios spalvos bus tekstas HTML dokumente (jei spalva nebus nurodyta kitaip).

Background="bylos_vardas|nuoroda"

- nurodo, kokia grafinė byla bus naudojama kaip fonas HTML dokumentui. Paprastai tai nedidelis grafinis fragmentas,kartojamas tiek kartų, kol užpildo visą HTML dokumentą.

​

Link="spalvos kodas|vardas"

- nurodo, kokios spalvos bus "naujos" nuorodos: nuorodos, kurios dar nebuvo aplankytos vartotojo (neužfiksuotos naršyklės, kaip lankytos).

​

Vlink="spalvos kodas|vardas"

- nurodo, kokios spalvos bus "senos" nuorodos: nuorodos, kurios jau buvo aplankytos vartotojo (užfiksuotos naršyklės, kaip lankytos).

​

Alink="spalvos kodas|vardas"

- nurodo, kokios spalvos bus "aktyvi" nuoroda, t.y. nuoroda jos pasirinkimo momentu.

​

27 of 31

UŽDUOTYS

1. Asmenys3.html

Bylą „Asmenys.html“ papildykite taip, kad žymių asmenų pavardės būtų nuorodos į tinklalapius susijusius su šiais asmenimis (į biografiją, į kūrybą ir pan.)

2. Pinigai2.html (Prezidentai2.html)

Bylą „Pinigai.html“ arba Prezidentai.html papildykite eilutėmis su nuorodomis į bylas „Faktai.html“ ir „Simbolika.html“ ar kit

​

  • * (Herbai2.html) Bylą „Herbai“ papildykite eilute su nuoroda į daugiau herbų. (žr. pusl. 72)
  • * (Laukininkai2.html) Bylą „Laukininkai.html“ papildykite taip, kad lentelės apačioje esančiame tekste būtų nuoroda.

28 of 31

Nuorodos galimos, ne tik tarp dokumentų, bet ir vieno dokumento ribose.

​

Tam naudojamas papildomas atributas Name="vardas".

Tarkime Jūsų dokumente yra tam tikra vieta, į kurią reikia kreiptis iš kitos to paties dokumento vietos. Tada

  • toje dokumento vietoje, į kurią bus kreipiamasi, reikia įterpti nuorodą atributu, tarp komandos pradžios ir pabaigos žymių galimas bet nebūtinas tekstas.

Taigi, rašoma komanda: �<A Name="vardas"> galimas tekstas arba jo nėra </A>.

  • Toje dokumento vietoje, iš kurios kreipiamasi rašoma nuoroda į reikiamą vietą tokiu būdu: dokumento pavadinimas nerašomas, o vietos vardas nurodomas toks, koks yra apibrėžtas atributu NAME tik su ženklu '#' priekyje: �<A Href="#vardas">Nuoroda į kitą to paties dokumento vietą</A>.

​

Žinoma, tokį konkrečios kažkokio HTML dokumento kreipimosi vietos nurodymą galima naudoti ir kreipiantis iš kito dokumento, tereikia po dokumento vardo parašyti ženklą '#' ir vietos pavadinimą. Pavyzdžiui: �Komanda <A Href="basic.html#A>Pirmasis komandos <A> aprašymas</A>.

29 of 31

​

​

Nuoroda naudojama laiškui siųsti. Naršyklė kreipiasi į ją aptarnaujančią pašto programą ir nurodytu adresu yra siunčiamas laiškas.

Kad ji tinkamai suveiktų reikia turėti instaliuota ir tvarkingai sukonfigūruotą elektroninio pašto programinę įrangą pvz.: Thunderbird ar Ms Outlook.

<A Href="mailto:...">

30 of 31

HTML nuorodos - atributas target

​

nurodo, kaip bus atvertas puslapis, kurio adresas buvo nurodytas href atribute.

Dažniausiai yra naudojama reikšmė _blank, ji nurodo, kad paspaudus nuorodą bus atvertas naujas langas.

31 of 31

http://mokymai.pavb.lt/html_tags.html#tables

http://tinklai.dkd.lt/telekomunikacijos/HTML.htm#_Toc131989773

http://www.mch.mii.lt/vpumedziaga/html/table.html