WebQuizes

Download Report

Transcript 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
B
C
<head>
<body>
<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>
writes text in italics
<u>text</u>
writes underlined text
<sub>text<.sub>
lowers text and makes it
smaller
<sup>text</sup>
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
B
C
Character
Face
Text-type
Answer: B
Question - font
Which of these is invalid HTML?
A
B
C
<font face=“verdana”>
<font face=“verdana, arial”>
<fontface=“verdana”>
Answer: C
Question
What colours are links in HTML?
A
B
C
Blue
Pink
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
<html>
<html> <head>
<head>
<title>This
<title>This is
is my
my test
test page</title>
page</title>
</head> <body>
<p align="right"> This is my new paragraph and I've added some alignment to it </p>
<p align="center"> This is my new paragraph and I've added some alignment to it </p>
Now I just want to add some more
more<br>
<div
I can have
immediately
on the next line</center>
then align
I can “center”>then
have it immediately
on theit next
line
</body></html>
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>
29 Tags (but many different
Hello world ways of achieving
a linebreak does not
insert a linebreak in HTML
similar output)
<p>you will need</p>
<p align="right">to insert</p>
<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
B
C
Limit their use
Splash them all over
Do not use colours
Answer: A
Tables
• Obvious purpose is to arrange information
• Most web pages use invisible tables for layout
<table border=10 bordercolor=blue>
<table>
<tr> <td>This is row one, left side.</td>
<td>This is row one, right side.</td>
</tr>
<tr> <td>This is row two, left side.</td>
<td>This is row two, right side.</td>
</tr>
</table>
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