eftir fyrirlestur 14

namsefni/42.upprifjun-samantekt/1.html.md

@@ -0,0 +1,205 @@
+---
+title: Upprifjun –  Almenn hugtök/HTML samantekt
+---
+
+# Upprifjun –  Almenn hugtök/HTML samantekt
+
+## Vefforritun 1 — TÖL107G
+
+### Ólafur Sverrir Kjartansson, [[email protected]](mailto:[email protected])
+
+---
+
+## GUI vs CLI
+
+* _Graphical user interface_
+* Forrit með grafísku notendaviðmóti
+* _Command-line interface_
+* Texta viðmót á forrit, ólíkt _grafísku_ viðmóti
+
+***
+
+## Stafasett & utf-8
+
+* Þegar við vinnum með texta þurfum við að skilgreina í hvaða _stafasetti_ textinn er
+* Skilgreinir hvernig hver stafur er kóðaður og hve mikið pláss hann tekur
+[`utf-8`](https://en.wikipedia.org/wiki/UTF-8) stafasettið notar allt að fjögur byte til að skilgreina staf eða tákn
+
+***
+
+## Internetið & vefurinn
+
+* Alþjóðlegt netkerfi hundruð milljóna tölva tengdra saman yfir tugþúsundir neta yfir TCP/IP
+* Margskonar kerfi nýta internetið, t.d. vefurinn og tölvupóstur
+* World Wide Web, aðgengilegt yfir _internetið_
+* Byggir á _vefsíðum_ sem eiga sér _URL_ sóttar yfir _HTTP_
+
+***
+
+## HTTP
+
+* HyperText Transfer Protocol
+* Samskiptareglur sem skilgreina hvernig dreift kerfi tölva vinnur saman
+
+***
+
+## URL
+
+* Staðsetja og skilgreina hvernig við sækjum vefsíður yfir HTTP
+* Samanstanda af nokkrum pörtum
+* `http://example.org/example.html?start=true#kafli2`
+* Stundum er talað um `URI`, [en í nýjum staðli er `URL` og `URI` það sama](https://url.spec.whatwg.org/)
+
+***
+
+## Framendi
+
+* Framendi (e. front-end eða client-side) er sá partur vefsins sem notendur sjá og eiga við
+* Búinn til með HTML, CSS og JavaScript
+
+***
+
+## Bakendi
+
+* Bakendi (e. back-end eða server-side) er sá partur vefsins sem er sendur yfir HTTP til framenda
+* _full stack_ er oft notað fyrir forritara sem eru færir bæði í fram- og bakenda
+* Samanstendur yfirleitt af vefþjón, _forriti_ og gagnageymslu (t.d. gagnagrunn)
+
+---
+
+## HyperText & Markup Language
+
+* Hugtak um ólínulegan texta sem er tengdur við annan texta og hægt er að nálgast strax
+* Á einhverjum tímapunkti þurfum við leið til að ljá texta aukna dýpt
+* Markup language leyfir okkur það
+* Lýsing á skjali sem er setningarfræðilega aðgreind frá texta skjalsins
+
+***
+
+## Staðlar
+
+* Skilgreina _hvernig_ HTML á að virka
+* Fyrst reynt án árangurs fyrir HTML 1.0 hjá [IETF](https://en.wikipedia.org/wiki/Internet_Engineering_Task_Force) (Internet Engineering Task Force)
+* Tókst þó fyrir útgáfu 2.0 í [RFC 1866](https://tools.ietf.org/html/rfc1866) árið 1995
+* Tim Berners-Lee stofnaði W3C (World Wide Web Consortium) hjá MIT árið 1994 með stuðning frá Evrópusambandinu og [DARPA](https://en.wikipedia.org/wiki/DARPA)
+
+***
+
+## HTML
+
+* HyperText Markup Language
+* Kom fyrst fram á sjónarsviðið 1993, þróað af Tim Berners-Lee
+* Útgáfur 1.0–4.01 byggðar á SGML
+* Seinni útgáfur, XHTML og HTML5
+
+***
+
+## Elements
+
+* Einstakur hluti af vefsíðu og býr til tré með öðrum hlutum
+* Inniheldur önnur element eða texta nóðu, mynda _tré_
+* Hvert element táknar merkingu, hefur _merkingarfræðilegt gildi_ (e. semantic value)
+* `<p>Halló heimur</p>` er element sem skilgreinir setningu (paragraph) með texta nóðuna _„Halló heimur“_
+
+***
+
+## Tags
+
+* Element byrja á tagi, t.d. `<p>`
+* Element þurfa ekki, en ættu, að enda á loka tagi, t.d. `</p>`
+* Ef element hefur skilgreind _attribute_ eru þau sett á byrjunar tagið
+
+***
+
+## Attribute
+
+* Nafn-gildis par sem breytir elementi, t.d. `<p class="important">`
+* Gildið þarf ekki að vera umlukið gæsalöppum en það er æskilegt til gildið sé skýrt
+* Sum attribute þarf aðeins að skilgreina með nafni, t.d. `<option selected>`
+* Skrifum sem heiti í lástöfum, samasemmerki, gæsalappir opnast, gildi, gæsalappir lokast
+
+***
+
+## Element
+
+* Úr mörgum elementum að velja þegar við smíðum vefi: flow, sectioning, heading, phrasing, embedded, interactive
+* Form, töflur, listar
+
+***
+
+## HyperLink (tengill)
+
+* `<a>` element með `href` attribute skilgreinir tengil (e. hyperlink)
+* Grunnurinn að vefnum—tengir saman mismunandi vefi
+
+***
+
+## Merkingarfræði
+
+* Það er sterklega mælst til þess að markup í HTML skjali sé aðeins notað til að tjá merkingu en ekki framsetningu
+* Framsetning á gögnum er stýrt með CSS og fáum við því hreina skiptingu á milli efnis og útlits
+* Mörg element til sem skilgreina merkingu en annars er hægt að nota attributes
+
+***
+
+## HTML grunnur
+
+Öll HTML skjöl byggjá á grunn elementum:
+
+* `<html>` skilgreinir rót HTML vefs, skilgreinum tungumál með `lang` attribute
+* `<head>` er yfirleitt fyrsta barn `<html>` og heldur utan um lýsigögn vefsíðu
+* `<body>` skilgreinir meginmál vefs
+
+***
+
+## Minnsta HTML5 skjalið
+
+DOM tré.
+
+```html
+<!doctype html>
+<html lang="is">
+  <head>
+    <meta charset="utf-8">
+    <title>Halló heimur</title>
+  </head>
+  <body>
+    <p>Halló heimur</p>
+  </body>
+</html>
+```
+
+***
+
+## Að vísa í efni
+
+* Þegar við vísum í efni þurfum við að gefa upp slóð
+  * _Afstæð_ (relative) eða _nákvæm_ (absolute)
+* Á við `<img src="">`, `<a href="">` og önnur element sem vísa í efni
+
+***
+
+## Aðgengi
+
+* Aðgengi snýst ekki um að fatlað fólk geti notað vefina okkar
+* Aðgengi snýst um að _fólk_ geti notað vefina okkar
+* Við getum öll orðið „fötluð“ tímabundið
+
+***
+
+## WCAG 2.1
+
+* W3C staðall: [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG21/)
+* Listi af tilmælum og prinsippum til að gera vefi aðgengilegri
+* Þrjár tegundir:
+  * A, minnsta stig
+  * AA, það stig sem við ættum að stefna að
+  * AAA, öll skilyrði uppfyllt
+
+***
+
+## SEO
+
+* Meðhöndlun á efni til að það komi frekar fram í leitarniðurstöðum
+* Leitarvélar horfa á mörg hundruð breytur sem hafa áhrif
+* Í grunninn _skipulagt_, _læsilegt_ og _einstakt_ efni