{"id":495,"date":"2019-10-19T21:19:42","date_gmt":"2019-10-19T19:19:42","guid":{"rendered":"http:\/\/maxfest.dk\/port\/?p=495"},"modified":"2019-11-24T16:59:49","modified_gmt":"2019-11-24T15:59:49","slug":"html5-css3-2-gang-noter-fra-forberedelsesmateriale","status":"publish","type":"post","link":"https:\/\/maxfest.dk\/port\/skiftligt-materiale\/noter\/html5-css3-2-gang-noter-fra-forberedelsesmateriale\/","title":{"rendered":"HTML5 &#038; CSS3 &#8211; 2. gang: noter fra forberedelsesmateriale og undervisning"},"content":{"rendered":"\n<p>Noter i HTML5 &amp; CSS3. Noter taget efter\u00e5r 2019. Forberedelsesmaterialet bestod af kapitel 3 side 110-119, kapitel 5 og kapitel 6  i HTML5 &amp; CCS3 af Murach. Materialet d\u00e6kker over HTML5 -strukturering af side med semantiske elementer, links baggrunde, boxmodellen og brug af CSS til sidelayout.<\/p>\n\n\n\n<p>Planen (udtrykket for dele af et modul brugt p\u00e5 UCL) er en forts\u00e6ttelse af <a href=\"http:\/\/maxfest.dk\/port\/html5-css3-noter-til-undervisning\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (\u00e5bner i en ny fane)\">HTML5 &amp; CSS3 planen<\/a> fra modul 1. Planen foreg\u00e5r i modul 2 i efter\u00e5ret 2019 som del af Multimediedesigner uddannelsen p\u00e5 UCL. Undervisningen blev afholdt af Thomas B\u00f8ye Jessen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML5 semantiske elementer<\/h2>\n\n\n\n<p>HTML5 semantiske elementer b\u00f8r bruges hvor de passer bedst ind for at forbedre SEO p\u00e5 hjemmesider. Det er nemmest at l\u00e6re de semantiske elementer fra starten.<\/p>\n\n\n\n<p>HTML 5 semantiske elementer \u00f8ger ogs\u00e5 l\u00e6sbarheden i koden, da det bliver nemmere at genkende segmenter\/grupperinger p\u00e5 baggrund af deres funktion.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Semantiske HTML5 elementer til sektioner.<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"\"><tbody><tr><td><strong>Element<\/strong><\/td><td><strong>Indhold<\/strong><\/td><\/tr><tr><td>header<\/td><td>Sidehovedet.<\/td><\/tr><tr><td>main<\/td><td>Hovedindholdet.<\/td><\/tr><tr><td>section<\/td><td>Generisk sektion, der ikke indikerer typen af indholdet.<\/td><\/tr><tr><td>article<\/td><td>Indhold der har samme komposition som i en artikel.<\/td><\/tr><tr><td>nav<\/td><td>En sektion hvor en hvor der linkes til andre sider eller placeholders.<\/td><\/tr><tr><td>aside<\/td><td>En sektion der er relateret til indholdet omkring det.<\/td><\/tr><tr><td>footer<\/td><td>Sidefoden.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Semantiske HTML5 elementer til indhold.<\/h3>\n\n\n\n<p>Der findes andre semantiske HTML5 elementer til indhold, men disse er nogle af de mest praktiske.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"\"><tbody><tr><td> <strong>Element<\/strong><\/td><td> <strong>Indhold<\/strong><\/td><\/tr><tr><td>time<\/td><td>Dato eller tid der kan blive analyseret\/h\u00e5ndteret af en browser.<\/td><\/tr><tr><td>figure<\/td><td>Illustration, diagram, billede eller andet indhold der er refereret til fra hovedindholdet.<\/td><\/tr><tr><td>figcaption<\/td><td>Billedtekst der identificerer en figur.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"\"><tbody><tr><td><strong>Attributter af time<\/strong><\/td><td><strong>Beskrivelse<\/strong><\/td><\/tr><tr><td>datetime<\/td><td>Dato og tid i et standardiseret format der kan h\u00e5ndteres af en browser.<\/td><\/tr><tr><td>pubdate<\/td><td>En boolesk v\u00e6rdi der indikerer at datoen er en indikation om publikations tidspunktet af artiklen, hvori elementet er placeret.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">div &amp; span<\/h3>\n\n\n\n<p>div og span har traditionelt v\u00e6ret anvendt til at strukturere sider p\u00e5 samme m\u00e5de som man anvender HTML5 semantiske elementer.<\/p>\n\n\n\n<p>Det er godt at kende til div og span da man med stor sandsynlighed vil st\u00f8de p\u00e5 dem i eksisterende projekter og p\u00e5 mange hjemmesider.<\/p>\n\n\n\n<p>div er et block elementer der bruges til at inddele sektioner i et HTML5 dokument. I div elementer kan man bruge id eller class v\u00e6rdier til at indikere hvilket type indhold der er deri.<\/p>\n\n\n\n<p>Man b\u00f8r bruge div til sektioner der ikke er d\u00e6kket af semantiske HTML5 elementer.<\/p>\n\n\n\n<p>span er et inline element. span b\u00f8r kun bruges til at formatere inline indhold inde i p elementer, s\u00e5fremt et HTML5 tag ikke eksisterer til den \u00f8nskede brug.<\/p>\n\n\n\n<p>B\u00e5de div og span kan blive p\u00e5virket af CSS.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"\"><tbody><tr><td> <strong>Element<\/strong><\/td><td> <strong>Indhold<\/strong><\/td><\/tr><tr><td>div<\/td><td>Inddeling af sideindhold.<\/td><\/tr><tr><td>span<\/td><td>Inddeling af tekstindhold.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Links<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Absolutte links<\/h3>\n\n\n\n<p>Absolutte links er links, der definerer lokationen af indholdet fra en URL adresse. Absolutte links kan anvendes fra alle steder og vil altid linke til det samme indhold. <\/p>\n\n\n\n<p>Eks.  &#8220;<a href=\"http:\/\/maxfest.dk\/port\">http:\/\/maxfest.dk\/port<\/a>&#8221; for at bes\u00f8ge procesportifoliet for Max. <\/p>\n\n\n\n<p>eller &#8220;<a href=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/09\/Max-Festersen-Hansen-2019.png\"><a href=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/09\/Max-Festersen-Hansen-2019.png\">https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/09\/Max-Festersen-Hansen-2019.png<\/a><\/a>&#8221; for at finde et billede at mig.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Relative links<\/h3>\n\n\n\n<p>Relative links er links, der definerer lokationen af indholdet relativt fra hvor det kaldes.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Root-relative links<\/h4>\n\n\n\n<p>Root-relative links er links der er relative fra roden af den hjemmeside der inds\u00e6ttes p\u00e5. <\/p>\n\n\n\n<p>Eks. &#8220;\/port\/&#8221; for at g\u00e5 til procesportfolio fra et vilk\u00e5rligt sted p\u00e5 procesportfolio.<\/p>\n\n\n\n<p>Eller &#8220;\/wp-content\/uploads\/2019\/09\/Max-Festersen-Hansen-2019.png&#8221; for at finde et billede af mig fra et  vilk\u00e5rligt sted p\u00e5 procesportfolio. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Document-relative links<\/h4>\n\n\n\n<p>Document-relative links er links der er relative fra filen hvor linket er indsat. <\/p>\n\n\n\n<p>Er indholdet i en mappe, skrives mappenavnet, efterfulgt af &#8220;\/&#8221;. Er indholdet i en overmappe, skal man skrive &#8220;&#8230;\/&#8221; for at g\u00e5 et niveau op.<\/p>\n\n\n\n<p>Eks. &#8220;port\/&#8221; for at g\u00e5 til procesportfolio fra maxfest.dk. <\/p>\n\n\n\n<p>Eller &#8220;port\/wp-content\/uploads\/2019\/09\/Max-Festersen-Hansen-2019.png&#8221; for at finde et billede af mig fra maxfest.dk.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Opbygning af links<\/h3>\n\n\n\n<p>Links p\u00e5 hjemmesider anvender a elementet. a elementet er et inline element. Inline elementer er typisk del af et block-element, som div eller p.<\/p>\n\n\n\n<p>a elementer kan bruge relative og absolutte links som v\u00e6rdier til href attributtet.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Baggrunde<\/h2>\n\n\n\n<p>Man kan definere b\u00e5de farver og billeder som baggrunde. Der findes utallige egenskaber for baggrunde, og kun f\u00e5 er d\u00e6kket i bogen. <\/p>\n\n\n\n<p>Herunder er nogle:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>background<\/li><li>background-image<\/li><li>background-color<\/li><li>background-repeat<\/li><li>background-attachment<\/li><li>background-position<\/li><\/ul>\n\n\n\n<p>Man kan bedst definere farven i background eller background-image. Man kan bedst definere baggrundsbilleder i background eller background-image.<\/p>\n\n\n\n<p>Man kan definere en gradient i background-image, ved at lave et billede med en linear-gradient. Et godt sted at l\u00e6re mere om dette er <a href=\"https:\/\/www.colorzilla.com\/gradient-editor\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (\u00e5bner i en ny fane)\">Ultimate CSS Gradient Generator via colorzilla<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Boxmodellen<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">En box<\/h3>\n\n\n\n<p>Indholdet ligger inderst, og har en h\u00f8jde og en brede. Derefter padding, der er der afstanden til en border (kantstykke). Borderen kan have en border-width der definerer tykkelsen af border. Margin er afstanden efter border.<\/p>\n\n\n\n<p>H\u00f8jden af et element er defineret af height, top-margin, top-border, top-padding, bottom-margin, bottom-border &amp; bottom-padding.<\/p>\n\n\n\n<p>Bredden af et element er defineret af width, left-margin, left-border, left-padding, right-margin, right-border &amp; right-padding. <\/p>\n\n\n\n<p>Eksempel:<\/p>\n\n\n\n<div id=\"outer_div\" style=\"float:left;width:100%;background-color:#FF0000;\"><div id=\"main_div\" style=\"width:calc(100% - 30px);height:50px;line-height:20px;padding:10px;border:solid 5px #000;margin:15px;background-color:#00FF00;color:#FFF;\"><div id=\"inner_div\" style=\"width:100%;background-color:#0000FF;\">Indhold<\/div><\/div><\/div>\n\n\n\n<p>I det overst\u00e5ende eksempel forholder det sig s\u00e5ledes:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Indholdet er markeret med bl\u00e5 baggrund.<\/li><li>Padding er markeret med gr\u00f8n baggrund.<\/li><li>Border er markeret med sort kanfrave.<\/li><li>Margin er markeret med r\u00f8d baggrund fra det bagvedliggende element.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>#outer_div {\n   float: left;\n   width: 100%;\n   background-color: #FF0000;\n}\n#main_div {\n   width: calc(100% - 30px);\n   height: 50px;\n   line-height: 20px;\n   padding: 10px;\n   border: solid 5px #000;\n   margin:15px;\n   background-color: #00FF00;\n   color: #FFF;\n}\n#inner_div {\n   width:100%;\n   background-color: #0000FF;\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Margin<\/h4>\n\n\n\n<p>Margin er afstanden fra border. Margin best\u00e5r af margin-top, margin-right, margin-bottom og margin-left. Man kan ogs\u00e5 definere dem alle med margin.<\/p>\n\n\n\n<p>Definerer man kun en v\u00e6rdi i margin, vil alle retninger have samme margin. Skriver man 2 v\u00e6rdier, vil top og bund blive defineret sammen, og det samme med left og right. Skriver man 4 v\u00e6rdier defineres alle retninger individuelt.<\/p>\n\n\n\n<p>F.eks. kan man skrive:<\/p>\n\n\n\n<p>Eksempel 1. Margin defineret med margin-top, margin-right, margin-bottom og margin-left i margin-top, margin-right, margin-bottom og margin-left.  <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.example {\n   margin-top: 10px;\n   margin-right: 15px;\n   margin-bottom: 10px;\n   margin-left: 15px;\n}<\/code><\/pre>\n\n\n\n<p> Eksempel 2. Margin defineret med margin-top, margin-right, margin-bottom og margin-left i margin.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.example {\n   margin: 10px 15px 10px 15px;\n}<\/code><\/pre>\n\n\n\n<p> Eksempel 2. Margin defineret med f\u00e6lles margin-top &amp; margin-bottom og margin-right &amp; margin-left i margin. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.example {\n   margin: 10px 15px;\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Padding<\/h4>\n\n\n\n<p>Padding er afstanden mellem indhold og border.<\/p>\n\n\n\n<p>Padding er, ligesom margin, best\u00e5ende af 4 dele. Padding best\u00e5r af padding-top, padding-right, padding-bottom og padding-left. Man kan ogs\u00e5 definere dem alle med padding. <\/p>\n\n\n\n<p>Padding ops\u00e6ttes p\u00e5 samme m\u00e5de som margin, og f\u00f8lger tilsvarende regler.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Border<\/h4>\n\n\n\n<p>Border er kanten mellem padding og margin.<\/p>\n\n\n\n<p>Border bredden best\u00e5r af borer-width. h\u00f8jre og venstre kant kan defineres med border-side. Farven kan defineres i border-color. Kant typen kan defineres i border-style. kantens radius kan defineres med border-radius. Alle elementer, ud over border-side og border-radius kan defineres i border.<\/p>\n\n\n\n<p>F.eks. vil et typisk border definition se s\u00e5ledes ud:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.border-example {\n   border: 2px solid #000000;\n}\n\/*Or*\/\n.border-example {\n   border-width: 2px;\n   border-style: solid;\n   border-color: #000000;\n}<\/code><\/pre>\n\n\n\n<p>Border ville se s\u00e5ledes ud p\u00e5 en div med 100px height og width:<\/p>\n\n\n\n<div style=\"width:100px;height:100px;border: 2px solid #000000;\"><\/div>\n\n\n\n<p>Og med en border-radius p\u00e5 4px:<\/p>\n\n\n\n<div style=\"width:100px;height:100px;border: 2px solid #000000;border-radius:4px;\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Gr\u00e6nser for width og height<\/h3>\n\n\n\n<p>height og width definerer absolutte v\u00e6rdier i forhold til elementet de er placeret i. height og width er begge som udgangspunkt auto som v\u00e6rdi, der beregner h\u00f8jde\/brede ud fra indholdets st\u00f8rrelse.<\/p>\n\n\n\n<p>Man kan definere mindste og maksimalle st\u00f8rrelser for b\u00e5de width og height. For height kan man bruge min-height og max-height. For width kan man bruge min-width og max-width.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS sidelayout<\/h2>\n\n\n\n<p>Css kan lagres p\u00e5 3 m\u00e5der.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>I en ekstern fil der linkes til fra f.eks. header i HTML fil.<\/li><li>I headeren p\u00e5 HTML filen.<\/li><li>Inline i HTML.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Float<\/h3>\n\n\n\n<p>Som udgangspunkt vil block indhold rette sig ind fra sidens top til sidens bund, og inline indhold vil rette sig fra venstre mod h\u00f8jre. Ved at tilf\u00f8je en float kan man bryde strukturen ved at f\u00e5 et element til at ligge sig p\u00e5 en m\u00e5de der ikke var tilt\u00e6nkt.<\/p>\n\n\n\n<p>Plads der bliver fri fra at have givet en float til et element, kan fyldes af andre elementer der er plads til. \u00d8nsker man at fylde denne plads, kan man anvende clear.<\/p>\n\n\n\n<p>I bogen fra s. 204 til 221 er der en r\u00e6kke eksempler p\u00e5 sidestrukturer der anvender float. Jeg vil ikke gennemg\u00e5 disse.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tekst koloner<\/h3>\n\n\n\n<p>I CSS3 er det relativt nyt at det er muligt at definere koloner. Dette kan g\u00f8res med:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"\"><tbody><tr><td><strong>Egenskab<\/strong><\/td><td><strong>Beskrivelse<\/strong><\/td><\/tr><tr><td>column-count<\/td><td>Antal kolonner.<\/td><\/tr><tr><td> column-gap<\/td><td>Bredden mellem kolonner.<\/td><\/tr><tr><td> column-rule<\/td><td>Definerer kanten mellem kolonner.<\/td><\/tr><tr><td> column-span<\/td><td>Definerer antal, brede og kant.<br>Bem\u00e6rk: column-span ikke er supporteret i Firefox.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Eksempel med fast bredde, 3 kolonner, gr\u00f8n kant, 30px afstand og placeholder tekst fra <a href=\"https:\/\/baconipsum.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (\u00e5bner i en ny fane)\">baconipsum<\/a>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>p{\n   width: 600px;\n   column-count: 3;\n   column-gap: 30px;\n   column-rule: 1px solid #00FF00;\n}<\/code><\/pre>\n\n\n\n<p style=\"width:600px;\n   column-count:3;\n   column-gap:30px;\n   column-rule: 1px solid #00FF00;\">Bacon ipsum dolor amet sirloin shank prosciutto chicken cow alcatra kielbasa bacon. Jowl ground round kielbasa beef venison. Drumstick shank beef meatball pork belly capicola jerky prosciutto. Pork chop pastrami boudin ground round meatball tongue cow t-bone ribeye salami turkey hamburger ball tip biltong turducken. Picanha turducken cow meatloaf ground round hamburger.\n<br>\nRump burgdoggen swine, ground round boudin biltong pig tri-tip pork loin tenderloin andouille ball tip hamburger corned beef. Swine ham brisket, landjaeger venison t-bone shankle bacon rump leberkas doner picanha. Doner brisket filet mignon turducken pancetta. Swine porchetta short ribs meatball short loin kielbasa pork turducken chicken tail pastrami jerky brisket. Boudin landjaeger swine capicola, shoulder strip steak short ribs meatloaf tongue rump. Cow pork loin short ribs, turducken burgdoggen venison boudin corned beef short loin brisket swine bresaola pork chop. Kielbasa shoulder venison strip steak porchetta pork belly jowl alcatra.\n<br>\nBeef cupim jowl pork belly, turducken biltong hamburger meatloaf frankfurter tail tenderloin shoulder beef ribs picanha kielbasa. Bresaola tail pastrami chuck frankfurter kielbasa. Prosciutto burgdoggen tongue, meatloaf hamburger beef kevin pork spare ribs. Meatball shoulder leberkas kevin cupim.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Position<\/h3>\n\n\n\n<p>position egenskabet definerer hvordan elementer vil blive positioneret.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Positionerings elementer<\/h4>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"\"><tbody><tr><td> <strong>Egenskab<\/strong><\/td><td> <strong>Beskrivelse<\/strong><\/td><\/tr><tr><td>position<\/td><td>Definerer position. Se n\u00e6ste tabel.<\/td><\/tr><tr><td>top<\/td><td>Definer afstanden eller offset fra toppen, afh\u00e6ngigt af hvad hvilken v\u00e6rdi position har.<\/td><\/tr><tr><td>bottom<\/td><td>Definer afstanden eller offset fra bunden, afh\u00e6ngigt af hvad hvilken v\u00e6rdi position har. <\/td><\/tr><tr><td>left<\/td><td>Definer afstanden eller offset fra venstre, afh\u00e6ngigt af hvad hvilken v\u00e6rdi position har.<\/td><\/tr><tr><td>right<\/td><td>Definer afstanden eller offset fra h\u00f8jre, afh\u00e6ngigt af hvad hvilken v\u00e6rdi position har.<\/td><\/tr><tr><td>z-index<\/td><td>Definerer niveauet hvorp\u00e5 et element eksisterer. En lav v\u00e6rdi betyder at elementet vil ligge lavt. Omvenendt vil en h\u00f8j v\u00e6rdi betyde at elementet vil ligge \u00f8verst.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">position v\u00e6rdier<\/h4>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"\"><tbody><tr><td><strong>V\u00e6rdi<\/strong><\/td><td><strong>Beskrivelse<\/strong><\/td><\/tr><tr><td>static<\/td><td>Placerer elementet i det normale flow for dokumentet.<\/td><\/tr><tr><td>absolute<\/td><td>Placerer elementet relativt til det n\u00e6rmeste block der ogs\u00e5 er positioneret. Positionen kan justeres med top, bottom, left og right.<\/td><\/tr><tr><td>fixed<\/td><td>Placerer elementet relativt til browservinduet. Positionen kan justeres med top, bottom, left og right.<\/td><\/tr><tr><td>relative<\/td><td>Placerer elementet relativt til det normale flow.  Positionen kan justeres med top, bottom, left og right.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Ressourcer til videre l\u00e6ring<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.nemprogrammering.dk\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (\u00e5bner i en ny fane)\">nemprogrammering.dk<\/a><\/li><li><a href=\"https:\/\/www.youtube.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (\u00e5bner i en ny fane)\">Youtube.com<\/a> (s\u00f8g efter hj\u00e6lp eller undervisning)<\/li><li><a href=\"https:\/\/www.w3schools.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (\u00e5bner i en ny fane)\">W3Schools<\/a><\/li><li><a href=\"https:\/\/www.sololearn.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (\u00e5bner i en ny fane)\">Sololearn<\/a> (findes ogs\u00e5 som app)<\/li><li><a href=\"https:\/\/www.linkedin.com\/learning\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (\u00e5bner i en ny fane)\">LinkedIn-learning<\/a><\/li><li><a href=\"https:\/\/www.codecademy.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (\u00e5bner i en ny fane)\">Code academy<\/a><\/li><li><a href=\"https:\/\/stackoverflow.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (\u00e5bner i en ny fane)\">Stack Overflow<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Noter i HTML5 &amp; CSS3. Noter taget efter\u00e5r 2019. Forberedelsesmaterialet bestod af kapitel 3 side 110-119, kapitel 5 og kapitel 6 i HTML5 &amp; CCS3 af Murach. Materialet d\u00e6kker over HTML5 -strukturering af side med semantiske elementer, links baggrunde, boxmodellen og brug af CSS til sidelayout. Planen (udtrykket for dele af et modul brugt p\u00e5&#8230;<\/p>\n","protected":false},"author":1,"featured_media":525,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[18],"class_list":["post-495","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\/495","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=495"}],"version-history":[{"count":33,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/posts\/495\/revisions"}],"predecessor-version":[{"id":963,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/posts\/495\/revisions\/963"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/media\/525"}],"wp:attachment":[{"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/media?parent=495"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/categories?post=495"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/tags?post=495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}