Group Assignment (50%) - Due Date: 03 August 2009

Title: Developing a Website

Question:

Practical side (group):
Form a group of 10 and create a website with a link to each member’s sub-Website of 3 pages. Each member will have their pages in individual folders under the same website address. Manage your files and folders properly.

• The group Web page should have a link to CSS file, whereas the members’ sub-Website can have either linked or embedded CSS.
• Group Web page should have a theme: Choose one of the chapters/topics from the lecture note, and every sub-Website should cover a page on this.
• Members’ sub-Website should have a home page (index) with introduction to the individual, a ‘technology’ page with embedded video of an Internet technology and links to other technology sites or bookmarks, and a page on Internet technologies (a topic covered in lecture).
• Remember to link the sub-Website pages to each other and to the main group Web page.
  

Upload to a registered free web server (recommended: freewebs.com). Email the website address to the lecturer (shahrinaz@ucsi.edu.my) for submission.
Deadline of Website URL submission: 20 Jul 2009
(The Website will only be assessed after the submission of the report.)
[Assessment: Group product (10%), Individual product (20%)]

Report side (individual):
Write a report on the website development inclusive of navigation flow, using proper diagrams. Introduce your group Web page. Detailed elaboration should be on individual’s web pages only.
Deadline of report submission: 03 Aug 2009
[Assessment: Individual report (20%)]

Report format:

• Introduction – a paragraph of the group website with navigation flow diagram
• Details on the individual web pages and how you develop them
• What technologies were used? Why certain methods and designs were chosen? Difficulties in developing the web pages?
• Include screenshots of web pages for better elaboration
• Conclusion – Lesson learnt?

Assignment format:

• Submission of hardcopy report ONLY
• Page Setup A4 with the margins 1” on every side (top, bottom, left and right)
• Font Times New Roman, 12
• 1.5 line spacing
• Page number to be in the footer, right-aligned
• First page: cover page – remember to include your Student ID, Name, Title
• Last page: reference page – list all your references including websites URL, minimum 3
• Your essay should be minimum 3 pages, and up to approximately 5 pages long.

You have to relate your report (especially the conclusion) to the development you have done. Do not go off the track. GOOD LUCK!
- MsSha

Tutorial 04 - Browsers Basic

Just as how we practiced in the first online tutorial, post your answer using the “Comment” feature in this blog site. You need to explore the available web browsers to better answer the question.

Question:
Choose ONE of these elements of web browsers (Internet Explorer, Mozilla Firefox, etc.):

• Menu bar
• Tool bar
• Status bar
• Explorer bar or side bar
• Page tab

Name ONE button/menu/function you find in the element you selected above, and explain what it is for.

Below are 2 of my examples you can refer to as guidelines for your answer.

Example 1:
Element: Menu bar in Internet Explorer
Menu: "Find on this Page" under Edit menu
Function: To find or search for a text in the web page currently displayed on the web browser. Shortcut is Ctrl+F (same with Mozilla Firefox).

Example 2:
Element: Tool bar in Mozilla Firefox
Toolbar: "Reload" button in Navigation toolbarFunction: To reload or refresh the content of the web page currently displayed on the web browser. Any new updates on the content will be displayed after reload. Shortcut is Ctrl+R or F5.

All the best!
- MsSha
28 May 2009

Group Assignment (25%) - Due Date: 05 June 2009

Title: Basic HTML using Notepad, with Blog report

Question:

Practical side (in pairs):
Work in pairs (2 members in a group ONLY) and create a HTML page using Notepad. Content of the page should have at least 2 paragraphs of texts (introduction to each member), an image, and hyperlinks to the individual blog site (report). Creativity on the design will not be assessed, because this is pure technical.

Upload the files (HTML and related image files, etc) to a registered free web server (e.g. geocities.com, bravehost.com, etc.). Make sure you name the web folders and subfolders appropriately as how you would on your working machine, to avoid difficulties in uploading and viewing the related files. [You may need to search and try out the uploading process before deciding on which web hosting server to use.] Email the website address to the lecturer (shahrinaz@ucsi.edu.my) for submission, and also post the link to Facebook Group CC106.
[Assessment: Group product (10%)]

Report side (individual):
Write a report (in a registered blog site) on the overall process and methods that you use, and the difficulties you encounter during this assignment. The report/blog should include:

• The process and methods you go through to get the whole assignment completed.
• The technologies/tools you learn and use during this assignment, and their advantages/disadvantages.
• The experience/difficulty in debugging the HTML codes in getting the output you want.
• The experience/difficulty in searching/choosing the suitable web hosting server.
• The experience/difficulty in uploading the files to the web server.
• The process and experience/difficulty in creating a blog and learning how to use a blog.
• Conclusion should include lesson learnt, and what would you do differently if you are going to work on this assignment again.

It can be multiple blog posts with different headings, but make sure that the blog is specifically for this assignment (do not mix with your personal blogs, if you have any). You can name the blog as however you wish, but make the title sound appropriate for academic purpose (no vulgar, no offense on anyone).
[Assessment: Individual report/blog (15%)]

Assignment format:
Totally ONLINE!

• ONE online webpage – your group product
• ONE online blog – your individual experiences

You have to relate your report (especially the conclusion) to the development you have done. Do not go off the track. GOOD LUCK!

- MsSha

Tutorial 02 - Basic HTML using Notepad

In Week 02, we learnt a few HTML tags and how to use them. Here are the tags covered in the lab class.
Note: Due to the limitations of this blog content editor, I have to omit out the arrow brackets (<>) that make up the html tags syntax.

html
The basic tag indicating that the file is in HTML language, viewable in web browser.

head
The header tag, where the content under this tag will be displayed on the web browser headed.

body
The body tag, where the content under this tag will be displayed in the web page.

title
The title tag, for the title of web page located under the header tag.

p
P for paragraph – indicate a paragraph of content.

br
BR for break, or line break – instead of having paragraph, this tag can be used when the text is required to be in the next line.

b
B for bold – to bold certain texts.

i
I for italic – to make certain texts italic.

u
U for underline – to make certain texts appear in underlined.

img
IMG for image – an independent tag for image and its attributes, such as source (src), alignment (align) and border (border).

a
Hyperlink tag – to indicate the object it embeds between the open and close tags of < > and enables users to clink and jump to another webpage.

Question:
Choose ONE of the following HTML tags, and briefly explain their meaning and usage, mentioning if the tags are independent tags (meaning that it does not come in a pair of open and close tags), and examples of attributes the tags may have.

Post your answer using the “Comment” feature in this blog site. You may need to do some research online to answer this. Refer to the samples above on how to answer.

1. font
2. hr
3. table
4. tr
5. td
6. ul
7. ol
8. li
9. form
10. input
11. embed
12. frame
13. layer
14. span
15. div

Effort counts!
- MsSha
21 May 2009

Tutorial 01 - Internet and the WWW

Choose ONE of the following questions, and post your answer using the “Comment” feature in this blog site. (Click on the hyperlink "Comments" below this post. Remember to indicate your name and Student ID alongwith your answer.)

The questions are based on the lecture note available at http://cc106-may2009.bravehost.com/week01.html. All the best!

1. What is the Internet, and how the World Wide Web relates to the Internet?
2. What are the FOUR categories of Internet uses? Name some of the examples from these categories.
3. Explain what are server and client, and what it means by client/server local area network.
4. Describe the THREE main types of cable used to connect computers to a network.
5. Differentiate between circuit switching and packet switching.
6. What are the FOUR key points of open architecture philosophy?
7. Explain what is TCP/IP.
8. Differentiate between Intranet and Extranet.
9. What is IETF?
10. What is the formal definition of Internet that was adopted in 1995 by the Federal Networking Council (FNC)?
11. Differentiate between IPv4 and IPv6.
12. What are the TWO important innovations that played key roles in the World Wide Web?
13. What is HTML?
14. What is bandwith, and how is it measured?
15. Explain what modem is.

Effort counts!
- MsSha
14 May 2009