Noter: HTML5 & CSS3 3. gang

NoterMax

Noter fra undervisning og forberedelse til HTML5 & CSS3. Noterne dækker lister, links, menuer, responsive web design og media queries. Noterne er taget på MMD.

Forberedelsesmaterialet

Til forberedelsens skulle der læses Murach kapitel 7-8. Desuden skulle metoden afprøves.

Lister

ul – uorganiseret liste

oi – nummeret liste

li – listepunkt

Liste struktur

ul

Kodeeksempel

<ul>
   <li>
      <p>Eksempeltekst</p>
   </li>
   <li>
      ...
   </li>
</ul>

Resultat

  • Eksempeltekst

  • …

ol

Kodeeksempel

<ol>
   <li>
      <p>Vi har det sjovt</p>
   </li>
   <li>
      <p>Vi har det sjovt</p>
   </li>
   <li>
      <p>Vi har det sjovt</p>
   </li>
</ol>
<ol start="5">
   <li>
      <p>Hov. Vi glemte 4</p>
   </li>
</ol>

Resultat

  1. Vi har det sjovt

  2. Vi har det sjovt

  3. Vi har det sjovt

  1. Hov. Vi glemte 4

Nested liste stuktur

Nested liste er en liste inde i en liste. Det kan gøres for ul, ol eller en kombination deraf.

Kodeeksempel

<ul>
   <li>
      <p>Eksempeltekst</p>
   </li>
   <li>
      <ol>
         <li>
            <p>Vi har det sjovt</p>
         </li>
         <li>
            <p>Vi har det sjovt</p>
         </li>
         <li>
            <p>Vi har det sjovt</p>
         </li>
      </ol>
      <ol start="5">
         <li>
            <p>Hov. Vi glemte 4</p>
         </li>
      </ol>
   </li>
</ul>

Resultat

  • Eksempeltekst

    1. Vi har det sjovt

    2. Vi har det sjovt

    3. Vi har det sjovt

    1. Hov. Vi glemte 4

description lists | deskriptive lister

Lister der har til formål at lave beskrivelser.

dl – deskriptiv liste

dt – term i deskriptiv liste

dd – beskrivelse i deskriptiv liste

Kodeeksempel

<dl>
   <dt>Deskriptive lister</dt>
   <dd>Lister der har til formål at lave beskrivelser.</dd>
</dl>

Resultat

Deskriptive lister
Lister der har til formål at lave beskrivelser.

Formatering af lister

Med css kan lister formateres.

Man kan ændre punktets design med følgende:

  • list-style-type – definerer formen for punkt-kuglen (bullet)
    • Kan defineres som bl.a. disc, circle, square & none
    • Kan defineres som decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman & upper-roman
  • list-style-image – definerer punkt-kuglen som et selvvalgt billede

Kodeeksempel – HTML

<!--HTML-->
<ul class="use_square">
   <li>
      <p>Eksempeltekst</p>
   </li>
   <li>
      ...
   </li>
</ul>
<ul class="use_image">
   <li>
      <p>Eksempeltekst</p>
   </li>
   <li>
      ...
   </li>
</ul>
<ol class="use_lower_aplpha">
   <li>
      <p>Med småt alphabet</p>
   </li>
   <li>
      ...
   </li>
</ol>

Kodeeksempel – CSS

/*CSS*/
.use_square{
   list-style-type: square;
}
.use_image{
   list-style-image: url("http://maxfest.dk/port/wp-content/uploads/2019/09/Max-Festersen-Hansen-2019.png");
}
.use_lower_aplpha{
   list-style-type: lower-alpha;
}

Resultat

  • Eksempeltekst

  • …

  • Eksempeltekst

  • …

  1. Med småt alphabet

  2. …

List alignment

List alignment styres med padding på listeelementet og listepunktet.

Links

Links kan skabes med a elementet.

Links attributter

  • href – relativ eller absolut URL.
  • title – tooltip
  • tabindex – definerer logik for tastatur navigation med tab-knappen.
  • accesskey – identificerer en tast der kan aktivere links, sammen med en browserafhængig kombination af taster.

Kodeeksempel på link med href, title, tabindex og accesskey

<a href="https://maxfest.dk/port" title="Gå til forsiden" tabindex="0" accesskey="q">Home</a>

Resultat

Home

Note: Mozilla har dokumentet hvilke tastekombinationer der skal til for at anvende accesskey.

Note: hover over teksten for at se tooltip.

Pseudo klasser til formatering af links

  • :link – ubesøgt link
  • :visited – besøgt link
  • :hover – element der bliver hoveret på
  • :focus – element der er i fokus, f.eks. fordi linket er blevet trykket på og siden indlæsser
  • :active – element der er aktivt, f.eks. fordi der bliver trykket på det.

Kodeeksempel

/*CSS*/
a:link, a:visited{
   color:#0000FF:
}
a:hover{
   color:#FF0000:
}

Åben links i nye tabs

Tilføj target attribut med værdien “_blank”.

Kodeeksempel

<a href="https://maxfest.dk/port" target="_blank">Home</a>

Resultat

Home

Navigation til element med id og placeholder

Til href attributtet skal værdien være efterfulgt af “#” og navnet på id.

Kodeeksempel

<a href="#">Placeholder</a>
</br>
<a href="#colophon">Footer på denne side</a>
</br>
<a href="https://maxfest.dk/port#colophon">Footer på forsiden</a>

Resultat

Placeholder
Footer på denne side
Footer på forsiden

Links til mediefiler

Man kan linke til bl.a.:

  • application/pdf – PDF
  • audio/x-wave – WAV
  • audio/mpeg / audio/xmpeg – MP3
  • video/mpeg – MPG/MPEG
  • application/x-shockwave-flash – SWF

For at linke til disse, skal linket til deres lokation indsættes som værdi til href attributtet og refferemcem som værdi til type attributtet.

Kodeeksempel

<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</a>

Resultat

Link til Gantt chart gruppe 3 projekt 2

Links med e-mail, telefonnummer eller skype links

Man kan lave links som prøver at interagere med faktorerne.

Som værdi i href attributtet før linket kan man tilføje:

  • mailto – for e-mail adresser
  • tel – for telefoner
  • skype – for skype referencer

Kodeeksempel

<a href="mailto:test@maxfest.dk" type="application/pdf">Send e-mail</a>
</br>
<a href="tel:12345678" type="application/pdf">Ring til nummer</a>
</br>

<a href="skype:12345678test" type="application/pdf">Ring via skype</a>

Resultat

Send e-mail
Ring til nummer
Ring via skype

Menuer

A elementer i en uorganiseret liste.

Vertikalt design

Class kan undværes. Jeg anvender en, da mine eksisterende menuer ellers bliver påvirket, og jeg påvirke efterfølgende resultater.

Kodeeksempel -HTML

<nav class="ex_vertical_menu">
   <ul>
      <li>
         <a href="https://maxfest.dk/port">Home</a>
      </li>
      <li>
         <a href="#">Placeholder</a>
      </li>
      <li>
         <a href="#">Placeholder 2</a>
      </li>
   </ul>
</nav>

Kodeeksempel – CSS

nav.ex_vertical_menu, ul, li, a{
   margin: 0;
   padding: 0;
}
nav.ex_vertical_menu ul{
   list-style-type: none;
}
nav.ex_vertical_menu ul li{
   display:block;
   text-decoration:none;
}

Resultat

Horisontalt design

Class kan undværes. Jeg anvender en, da mine eksisterende menuer ellers bliver påvirket.

Kodeeksempel -HTML

<nav class="ex_horisontal_menu">
   <ul>
      <li>
         <a href="https://maxfest.dk/port">Home</a>
      </li>
      <li>
         <a href="#">Placeholder</a>
      </li>
      <li>
         <a href="#">Placeholder 2</a>
      </li>
   </ul>
</nav>

Kodeeksempel – CSS

nav.ex_horisontal_menu, ul, li, a{
   margin: 0;
   padding: 0;
}
nav.ex_horisontal_menu ul{
   list-style-type: none;
}
nav.ex_horisontal_menu ul li{
   float:left;
   text-decoration:none;
   /* Evt. tilføj padding */
   padding:0 10px;
   /* display:inline kan angives, men ignores pga. float:left */
   display:inline;

}

Resultat

2nd-tier navigation menu – dropdown

Eksemplet tager udgangspunkt i det horisontale eksempel fra før.

Class kan undværes. Jeg anvender en, da mine eksisterende menuer ellers bliver påvirket.

Kodeeksempel -HTML

<nav class="tier_two_menu">
   <ul>
      <li>
         <a href="https://maxfest.dk/port">Home</a>
      </li>
      <li>
         <a href="#">Placeholder 1</a>
         <ul>
            <li>
               <a href="#">Placeholder 2</a>
            </li>
         </ul>
      </li>
   </ul>
</nav>

Kodeeksempel – CSS

nav.tier_two_menu, ul, li, a{
   margin: 0;
   padding: 0;
}
nav.tier_two_menu ul{
   list-style-type: none;
}
nav.tier_two_menu ul li{
   display:inline;
   position:relative;
   float:left;
   text-decoration:none;
   padding:0 10px;
}
nav.tier_two_menu ul ul{
   display:none;
   position:absolute;
   top:100%;
}
nav.tier_two_menu ul ul li{
   float:none;
}
nav.tier_two_menu ul li:hover > ul{
   display:block;
}

Resultat




3-tier navigation menu – dropdown

Eksemplet tager udgangspunkt i eksemplet fra 2nd-tier navigation menu – dropdown.

Class kan undværes. Jeg anvender en, da mine eksisterende menuer ellers bliver påvirket.

Kodeeksempel -HTML

<nav class="tier_three_menu">
   <ul>
      <li>
         <a href="https://maxfest.dk/port">Home</a>
      </li>
      <li>
         <a href="#">Placeholder 1</a>
         <ul>
            <li>
               <a href="#">Placeholder 2</a>
               <ul>
                  <li>
                     <a href="#">Placeholder 3</a>
                  </li>
               </ul>
            </li>
            <li>
               <a href="#">Placeholder 4</a>
               <ul>
                  <li>
                     <a href="#">Placeholder 5</a>
                  </li>
               </ul>
            </li>
         </ul>
      </li>
   </ul>
</nav>

Kodeeksempel – CSS

nav.tier_three_menu, ul, li, a{
   margin: 0;
   padding: 0;
}
nav.tier_three_menu ul{
   list-style-type: none;
}
nav.tier_three_menu ul li{
   display:inline;
   position:relative;
   float:left;
   text-decoration:none;
   padding:0 10px;
}
nav.tier_three_menu ul ul{
   display:none;
   position:absolute;
   top:100%;
}
nav.tier_three_menu ul ul li{
   width:auto;
   position:relative;
   float:left;
}
nav.tier_three_menu ul ul li ul{
   position:absolute;
   left:100%;
   top:0;
}
nav.tier_three_menu ul li:hover > ul{
   display:block;
}

Resultat






Responsive web design

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).

Responsive design består af 3 komponenter:

  • Fluid layout
  • Media queries
  • Skalerbare billeder

Design tricks

Der er mange måder at designe responsivt indhold. Murach gav nogle udmærkede tips, man med fordel kan følge. Jeg havde nogle tilføjelser, der måske vil kunne hjælpe nogen.

Murachs tips

  • I stedet for at definere sidebredde med pixels, anvend %.
  • Skriftstørrelser kan med fordel laves relativt ud fra en universel størrelse.
  • Man kan definere billeders brede i %, således at de skalerer. Nedskalering fungerer oftest uden problemer, men for at undgå opskaleringsproblemer, bør man definere en max-width på billedets faktiske brede.

Mine tips

  • I stedet for at bruge %, kan man også tage udgangspunkt i vw og vh.
    • vw står for view width, og defineres ud fra skærmbreden, i stedet for parrent elementetet som % gør.
    • vh står for view height, og defineres ud fra skærmhøjden, i stedet for parrent elementetet som % gør.
  • vw og vh kan anvendes til skrifttyper, således at de også justeres relativt til skærmstørrelsen.

Media queries

Viewport

Viewport metadata

AttributEgenskab
widthSiddebredde
heightSidehøjde
initial-scaleZoomfaktor på siden ved indlæsning.
minimum-scaleMindste mulige zoomfaktor på siden.
maximum-scaleStørste mulige zoomfaktor på siden.
user-scalableBoolean for om brugeren kan zoome ind og ud.

Eksempel

<meta name="viewport" content="width=device-width, inital-scale=1">

CSS3 media queries

Syntaks

@media [only] media-type [and (expression-1)] [and (expression-x)] ... { /* 
CSS */}

Almindelige media-type værdier

EgenskabBeskrivelse
widthViewportens brede
heightViewportens højde
device-widthSkærmens bredde
device-heightSkærmens højde
orientationLandscape eller portrait

Eksempel

@media only screen and (max-width:1080px) { /*  CSS */}

Opgaver fra undervisningen

Vertical and horizontal unordered list
CSS scalable image
Floated layout
CSS: Media Queries define background color