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