Human-Computer Interaction
Track B: HTML & CSS
Clemens Nylandsted Klokmose – September 15th 2021
Learning goals
• Basic idea of what HTML is
• What is a tag
• What kind of tags are there (not exhaustive!)
• What CSS is
• How to create basic CSS rules
• The box model of CSS
HTML
Hypertext Markup Language
Anatomy of tags
Start of tag Content of tag (here text)
<a href=“http://reddit.com">Reddit</a>
Attribute Attribute value End of tag
Tags for text formatting
<h1>Headline</h1> Headline
<em>Italics</em> Italics
<strong>Strong</strong> Strong
<strike>Line through</strike> Line through
Tags structuring
Divisions of content without
<div> … </div>
prede ned semantics
<p> … </p> Paragraph of text
<br> Line break
<hr> Horizontal line
<section>…</section> Section of a document
fi
Links and pictures
<a href=“http://reddit.com">Reddit</a> Reddit
<img src=“imgs/cow.jpg“ alt=“a cow”>
a cow
More on links
• External website:
<a href="http://reddit.com">Reddit</a>
• Relative link to same folder:
<a href=“page2.html”>Go to page 2</a>
• Links internally in the page (requires element with id attribute)
<a href=“#sektion2”>Gå til sektion 2</a>
Lists
Unordered
<ul • First
<li>First</li • Second
<li>Second</li
<li>Third</li
• Third
</ul>
Ordered
<ol 1. First
<li>First</li 2. Second
<li>Second</li 3. Third
<li>Third</li
</ol>
>
>
>
>
>
>
>
>
Block vs. inline elements
<p>A paragraph takes the whole width* and forces a line break</p>
<p>A <strong>strong</strong> is inline!</p>
Block Inline
<p> … </p <a> … </a
<div> … </div <em> … </em
<h1> … </h1 <img/
<table> … </table <button> … </button
<ul> … </ul> <input> … </input>
>
>
>
>
>
>
>
>
Attributes
• All elements can have attributes
• Attributes are added to the start tag
• An attributes has a key and a value
• Values is is “quotes”
• Some attributes can only be used on particular elements (src, alt, href) others (id, class) can
be used on all.
<img src="cow.png" alt=“A cow"/
<a href="http://dr.dk">DRs hjemmeside</a
<p class="abstract">...</p
<div id="container"></div>
>
>
>
Forms
• Used for input from the user
• Typically needs JavaScript (and CSS) to really make sense
Forms
CSS
Cascading Style Sheets
Elements are boxes
• Block elements
• Inline elements
Elements are boxes
• Block elements
• Inline elements
SELECTOR
p {
font-family: Arial;
}
DECLARATION
PROPERTIES
p {
font-family: Ariel;
color: yellow;
}
VALUES
Examples
https://warp.cs.au.dk/cuddly-cat-45/release/?copy
Colors
Box model
Cascade
• If selectors are specified multiple times, the last one wins
• id and class are more specific than type
• id is more specific than class
Cascade
• Som properties are inherited by parent elements
• font-weight
• font-family
• font-size
• color
• and more
• Other properties such as border, margin, padding are not inherited
• (They can with, e.g., background-color: inherit;)
Styles in HTML
• Three methods
• In external files
• Internally in the HTML
• Inline on an element
Fancy stuff
• Flexbox
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/
Flexbox
• Animation
https://developer.mozilla.org/en-US/docs/Web/CSS/animation
• Transform
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
• ….
• ….
