Worksheet 4 HTML and CSS

Preparation:
1. Copy the Eiffel Tower.html and Tour_Eiffel.jpg files to your own file area.

2. Open Eiffel Tower.html in a browser.

3. Open the same file in a text editor such as Notepad or in a web page editing program
such as Dreamweaver. Right-click the file and select Open with…

Practise changing some of the HTML code in order to see changes in the web page.

Activity 1
Change the title

The <title> tags denote the title. By changing the title text, the title of the web page will
change once displayed in a web browser.

● Try changing the title to ‘The Eiffel Tower’.

Refresh the web page in your browser by pressing F5. What happened?

Headings and text

The <h1> <h2> and <h3> tags dictate the size and style of your page headings, and decrease
in size as the tag number increments. The heading tags have been used throughout the Eiffel
Tower.html file.

● Change these, experimenting with <h4>, <h5> and <h6> tags, and examine the effect it
has on the web page by pressing Ctrl+S to save your changes, and pressing F5 in your
browser. What happened?
● Change the headings back to their original styles.

Changing images

We can define the size of any image in a web page by using the height and width attributes
in our <img> tag. At the moment, the image is 320px wide by 400px high.

● Change these attributes to make the image slightly bigger. Below is an example.

<img src="http://bit.ly/1UuWAmt", width="390" height="480" alt="La Tour Eiffel">

1
The <alt> attribute you can see is the tool tip displayed by the browser when the user hovers
their mouse over the image, or if the image fails to display in the browser for whatever reason.
At the moment it will display ‘La Tour Eiffel’ – try changing this to the English translation: The
Eiffel Tower.

The src attribute determines the source of the image, i.e. where the image is stored. This is
currently set to an online image using a URL. You can change the image that is displayed by
editing the address of the image. This address can be an image file in the same folder on your
computer, or the web address to another image file available on the World Wide Web.

● Try changing the source attribute to “tour_eiffel.jpg” as demonstrated:

<img src="tour_eiffel.jpg", alt="Construction in 1888">

Note that by not specifying the image height and width, the image will naturally resize to its
original dimensions. Change the size parameters to width="400" height="320".

Press Ctrl+S to save your changes, then press F5 to refresh your browser. What happened?

Hyperlinks

You can define hyperlinks by using the anchor <a> tag.

● Using the syntax below, add a hyperlink to another web page:

<a href= "website url here">This text will become the link</a>

● Try adding a new hyperlink to the official Eiffel Tower website or a YouTube video of the
construction.
● Press Ctrl+S to save your changes and then press F5 in your browser. What happened?

Paragraphs

Creating a paragraph will create a new block of content on a new line, rather than extending
content in a previous line.

● Add opening and closing <p> </p> tags before and after the hyperlink to move this to the
line below the image.

<p>
<a href="https://www.youtube.com/watch?v=r65KAj2sB0U">
See the construction of the Eiffel Tower</a>
</P>
● Save the HTML file and refresh the browser.

2
Activity 2: Lists and bullets

Numbered and bulleted lists can be created in HTML using the <ol> and <ul> tags. These
stand for ‘Ordered list’, and ‘Unordered list’.

● After the last closing paragraph tag, create a new title using the <h2> tag called “The
construction schedule”.
● Add an <ol> tag to begin a numbered list.
● Indent your script and add a <li> (’List item’) tag to begin a new list item.

<h2>The construction schedule</h2>

<ol>

<li>The first floor was completed on the 1st April 1888</li>

<li>The second floor was completed on the 14th August 1888</li>

<li>The top section was completed on the 31st March 1889</li>

</ol>

● Press Ctrl+S to save your changes and press F5 in your browser. What happened?
● Under the closing </ol> tag, create another new title using the <h2> tag called “Facts
and figures”.
● Add a <ul> tag to begin a bulleted, unordered list.
● Indent your script and add <li></li> tags for each item below:

<h2>Facts and figures</h2>

<ul>

<li>The tower has 1665 steps</li>

<li>2.5 million rivets were used</li>

<li>7,300 tonnes of iron</li>

<li>60 tonnes of paint</li>

</ul>

● Press Ctrl+S to save your changes and press F5 in your browser to view your new
content. What is the difference between <ol> and <ul> tags?ol is a numbered list, ul is a
bulletpoint list “

3
Activity 3 External CSS
● Open a new Notepad file.

● Click Save and change the Files of type to ‘All files’, and save it as ‘styles.css’.

● Open the HTML file and add the CSS link into the header between the <head> tags
using the syntax below:

<link href="styles.css" rel="stylesheet" type="text/css">

Applying formatting to the entire body

● In the CSS file, enter the following script to format everything within the <body> of the
web page. (Formatting within specific sections of the body will overrule this.)

Specifying the font family enables a browser determine which font to use in order of
precedence. In this case, if it is doesn’t have either Arial or Helvetica, it selects another
sans-serif font.

@charset "utf-8";

body
{
margin: 0px;
padding: 0px;
background-color:white;
font-family: Arial, Helvetica, "sans-serif";
font-size: 18px;
text-align: center;
}

● Save the changes and refresh your browser to view the effect of the CSS.

4
 ● Create a style for the h1 selector that makes all heading 1 text size 36px, white with a
margin of 0px and padding of 5px.

● Save and refresh the browser to view your changes. White text will ‘disappear’ against
the white background but we will change this in Activity 4.

● Create a style for heading 2 that changes the font size to 30px.

● Make heading 3 text white.

Activity 4: HTML <div> tags

1 Add in the following HTML tags in red to create a new <div> section to contain all of the
web content within the main body of the page:

<body>
<div> <!--Opening page div-->
<h1>La Tour Eiffel</h1>
<h2>Paris, France</h2>
<h3>Constructed 1887-1889</h3>

...

</div> <!--Closing page div-->

2 Add in the CSS to assign styles to the new <div> section: You will need to give the new
<div> section a unique identifier – in this case we can use the name ‘page’ since it will
contain everything in the whole page.

#page
{
max-width:800px;
margin: 20px auto;
padding: 30px;
background-color: #bfa475;
}

3 Lastly, tell the opening <div> tag in the html code to identify itself with the container
styles:

<div id="page">

Save the file and view the changes in a browser.

5
4. Create a new <div> CSS style block called “header” to add the following styles to the
web page title in H1.

#header /* Styles for Heading */

5. Create a border style to give all images using the <img> tags a double white border.

img
{
border: double 10px white;
}

Activity 5: Identifiers and classes

There are two lists in the web page that you are building. An ordered list and an unordered list.

● Create a CSS class called .list that formats text colour to become #333300 using a
hex code. This will change the list font colour to a dark brown.

● Create <div> blocks around each set of lists

● Apply the class .list separately to each of the two new list blocks

● Save and view the changes in a browser.

Floating blocks in columns

To create columns, you will need to float one block to the left or right of another. This is achieved
by applying the float property to the <div> CSS.

● Create a new CSS identifier called #right-column and insert the following script:

#right-column
{
float: right;
width: 350px;
text-align: left;
}

● Add a new opening tag <div id="right-column"> to the HTML file in front of the two
list sections and their headings. Remember to close the </div> tag after the two lists.

6
Using inline CSS

● Create a new <div id="left-column"> divider around the image and the hyperlink.

● Insert the following CSS directly inside the HTML tag without adding anything to the
external CSS file:

<div id="left-column" style="float:left; text-align:center; width:400px;">

● Clear the <div> formatting from the previous script by placing the following empty <div>
tag at the end of the html document inside the closing </html> tag:

<div style="clear:both;"></div>

● Save both your CSS and HTML files and refresh your browser.

Overriding styles to common styles within particular blocks

The following CSS script would apply a change in font size and weight to h2 styles within the
#right-column div only. This will override the default styles for h2 and apply them only to h2
styles within the #right-column divider.

#right-column h2 {font-size: 1.2rem; font-weight: bold;}

● Save both your CSS and HTML files and refresh your browser. Et voilà!