WebQuizes
Structure and formatting HTML pages
Helen Treharne
Department of Computing
Structure of a HTML page
•
It is possible to create web pages without knowing anything about the HTML source behind the page
• All you need to do is layout the page
http://www.echoecho.com/htmlbasics01.htm
<html>
<head>
<!-- This section is for the title and technical info of the page. -->
</head>
<body>
<!-- This section is for all that you want to show on the page. -->
</body>
</html>
Question – title structure
Where does the <title> </title> tag belong on a web page ?
A Arm
B Head
C Body
Answer: B
Example
<html>
<head>
<title>This is my test page </title>
</head>
</html>
Question - structure
What tag tells the browser where the page starts and stops?
A <head>
B <body>
C <html>
Answer: C
Adding text to a page
<html>
<head>
<title>This is my test page</title>
</head>
<body>
This is my first web page and here is the text I want to include in it.
</body>
</html>
Changing the format of the text
• We can change the font of the text of the whole page using the <basefont> tag
<html>
<head>
<title>This is my test page</title>
</head>
<body>
<basefont face="arial, verdana, courier" size="4" color="green">
This is my first web page and here is the text I want to include in it and now it appears in green!<br> All text looks the same.
</body>
</html>
Question - font
Which of the two outputs represents the following html:
<html>
<head>
<title>This is my test page</title>
</head>
<body>
<basefont face="arial, verdana, courier" size="4" color="green">
This is my first web page and here is the text I want to include in it and now it appears in green!<br>
<font color="red" face="courier" size="1">
This local text looks different.
All text looks the same.
</body>
</html>
Adding text links to a page
<html>
<head>
<title>This is my test page</title>
</head>
<body>
This is a page with a <i> link </i> so click
<a href="http://www.cs.surrey.ac.uk"> here </a> to get to it
</body>
</html>
Changing format locally on a page
• What can you do in Word with formatting using the toolbar buttons?
TAGS – what else is available
<b>text</b> writes text as bold
<i>text</i>
<u>text</u> writes text in italics writes underlined text
<sub>text<.sub>
<sup>text</sup> lowers text and makes it smaller
Lifts text and makes it smaller
<em>text</em> Usually makes text italic
<h1> text </h1>
Writes text in biggest heading
Also <big>, <small>, <font size=“1”> etc
Question - font
Which attribute identifies the type of font to be used?
A Character
B Face
C Text-type
Answer: B
Question - font
Which of these is invalid HTML?
A <font face=“verdana”>
B <font face=“verdana, arial”>
C
<fontface=“verdana”>
Answer: C
Question
What colours are links in HTML?
A Blue
B Pink
C Red
Answer: It depends
• link - to a page visitor hasn't been to yet. (standard is blue - #0000FF)
• vlink - to a page visitor has been to before. (standard is purple - #800080)
• alink - colour of the link when mouse is on it. (standard is red - #FF0000)
Adding image links to a page
<html>
<head>
<title>This is my test page</title>
</head>
<body>
The logo is a link to the Surrey homepage
<a href="http://www.cs.surrey.ac.uk"><img src="surreylogo.gif"></a>
</body>
</html>
• Adding border ="0“ removes the box around the logo
Aligning content
Now I just want to add some more<br> then I can have it immediately on the next line
Question
How many tags are needed to create the page?
(count the start and tags separately)
<html>
<head>
<title>This is my test page</title>
</head>
<body>
Hello world a linebreak does not insert a linebreak in HTML
<p>you will need</p>
<p align="right">to insert</p>
29 Tags (but many different ways of achieving similar output)
<p align="left">special tags</p> that will insert<br> linebreaks<br> where<br> you want it!<br>
<br>
Another method is of course to write a sentence, that is long enough to force a linebreak.<br>
<br>
<center>You can center</center>
And turn the center off
<div align="center">And on!</div>
<div align="left">Go left!</div>
<div align="right">Go Right!</div>
</body>
</html>
Changing the background
• 90% of websites have a white background!
• Designers often use slight variations of black and white to make the pages more readable
• Adding a plain background colour is done in the body tag
<body bgcolor=“#FFFFFF”>
- # indicates a hexadecimal number.
- First two digits are amount of red
- Digits 3 and 4 amount of green
- Digits 5 and 6 amount of blue
What colour is represented by #FF00FF?
Question
To make the appearance of colours more powerful on your site do which of the following?
A Limit their use
B Splash them all over
C Do not use colours
Answer: A
Tables
• Obvious purpose is to arrange information
• Most web pages use invisible tables for layout
Web design involves programming
• To make pages exciting we’ll need Javascript, PhP, Perl, AJAX etc.
• Web development is big business: Google purchased YouTube for £883m!
“Websites now offer a potentially much more sophisticated user experience than the plain text sites around in the nineties. It was relatively easy to publish a decent website back then, but now it's difficult without expert programming skills.” http://www.pcpro.co.uk/news/119444/ web-developers-in-demand-as-payrises-26.html
