vce / vet information and communication...

VET Information and Communication Technology YEAR 2 (Units 3&4)

Copyright © IVET 2018 Edition

1

Innovative Vocational Education and Training Institute

VCE / VET INFORMATION AND COMMUNICATION

TECHNOLOGY

YEAR 2 (UNITS 3 & 4)

STUDENT WORKBOOK CERTIFICATE III (ICT30115)

CORE COMPETENCIES and SELECTED ELECTIVES

Student name: __________________________ Year level: _____ Class: _____



2

CONTENTS

PAGE CHAPTER 1 ICTWEB302 - Build simple websites using commercial programs + 6 ICTWEB301 - Create a simple mark-up language document + BSBBEBU401 - Review and Maintain a website CHAPTER 2 ICTICT301 - Create User Documentation 48 CHAPTER 3 ICTSAS307 - Install, configure, and secure a small office or home office network 65 CHAPTER 4 ICTICT302 - Install and optimise operating system software 96 CHAPTER 5 ICTSAS305 - Provide ICT advice to clients 120 CHAPTER 6 ICTSAS306 - Maintain equipment and software 133



3

ICTWEB302 Build simple websites using commercial packages

PERFORMANCE EVIDENCE Evidence of the ability to:

• select, and use, a web authoring tool to create web pages in accordance with client requirements • insert the text and image elements into a web page • modify the existing mark-up • test web page content for consistency • upload the files to the server.

Note: If a specific volume or frequency is not stated, then evidence must be provided at least once.

ELEMENTS AND PERFORMANCE CRITERIA

Identify authoring requirements 1.1 Select preferred web authoring tool according to client requirements 1.2 Set preferences for the web authoring tool, including site file transfer protocol client Create and save files 2.1 Create files and save in correct location or directory 2.2 Navigate the web authoring tool environment or workspace 2.3 Access and use a range of features in the web authoring tool 2.4 Maintain suitable directory structure for the site 2.5 Save in appropriate directory structure 2.6 Upload files to appropriate folder on the server Add content to web pages 3.1 Insert and format text content according to client requirements 3.2 Insert images, data tables and simple forms 3.3 Access mark-up language and make basic modifications to code Create simple navigation 4.1 Create a site map to plan navigation 4.2 Create links between pages to reflect content structure using both text and images Test website 5.1 Test elements of website content across a number of different browsers and browser versions to ensure consistency of presentation and performance 5.2 Test that website meets client requirements



4

KNOWLEDGE EVIDENCE To complete the unit requirements safely and effectively, the individual must:

• explain the Australian Computer Society Code of Ethics • list the workplace health and safety (WHS) requirements relevant to the information and

communications technology (ICT) industry • identify the web authoring tools used for web page design • provide an overview of website publishing and mark-up languages • explain sustainability concepts, including energy and resource conservation • describe the function of a file transfer protocol (FTP) • list common browsers used for accessing the web.



5

ICTWEB301 Create a simple mark-up language document


• review document requirements, and select the appropriate language • create and save a mark-up language document • validate the document • use a mark-up language, without the automated generation of code.



• identify and describe, mark-up languages and their associated standards • list the features and limitations of a range of available browsers • explain web accessibility.


Review the requirements 1.1 Review the requirements of the document 1.2 Select the appropriate mark-up language, based on organisational standards 1.3 Review the document structure Create the document structure 2.1 Create and assign, the basic elements of the document 2.2 Mark-up sections of the document to depict the structure Validate the documents 3.1 Validate the mark-up of the language document, against the requirements 3.2 Validate the mark-up of the language document, in different browsers



6

BSBEBU401 Review and maintain a website

\


• analyse data to make recommendations about changes to website • update web pages according to organisational requirements • analyse data, identify and resolve faults, errors and/or complaints on website.



• identify and review knowledge of key provisions of relevant legislation, regulations, and standards and codes of practice that may affect aspects of business operations

• explain basic principles of website design and maintenance • outline online security issues.


Review website content and use 1.1 Monitor and analyse customer and user feedback in accordance with organisational timelines 1.2 Analyse automatically collected website data and identify trends 1.3 Make recommendations on changes to website and its content in response to feedback and data

analysis, and approve changes scheduled for implementation 1.4 Review cost implications of the recommended changes to determine their viability Update website 2.1 Replace superseded and inaccurate information with current information and add additional

material in accordance with organisational requirements 2.2 Follow protocols for ensuring the accuracy and authenticity of information 2.3 Remove services no longer available or required and add new ones in accordance with

organisational requirements 2.4 Check offline information against that posted on the website and rectify any discrepancies in

accordance with organisational timelines 2.5 Follow security procedures for updating the website Carry out non-technical site maintenance 3.1 Analyse user feedback to confirm website faults are not user issues 3.2 Rectify faults and make improvements to website in response to user feedback approved by the

organisation 3.3 Add new web pages and/or active links and remove redundant pages and links in accordance with

organisational requirements 3.4 Make website changes in response to changes in marketing strategy, in accordance with

organisational requirements and consideration of cost benefits



7

CHAPTER 1

Build simple websites using commercial programs + Create a simple mark-up

language document + Review and maintain a website

INTRODUCTION In this unit, you will be learning how to use a simple mark-up language to create a document. Mark-up languages are used to create text-based documents, and specify how applications should present the text (and other elements) contained in a document. Mark-up languages use decelerations to describe the structure of a document. Mark-up languages differ from programming languages in that they do not perform any processing on data – they are used only to specify how a document is structured.

Figure 1 - A mark-up document

There are many different mark-up languages, such as SGML (Standard Generalised Mark-up Language) and XML (eXtensible Mark-up Language). One of the most commonly used mark-up languages is HTML (HyperText Mark-up Langauge), used to specify the structure of web pages. In this unit, you will be using HTML to create simple web page documents, along with the style-sheet language CSS (Cascading style sheets) to specify how text and other elements on a web page are displayed.

IDENTIFY AUTHORING REQUIREMENTS Before starting construction of a web page, it is important to review what the web page will contain, and how it will be laid out. A basic web page requires the following:

• Page Title – Located in the title bar of the web browser. Can include: o Name of the website o Website creator/owner o Website icon

• Headings – Located throughout the document to provide information about the content and sections

on the page. Headings Range from size 1 (largest) to size 6 (smallest) and are used by search engines to identify the contents of a web page.

• Paragraphs – contain all the normal text content on the web page



8

• Lists – can be ordered (numbered or lettered) or unordered (dot points) to provide information

concisely. The formatting of headings, paragraphs and lists (size, colour, font type) is defined using CSS, which is discussed later in this unit. Software requirements Two pieces of software are required in order to create the mark-up required for a basic website:

1. Web Authoring tool 2. Web Browser

The web authoring tool is the software used to create the web page documents that will make up the website. All web authoring tools allow you to edit HTML, while some also offer WYSIWUG (What You See Is What You Get) functionality. There are many different types of web authoring tools, varying in functionality and price. Common tools include:

• Adobe Dreamweaver • Microsoft Expression Web (no longer supported as of Dec 2012) • TextWrangler (Mac OS X) • Notepad++ • Notepad (built into Windows)

In this unit, you will be using the free application Notepad++ to write the mark-up for each web page. You can download it from – www.notepad-plus-plus.org Notepad++ must be set to the desired language so that it can highlight each part of the mark-up appropriately. To do this, click on Language > H > HTML, if working on a HTML document, or Language > C > CSS, if working on a CSS file. Notepad++ will generally select the correct language if you save the file with the correct file type (.HTML or .CSS) before you begin editing. The web browser is the application used to view the completed web page. Any popular web browser can be used, including:

• Microsoft Edge • Mozilla Firefox • Google Chrome • Apple Safari

For this unit, any web browser can be used during development; however, you will eventually be testing your web page in multiple web browsers for validation. File transfer protocol client and web hosting service Uploading completed web pages to the Internet can be relatively difficult. The following two items are required: 1. an account with a Web Hosting service 2. a File Transfer Protocol (FTP) client application A web hosting service provides space for web pages to be published to the Internet. Some ISPs provide a limited amount of free web hosting (10 - 50MB worth of files and web pages) to their customers. Many online companies also provide web hosting services for free, with a variety of conditions (such as advertising) and restrictions (amount of traffic per month). This chapter explains how to create an account with the web host www.000web host.com. This service provides free web hosting and allows for FTP uploads of web page documents and images.



9

A File Transfer Protocol (FTP) client application is used to upload web pages and files to the web hosting service. The web hosting service provides a number of server addresses and log-in details that must be entered in the FTP client, which then connects to the web host and allows you to transfer files. A common FTP client application is the free and open-source FileZilla, available from https://filezilla-project.org/

SELECT APPROPRIATE MARK-UP Mark-up languages There are many different types of mark-up languages used for a variety of purposes. Common types include:

• Standard generalised mark-up language (SGML) • eXtensible mark-up language (XML) • Hypertext mark-up language (HTML) • eXtensible hypertext mark-up language (XHTML) • Virtual reality modelling language (VRML)

Most mark-up languages are based on SGML, which itself was derived from Generalised Mark-up Language (GML), first developed by IBM In the 1960’s. Web page mark-up is written using the Hypertext Mark-up Language (HTML). HTML 5 is the current version. All web page documents created in this unit will be written according to the HTML5 specification. Style sheet languages Style sheet languages are used to define the formatting of documents written using a mark-up language. For web pages written in HTML, the Cascading Style Sheet (CSS) language provides many page formatting options including font, colour, and size of text. The current version is CSS2.1, with version 3 in development. Style sheets created in this unit will be written according to the CSS 3 specification. Both the HTML and CSS specifications are maintained by the World Wide Web Consortium (W3C), who offer developers a tool to validate their mark-up to ensure it meets the current specifications. How does HTML work? The HTML syntax (the way language is structured) is written using elements. HTML elements contain three parts:

• Open tag • Content • Close tag

CHAPTER 1 - REVIEW QUESTIONS (SET 1)

1. Define the term ‘mark-up language’

2. What content is included in the page title?

3. What are two reasons why headings should be placed on a web page?

4. Explain the difference between an ordered and unordered list.

5. What is the purpose of a web authoring tool? Provide an example.

6. Why is a web browser required for web page development?

7. What is the purpose of a web hosting service?

8. What does a FTP client do?



10

Tags are letters or words surrounded by angle brackets. Tags do not appear on the web page when opened in the web browser. An example of an HTML element is shown below:

<p>This is a paragraph element</p> In the example, <p> is the open tag. This specifies the beginning of the element. p stands for ‘paragraph’ in HTML mark-up. The content is the text written between the open and close tags. This is the text that will actually appear on the web page. </p> is the close tag. This specifies the end of the element, indicating the end of a paragraph of text. It is always the same as the open tag, with the added forward slash. There are a number of syntax rules to create valid HTML 5 mark-up:

• All elements with content MUST include an open and close tag. • Tags MUST be written in lower-case • HTML documents MUST include the DOCTYPE declaration and the initial structure elements (explained

later) Below is a side-by-side example of HTML mark-up and its web page output. The image on the left is a HTML document, open in the application Notepad++. The image on the right is the same document open in Mozilla Firefox. Notice that none of the HTML mark-up tags appear on the web page when it is open in a web browser.

DOCTYPE declaration and Initial Structure elements The DOCTYPE declaration of the mark-up defines the type of mark-up used in the document – in this case, HTML. The DOCTYPE declaration MUST be included as the first line of mark-up in a web page for it to meet the HTML 5 specification. The declaration is shown below: <!DOCTYPE HTML>

The initial structure elements of a HTML document are shown below: <!DOCTYPE HTML> <HTML> <head> <meta charset="UTF-8" /> <title></title> </head> <body> </body> </HTML>

In the example above, there are 5 elements – <HTML>, <head>, <meta>, <title> and <body>. The <HTML> element contains all the tags and content that make up the web page.



11

The <head> element contains information about the page. None of the content within the <head> element will appear on the web page. The <meta> element contains information about the type of characters used for the mark-up. The <title> element is contained within the <head> element. The content of the <title> element is used as the text for the page title that appears at the top of the web browser window. The <body> element contains all the tags and content that will appear on the web page. This is the largest element of the web page mark-up. Note that all the elements contain both an open tag and a close tag, except for the <meta> tag. This is required for valid HTML 5 mark-up. Also note that spaces in-between tags and elements are not considered when the web browser opens the web page – for example, the space in-between the two body tags could be 10 lines long and it would have no effect on the final output of the web page.

HELLO WORLD WEB PAGE Software required:

• Web authoring tool • Web browser

Instructions:

1. Open the application Notepad++

2. Save a new document as Act 1.1 Hello World.HTML, making sure to select Hypertext Mark-up Language (.HTML) in the Save As Type dropdown box.

3. Write the following mark-up into the document: <!DOCTYPE HTML> <HTML> <head> <meta charset="UTF-8" /> <title> </title> </head> <body> <h1> </h1> <p> </p> </body> </HTML>

4. In the <title> element, enter the content ‘Your Name’s – First Web page’, without the quotes.

5. Save the web page and open the file in the web browser. It should appear blank, except for the

title you have entered in the title bar of the web browser.



12

6. In the <h1> element, enter the content ‘Hello World’, without the quotes.

7. In the <p> element, enter the content ‘This is my first ever web page!’ without the quotes.

8. The final page should appear the same as the one shown below:

9. Show the completed web page to your trainer.

Headings In Activity 1.1, two other tags were used – <h1> and <p>. <h1> stands for Heading 1 and is used to indicate which text should be declared as a heading on the web page. Headings can be sized from <h1> to <h6>, offering five levels of sub headings to a document. Always follow the correct order when using headings – do not jump from heading 1 to heading 4. Paragraphs <p> tags are used to specify paragraphs of normal text. All text on a web page should be contained within a <p> element. Lists Lists can be created on a web page to display information concisely. Lists come in two forms; ordered – using numbers, letters or roman numerals to represent the steps in a process, and unordered – using dot points to display a list without a specific order. An example is shown below:

Ordered 1. First 2. Second 3. Third 4. Forth

Unordered • Sun • Sky • Earth • Water

CHAPTER 1 - REVIEW QUESTIONS (SET 2)

1. What version of the HTML and CSS specifications will you use to create web pages and

style sheets this unit?

2. Who maintains the HTML and CSS specifications?

3. Describe the three parts of the HTML syntax.

4. True or False? - All tags MUST be written using upper-case

5. What is the purpose of the DOCTYPE declaration?

6. List the five elements required to set up a web page.

7. True or False? All the content in the <head> element will not appear on the web page.



13

An ordered list is created using the <ol> element. Each item of the list uses the <li> element. An example of mark-up is on the left, while the displayed web page is on the right.

Unordered lists use the <ul> element. The <li> element is again used to represent each item in the list.

FIND ERRORS IN HTML SYNTAX Software required:

• Web authoring tool (Notepad ++, Notepad) • Web browser

Instructions:

Review the HTML below and circle all the errors you can find, or note things that are missing. There may be syntax errors or even simple typos in the mark-up. Remember the following rules

o All tags must be written in lower case o All elements MUST be opened and closed o The initial structure elements must be in place and spaces between tags can be ignored



14

3. There are 14 errors in this mark-up. Can you find them all? <HTML> <head)<title>My Website<title> </head> <body> <h1>Welcome to My website<h1> </p>By Matt Smith<p> <h2>Introduction</h2> <ol> <li>Name: Matt</li> <li>Age: 15<li> <li>DOB:13/6/1998</li> <h2>About me</h2> <p>My name is Matt and I am a student at Red Heart College. I am studying how to write web pages.</p> <p>I hope to be a great HTML developer one day and am learning HTML in class right now<p/> Some of the things I have learnt include: <ul> <li>Headings</li> <LI>tags</li> <li>paragraphs <li>lists</li> </ul> <p>There are many other aspects of HTML I am yet to learn, but will very soon. </bdoy> <HTML>

ABOUT ME WEB PAGE Software required:

• Web authoring tool (Notepad ++, Notepad) • Web browser

Instructions:

In this activity, you will be creating a simple web page containing facts and information about yourself.

Start a new document in Notepad ++ and save it as Act 1.3 – About me.HTML

Enter the DOCTYPE declaration and initial starting elements into the web page (shown below): <!DOCTYPE HTML> <HTML> <head> <meta charset=“UTF-8” /> <title> </title> </head> <body> </body> </HTML>



15

Enter the page title – About Me

Enter the following Heading – About Me

Enter the following Sub heading – Facts

Create an unordered list with these bits of information

o Full name:

o Age:

o DOB:

o Country of birth:

o Hair colour:

o Eye colour:

Enter another sub heading – Profile

Write three short sentences about yourself (each starting on a new line)

Your final page should look like the one below:

Show the completed web page to your trainer.



16

Formatting web pages using CSS CSS is used to format the appearance of text and other objects on a web page. CSS is written in a separate file to the HTML document. Both files are then linked together via mark-up in the HTML document. This allows CSS rules to be applied to multiple web pages within a website to keep all web page formatting consistent. Saving CSS files CSS documents can be created using Notepad++, in the same manner HTML files are created. When saving a CSS document, make sure to select Cascade Style Sheets file (.CSS) from the Save As dropdown box. How does CSS work? The CSS syntax is quite different to HTML. CSS is described using three parts, a selector, a property and a value. p {color:red} (for the purpose of CSS, the word is spelt ‘color’.) In the example above, ‘p’ is the selector. The selector refers to the HTML element the CSS will have an effect on. In this case, the CSS has been written to affect all the paragraph elements in a HTML document. ‘color’ is the property the CSS is manipulating. In this example, changing the ‘color’ property of the ‘p’ selector will change the colour of the text for all paragraph elements on the web page. ‘red’ is the value the property should take. In this case, the colour of all paragraphs will be changed to red. There are many different properties that can be manipulated, however they do not relate to all selectors. Values can also be specified in a number of ways. Linking CSS files to the HTML document For a CSS document to have any effect on a HTML document, the two files must be linked together, using mark-up in the HTML document. The procedure for linking the two documents is:

Ensure that both the .HTML and .CSS files are located in the same folder. In the <head> element of the HTML document, add the following mark-up, replacing XXX with the name of the CSS file.

<link rel="stylesheet" type="text/CSS" href="XXX.CSS">

The HTML mark-up should look like the code shown below: <!DOCTYPE HTML> <HTML> <head> <meta charset="UTF-8" /> <link rel="stylesheet" type="text/CSS" href="web pageformatting.CSS"> <title> </title> </head> <body> </body> </HTML>

The HTML and CSS documents are now linked. The same <link> tag can be applied to any number of HTML files, making the formatting of each web page consistent.



17

FORMATTING THE ABOUT US WEB PAGE USING CSS

Software required: • Web authoring tool (Notepad ++, Notepad) • Web browser

Instructions:

In this activity, you will be creating a CSS file to format the web page created in Activity 1.3 – About Me web page.

Open Notepad++ and save a CSS document, naming it act1.4_web page_formatting.CSS.

Ensure that the file is saved in the same folder as the HTML file created for Activity 1.3.

In the CSS file, enter the following formatting information:

p {color:red}

Open the HTML file created for Activity 1.3 and add the <link> tag below to the <head> element, to link the HTML and CSS documents together:

<link rel="stylesheet" type="text/CSS" href="act1.4_web page_formatting.CSS">

Open the HTML document in a web browser. The paragraph text should now be formatted with the colour red:



18

Add the following to the CSS document:

h1 {color:blue} h2{font-family:Arial} ul {list-style:circle}

Refresh the HTML page in the browser, and it will appear as shown below:

Show the completed web page to your teacher.

CSS properties and values There are over 150 different properties that can be used in CSS. Each property has a wide range of values that can be applied. For example, the color property can be applied to many different selectors to change its color. Values on the colour property can take three forms:

Names of common colours - ‘red’, ‘blue’ ‘green’

RGB (Red, Green, Blue) colour values, ranging from 0 (none of a colour) to 255 (max of a colour) – (0,0,255)

Hexadecimal colour codes - #00FFFF – codes used in web pages to represent colour. A reference list can be found at - http://HTML-color-codes.com/

A reference list of all the possible CSS properties and their values can be found at - www.w3schools.com/CSSref/default.asp This site also contains a ‘Try-it-yourself’ section, that lets budding web designers test out each of the properties to see their effects on a self-contained page.



19

GLOSSARY – COMMON CSS PROPERTIES Software required:

• Web browser Instructions:

Below is a list of commonly used CSS properties. In this activity, you will create a reference glossary, outlining the effect each property will have on a selector, and provide an example of possible values that can be used.

Enter the required information into the table. One property has been completed as an example.

Use this website - www.w3schools.com/CSSref/default.asp, or choose another CSS reference to complete this activity.

CSS Property Effect property has on selector/tag Possible values

background-color

background-image

border

border-style

color

Changes the colour of the contents of the tag (usually text based content)

Names of colours – ‘red’ RGB values – (100,200,255) Hexadecimal colour codes #12781B

font-family

font-size

height

margin



20

padding

text-align

width

Identify a specific element in HTML and CSS using CLASS Specific elements in HTML and CSS can be identified using the CLASS attribute. A web page may have a number of paragraphs. Each paragraph can be identified with a class attribute, so that each can be formatted differently. An example is shown below: <p class=“blue”>This paragraph will be blue</p>

The above paragraph now has the class of ‘blue’, and can be specifically referenced in a CSS file. To reference a class in CSS, the following syntax is used: p.blue {color:blue}

This CSS will change the colour of text for any paragraph with the class name ‘blue’ to the colour blue. Any word or phrase can be used as a class name value, however you should not start a class name with a number. Formatting of CLASS identified elements overrides normal formatting. Another example is shown below: HTML <p>This paragraph will be red</p> <p class=“blue”>This paragraph will be blue</p> <p class=“arial”>This paragraph will be red and use the font Arial</p> <p class=“yellowarial”>This paragraph will be yellow and Arial/<p> CSS p {color:red} p.blue {color:blue} p.arial {font-family:Arial} p.yellowarial {font-family:Arial; color:blue}

In this example, all text in paragraphs will be coloured red, unless the paragraph is identified with a class. This combination of HTML and CSS makes the following web page:



21

FORMATTING USING CLASS Software required:

• Text editor • Web browser

Instructions:

1. Open Notepad++ and save a new HTML document as act1.6_class.HTML, and a new CSS document as act1.6_class.CSS.

2. Enter the initial starting mark-up into the HTML document.

3. Enter the following paragraphs into the HTML document:

<!DOCTYPE HTML> <HTML> <head> <meta charset=“UTF-8 /> <title>Act 1.6 – Formatting using Class</title> </head> <body> <h1>Formatting using class</h1> <p>color</p> <p>margin</p> <p>background colour</p> <p>font family</p> <p>text-align</p> <p>border</p> </body> </HTML>

4. Link a CSS file to this document.

5. Give each of the paragraphs a class, so that they can be formatted individually.

6. Format each paragraph using the CSS property mentioned in the paragraph.

7. Change the content of each paragraph to provide information about the CSS value set.

8. An example of a finished page is shown below:

vce / vet information and communication...

Documents