{"id":411,"date":"2019-09-27T23:24:26","date_gmt":"2019-09-27T21:24:26","guid":{"rendered":"http:\/\/maxfest.dk\/port\/?p=411"},"modified":"2019-11-24T16:58:19","modified_gmt":"2019-11-24T15:58:19","slug":"html5-css3-noter-til-undervisning","status":"publish","type":"post","link":"https:\/\/maxfest.dk\/port\/skiftligt-materiale\/noter\/html5-css3-noter-til-undervisning\/","title":{"rendered":"HTML5 &#038; CSS3: noter fra forberedelsesmateriale og undervisning"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Til undervisningen skulle HTML5 &amp; CCS3, kap. 1 s 4-11, 14-19 &amp; 26-28, &amp; kap. 2 af  Murach, l\u00e6ses.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Jeg bem\u00e6rkede at meget af materialet der d\u00e6kkes i materialet er for\u00e6ldet. Mine noter er derfor ikke retvisende overfor materialet. Noterne d\u00e6kker det samme emnefelt, men med mere opdateret viden, og indhold der passer til landskabet i dag.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Internettet<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Internettet best\u00e5r af mange sammenkoblede WAN. WAN (Wide Area Network) best\u00e5r a flere LAN. LAN (Local Area Network) er forbindelser koblet til en router. Alle disse WAN forbindelser samles i IXP (Internet Exchange Points).  Dem der giver WAN eller LAN adgang dertil er ISP (Internet Service Provider).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Hjemmesider<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">En hjemmeside loader direkte fra en server. Kun udviklere kan \u00e6ndre den initielle indl\u00e6sning. N\u00e5r en bruger indl\u00e6ser ved en side (via link), laves et http request (HyperText Transfer Protocol). N\u00e5r en enhed modtager denne request, s\u00e5 vil den render en hjemmeside, oftest HTML (HyperText Markup Language), og s\u00e5 sende det tilbage til brugeres enhed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"355\" src=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/09\/image-1-1024x355.png\" alt=\"How a web server processes a static web page. Client browser sends HTTP request and gets a HTTP response from Web server, with HTML.\" class=\"wp-image-413\" srcset=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/09\/image-1-1024x355.png 1024w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/09\/image-1-300x104.png 300w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/09\/image-1-768x266.png 768w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/09\/image-1.png 1044w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>  HTML5 &amp; CCS3 af  Murach , s. 7<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Der er forskel p\u00e5 dynamiske og statiske kald. I Dynamiske kald, sker det samme, som beskrevet ovenfor, men vil tilmed ogs\u00e5 lave kald fra serveren, til databasen, og omvendt, afh\u00e6ngig af brugeres handlinger.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"253\" src=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/09\/image-1024x253.png\" alt=\"How a web server processes a dynamic web page. Client browser sends HTTP request and gets a HTTP response from Web server, with HTML. The web server is interacting with a Application server. The Application server is interacting with a Database Server.\" class=\"wp-image-412\" srcset=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/09\/image-1024x253.png 1024w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/09\/image-300x74.png 300w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/09\/image-768x190.png 768w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/09\/image.png 1487w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption> HTML5 &amp; CCS3 af  Murach , s. 9<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Web browser<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">En web browser er det der viser hjemmesider. Den mest popul\u00e6re er Google Chrome. De andre mest brugte er Internet Explorer, Firefox, Safari og Opera. Note: i dag er Edge ogs\u00e5 popul\u00e6r.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e5r man udvikler indhold til internettet, s\u00e5 b\u00f8r man udvikle til alle popul\u00e6re platforme. Udviklere b\u00f8r ogs\u00e5 v\u00e6lge et server-side scripting sprog. F.eks. PHP eller ASP.NET.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML &amp; CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">HTML definerer strukturen p\u00e5 en hjemmeside. HTML sider starter altid med at definere deres DOCTYPE. De har altid en head og en body, I head sektionen definerer man referencer, ressourcer, meta-data og lignende. Alt hvad man kan se p\u00e5 en hjemmeside, er defineret i body. Der er flere HTML standarder, heriblandt HTML 5 og XHTML. I dag anvendes stort set kun HTML5.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I CSS (Cascading Style Sheet) kan man definere udseendet af en HTML side. Det er et eksternt dokument, men man kan ogs\u00e5 anvende CSS i HTML dokumentet. Man referencer til sit CSS i head sektionen af HTML filen. Man kan bl.a. styre fonter, farver og layout deri. Man kan ikke definere strukturen i CSS. Der findes ogs\u00e5 forskellige CSS standarder. I dag anvendes stort set kun CSS3.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Web standarder<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Der er 2 vigtige grupper man b\u00f8r v\u00e6re bekendt med indenfor web standarder: <a href=\"http:\/\/w3.org\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (\u00e5bner i en ny fane)\">W3C <\/a>og <a href=\"http:\/\/whatwg.org\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (\u00e5bner i en ny fane)\">WHATWG<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tilg\u00e5 hjemmesider<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">En m\u00e5d er er at indtaste en URL (Uniform Resource Locator). En anden m\u00e5de er at klikke p\u00e5 links. Et link best\u00e5r af en URL Adresse. URL adresser best\u00e5r af en protocol, f.eks. HTTP, et dom\u00e6ne navn, derefter sti og til sidst filnanvn og filtype. Valgfrit kan man tilf\u00f8je www mellem protocol og dom\u00e6nenavnet. Filnavne kan unlades hvis de heder index.html eller index.php. Filnavne kan ogs\u00e5 ulades afh\u00e6nigt af hvordan man har derfineret sin htacess fil.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eks. https:\/\/www.maxfest.dk\/port\/index.php<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Ptotocol:  http:\/\/<\/li><li>WWW: www.<\/li><li>Dom\u00e6ne: maxfest.dk<\/li><li>Sti: \/port\/<\/li><li>Filnavn: index<\/li><li>Fultype: .php<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">I eksemplet kunne man undlade www, filnavn og filtype. Linket kunne se s\u00e5ledes ud. https:\/\/maxfest.dk\/port<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00d8nsker man at have god s\u00f8geoptimering, s\u00e5 b\u00f8r man navngive sine filer med navne der giver mening i forhold deres indhold og form\u00e5l.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Indtaster man ikke det fulde link, s\u00e5 udfylder de fleste hjemmesider selv protokollen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Source code<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">I de fleste browsere kan man tilg\u00e5 koden som har genereret din visning. I chrome kan der nemmest opn\u00e5s ved at anvende h\u00f8jreklik og trykke p\u00e5 unders\u00f8g\/inspect p\u00e5 et element, og s\u00e5 navigere derfra. Man kan ogs\u00e5 trykke CRTL + SHIFT + I. Eller bruge options knappen, s\u00e5 navigere til flere v\u00e6rkt\u00f8jer og s\u00e5 v\u00e6lge udviklingsv\u00e6rkt\u00f8jer.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Kodning af HTML<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">En HTML-fil best\u00e5r som tidligere n\u00e6vnt af en doctype, head sektion og body sektion.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">White space vil blive ignoreret. White space er alt den plads man bruger p\u00e5 linjeskift og mellemrum, hvor man ikke skriver indhold.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tags<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Indhold best\u00e5r af tags. Tages skrives mellem klammer\/krokodiller. F.eks. tekst skrives som p, s\u00e5ledes: &lt;p&gt;. Tags skal oftest afsluttes, hvilket g\u00f8res med en skr\u00e5streg i med et tilsvarende tag man pr\u00f8ver at lukke. F.eks. &lt;\/p&gt; til at lukke den tekst vi startede tidligere.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">HTML kodes oftest i en netet struktur. Dvs. at elementer indeholder andre elementer. f.eks. kan man have en kasse, med en tekst og et billede i teksten, f.eks. &lt;div&gt;&lt;p&gt;&lt;img&gt;&lt;\/p&gt;&lt;\/div&gt;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I  HTML5 anvender man sektionstags. F.eks. <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>nav er en sektion til navigationen.<\/li><li>header til headersektionen.<\/li><li>sektion til til en sektion.<\/li><li>footer til footeren.<\/li><li>article til br\u00f8dtekst, artikler eller hovedindhold.<\/li><li>aside til sidebars.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">alt-tags b\u00f8r anvendes. Disse er godt for brugervenlighed (f.eks. blinde mennesker) og SEO.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Attributter<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Attributter er definitioner efter tagget. Det kan v\u00e6re ID, klasser, booleans og mere. Et attribut kan have en v\u00e6rdi. For at give en attribut en v\u00e6rdi inds\u00e6tter man et ligemed teng efter, og v\u00e6rdien i kvotering. F.eks. &lt;div id=&#8221;header&#8221;&gt;. Boolean v\u00e6rdier (v\u00e6rdier der enten er sande eller falske) beh\u00f8ver ingen v\u00e6rdi. Der kan v\u00e6re flere attributter, man adskiller dem med mellemrum. F.eks. &lt;div id=&#8221;header&#8221; class=&#8221;main&#8221;&gt;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Til kvoteringen af v\u00e6rdier kan man bruge dobbelt og enkeltkvotering. Det anbefales at man kun bruger en, og helst dobbeltkvoteringen. Det er rent visuelt. Man kan dog ikke blande dem i samme kvotering.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Udkommentering og kommentarer<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Man kan skjule kode og indhold ved at skrive &lt;!&#8211; og slutte af med &#8211;&gt;- Alt i mellem vil ikke blive vist i outputtet. Man kan bruge dette til at fjerne en sektion eller skrive kommentarer i sin kode.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Validering<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Man kan bruge eksterne v\u00e6rkt\u00f8jer som f.eks. <a href=\"https:\/\/validator.w3.org\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (\u00e5bner i en ny fane)\">https:\/\/validator.w3.org\/<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS kodning<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">I CSS definerer man selector og angiver en property (egenskab) og tilh\u00f8rende value (v\u00e6rdi).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Efter selectoren skrives der en delecation block, hvilket best\u00e5r af klammer ({ &amp; }) og en eller flere declarations. Declarations best\u00e5r af property, kolon, v\u00e6rdi(er) og semikolon.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">F.eks.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>p {\n   font-family: sans-serif;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">I ovenst\u00e5ende eksempel g\u00e6lder:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Selector: P<\/li><li> Delecation block: {    font-family: sans-serif; }<\/li><li> Declaration: font-family: sans-serif;<\/li><li>Property: font-family<\/li><li>V\u00e6rdi: sans-serif<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">I CSS kan man skrive kommentarer. Kommentarerer starter med \/* og slutter med: *\/<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ligesom i HTMl, s\u00e5 vil white space vil blive ignoreret.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Indhold kan blive valgt p\u00e5 baggrund af attributter. De 2 mest popul\u00e6re ID og Clases bruger henholdsvis # og . til reference i CSS, efterfulgt af v\u00e6rdien. F.eks.:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">HTML<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"header\">\n   &lt;div class=\"point\">\n      &lt;p>1&lt;\/p>\n   &lt;\/div>\n   &lt;div class=\"point\">\n      &lt;p>2&lt;\/p>\n   &lt;\/div>\n   &lt;div class=\"point\">\n      &lt;p>3&lt;\/p>\n   &lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">CSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#header {\n   float: left;\n   width: 100%:\n}\n.point {\n   height:200px;\n}\n.point p {\n   font-family: serif;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Validering<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Man kan bruge eksterne v\u00e6rkt\u00f8jer som f.eks. <a href=\"https:\/\/jigsaw.w3.org\/css-validator\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (\u00e5bner i en ny fane)\">https:\/\/jigsaw.w3.org\/css-validator\/<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Udvikling til browsere p\u00e5 MMD<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">P\u00e5 Multimediedesign uddannelsen p\u00e5 UCL b\u00f8r eleverne:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>udvikle til den m\u00e5lgruppe der anvender en browser. Hvis f.eks. 20% anvender firefox, s\u00e5 b\u00f8r man teste sin side i firefox. F\u00f8r i tiden var det et b\u00f8vl, men i dag er det nemmere.<\/li><li>udvikle responsive l\u00f8sninger (fordi vi ikke kan vide hvilke sk\u00e6rmst\u00f8rrelser brugerne kommer til at have).<\/li><li>udvikler man i HTML5, og anvender ikke tabel eller div struktur.<\/li><li>udvikle brugervenlige l\u00f8sninger. WCAG, Nobanet Usability Guidelines eller anden standard b\u00f8r f\u00f8lges.<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Til undervisningen skulle HTML5 &amp; CCS3, kap. 1 s 4-11, 14-19 &amp; 26-28, &amp; kap. 2 af Murach, l\u00e6ses. Jeg bem\u00e6rkede at meget af materialet der d\u00e6kkes i materialet er for\u00e6ldet. Mine noter er derfor ikke retvisende overfor materialet. Noterne d\u00e6kker det samme emnefelt, men med mere opdateret viden, og indhold der passer til landskabet&#8230;<\/p>\n","protected":false},"author":1,"featured_media":425,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[18],"class_list":["post-411","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-noter","tag-mmd"],"_links":{"self":[{"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/posts\/411","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/comments?post=411"}],"version-history":[{"count":15,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/posts\/411\/revisions"}],"predecessor-version":[{"id":960,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/posts\/411\/revisions\/960"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/media\/425"}],"wp:attachment":[{"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/media?parent=411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/categories?post=411"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/tags?post=411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}