ISY10209 - Web Development I - Session 1 (2019)

Topic 1 Continuous Assessment

During this session your major assignment (see Assignment 3 specifications) will be to build a personal portfolio website to demonstrate your life/business/IT skills. Each of topics of the study guide will bring you closer to being able to produce this website.  This topics continuous assessment forms part of your assignment 1, due in week 4. 

Create a new folder for your assignment 1 continuous assessments and name it with your name and ISY10209_Ass1, e.g. bsmart_ISY10209_Ass1. This will be your work folder for assignment 1.

Create another folder named ‘documents’ inside your work folder. This will be your documents folder for Assignment 1.

You will be required to submit your work folder to your tutor as part of your assignment 1. See the assignment folder on MySCU for additional information.
 
For this first continuous assessment:

1. The first file you will create is a Word document (.doc or .docx) containing a concept map for your electronic portfolio (see Assignment 3 for details). You may use any software you like for the concept map or even use pencil and paper (scanning the result and inserting it in the document). The concept map should show all the possible things you want on your web site. Save this file in your documents folder as: - your name and CA1_ConceptMap  e.g. bsmart_CA1_ConceptMap.doc(x).

2. The second file you will create is a storyboard for your Assignment 3 (look it up In the Assignments folder of the MySCU website) homepage (templates for the storyboards are also located in the Assignments Resources sub-folder of the Assignments folder of the units MySCU website). This will also be submitted as a Word document. Whereas you do not have the experience with designing much HTML yet, you will have some ideas as to how you wish the home page of your electronic portfolio to look. This file should be saved as: - your name and CA1_storyboard e.g. ‘bsmart_CA1_storyboard.doc(x)’ in your documents folder. The storyboard should include:

  • a sketch (or diagram) of the home page;
  • a list of pages that it will link to;
  • a description of the content on the home page (including text, graphics and any other content); and
  • page details, author, date, title, version etc.

3. Additionally, you will create an HTML page with the following content:

  • The document type definition 
  • A title e.g. ‘Bill Smart CA1’ – follow this convention for the titles of CAs 1-7.
  • At least 3 paragraphs introducing yourself, the course you are studying, what you hope to achieve during and after your studies. Be sure to include your full name as part of the text, or in one of the headers if so desired.
  • Multiple headings (<h1>...</h1>, <h2>...</h2> etc.
  • All three types of lists examined in this topic (demonstrating your knowledge) with at least 1 list contained within another list (nested lists), for example an ordered list within an unordered list.
  • A hyperlink to an external site (opening in a new tab/window so users are still on your site - see the creating a HTML5 webpage video),
  • An email link.

Your page must validate with no errors.

The file name of your webpage should be your first initial, surname, and CA1 (e.g. bsmart_CA1.html) and saved inside your work folder. 

Additional video resources are available to assist you. See the How-to Video's folder in the MySCU site for this unit. Of particular use to you in this topic are:

  • How-to build a simple XHTML page 
  • How-to Build a simple HTML5 webpage.
  • How-to validate a XHTML page.
  • How-to validate a HTML5 webpage

On the textbooks companion website located at: 

http://www.pearsonglobaleditions.com/Felke-Morris

Are several VideoNotes that will be of assistance to you they are:

  • Evolution of the Web
  • Your First Web Page (using HTML5)
  • HTML validation (using HTML5)

 

Topic 2 Continuous Assessment

During this session your major assignment (see Assignment 3 specifications) will be to build a personal portfolio website to demonstrate your life/business/IT skills. Each of topics of the study guide will bring you closer to being able to produce this website.  This topics continuous assessment forms part of your assignment 1, due in week 4. 

Save all the files for this exercise to the related folders, you created in CA1. You will be required to submit this to your tutor as part of your assignment 1. See the assignment folder on MySCU for additional information.

1. Copy the HTML page in your work folder that you have previously created in CA1. Save this file as: - your name and CA2 (e.g. bsmart_CA2.html). This will be your new home page for this continuous assessment.

2. Create a new folder in your work folder and name it css. Place all your external CSS files in this folder. Name your external CSS file for this continuous assessment ‘styles_CA2.css’. You will need to link to this file (within your HTML) using a relative addressing e.g. css/styles_CA2.css.

Demonstrate the use of all types of CSS on your HTML page that is: inline, embedded and external. Use the CSS to create the following (all must be included):

  • At least two different text colours;
  • At least two different background colours (one applied to the entire webpage);
  • At least two different font-weight, -style and -size;
  • At least one font-family with four typefaces
  • Three differently aligned paragraphs
  • At least two different text-decorations
  • At least one class selector and one id selector
  • Change the bullet type on your unordered list to squares
  • Change the numbers on your ordered list to roman numerials
  • Use at least one div and one span. 

3. Make sure to validate your HML and the external CSS file
 
Note:  Do not use a black background for your HTML page. Black backgrounds are difficult to read which in turn makes it difficult to mark (or print as you will find). Any pages with a black background or any background that makes the text difficult to read will receive a poor mark.

Additional video resources are available to assist you. See the How-to Video folder in the MySCU site for this unit. Of particular use to you for this topic are:

  • How-to implement CSS Part 1
  • How-to implement CSS Part 2

On the textbooks companion website located at: 

http://www.pearsonglobaleditions.com/Felke-Morris

Are two VideoNotes that will be of assistance to you they are:

  • CSS External Style Sheets
  • CSS Validation

 

Topic 3 Continuous Assessment 

During this session your major assignment (see Assignment 3 for details) will be to build a personal portfolio website to demonstrate your life/business/IT skills. Each of topics of the study guide will bring you closer to being able to produce this website.  This topics continuous assessment forms part of your assignment 1, due in week 4.

Save all the files for this exercise to folder you created in CA1. You will be required to submit this to your tutor as part of your assignment 1. See the assignment folder on MySCU for additional information.

1. Copy the HTML page in your work folder that you have previously created in CA2. Save this file as: index.html. This will be your new home page for this continuous assessment. This name has been used as when it is uploaded to the infotech server it automatically open when the site is opened in a browser (due to the design of the server) so instead of entering the entire address (including page name) only the site address need be entered to the browser

Copy the CSS file in your css folder that you have previously created in CA2. Save it as : - styles_CA3.css. You will need to link to this file using a relative address e.g. css/styles_CA3.css.

Create another folder inside your work folder and name it ‘images’. Place all your image files in this folder (including your background images). You will need to link to these files using
relative addresses e.g. images/example.jpg from a web page or in the case of background image referenced in your css file ../images/example.jpg.

2. Find several images (.jpg, .gif or .png - either your own or copyright free from the Web) to use in enhancing your web page from CA2 (note at least three images MUST be used). Display the images on your HTML page and make sure to include the src, alt, height, and width attributes. At least one image should be a thumbnail link to the full size image. You may reuse these files in subsequent CAs if you wish by using relative addresses (Note: your images should be in a folder of their own labelled images - use relative addressing in your web pages).

3. Use background-image on your HTML page using CSS. Make sure that the text on your page does not merge with (or become lost in) the background.

4. Add a hyperlink to the bottom of your index.html page, this link should use the absolute address of  your website as both the text and target e.g. http://infotech.scu.edu.au/~bsmart10 This will assist with marking the on-line portion of your assignment.

5. Create a navigation bar similar to the textbooks Figure 4.20 (or if so desired you can use images for the hyperlinks). Create two additional HTML pages that you will include in your assignment 3 to link to/from your page to e.g. ‘bsmart_CA3_resume.html’ and ‘bsmart_CA3_web_skills.html’. 

The content for these pages may be developed later however they should at minimum, use the same external CSS file and have an identical navigation bar (allowing navigation between each page in this continuous assessment). Additionally all pages must implement the same background. They also at minimum should display the same background image you may reuse these files in subsequent CAs if you wish. Placeholder links (in the navigation bar) to any pages you have not yet created should use a null link e.g.  href=”#”. This is actually a link, which directs the browser to the top of the current page. 

6. Validate all of your HTML and CSS. 

7. Upload your index, resume and web_skills HTML pages to the infotech server. You will also have to upload the folders css and images (they should only contain the appropriate files). Does it work as expected? Make sure to view the result in several browsers (Fire Fox, Internet Explorer, Safari, Opera or Chrome). 

This Continuous Assessment completes your assignment 1. Be sure to read the instructions for handing in your assignment 1 they are located in the Assignment folder of MySCU site for this unit. Following is a screenshot of how the contents of your work folder might look upon completion of Assignment 1. 

You will need to submit the entire folder (as a zip file) to MySCU as part of your assignment 1. Be sure to read the instructions for handing in your assignment 1 they are located in the Assignments folder of MySCU site for this unit.

Additional video resources are available to assist you in completing this continuous assessment.. See the How-to Videos folder in the MySCU site for this unit. Of particular use to you for this topic are:

  • How to Deal with Images
  • How-to implement CSS Part 3
  • How to debug and good coding style  Of particular use to you for handing in your assignment 1 is:
  • How to Zip Files
  • How to FTP to Infotech

On the textbooks companion website located at: 

http://www.pearsonglobaleditions.com/Felke-Morris

Are two VideoNotes that may be of assistance to you they are:

  • Optimize an Image for the Web
  • Rounded Corners with CSS
Order Now