03. HTML-skolen

by Dorthea

Det er en liten stund siden jeg har lekt “HTML-skole” her på bloggen. Begynte å tenke at det kanskje var på tide igjen. Så here it goes. Bilder har veldig mye å si på en blogg eller webside. Veldig mye er til og med å underdrive.

Veldig mange av bloggene nå til dags har en auto-funksjon som generer bildelinken ferdig for deg. Men jeg liker det old-school. Mange flere muligheter, og mye mer morsomt. En helt simpel bildelink er ikke vanskeligere enn <img src=”LINKEN_TIL_BILDET”>.

Men, en simpel bildelink kan til dels være kjedelig. Derfor skal vi heller lære litt mer morsomme ting.

Du kan bestemme størrelsen på bildet ved å bruke height og width. Det aller beste er å ikke resize bildet alt for mye. Det mister nemlig litt av kvaliteten ved å resize i html. Men mindre endringer fungerer kjempe fint.
PAUSE
F.eks: <img src=”BILDET” width=”175″ height=”128″>
Du kan legge til en liten kant rundt bildet ved hjelp av border. Du kan også velge farge, tykkelse og type bord. På denne har jeg brukt svart (#000000), 5 i størrelse (5px) og solid kant (solid).
PAUSE
F.eks: <img src=”BILDET” style=”border: 5px solid #000000;”>
Du kan gjøre et bilde mer transperant. Dette kan være veldig fint, dersom det er noen bilder du ikke ønsker skal ta hele oppmerksomheten. Du endrer gjennomsiktigheten med å bytte ut opacity=50 med annet tall. Viktig å endre alle tre opacity’ene, da disse er for de forskjellige nettleserne.
PAUSE
F.eks: <img src=”BILDET” style=”filter: alpha(opacity=50); -khtml-opacity: 0.5; opacity: 0.5;>

Du kan også velge hvor bildet skal være på siden ved hjelp av align. For eksempel hvis du vil ha bildet på høyre side ved siden av teksten skriver du: <img src=”BILDET” align=”right”> Da vil teksten “wrappe” seg rundt bildet. Du kan også legge til ekstra space mellom teksten og bildet ved å skrive: <img src=”BILDET” align=”right” hspace=”x”> X kan erstattes med størrelsen du ønsker på avstanden. På bildet til høyre er det brukt 10. Hvis du ønsker avstand vertikalt, i stedenfor horisentalt kan du skrive vspace i steden for hspace. Dersom du ønsker bilder på venstre side i steden, skriver du align=”left”.

En annen ting du kan gjøre er å ha en forklarende tekst som kommer frem når du tar musa over bildet. Da skriver du <img src=”BILDET” title=”TEKSTEN”> og da skal det bli slik som bildet over her.


That’s about it ♥
Var dette noe nyttig? Hva vil du lære om neste gang?