Scribd
Upload
5 views26 pages

Week38 Wednesday

The document provides an overview of HTML and CSS, detailing the basic structure and elements of HTML tags, including text formatting, links, lists, and attributes. It also introduces CSS, explaining the box model, selectors, properties, and the cascade effect in styling. Additionally, it touches on advanced CSS features like Flexbox and animations.

Uploaded by

menohax221
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views26 pages

Week38 Wednesday

The document provides an overview of HTML and CSS, detailing the basic structure and elements of HTML tags, including text formatting, links, lists, and attributes. It also introduces CSS, explaining the box model, selectors, properties, and the cascade effect in styling. Additionally, it touches on advanced CSS features like Flexbox and animations.

Uploaded by

menohax221
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

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
• ….
• ….

You might also like