HTML5 & CSS3 – 2. gang: noter fra forberedelsesmateriale og undervisning

Noter i HTML5 & CSS3. Noter taget efterår 2019. Forberedelsesmaterialet bestod af kapitel 3 side 110-119, kapitel 5 og kapitel 6 i HTML5 & CCS3 af Murach. Materialet dækker 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å UCL) er en fortsættelse af HTML5 & CSS3 planen fra modul 1. Planen foregår i modul 2 i efteråret 2019 som del af Multimediedesigner uddannelsen på UCL. Undervisningen blev afholdt af Thomas Bøye Jessen.

HTML5 semantiske elementer

HTML5 semantiske elementer bør bruges hvor de passer bedst ind for at forbedre SEO på hjemmesider. Det er nemmest at lære de semantiske elementer fra starten.

HTML 5 semantiske elementer øger også læsbarheden i koden, da det bliver nemmere at genkende segmenter/grupperinger på baggrund af deres funktion.

Semantiske HTML5 elementer til sektioner.

Element	Indhold
header	Sidehovedet.
main	Hovedindholdet.
section	Generisk sektion, der ikke indikerer typen af indholdet.
article	Indhold der har samme komposition som i en artikel.
nav	En sektion hvor en hvor der linkes til andre sider eller placeholders.
aside	En sektion der er relateret til indholdet omkring det.
footer	Sidefoden.

Semantiske HTML5 elementer til indhold.

Der findes andre semantiske HTML5 elementer til indhold, men disse er nogle af de mest praktiske.

Element	Indhold
time	Dato eller tid der kan blive analyseret/håndteret af en browser.
figure	Illustration, diagram, billede eller andet indhold der er refereret til fra hovedindholdet.
figcaption	Billedtekst der identificerer en figur.

Attributter af time	Beskrivelse
datetime	Dato og tid i et standardiseret format der kan håndteres af en browser.
pubdate	En boolesk værdi der indikerer at datoen er en indikation om publikations tidspunktet af artiklen, hvori elementet er placeret.

div & span

div og span har traditionelt været anvendt til at strukturere sider på samme måde som man anvender HTML5 semantiske elementer.

Det er godt at kende til div og span da man med stor sandsynlighed vil støde på dem i eksisterende projekter og på mange hjemmesider.

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ærdier til at indikere hvilket type indhold der er deri.

Man bør bruge div til sektioner der ikke er dækket af semantiske HTML5 elementer.

span er et inline element. span bør kun bruges til at formatere inline indhold inde i p elementer, såfremt et HTML5 tag ikke eksisterer til den ønskede brug.

Både div og span kan blive påvirket af CSS.

Element	Indhold
div	Inddeling af sideindhold.
span	Inddeling af tekstindhold.

Baggrunde

Man kan definere både farver og billeder som baggrunde. Der findes utallige egenskaber for baggrunde, og kun få er dækket i bogen.

Herunder er nogle:

background
background-image
background-color
background-repeat
background-attachment
background-position

Man kan bedst definere farven i background eller background-image. Man kan bedst definere baggrundsbilleder i background eller background-image.

Man kan definere en gradient i background-image, ved at lave et billede med en linear-gradient. Et godt sted at lære mere om dette er Ultimate CSS Gradient Generator via colorzilla.

Boxmodellen

En box

Indholdet ligger inderst, og har en højde 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.

Højden af et element er defineret af height, top-margin, top-border, top-padding, bottom-margin, bottom-border & bottom-padding.

Bredden af et element er defineret af width, left-margin, left-border, left-padding, right-margin, right-border & right-padding.

Eksempel:

Indhold

I det overstående eksempel forholder det sig således:

Indholdet er markeret med blå baggrund.
Padding er markeret med grøn baggrund.
Border er markeret med sort kanfrave.
Margin er markeret med rød baggrund fra det bagvedliggende element.

#outer_div {
   float: left;
   width: 100%;
   background-color: #FF0000;
}
#main_div {
   width: calc(100% - 30px);
   height: 50px;
   line-height: 20px;
   padding: 10px;
   border: solid 5px #000;
   margin:15px;
   background-color: #00FF00;
   color: #FFF;
}
#inner_div {
   width:100%;
   background-color: #0000FF;
}

Margin

Margin er afstanden fra border. Margin består af margin-top, margin-right, margin-bottom og margin-left. Man kan også definere dem alle med margin.

Definerer man kun en værdi i margin, vil alle retninger have samme margin. Skriver man 2 værdier, vil top og bund blive defineret sammen, og det samme med left og right. Skriver man 4 værdier defineres alle retninger individuelt.

F.eks. kan man skrive:

Eksempel 1. Margin defineret med margin-top, margin-right, margin-bottom og margin-left i margin-top, margin-right, margin-bottom og margin-left.

.example {
   margin-top: 10px;
   margin-right: 15px;
   margin-bottom: 10px;
   margin-left: 15px;
}

Eksempel 2. Margin defineret med margin-top, margin-right, margin-bottom og margin-left i margin.

.example {
   margin: 10px 15px 10px 15px;
}

Eksempel 2. Margin defineret med fælles margin-top & margin-bottom og margin-right & margin-left i margin.

.example {
   margin: 10px 15px;
}

Padding

Padding er afstanden mellem indhold og border.

Padding er, ligesom margin, bestående af 4 dele. Padding består af padding-top, padding-right, padding-bottom og padding-left. Man kan også definere dem alle med padding.

Padding opsættes på samme måde som margin, og følger tilsvarende regler.

Border

Border er kanten mellem padding og margin.

Border bredden består af borer-width. højre 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.

F.eks. vil et typisk border definition se således ud:

.border-example {
   border: 2px solid #000000;
}
/*Or*/
.border-example {
   border-width: 2px;
   border-style: solid;
   border-color: #000000;
}

Border ville se således ud på en div med 100px height og width:

Og med en border-radius på 4px:

Grænser for width og height

height og width definerer absolutte værdier i forhold til elementet de er placeret i. height og width er begge som udgangspunkt auto som værdi, der beregner højde/brede ud fra indholdets størrelse.

Man kan definere mindste og maksimalle størrelser for både width og height. For height kan man bruge min-height og max-height. For width kan man bruge min-width og max-width.

CSS sidelayout

Css kan lagres på 3 måder.

I en ekstern fil der linkes til fra f.eks. header i HTML fil.
I headeren på HTML filen.
Inline i HTML.

Float

Som udgangspunkt vil block indhold rette sig ind fra sidens top til sidens bund, og inline indhold vil rette sig fra venstre mod højre. Ved at tilføje en float kan man bryde strukturen ved at få et element til at ligge sig på en måde der ikke var tiltænkt.

Plads der bliver fri fra at have givet en float til et element, kan fyldes af andre elementer der er plads til. Ønsker man at fylde denne plads, kan man anvende clear.

I bogen fra s. 204 til 221 er der en række eksempler på sidestrukturer der anvender float. Jeg vil ikke gennemgå disse.

Tekst koloner

I CSS3 er det relativt nyt at det er muligt at definere koloner. Dette kan gøres med:

Egenskab	Beskrivelse
column-count	Antal kolonner.
column-gap	Bredden mellem kolonner.
column-rule	Definerer kanten mellem kolonner.
column-span	Definerer antal, brede og kant. Bemærk: column-span ikke er supporteret i Firefox.

Eksempel med fast bredde, 3 kolonner, grøn kant, 30px afstand og placeholder tekst fra baconipsum:

p{
   width: 600px;
   column-count: 3;
   column-gap: 30px;
   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.
Rump 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.
Beef 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.

Position

position egenskabet definerer hvordan elementer vil blive positioneret.

Positionerings elementer

Egenskab	Beskrivelse
position	Definerer position. Se næste tabel.
top	Definer afstanden eller offset fra toppen, afhængigt af hvad hvilken værdi position har.
bottom	Definer afstanden eller offset fra bunden, afhængigt af hvad hvilken værdi position har.
left	Definer afstanden eller offset fra venstre, afhængigt af hvad hvilken værdi position har.
right	Definer afstanden eller offset fra højre, afhængigt af hvad hvilken værdi position har.
z-index	Definerer niveauet hvorpå et element eksisterer. En lav værdi betyder at elementet vil ligge lavt. Omvenendt vil en høj værdi betyde at elementet vil ligge øverst.

position værdier

Værdi	Beskrivelse
static	Placerer elementet i det normale flow for dokumentet.
absolute	Placerer elementet relativt til det nærmeste block der også er positioneret. Positionen kan justeres med top, bottom, left og right.
fixed	Placerer elementet relativt til browservinduet. Positionen kan justeres med top, bottom, left og right.
relative	Placerer elementet relativt til det normale flow. Positionen kan justeres med top, bottom, left og right.

Ressourcer til videre læring

nemprogrammering.dk
Youtube.com (søg efter hjælp eller undervisning)
W3Schools
Sololearn (findes også som app)
LinkedIn-learning
Code academy
Stack Overflow