html exercises - watford grammar school for boys web viewin the example below an image called...

HTML EXERCISES

The Basics HTML stands for Hyper Text Mark-up Language, and is the basic code behind web

pages. You will be using software called Notepad++ to write your html. If you want to edit an html file you can open it in Notepad++ to make changes. An html file is just a page of text with lines of code set in tags. The tags are set in

angled brackets < and >. The tags tell the browser how to display the contents of the page. Most tags come in pairs i.e. an opening and a closing tag

For example

Opening Tag Closing Tag

What you use them for

<html> </html> Writing in html<head> </head> All the info about your page e.g.

<title> and <style><title> </title> The title of your web page. This will

appear on a tab or the title bar of the window (not the actual canvas area).

<style> </style> How you want it to look<body> </body> All of the content goes between

these tags. You can have lots of sections see diagram overleaf.

<b> </b> bold<i> </i> italic<br> Break (like return) – doesn’t need

to be closed<hr> </hr> Horizontal rule (a line)<h1> </h1> (biggest) heading<img src=”pic1.jpg”>

</img> Putting an image in your web page - see exercise 6

<header> </header>

The visible area at the top of your page. Part of the body.

<nav> </nav> Navigation area, links between your web pages. Part of the body.

<aside> </aside> Area to the right hand side of your page good for external links or a summary of info.

If you’d like more help with the tags then you can go to http://www.w3schools.com/html/default.asp for details of all the tags and their attributes.

Watford Grammar School for Boys HTML tutorials; Sept 2015 of 17

http://www.w3schools.com/html/default.asp

HTML web page elements

You start by telling the browser how this page is written in html like this<!DOCTYPE html><html>

At the start there’s some information about the title of our webpage and how we want the browser to display it. This goes in a part of the page called the head. It’s important to notice that each page only has one head, and that the head is different from the header.

Here is how basic HTML code is structured. Note that it is indented – this makes it easier to read, and to spot when you don’t close your tags.

<!DOCTYPE html><html><head>

<title>My website</title></head><body>

This is where you insert your content: Headings Text you type Images Tables Links to other pages

</body></html>

This shows a typical arrangement of various elements of a web page – more about this later in exercise 12:


CSS CSS stands for Cascading Style Sheets CSS defines how HTML elements are to be displayed HTML was never intended to contain tags for formatting a document so styles

were added to HTML 4.0 to solve a problem From HTML 4.0 onwards, all formatting should be removed from the HTML

document, and stored in a separate CSS file. This is what professional web developers do and CSS saves them a lot of work You will be using HTML 5 which was introduced in October 2014 Styling can be added to HTML elements in 3 ways:

o Inline - using a style attribute in HTML elementso Internal - using a <style> element in the HTML <head> sectiono External - using one or more external CSS files

In this tutorial you will use internal styling, because it is easier to demonstrate, and easier for you to try it yourself


Exercise 1 – Starting a web page

In your Computing folder in My documents, create a new folder called HTML Open Notepad++ from the Start menu Save this file as basic.htm in your HTML folder Type in the following html code & tags exactly as they appear below but with your

name and favourite subject instead of the blanks:


<title>Basic</title></head><body>

<header>Week one exercises</header><section>My name is ______, I am in year 8 and my favourite subject is ______.</section>

</body></html>

Save your work again (Ctrl-S), choose run and launch in Internet Explorer (IE) It should look like this:

Notice what is written in your title bar and notice all the things you’ve written that don’t show up at all.


Exercise 2 – Add style by changing the background colour Open Notepad ++ Save this file as background.htm in your HTML folder Add the html tags below:


<title>Background</title></head><style>

body {background-color:yellow}</style><body>

<p>My last page was dull</p><p>This one has a background colour!</p>

</body></html>

Make sure you spell background correctly with a g! Note ‘color’ is spelt in the American way where it is part of the code Save and look at it in IE, it should work straight away The <p> tag is called the paragraph tag and anything typed between the opening

<p> and closing </p> tags will display as a paragraph. Now try some different colours

The style tag sets the style for the body. You can also include different styles for paragraphs and headings by expanding your style sheet like this:

<style>body {background-color:lightgrey}

header {background-color:midnightblue} section {background-colour:powderblue} h1 {color:white} h2 {color:aqua}</style>

There are lots of different color names (remember American spelling) - see http://www.w3schools.com/tags/ref_colornames.asp

Thistle Teal Silver MidnightBlue

PaleGreen Azure

LightCyan GreenYello SlateGrey PowderBlue Olive LinenWatford Grammar School for Boys HTML tutorials; Sept 2015 of 17

w

Remember, you’ll need light writing on a dark background and dark writing on a light background.

Save and view your work in IE to check you like the effect. Notice that if you say what colour you’d like your header to be it will only show

up when you add a header. Mark your progress and colour choices on your sheet as you go along to help

remember your favourites!

Exercise 3 – Headings and sub headings Open Notepad ++ Save this file as headings.htm in your HTML folder Type in the tags below:

Save your work then open it in IE to view your page. It should look like this …


Exercise 4 – Changing font style & colour Open Notepad ++ Save this file as fonts.htm in your HTML folder

You already used a <style> section inside the <head> of your web page.The html code h1 {color:blue} changed the colour of the writing when we used h1. We can do a lot more though, such as adding instructions like what font to use and how big to make it.

h1 { color:blue; font-family:verdana; font-size:300%; }

You could do this all on one line like this one for a paragraph style

p {color:red; font-family:courier; font-size:160%;}

but people usually think that it’s easier to read if you break it up – it won’t make any difference to what your page looks like.

To see this in action you’ll need a paragraph in your body. This is done with a pair of tags inside the body.

The font-size property defines the text size to be used for an HTML element. We use a % sign to say how much bigger or smaller we want the text to be than the current font-size which is equal to 100%. In MS Word for example we use point sizes (pt), and 12pt=100% so 200% in HTML would mean 24pt.


<title>Font style</title></head><style>

body {background-color:lightgrey}h1 {color:blue; font-family:verdana; font-size:300%;}p {color:red; font-family:courier; font-size:150%;}

</style><body>

<h1>This is a heading in blue verdana font</h1><p>This is a paragraph in red courier font</p>

</body></html>

Save your work then open it in IE to view your page.


Exercise 5 – Text alignment and formatting Alignment is when text is centred or right-aligned, for example Formatting means displaying the text as bold, italics or underlined. Open Notepad++ Save this file as text.htm in your HTML folder Add the following tags to try text alignment. Note the word “center” is spelled the

American way


<title>Text</title><style>

h1 {text-align:center;}p {text-align:right;}

</style></head><body>

<h1>This is a heading which is centred</h1><p>This is a paragraph which is right aligned.</p>

</body></html>

You can format your text by adding these tags <b> all the text here will be BOLD </b> <i> all the text here will be italic </i> <u> this will be underlined</u> <br> will add an empty line; no closing tag needed <hr> will add a line (an horizontal rule); no closing tag needed

Add these tags in the paragraph of the page you created above:1) add the word Awesome! In bold2) add the word Groovy in italics3) add the word cool underlined4) add <br> tags to start each word on a new line5) add <hr> tags at the start and end of this section

Save your work again then run in IE to check it works


Exercise 6 – Adding an image On the Internet find an image you would like to include, or use the one on Moodle Click on the image and drag it into your HTML folder. Note that the image file must

be saved in the same folder as the web pages. Rename the image to have a short name. Open Notepad++ Save this file as picture.htm in your HTML folder In the example below an image called “Simpsons” was inserted into the page. You

need to replace the word “Simpsons” with the name of your saved image You will also need to enter the type of image: jpg or gif or png. In the example

below a png is used. Generally photos are jpg, and cartoon pictures are gif or png. Type in the html tags below:

If it doesn’t work first time check the following before asking your teacher for help!1) image is saved in the right place2) image is saved in the right file format (.jpg .gif .png all ok)3) your html tag matches the name and file extension exactly4) you have written the tag out exactly as above

Save your work again then open it in IE to view your page. If you get it to work first time very well done!

Extension tasks Can you work out how to centre the image? See exercise 5. Go on the Internet again, and find an animated image. Save it to your HTML folder

then insert it into your web page. Save the file again then run in IE to view the change to your page.

Changing the size of an image You can set the size of your image if it appears too big or too small on your web

page. To do this add the height and width attributes, for example:

<img src="simpsonsfamily.png" height="300" width="200" />


Exercise 7 – Linking to a website Open Notepad++ Save this file as hyperlink.htm in your HTML folder. Type in the HTML tags below:


<title>Hyperlink</title></head><style>

body {background-color:#f82}p {font-family:courier; font-size:160%;}

</style><body>

<p> This is a link to <a href="http://www.bbc.co.uk/news">BBC news</a>.</p>

</body></html>

Save your work again then open it in IE to view your page. Test your hyperlink. Note that you have to put some text to act as the link. In the example the text

‘BBC news’ will be in blue & underlined to show it’s a hyperlink. This text goes after the opening <A HREF…> tag, and before the closing </A>.


Exercise 8 – Lists You are going to create a numbered list and an unordered (bullet-point) list An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The

list items will be marked with numbers. Open Notepad ++ Save this file as lists.htm in your HTML folder. Type in the HTML tags below:

<!DOCTYPE html><head>

<title>Lists</title></head><style>

body {background-color:blue}p {font-family:comic sans ms; font-size:200%;}

</style><body>

<p>This is an unordered list with bullet points<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul><br>This is an ordered list with numbers<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol></p>

</body></html>

Save your work again then open it in IE to view your page. You should have noticed that the tag <BR> gives one line space down, whereas

<p></p> is for whole paragraphs.

A style attribute can be added to an unordered list, to define the style of the marker (the type of bullet).

Replace <ul> in the example above with this and see what changes:

<ul style="list-style-type:square">


Exercise 9 – Using a background image Go on the Internet, find a site that offers background images and find a

background you would like to include on a new web page. Download the background image, give it a short file name and save it in your HTML

folder. Close your Internet window now. Open Notepad++ Save this file as backgroundimage.htm in your HTML folder. You can use jpg or gif backgrounds. In the example below a jpg background called “whiteimage” was inserted into the

page. You need to replace the filename “whiteimage” with the name of your saved background.

Type in the HTML tags below:


<title>Background image</title></head><body style="background-image:url(whiteimage.gif)">

<h1>Welcome to my website!</h1></body></html>

Save your work again then open it in Internet Explorer to view your page.

Exercise 10 – Linking to another web page Open Notepad++ Save this file as pagelink.htm in your HTML folder. Type in the HTML tags below:


<title>Link to page</title></head><body>

<H1>Linking to another page on your own website</H1>To go to my other page <a href="picture.htm">click here</a>

</body></html>

Save your work again then open it in IE to view your page. Click on the hyperlink to test whether it goes to your page from exercise 6 Can you now set up a link on your picture page (“picture.htm”) to return to the

page you have just created (“pagelink.htm”)?


Exercise 11 – TablesTables allow text and pictures to be arranged in columns and rows. You can arrange items horizontally across the page, instead of all items following below each other. This also means you can include images alongside the text.

Tables are defined with the <table> tag. Tables are divided into table rows with the <tr> tag. Table rows are divided into table data with the <td> tag. Table data <td> are the

data containers of the table. They can contain all sorts of HTML elements like text, images, lists, other tables, etc.

A table row can also be divided into table headings with the <th> tag.

Open Notepad++ Save this file as tables.htm in your HTML folder. Type in the HTML tags below:


<title>Tables</title></head><style>

table, th, td { border: 1px solid black;}

</style><body>

<h1> Adding a table with a border </h1><p><table style="width:50%"> <tr> <td>Top left</td> <td>Top middle</td> <td>Top right</td> </tr> <tr> <td>Bottom left</td> <td>Bottom middle</td> <td>Bottom right</td> </tr></table>

</body></html>

This creates a table with 2 rows & 3 columns, making 6 cells in total. If you do not specify a border for the table, it will be displayed without borders. In

this case the border is width of 1 Save your work again then open it in IE to view your page. It should look like this:


Now go to w3 schools and work out how to add table headings Try replacing the text in one of the cells with an image

Exercise 12 – Laying out a webpage using divisions

HTML5 offers new elements that define different parts of a web page:

header Defines a header for a document or a section

nav Defines a container for navigation links

section Defines a section in a document

article Defines an independent self-contained article

aside Defines content aside from the content (like a sidebar)

footer Defines a footer for a document or a section

details Defines additional details

summary Defines a heading for the details element

You are going to create an example that uses <header>, <nav>, <section>, and <footer> to create a multiple column layout.

Open Notepad++. Save the file as divisions.htm Copy the HTML code on the following page Save your work again then open it in IE It should look something like this:


Notice that the page is divided up in to areas using the <div>…</div> tags. The nav (navigation) area is set to float on the left-hand side of the page. Study the code to see if you can understand how it works then experiment with the

layout. Can you put the navigation area on the right? Change the colour of the main section which is currently white



<title>Divisions</title></head><style>

#header { background-color:black; color:white; text-align:center; padding:5px;}#nav { line-height:30px; background-color:lightgreen; height:300px; width:100px; float:left; padding:5px; }#section { width:350px; float:left; padding:10px; }#footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; }

</style><body>

<div id="header"><h1>City Gallery</h1></div>

<div id="nav">London<br>Paris<br>Tokyo<br></div>

<div id="section"><h1>London</h1><p>London is the capital city of England. It is the most populous city in the United Kingdom,with a metropolitan area of over 13 million inhabitants.</p><p>Standing on the River Thames, London has been a major settlement for two millennia,its history going back to its founding by the Romans, who named it Londinium.</p></div>

<div id="footer">Copyright © W3Schools.com</div>

</body>Watford Grammar School for Boys HTML tutorials; Sept 2015 of 17

</html>


html exercises - watford grammar school for boys web viewin the example below an image called...

Documents