1. tími

Triðja uppgáva

Her skalt tú seta mynd inn á tína heimasíðu.

Uppgáva 3 · HTML og CSS

HTML við mynd og bakgrund

Í hesi uppgávuni skalt tú gera eina einfalda HTML-síðu við yvirskrift, teksti, mynd og bakgrundsliti. Tú skalt eisini kanna, um kotan er bygd rætt upp.

Tíð: 15–20 minuttirHTMLCSSMynd og alt-tekstur

Endamál

At fáa royndir við at leggja meira innihald inn í eina HTML-síðu.
At læra at brúka eina yvirskrift, ein tekst og eina mynd í HTML.
At síggja, hvussu CSS kann brúkast til at broyta bakgrund og útsjónd.
At venja seg við at kanna, um kotan er bygd rætt upp.

Uppgáva

Ger eina einfalda HTML-síðu við yvirskrift, teksti, mynd og bakgrundsliti.

Inni í ritlinum skalt tú gera hetta:

Byrja við vanliga HTML-bygnaðinum: <!DOCTYPE html>, <html> og <body>.
Legg eina <h1>-yvirskrift inn í <body>.
Legg ein stuttan tekst inn við <p>.
Legg eina mynd inn við <img>.
Gev myndini ein alt-tekst, sum sigur, hvat myndin vísir.
Broyt bakgrundslitin á síðuni við CSS.
Kanna úrslitið í kaganum.

Myndir at brúka

Trýst á eina mynd fyri at kopiera myndaleinkjuna. Leinkjan kann setast inn í src á einum <img>-elementi.

Myndaleinkjan er kopierað.

Ritil og úrslit

Skriva kotuna í ritilin, trýst á Kanna svarið, og hygg síðan eftir, um síðan hevur yvirskrift, tekst, mynd og bakgrundslit.

Ritil

1. Bíðar eftir svari.

2. Bíðar eftir svari.

3. Bíðar eftir svari.

4. Bíðar eftir svari.

5. Bíðar eftir svari.

6. Bíðar eftir svari.

Svarið verður goymt í kaganum á hesari eindini.

Úrslit

Dømi um innihald

Yvirskrift

Mín fyrsta síða við mynd

Tekstur

Hetta er ein lítil HTML-síða, sum eg havi skrivað sjálv/ur.

Mynd

Brúka eina av myndaleinkjunum á síðuni.

Prei til næmingarnar

Ein mynd verður løgd inn við einum tómunum HTML-elementi: <img>.
Bakgrundslitur verður ikki skrivaður í vanligan tekst, men í CSS.
Um myndin ikki sæst, kanna so, um src og alt eru skrivað rætt.

Til læraranPrei til undirvísingina

Hetta er eitt gott næsta stig eftir fyrstu HTML-uppgávuna, tí næmingarnir arbeiða víðari við sama bygnaði, men leggja fleiri element afturat.

Gev næmingunum eina trygga myndaleinkju at brúka, so tey ikki skulu leita á netinum.

Tosið við næmingarnar um, hví alt-tekstur er týdningarmikil.

Minnið tey á, at CSS kann standa inni í einum <style>-elementi í <head>.

OrðabókUppgáva 3 · HTML við mynd og bakgrund

Henda orðabókin hjálpir tær við Uppgávu 3. Tú skalt gera eina síðu við yvirskrift, teksti, mynd og bakgrundsliti.

<body>: Her stendur tað, sum skal síggjast á heimasíðuni.
<h1>: Høvuðsyvirskriftin á síðuni. Dømi: <h1>Mín fyrsta síða við mynd</h1>
<p>: Eitt tekstbrot. Dømi: <p>Hetta er ein lítil HTML-síða.</p>
<img>: Verður brúkt til at vísa eina mynd. <img> hevur vanliga einki endamerki.
src: Sigur, hvar myndin liggur. Dømi: src="mynd.jpg"
alt: Ein stuttur tekstur, sum sigur, hvat myndin vísir. Dømi: alt="Ein mynd av einum fjalli"
<style>: Her kanst tú skriva CSS, sum broytir útsjóndina á síðuni.
background-color: Broytir bakgrundslitin á síðuni. Dømi: background-color: lightblue;

Dømi um mynd:<img src="myndaleinkja-her" alt="Ein stutt frágreiðing av myndini">

Dømi um bakgrundslit:

<style>
  body {
    background-color: lightblue;
  }
</style>

Minst til: Um myndin ikki sæst, kanna so src. Um bakgrundsliturin ikki broytist, kanna so <style>, kolon : og semikolon ;.

1. tími · HTMLSpurningur 1 av 12

Spurningur kemur her

Far aftur til byrjan