ICTWEB505: Develop Complex Web Page Layouts

You might also like

Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 36

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)

Developed by Enhance Your Future Pty Ltd 2


ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
ASSESSMENT INFORMATION FOR
LEARNERS
Throughout your training we are committed to your learning by providing a training
and assessment framework that ensures the knowledge gained through training is
translated into practical on the job improvements.

You are going to be assessed for:


 Your skills and knowledge using written and observation activities that apply to the
workplace.

 Your ability to apply your learning.

 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.

How you will be assessed


The process we follow is known as competency-based assessment. This means that
evidence of your current skills and knowledge will be measured against national
standards of best practice, not against the learning you have undertaken either recently
or in the past. Some of the assessment will be concerned with how you apply your skills
and knowledge in the workplace, and some in the training room as required by each
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.

Developed by Enhance Your Future Pty Ltd 3


ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
The assessor will also have determined if you have any special needs to be considered
during assessment. Changes can be made to the way assessment is undertaken to
account for special needs and this is called making Reasonable Adjustment.

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.

What if you disagree on the assessment outcome?


You can appeal against a decision made in regards to your assessment. An appeal should only
be made if you have been assessed as ‘Not Yet Competent’ against a specific unit and you feel
you have sufficient grounds to believe that you are entitled to be assessed as competent. You
must be able to adequately demonstrate that you have the skills and experience to be able to
meet the requirements of units you are appealing the assessment of.

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.

What if I believe I am already competent before training?


If you believe you already have the knowledge and skills to be able to demonstrate
competence in this unit, speak with your trainer, as you may be able to apply for
Recognition of Prior Learning (RPL).

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.

 Ensure that their own qualifications are current.

 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.

 Follow the recommendations from moderation and validation meetings.

How should I format my assessments?


Your assessments should be typed in an 11 or 12 size font for ease of reading. You must
include a footer on each page with the learner name, unit code and date. Your
assessment needs to be submitted as a hardcopy or electronic copy as requested by
your trainer.

How long should my answers be?


The length of your answers will be guided by the description in each assessment, for
example:

T Answer Guidelines
y
p
e

o
f
A
n
s
w
e
r

S 4 typed lines = 50 words, or


h
o 5 lines of handwritten text
r
Developed by Enhance Your Future Pty Ltd 5
ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
t
A
n
s
w
e
r

L 8 typed lines = 100 words, or


o
n 10 lines of handwritten text = 1 of a foolscap page
g 3

A
n
s
w
e
r

B 500 words = 1 page typed report, or


r
i 50 lines of handwritten text = 1 1 foolscap handwritten pages
e 2
f
R
e
p
o
r
t

M 1,000 words = 2 page typed report


i
d 100 lines of handwritten text = 3 foolscap handwritten pages

R
e
p
o
r
t

L 2,000 words = 4 page typed report


o
n 200 lines of handwritten text = 6 foolscap handwritten pages
g

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

How should I reference the sources of information I use in my


assessments?
Include a reference list at the end of your work on a separate page. You should reference
the sources you have used in your assessments in the Harvard Style. For example:

 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.

Developed by Enhance Your Future Pty Ltd 7


ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
ASSESSMENT GUIDE
The following table shows you how to achieve a satisfactory result against the criteria
for each type of assessment task. The following is a list of general assessment methods
that can be used in assessing a unit of competency. Check your assessment tasks to
identify the ones used in this unit of competency.

Assessment Method Satisfactory Result Non-Satisfactory Result

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.

Questions All questions answered Incorrect answers for one


correctly or more questions

Answers address the Answers do not address


question in full; referring the question in full. Does
to appropriate sources not refer to appropriate or
from your workbook correct sources.
and/or workplace

Third Party Report Supervisor or manager Could not demonstrate


observes work consistency. Could not
performance and confirms demonstrate the ability to
that you consistently meet achieve the required
the standards expected standard
from an experienced
operator

Written Activity The assessor will mark the Does not follow
activity against the guidelines/instructions
detailed
guidelines/instructions

Attachments if requested Requested supplementary


are attached items are not attached

All requirements of the Response does not


written activity are address the requirements
addressed/covered. in full; is missing a
response for one or more
areas.

Developed by Enhance Your Future Pty Ltd 8


ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
Assessment Method Satisfactory Result Non-Satisfactory Result

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.

Responses must refer to One or more of the


appropriate sources from requirements are
your workbook and/or answered incorrectly.
workplace Does not refer to or utilise
appropriate or correct
sources of information

Observation/Demonstration All elements, criteria, Could not demonstrate


knowledge and elements, criteria,
performance evidence are knowledge and
demonstrated at the performance evidence at
appropriate AQF level the appropriate AQF level

Case Study All comprehension Lack of demonstrated


questions answered comprehension of the
correctly; demonstrating knowledge required to
an application of complete the case study
knowledge of the topic questions correctly. One
case study. or more questions are
answered incorrectly.

Answers address the Answers do not address


question in full; referring the question in full; do not
to appropriate sources refer to appropriate
from your workbook sources.
and/or workplace

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.

Attachments if requested Requested supplementary

Developed by Enhance Your Future Pty Ltd 9


ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
Assessment Method Satisfactory Result Non-Satisfactory Result

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.

are attached items are not attached

Developed by Enhance Your Future Pty Ltd 10


ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
ASSESSMENT COVER SHEET
Assessment Cover Sheet

Learner’s name: MUKHTAR SINGH

Assessors Date
Name: Submitted:

The following questions are to be completed by the assessor:

Is the Learner ready for assessment? Yes No

Has the assessment process been explained? Yes No

Does the Learner understand which evidence is to be


Yes No
collected and how?

Have the Learner’s rights and the appeal system been fully
Yes No
explained?

Have you discussed any special needs to be considered


Yes No
during assessment?

The following documents must be completed and attached:

 Written Activity and Checklist

The learner will complete the written activity provided to S NYS


them by the assessor. The Written Activity Checklist will be
completed by the assessor.

 Practical Activity Checklist

The learner will demonstrate a range of skills and the


assessor will observe where appropriate to the unit. The S NYS
Practical Activity Checklist will be completed by the
assessor.

 Questions and Questions Checklist

The learner will answer a range of questions either S NYS


verbally or written. The Questions Checklist will be
completed by the assessor.

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

Developed by Enhance Your Future Pty Ltd 11


ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
I declare that:

 The material I have submitted is my own work

 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:

Result and Feedback

Feedback to Learner:

Overall Outcome Competent Not yet Competent

Assessor
Date:
Signature:

Developed by Enhance Your Future Pty Ltd 12


ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
WRITTEN ACTIVITY
Your task is to write the answers to each of the following questions. Answers should
exceed 50 words but no more than 100 words for each questions:

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.

2. Outline the principles of web site design.

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.

Developed by Enhance Your Future Pty Ltd 14


ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
WRITTEN ACTIVITY CHECKLIST
Written Activity Checklist

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.

Learner Name: MUKHTAR SINGH

Assessor Name:

Has the learner


satisfactorily completed
the written activity?

Yes No

Did the Learner provide evidence of their ability to:

Explain the following and describe their application in


web site design:
 
 Hypertext markup language (HTML) and extensible
hypertext markup language (XHTML)

 Cascading style sheet (CSS)  

 Hypertext transfer protocol (HTTP)  

Outline the principles of web site design.  

Feedback to Learner:

Developed by Enhance Your Future Pty Ltd 15


ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
Result  Satisfactory  Not Yet Satisfactory

Assessor’s Signature: Date:

Developed by Enhance Your Future Pty Ltd 16


ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
PRACTICAL ACTIVITY
The following task must be demonstrated in conditions that are safe and replicate the
workplace. Noise levels, production flow, interruptions and time variances must be
typical of those experienced in the website technologies field of work, and include
access to:

 A computer.

 An aesthetic presentation brief.

 A variety of browsers.

 The internet, to validate web pages against the W3C.

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

Developed by Enhance Your Future Pty Ltd 17


ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
common for menus, ads and other supplementary information to be placed in
sidebars on websites.
 Footer: An internet page's footer is the part at the bottom of the page. A variety of
information may be included in the footer. Some sites use the navigation bar as a
footer on their pages. They can be used as site maps or as connections to other sites.
 Details: Information that is closely related to the primary article of a web page, but
is not fundamental to the article, is known as a detail. A site visitor may not require
them, but they offer value to the article or another emphasis on the page.
 Summary: Description: Summaries are headers that summarise what is found in the
detail element.

2. Create the structure of the web page, including:

a. HTML and XHTML

<!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>

<th> Educational </th> <th> International Books</th></tr> </table></center>


<p style = "color: red">For your school's bookshop, Bookstore provides an online
shopping cart and a point-of-

sale system. Online consumers may explore and buy products using the shopping
interface or through Buy Now

Developed by Enhance Your Future Pty Ltd 18


ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
links included on other websites. Point of Sale, which works with USB barcode
scanners and credit card readers,

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>

Now I am showing the structure of XHTML below:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
</head>
<body>
some content here...
</body>
</html>

b. CSS

The structure of CSS is shown below:


body {
background-color: lightblue;
}

Developed by Enhance Your Future Pty Ltd 19


ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
h1 {
color: black;
text-align: center;}
p{
font-family: verdana;
font-size: 11px;
}

c. HTTP

The structure which is used for HTTP is likely to be shown as below:


GET /Book shop.html HTTP/1.1
Host: www.bookshop.com
HTTP/1.1 200 OK
Date: Mon, 2o July 2021 16:37:45 GMT
Server: Apache
Last-Modified: Mon, 21 July 2021 06:13:43 GMT
Transfer-Encoding: chunked
Connection: Stay-Alive
Content-Type: text/html; charset=UTF-8

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

Developed by Enhance Your Future Pty Ltd 20


ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
The website page is to be positioned as below

I have opened my web page on computer and found the following view.

Developed by Enhance Your Future Pty Ltd 21


ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
The webpage must be appropriate and adaptable to any screen size at all times for each
and every device with a varied screen size, processing capability, operating system, and
so on. So the most essential thing is to place the parts of the web page to accomplish the
desired design specification in a way that works on a variety of devices, which is done
by:

 Set the viewport to the desired size


 The content is to be sized to fit the viewport
 Media queries in CSS are to be used to make a website more responsive
 How to select breakpoints in your code
 Use Chrome DevTools to see media query breakpoints.

Complete the following steps to ensure the web page is validated and tested in major
browsers:

4. Validate, against industry standards, the CSS. Document this validation.

To validate a website's code, I would ensure that it adheres to industry standards. Site-


wide code validation would be too time-consuming to be an effective validation
approach. As a result of the error margin and the additional time required, this
technique of validation is unsuitable. As a developer, I would use W3C's validation tools.
As part of the W3C certification process, designers can upload their code directly to the
W3C website. Many of its criteria are validated, including.

• 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

User agents, particularly assistive technology, should be able to understand the


information reliably as technologies and user agents evolve: Within acceptable bounds,
this implies that your website or app should be compatible with a variety of platforms,

Developed by Enhance Your Future Pty Ltd 22


ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
technologies, and devices Analyzing identifies and corrects any browser
incompatibilities that are found.

 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:

• Internet Explorer Internet


• Mozilla as well as Netscape Navigator
• Opera
• Safari
• Konqueror
• Lynx
• Firefox
• Google Chrome

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:

Developed by Enhance Your Future Pty Ltd 23


ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
• CrossBrowserTesting.com
• Laboratory sauce
• Viewer for several browsers
• BrowserStack
• Browserling
• BrowseEmAll
• Browsershots
• Browser
• TestingBot
• Spoon
• Equity

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/

Ensure that the website is accessible by performing the following actions:

Developed by Enhance Your Future Pty Ltd 24


ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
7. Check to ensure that the website is accessible, to ensure that it can be viewed.
Document this check

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: According to web design, accessibility means that users of a computer or


other device may access a website in a way that is functional. Beyond browser
compatibility, accessibility is a complex issue.

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.

There are number of platforms and devices


The usage of Responsive Web Design is one of the most prevalent advances in wedding
design in terms of sites being seen on a number of platforms and devices (RWD). RWD is
a web design technique that aims to offer excellent viewing experiences, independent of
screen size, using a single source code. The approach results in simple reading and
navigation with little picture scaling, panning, and scrolling. RWD development alters
the design of websites dynamically dependent on the size and orientation of the screen.
Designers chose where and to what size page components will change when creating
using RWD. Because of the rise of mobile devices on the market, the approach is very
helpful. Developed by Enhance Your Future Pty Ltd 35 ICTWEB505 - Develop
sophisticated web page layouts Version 3 Course Code and Name There is no standard
screen size, and viewers frequently switch between orientations.
Designers must take care to utilise RWD in a way that adheres to all of the same design
standards that they do for other websites. Developing a website that delivers a pleasant
visitor experience across numerous screen sizes and orientations is a difficult challenge.
Both extroversion and introversion must be considered.
Text browsers
Text-only browsers are web browsers that only display the text on webpages.
They disregard any other graphical data.

Developed by Enhance Your Future Pty Ltd 25


ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
There are popular text browsers:
● webble
● links
● line mode browser
● w3m
There are some reasons why text browsers are worthy
Less bandwidth is required to load online pages.
 Lower bandwidth speeds up downloads while putting less strain on the device's
CPU.
 When users do not have to pay to download photos and graphics, they may be more
liberal with their data consumption.
Beneficial for people who have poor vision.
Text-only browsers allow those with poor eyesight to focus more readily. Text-to-
speech apps can interpret text more readily on message body browsers.

8. Check, to ensure accessibility, the website sections. Document this check.

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,

Developed by Enhance Your Future Pty Ltd 26


ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
the files must be named in accordance with the HTTP protocol so that any requests
made over the Internet may be handled.

9. Check the web page elements, to ensure their accessibility. Document this check.

Designers should always double-check all page components on a website development


to guarantee its accessibility. Accessibility issues at the page element level of a website
are often resolved using HTML or XHTML code. Website designers must have a good
grasp of these two coding methods. Designers can utilise tools to discover instances of
inaccessibility, but they must usually resolve the issue manually.

As you create a website, describe and implement the following principles.


Extensions to Hypertext Markup Language (HTML) (XHTML):

HTML (hyperlink markup language) is a set of codes or symbols used by website


designers to incorporate into files. Visitors to web pages see the information that has
been entered.

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.

Designing websites with HTML

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.

The XHTML used in website design

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.

Developed by Enhance Your Future Pty Ltd 27


ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
PRACTICAL ACTIVITY CHECKLIST
*Multiple copies of the checklist will need to be printed if the activity is to be performed
more than once.

Practical Activity Checklist

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.

Learner Name: MUKHTAR SINGH

Assessor Name:

Has the learner


satisfactorily completed
the practical activity?

Yes No

Did the Learner provide evidence of their ability to:

Identify, and document, the main sections of the web  


page layout

Create the structure of the web page, including:


 
 HTML and XHTML

 CSS  

 HTTP  

Position the elements of the web page to achieve the


required design specification in a manner to suit a  
variety of devices.

Validate, against industry standards, the CSS. Document  


this validation.

Using the most robust techniques, correct any identified  


browser incompatibilities

Developed by Enhance Your Future Pty Ltd 28


ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
Test the website in the various browsers. Document the  
testing undertaken.

Check to ensure that the website is accessible, to ensure  


that it can be viewed. Document this check.

Check, to ensure accessibility, the website sections.  


Document this check.

Check the web page elements, to ensure their  


accessibility. Document this check.

Feedback to Learner:

Result  Satisfactory  Not Yet Satisfactory

Assessor’s Signature: Date:

Developed by Enhance Your Future Pty Ltd 29


ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
QUESTIONS
The following questions may be answered verbally with your assessor or you may write
down your answers. Please discuss this with your assessor before you commence. Short
Answers are required which is approximately 4 typed lines = 50 words, or 5 lines of
handwritten text.

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.

1. List the eight (8) main sections of web pages.


Answer: The term "web page layout" refers to all of the elements that appear on and are
a part of all website pages. The following are the key sections of accessible for web
pages:

 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:

• The World Wide Web Consortium's standards: Organisation in charge of


development and standardisation of the World Wide Web is called World Wide Web
Consortium (W3C).
• The Web 2.0 era: A second stage of Internet evolution is referred to as Web 2.0. Only
data was available online in Web 1.0, allowing users to examine information found
on websites.

5. Explain the application of the industry standards to web design.


Answer: W3C standards must be followed by website designers in order to create
websites that are accessible to all users. When a website is opened on a different system,
it may not behave as intended. In other areas, computers and their networks can have
completely different environments. As a result, by far the best technique of website
building is to use standardised coding and protocols to construct and provide access to
their sites. Designers should guarantee that their sites are tested via Internet
connections, on a variety of devices and browsers to confirm that they meet W3C
standards.

6. What are the techniques to use to correct browser incompatibilities?


Answer: In order to address browser incompatibility issues, designers should employ
the most resilient techniques possible including.
 Cross Site Scripting: Cross Site Scripting is the most typical remedy for such issues.
 Robust solutions: Robust solutions are those that target specific instances or
categories of browser issues and are very effective at reducing compatibility issues.
 Troubleshooting: Designers can more efficiently discover and address problems by
using troubleshooting to diagnose specific concerns.

Developed by Enhance Your Future Pty Ltd 31


ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
7. What are robust solutions?
Answer: Because they are often quite effective at resolving compatibility difficulties,
solutions that target specific instances or types of browser issues are referred to as
robust solutions. Because they handle a wide range of browsers and scenarios, robust
solutions discover more faults. Designers can pinpoint and solve problems more
efficiently by using troubleshooting to diagnose specific issues rather than merely
sending out multiple versions of a site to visitors' browsers.

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.

Developed by Enhance Your Future Pty Ltd 33


ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
REFERENCES:
https://www.w3schools.com/html/img_sem_elements.gif
http://tomkenny.design/articles/the-principles-of-good-web-design-part-2-
navigation/

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

Developed by Enhance Your Future Pty Ltd 34


ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
QUESTIONS CHECKLIST
Questioning Checklist

The assessor needs to indicate whether they have conducted the questioning as
written questions or as verbal questions by ticking the box below.

 Written Questioning  Verbal Questioning


The assessor must provide evidence with the assessment tool. For written questions,
the assessor must provide the learner’s original written responses. For verbal
questioning, the assessor must provide dot points as a minimum on the learner’s
responses.

For details on how to conduct and contextualise this form of assessment, please refer
to the questioning checklist explanation in the assessor guide.

Learner’s name: MUKHTAR SINGH

Assessor’s name:

If questions are answered verbally, the assessor must write Satisfactory


detailed notes on the learners responses. If answers are recorded response
separate to this document, they must be attached to the
assessment documents. Yes No

List the eight (8) main sections of web pages.


1  

What is the typical structure that web standards ask that all
2 designers adhere to when structuring web pages?  

What information is it essential to consider when positioning


3 the web page elements to achieve the design specification?  

Identify and briefly explain the industry standards that the


4 CSS should be validated against.  

Explain the application of the industry standards to web


5 design.  

Developed by Enhance Your Future Pty Ltd 35


ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name
What are the techniques to use to correct browser
6 incompatibilities?  

What are robust solutions?


7  

What are at least five (5) of the commonly used browsers you
8 will need to test the website in?  

What are three (3) of the issues to consider when checking


9 that the website is accessible to ensure it can be viewed?  

Outline two (2) different accessibility issues that may be


10 identified when checking the accessibility of website sections.  

What will generally be used to fix issues of accessibility at the


11 page element level of a website?  

Feedback to Learner:

Result  Satisfactory  Not Yet Satisfactory

Assessor’s Signature: Date:

Developed by Enhance Your Future Pty Ltd 36


ICTWEB505 - Develop complex web page layouts Version 3
Course Code and Name

You might also like