Ülesanne 04 - Pildid

4.1 Pilt (ilma täpsustajateta)

See pilt kuvatakse vaikimisi suuruse ja paigutusega.

4.2 Tekst pildi kõrval (pilt vasakul)

See on pikem tekstilõik, mis demonstreerib, kuidas tekst paigutub pildi kõrvale, kui pildil on määratud 'float: left'. Tekst voolab ümber pildi paremalt poolt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molecularr'e, eu'r'a's 'f'r'i'n'g'i'l'l'a 'v'i't'a'e. Praesent interdum, 'n'e'q'u'e 'i'd 'p'l'a'c'e'r'a't 'g'r'a'v'i'd'a, 'n'i's'i 'd'o'l'o'r 'e'r'o's 's'u's'c'i'p'i't, 'v'i't'a'e 's'o'l'l'i'c'i't'u'd'i'n 'e'n'i'm 'e'r'o's 'e'g'e't 'l'i'b'e'r'o. See tekst on piisavalt pikk, et see jätkuks ka pildi all.

4.3 Tekst pildi kõrval (pilt paremal)

See on teine pikem tekstilõik. Nüüd on pildil määratud 'float: right', seega paigutub see paremale poole ja tekst voolab ümber pildi vasakult. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molecularr'e, eu'r'a's 'f'r'i'n'g'i'l'l'a 'v'i't'a'e. Praesent interdum, 'n'e'q'u'e 'i'd 'p'l'a'c'e'r'a't 'g'r'a'v'i'd'a, 'n'i's'i 'd'o'l'o'r 'e'r'o's 's'u's'c'i'p'i't, 'v'i't'a'e 's'o'l'l'i'c'i't'u'd'i'n 'e'n'i'm 'e'r'o's 'e'g'e't 'l'i'b'e'r'o. See tekst on samuti piisavalt pikk, et jätkuda ka pildi all.

Ülesanne 05 - Tabelid

5.1 Lihtne tabel (Tunniplaan)

5.2 Tekst ja pilt tabeli abil

Loodusfotograaf See on näide, kuidas paigutada pilt ja tekst kõrvuti tabeli lahtritesse. Pilt on vasakus lahtris ja kirjeldav tekst on paremas lahtris.

5.3 Teksti paigutamine veergudesse (Raamideta tabel)

5.4 Lahtrite ühendamine (colspan ja rowspan)

See tabel näitab töötajate oskuseid, kasutades nii colspan (pealkirja jaoks) kui ka rowspan (sama nime kordamise vältimiseks).