HTML5 & CSS3: noter fra forberedelsesmateriale og undervisning

Til undervisningen skulle HTML5 & CCS3, kap. 1 s 4-11, 14-19 & 26-28, & kap. 2 af Murach, læses.

Jeg bemærkede at meget af materialet der dækkes i materialet er forældet. Mine noter er derfor ikke retvisende overfor materialet. Noterne dækker det samme emnefelt, men med mere opdateret viden, og indhold der passer til landskabet i dag.

Internettet

Internettet består af mange sammenkoblede WAN. WAN (Wide Area Network) består 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).

Hjemmesider

En hjemmeside loader direkte fra en server. Kun udviklere kan ændre den initielle indlæsning. Når en bruger indlæser ved en side (via link), laves et http request (HyperText Transfer Protocol). Når en enhed modtager denne request, så vil den render en hjemmeside, oftest HTML (HyperText Markup Language), og så sende det tilbage til brugeres enhed.

How a web server processes a static web page. Client browser sends HTTP request and gets a HTTP response from Web server, with HTML.
HTML5 & CCS3 af Murach , s. 7

Der er forskel på dynamiske og statiske kald. I Dynamiske kald, sker det samme, som beskrevet ovenfor, men vil tilmed også lave kald fra serveren, til databasen, og omvendt, afhængig af brugeres handlinger.

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.
HTML5 & CCS3 af Murach , s. 9

Web browser

En web browser er det der viser hjemmesider. Den mest populære er Google Chrome. De andre mest brugte er Internet Explorer, Firefox, Safari og Opera. Note: i dag er Edge også populær.

Når man udvikler indhold til internettet, så bør man udvikle til alle populære platforme. Udviklere bør også vælge et server-side scripting sprog. F.eks. PHP eller ASP.NET.

HTML & CSS

HTML definerer strukturen på 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å en hjemmeside, er defineret i body. Der er flere HTML standarder, heriblandt HTML 5 og XHTML. I dag anvendes stort set kun HTML5.

I CSS (Cascading Style Sheet) kan man definere udseendet af en HTML side. Det er et eksternt dokument, men man kan også 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å forskellige CSS standarder. I dag anvendes stort set kun CSS3.

Web standarder

Der er 2 vigtige grupper man bør være bekendt med indenfor web standarder: W3C og WHATWG.

Tilgå hjemmesider

En måd er er at indtaste en URL (Uniform Resource Locator). En anden måde er at klikke på links. Et link består af en URL Adresse. URL adresser består af en protocol, f.eks. HTTP, et domæne navn, derefter sti og til sidst filnanvn og filtype. Valgfrit kan man tilføje www mellem protocol og domænenavnet. Filnavne kan unlades hvis de heder index.html eller index.php. Filnavne kan også ulades afhænigt af hvordan man har derfineret sin htacess fil.

Eks. https://www.maxfest.dk/port/index.php

  • Ptotocol: http://
  • WWW: www.
  • Domæne: maxfest.dk
  • Sti: /port/
  • Filnavn: index
  • Fultype: .php

I eksemplet kunne man undlade www, filnavn og filtype. Linket kunne se således ud. https://maxfest.dk/port

Ønsker man at have god søgeoptimering, så bør man navngive sine filer med navne der giver mening i forhold deres indhold og formål.

Indtaster man ikke det fulde link, så udfylder de fleste hjemmesider selv protokollen.

Source code

I de fleste browsere kan man tilgå koden som har genereret din visning. I chrome kan der nemmest opnås ved at anvende højreklik og trykke på undersøg/inspect på et element, og så navigere derfra. Man kan også trykke CRTL + SHIFT + I. Eller bruge options knappen, så navigere til flere værktøjer og så vælge udviklingsværktøjer.

Kodning af HTML

En HTML-fil består som tidligere nævnt af en doctype, head sektion og body sektion.

White space vil blive ignoreret. White space er alt den plads man bruger på linjeskift og mellemrum, hvor man ikke skriver indhold.

Tags

Indhold består af tags. Tages skrives mellem klammer/krokodiller. F.eks. tekst skrives som p, således: <p>. Tags skal oftest afsluttes, hvilket gøres med en skråstreg i med et tilsvarende tag man prøver at lukke. F.eks. </p> til at lukke den tekst vi startede tidligere.

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. <div><p><img></p></div>.

I HTML5 anvender man sektionstags. F.eks.

  • nav er en sektion til navigationen.
  • header til headersektionen.
  • sektion til til en sektion.
  • footer til footeren.
  • article til brødtekst, artikler eller hovedindhold.
  • aside til sidebars.

alt-tags bør anvendes. Disse er godt for brugervenlighed (f.eks. blinde mennesker) og SEO.

Attributter

Attributter er definitioner efter tagget. Det kan være ID, klasser, booleans og mere. Et attribut kan have en værdi. For at give en attribut en værdi indsætter man et ligemed teng efter, og værdien i kvotering. F.eks. <div id=”header”>. Boolean værdier (værdier der enten er sande eller falske) behøver ingen værdi. Der kan være flere attributter, man adskiller dem med mellemrum. F.eks. <div id=”header” class=”main”>.

Til kvoteringen af værdier 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.

Udkommentering og kommentarer

Man kan skjule kode og indhold ved at skrive <!– og slutte af med –>- Alt i mellem vil ikke blive vist i outputtet. Man kan bruge dette til at fjerne en sektion eller skrive kommentarer i sin kode.

Validering

Man kan bruge eksterne værktøjer som f.eks. https://validator.w3.org/.

CSS kodning

I CSS definerer man selector og angiver en property (egenskab) og tilhørende value (værdi).

Efter selectoren skrives der en delecation block, hvilket består af klammer ({ & }) og en eller flere declarations. Declarations består af property, kolon, værdi(er) og semikolon.

F.eks.

p {
   font-family: sans-serif;
}

I ovenstående eksempel gælder:

  • Selector: P
  • Delecation block: { font-family: sans-serif; }
  • Declaration: font-family: sans-serif;
  • Property: font-family
  • Værdi: sans-serif

I CSS kan man skrive kommentarer. Kommentarerer starter med /* og slutter med: */

Ligesom i HTMl, så vil white space vil blive ignoreret.

Indhold kan blive valgt på baggrund af attributter. De 2 mest populære ID og Clases bruger henholdsvis # og . til reference i CSS, efterfulgt af værdien. F.eks.:

HTML

<div id="header">
   <div class="point">
      <p>1</p>
   </div>
   <div class="point">
      <p>2</p>
   </div>
   <div class="point">
      <p>3</p>
   </div>
</div>

CSS

#header {
   float: left;
   width: 100%:
}
.point {
   height:200px;
}
.point p {
   font-family: serif;
}

Validering

Man kan bruge eksterne værktøjer som f.eks. https://jigsaw.w3.org/css-validator/.

Udvikling til browsere på MMD

På Multimediedesign uddannelsen på UCL bør eleverne:

  • udvikle til den målgruppe der anvender en browser. Hvis f.eks. 20% anvender firefox, så bør man teste sin side i firefox. Før i tiden var det et bøvl, men i dag er det nemmere.
  • udvikle responsive løsninger (fordi vi ikke kan vide hvilke skærmstørrelser brugerne kommer til at have).
  • udvikler man i HTML5, og anvender ikke tabel eller div struktur.
  • udvikle brugervenlige løsninger. WCAG, Nobanet Usability Guidelines eller anden standard bør følges.