Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download WTx1 - City, University of London
Document related concepts
no text concepts found
Transcript
EE103 Web Technology
1a) Using the web page html code shown:
1. <html><head><title>The Toyologist</title></head>
2. <body background="toyback3.gif" text="blue" link="purple" vlink="white"
alink="magenta">
3. <img src="ologist4b.gif" align="right" width="149" height="276" />
4. <img src="toyolog7.gif" align="top" width="338" height="179" />
5. <ul>
6. <li>FREE
7. <a href="remind.htm">Birthday Remind-O-Matic</a></li>
8. <li>INSTANT
9. <a href="commend.htm">Toy Recommendation</a></li>
10. <li>CUSTOM
11. <a href="reports/report.htm#mainpart">E-Mail Toyology Report</a></li>
12. <li>CONSULT
13. <a href="consult.htm">with the Toyologist</a></li>
14. <li>BUY A TOY
15. <a href="http://www.toymainia.com/orders/order.htm">Online Order
Form</a></b></li>
16. </ul>
17. <div align="center">
18. Brought to you by Once Upon a Time Toys in Stowe, Vermont, USA
19. </div></body></html>
Describe in detail line by line the format resulting from the HTML code and draw a
sketch of the resulting web page.
1 <html> <head> and <title> tags used in all web pages to delineate set-up
sections of the web page before the parts that are shown. The title tag shows
the text ‘The Toyologist’ on the top bar of the page. </title> and </head>
close these sections.
2
The <body> tag starts the beginning of the page proper. The background,
text link, vlink and alink attributes define how these text types will be
shown
3
Lines 3,4 load pictures with the <img /> with position and size defined by
the attributes.
4
5
Line 5 is the start of an unordered list with elements separated by <li>.
Lines6 to 16 give several links that to pages within the website (relative)
and outside the website (absolute)
6
Finally lines 17 to 20 define a text division, used to define a region of text
with different attributes to that defined in the body statement for the main
document.
1b) Give a detailed account of the process and steps involved in setting up, creating and
transferring a small web-site consisting of an index.html file together with two directories
one with images and the other with html files from a university computer services
computer or your computer at home to your university file space.
1
2
3
4
5
Setup your public_html directory of the university server. Telnet into the server
and run the setupweb script. This creates and sets the file permission attributes
on the public_html directory.
Create a webpage directory on your computer for your website. Create
webpages and directories in this web page directory
Use lower case for all directory and file names: Unix is case sensitive,
Windows is not.
Use WS_FTP or another ftp program to transfer contents of website to
public_html on university server.
FTP and telnet need server computer username and password to connect.
1c) Use relative addressing between the pages in a website when you want to make your
Website re-locatable.
Use absolute addressing when you are linking to pages outside your website, when you
wish to put a link to y our site in the web page for those who download your site pages, or,
when your site is on a portable medium and you do not wanted it relocated by others.
2b) With the line numbered html code below:
1.
2.
3.
4.
5.
6.
7.
8.
9.
<html><head><title>FREE!</title></head>
<body> <h1>Free Electronic Junk Mail!</h1>
To start receiving junk e-mail from us daily<i>SignUP!</i>
<form method="post" action="myformprog.php">
<input name="success" type="hidden” value="thanks.htm" />
<input type="text" name="anotherone" size="25" />
<input type="image" src="signup.gif" border="0" align="top" />
</form>
*<small>By clicking the above button, you agree to the terms of our Marketing
Agreement.</small>
10. </body></html>
Describe in detail the implementation of a small form in a web page.
Ans. The code for the form is in lines 4 to 8 inclusive. The <form> tag is used to state the
beginning of a form, t gives the method of sending data back to the server and method=
“post” or “get” (default get) and the action attribute that names the routine on the server
that will take the data and process it, myformprog.php. Get appends the data to the URL
request. Post sends the data back with the in a HTTP post request
The input tag used in lines 5-7 creates three different input types: an hidden type creating a
variable success with value “thanks.htm” and a text and image type for inputing some text
into a variable named anotherone and a button returning a flag.
The rest of the page uses the <html>><head><title> and <body> tags to setup the page.
3a)
Describe in detail, line by line the functioning of the code in this page
1.
2.
3.
4.
<html><head><title>Best Seller Brain</title></head>
<body> <map name="brainmap">
<area shape="rect" coords="15,15,220,100" href="fantasy.htm" />
<area shape="poly" coords="70,175, 90,135, 125,195, 160,195, 190,160, 220,185,
185,270, 110,270" href="horror.htm" />
5. <area shape="rect" coords="225,10,330,120" href="scifi.htm" />
6. <area shape="poly" coords="230,130, 330,130, 330,270, 210,270, 210,230"
href="action.htm" />
7. <area shape="rect" coords="330,130,475,270"
8. href="mystery.htm" />
9. </map>
10. <div align="center"> <h1>The Best Seller Brain</h1>
11. <img src="brain.gif" usemap="#brainmap" border="0" />
12. <p><i>"Only a person with a Best Seller mind
13. can write Best Sellers."</i></p></div>
14. <div align="right">-Aldous Huxley</div>
15. </body></html>
This page gives the code for implementing client side image maps. With image maps
regions of an image can be defined for mouse activated links to other web files.
The regions of the map are defined in lines 2-4 starting with the <map> tag with the
name of the image map and then definition of four regions, two rectangles and two
polygons with coordinates in pixels given with the cords attribute and the link reference
with the href. The map deinintion finishes withteh </map> tag.
The page then continues with a page <div> section that in line 11 loads an image
“brain.gif” and uses the image map “brainmap” to define regions on the image for the
links.
3b) What are the four main tags used to create tables?
<table> Start of table, <tr> start of row <th> start of header element <td> start of data
element
4a) Describe in detail how cascade style sheets are used in web-sites to set the overall website style.
Called by webpage with for example <link rel="STYLESHEET" type="text/css"
href="hhh.css" in the header section of a webpage.
Defines attributes for text sections. I.e. how text in body,H1,h2,p will behave.
One style sheet can be used to give the style for all pages in a site.
4b) The following CSS code defines the formatting for a web-site.
1. body {font-size: 12pt;font-family: "Book Antiqua"; color: maroon; background:
url(parchmnt.gif); line-height: 16pt;margin-left: 10pt; margin-right: 10pt;}
2. p {margin-left: 24pt; margin-right: 24pt;}
3. h1 {font: 24pt ProseAntique, Lucida Handwriting;
4. font-weight: bold;line-height: 30pt;}
5. h2 {font: 18pt ProseAntique, Lucida Handwriting;
6. font-weight: bold;line-height: 22pt;}
7. a {text-decoration: none;}
8. a:link {color: red;}
9. a:visited {color: red;}
10. a:active {color: black;}
11. div.footnote {font-size: 9pt;line-height: 12pt; text-align: center}
Using the line-numbered code describe the detailed effect of the above CSS code on web
page format.
The tag definitions in lines 1-11 define the attributes of the these tags in web pages that call
this CSS.
Lines 1-5 define the attributes for the body,p,h1 and h2 tags. Lines 7-10 define the
attributes for links and Line 11 defines a footnote ‘class’ for the DIV tag.
