Technologies for Web Applications 300582

FIND A SOLUTION AT Academic Writers Bay

Autumn 2020
Technologies for Web Applications 300582
Page 1 of 6
Week 3 Practical Exercises
Note:
• Exercise 2 will be assessed as part of the Practical Set 1 submission, and therefore will be part of Checkpoint
1 in week 4 practical class.
• Include HTML comments for your student ID, Name, and Practical Class Time at the top of each source file
created.
• All files must be uploaded to your TWA web site before submission of Practical Set 1.
Objectives:
• Become proficient in writing and applying simple CSS to HTML documents
• Complete exercises 1, 2 below and upload the solution to your TWA web site in the Practicals/Prac1/Week3
folder. Test and validate the pages.
Suggested Resources:
• HTML tutorial https://www.w3schools.com/html/default.asp
• HTML 5 tutorial https://www.w3schools.com/html/html5_intro.asp
• HTML tag list https://www.w3schools.com/tags/default.asp
• CSS tutorial https://www.w3schools.com/css/default.asp
• CSS reference https://www.w3schools.com/cssref/default.asp
• HTML validator https://validator.w3.org
• CSS validator https://jigsaw.w3.org/css-validator/
Exercise 1:
• In the practicals/prac1 folder of your TWA web site create a new subfolder named week3
• Upload the files (html and images) from Week 2 Exercise 4, 5, and 6 to your TWA web site in the
Practicals/Prac1/week3 folder.
Exercise 2:
For this exercise, you will create a CSS file that will be applied to exercise-4.html, exercise-5.html, exercise-6.html
that you have uploaded to the week3 folder.
Figures 1, 2a, 2b, 3, 4 on the following pages are screen shots of each html page to show how the
presentation of the html page in the Chrome browser will be changed by the following CSS rules.
i.
ii.
Create a CSS file named master.css
Link the master.css file to exercise-4.html, exercise-5.html, and exercise-6.html in the week3 folder by adding
the appropriate html tag(s) to each of the html documents.
Add appropriate CSS rules to master.css to achieve the following:
iii.
a. background colour for the html document to be set to white
b. typeface for the html document to be set to a list of fonts in the following order: ‘Raleway’, Verdana,
Arial, Sans-serif
Hint: ‘Raleway’ is not a standard web font. You will need to use the Google Font repository.
c. font size for the html document to be set to 100% of the browser default
d. font colour for the html document to be set to black
e. the html document is to have left and right margins of 75 pixels, and top and bottom margins of 50
pixels
f. the html document is to have a solid 1 pixel border of colour #172457. The border is to have rounded
corners with a radius of 15 pixels.
g. The html document is to have left and right padding of 50 pixels, and top and bottom padding of 25
pixels
h. h1 headings are to be 220% of the browser default font size, with text colour of #172457 and must be
centred
Autumn 2020
Technologies for Web Applications 300582
Page 2 of 6
i. h2 headings are to be 160% of the browser default font size, using the Georgia typeface, with text
colour of #7B85AD, and each first letter of each word capitalised.
j. h3 headings are to be 120% of the browser default font size, using the Georgia typeface, with text
colour of gray
k. paragraphs, unordered lists, ordered lists are to have 1.5 line spacing
l. paragraphs should use full text justification
m. list items that are in ordered lists are to use left and right padding of 15 pixels
n. The desalination plant image on the first page, and Figure 1 and Figure 2 on the second page are to
have widths of 744 pixels. The captions of these images are also to be bound by this width.
o. The miniature submarine image on the first page is to be 250 pixels wide, be displayed on the righthand side of the page such that the text wraps around it to the left (note: neither the heading or Box 1
are allowed to wrap around the image), and have bottom padding of 10 pixels and left padding of 15
pixels. The caption of this image is also to be bound by this width. The image should have a top and
right margin of 0 pixels.
p. The captions for these images are to use full text justification, have a 15 pixel padding at the bottom,
use a font size that is 70% of the browser default font size, be displayed in italics, and have a solid 1
pixel black border underneath the caption
q. The caption for the desalination plant is to have no border
r. The navigation section at the top of the page is to have a background colour of #172457 with a font
size that is 120% of the browser default font size, and is to have rounded corners with a radius of 5
pixels.
s. Hypertext links within the navigation section are to be displayed using white text colour and when the
mouse hovers over the link the background colour is to change to #7B85AD (see Figure 4)
t. Each hypertext link within the navigation section is to have top and bottom padding of 14 pixels, and
left and right padding of 16 pixels, and should use centred text alignment. Hint: to achieve the same
layout as shown in the screen shots you may need to investigate the display css property.
u. hypertext links that are not in the navigation section (eg, ‘Next Page’, ‘First Page’) are to have text
colour of black and displayed in italics. If the link has previously been loaded by the browser then the
text colour is to be #7B85AD
v. There is to be a 2 pixel solid black border between the header section of the document and the rest of
the main content
w. The top two lines of the page ‘TWA Week 3 Practical Exercises’ and ‘my Student ID’ must be
displayed to the right of the page, have padding at the bottom of 10 pixels, be in italics at 70% of the
browser default font size and using a text colour of #7B85AD
x. the Copyright text at the bottom of the page is to have white text colour using a font size that is 70%
of the browser default font size. This section is also to have background colour of #7B85AD, left
padding of 20 pixels, top and bottom padding of 2 pixels and have rounded corners with a radius of 5
pixels
y. Box 1 on the first page must have a 1 pixel dashed border of colour #172457 and have left and right
padding of 15 pixels. The border must have rounded corners of radius 5 pixels
Autumn 2020
Technologies for Web Applications 300582
Page 3 of 6
Figure 1 – exercise-4.html
Autumn 2020
Technologies for Web Applications 300582
Page 4 of 6
Figure 2a – exercise-5.html
Autumn 2020
Technologies for Web Applications 300582
Page 5 of 6
Figure2b – exercise-5.html continued
Autumn 2020
Technologies for Web Applications 300582
Page 6 of 6
Figure 3 – exercise-6.html
Figure 4 – showing mouse-over on menu

Order from Academic Writers Bay
Best Custom Essay Writing Services

QUALITY: 100% ORIGINAL PAPERNO PLAGIARISM – CUSTOM PAPER