Professional Documents
Culture Documents
ICTWEB505: Develop Complex Web Page Layouts
ICTWEB505: Develop Complex Web Page Layouts
ICTWEB505: Develop Complex Web Page Layouts
ASSESSMENT
This material is developed by Enhance Your Future Pty Ltd for Australian Institute of
Science and Technology (AIST)
Your ability to recognise common principles and actively use these on the job.
All of your assessment and training is provided as a positive learning tool. Your assessor
will guide your learning and provide feedback on your responses to the assessment
materials until you have been deemed competent in this unit.
The assessment tasks have been designed to enable you to demonstrate the
requirements of the performance criteria and knowledge in this unit to successfully
demonstrate competency at the required standard.
Your assessor will ensure that you are ready for assessment and will explain the
assessment process. Your assessment tasks will outline the evidence to be collected and
how it will be collected, for example; a written activity, case study, or demonstration and
observation.
What happens if your result is ‘Not Yet Competent’ for one or more
assessment tasks?
Our assessment process is designed to answer the question “has the desired learning
outcome been achieved yet?” If the answer is “Not yet”, then we work with you to see
how we can get there.
In the case that one or more of your assessments has been marked ‘NYC’, your trainer
will provide you with the necessary feedback and guidance, in order for you to resubmit
your responses.
Your trainer will outline the appeals process, which is available to the learner. You can request a
form to make an appeal and submit it to your trainer, the course coordinator, or the
administration officer. The RTO will examine the appeal and you will be advised of the outcome
within 14 days. Any additional information you wish to provide may be attached to the appeal
form.
Assessor Responsibilities
Assessors need to be aware of their responsibilities and carry them out appropriately.
To do this they need to:
Ensure that participants are assessed fairly based on the outcome of the language,
literacy and numeracy review completed at enrolment.
Developed by Enhance Your Future Pty Ltd 4
ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
Ensure that all documentation is signed by the learner, trainer, workplace supervisor
and assessor when units and certificates are complete, to ensure that there is no
follow-up required from an administration perspective.
When required, request the manager or supervisor to determine that the learner is
‘satisfactorily’ demonstrating the requirements for each unit. ‘Satisfactorily’ means
consistently meeting the standard expected from an experienced operator.
When required, ensure supervisors and learners sign off on third party assessment
forms or third party report.
T Answer Guidelines
y
p
e
o
f
A
n
s
w
e
r
A
n
s
w
e
r
R
e
p
o
r
t
R
Developed by Enhance Your Future Pty Ltd 6
ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
e
p
o
r
t
Website Name – Page or Document Name, Retrieved insert the date. Webpage link.
For a book: Author surname, author initial Year of publication, Title of book,
Publisher, City, State.
You will receive an overall result of Competent or Not Yet Competent for this unit. The
assessment process is made up of a number of assessment methods. You are required to
achieve a satisfactory result in each of these to be deemed competent overall. Your
assessment may include the following assessment types.
Written Activity The assessor will mark the Does not follow
activity against the guidelines/instructions
detailed
guidelines/instructions
You will receive an overall result of Competent or Not Yet Competent for this unit. The
assessment process is made up of a number of assessment methods. You are required to
achieve a satisfactory result in each of these to be deemed competent overall. Your
assessment may include the following assessment types.
Practical Activity All tasks in the practical Tasks have not been
activity must be completed effectively and
completed and evidence of evidence of completion
completion must be has not been provided.
provided to your
trainer/assessor.
All tasks have been
completed accurately and
evidence provided for
each stated task.
You will receive an overall result of Competent or Not Yet Competent for this unit. The
assessment process is made up of a number of assessment methods. You are required to
achieve a satisfactory result in each of these to be deemed competent overall. Your
assessment may include the following assessment types.
Assessors Date
Name: Submitted:
Have the Learner’s rights and the appeal system been fully
Yes No
explained?
Learner Declaration
I agree to undertake assessment in the knowledge that information gathered will only
be used for professional development purposes and can only be accessed by the RTO
I have kept a copy of all relevant notes and reference material that I used in the
production of my work
I have given references for all sources of information that are not my own,
including the words, ideas and images of others
Learner
Date:
Signature:
Feedback to Learner:
Assessor
Date:
Signature:
1. Explain the following and describe their application in web site design:
a. Hypertext markup language (HTML) and extensible hypertext markup language
(XHTML)
b. Cascading style sheet (CSS)
c. Hypertext transfer protocol (HTTP)
Answer:
a. Hypertext markup language (HTML) and extensible hypertext markup
language (XHTML): These are the root elements of all web pages, which are
called HTML or XHTML. Designers of websites use HTML, a set of codes or symbols,
to place into files. In the case of web pages, the information is displayed to the site's
visitors. They are also known as tags, and they instruct the web browser on how to
display words and images for site visitors using hypertext markups. For website
visitors, HTML is the language used to communicate the design that has been created
by designers to web servers and computers.
b. Cascading style sheet (CSS): Cascading Style Sheets are to stand for CSS. To
communicate information about page layout to XHTML, Cascading Style Sheets (CSS)
are used. CCS allows web designers additional control over how pages are displayed
by Internet browsers.
c. Hypertext transfer protocol (HTTP): HTTP stands for Hypertext transfer Protocol
which is considered as a protocol to be used on the world wide web in order to
ensure “how messages are sent and received online” to be standardised. The
protocol stipulates that network devices must be able to accurately respond to
commands they are sent across the network.
Answer: Best practises and guidelines for developing websites that suit the needs of
clients and designers are outlined in the principles of web design. A multitude of
strategies can be used to achieve four general design concepts that many designers
utilise as guiding principles in their online design. A website's goal is to be:
Aesthetically pleasing
Engaging
Easy to use
Developed by Enhance Your Future Pty Ltd 13
ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
Effective
Visitors should be able to simply browse around a website to find specific information
with good website design. Searching for the information they were looking for on the
site should be effortless and intuitive.
For this assessment, the learner must complete the written activity.
The written activity is a stand-alone activity that will allow the learner to display the
requirements of the performance criteria and knowledge evidence in this unit that are
essential when deciding overall competency.
Assessor Name:
Yes No
Feedback to Learner:
A computer.
A variety of browsers.
For this task you are to develop a complex website layout that is suitable for a variety of
devices.
Perform the following steps to build the web page according to the design prototype:
1. Identify, and document, the main sections of the web page layout
Header: information placed in this section is essem\ntial to inner working of the
document. this place is called Header
Nav: Web pages with navigation links are called Nav pages. Navigating a website
involves clicking on buttons that take users to different pages. Site-wide navigation
parts are often the same on every web page.
Section: Sections are portions or sections of documents that appear on web sites,
such as news articles or white papers. They can be inserted or deleted separately
throughout the design process, but visitors to the site will see them as part of
another document.
Article: An article is a self-contained, autonomous piece of writing. Articles can be
positioned according to design aesthetics without the requirement for supporting
components.
Aside: On a web page, asides are used to store content that is not part of the main
body of text. A sidebar is a section of a web page that is not the main emphasis. It is
<!DOCTYPE html>
<html>
<head>
<title>Bookshop</title>
<link rel="stylesheet" href="Book Shop.css">
</head>
<body bgcolor="lightblue">
<h1><center> Book Shop</center></h1>
<hr color = "blue">
<center><h2>Be more there, learn more there</h2></center>
<center><table border="1"> <tr> <th> Kind of Books </th> <th> Story Book</th>
<th>Fashion & style</th>
sale system. Online consumers may explore and buy products using the shopping
interface or through Buy Now
can manage in-person sales. Students who choose to pay later can do so by charging
their accounts. </p>
<img alt src="side 1.jpg" align="left" height = "400" width = "400" >
<img alt src = "bookstore-circular-space-indoor.jpg" align = "middle" height = "400"
width = "500" >
<img alt src="side 2.jpg" align="right" height = "400" width = "400" >
<marquee bgcolor="blue"> <p style="white"> Cantact No. 8572001608 | Facebook |
Whatsapp | </p>
</marquee>
</body>
</html>
b. CSS
c. HTTP
Webpage link:
Book Shop.html
3. Position the elements of the web page to achieve the required design specification in
a manner to suit a variety of devices
I have opened my web page on computer and found the following view.
Complete the following steps to ensure the web page is validated and tested in major
browsers:
• HTML.
• XHTML.
• CSS.
• Applications for mobile devices
Web 2.0 validation is more successful when a site is tested with real users. In certain
cases, designers will rely on notes gathered from previous projects, input from other
developers, and beta testing to evaluate whether or not their sites are compatible with
web 2.0 settings.
5. Using the most robust techniques, correct any identified browser incompatibilities
There should be no duplicate attributes, and elements should have entire start and
end tags.
Name, role, and worth of the individual.
Users can get status notifications without disrupting their operation by focusing on
an aspect. When a user sees "added to cart" when buying online, it should act as a
message and not as a distraction.
6. Test the website in the various browsers. Document the testing undertaken.
All dynamic web pages produced in the form of a website must be evaluated in a variety
of browsers to ensure compatibility and proper dynamic functionality.
When I test a website, I put it into an HTML viewer and then open it in a variety of
browsers and operating systems to ensure that it works consistently across all
platforms. As a designer, I would evaluate the functionality of my website on as many
different browsers as feasible. For possible site visitors, there are a variety of browsers
and browser situations to consider. Some typical browsers I use include:
Browsers frequently use components from other browsers, as well as other plug-ins and
functionalities. As a result, identifying only one browser is insufficient. Designers should
instead strive to figure out how a browser gets confused with the World Wide Web by
potential site visitors. Software tests are created with the intent of detecting cross-
browser compatibility issues. There are a variety of detecting programmes available,
each with their own set of strengths and drawbacks. Designers must evaluate their own
needs and resources in order to choose which solutions are most suited to their needs.
The following are some of the most common browser test solutions:
To guarantee that the required dynamic content functionalities are tailored to individual
requirements, debug scripts and web component testing will be required. The
debugging method entails locating any problems and modifying the script to eliminate
them. A variety of instruments can be utilised to help with this operation. Web
component testing will also do independent testing of each of the component software
that will be presented on the dynamic web page. During the testing of my web page's
html code, I discovered a few issues, which I've documented with the accompanying
screen images, and I've also included error-free web page code in the following sections.
A URL to where I tested the code is provided below. I have tested on some tools and
browsers as below;
https://codepen.io/mukhtar123/pen/gOWZYmX
https://jsfiddle.net/nfmugaxe/1/
Designers should confirm that their websites are accessible to guarantee that they can
be seen in the way they were intended. All designers should make it a priority to
consider accessibility when creating their work.
Accessibility concerns issues such as: allowing online pages to be used in text-only
browsers; ensuring web pages can be read on a range of platforms and devices; and
making website content accessible to persons with impairments, including visual
impairment.
Website parts should be reviewed to ensure they are accessible. A website's parts level
primarily refers to the pages that comprise the site via a sequence of connections. One of
the major aims of excellent web design is ease of navigation; consequently, designers
should consider individuals who are visiting the site from a range of circumstances need
to be able to traverse the site as well as any other user.
Section-level accessibility issues that may need to be addressed include:
portions of pages being obscured due to screen size and orientation Pages not being
accessible due to browser limitations (text only) Naming convention that does not
clearly depict where links go, vision impaired users require text and audio
Allowance for multiple input methods such as light pens and sound activation
How HTTP is used in website design: Website designers may develop functional
webpages without using precise HTTP data. The site, however, will not be accessible
via an Internet connection. Designers organise the coding on their websites by
function order and location. They must then place the data compilation in a position
where it can be accessible by other locations on the World Wide Web via an Internet
Developed by Enhance Your Future Pty Ltd 38 ICTWEB505 - Develop sophisticated
web page layouts Version 3 Course Code and Name connection. Once at that place,
9. Check the web page elements, to ensure their accessibility. Document this check.
Hypertext markups, often known as tags, instruct web browsers on how to display texts
and pictures to site users. HTML is a coding language used by designers to transmit their
designs to web servers and computers, allowing their sites to be presented in the
appropriate manner to site visitors.
Typically, wedding website designers do not construct or design their sites utilising
hand produced HTML coding. There are software tools that convert website designs
created by designers into HTML code. The usage of coding apps may substantially
enhance productivity by reducing the amount of time required to develop and build
websites and reducing the possibility of errors due to manually generated HTML code.
Designers of websites employing HTML who discover that XHTML does not meet their
design needs might develop new code to meet those criteria. Designers can integrate or
develop new web design improvements by adding information to XHTML code in a way
that it can be read.
For this assessment, the learner must complete the practical activity.
The practical activity is a stand-alone activity that will allow the learner to display the
knowledge and performance evidence that is essential when deciding overall
competency.
Assessor Name:
Yes No
CSS
HTTP
Feedback to Learner:
Your assessor will take down dot points as a minimum if you choose to answer them
verbally.
Answer the following questions either verbally with your assessor or in writing.
Header
Nav
Section
article
Aside
footer
details
Summary
2. What is the typical structure that web standards ask that all designers adhere to
when structuring web pages?
Answer: To avoid incompatibility concerns with their desired site users, designers
should adhere to that framework. The following is the structure:
Doctype: A doctype declaration is a line of code that tells web browsers about the
Markup language
Document tree: A document tree is a collection of all the coding that goes into
making a website. HTML/XHTML, Head, and Body are the three main portions of a
document tree.
3. What information is it essential to consider when positioning the web page elements
to achieve the design specification?
Answer: Before starting to build their websites, designers should have a clear idea of
what they want them to look like. Prior to beginning work on a site, every detail of
Developed by Enhance Your Future Pty Ltd 30
ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
function, appearance, intended usage, and intended users should be carefully addressed.
The needs of the client should take precedence over the desires of the designers.
Designers have a responsibility to explain to their clients what is possible and what they
believe would work best.
4. Identify and briefly explain the industry standards that the CSS should be validated
against.
Answer: Cascading Style Sheets (CSS) should be validated to industry standards by
designers. Standards in the industry refer to the following:
8. What are at least five (5) of the commonly used browsers you will need to test the
website in?
Answer: For maximum functionality, designers should test their sites across a variety of
browsers. It is possible that site users will use different browsers and browser
circumstances. These are some of the most regularly used browsers:
• Firefox
• Google Chrome
• Lynx
• Mozilla
• Opera
• Safari
9. What are three (3) of the issues to consider when checking that the website is
accessible to ensure it can be viewed?
Answer: Accessibility is concerned with following issues:
• Allowing text-only browsers to view web pages
• Securing the compatibility of web pages with many different platforms and devices
• Content on websites can be made accessible to persons with impairments, especially
those with visual impairment.
10. Outline two (2) different accessibility issues that may be identified when checking
the accessibility of website sections.
Answer: Some examples of accessibility issues are as follows:
• Users who are blind or visually impaired require text, voice, and a consistent naming
convention.
• Some pages are hidden due to screen size and orientation.
• A variety of input techniques, such as light pens and sound activation, are permitted.
• Browser constraints prevent you from accessing certain pages (Text only).
Developed by Enhance Your Future Pty Ltd 32
ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
11. What will generally be used to fix issues of accessibility at the page element level of a
website?
Answer: The HTML or XHTML coding is typically used to address accessibility issues at
the page element level of a website. Both coding methods are essential for website
designers to know. It is possible to detect instances of inaccessibility using software
solutions, but designers are usually forced to fix the problem manually.
https://www.sitepoint.com/web-foundations/basic-structure-of-a-web-page/
http://mobile.css-validator.org/
https://www.browseemall.com/Blog/index.php/2015/04/21/cross-browser-testing-
solutions-the-ultimate-guide/
https://www.demacmedia.com/design-user-experience/mini-tutorial-how-to-fix-cross-
browser-compatibility-issues/
https://www.youtube.com/watch?v=KfXmMyloKfU
http://www.woodcote-consulting.com/defining-an-open-platform/
https://openreferral.org/faqs/what-do-we-mean-by-open-platforms-whats-an-api/
https://en.wikipedia.org/wiki/Open_platform
https://developer.mozilla.org/en-
US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure
http://www.webopedia.com/TERM/H/HTTP.html
https://www.w3.org/standards/
http://www.w3c.gr/docs/INNOVA-W3C.pdf
http://whatis.techtarget.com/definition/Web-20-or-Web-2
https://www.w3schools.com/html/html_layout.asp
https://www.codementor.io/codementorteam/4-different-html-css-layout-techniques-
to-create-a-site-85i9t1x34
https://techterms.com/definition/page_layout
The assessor needs to indicate whether they have conducted the questioning as
written questions or as verbal questions by ticking the box below.
For details on how to conduct and contextualise this form of assessment, please refer
to the questioning checklist explanation in the assessor guide.
Assessor’s name:
What is the typical structure that web standards ask that all
2 designers adhere to when structuring web pages?
What are at least five (5) of the commonly used browsers you
8 will need to test the website in?
Feedback to Learner: