Introduction to web design

Claus O. Wilke

2025-05-31

Anatomy of a web site

Web sites consist of three components:

HTML: Content of the site

CSS: Appearance of the site

JavaScript: Interactivity

We won’t be discussing JavaScript here

Block and inline elements

<div>: Contents stacked vertically

<span>: Contents placed inline

Block and inline elements

HTML input:

<div>This</div>
<div>is</div>
<div>an</div>
<div>example</div>

Rendered output:

This
is
an
example

<div> elements are stacked vertically from top to bottom

Block and inline elements

HTML input:

<span>This</span>
<span>is</span>
<span>an</span>
<span>example</span>

Rendered output:

This is an example

<span> elements are placed inline

Elements can be nested

HTML input:

<div>
  <span>This</span>
  <span>is</span>
</div>
<div>
  <span>an</span>
  <span>example</span>
<div>

Rendered output:

This is

an example

Elements are styled with CSS

HTML input:

<div>
This is an <span>example</span>
</div>

CSS input:

span { 
  color: #91322F;
  font-weight: bold;
}

Rendered output:

This is an example

Elements are styled with CSS

HTML input:

<div>
This is an <span>example</span>
</div>

CSS input:

span { color: #91322F; }

div {
  background-color: #D4E1F3;
}

Rendered output:

This is an example

Elements are styled with CSS

HTML input:

<div>
This is an <span>example</span>
</div>

CSS input:

span { color: #91322F; }

div {
  background-color: #D4E1F3;
  padding: 36px 8px 24px 8px;
}

Rendered output:

This is an example

Elements are styled with CSS

HTML input:

<div>
This is an <span>example</span>
</div>

CSS input:

span {
  color: #91322F;
  background-color: #D4E1F3;
  padding: 48px 8px 64px 8px;
}

Rendered output:

This is an example

Top and bottom padding don’t affect the height of an inline element

Creating complex designs: CSS classes and selectors

HTML input:

This is <span class = "red">red</span>,
<span class = "green">green</span>,
and <span class = "blue">blue</span>
text.

CSS input:

.red { color: red; }
.green { color: green; }
.blue { color: blue; }

Rendered output:

This is red, green, and blue text.

Creating complex designs: CSS classes and selectors

HTML input:

This is <span class = "red">red</span>,
<span class = "green">green</span>,
and <span class = "blue">blue</span>
text.

CSS input:

.red { color: red; }
.green { color: green; }
.blue { color: blue; }
span { font-weight: bold; }

Rendered output:

This is red, green, and blue text.

Creating complex designs: CSS classes and selectors

HTML input:

This is <span class = "red">red</span>,
<span class = "green">green</span>,
and <span class = "blue">blue</span>
text.

CSS input:

.red { color: red; }
.green { color: green; }
.blue { color: blue; }
span { font-weight: bold; }
span.red { color: firebrick; }

Rendered output:

This is red, green, and blue text.

Creating complex designs: CSS classes and selectors

HTML input:

<div class = "red">
This is <span class = "red">red</span>,
<span class = "green">green</span>,
and <span class = "blue">blue</span>
text.
</div>

CSS input:

.red { color: red; }
.green { color: green; }
.blue { color: blue; }
span { font-weight: bold; }
span.red { color: firebrick; }

Rendered output:

This is red, green, and blue text.

The CSS selector span.red is more specific than .red and therefore takes priority

Try this out for yourself: https://jsfiddle.net/

A few more tags to know

The <img> tag: images

HTML input:

<img src = "https://clauswilke.com/dataviz/cover.png", width = 30% />

Rendered output:

The <img> tag: images

HTML input:

<img src = "https://clauswilke.com/dataviz/cover.png", width = 100% />

Rendered output:

The <br> tag: line breaks

HTML input:

My book on data visualization:<br>
<a href = "https://clauswilke.com/dataviz/">
Fundamentals of Data Visualization</a>

Rendered output:

My book on data visualization:
Fundamentals of Data Visualization

The <ul> and <li> tags: unordered lists

HTML input:

Some fruit:

<ul>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Bananas</li>
</ul>

Rendered output:

Some fruit:

  • Apples
  • Oranges
  • Bananas

The <ol> and <li> tags: unordered lists

HTML input:

Some fruit:

<ol>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Bananas</li>
</ol>

Rendered output:

Some fruit:

  1. Apples
  2. Oranges
  3. Bananas

Making a website with Quarto

Quarto Guide: https://quarto.org/docs/guide

Rendering the site

Publishing the site

https://app.netlify.com/drop

Alternatives to Netlify

For details and more options, see: https://quarto.org/docs/publishing/

Further reading