Scribd
Upload
3 views

Website 1 Booklet HTML and CSS

The document provides a comprehensive guide to creating a three-page website using HTML5 and CSS, detailing the coding process and various features such as tags, hyperlinks, images, and styling. It includes step-by-step instructions for coding in Notepad, saving files, and adding content like text, color, and multimedia elements. Additionally, it covers advanced topics like lists, tables, navigation bars, and picture galleries.

Uploaded by

mnh2dnmyv7
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

Website 1 Booklet HTML and CSS

The document provides a comprehensive guide to creating a three-page website using HTML5 and CSS, detailing the coding process and various features such as tags, hyperlinks, images, and styling. It includes step-by-step instructions for coding in Notepad, saving files, and adding content like text, color, and multimedia elements. Additionally, it covers advanced topics like lists, tables, navigation bars, and picture galleries.

Uploaded by

mnh2dnmyv7
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 44

Computer Coding with HTML5 and CSS

Welcome to HTML coding

We will be developing a three-page website from scratch, using computer


languages called Hyper Text Markup Language 5 (HTML5) and Cascading Style
Sheets (CSS). HTML5 is the most updated and final version of HTML, as it will
not be updated again.

When building our websites, we will look at


different features such as: Did you know:
 Tags Minecraft was created by
 Hyperlinks (Internal and External) Swedish programmer
 Images Markus ‘Notch’ Persson in
 Videos 2009, using the computer
 Sounds software language, Java.
 Buttons Minecraft has 783 million
 Tables, Columns and Rows concurrent players, as of
 Paragraphs April 2021.
 Breaks
 Marquees

Many different types of code such as Python, Java, JavaScript, C++, C#, can all
be used to create different pieces of software. These could be apps (python),
video games (C++), operating systems (Windows 11 – C, C*, C++), or databases
for businesses and organisations (SQL).
Various computer languages can be used together to create a final product,
e.g: a website might include HTML5, CSS, and JavaScript.
The most popular computer languages today are Python, C++ and Java.

Instructions for Coding using Notepad


2
Computer Coding with HTML5 and CSS

1. Open the Notepad app on your computer.


2. Input the following code into the page on Notepad.
E.g;
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>

3. On the Notepad document, click Save as.


4. Name the document as index.html
5. Go to ‘File Type’ and select All Files
6. Click save.
7. Go to documents and locate index.html
8. Click on ‘open with’ and select Goggle Chrome.
9. You will have your code for your webpage opened, and the
webpage opened using Google Chrome.

Repeat these steps two more times – these will be your webpages.

Remember to save the file in a folder so you can easily access it.

3
Computer Coding with HTML5 and CSS

Each of these are called tags.


<html> We start with the HTML tag
so the computer knows it is
<head> reading a html file.
<head>
<body> We will input most of our
code for the website between
</body>
the body tags, e.g: text,
</html> pictures, videos, navigation
bar, sound, hyperlinks, etc.

File Types
Every file you create is saved onto your computer storage in a specific file
type or file extension, e.g; your PowerPoints are saved ending in .ppt.
We save our webpages in .html as all websites are created with HTML.

You have created three webpages. These are:

Home Page Ships Going Berserk


(index.html) (ships.html) (berserk.html)

Coding is case sensitive – make sure you have typed every letter carefully.
If it is a lower-case letter, then you must type it as a lower-case letter in your
code.

You have now created your three webpages.

4
Computer Coding with HTML5 and CSS

You will be adding content to these by inputting new code.


Any new code you encounter in this booklet will be highlighted in red.

Chapter 1 – Colour and Text

5
Computer Coding with HTML5 and CSS

We will be adding text and colour to our home page. To open the home page,
go to file, open index.html.

Step 1
Find the opening body tag, click after it, skip a line, and type the following text
in:

<body>
Our Home Page. Hello. This site is all about our favourite things.
</body>

On the web app, scroll down and you will see this text will appear.

Step 2
We will now include paragraph tags, <p>. This will put sentences on different
lines. Input the following code:

<p>Our Home Page. </p> Whenever the code in


<p>Hello. This site is all about our new favourite things. </p> this booklet takes a
space or skips a line,
you must do the same.
Step 3
We will make a secret message appear when you hover the text. Inside the
first paragraph tag, input the following:
<p title=“Hi!”>Our Home Page.
This will only work on
certain web browsers.
Step 4

6
Computer Coding with HTML5 and CSS

Include a break tag. This will remove spaces in between lines. Input the
following code:
Notice something different
about the break tag?
<p>Hello. </p> <br />
Every tag in HTML5 comes in
a pair, except for a few.

Step 5
Input the following code:

<p>Hello. This site is all about our new favourite things. </p>
<p>Here is a list of things we like:<br />
Ships<br /> Remember!
Visiting Ireland<br /> You are not simply writing out new
Going Berserk<br /> code line by line, you will be asked
to go back and edit code that you
</p>
have already typed.

Step 6
Adding colour. Find the opening body tag and input the following code:
<body style=“background-color:yellow;”>
Any code typed within speech marks is another type of compute code – this
code is called Cascading Style Sheets (CSS). CSS is regularly used alongside
HTML5 to add some colour, themes and effects.

Step 7
Input the following code into the body tag. This will make all of the text blue.
<body style=“background-color:yellow;color:blue;”>
Chapter 2 – More Colour and Text

7
Computer Coding with HTML5 and CSS

In this chapter we will be adding even more and colour and editing our text.

Step 1
We will change the colour. Find the word ‘Hello’ and input the following code:
<span style=“color:red;”>Hello</span>

Step 2
We will change the font and size of text by inputting the following code:
<span style=“color:red;font-size:100%;font-family:Jokerman:”>Hello</span>

Step 3
We will change the text font for the whole webpage, by inputting the following
code:
<body style=“background-color:yellow;color:blue;font-family: Arial, Serif”>

Step 4
Find where we typed ‘Our Home Page’ and change the paragraph tags to
heading tags:
<h1 title=“Hi!”>Our Home Page.</h1>

Step 5
Now we will underline text. Go to ‘this site is all about our favourite things’ and
input the following code:
<span style=“text-decoration:underline;”>This site is all about our favourite
things</span>
Step 6

8
Computer Coding with HTML5 and CSS

Now add bold and italic to your text:


<span style=“text-decoration:underline; font-style:italic;font-
weight:bold;”>This site is all about our favourite things</span>

Step 7
We can align our text the same way we can align text on a Word document.
Input the following code:
<h1 style=“text-align:center; title=“Hi!”>Our Home Page.</h1>

<p style=“text-align:center;”> <span style=“color:red;font-size:100%;font-


family:Jokerman:”>Hello</span>

<p style=“text-align:center;”>Here is a list of things we like:<br />

Remember to read through your work carefully to ensure you are inserting
any new code into the correct place.

Chapter 3 – Pictures, Hyperlinks and Comments

9
Computer Coding with HTML5 and CSS

In this chapter we will be adding images and hyperlinks. We will start with the
images.

This is the images


library. Click into it
view the images we
will be using. Each
image will have a file
type / file extension.

Step 1
Go to ‘Going Berserk <br />’ in our code and input the following:

Going Berserk<br />


</p>
<p>
<img src=“images/picture.gif” alt=“Us” style=“height:50%;width:50%;” />
</p>

We have added a picture to our websites and adjusted the size of it.

Step 2
10
Computer Coding with HTML5 and CSS

Go to the picture and remove the code for the width. We can use pixels as a
unit of measurement for images and videos on our sites. Change the code for
the height to the following:

<p>
<img src=“images/picture.gif” alt=“Us” style=“height:150px;” />
</p>

Step 3
Now let’s add another picture next. Input the following code:
<img src=“images/vikship.gif” alt=“ship” style=“height:150px;” />
<img src=“images/picture.gif” alt=“Us” style=“height:150px;” />

Step 4
Now we will start working on our second webpage, the ships webpage. Go to
file, open ‘ships.html’ and input the following code:
<html>
<head> File type – this tells
<title>Ships the computer what
Name of the
type of resource is
</title> folder – the
the file, e.g: - .ppt is
“images” folder.
a PowerPoint,
<head>
or .mp3 is a song!
<body background="images/irishsea.jpg">
<h1>Ships</h1>
</body> The name of the file,
e.g: a picture named
</html> “cartoonviking”.
We have inputted the code to include a
background image to our ships.html webpage.

11
Computer Coding with HTML5 and CSS

Now go and look for an appropriate background image and save it is irishsea.
Make it bright but simplistic:

Something like this.

Step 5
Now we will add hyperlinks onto our websites. Hyperlinks enable you to go
onto various webpages and websites. They can be identified as internal or
external.
On the home page, we will now include internal hyperlinks. This will allow the
user to navigate our website and visit each webpage. Find the ‘ships’ text and
input the following code:

<a href=“ships.html”>Ships</a><br />

Step 6
We will add external hyperlinks onto our websites. External Hyperlinks enable
you to go onto other websites. This will hyperlink a part of our text to the
Discover Northern Ireland website. Input the following code:

<a href=“https://www.discovernorthernireland.com>Visiting Ireland</a><br />

Step 7
We can add comments into our code that will not appear in our websites to
the user. Input the following code:

<a href=“ships.html”>Ships</a><br /> <!—Cool!--> <br />


We use comments in computer coding to remind us, the coders, what each
section of code does. The computer will not read this code and therefore not

12
Computer Coding with HTML5 and CSS

display it on the website. This will be beneficial for us later as it will make our
code easier to read.
You can change the ‘Cool!’ text to anything you want. For example, as you
inserted a hyperlink, it could be changed to ‘Hyperlink’.

Chapter 4 – Lists, Tables and Marquees

You have seen before that some tags work in pairs (<p> and </p>) and work
alone (<br />). Some tags require other tags to be present first for them to
work. The list tag is an example of this.

Step 1
On the Ships webpage, input the following code:

<body style=“background="images/filename.jpg">
<ul>
<li>Home</li>
<li>Ships</li>
<li>Visiting Ireland</li>
<li>Going Berserk</li>
</ul>
<h1>Ships</h1>

To include a list item <li> we need to specify the type of list. This can be an
ordered list <ol> or an unordered list <ul>.
Ordered lists will number each item, and unordered lists will simply bullet
point them.
Step 2

13
Computer Coding with HTML5 and CSS

We will now add tables to our website. Within tables, we have rows and
columns which allow us to divide the webpage into different sections for text
and content. Go to ships.html and input the following code:

<h1>Ships</h1>
<table>
<tr>
<td>Dragon Ship</td>
<td>Fast</td>
</tr>
<tr>
<td>Ferry</td>
<td>Slow</td>
</tr>
</table>
</body>

Step 3
We can colour and outline the whole table. Input the following code:

<table style=“background-color:yellow; border: 1px solid black”>


<tr>
<td>Dragon Ship</td>

Step 4

14
Computer Coding with HTML5 and CSS

Now we will add table headings <th>. Input the following code:

<tr>
<th>Ships<th>
<th>Speed<th>
</tr>
<tr>
<td>Dragon Ship</td>

Step 5
We are going to add a title to our table. Input this code:

<table style=“background-color:yellow; border: 1px solid black”>


<caption style= “caption-side:top;”>Our Ships</caption>
<tr>

Step 6
We can change the colour of each table row, column or cell. Input the
following code:

<caption style= “caption-side:top;”>Our Ships</caption>


<tr style=“background-color:red;”>

Step 7
15
Computer Coding with HTML5 and CSS

We will add more pictures within the table. Input the following code:
<tr>
<td style=“background-color:blue;”>
<img src=“images/vikship.gif alt=“ship” />
</td>

<td> </td>
</tr>
</table>

Step 8
We can make features of our website stretch across rows and columns. Input
the following code:

<td style=“background-color:blue;” colspan=“2”>

We type 2 as there are two columns in this row. If we had 5 columns, we


would have to put 5 in to make our picture stretch across all five columns. If
we had five columns and typed in 4, then our image will stretch across the first
four columns, and stop before the last column.

Step 9
Let’s add another column and a picture to our table. Input the following code:
<th>Speed<th>
<th rowspan=“4”><img src= “OldMan.png” /></th>
</tr>
Step 10

16
Computer Coding with HTML5 and CSS

Now we will move the heading and the table. We will move them to the centre
of the webpage. Input the following code:

<h1 style=“text-align:center;”>Ships</h1>

<table style=“background-color:yellow; border: 1px solid black; margin-


left:auto;margin-right:auto;”>

Step 11
Now we will create two marquees – marquees are simply images that move.
Input the following code:

</table>
<marquee behavior=“scroll” direction=“left” scrollamount=“5”>
<img src=“images/vikship.gif alt=“ship1” />
<br />
</marquee>
<marquee behavior=“scroll” direction=“left” scrollamount=“5”>
<img src=“images/vikship.gif alt=“ship2” />
<br />
</marquee>
</body>

When you refresh your website, you will see your two ships racing.

Chapter 5 – Navigation Bars and Picture Galleries

17
Computer Coding with HTML5 and CSS

In this chapter we will look at using tables in further detail to create navigation
bars and a picture gallery.

Step 1
We will create a navigation bar. Go onto your ‘Go Berserk’ webpage
(berserk.html) and after the opening body tag, input the following code:

<body>
<table style=“background-color:lightblue;border 0px” >
<tr>
<td style=“background-color:palegreen;”>
Home</td>
<td><h1>Go Berserk</h1></td>
</tr>
</table>

Step 2
Now we will align the text. Input the following code:

<tr style=“vertical-align:top;”>
<td style=“background-color:palegreen;”>Home</td>

Step 3

18
Computer Coding with HTML5 and CSS

We will include the title of each webpage in our navigation bar. Input the
following code:

<td style=“background-color:palegreen;”>
<a href=“index.html”>Home</a> <br />
<a href=“ships.html”> Ships</a> <br />
<a href=“https://www.discovernorthernireland.com”> Visiting
Ireland</a> <br />
<a href= “berserk.html”>Go Berserk</a>
</td>

Step 4
We are going to make a cell a certain size. Input the following code:

<td style=“background-color:palegreen;width:150px;”>

Step 5
We will include hyperlinks on all our webpages and connect them. We must go
into each webpage and insert the hyperlink tag <a>. Open the home page and
input the following code:

<a href=“berserk.html”>Going Berserk</a> <br />

This will include a hyperlink around the text on your webpage.

Step 6

19
Computer Coding with HTML5 and CSS

Open the ships webpage and add the code for hyperlinks to the list:

<ul>
<li><a href= “index.html”>Home</a></li>
<li><a href= “ships.html”>Ships</a></li>
<li><a href=“https://www.discovernorthernireland.com”> Visiting
Ireland</a></li>
<li><a href= “berserk.html”>Going Berserk</a></li>
</ul>

Step 7
The text is hard to read. We will change the background of the table. Input the
following code:
<body background="images/irishsea.jpg">
<ul style=“background-color:palegreen;list-style-type:none;”>

Step 8
We will centre the text within the table. Input the following code:
<tr style=“text-align:center;”>
<td>Ferry</td>
<td>Slow</td>

We could add text-align:center to every table row, however, there is a faster


way of doing it. Go to the head tags and input the following code:

20
Computer Coding with HTML5 and CSS

<head>
<style>
.tr {
text-align:center;
}
</style>
</head>

The text that we have inserted inside the curly brackets is CSS code. The
computer will read this and make the text in every table row <tr> aligned to
the centre. Any code included in the curly brackets {} will be included in all
table rows <tr>.

Step 9
If you look closely at the table, you will see a black border going around the
whole table and a yellow border going around each table cell.
We will make one black border. Input the following code:

<table style="background-color:yello;border: 1px solid black; margin-


left:auto;margin-right:auto;border-collapse:collapse;">

Step 10

21
Computer Coding with HTML5 and CSS

Go to the style tag at the top of the page below the opening head tags. Input
the following code:
<style>
tr {
text-align:center;
}
td, th {
border: 1px solid black;
}
</style>

This will make all table cells and table headings have a black border around
them.

Step 11
Now we will make a picture gallery. Go to berserk.html page and include the
following code:

<h1>Go Berserk!</h1>
<table style=“border: 1px solid black;>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Step 12

22
Computer Coding with HTML5 and CSS

Now we will add our pictures. Input the following code:

<td><img src=“images/Us.png” style= “width:150px;” /></td>


<td><img src=“images/OldMan.png” style= “width:150px;” /></td>
<td><img src=“images/vikship.gif” style= “width:150px;” /></td>

Step 13
We will move the position of the Viking ship to the bottom of the cell. Input
the following code:

<td style=“vertical-align:bottom;”>
<img src=“images/vikship.gif” style= “width:150px;” /></td>

Step 14
Now we will add a logo to our website for the search engines and web
browsers to display to our users.
Our logo will appear here

Find a suitable logo four our website on Vikings. The logo must be clear to see
and eye-catching but all small and simplistic. Here is an example:

Type in the following code on each of your webpages. Ensure that it


goes between the closing head tag </head> and opening body tag <body>:
</head>
<href="images/vikinglogo.png"/>
<body
Remember to ensure you have saved a logo of your choice with the file name
‘vikinglogo’. Also, you need to check what file type it is.

23
Computer Coding with HTML5 and CSS

There are many different file types for pictures and images such as:
.jpg .png .gif .tiff

Your webpages should display this like this :

Ensure you input this code to all webpages.

Chapter 6 – Videos and Sounds

In this chapter we will add videos and sounds to our website. This will make
our site more eye-catching.

Step 1
We will begin by creating a table cell for our video. Input the following code:

<img src=“images/vikship.gif” style= “width:150px;” /></td>


</tr>
<tr>
<td colspan=“3”>
</td>
</tr>
</table>

Step 2
To add our video, input the following code:
24
Computer Coding with HTML5 and CSS

<td colspan=“3”>
<video autoplay controls width=“480px” height=“640px”>
<source src=“video/video.mp4” type=“video/mp4” />
This video is not supported.
</video>
</td>

Step 3
We will add sound onto our website. We will embed it using the <audio> tag.
Input the following code:

</video><br />
<audio autoplay width=“1px” height=“1px”>
<source src=“sounds/sound.wav” type=“audio/wav” />
This sound is not supported.
</audio>
</td>

We have included our movie and sound. Both will automatically play when
we load into the webpage. Also, we have included text to appear if either the
video or sound does not work. Both files should work fine when using a
Windows 11 operating system, i.e; your school computer.

Chapter 7 – More CSS Effects

25
Computer Coding with HTML5 and CSS

We have added CSS to change the look and theme of various features of our
website. We will add some more effects using advanced CSS code.

Step 1
Open the berserk.html page and find the head tags. Input the following code:

<head>
<style>
</style>
</head>

Step 2
Next we will change the colour of the hyperlinks <a> within our website. Input
the following code:

<style> This makes all hyperlinks purple.

a {color:
This makes purple;} green
all hyperlinks
when they have{color:
a:visited been visited.
green;}
a:hover {color: red;} This makes all hyperlinks purple
a:active {color: blue;} when you hover over them.

</style> This makes all hyperlinks purple.

Step 3
We will add a glow effect to our text. Input the following CSS code:

26
Computer Coding with HTML5 and CSS

a:active {color: blue;}


.glow {
text-shadow: 0 0 0.1em red; color: white;
}
</style>

EM… not M
Em is used to measure to size of things in CSS. 1em makes the
something the same size as the text in the tag.
1
0.1 em will make the something 10 or 10% of its original size.

Step 4
To select which text to add the glow effect, go to the ‘Go Berserk!’ heading and
input the following code:

<h1 class=“glow”>Go Berserk!</h1>


<table style =“border: 1px solid black;”>

Step 5

27
Computer Coding with HTML5 and CSS

Now we will add shadow to our text. Open the home page (index.html) and
find the <head> tags. Input the following text:

<head>
<style>

</style>
</head>

Step 6
To create the shadow effect, input the following CSS code:

<style>
.glow {
text-shadow: 0 0 0.1em red; color: white;
}
</style>

Step 7
28
Computer Coding with HTML5 and CSS

To change the size of the shadow, edit the following code:

<style>
.shadow {
text-shadow: 0.1em 0.1em 0.1em purple; color: dodgerblue;
}
</style>

This first number makes the This second number makes


shadow appear slightly to the shadow appear slightly
the left of the writing. to the right of the writing.

Step 8
Find opening head tag before ‘Our Home Page’, and input the following code:

<h1 class=“shadow” style="text-align:center title=“Hi!”>Our Home Page.</h1>

Step 9

29
Computer Coding with HTML5 and CSS

We will add a burst of colour to our home page. This means to turn one colour
in the centre of the page into another colour. Go to the index.html webpage
and input the following code between the opening and closing style tags
<style>:

}
.burst {
background-image:radial-gradient(white, orange, dodgerblue);
height: 100%;
}
</style>

Step 10
To apply this CSS code to our webpage, go the opening body tag. Input the
following code:

<body class=“burst” style="font-family: Arial, Serif; background-


color:yellow;color:blue;">

Step 11

30
Computer Coding with HTML5 and CSS

Now we will make a colour fade. Go to the go berserk webpage and input the
following code:
}
.merge {
background-image:linear-gradient(to right, white, seagreen);height: 100%
}
</style>

This states the second


This states the
colour of the gradient.
direction the gradient This states the first
will go. colour of the gradient.

Step 12
Add the CSS code to the following tag:

<td style="width:150px; background-color:palegreen;" class=“merge”>

Well Done.
You have created your website.

All of the code you have used is printed at the end of this booklet.
Use it to read through your code and ensure there are no errors.

Glossary
31
Computer Coding with HTML5 and CSS

<!-- --> Comment


<a> Hyperlink
<audio> Audio
<big> Big – makes text big
<body> Body of text and content
<br /> Break
<caption> Caption
<h1> to <h6> Heading
<head> Head tag – contains data (e.g; CSS code) about
the document.
<hr> splits text with a horiszontal line
<html> Hyper Text Markup Language
<img /> <img />
<li> List Item
<ul> Unordered List (bulletpoints)
<ol> Ordered List (numbered)
<marquee> A moving image
<small> Makes text small
<source> Source tag, similar to an image tag, but has a
type where the user must input the file type /
file extension.
<span> Goes around the writing you want to change.
<sub> Puts writing subscript
<super> Puts writing superscript
<table> Tables are used to make sure text/content goes
where you want to go.
<tr> Table Row
<td> Table Column
<th> Table Heading
<video> Video

Student Notes:

32
Computer Coding with HTML5 and CSS

33
Computer Coding with HTML5 and CSS

Go Berserk HTML5 (Online App) Source Code


Home Page:
<html>
<head>
<title>Home Page</title>
</head>
<href="images/vikinglogo.png"/>
<body style="font-family: Arial, Serif; background-color:yellow;color:blue;">
<h1 style="text-align:center;" title=“Hi!”>Our Home Page.
</h1>
<p style="text-align:center;">
<span style="text-align=center;color:red;font-size:100%; font-family:Jokerman;">
Hello. </span>
<br />
<span style="font-weight:bold;font-style:italic;text-decoration:underline;">
This site is all about our favourite things.
</span>

34
Computer Coding with HTML5 and CSS

</p>
<p style="text-align:center;">Here is a list of things we like:<br />
<a href="ships.html">Ships</a><!--Cool!--><br />
<a href="https://www.discovernorthernireland.com">Visiting Ireland</a><br />
<a href="berserk.html">Going Berserk</a><br />
</p>

<p style="text-align:center;">
<img src="images/vikship.gif" alt="ship" style="height:150px;" />
<img src="images/picture.gif" alt="Us" style="height:150px;" />
</p>
</body>
</html>

35
Computer Coding with HTML5 and CSS

Ships Webpage:
<html>
<head>
<title>Ships</title>
</head>
<href="images/vikinglogo.png"/>
<body background=“images/irishsea.jpg">
<ul style="background-color:palegreen;list-style-type:none;">
<li><a href="index.html">Home</a></li>
<li><a href="ships.html">Ships</a></li>
<li><a href="https://www.discovernorthernireland.com">Visiting Ireland</a></li>
<li><a href="berserk.html">Going Berserk</a></li>
</ul>

<h1 style="text-align:center;">Ships</h1>

36
Computer Coding with HTML5 and CSS

<table style="background-color:yello;border: 1px solid black; margin-left:auto;margin-


right:auto;border-collapse:collapse;">
<caption style="caption-side:top;">Our Ships</caption>
<tr style="background-color:red;">
<th>Ship</th>
<th>Speed</th>
<th rowspan="4"><img src="images/OldMan.png" /></th>
</tr>
<tr style="background-color:yellow;">
<td>Dragon Ship</td>
<td>Fast</td>
</tr>
<tr style="background-color:yellow;">
<td>Ferry</td>
<td>Slow</td>
</tr>
<tr>

37
Computer Coding with HTML5 and CSS

<td style="background-color:blue;" colspan="2">


<img src="images/vikship.gif" alt="ship" />
</td>
</tr>
</table>

<marquee behaviour ="scroll" direction="left" scrollamount="1">


<img src="images/vikship.gif" alt="ship1" /><br />
</marquee>

<marquee behaviour ="scroll" direction="left" scrollamount="5">


<img src="images/vikship.gif" alt="ship2" /><br />
</marquee>
</body>
</html>

38
Computer Coding with HTML5 and CSS

Go Berserk Webpage:
<html>
<head>
<title>Go Berserk</title>
</head>
<href="images/vikinglogo.png"/>
<body>
<table style="background-color:lightblue;width:100%; height:100%;border:0px">
<tr style="vertical-align:top;">
<td style="width:150px; background-color:palegreen;">
<a href="index.html">Home</a><br />
<a href="ships.html">Ships</a><br />
<a href="https://www.discovernorthernireland.com">
Visiting Ireland</a><br />
<a href="berserk.html">Going Berserk</a>
</td>
<td>

39
Computer Coding with HTML5 and CSS

<h1>Go Berserk!</h1>
<table style="border: 1px solid black;">
<tr>
<td><img src="images/Us.png" style="width:150px;" /></td>
<td> <img src="images/OldMan.png" style="width:150px;" /></td>
<td style="vertical-align:bottom;">
<img src="images/vikship.gif" style="width:150px" />
</td>
</tr>
<tr>
<td colspan="3">
<video controls autoplay width="480px" height="640px">
<source src="videos/video.mp4" type="video/mp4" />
This video is not supported.
</video><br />
<audio autoplay width="1px" height="1px">
<source src="sounds/sound.wav" type="audio/wav" />

40
Computer Coding with HTML5 and CSS

This sound is not supported.


</audio>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Remember to check over your code.

41
Computer Coding with HTML5 and CSS

42
Computer Coding with HTML5 and CSS

43
Computer Coding with HTML5 and CSS

44

You might also like