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