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 -

Where does the tag belong on a web page ? A Arm B Head C Body Question – title structure Answer: B

Example This is my test page

What tag tells the browser where the page starts and stops? A B C Question - structure Answer: C

Adding text to a page This is my test page This is my first web page and here is the text I want to include in it.

Changing the format of the text This is my test page This is my first web page and here is the text I want to include in it and now it appears in green! All text looks the same. We can change the font of the text of the whole page using the tag

Which of the two outputs represents the following html: This is my test page This is my first web page and here is the text I want to include in it and now it appears in green! This local text looks different. All text looks the same. Question - font

Adding text links to a page This is my test page This is a page with a link so click here to get to it

Changing format locally on a page What can you do in Word with formatting using the toolbar buttons?

TAGS – what else is available text writes text as bold text writes text in italics text writes underlined text text lowers text and makes it smaller text Lifts text and makes it smaller text Usually makes text italic text Writes text in biggest heading Also,, etc

Which attribute identifies the type of font to be used? A Character B Face CText-type Question - font Answer: B

Which of these is invalid HTML? A B C Question - font Answer: C

Question 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) What colours are links in HTML? ABlue BPink CRed

Adding image links to a page This is my test page The logo is a link to the Surrey homepage Adding border ="0“ removes the box around the logo

Aligning content This is my test page This is my new paragraph and I've added some alignment to it Now I just want to add some more then I can have it immediately on the next line This is my test page This is my new paragraph and I've added some alignment to it Now I just want to add some more 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)

This is my test page Hello world - a linebreak does not insert a linebreak in HTML you will need to insert special tags that will insert linebreaks where you want it! Another method is of course to write a sentence, that is long enough to force a linebreak. You can center And turn the center off And on! Go left! Go Right! 29 Tags (but many different ways of achieving similar output)

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 - - # 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 Answer: A To make the appearance of colours more powerful on your site do which of the following? ALimit their use BSplash them all over CDo not use colours

This is row one, left side. This is row one, right side. This is row two, left side. This is row two, right side. Tables This is row one, left side. This is row one, right side. This is row two, left side. This is row two, right side. 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.” web-developers-in-demand-as-pay- rises-26.html