Til læraran
Grundleggjandi HTML - 1. tími
Endamál
Næmingarnir skulu:
- Skilja strukturin í HTML.
- Kenna grundleggjandi tags í einari HTML-kotu.
- Skriva og royna kotur í amboðnum “Kanna kotuna”.
Amboð
Kanna kotuna
✔️ Tey kunnu skriva/seta inn HTML-kotu - og síggja úrslitið við at trýsta á “Vís kotuna”.
| Tíð | Virksemi |
|---|---|
| 0–5 min | Innleiðing & væntanir |
• At tosa um: “Hvat halda tit, ein heimasíða er – og hava tit nakrantíð hoyrt um HTML?”
• Vís næmingunum, at tað ber til at kanna kotu á heimasíðum, við at høgraklikkja og velja "Vis kildetekst” (View Source)” Um tit gera tað við hesa síðuna, tit eru á, so síggja tit, at Snar er gjørt við Open Source skipanini Typo3. Hetta er eitt sonevnt CMS (Content Management System). Tað kann kanska samanberast við eitt Excel ark, har kota verður løgd inn í teigarnar.
• Hyggið at kotuni. Hvat síggja tit?
– Tosið um: DOCTYPE og html-tags: lang, head, body, p, br, o.a. Duga tey kanska at gita hvat lang="fo" merkir?
– Met um hvat tey duga: Hvørja kotu ella hvørji tags kenna tey frammanundan?
• Tit kunnu royna at finna trøllið høgrumegin í kotuni. Tað er gjørt við ChatGPT, so tað kunnu tit leita eftir í kotuni. Tit síggja eisini Nær ChatGPT gjørdi myndina. (Um tey einki kenna til kotur, so er kanska best at leypa hetta um - og fara beinleiðis til uppgávuna)• Uppgáva: HTML fortelur kaganum (t.d. Edge, Chrome ella Safari) hvussu teksturin skal síggja út.
| 5–15 min | Vit kanna eina HTML-beinagrind við amboðnum “Kanna kotuna”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mín Fyrsta Síða</title>
</head>
<body>
<!-- Innihaldið kemur her -->
</body>
</html>
Námingarnir skriva kotuna av inni á amboð-síðuni. So trýsta tey á vís kotuna - og uppliva beinleiðis rendering í verki.
| 15–30 min | Praktiskt virksemi 1: Yvirskriftir (h) og vanligur tekstur (p)
– Í Kanna kotuna: royna
<h1>Hej, heimur!</h1>og<p>Hetta er mín fyrsti paragrafur.</p>
– Saman tekna, hví<h1>er størri enn<p>og hvat<meta charset>ger.
| 30–45 min | Hands-on 2: Links, myndir og listar
– Í sama ambæði skrive:
<a href="https://dømi.fo">Vit síggja hetta dømi</a>
<img src="https://via.placeholder.com/150" alt="Dømi">
<ul>
<li>Liður 1</li>
<li>Liður 2</li>
</ul>
– Spyr: “Hví er altíð alt-text á myndum?” og “Hvat hendir, um src er skeivt?”
| 45–55 min | Mini-praxis-challenge
Námingarnir skulu í Kanna kotuna:
- Búgva eina 'bio-side' við síni egnu heading, paragrafi, eina mynd og eitt lista.
- Síggja og diskuter sítt úrslit við undirvísara.
| 55–60 min | Recap & heimauppgáva
– Spyr: “Hvat var mest spennandi?” og “Hvat er enn spurningar um HTML?”
– Heimauppgáva: víðka bio-síðuna við eitt annað heading<h2>og eitt ekstra paragraf.
HTML tags – dømi
<html>
<head>
<title></title>
</head>
<body>
<h1> … <h6>
<p>
<a href="URL"></a>
<img src="URL" alt="tekst"/>
<ul></ul>
<ol></ol>
<li>
<div></div>
<span></span>
<br/>
<hr/>
<strong></strong>
<em></em>
</body>
</html>
- Spurning: Hvat ger <!DOCTYPE html>?
- Svar: Hon sigur browsers-inum, at hetta er ein HTML5-síða.
- Spurning: Hví skal <!DOCTYPE html> standa í fyrsta linju?
- Svar: So browseri byrjar korrekta HTML5-tolking beinanvegin.
- Spurning: Hvat merkir lang="fo" í <html>?
- Svar: Tað er landakóði fyri føroyskt – hjálpir skermlesarum og leititólum at vita, at síðanin er á føroyskum.
- Spurning: Hvat leggur man í <head> móti <body>?
- <head>: “innanhýsis” upplýsingar (metadata, t.d. <meta>, <title>, style- og script-links)
<body>: alt tað, tú sum brúkari síggja (tekst, myndir, knappir o.s.fr.) - Spurning: Hvussu er munurin á <br> og <p>?
- <br>: setur bara eina nýggja linju.
<p>: merkir eitt heilt paragraf, við bilum (margins) oman og niðri. - Spurning: Hvussu býti eg tekst upp í tveir paragrafar?
<p>Fyrsti paragrafur.</p> <p>Seinni paragrafur.</p>- Spurning: Hvat er metadata?
- Svar: Tað er bakgrundsupplýsing í <head>—sum navnelappir á einum pakka, ið siga telduni, hvussu hon skal handfara síðuna (t.d. orðaskipan, mál og síðutitil).
Snar búmerki
Um tú høgraklikkjur á myndina og velur “kopier billedets webadresse”, so kanst tú seta hesa myndina inn á tína heimasíðu.