Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
700f1d9701 | ||
|
|
c599a53409 | ||
|
|
77e644f628 | ||
| ba7086e579 |
13
about.html
13
about.html
@@ -5,8 +5,9 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>About</title>
|
||||
<link rel="shortcut icon" href="assets/favicon.svg" type="image/svg+xml">
|
||||
<link rel="shortcut icon" href="img/favicon.svg" type="image/svg+xml">
|
||||
<!-- Royalty free icon, source: https://pixabay.com/vectors/flat-design-symbol-icon-www-2126879/ -->
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -19,7 +20,13 @@
|
||||
<h2>This is me</h2>
|
||||
</header>
|
||||
|
||||
<img src="./assets/html_joke.jpg" alt="An html joke">
|
||||
<img
|
||||
src="./img/html_joke.jpg"
|
||||
alt="An html joke"
|
||||
id="htmlJoke"
|
||||
style="border-width: 6px;"
|
||||
>
|
||||
<!-- Increased to 6px assuming default border-width "medium" at 96dpi is about 4px, https://www.sitepoint.com/community/t/pixel-equivelant-of-border-width-thin-medium-thick/4225/2 -->
|
||||
<!-- Source: http://funnygeekjokes.blogspot.com/2013/02/how-to-tell-html-from-html5-joke.html -->
|
||||
|
||||
<p>
|
||||
@@ -64,4 +71,4 @@
|
||||
<footer>Created by: Øystein Tveit</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
141
article.html
Normal file
141
article.html
Normal file
@@ -0,0 +1,141 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Te</title>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="css/article.css">
|
||||
</head>
|
||||
<body>
|
||||
<article>
|
||||
<img id="cover" src="img/te.png" alt="Cover image" />
|
||||
|
||||
<header>
|
||||
<h1>Te</h1>
|
||||
<p>Tekst: Offline/Thor Håkon "tepose" Bredesen</p>
|
||||
<p>Publisert: <time datetime="2014-02-15">2 februar, 2014</time></p>
|
||||
</header>
|
||||
|
||||
<section id="intro">
|
||||
<p>Du har neppe sett meg ta en slurk kaffe, for jeg liker ikke
|
||||
kaffe. Te derimot, det liker jeg. La meg ta deg med på en kort og overfladisk
|
||||
reise inn i teens verden.</p>
|
||||
|
||||
<p>Tedrikking står sterkt i mange av verdens kulturer. For flere
|
||||
tusen år siden ble te brukt som medisin i Kina. I de seneste tiårene har
|
||||
forskere startet å se på hva som gjør te bra. Te er også blitt en sosial drikk,
|
||||
eller noe du koser deg med alene. For te har mange gode egenskaper som gjør det
|
||||
til en sunn drikk, i tillegg til å smake godt.</p>
|
||||
</section>
|
||||
|
||||
<aside id="facts">
|
||||
<ul>
|
||||
<li>Det amerikanere kaller svart te kaller kineserne for rød te <sup>[<a href="#bib1">1</a>]</sup>.</li>
|
||||
<li>Britene drikker omtrent 165 millioner kopper med te hver dag <sup>[<a href="#bib2">2</a>]</sup>.</li>
|
||||
<li>Før 1800-tallet ble te brukt som en valuta i Siberia <sup>[<a href="#bib3">3</a>]</sup>.</li>
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
<section>
|
||||
<h2>Te er ikke bare te</h2>
|
||||
<p>Te er ikke te, eller, te er te, men ikke alt du tror er te er
|
||||
te. Den harde sannheten er at te kommer fra planten Camellia sinensis, og gjør
|
||||
den ikke det er det ikke te. «Hva med frukt- og urtete?», tenker du kanskje.
|
||||
Sorry kompis, det er kun infusjon, tørkede frukter og urter blandet med varmt
|
||||
vann!</p>
|
||||
|
||||
<p>Men før du hopper på toget mitt og proklamerer alt som ikke
|
||||
kommer fra den nevnte planten som «ikke ordentlig te», la meg fortelle deg at
|
||||
også te er infusjon, siden det er blandet med vann, men det kommer i hvert fall
|
||||
fra teplanten. Fra Camellia sinensis får vi grønn, hvit, oolong og svart te. De
|
||||
har vidt forskjellige smaker og utseende, til tross for at de kommer fra samme
|
||||
plante. Forskjellen ligger i hvordan de blir behandlet etter at de er høstet,
|
||||
og også når de blir høstet.</p>
|
||||
|
||||
<p>Når det lages svart te blir tebladene delvis tørket, rullet,
|
||||
fermentert (gjæret) og så tørket helt. Grønn te blir først dampet for at den
|
||||
ikke skal gjære, og så blir den rullet og tørket. Oolong te blir fremstilt som
|
||||
sort te, men gjærer kortere. Hvit te plukkes kun to ganger i året, og blir kun
|
||||
tørket. Det er også den dyreste tesorten av de fire.</p>
|
||||
|
||||
<p>Te deles inn i ulike kvaliteter. Den høyeste kvaliteten består
|
||||
av hele blader. Når tebladene knuses, som gjøres for å lage posete, kalles teen
|
||||
for broken. Den laveste kvaliteten av te kalles fannings og dust. Som navnet
|
||||
tilsier er dette de skarve restene som ligger igjen etter at teen er blitt
|
||||
sortert og knust. Teposer du kjøper i dagligvarebutikkene er som regel fannings
|
||||
eller dust. Søsteren min, som er en ihugga tenerd, ser for seg denne kvaliteten
|
||||
som oppsopet fra gulvet etter at teen som er verdt å drikke er blitt sortert.
|
||||
Hun drikker ikke mye posete.</p>
|
||||
|
||||
<p>Det er verdt å merke at fannings av eksklusive teblader
|
||||
riktignok kan være både dyrere og mer smaksrike enn hele blader av billige
|
||||
tevarianter.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Tehverdagen</h2>
|
||||
<p> Behandlingen tebladene gjennomgår etter høsting påvirker smak
|
||||
og utseende, men det påvirker også nivået av koffein og hvilke helseeffekter
|
||||
teen har. Svart te har mest koffein i seg, omtrent halvparten av en normal
|
||||
kaffekopp. Grønn te har halvparten så mye koffein som svart te, og hvit te har
|
||||
nesten ikke noe koffein i seg. Svart te og oolong er oppkvikkende, mens hvit og
|
||||
grønn te er beroligende. Om du har en treg fordøyelse kan både grønn te og
|
||||
svart te sette fortgang i systemet. Te kan virke mot karies og munnsykdommer,
|
||||
det gjelder dog bare om du ikke drikker det med sukker eller honning. Sist, men
|
||||
ikke minst, senker inntak av te blodtrykket.</p>
|
||||
|
||||
<p> Jeg spurte søsteren min om hennes tevaner for å få et inntrykk
|
||||
av hva som passer å drikke når. Her er en kort oppsummering av hennes
|
||||
tehverdag, fortalt av henne.</p>
|
||||
|
||||
<blockquote>– Jeg drikker svart te om morgenen, litt for å våkne, men også
|
||||
fordi jeg liker kraftigere smaker tidlig på dagen, og litt fordi jeg som folk
|
||||
flest er et vanedyr. Denne teen smaker godt til brødmat, knekkebrød, scones, og
|
||||
den slags. Det smaker også godt til en cookie, det kan jeg ikke nekte for.
|
||||
Favoritten er masala chai, eller chai te som de fleste kaller det. Det er en
|
||||
svart te som er tilsatt krydder. Chai er ordet for te på mange språk, blant
|
||||
annet arabisk, bulgarsk, hindu, russisk og urdu. Så når folk ber om chai te ber
|
||||
de om te te. Tantebarna mine kaller dette for pepperkakete, for det er det det
|
||||
lukter som. I Kina sier de forresten cha. Chai er et kinesisk etternavn, men
|
||||
det er en digresjon. Når jeg drikker svart te bruker jeg honning og suketter,
|
||||
som skaper søthet og forsterker smaken på hver sin måte. Jeg liker også å ha
|
||||
melk i for å få en rundere smak. Om kvelden drikker jeg som oftest grønn
|
||||
smaksatt te, som bidrar til ro. Salte ting er overraskende godt til grønn te,
|
||||
prøv det til popcorn eller potetgull.</blockquote>
|
||||
|
||||
<p>Ulike typer te skal også tilberedes forskjellig for å få den
|
||||
beste smaken. Her skal du få noen generelle råd, kjære leser. Svart te er i
|
||||
grunn den eneste teen som skal trekkes i kokt vann. Oolong skal trekkes på 90
|
||||
grader, mens hvit og grønn te skal trekke på 80 grader. Hvor lenge teen skal
|
||||
trakte varierer også fra tetype til tetype. Om du ønsker en sterkere smak, ha
|
||||
mer te i koppen, ikke la den trekke lengre. Om den trekker for lenge blir den
|
||||
bitter, og det er ikke godt. For teer som allerede er litt bitre, slik som
|
||||
svart te, er det godt med noe søtt oppi, honning, sukketter eller sukker.
|
||||
Bitter te passer godt til søte kaker, ellers blir det for mye søtt.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Verdens beste infusjon</h2>
|
||||
<p>For å ikke ekskludere te som ikke er te vier jeg litt
|
||||
spalteplass til rooibush, urte- og fruktte også. Rooibush kommer fra en plante
|
||||
som vokser i Afrika. Den brukes på samme måte som te fra Camellia Sinensis, og
|
||||
er svært rik på antioksidanter. I motsetning til te blir den ikke besk ved å
|
||||
trekke for lenge.</p>
|
||||
|
||||
<p>Om du liker tesmaken, og du liker lakris, anbefaler jeg deg å
|
||||
kjøpe urteblandingen Frisk Mint fra Te og Kaffehuset i Trondheim. Jeg skal ikke
|
||||
skryte så mye at du blir skuffet når du drikker den, men om den er tilberedet
|
||||
riktig er det kanskje verdens beste infusjon (helt objektivt altså). Jeg smilte
|
||||
første gang jeg drakk den, og jeg smiler fortsatt!</p>
|
||||
</section>
|
||||
|
||||
<section class="bibliography">
|
||||
<h2>Referanser</h2>
|
||||
<ol>
|
||||
<li id='bib1'>Goodwin, L., Red Tea. Tilgjengelig fra: <a href="http://coffeetea.about.com/od/Tea-Glossary/g/Red-Tea.htm" target="_blank">about.com</a> [Åpnet 2016–5].</li>
|
||||
<li id='bib2'>Ukjent, UK Tea & Infusions Association - Tea Glossary and FAQ’s. Tilgjengelig fra: <a href="https://www.tea.co.uk/tea-faqs" target="_blank">tea.co.uk</a> [Åpnet 2016–5].</li>
|
||||
<li id='bib3'>Bresset, K., Tea Money Of China. Tilgjengelig fra: <a href="http://www.charm.ru/coins/misc/teamoney.shtml" target="_blank">Charm.ru</a> [Åpnet 2016–5a].</li>
|
||||
</ol>
|
||||
</section>
|
||||
</article>
|
||||
</body>
|
||||
</html>
|
||||
62
css/article.css
Normal file
62
css/article.css
Normal file
@@ -0,0 +1,62 @@
|
||||
:root{
|
||||
/*
|
||||
The average character is more narrow than 0 using these fonts.
|
||||
I ended up picking 60ch based on testing different sizes and
|
||||
finding the word count of the longest and shortest line.
|
||||
*/
|
||||
--articleWidth: 60ch
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Georgia, Verdana;
|
||||
background: lightgray;
|
||||
color: #323232;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
article {
|
||||
width: var(--articleWidth);
|
||||
margin: auto;
|
||||
font-size: 22px
|
||||
}
|
||||
|
||||
#cover {
|
||||
width: var(--articleWidth);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
margin-block-end: 0em;
|
||||
}
|
||||
|
||||
/* This will remove the space between the title and the byline entirely
|
||||
header > p:first-of-type {
|
||||
margin-block-start: 0em;
|
||||
}
|
||||
*/
|
||||
|
||||
header {
|
||||
border-bottom: solid 2px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
p, blockquote, ul, ol {
|
||||
font-size: 1em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
#facts {
|
||||
margin: 1em 0em 1em 1em;
|
||||
width: 50%;
|
||||
border: 1px dashed;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#facts > ul {
|
||||
list-style-image: url('../img/cup-icon.svg');
|
||||
line-height: 1.5em;
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
17
css/style.css
Normal file
17
css/style.css
Normal file
@@ -0,0 +1,17 @@
|
||||
body {
|
||||
background: #EEEEEE
|
||||
}
|
||||
|
||||
header {
|
||||
font-family: 'Times New Roman', Arial;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: 'Noto Serif', Helvetica, Arial;
|
||||
}
|
||||
|
||||
#htmlJoke {
|
||||
max-width: 150px;
|
||||
border: solid;
|
||||
border-color: red;
|
||||
}
|
||||
1
img/cup-icon.svg
Normal file
1
img/cup-icon.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg width="12" height="12" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1600 640q0-80-56-136t-136-56h-64v384h64q80 0 136-56t56-136zm-1664 768h1792q0 106-75 181t-181 75h-1280q-106 0-181-75t-75-181zm1856-768q0 159-112.5 271.5t-271.5 112.5h-64v32q0 92-66 158t-158 66h-704q-92 0-158-66t-66-158v-736q0-26 19-45t45-19h1152q159 0 271.5 112.5t112.5 271.5z"/></svg>
|
||||
|
After Width: | Height: | Size: 382 B |
|
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 5.8 KiB |
|
Before Width: | Height: | Size: 104 KiB After Width: | Height: | Size: 104 KiB |
BIN
img/te.png
Normal file
BIN
img/te.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
29
questions.md
Normal file
29
questions.md
Normal file
@@ -0,0 +1,29 @@
|
||||
# Questions
|
||||
|
||||
## 1. Why does inline style CSS override rules defined in style elements and external stylesheets?
|
||||
|
||||
inline style CSS overrides external stylesheets because it's the most specific ruleset. Rules from external stylesheets might match the object, but if you know that this specific element should be styled differently, it could be written explicitly in the tag options of the element. However, best practise would be to use an ID.
|
||||
|
||||
## 2. Give a brief example of when to use ID ( #id ) and when to use classes ( .class ) in CSS.
|
||||
|
||||
ID is used when there's a piece that only occurs once on the page. A class is used for common parts that will occur several times. Let's take youtube as an example. The search bar, the logo in the header and the video is something that will only occur once. Those are good opportunities to use IDs. Comments and suggested videos however, will show up multiple times. Using classes is a good way to reach these pieces with JS and CSS. Sometimes, people confuse tags with classes. Tags are used in the same way as classes to mark several elements of the same type. But it is good practise to only use the standard HTML tags defined by WHATWG and use classes for any custom recurring parts that you have defined yourself. It makes it easier to define objects with several classes at once, and it's what's expected by most browsers (even though most browsers are able to handle custom tags too.)
|
||||
|
||||
## 3. What does RGBA mean and what colors can you express with it?
|
||||
|
||||
RGBA is an acronym meaning "Red, Green, Blue, Alpha" where the three first represent subpixel brightness values and the fourth represents opacity. With the RGB colors, you can express most colors that anyone can think of on the top of their head. Usually, we express them with a bitdepth of 8, meaning you can specify each individual color value to a range of 2^8 values -> between 0 and 255. With the alpha channel added, we can also specify how transparent the color should be. This is especially useful for things like non-square icons, watermarks and in web development - see-through floating windows. An example of a color that could be expressed with RGBA would be a 50% seethrough yellow, RGB(255,255,0, 127), or with alternative hexadecimal syntax -> #FFFF007f.
|
||||
|
||||
Note that the actual amount of colors you can express with RGBA depends on several other factors like your monitor, the colorspace, the brightness in the room you're sitting
|
||||
|
||||
|
||||
|
||||
## 4. Why do we include CSS files inside the head element and not inside the body element?
|
||||
|
||||
We include the CSS into the head element in order to separate content and settings/metadata. Information like styling, scripts, and metadata should not be mixed with the content, and is therefore specified in the `<head>` before the `<body>`
|
||||
|
||||
## 5. What CSS selector matches all the p elements inside the article element in the following HTML?
|
||||
|
||||
```HTML
|
||||
article p {}
|
||||
```
|
||||
|
||||
This specifies all `<p>` elements inside the `<article>`, in contrast to `article > p {}` which would only specify `<p>` elements directly beneath the `<article>`.
|
||||
Reference in New Issue
Block a user