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. |
Links
Absolutte links
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.
Eks. “http://maxfest.dk/port” for at besøge procesportifoliet for Max.
eller “https://maxfest.dk/port/wp-content/uploads/2019/09/Max-Festersen-Hansen-2019.png” for at finde et billede at mig.
Relative links
Relative links er links, der definerer lokationen af indholdet relativt fra hvor det kaldes.
Root-relative links
Root-relative links er links der er relative fra roden af den hjemmeside der indsættes på.
Eks. “/port/” for at gå til procesportfolio fra et vilkårligt sted på procesportfolio.
Eller “/wp-content/uploads/2019/09/Max-Festersen-Hansen-2019.png” for at finde et billede af mig fra et vilkårligt sted på procesportfolio.
Document-relative links
Document-relative links er links der er relative fra filen hvor linket er indsat.
Er indholdet i en mappe, skrives mappenavnet, efterfulgt af “/”. Er indholdet i en overmappe, skal man skrive “…/” for at gå et niveau op.
Eks. “port/” for at gå til procesportfolio fra maxfest.dk.
Eller “port/wp-content/uploads/2019/09/Max-Festersen-Hansen-2019.png” for at finde et billede af mig fra maxfest.dk.
Opbygning af links
Links på hjemmesider anvender a elementet. a elementet er et inline element. Inline elementer er typisk del af et block-element, som div eller p.
a elementer kan bruge relative og absolutte links som værdier til href attributtet.
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:
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