Assignment 1 Report

TABLE OF CONTENTS

1.Introduction
2.Objectives
3.Method and Results
4.Discussion
5.Conclusion
6.Reference

1. INTRODUCTION

HTML stands for Hypertext Mark-up Language it is the predominant markup language for web pages. It provides a means to describe the structure of text-based information in a document by denoting certain text as links, headings, paragraphs, lists, etc. It supplements that text with interactive forms, embedded images, and other objects.

HTML is written in the form of "tags" that are surrounded by angle brackets. HTML can also describe, to some degree, the appearance and semantics of a document, and can include embedded scripting language code such as JavaScript that can affect the behavior of Web browsers and other HTML processors.

BACKGROUND

In 1980, physicist Tim Berners Lee, who was an independent contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners Lee and CERN data systems engineer Robert Cailliau each submitted separate proposals for an Internet-based hypertext system providing similar functionality. The following year, they collaborated on a joint proposal, the Worldwide Web (W3) project [1] which was accepted by CERN. In his personal notes [2] from 1990 he lists [3], "some of the many areas in which hypertext is used", and puts an encyclopedia first.

The first publicly available description of HTML was a document called HTML Tags, first mentioned on the Internet by Berners-Lee in late 1991[4] [5] It describes 22 elements comprising the initial, relatively simple design of HTML. Thirteen of these elements still exist in HTML 4.[6] HTML is a text and image formatting language used by web browsers to dynamically format web pages. The semantics of many of its tags can be traced to early text formatting languages such as that used by the RUNOFF command developed in the early 1960s for the CTSS (Compatible Time-Sharing System) operating system, and its formatting commands were derived from the commands used by typesetters to manually format documents.

2. OBJECTIVES

This report is going to engage on the below summarized points:

1) The process and methods taken to get the whole project completed
2) The technologies and tools learned and used during this project, and their advantages or disadvantages
3) The experience or difficulty in debugging the HTML codes in getting the desired output
4) The experience or difficulty in searching or choosing the suitable web hosting server
5) The experience or difficulty in uploading the files to the web server
6) The process and experience or difficulty in creating a blog and learning how to use it

3. METHOD AND RESULTS

The following sequences were followed in order to achieve the lecturers requirements and our own creative desires of the web page, (lecturers requirements were to create a HTML document using notepad application and that the HTML file should have two personal picture one for each member and that each member should contribute to a paragraph introducing him/her self, including two links to each members blog for the report, and the HTML file should be uploaded to a web host with its necessary files)

a) The process and methods taken to get the whole project completed

1. A plain A4 paper was used to set up a plan of the web page layout, this plan enabled us to visualize and incorporate the lecturers requirements including our creative desire and also to visualize the possible outcome of the assignment

2. Analyzing the plane layout and suggesting the HTML tags required to achieve such outcome and incorporating more features to satisfy our creative desires

3. A desktop PC was used with a Notepad application to incorporate and bring to life the plan by editing the note pad document with HTML tags and required information in order to create the HTML document

4. The Notepad document was save in HTML format producing a HTML document of which was saved in a folder with necessary files like the background picture, one personal photo each and background music

b) The technologies and tools learned and used during this project, and their advantages or disadvantages

The main coding used, is HTML tags. It is one of the most simplest programming being used to create HTML documents on many websites, the basic codes are not case sensitive meaning one can either write in capital letters or small letters but take note to know the syntax and attributes including the nature if it is an independent or dependent tag below are the technologies and tools used in our project. Since Tags won’t be able to be displayed on this page I will substitute <> for []

HTML

This is the main Starting and ending coding written [HTML] and later followed by a closing tag [/HTML]. Put at the beginning and end of your document. Everything in the document goes inside , except that [!DOCTYPE](if you choose to use it) goes just before .
This is the initial block of a HTML document and it can suffice a document by just writing [HTML] Your words as you prefer... [/HTML]

Example

[html] hello world! [/html]

HEAD

Within , the document has two sections to it: and . is like the cover page of the document. Just as the cover page of a book contains information about the book (such as the title), the section contains information about the document. This information is communicated through the [TITLE] tag (which is required) and the [LINK …] and [META …] tags.
Like any other document to be readable and appealing it must have a heading, as in our case HEAD was directly followed by TITLE

Example

[head][title] Al-Kathiri’s & Sheryl’s Page [/title][/head]

TITLE

[TITLE] states the title of the document. [TITLE] always goes in the [HEAD] section. The text inside [TITLE] is not displayed in the document. However, most browsers will display the title at the top of the window. Most people confuse [TITLE] with headers. Although it is common to put the same text in [TITLE] as in [H1 ...], so that the "title" is the first thing on the page, they are two separate tags and two separate contents.
Title is crucial to a web page, it gives the html document a distinctive identification and it will always appear on the top left of the web page

Example

[title] Al-Kathiris' & Sheryls' Page [/title]

BODY

[BODY] is one of the two major sections that goes inside [HTML] (the other is [HEAD]). [BODY] is the section that holds everything that is actually displayed. All the text, headers, tables, etc are in the [BODY] section. Because [BODY] defines the visible section of the document, it has a number of attributes which control the overall document appearance. The [BODY] attributes have become popular as a way of adding a little flair to the page, below are some of the attribute learned through personal research.

- BGCOLOR: background color of the page
- BACKGROUND: background picture for the page
- TEXT: color of the text on the page
- LINK: color of links that haven't been followed yet
- VLINK: color of links that have been followed
- ALINK: color of links while you are clicking on them
- BGPROPERTIES: if the background image should not scroll
- TOPMARGIN: size of top and bottom margins
- LEFTMARGIN: size of left and right margins
- MARGINHEIGHT: size of top and bottom margins
- MARGINWIDTH: size of left and right margins
- onLoad: Script to run once the page is fully loaded
- STYLESRC: MS FrontPage extension
- SCROLL: If the document should have a scroll bar

Example

[body background=”http://sheryl-khalid.webs.com/picture/background.jpg”]

H

[H#] indicates a header, a title of a section of the document. For example, to start the section of your page that discusses about you, the # represents number from the largest header which is number 1 to the smallest which can be any number

Examples

[H1]Welcome[H1]
[H2]Khalid[H2]
[H3]Sheryl[H2]

The above will make Welcome appear larger than Khalid and Sheryl which will be of the same size.

P

Paragraph [P] indicates the start of a new paragraph. This is usually rendered with two carriage returns, producing a single blank line in between the two paragraphs.

BR

Line break [BR] inserts a single carriage return. Whereas [P] indicates the start of a new paragraph, [BR] only implies a carriage return within the same paragraph. [BR] is usually rendered with a single carriage return.

FONT

[FONT] is the addictive drug of HTML. We encountered unnecessary numerous workloads on deciding which font and color font will be the most appealing; you can set the sizes, faces and colors of the fonts on your web page, all with understandable [FONT] tags.

- SIZE: size of the font
- COLOR: color of the text
- FACE: set the typestyle for text

Example

[FONT FACE="Trebuchet Ms"][font size=5 color=red] Welcome [/font]

IMG

Image [IMG] puts an image on the web page. [IMG] requires one or more attributes:

- SRC: where to get the picture
- ALT: text to show if you don't show the picture
- LONGDESC: URL of a long description of the image
- WIDTH: how wide is the picture
- HEIGHT: how tall is the picture
- ALIGN: how text should flow around the picture
- BORDER: border around the picture
- HSPACE: horizontal distance between the picture and the text
- VSPACE: vertical distance between the picture and the text
- ISMAP: is this a clickable map?
- USEMAP: name of the map definition
- LOWSRC: a version of the picture that isn't such a big file
- NATURALSIZEFLAG: meaningless
- NOSAVE: meaningless
- DYNSRC: play a movie file
- CONTROLS: show the buttons which control the movie
- LOOP: how many times to loop the movie
- START: when to start playing the movie
- onLoad: script to runs after the image is downloaded
- SUPPRESS: Don't show icons of images that haven't downloaded yet

Example

[img height="200" src="http://sheryl-khalid.webs.com/picture/khalid.jpg" width="200" border="4"]

A

Anchor [A] is the cornerstone of HTML, the tag that makes hypertext hypertext. Anchor is the tag you use to make hyperlinks: the text that you can click on in your web browser to go to another web page.

-HREF: URL you are linking to
-NAME: name a section of the page
-TARGET: which window the document should go in
-TITLE: suggested title for the document to be opened
-onClick: script to run when the user clicks on this anchor
-onMouseOver: when the mouse is over the link
-onMouseOut: when the mouse is no longer over the link

MARQUEE

Marquee creates a scrolling display. [Marquee] is an MSIE extension, but is now supported by NS 7. Marquee is often regarded as one of the "evil" tags, and that perception alone might be enough reason to not use it. However, used lightly and with taste and understanding that it will never render everywhere, [MARQUEE ] isn't such a bad tag. It can work well for announcements. The basic use of [MARQUEE] is simple. Put most any kind of markup between [MARQUEE] and [/MARQUEE].

-WIDTH: how wide the marquee is
-HEIGHT: how tall the marquee is
-DIRECTION: which direction the marquee should scroll
-BEHAVIOR: what type of scrolling
-SCROLLDELAY: how long to delay between each jump
-SCROLLAMOUNT: how far to jump
-LOOP: how many times to loop
-BGCOLOR: background color
-HSPACE: horizontal space around the marquee
-VSPACE: vertical space around the marquee

Example

[marquee behavior=scroll direction=left] Al-Kathiri Khalid's and Sheryl Chan's Page!! [/marquee]

EMBED

Embed puts a browser plugin in the page. A plugin is a special program located on the client computer that handles its own special type of data file. The most common plugins are for sounds and movies. The [EMBED] tag gives the location of a data file that the plugin should handle.
In its simplest use, Embed uses the SRC attribute to indicate the location of the plugin data file, and usually also gives a WIDTH and HEIGHT of the plugin area.

-SRC: URL of resource to be embedded
-WIDTH: width of area in which to show resource
-HEIGHT: height of area in which to show resource
-ALIGN: how text should flow around the picture
-NAME: name of the embedded object
-PLUGINSPAGE: where to get the plugin software
-PLUGINURL: where to get the JAR archive for automatic installation
-HIDDEN: if the object is visible or not
-HREF: make this object a link
-TARGET: frame to link to
-AUTOSTART: if the sound/movie should start automatically
-LOOP: how many times to play the sound/movie
-PLAYCOUNT: how many times to play the sound/movie
-VOLUME: how loud to play the sound
-CONTROLS: which sound control to display
-CONTROLLER: if controls should be displayed
-MASTERSOUND: indicates the object in a sound group with the sound to use
-STARTTIME: how far into the sound to start and stop
-ENDTIME: when to finish playing

Example

[embed src="loituma.mp3" hidden=true autostart="true" loop="true"width="0" height="0"loop="infinite"[/embed]

4. DISCUSSION

a) The experience or difficulty in debugging the HTML codes in getting the desired output

We didn't find any difficulty whatsoever in the part of editing HTML code due to the fact that we first laid out a plan and sequentially followed it by using the simple but yet powerful method by first writing the basic HTML codes then later adding further desired codes, of which after every editing we save the document and review it. This helped us to focus on dividing the whole project into parts and the advantage of this is it mainly resolves the issue of future confusion or omissions.

Example

[html]
[head][title] Al-Kathiris & Sheryls Page [/title][/head]
[body]

Most of the codes went here in block format one at a time.

[/body]
[/html]

b) The experience or difficulty in searching or choosing the suitable web hosting server

Searching for a web host was easy through Google search engine but choosing the suitable web was hectic, because most web hosting services provide a page to load the HTML file along with their companies advertisements. This feature interrupted our web lay out and forced us to choose another which advertisements were omitted from our page, our initial web host was www.bravenet.com and now its www.webs.com

c) The experience or difficulty in uploading the files to the web server

Many free web hosting site have a limited or small allowable amount of upload data by user and this limited us to upload a music file into our web site on the initial web hosting site which was www.bravenet.com and this was another reason that forced us to look for another suitable web hosting site and found www.webs.com which allowed us to upload it in a breeze

d) The process and experience or difficulty in creating a blog and learning how to use it

Here it was like a walk in the park except on the part that the report format/layout was not coming to the desired way, hence I manually edit the html file in order to incorporate underline, italic and new line. And since we were required to report on HTML tags online it was difficult to execute such a task without some creativity in it, since all the codes we put here for demonstration/example were executed by the page, I was forced to assign tags to other symbols like [ and ]

5. CONCLUSION

It is rather straightforward when it comes to HTML documents but one can get carried away by fonts of which I would strongly advice it should be the last thing to be done after the whole page or pages have been completed, or else it will end up to be a waste of time with very little being done not to mention too much colour which may not be very appealing and may cause eye irritation to the one whom you intend to visit and read your page.

I have also observed it is best to write in the first place at the blog rather than copying a document from word and pasting it online, the format is usually lost and the document appears unprofessionally written which forces the writer to somewhat rewrite it all over again, its a double work for a limited given time.

6. REFERENCES

1. Tim Berners-Lee, "Information Management: A Proposal." CERN (March 1989, May 1990) [accessed june 10 2009][WWW]http://www.w3.org/History/1989/proposal.html

2. Tim Berners-Lee, "Design Issues" [accessed June 10 2009][WWW]. http://www.w3.org/DesignIssues/

3. Tim Berners-Lee, "Design Issues" [accessed June 10 2009][WWW]. http://www.w3.org/DesignIssues/Uses.html

4. "Tags used in HTML". World Wide Web Consortium.(1992-11-03). [accessed June 10 2009][WWW]http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html

5. "First mention of HTML Tags on the www-talk mailing list". World Wide Web Consortium. 1991-10-29. [accessed june 10 2009][WWW]http://lists.w3.org/Archives/Public/www-talk/1991SepOct/0003.html

6. "Index of elements in HTML 4". World Wide Web Consortium. 1999-12-24. [accessed june 10 2009][WWW]http://www.w3.org/TR/1999/REC-html401-19991224/index/elements