VEFÞ1VG05AU - NotebookLM video
Hér eru verkefni áfangans útskýrð í máli og myndum
Verkefni 1
Verkefni 2
Verkefni 3 - 4
Yfirlit Verkefna 1, 2 og 3 í VEF1VG
Verkefni 1: GitHub og vinnuflæði forritara
Í fyrsta hluta er áherslan á að setja upp vinnuumhverfið og læra á þau tól sem styðja við vefþróun.
- Html tög og CSS stílar
- <h1> til <h6>: Notað fyrir fyrirsagnir á vefsíðunni, þar sem <h1> er mikilvægasta fyrirsögnin og <h6> sú minnsta
- <p>: Notað til að búa til málsgreinar (paragraphs) utan um texta
- <ul>: Notað til að búa til óreglulega lista (punktalista)
- <li>: Notað fyrir hvern og einn listalið innan í lista
- Emphasis og Importance: Sérstök tög (eins og og ) eru notuð til að gefa texta áherslu eða mikilvægi
- Tenglar <a>: Notað til að búa til tengla (links) á aðrar síður eða skjöl
- <img>: Notað til að setja myndir inn á vefsíðuna
Verkefni 2: Box módelið, HTML5 ritháttur og stílsíður
Í þessu verkefni læra nemendur undirstöðuatriði í strúktúr og hönnun.
- Box módelið: Skilningur á því hvernig einingar eru samsettar úr padding (fyllingu), border (ramma) og margin (spássíu).
- Display settings: Eiginleikum taga er breytt með
display: skipuninni, til dæmis til að breyta útliti lista (<ul>).
- Float: Notað til að láta texta flæða í kringum myndir eða raða upp dálkum með
float: left.
- HTML5 Semantic Elements (Merkingarfræðileg tög): Vefsíður skulu ritaðar með tögum sem lýsa hlutverki sínu, svo sem:
<header>, <nav>, <main>, <article>, <section>, <aside> og <footer>.
- Pseudo classes (Hulduklasar): Notað til að stíla tengla (
<a>) eftir ástandi þeirra:
:link (óheimsóttur), :visited (heimsóttur), :hover (mús yfir), :active (smellt á).
Verkefni 3: Skipulag með Flexbox og CSS Grid
Hér er áherslan á flóknari uppsetningu og skipulag (layout) vefsíðna.
- Flexbox: Notað til að endurraða tögum og stýra flæði efnis.
display: flex; virkjar flexbox.
flex-flow: row-reverse; snýr við röð dálka.
- Hægt er að nota flex til að miðjustilla texta og raða efni í raðir eða dálka.
- CSS Grid: Kraftmikið kerfi til að búa til dálka og skipulag.
- Notað með skipuninni
display: grid;.
- Hægt er að búa til 2, 3 og 4 dálka uppsetningu (col-2, col-3, col-4).
- Grid Template Columns: Notað til að setja upp heildarútlit vefsíðu þar sem HTML5 tög (header, nav, main o.fl.) eru sett í skipulagt kerfi.
Verkefni 4
Sveigjanleg vefhönnun (Responsive Web Design) með CSS Grid byggir á því að nota viðmið (breakpoints) og @media screen skipunina til að birta mismunandi skipulag eftir skjástærðum. Markmiðið er að tryggja að vefsíðan birtist rétt á öllum tækjum, þar sem skipulag með mörgum dálkum gengur til dæmis ekki upp á litlum farsímaskjám.
Hér eru helstu leiðirnar sem notaðar eru til að útfæra þetta:
- Grid-template-columns: Þessi skipun er notuð til að stýra fjölda og breidd dálka með hlutfallseiningunni
fr. Á minnstu skjáunum (0–599px) er gjarnan notaður einn dálkur (1fr), en eftir því sem skjárinn stækkar er dálkum fjölgað í tvo, þrjá eða fjóra með skipunum eins og repeat(4, 1fr).
- Grid-template-areas: Með þessari aðferð eru ákveðin tög nefnd (t.d. article, aside1, aside2) og þeim raðað upp í skipulagt kerfi. Skipulagið breytist eftir viðmiðum; til dæmis geta svæði farið úr því að vera í einni lóðréttri röð á síma yfir í að vera hlið við hlið á stærri skjám.
- Samvinna við Flexbox: Sumir hlutar vefsíðunnar, eins og efnisyfirlit (
nav), eru oft hafðir sveigjanlegir með display:flex á meðan aðalskipulagið er stýrt með Grid.
- Miðjustilling: Á stórum skjám (t.d. yfir 100rem eða 1600px) er algengt að nota
margin: auto til að miðjussetja efnið svo það teygist ekki um allan skjáinn.