HTML ülesanded: 04 (pildid) + 05 (tabelid)

Ülesanne 04 — Pildid

4.1 Pilt (ilma täpsustajateta)

All on pilt lihtsalt URL-iga (ilma stiilideta), et näha vaikimisi käitumist.

Pildil on kass

4.2 Tekst pildi kõrval (pilt vasakul)

Kass vasakul

Siin on pikem tekst, mis jookseb pildi kõrvale paremale ning jätkub ka pildi alla. Eesmärk on näha, kuidas float: left ja margin tekitavad pildi ümber ruumi. Kui tekstist jääb väheks, lisa alati paar lauset juurde, et kujuneks selge “pilt + tekst” paigutus.

Teine lõik aitab kontrollida, et tekst jätkub vähemalt ühe rea pildi alt edasi. Nii on joondus hästi näha.

4.3 Tekst pildi kõrval (pilt paremal)

Kass paremal

Selles näites on pilt paremal ja tekst vasakul. Kasutan float: right ning vasakut marginaali, et teksti ja pildi vahele jääks mugav vahe.

Kui hiirega pilti uurida, on näha, et pilt on eraldi äärisega ning ümarate nurkadega — need on samuti reasisese CSS-i kaudu.

Ülesanne 05 — Tabelid

5.1 Lihtne tabel — nädala tunniplaan

Tunniplaan (näidis)
Esmaspäev Teisipäev Kolmapäev Neljapäev Reede Laupäev
08:15 Matemaatika 08:15 Inglise keel 08:15 Veebiarendus 08:15 Keemia 08:15 Infoturve 09:00 Seminar
10:00 Kehaline 10:00 Ajalugu 10:00 Programmeerimine 10:00 Praktika 10:00 Projekt —

5.2 Tekst ja pilt tabeli abil (reasisene CSS)

Aivo Pilt ja tekst ühes tabelireas

5.3 Teksti paigutamine veergudesse (raamideta tabel)

Kolme veeruga “ajalehe” tekstiplokk
Mõnikord on mugav jagada tekst tabeli abil veergudesse, näiteks kui tahad lihtsat “ajalehe” tunnetust. Siin veerus on algus, kus tutvustan mõtet. Teises veerus jätkub sama lugu. Kuna tabelil pole ääri, ei tõmba ta tähelepanu enda peale. Eesmärk on tekstid ühtlaseks jaotada. Kolmas veerg lõpetab. Kui tekst on lühike, saad vajadusel lisada mõne lause, et veerud täituksid paremini.

5.4 Lahtrite ühendamine (colspan + rowspan, reasisene CSS)

Väike ostunimekiri
5. mai Sepik 2 tk
Või 1 pk
Banaan 6 tk
Kokku:   ~12 €