Survey
* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project
Download WebQuizes
Transcript
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
