Components of a web page
Contents
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:
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:
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;
}