Components of a web page

Most websites are built with HTML, CSS and JavaScript at least. We’ll start with HTML (content of the page) and CSS (look/ style of the page).

HTML

  • Hypter Text Markup Language (= no programming language)

  • Describes structure and elements of a web page with tags

  • A browser displays the content

In terms of storytelling we can see HTML tags as the characters and objects of our web page (story).

Structure of an HTML document

Create a plain text file called index.html. That’s the common file name for the main/ first HTML page of your web site. The server will automatically display that file (if available). Insert the following base code of a HTML page.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>

</body>
</html>

Basically a HTML document consists of two main parts: the head and the body. The head contains meta data and imports (more later), which are not visible in the view of the Web page. The content of the body contains visible elements. Both head and body, are enclosed by a html tag. Placing elements inside other elements is called nesting. Outer elements are parents of inner elements (children).

Tags

Elements of a website (like headlines, texts, images) are defined by tags. Content inside tags is enclosed by a start tag and an end tag (with a /):

<tag>content</tag>

Some common tags:

<h1>Heading of size 1 (big)</h1>
<h3>Heading of size 3 (middle)</h3>
<h6>Heading of size 6 (small)</h6>
<!-- Headings are relevant for search engines. 
1 = important information on your Web page, 2 = less important, ... -->

<p>A paragraph of text.</p>

<img>Display an image.

<video>Use a built-in video player.</video>

<a>Set a link to an internal (anchor) or external URL.</a>

<button>Button, commonly used to execute a function.</button>

<div>
    A container for almost all other html elements.
</div>

<span>A inline container for a portion of a text.</span>

<br> <!-- A manual line break. No content, no end tag.-->

A list of all tags with links to their reference: HTML Element Reference

Add some headlines and paragraphs.

CSS

CSS means Cascading Style Sheets. CSS is used to style the elements of a Web page. In terms of storytelling we can see CSS as the visual properties of the characters and objects (or phenotype versus genotype (HTML)) of our web page (story).

Create a new file called style.css inside a subfolder called css.

project_folder
├── index.html
├── css
    ├── style.css

The common way to integrate a CSS stylesheet into your HTML document is through the link tag inside the head:

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Hello</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

Syntax

CSS assignments are done through specifying an element (selector) and declare one or more property:value-pairs:

css_syntax

Source: w3schools.com

Let’s start with the body:

body {
	background-color: salmon;
	font-family: monospace;
	font-size: 2rem;
	color: papayawhip;
}

Colors

Here is a list of 140 color names which are supported by modern browsers.

You can also define colors as RGB(A), HEX, HSL(A) values. See w3schools.com CSS Colors.

Text

Here you can find/ try out text properties: w3schools.com CSS Text

Choose a font-family or several based on this information.

Selectors

Properties defined inside the body tag will be applied to all elements of the web page.

With specifying other elements, the properties inside body will be overriden.

p {
	font-family: serif;
	text-indent: 2rem;
	text-align: justify;
}

We can define properties for multiple selectors together throgh a comma separated list:

h1, h2 {
	text-align: center;
}

We have used tags as selectors already. There are two more options: id and class. These are two attributes that we can assign to HTML-Elements.

An id is a unique identifier, thus we should avoid using the same name for several id-attributes. It is useful if we want to style one specific element or even more if we want to access one specific element (with JavaScript).

Assign an id to an html tag, for e.g. to a span tag:

<h2>Welcome to <span id="author">your</span> story</h2>

Address it in your stylesheet with # followed by the name:

#author {
	text-decoration: underline;
}

The class selector is used if we want to define a style for several elements together. Create two elements with the same class name, for e.g.:

	<p class="italic">The quick brown fox jumps over the lazy dog.</p>
	<p class="italic">The wizard quickly jinxed the gnomes before they vaporized.</p> 

Address the class in your stylesheet with . followed by the name:

.italic {
	font-style: italic;
}

We can style elements with combining properties for tag, id and class. Furthermore a element can have multiple classes (or belong to multiple classes).

	<p class="italic small">The quick brown fox jumps over the lazy dog.</p>
	<p class="italic small">The wizard quickly jinxed the gnomes before they vaporized.</p> 
.small {
	font-size: small;
}

Inspector

Browsers have some developer tools included. For now we will look at the Inspector. Open the inspector of your browser through a right-click on an element of your page and choose “inspect”. (Or some similar command.)

Now you can inspect all specified attributes for each element. Furthermore, you can interactively change the values or even add new attributes or change the content of elements!

The changes you make are not saved to your source code of course, so you have to copy/ paste them into it, if you like your changes.

Furthermore you can see what properties are applied to each element through a click on the tag:

inspector


The whole code:

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Hello</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<h1>Hello!</h1>	

	<h2>Welcome to <span id="author">your</span> story</h2>
	
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

	<p class="italic small">The quick brown fox jumps over the lazy dog.</p>
	<p class="italic small">The wizard quickly jinxed the gnomes before they vaporized.</p> 
</body>
</html>

css/style.css

body {
	background-color: salmon;
	font-family: monospace;
	font-size: 2rem;
	color: papayawhip;
}

p {
	font-family: serif;
	text-indent: 2rem;
	text-align: justify;
}

h1, h2 {
	text-align: center;
}

#author {
	text-decoration: underline;
}

.italic {
	font-style: italic;
}

.small {
	font-size: small;
}