Till lektionerna

Bildhantering

Bilder i ett stycke

Detta är en text innan bilderna.
Då man lägger bilder i ett nytt stycke kan man använda de olika stil-attribut för ett stycke för att placera bilderna. Här är bilden centrerad med en liten marginal över och under bilden. Med färgattributet bestämmer man färgen på bildramen.
Bild-koden (img) har fyra attribut: src (bildlänk), border (ram), align (justering) och height (höjd) eller width (bredd.) Om man använder bara en av de två sista attributen behåller bilden sin propotion. Här har bliderna angetts med samma höjd. Den vertikal justeringen har fyra funktioner. Se koder och stilar.ods. Här används attributet center (centrum.)

   

Texten efter bildeerna är också i ett nytt stycke.


Bilder i tabellrutor

Tabell-koden (table) kan ta många attribut och funktioner liksom stycke-koden. Se filen koder och stilar.ods.
Vidare har den underkoder. Först kommer th-koden (table heading) som skapar en tabellrubrik. Sen kommer tr-koden (tabellrader) som lägger till tabellrader/rutor under varandra. Vidare td-koden (tabelldata) som lägger tabellrutor brevid varandra. Sist kommer caption-koden (bildtext.)

Här kommer ett tabellexempel där alla underkoderna finns med. Det går att lägga till attribut och funtioner till alla underkoderna.

Först skriver man några grundattribut för tabellen. Notera att tabellramen inte är nödvändig.

Th-koden skapar en tabellrubrik. I tabellrubriken är mitten och fet text standard. Den kan ta många attribut och funktioner. Se filen koder och stilar.ods.
Denna text är placerad över bilden i en egen ruta.

Tr-koden (table row) startar en ny tabellrad. Den jobbar tillsammams med td-koden (table data.) Både tr-koden och td-koden kan också ta många attribut och funktioner. Se filen koder och stilar.ods.

Bilden och texten är i samma ruta med bara nyrad-koden (br) emellan.
Denna text är placerad under bilden i en egen ruta i botten till höger.
Caption (bildtext) har ett attribut med två funktioner, bottom (under/nere) och top (över/uppe). Top är standarden.


Fler exempel på bilder i tabellrutor

Med koden colspan (columnutbredning) kan tabellrubriken sträcka sig över två eller flera rutor.
Här läggs texten till höger om bilden
Eller så kan man ha en ruta som sträcker sig över två eller flera rutor.



Här är texten placerad till vänster om bilderna.
Med koden rowspan (radutbredning) kan en text vara till för flera rutor.
Caption (bildtext) lägger sig utomatiskt under hela tabellen.



Denna text följer tabellrutans attribut.

Koden för bilden är satt i ett eget stycke. Så denna text ovanför bilden, följer bildens stycke-attribut.

Denna text under bilden följer också bildens stycke-attribut.



Bilden är placerad till höger om texten och texten till vänster om bilden.

Med bara en tabellrad tycks inte tr-koden behövas.


Länk i en bild

Bilden är en länk, så klicka på bilden och den länkar till en annan bild i ett nytt fönster.


Bildram


   


Rammöjligheterna är många.

* * *