[uppkast] Myndir: <img />

Skrifa 19. gst 2003, kl. 11:21

Uppkast a kafla leiarvsi um notkun algengustu HTML markanna fyrir venjulegt flk sem skrifar vefinn. essum kafla er fjalla um notkun mynda veftexta.

Ath: Sj einnig kynninguna essu verkefni.

Hlshyrnan  botni Siglufjarar egar myndskreyta skal texta kemur <img /> marki a gum notum. Marki tekur tvr stillingar, src="" og alt="", en bar stillingarnar eru nausynlegar. Lkt og er me <br /> marki, er <img /> stakt mark sem ir a </img> er einfaldlega ekki til.

"Source file" stillingin

src="" stillingin tekur vefslina a myndinni sem a birta. Oftast er einfaldast og ruggast er a nota alltaf fulla vefsl (dmi: src="http://mar.anomy.net/files/2003/08/test.jpg") en ef myndin er hst sama vefjni og vefsan sem hn birtist , m sleppa nafn vefjnsins framan af vefslinni (dmi: src="/files/2003/08/test.jpg").

"Alternate text" stillingin

alt="" stillingin tekur stutta lsingu innihaldi myndarinnar (dmi: alt="Hlshyrnan slrku sumarkvldi"), en textinn ntist llum lesendum sem af einhverjum stum sj ekki myndina (t.d. blindum lesendum) og hjlpar leitarvlum a flokka og skrsetja innihald sunnar.

Hr er dmi um HTML kann sem birtir fjallamyndina fremst kaflanum:

<img src="/files/2003/08/test.jpg" alt="Hlshyrnan slrku sumarkvldi" />

Myndir m setja nstum v hvar sem er inn textann sunni, en almennt er best a hafa r eftirfarandi stum:

  • Fremst <p> efnisgrein.
  • milli efnisgreina
  • sr efnisgreinamarki, n annars texta.

Me einfldum skipunum CSS stlblai vefsvisins m svo tilgreina litaan ramma, spssur og ara tti sem vara tlit og framsetningu myndarinnar.

(Ath: til er relt stilling border="" en flki er rlegt a forast hana og nota einfaldar CSS stillingar stainn.)

Myndir sem tilvsanir

Stundum er nausynlegt a vsa strri tgfu af myndinni, ea su me meiri upplsingum um a sem kemur fram myndinni, og kemur tilvsanamarki (<a href="">) a gum notum. a er nota eftirfarandi htt:

<a href="http://pics.mar.anomy.net/2003/06/16/02.drive-by-shooting/dcp_6426.jpg"> <img src="/files/2003/08/test.jpg" alt="Hlshyrnan slrku sumarkvldi" /></a>

Sem birtist svona: (prfi a smella)

Hlshyrnan  slrku sumarkvldi

Venjulega nr tilvsunarmarki utan um venjulegan texta, en arna er myndin notu sta textans.

Hgri- og vinstristilltar myndir

a hvort mynd frist t vinstri ea hgri kant sunnar og texti flir kringum hana, er dmi um framsetningu sem er skilgreind CSS stlblai vefsvisins. Til a virkja slka srhegun myndarinnar er best a nota class="" stillinguna <img /> marki.

Gefum okkur a "left" og "right" su tv mismunandi gildi sem class="" stillingin getur teki, verur kinn fyrir hgri- ea vinstristilltar myndir svona:

  • <img class="left" src="mynd.jpg" alt="lsing" /> (vinstristillt mynd)
  • <img class="right" src="mynd.jpg" alt="lsing" /> (hgristillt mynd)

og CSS stlblasskr sunnar arf a bta eftirfarandi lnum:

img.left {
  float : left;
  margin : 0 .67em .33em 0;
}
img.right {
  float : right;
  margin : 0 0 .33em .67em;
}

...og byrja myndir og texti a fla til hgri og vinstri.


Meira essu lkt: HTML/CSS.


Svr fr lesendum (2)

  1. Tr svarar:

    Hmmm... kennarinn mr segir a textinn um hgri og vinstri stillanir su vibtarupplsingar fyrir forvitna (og eigi ess vegna heima aftast).

    g myndi lka gera meira r myndum sem vsanir, a er raunhfari (praktskari) notkun heldur en a lta myndir fla fram og til baka (fyrir utan hva s flothegun er eli snu vandviranleg).

    Kennslufrilega vri sterkur leikur a birta saman tvr samsvarandi vsanir, ara me texta (smelli hr) og hina me mynd milli a-markanna. annig sst me einfldum htti a etta er alveg sambrileg notkun, nema a myndin kemur sta textans...

    19. gst 2003 kl. 15:39 GMT | #

  2. Mr rlygsson svarar:

    Takk Tr. g er binn a krukka aeins essu me athugasemdirnar nar sem tgangspunkt.

    19. gst 2003 kl. 16:03 GMT | #

essum svarhala hefur veri loka. Krar akkir til eirra sem tku tt umrunni.


 

Flakk um vefsvi



 

Nleg svr fr lesendum

  • Rich (Req.js - javascript lazy-loading and dependency managment made easy)
  • Rich (Req.js - javascript lazy-loading and dependency managment made easy)
  • Rich (Req.js - javascript lazy-loading and dependency managment made easy)
  • Mr (Req.js - javascript lazy-loading and dependency managment made easy)
  • Rich (Req.js - javascript lazy-loading and dependency managment made easy)
  • Mr (Req.js - javascript lazy-loading and dependency managment made easy)
  • Dinesh (Req.js - javascript lazy-loading and dependency managment made easy)
  • Mr (Taubleyjur ntmanum - ltill leiarvsir handa hrddri j)
  • Ada (Taubleyjur ntmanum - ltill leiarvsir handa hrddri j)
  • notandi (Taubleyjur ntmanum - ltill leiarvsir handa hrddri j)
  • Geir (Lausnin efnahagsvandanum)
  • Jenn (Lausnin efnahagsvandanum)
  • li Jens (Lausnin efnahagsvandanum)
  • Mr (Lausnin efnahagsvandanum)
  • Kjartan S (Lausnin efnahagsvandanum)

 

 

Yfirlit yfir etta skjal

(Atriin listanum vsa kvena kafla ofar sunni.)