Website authoring

Web development layers

1. Identify and describe the three web development layers
Content or Structure
 The content or structure layer to enter the content of a web page and create
web page structure.
 Content can consist of text or images and includes the pointers that your
readers need to navigate around your Web site.
Style or Presentation layer
 The style or presentation layer to format a whole web page or individual elements.

Behavior
 The behavior layer to enter the scripting language to a webpage.

Table
2. Explain why tables are used to structure elements within a web page?
WorkSheet-1
Q1) Create a new style sheet in a suitable package. Set the style sheet so that each
table has:

Borders All collapsed-table

All Solid lines-table, td
External line width 1 pixel-table,td
Internal gridline width 1 pixel-table,td
Table Border colour Blue with no other color components-
table, td
Width 90% of window- table
Header Red with no other colour components-
th

Q2) Save your stylesheet as table.css

Q3) Place a copy of your stylesheet in your evidence document.
Q4) Using a suitable software package, create a new webpage called
Table1.HTML.
Q5) Insert the table with 4 rows and 3 columns.
Enter the following content:

Q6) Attach the stylesheet saved in step 2 to this web page.

1
WorkSheet-2
Q1) Create a new stylesheet in a suitable package.Set the stylesheet so that each table
has:

Background yellow colour

Borders All collapsed
All Solid lines
External line width 4 pixels
Internal gridline width 2 pixels
Table Border colour Blue with no other colour components
cell padding top and bottom of 10 pixels, left and right of
20 pixels
Width 80% of window
Header Green with no other colour
components
text alignment centre aligned in all cells

Q2) Save your stylesheet as table1.css.

Q3) Place a copy of your stylesheet in your evidence document.
Q4) Using a suitable software package, create a new webpage called
Table2.html.
Q5) Create a structure which will look like this, using a table:

(The letters shown in this diagram are to help you place objects in the correct
table cells
and must not be visible in the final webpage.)
Q6) Attach the stylesheet saved in step 2 to this web page.

2
WorkSheet-3
Q1) Create a stylesheet defining all colours using hexadecimal values and the
following
styles:

Q2) Add your name, Centre number and candidate number to the bottom of
your stylesheet as a comment.

Q3) Save your stylesheet as Style1.css and place a copy of it in your

evidence
document.

3
Q4) Using a suitable software package, create a new webpage called
back2.html.
Create a structure which will look like this, using a table:

(The letters shown in this diagram are to help you place objects in the correct
table cells
and must not be visible in the final webpage.)
Q5) Attach the stylesheet saved in step 3 to this web page.

WorkSheet-4
Q1) Create a stylesheet defining all colours using hexadecimal values and the
following
styles:

4
Q2) Add your name, Centre number and candidate number to the bottom of
your stylesheet as a comment. Save your stylesheet as Style2.css and place
a copy of it in your evidence document.

Q3) Using a suitable software package, create a new webpage called

back3.html.
Attach the external style sheet that you saved in step 2.

Q4)Enter the heading Hothouse Design

Set the text to style h1.

Q5) Place the contents of J7MENU.HTM as a table below the heading to

create the
menu. Apply the style h3 to all the text within this table.

Q6) Set the table border to 3

Q7) Set the cell padding and the cell spacing for the table to 4 and the width
of the table
to 100%

Q8)Below the menu, create a new table which has 4 rows and 2 columns.

Q9) Merge the cells to create the table as shown below.

(The letters shown in this diagram are to help you place objects in the correct
table cells
and must not be visible in the final webpage.)

Q10)Set the cell padding for the table to 4, the cell spacing for the table to 4
and the
width of the table to 100%.

5
Q11) Set the table border of this table to 1

Q12)Using the contents of the file J7PAGE.TXT place:

• the text Hothouse Design can provide… high quality products. Into cell A
and format this as style h1

• the text We offer a… and much more. Into cell B and format this as follows:
We offer a range of products including: as style p

stationery as style li
computer hardware as style li
computer software as style li
computer consumables as style li

and much more. as style p

• the text You can contact us in many ways. Into cell C and format this as
style h3

• the text Through our website… of our services. Into cell E and format this
as style h3.

•the text Last edited by your name. Into cell D and format this as style h3.

Q13)Save the page as back3.HTM.

WorkSheet-5
Q1) Using a suitable software package, prepare the following styles for use
within all
pages of this website:
• h1 – black, serif font, 36 point, centre aligned
• h2 – black, serif font, 18 point, centre aligned
• h3 – red, sans-serif font, 12 point, centre aligned, bold
• h4 – red, sans-serif font, 12 point, left aligned
• li – red, sans-serif font, 10 point, bullet points, left aligned
• p – blue, sans-serif font, 10 point, left aligned

Save the style sheet and attach it to each web page as you create it. Make
sure the
style sheet that you prepare will work in any web browser.

Q2) Print a copy of the style sheet in css format. Make sure that your name,
centre
number and candidate number are printed on this page.

Q3) Using a suitable software package, create a new homepage

HOMEPAGE.HTML.

6
Q4) Attach the external style sheet that you saved in step 1.

Q5)Enter the heading Peripherals and Consumables

Set the text to style h1.

Q6) Below the heading, create a table which has 4 rows and 2 columns.

Q7) Merge the cells to create the table as shown below.

(The letters shown in this diagram are to help you place objects in the correct
table cells
and must not be visible in the final webpage.)

Q8)Set the cell padding for the table to 10, the cell spacing for the table to 2
and the
width of the table to 100%

Q9) Set the table border to 2

Q10)Using the contents of the file N7PAGE.TXT place:

• the text We stock a wide…accessories and consumables. Into cell A and

format this as style h2

• the text Peripherals include…CDs and DVDs. into cell B and format this as
follows:
Peripherals include as style p
printers as style li
scanners as style li
network and WIFI, as style li
and consumables like: as style p
cartridges as style li
specialist paper as style li
Blank CDs and DVDs. as style li

• the text You can contact us in many ways. Into cell C and format this as
style h3

• the text Through our website…of our services. Into cell E and format this
as style h4.

•the text Last edited by your name. Into cell D and format this as style h3.

7
 Q11)Save the page as HOMEPAGE.HTM.

WorkSheet-6

1)

2) Print a copy of the stylesheet. Make sure that your name, Centre number
and
candidate number are printed on this page.

3) Open the file N8HOTDES.HTM

4) Attach the external stylesheet that you saved at Step 1.

5) Replace the text Homepage with the heading Hothouse Design Ltd
Set the heading to style h1.

6) At the bottom of the page add the text Last updated by and add your
name,
Centre number and candidate number.
Set this text to style h3.

8
7)

8)Centre align all cells in the top row of the table.

9)Right align all cells in the second row of the table.

10) Set the background colour of only the top row of the table to black.

11) Set the cell padding for the table to 20 and the cell spacing for the table
to 5
Set the table width to 100% and the height to 300 pixels.

12) Set the table border to 5

13)Create hyperlinks from the text Contact us and from the image
N8CONTAC.GIF
to point to the file N8CONTAC.HTM which should open in a new window called
_contact

Note that the web page which you have linked to has not yet been created.

14)Save the page as N8HOTDE1.HTM

Print this page as it is viewed in your browser.

Print a copy of the HTML source.

15) Open the file N8CONTAC.HTM

16)Attach the external stylesheet that you saved at Step 1.

17) At the bottom of the page add the text Last updated by and add your
name,
Centre number and candidate number.
Set the text to style h3.

18) Save the page as N8CONTA1.HTM

Print this page as it is viewed in your browser.
Print a copy of the HTML source.

Highlight the HTML source

9
  The hyperlinks from both text and image open N8CONTAC.HTM in a
new window called
_contact

Worksheet-7(Hyperlink & anchor)

1) Open the webpage J1431tmcp.htm in your web editing software .

2) In the text that ends …Holiday Company or by clicking here. make only the
words
clicking here a hyperlink to open the webpage http://www.xahc.co.uk in a
new window
called _manta

3) In the text that starts Email us for details of our Manta… make only the
word Email a
hyperlink to send an email message to tmcp@cie.org.uk with no subject
line.

4) In the same paragraph, make only the text click on this link a hyperlink to
send an email message to tmcp@cie.org.uk with a subject line Donation
by followed by your nameand candidate number.

5)Create an anchor at the top of the page called TOP

6)Create a hyperlink so that the text clicking here to the anchor TOP

7) Place a copy of the HTML source in your evidence document.

Highlight the HTML source

 the hyperlink from the text clicking here opens

http://www.xahc.co.uk in a new window called _manta

 the hyperlink from the text Email sends an email to tmcp@cie.org.uk

10
  the hyperlink from the text click on this link sends an email to
tmcp@cie.org.uk with a subject line Donation by followed by your
name and candidate number.

 the anchor TOP is created

 the hyperlink from the text Clicking here to the anchor TOP.

Worksheet-8(Hyperlink & anchor)

1)Using a suitable software package, open the file N14tc.htm

2)Replace the text Place candidate details here with your name, Centre number
and candidate number.

3)Use the image placed in the left column (the road bike image) to create a hyperlink
to a new web page called roadbike.htm which will open in a new window called
_road

4)Create a hyperlink from the text Click here so that it sends an email message
to TC@cie.org.uk with the subject line Website Offers

5) Create a hyperlink from the text Hothouse Design to the website

http://www.hothouse-design.co.uk which will open in a new window called _hothouse

5)Create an anchor at the top of the page called TOP

6)Create a hyperlink so that the text contact us to the anchor TOP

7) Save the page as N14tc_worked.htm

Highlight the HTML source

 that the hyperlink from the roadbike image opens the web page roadbike.htm
in a new window called _road
 that the hyperlink from the text Click here sends an email message to
TC@cie.org.uk with the subject line Website Offers
 that the hyperlink from the text Hothouse Design opens the web page
http://www.hothouse-design.co.uk in a new window called
_hothouse
 the anchor TOP is created
 the hyperlink from the text contact us to the anchor TOP.

Worksheet-9

1)Open the image NXBACK1.JPG in a suitable application. This will be

manipulated to create the background image to be used in the stylesheet.

11
2) Resize the image so that it is 1024 pixels wide. Maintain the aspect ratio of
the
image. Show a screenshot of this in the document you called Evidence in step
1.
Save this image as NXBACK2.JPG

3)Reduce the image resolution, if necessary, to ensure that the stored image
is no
larger than 250kb.
Save the image as NXBACK3.JPG
Show screenshot evidence of the file size of these images.

4) Open the image NXBOARD1.JPG in a suitable application. This will be

manipulated before being placed on the page.

5) Crop off the right side of the image so that it is 400 pixels wide and 1000
pixels
high. Save this image as NXBOARD2.JPG

Show evidence in the document .

6) Using a suitable software package, open the file NXSNOW.HTM

7)Replace the text Candidate name, centre number, candidate number with
your
name, Centre number and candidate number.

8) Change the html code so that the image NXBOARD2.JPG is 150 pixels wide,
maintaining its aspect ratio.

9) Replace the text Place anchor here with an anchor called TOP

10) Make only the words Click Here a hyperlink to the anchor called TOP

11) Select the most appropriate image to replace the words Ski holidays in
the bottom table.

12)Select the most appropriate image to replace the words Snowboard

holidays in the bottom table.
13) Select the most appropriate image to replace the words Learn to ski in
the bottom table.
14) Make sure that each of the images placed in steps 11 to 13 are 160 pixels
wide
and maintain their aspect ratio.

15) Replace the words Contact us with the image NXIMG2.JPG

16) Resize the image to 160 pixels wide and 160 pixels high.

12
17) Create a hyperlink from the image NXFOOTER.JPG to point to the website,
which
should open in a new window called _hosting

18)There are 3 stylesheets available for you to use. The first has been
attached to
the webpage already. Select the most appropriate stylesheet for this website.
Note down your reasons for selecting this stylesheet as you will need these
reasons later.

19) Save the webpage as NXSNOW1.HTM

Print a copy of the HTML source.

Open this page in your web browser. Print screenshot evidence of this page.
You may use more than one printout to make sure that the entire page is
visible.

Highlight those portions of the code which show that:

• your name, Centre number and candidate number are present on all
printouts
• the external style sheet is attached to the webpage
• the image NXBOARD2.JPG has a width of 150 pixels and has its aspect ratio
maintained
• the anchor TOP has been placed
• the hyperlink from NXFOOTER.JPG opens the Hothouse website in a new
window called _hosting
• the hyperlink from the text ‘Click Here’ links to the anchor ‘TOP’

Worksheet-10

13
14
15
16
 Worksheet-11

Worksheet-12-[ inline style]

17
18
19
Worksheet -13

20
21
22
Worksheet-14-video

23
24
Worksheet-15

25
26
27