{"id":744,"date":"2019-11-20T23:33:26","date_gmt":"2019-11-20T22:33:26","guid":{"rendered":"http:\/\/maxfest.dk\/port\/?p=744"},"modified":"2019-11-25T15:30:31","modified_gmt":"2019-11-25T14:30:31","slug":"noter-html5-css3-3-gang","status":"publish","type":"post","link":"https:\/\/maxfest.dk\/port\/skiftligt-materiale\/noter\/noter-html5-css3-3-gang\/","title":{"rendered":"Noter: HTML5 &#038; CSS3 3. gang"},"content":{"rendered":"\n<p>Noter fra undervisning og forberedelse til HTML5 &amp; CSS3. Noterne d\u00e6kker lister, links, menuer, responsive web design og media queries. Noterne er taget p\u00e5 MMD.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Forberedelsesmaterialet<\/h2>\n\n\n\n<p>Til forberedelsens skulle der l\u00e6ses Murach&nbsp;kapitel 7-8. Desuden skulle metoden afpr\u00f8ves.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Lister<\/h2>\n\n\n\n<p>ul &#8211; uorganiseret liste<\/p>\n\n\n\n<p>oi &#8211; nummeret liste<\/p>\n\n\n\n<p>li &#8211; listepunkt<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Liste struktur<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">ul<\/h4>\n\n\n\n<p><strong>Kodeeksempel<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ul>\n   &lt;li>\n      &lt;p>Eksempeltekst&lt;\/p>\n   &lt;\/li>\n   &lt;li>\n      ...\n   &lt;\/li>\n&lt;\/ul><\/code><\/pre>\n\n\n\n<p><strong>Resultat<\/strong><\/p>\n\n\n\n<ul>\n   <li>\n      <p>Eksempeltekst<\/p>\n   <\/li>\n   <li>\n      &#8230;\n   <\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">ol<\/h4>\n\n\n\n<p><strong>Kodeeksempel<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ol>\n   &lt;li>\n      &lt;p>Vi har det sjovt&lt;\/p>\n   &lt;\/li>\n   &lt;li>\n      &lt;p>Vi har det sjovt&lt;\/p>\n   &lt;\/li>\n   &lt;li>\n      &lt;p>Vi har det sjovt&lt;\/p>\n   &lt;\/li>\n&lt;\/ol>\n&lt;ol start=\"5\">\n   &lt;li>\n      &lt;p>Hov. Vi glemte 4&lt;\/p>\n   &lt;\/li>\n&lt;\/ol><\/code><\/pre>\n\n\n\n<p><strong>Resultat<\/strong><\/p>\n\n\n\n<ol>\n   <li>\n      <p>Vi har det sjovt<\/p>\n   <\/li>\n   <li>\n      <p>Vi har det sjovt<\/p>\n   <\/li>\n   <li>\n      <p>Vi har det sjovt<\/p>\n   <\/li>\n<\/ol>\n<ol start=\"5\">\n   <li>\n      <p>Hov. Vi glemte 4<\/p>\n   <\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Nested liste stuktur<\/h4>\n\n\n\n<p>Nested liste er en liste inde i en liste. Det kan g\u00f8res for ul, ol eller en kombination deraf.<\/p>\n\n\n\n<p><strong>Kodeeksempel<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ul>\n   &lt;li>\n      &lt;p>Eksempeltekst&lt;\/p>\n   &lt;\/li>\n   &lt;li>\n      &lt;ol>\n         &lt;li>\n            &lt;p>Vi har det sjovt&lt;\/p>\n         &lt;\/li>\n         &lt;li>\n            &lt;p>Vi har det sjovt&lt;\/p>\n         &lt;\/li>\n         &lt;li>\n            &lt;p>Vi har det sjovt&lt;\/p>\n         &lt;\/li>\n      &lt;\/ol>\n      &lt;ol start=\"5\">\n         &lt;li>\n            &lt;p>Hov. Vi glemte 4&lt;\/p>\n         &lt;\/li>\n      &lt;\/ol>\n   &lt;\/li>\n&lt;\/ul><\/code><\/pre>\n\n\n\n<p><strong>Resultat<\/strong><\/p>\n\n\n\n<ul>\n   <li>\n      <p>Eksempeltekst<\/p>\n   <\/li>\n   <li>\n      <ol>\n         <li>\n            <p>Vi har det sjovt<\/p>\n         <\/li>\n         <li>\n            <p>Vi har det sjovt<\/p>\n         <\/li>\n         <li>\n            <p>Vi har det sjovt<\/p>\n         <\/li>\n      <\/ol>\n      <ol start=\"5\">\n         <li>\n            <p>Hov. Vi glemte 4<\/p>\n         <\/li>\n      <\/ol>\n   <\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">description lists | deskriptive lister<\/h4>\n\n\n\n<p>Lister der har til form\u00e5l at lave beskrivelser.<\/p>\n\n\n\n<p>dl &#8211; deskriptiv liste<\/p>\n\n\n\n<p>dt &#8211; term i deskriptiv liste<\/p>\n\n\n\n<p>dd &#8211; beskrivelse i deskriptiv liste<\/p>\n\n\n\n<p><strong>Kodeeksempel<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;dl>\n   &lt;dt>Deskriptive lister&lt;\/dt>\n   &lt;dd>Lister der har til form\u00e5l at lave beskrivelser.&lt;\/dd>\n&lt;\/dl><\/code><\/pre>\n\n\n\n<p><strong>Resultat<\/strong><\/p>\n\n\n\n<dl>\n   <dt>Deskriptive lister<\/dt>\n   <dd>Lister der har til form\u00e5l at lave beskrivelser.<\/dd>\n<\/dl>\n\n\n\n<h3 class=\"wp-block-heading\">Formatering af lister<\/h3>\n\n\n\n<p>Med css kan lister formateres.<\/p>\n\n\n\n<p>Man kan \u00e6ndre punktets design med f\u00f8lgende:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>list-style-type &#8211; definerer formen for punkt-kuglen (bullet)<ul><li>Kan defineres som bl.a. disc, circle, square &amp; none<\/li><li> Kan defineres som decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman &amp; upper-roman<\/li><\/ul><\/li><li>list-style-image &#8211; definerer punkt-kuglen som et selvvalgt billede<\/li><\/ul>\n\n\n\n<p><strong>Kodeeksempel<\/strong> &#8211; HTML<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!--HTML-->\n&lt;ul class=\"use_square\">\n   &lt;li>\n      &lt;p>Eksempeltekst&lt;\/p>\n   &lt;\/li>\n   &lt;li>\n      ...\n   &lt;\/li>\n&lt;\/ul>\n&lt;ul class=\"use_image\">\n   &lt;li>\n      &lt;p>Eksempeltekst&lt;\/p>\n   &lt;\/li>\n   &lt;li>\n      ...\n   &lt;\/li>\n&lt;\/ul>\n&lt;ol class=\"use_lower_aplpha\">\n   &lt;li>\n      &lt;p>Med sm\u00e5t alphabet&lt;\/p>\n   &lt;\/li>\n   &lt;li>\n      ...\n   &lt;\/li>\n&lt;\/ol><\/code><\/pre>\n\n\n\n<p><strong>Kodeeksempel<\/strong> &#8211; CSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*CSS*\/\n.use_square{\n   list-style-type: square;\n}\n.use_image{\n   list-style-image: url(\"http:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/09\/Max-Festersen-Hansen-2019.png\");\n}\n.use_lower_aplpha{\n   list-style-type: lower-alpha;\n}<\/code><\/pre>\n\n\n\n<p><strong>Resultat<\/strong><\/p>\n\n\n\n<!--HTML-->\n<ul class=\"use_square\">\n   <li>\n      <p>Eksempeltekst<\/p>\n   <\/li>\n   <li>\n      &#8230;\n   <\/li>\n<\/ul>\n<ul class=\"use_image\">\n   <li>\n      <p>Eksempeltekst<\/p>\n   <\/li>\n   <li>\n      &#8230;\n   <\/li>\n<\/ul>\n<ol class=\"use_lower_aplpha\">\n   <li>\n      <p>Med sm\u00e5t alphabet<\/p>\n   <\/li>\n   <li>\n      &#8230;\n   <\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">List alignment<\/h3>\n\n\n\n<p>List alignment styres med padding p\u00e5 listeelementet og listepunktet.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Links<\/h2>\n\n\n\n<p>Links kan skabes med a elementet.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Links attributter<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>href &#8211; relativ eller absolut URL.<\/li><li>title &#8211; tooltip<\/li><li>tabindex &#8211; definerer logik for tastatur navigation med tab-knappen.<\/li><li>accesskey &#8211; identificerer en tast der kan aktivere links, sammen med  en browserafh\u00e6ngig kombination af taster.<\/li><\/ul>\n\n\n\n<p><strong>Kodeeksempel p\u00e5 link med href, title, tabindex og accesskey<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"https:\/\/maxfest.dk\/port\" title=\"G\u00e5 til forsiden\" tabindex=\"0\" accesskey=\"q\">Home&lt;\/a><\/code><\/pre>\n\n\n\n<p><strong>Resultat<\/strong><\/p>\n\n\n\n<a href=\"https:\/\/maxfest.dk\/port\" title=\"G\u00e5 til forsiden\" tabindex=\"0\" accesskey=\"q\">Home<\/a>\n\n\n\n<p>Note: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Global_attributes\/accesskey\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (\u00e5bner i en ny fane)\">Mozilla har dokumentet hvilke tastekombinationer der skal til for at anvende accesskey<\/a>.<\/p>\n\n\n\n<p>Note: hover over teksten for at se tooltip.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pseudo klasser til formatering af links<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>:link &#8211; ubes\u00f8gt link<\/li><li>:visited &#8211; bes\u00f8gt link<\/li><li>:hover &#8211; element der bliver hoveret p\u00e5<\/li><li>:focus &#8211; element der er i fokus, f.eks. fordi linket er blevet trykket p\u00e5 og siden indl\u00e6sser<\/li><li>:active &#8211; element der er aktivt, f.eks. fordi der bliver trykket p\u00e5 det.<\/li><\/ul>\n\n\n\n<p><strong>Kodeeksempel<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*CSS*\/\na:link, a:visited{\n   color:#0000FF:\n}\na:hover{\n   color:#FF0000:\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c5ben links i nye tabs<\/h3>\n\n\n\n<p>Tilf\u00f8j target attribut med v\u00e6rdien &#8220;_blank&#8221;.<\/p>\n\n\n\n<p><strong>Kodeeksempel<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"https:\/\/maxfest.dk\/port\" target=\"_blank\">Home&lt;\/a><\/code><\/pre>\n\n\n\n<p><strong>Resultat<\/strong><\/p>\n\n\n\n<a href=\"https:\/\/maxfest.dk\/port\" target=\"_blank\" rel=\"noopener noreferrer\">Home<\/a>\n\n\n\n<h3 class=\"wp-block-heading\">Navigation til element med id og placeholder<\/h3>\n\n\n\n<p>Til href attributtet skal v\u00e6rdien v\u00e6re efterfulgt af &#8220;#&#8221; og navnet p\u00e5 id.<\/p>\n\n\n\n<p><strong>Kodeeksempel<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"#\">Placeholder&lt;\/a>\n&lt;\/br>\n&lt;a href=\"#colophon\">Footer p\u00e5 denne side&lt;\/a>\n&lt;\/br>\n&lt;a href=\"https:\/\/maxfest.dk\/port#colophon\">Footer p\u00e5 forsiden&lt;\/a><\/code><\/pre>\n\n\n\n<p><strong>Resultat<\/strong><\/p>\n\n\n\n<a href=\"#\">Placeholder<\/a>\n<\/br>\n<a href=\"#colophon\">Footer p\u00e5 denne side<\/a>\n<\/br>\n<a href=\"https:\/\/maxfest.dk\/port#colophon\">Footer p\u00e5 forsiden<\/a>\n\n\n\n<h3 class=\"wp-block-heading\">Links til mediefiler<\/h3>\n\n\n\n<p>Man kan linke til bl.a.:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>application\/pdf &#8211; PDF<\/li><li>audio\/x-wave &#8211; WAV<\/li><li>audio\/mpeg \/ audio\/xmpeg &#8211; MP3<\/li><li>video\/mpeg &#8211; MPG\/MPEG<\/li><li>application\/x-shockwave-flash &#8211; SWF<\/li><\/ul>\n\n\n\n<p>For at linke til disse, skal linket til deres lokation inds\u00e6ttes som v\u00e6rdi til href attributtet og refferemcem som v\u00e6rdi til type attributtet. <\/p>\n\n\n\n<p><strong>Kodeeksempel<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/11\/Gantt-chart-gruppe-3-projekt-2.pdf\" type=\"application\/pdf\" target=\"_blank\">Link til Gantt chart gruppe 3 projekt 2&lt;\/a><\/code><\/pre>\n\n\n\n<p><strong>Resultat<\/strong><\/p>\n\n\n\n<a href=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/11\/Gantt-chart-gruppe-3-projekt-2.pdf\" type=\"application\/pdf\" target=\"_blank\" rel=\"noopener noreferrer\">Link til Gantt chart gruppe 3 projekt 2<\/a>\n\n\n\n<h3 class=\"wp-block-heading\">Links med e-mail, telefonnummer eller skype links<\/h3>\n\n\n\n<p>Man kan lave links som pr\u00f8ver at interagere med faktorerne.<\/p>\n\n\n\n<p>Som v\u00e6rdi i href attributtet f\u00f8r linket kan man tilf\u00f8je:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>mailto &#8211; for e-mail adresser<\/li><li>tel &#8211; for telefoner<\/li><li>skype &#8211; for skype referencer<\/li><\/ul>\n\n\n\n<p><strong>Kodeeksempel<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"mailto:test@maxfest.dk\" type=\"application\/pdf\">Send e-mail&lt;\/a>\n&lt;\/br>\n&lt;a href=\"tel:12345678\" type=\"application\/pdf\">Ring til nummer&lt;\/a>\n&lt;\/br>\n\n&lt;a href=\"skype:12345678test\" type=\"application\/pdf\">Ring via skype&lt;\/a><\/code><\/pre>\n\n\n\n<p><strong>Resultat<\/strong><\/p>\n\n\n\n<a href=\"mailto:test@maxfest.dk\" type=\"application\/pdf\">Send e-mail<\/a>\n<\/br>\n<a href=\"tel:12345678\" type=\"application\/pdf\">Ring til nummer<\/a>\n<\/br>\n<a href=\"skype:12345678test\" type=\"application\/pdf\">Ring via skype<\/a>\n\n\n\n<h2 class=\"wp-block-heading\">Menuer<\/h2>\n\n\n\n<p>A elementer i en uorganiseret liste.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Vertikalt design<\/h3>\n\n\n\n<p>Class kan undv\u00e6res. Jeg anvender en, da mine eksisterende menuer ellers bliver p\u00e5virket, og jeg p\u00e5virke efterf\u00f8lgende resultater.<\/p>\n\n\n\n<p><strong>Kodeeksempel<\/strong> -HTML<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;nav class=\"ex_vertical_menu\">\n   &lt;ul>\n      &lt;li>\n         &lt;a href=\"https:\/\/maxfest.dk\/port\">Home&lt;\/a>\n      &lt;\/li>\n      &lt;li>\n         &lt;a href=\"#\">Placeholder&lt;\/a>\n      &lt;\/li>\n      &lt;li>\n         &lt;a href=\"#\">Placeholder 2&lt;\/a>\n      &lt;\/li>\n   &lt;\/ul>\n&lt;\/nav><\/code><\/pre>\n\n\n\n<p> <strong>Kodeeksempel<\/strong> &#8211; CSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>nav.ex_vertical_menu, ul, li, a{\n   margin: 0;\n   padding: 0;\n}\nnav.ex_vertical_menu ul{\n   list-style-type: none;\n}\nnav.ex_vertical_menu ul li{\n   display:block;\n   text-decoration:none;\n}<\/code><\/pre>\n\n\n\n<p><strong>Resultat<\/strong><\/p>\n\n\n\n<nav class=\"ex_vertical_menu\">\n   <ul>\n      <li>\n         <a href=\"https:\/\/maxfest.dk\/port\">Home<\/a>\n      <\/li>\n      <li>\n         <a href=\"#\">Placeholder<\/a>\n      <\/li>\n      <li>\n         <a href=\"#\">Placeholder 2<\/a>\n      <\/li>\n   <\/ul>\n<\/nav>\n\n\n\n<h3 class=\"wp-block-heading\">Horisontalt design<\/h3>\n\n\n\n<p>Class kan undv\u00e6res. Jeg anvender en, da mine eksisterende menuer ellers bliver p\u00e5virket.<\/p>\n\n\n\n<p><strong>Kodeeksempel<\/strong> -HTML<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;nav class=\"ex_horisontal_menu\">\n   &lt;ul>\n      &lt;li>\n         &lt;a href=\"https:\/\/maxfest.dk\/port\">Home&lt;\/a>\n      &lt;\/li>\n      &lt;li>\n         &lt;a href=\"#\">Placeholder&lt;\/a>\n      &lt;\/li>\n      &lt;li>\n         &lt;a href=\"#\">Placeholder 2&lt;\/a>\n      &lt;\/li>\n   &lt;\/ul>\n&lt;\/nav><\/code><\/pre>\n\n\n\n<p> <strong>Kodeeksempel<\/strong> &#8211; CSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>nav.ex_horisontal_menu, ul, li, a{\n   margin: 0;\n   padding: 0;\n}\nnav.ex_horisontal_menu ul{\n   list-style-type: none;\n}\nnav.ex_horisontal_menu ul li{\n   float:left;\n   text-decoration:none;\n   \/* Evt. tilf\u00f8j padding *\/\n   padding:0 10px;\n   \/* display:inline kan angives, men ignores pga. float:left *\/\n   display:inline;\n\n}<\/code><\/pre>\n\n\n\n<p><strong>Resultat<\/strong><\/p>\n\n\n\n<nav class=\"ex_horisontal_menu\">\n   <ul>\n      <li>\n         <a href=\"https:\/\/maxfest.dk\/port\">Home<\/a>\n      <\/li>\n      <li>\n         <a href=\"#\">Placeholder<\/a>\n      <\/li>\n      <li>\n         <a href=\"#\">Placeholder 2<\/a>\n      <\/li>\n   <\/ul>\n<\/nav>\n\n\n\n<h3 class=\"wp-block-heading\">2nd-tier navigation menu &#8211; dropdown<\/h3>\n\n\n\n<p>Eksemplet tager udgangspunkt i det horisontale eksempel fra f\u00f8r.<\/p>\n\n\n\n<p>Class kan undv\u00e6res. Jeg anvender en, da mine eksisterende menuer ellers bliver p\u00e5virket.<\/p>\n\n\n\n<p><strong>Kodeeksempel<\/strong> -HTML<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;nav class=\"tier_two_menu\">\n   &lt;ul>\n      &lt;li>\n         &lt;a href=\"https:\/\/maxfest.dk\/port\">Home&lt;\/a>\n      &lt;\/li>\n      &lt;li>\n         &lt;a href=\"#\">Placeholder 1&lt;\/a>\n         &lt;ul>\n            &lt;li>\n               &lt;a href=\"#\">Placeholder 2&lt;\/a>\n            &lt;\/li>\n         &lt;\/ul>\n      &lt;\/li>\n   &lt;\/ul>\n&lt;\/nav><\/code><\/pre>\n\n\n\n<p> <strong>Kodeeksempel<\/strong> &#8211; CSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>nav.tier_two_menu, ul, li, a{\n   margin: 0;\n   padding: 0;\n}\nnav.tier_two_menu ul{\n   list-style-type: none;\n}\nnav.tier_two_menu ul li{\n   display:inline;\n   position:relative;\n   float:left;\n   text-decoration:none;\n   padding:0 10px;\n}\nnav.tier_two_menu ul ul{\n   display:none;\n   position:absolute;\n   top:100%;\n}\nnav.tier_two_menu ul ul li{\n   float:none;\n}\nnav.tier_two_menu ul li:hover > ul{\n   display:block;\n}<\/code><\/pre>\n\n\n\n<p><strong>Resultat<\/strong><\/p>\n\n\n\n<nav class=\"tier_two_menu\">\n   <ul>\n      <li>\n         <a href=\"https:\/\/maxfest.dk\/port\">Home<\/a>\n      <\/li>\n      <li>\n         <a href=\"#\">Placeholder 1<\/a>\n         <ul>\n            <li>\n               <a href=\"#\">Placeholder 2<\/a>\n            <\/li>\n         <\/ul>\n      <\/li>\n   <\/ul>\n<\/nav>\n<br>\n<br>\n<br>\n\n\n\n<h3 class=\"wp-block-heading\">3-tier navigation menu &#8211; dropdown<\/h3>\n\n\n\n<p>Eksemplet tager udgangspunkt i eksemplet fra 2nd-tier navigation menu &#8211; dropdown.<\/p>\n\n\n\n<p>Class kan undv\u00e6res. Jeg anvender en, da mine eksisterende menuer ellers bliver p\u00e5virket.<\/p>\n\n\n\n<p><strong>Kodeeksempel<\/strong> -HTML<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;nav class=\"tier_three_menu\">\n   &lt;ul>\n      &lt;li>\n         &lt;a href=\"https:\/\/maxfest.dk\/port\">Home&lt;\/a>\n      &lt;\/li>\n      &lt;li>\n         &lt;a href=\"#\">Placeholder 1&lt;\/a>\n         &lt;ul>\n            &lt;li>\n               &lt;a href=\"#\">Placeholder 2&lt;\/a>\n               &lt;ul>\n                  &lt;li>\n                     &lt;a href=\"#\">Placeholder 3&lt;\/a>\n                  &lt;\/li>\n               &lt;\/ul>\n            &lt;\/li>\n            &lt;li>\n               &lt;a href=\"#\">Placeholder 4&lt;\/a>\n               &lt;ul>\n                  &lt;li>\n                     &lt;a href=\"#\">Placeholder 5&lt;\/a>\n                  &lt;\/li>\n               &lt;\/ul>\n            &lt;\/li>\n         &lt;\/ul>\n      &lt;\/li>\n   &lt;\/ul>\n&lt;\/nav><\/code><\/pre>\n\n\n\n<p> <strong>Kodeeksempel<\/strong> &#8211; CSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>nav.tier_three_menu, ul, li, a{\n   margin: 0;\n   padding: 0;\n}\nnav.tier_three_menu ul{\n   list-style-type: none;\n}\nnav.tier_three_menu ul li{\n   display:inline;\n   position:relative;\n   float:left;\n   text-decoration:none;\n   padding:0 10px;\n}\nnav.tier_three_menu ul ul{\n   display:none;\n   position:absolute;\n   top:100%;\n}\nnav.tier_three_menu ul ul li{\n   width:auto;\n   position:relative;\n   float:left;\n}\nnav.tier_three_menu ul ul li ul{\n   position:absolute;\n   left:100%;\n   top:0;\n}\nnav.tier_three_menu ul li:hover > ul{\n   display:block;\n}<\/code><\/pre>\n\n\n\n<p><strong>Resultat<\/strong><\/p>\n\n\n\n<nav class=\"tier_three_menu\">\n   <ul>\n      <li>\n         <a href=\"https:\/\/maxfest.dk\/port\">Home<\/a>\n      <\/li>\n      <li>\n         <a href=\"#\">Placeholder 1<\/a>\n         <ul>\n            <li>\n               <a href=\"#\">Placeholder 2<\/a>\n               <ul>\n                  <li>\n                     <a href=\"#\">Placeholder 3<\/a>\n                  <\/li>\n                  <li>\n                     <a href=\"#\">Placeholder 4<\/a>\n                  <\/li>\n               <\/ul>\n            <\/li>\n            <li>\n               <a href=\"#\">Placeholder 6<\/a>\n               <ul>\n                  <li>\n                     <a href=\"#\">Placeholder 7<\/a>\n                  <\/li>\n               <\/ul>\n            <\/li>\n         <\/ul>\n      <\/li>\n   <\/ul>\n<\/nav>\n<br><br><br><br><br>\n\n\n\n<h2 class=\"wp-block-heading\">Responsive web design<\/h2>\n\n\n\n<p>Responsive design er design der kan tilpasse sig en sides brede. Det er praktisk til webdesign til f.eks. mobiler (fordi de varierer i bredden).<\/p>\n\n\n\n<p>Responsive design best\u00e5r af 3 komponenter:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Fluid layout<\/li><li>Media queries<\/li><li>Skalerbare billeder<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Design tricks<\/h3>\n\n\n\n<p>Der er mange m\u00e5der at designe responsivt indhold. Murach gav nogle udm\u00e6rkede tips, man med fordel kan f\u00f8lge. Jeg havde nogle tilf\u00f8jelser, der m\u00e5ske vil kunne hj\u00e6lpe nogen.<\/p>\n\n\n\n<p><strong>Murachs tips<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>I stedet for at definere sidebredde med pixels, anvend %.<\/li><li>Skriftst\u00f8rrelser kan med fordel laves relativt ud fra en universel st\u00f8rrelse.<\/li><li>Man kan definere billeders brede i %, s\u00e5ledes at de skalerer. Nedskalering fungerer oftest uden problemer, men for at undg\u00e5 opskaleringsproblemer, b\u00f8r man definere en max-width p\u00e5 billedets faktiske brede.<\/li><\/ul>\n\n\n\n<p><strong>Mine tips<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>I stedet for at bruge %, kan man ogs\u00e5 tage udgangspunkt i vw og vh.<ul><li>vw st\u00e5r for view width, og defineres ud fra sk\u00e6rmbreden, i stedet for parrent elementetet som % g\u00f8r.<\/li><li> vh st\u00e5r for view height, og defineres ud fra sk\u00e6rmh\u00f8jden, i stedet for parrent elementetet som % g\u00f8r.<\/li><\/ul><\/li><li>vw og vh kan anvendes til skrifttyper, s\u00e5ledes at de ogs\u00e5 justeres relativt til sk\u00e6rmst\u00f8rrelsen.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Media queries<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Viewport<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Viewport metadata<\/h4>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"\"><tbody><tr><td><strong>Attribut<\/strong><\/td><td><strong>Egenskab<\/strong><\/td><\/tr><tr><td>width<\/td><td>Siddebredde<\/td><\/tr><tr><td>height<\/td><td>Sideh\u00f8jde<\/td><\/tr><tr><td>initial-scale<\/td><td>Zoomfaktor p\u00e5 siden ved indl\u00e6sning.<\/td><\/tr><tr><td>minimum-scale<\/td><td>Mindste mulige zoomfaktor p\u00e5 siden.<\/td><\/tr><tr><td>maximum-scale<\/td><td>St\u00f8rste mulige zoomfaktor p\u00e5 siden.<\/td><\/tr><tr><td>user-scalable<\/td><td>Boolean for om brugeren kan zoome ind og ud.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>Eksempel<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta name=\"viewport\" content=\"width=device-width, inital-scale=1\"><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">CSS3 media queries<\/h3>\n\n\n\n<p><strong>Syntaks<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media [only] media-type [and (expression-1)] [and (expression-x)] ... { \/* \nCSS *\/}<\/code><\/pre>\n\n\n\n<p><strong>Almindelige media-type v\u00e6rdier<\/strong><\/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>width<\/td><td>Viewportens brede<\/td><\/tr><tr><td>height<\/td><td>Viewportens h\u00f8jde<\/td><\/tr><tr><td>device-width<\/td><td>Sk\u00e6rmens bredde<\/td><\/tr><tr><td>device-height<\/td><td>Sk\u00e6rmens h\u00f8jde<\/td><\/tr><tr><td>orientation<\/td><td>Landscape eller portrait<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>Eksempel<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media only screen and (max-width:1080px) { \/*  CSS *\/}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Opgaver fra undervisningen<\/h2>\n\n\n\n<figure class=\"wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-personlig-procesportfolio\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"ZDMvVIpAHb\"><a href=\"https:\/\/maxfest.dk\/port\/vearker\/hjemmesider\/vertical-and-horizontal-unordered-list\/\">Vertical and horizontal unordered list<\/a><\/blockquote><iframe loading=\"lazy\" title=\"&#8220;Vertical and horizontal unordered list&#8221; &#8212; Personlig procesportfolio\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" src=\"https:\/\/maxfest.dk\/port\/vearker\/hjemmesider\/vertical-and-horizontal-unordered-list\/embed\/#?secret=ZDMvVIpAHb\" data-secret=\"ZDMvVIpAHb\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<figure class=\"wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-personlig-procesportfolio\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"DzYYFZZCSY\"><a href=\"https:\/\/maxfest.dk\/port\/vearker\/hjemmesider\/css-scalable-image\/\">CSS scalable image<\/a><\/blockquote><iframe loading=\"lazy\" title=\"&#8220;CSS scalable image&#8221; &#8212; Personlig procesportfolio\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" src=\"https:\/\/maxfest.dk\/port\/vearker\/hjemmesider\/css-scalable-image\/embed\/#?secret=DzYYFZZCSY\" data-secret=\"DzYYFZZCSY\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<figure class=\"wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-personlig-procesportfolio\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"pSYIiTx1Kz\"><a href=\"https:\/\/maxfest.dk\/port\/vearker\/hjemmesider\/floated-layout\/\">Floated layout<\/a><\/blockquote><iframe loading=\"lazy\" title=\"&#8220;Floated layout&#8221; &#8212; Personlig procesportfolio\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" src=\"https:\/\/maxfest.dk\/port\/vearker\/hjemmesider\/floated-layout\/embed\/#?secret=pSYIiTx1Kz\" data-secret=\"pSYIiTx1Kz\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<figure class=\"wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-personlig-procesportfolio\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"6Quw2vfZts\"><a href=\"https:\/\/maxfest.dk\/port\/vearker\/hjemmesider\/css-media-queries-define-background-color\/\">CSS: Media Queries define background color<\/a><\/blockquote><iframe loading=\"lazy\" title=\"&#8220;CSS: Media Queries define background color&#8221; &#8212; Personlig procesportfolio\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" src=\"https:\/\/maxfest.dk\/port\/vearker\/hjemmesider\/css-media-queries-define-background-color\/embed\/#?secret=6Quw2vfZts\" data-secret=\"6Quw2vfZts\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Noter fra undervisning og forberedelse til HTML5 &amp; CSS3. Noterne d\u00e6kker lister, links, menuer, responsive web design og media queries. Noterne er taget p\u00e5 MMD. Forberedelsesmaterialet Til forberedelsens skulle der l\u00e6ses Murach&nbsp;kapitel 7-8. Desuden skulle metoden afpr\u00f8ves. Lister ul &#8211; uorganiseret liste oi &#8211; nummeret liste li &#8211; listepunkt Liste struktur ul Kodeeksempel Resultat Eksempeltekst&#8230;<\/p>\n","protected":false},"author":1,"featured_media":715,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[18],"class_list":["post-744","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\/744","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=744"}],"version-history":[{"count":55,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/posts\/744\/revisions"}],"predecessor-version":[{"id":1019,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/posts\/744\/revisions\/1019"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/media\/715"}],"wp:attachment":[{"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/media?parent=744"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/categories?post=744"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/tags?post=744"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}