[Type here]
300582
Session 3, 2019 1 | P a g e
300582 Technologies for Web Applications Week 2 Practical
Exercises
Note:
• Some of these exercises will be assessed as part of the Practical Set 1 submission, and therefore
may be part of Checkpoint 1 in week 4 practical class.
• Include comments for your student ID, Name, and Practical Class Time at the top of each source file created.
• All files must be saved in your WSUSCC PC account or your own laptop with correct folder name and then
uploaded to your vUWS before submission deadline of Practical Set 1.
• Create a simple HTML5 document, you can refer to the HTML template (provided on vUWS) from week
1 lecture material as a starting point
• Validate HTML5 documents using the w3c validator –
https://validator.w3.org
• Complete all exercises for Week 2 Practical Exercises
Reference sites for HTML5
• HTML tutorial https://www.w3schools.com/html/default.asp
• HTML5 tutorial https://www.w3schools.com/html/html5_intro.asp
• HTML tag list https://www.w3schools.com/tags/default.asp
• HTML validator https://validator.w3.org
[Type here]
300582
Session 3, 2019 2 | P a g e
Exercise 1:
For this exercise, you will create a few basic HTML5 documents and these files are part of the practical set 1
submission.
Download the PracSet1_week2 archive from ‘Assessment’ link on vUWS and unzip it.
If you are using a lab computer, create a new folder in your WSUSCC PC account and name it
TWA/practicals/pracset1/week2. If you use your own PC, create and name a folder for
TWA/practicals/pracset1/week2. Copy all the files from the archive to week 2 folder.
Exercise 2:
For this exercise, you are required to open the index.html in the week2 folder with Nodepad++ (or Sublime from Mac) and
edit the source code according to the following requirements:
a. Add a title tag in the head section and name it PracSet1Home
b. Use anchors to label the hyperlinks at the beginning of the body part so you can visit page2.html and
page3.html through these hyperlinks
d. Add an appropriate html5 tag which includes a level1 heading ‘Technologies for Web Applications’ and
a level2 heading ‘History of Olympic Games’ together with navigations from item b)
e. You are required to apply appropriate html5 tags to the quotes in the text of the page.
f. Apply an appropriate html5 semantic tag to contain the main content of the web page and set it off from the
rest of the page.
g. Apply an appropriate html5 tag to all the paragraphs of text and use the correct tags to change the effect of the
text. You can refer to the appendix for the expected outcome.
h. Choose the correct html5 tag for the text at the bottom of the page and change its alignment so the text is centred
on the page.
Once completed, save index.html
[Type here]
300582
Session 3, 2019 3 | P a g e
Exercise 3:
For this exercise, you are required to use Notepad ++ (or Sublime from Mac) to edit the source code of page2.html in
order to insert image. The images are located in the img folded. You need to choose the appropriate html5 tags to achieve
these. Make sure the images have an alternate text. The title of the page is: Soccer
For the remainder of the text, you can apply the same principles from Exercise 2 by adding navigation, header, section of
paragraphs and footer section of the page. The outcome of page2.html should be identical to figure 2 in the appendix.
Once completed, save page2.html
Exercise 4:
For this exercise, you are required to use Notepad++ (or Sublime from Mac) to edit the source code of page3.html so it
looks identical to figure 3 in the appendix. Think about the tags you will need to achieve your coding. There should be
semantic HTML5 tags present. The title of the page is: EPL
For the links at the top of the page, each link should link to the respective exercise HTML document:
index.html, page2.html
Note: For the table, no border or styling should be present at this stage. You are just required to code the data
with HTML5 tags.
Once completed, save page3.html
Exercise 5:
For this exercise, you are required to use Notepad++ (or Sublime from Mac) to edit the source code of page3.html
so the outcome looks identical to figure 4 in the appendix.
Once completed, save page3.html
[Type here]
300582
Session 3, 2019 4 | P a g e
Appendix:
Figure 1 index.html
[Type here]
300582
Session 3, 2019 5 | P a g e
Figure 2 page2.html
[Type here]
300582
Session 3, 2019 6 | P a g e
Figure 3 EPL Leaderboard
[Type here]
300582
Session 3, 2019 7 | P a g e
Figure 4 page3.html (exercise 5) with a list