All For Website Development: August 2013

Thursday, August 29, 2013

HTML Tags 2

The Body

<BODY>—</BODY> The <BODY> tag encloses all text, images, and other elements
that will be visible to the user on the web page.

The <BODY> tags contain the content of the HTML page and to identify this section it is surrounded by <BODY> and </BODY>. The text between the <BODY> tags is displayed inside the browser window. In our case, we have the text “This is where the body of the document...” You will notice that this is displayed inside the browser window.

Heading

<H1>—</H1> <H2>—</H2> The six levels of text headings ranging from the largest
<H3>—</H3><H4>—</H4> (<H1>) to the smallest (<H6>). Text headings appear in
<H5>—</H5> <H6>—</H6> bold face font.
ALIGN=Option The alignment of the heading.
(LEFT|RIGHT|CENTER)

Headings help define the format and structure of the document. They provide valuable tool in highlighting important information, headings and sub headings and the nature of the document as a whole.
As you can see, the heading tags come in pairs with the opening and closing tags. Any text surrounded by these tags will be displayed differently depending on the heading number. There are six levels of headings in HTML specified by <H1>, <H2>, <H3>, <H4>, <H5> and <H6> tags. The use of these in an HTML document are as follows:

<H1> First Level Heading </H1>
<H2> Second Level Heading </H2>
<H3> Third Level Heading </H3>
<H4> Fourth Level Heading </H4>
<H5> Fifth Level Heading </H5>
<H6> Sixth Level Heading </H6>

When you use these tags, no other tags can be used inside these tags and if they are used, they will be ignored. Heading or sub heading can be aligned to the left, right or centre using 'ALIGN' attribute. If it is necessary <H1 ALIGN = CENTER> Title of the heading </H1> can be used to align the title at the centre of the web page. These values can be assigned to ALIGN and their 'LEFT', 'RIGHT' and 'CENTER'.

HTML Tags

Each tag consists of the name of the tag surrounded by the less-than '<' and greater-than ‘>’ signs. To tell the browser that something is a tag, you simply place “less than” and “greater than” symbols around them. The LESS THAN symbol is "<" and the GREATER THAN symbol is “>”. For example, P (for Paragraph) can be used as <P> in the web page. When you create web pages you can use <P> for paragraphs, sections and other phrases and to mark the end of such a section you can use </P> ending tag. The ending tag in this case is not compulsory; however there are some cases where ending the tag cannot be omitted. Such tags will be discussed later in this section.

Notes :
There is no need to use a couple of Tags for some instructional tags, and for security tags it is essential to use a couple of tags. For example, it is not essential to put </P> at the tag end of the paragraph.
HTML tags are not case sensitive. You can use CAPITAL Letters as well as simple letters. For example <TITLE>, <titLe>, <Title> and <title> have all the same result.

BODY, HEAD and TITLE for the HTML Document

Each HTML document begins with an <HTML> and ends with </HTML> tags and this implies that the document is made up of Hypertext Markup Language tags. HTML stands for Hypertext Markup Language which is the language of web page design. Example 5.2 shows how you can use tags such as <HTML>, <HEAD>, <TITLE>, <BODY>, <H1>, <H2>, <H3> and <H4> and Figure 5.4 shows the interface of the web page

Example 5.2
<HTML>
<HEAD>
<TITLE>Example 5.02</TITLE>
</HEAD>
<BODY>
<H1>This is where the body of the document...</H1>
<H2>This is Heading One</H2>
<H3>This is Heading Two</H3>
<H4>This is Heading Three</H4>
</BODY>

'Firefox' Web Window of Example 5.2

The Head

<HEAD>—</HEAD> The <HEAD> tag encloses the code that provides
information about the document.

After Putting <HTML> to identify the main information use <HEAD> tag. To end this put </HEAD> and within these two tags use <TITLE> tag.

The Title

<TITLE>—</TITLE> The <TITLE> tag is used to specify the text that appears
in the Web browser’s title bar.

You will find an additional starting and ending pair of tags, the <TITLE> and </TITLE> inside the HEAD section, i.e. with <TITLE>University of Colombo </TITLE> between them and you are only allowed one TITLE element per page. So what is the purpose of this? Look at the display of the document and you will find that this text is shown on the top, at the Title bar of the browser. Thus, any text between the <TITLE> tags will be displayed here.

This shows how example 5.01 is displayed in the web browser

In this example, <HTML>, <TITLE></TITLE>, <H1></H1>, <P></P> and </HTML> tags are used and Figure 5.3 shows how it is displayed in your computer monitor using Firefox browser.

<HTML>
Starts the HTML document.
<TITLE>
Text inside <TITLE> tag displays the title of your web on the browser Title Bar.
<H1>
This is used to display the main title of your web page.
<P>
Used to highlight the paragraph of your web page.

3. WYSIWIG Editors

These editors can be used by even users new to this and who do not have wide knowledge of HTML codes to develop simple / basic web sites without any effort. These kind of editors have to be purchase from the market and some examples for them are as follows.

• ColdFusion
• Dream Weaver
Introduced by Adobe Inc. and
• Expression Web
• SharePoint Designer
• Visual Studio
• Visual Web Developer Express are some of editors introduced by Microsoft
Company.

2 Object Editors

Can use pre designed models the object editors designed with user friendly HTML tags and attributed and specially, different colours are use to display tags and attributes.
Another special feature of these object editors is ability to manipulate codes of different computer languages. Rather can edit codes as need is another special feature this has. For an example, if you use HTML this provide facilities for that or if you use Java language to edit it provides interface with these facilities. Examples for those editors are follows.

1' EditPlus - Created for windows operating system by Sangil Kim for
Es - Computing Institute.
2' Homesite - Homesite developed by Adobe is use for windows operating system. Specially use
for edit HTML codes.
3' Notepad++ - It has became a widely use editor which is created by Don Ho and can edit many
computer languages by this, mostly use to edit HTML codes. This is free and can use
with windows, Mac and Linux operating systems. More than 16 million people
have downloaded Notepad++ from www.SoureForge.net web site.

Interface of Notepad++

Use of Web Development Tools to Develop Web Sites

We have discussed that the web pages used in the WWW are develop according the rules of the Hypertext Markup Language (HTML). Web pages written in HTML are displayed on the screen by the web browsers. Multimedia files such as sounds, videos, images can be included in an HTML file. In order to establish links between items in other web pages and other web pages in web in the Internet,
‘Hyper-links’ can be established using HTML. ‘Hyper-Links’ can be used to link multimedia files too. In web site development three major types of tools can be used.

1. Text Editors
2. Object Editors
3. WYSIWIG - Editors

1. Text Editors
When developing web sites using a simple text editor you should have a good understanding about the HTML tags. A simple text editors such as ‘Notepad’ or ‘Notepad++’ can be used for this purpose and you need to type the HTML tags in appropriate way and you need good knowledge of HTML tags for this purpose. The basic knowledge needed for this activity will be provided in stages.
We can discuss about some simple text editors which can be used for this
purpose. We can obtain them free of charge.

1. Notepad - Free too distributed with windows operating system By
Microsoft Institute from their first windows operating system in 1985.
2. GEdit - Tool developed to use with Unicode. (See figure 5.1)
3. TextEdit - Free tool distributed with Macintosh Operating System.
4. TED Notepad - Text editors which developed from 2001 by Joraj Similovic can be
used with windows operating system.

Interface of GEdit text editor

Organization of Information for Website Development 2

As mentioned before, a web browser has the capability of handing web pages with ‘Rich-text’ and other features such as paragraphs, fonts and images. In addition to this there are web sites in which live radio and live TV can be played. Web browsers have the ability to access such web sites and provide such facilities. Further, web browsers can be used for Live Chat, Internet Phone, Internet Meeting, News Groups
and Teleconferencing. The web browsers with appropriate ‘Plug-in’s can be used to execute applications developed using different application software. Web browsers with Plug-in s have advanced capabilities. For example, if you want to watch a video of a format such as 'Quick Time Movie' (a special multimedia
video format), you can add the 'plug-in' ‘Quick Time Movie Player’ to your browser and watch it. Most of these Plug-ins can be downloaded freely from the Internet. ‘Firefox’, ‘Internet Explorer’ and ‘Safari’ are widely used web browsers and they can be downloaded freely from the Internet. The following are the important features of web browsers.

Handling Media Using Plug-ins
‘Media Handler’ allows the browser to perform the operations using ‘Plug-ins avoiding any problems associated with the use of a ‘Plug-in.

Use of ‘Java Scripts’

Web browsers have the ability to browse web sites with programming language code such as ‘Java Script’. ‘Java Script’ is a programming language and codes written in this language can be included in your HTML
pages.

Value Added ‘HTML'

Using more advanced features of HTML, high quality web sites (close to pages of a magazine) can be created.

Electronic Mail (e-Mail)
Important applications like 'e-Mail' can be used.

Organization of Information for Website Development

In 1989, Tim Berners-Lee introduced to the world the World Wide Web (WWW) which is now distributed all over the world through the Internet. This system is today developed into a medium to communicate multimedia based information. The WWW has some agreed standards on the following.

1. How to organize the multimedia and other information.

2. How to store such organized information in the computer system.

3. How to link information in one computer to information in another computer

in the network.

4. How to retrieve such information.

5. How to use information.

A computer named ‘WWW Server’ in the network is used to store web pages organized using the above standards and the other computers in the network can obtain information in these web pages. One ‘WWW Server’ can be used to store websites of various organizations or individuals and every website has a ‘Home page’ and other web pages of the site are linked to the home page using ‘Hyperlinks’ or ‘Hyper-media’. The main feature of the ‘WWW Server’ system with web pages which are connected through ‘Hyperlink’ or ‘Hyper-media’ is that the information can be obtain in any order, any time by anybody (there are systems in which information

should be given in a particular order. The information provided through radio and televisions are examples of such information). Using ‘Hyper-media’ links an important item in a web page can be linked to a another web page in the same computer system or to a web page in another ‘WWW-Server’ in the Internet to get more detailed information about the item. It is possible to state four possible situations where such links can be established.

1. A link to another section in the same web page.
2. A link to a web page in the same web site.
3. A link to another web site in the Internet.
4. A link to another web page in another website in the Internet.

Another important feature of the ‘WWW’ is the ability to link different multimedia information. For example a link can be established to an image, video clip, sound clip or an animation picture.
If the files in the Internet are developed using only text, it is easy to obtain such files from the Internet. In order to prepare web based files, a special language called HTML (Hypertext Markup Language) can be used which has some special tags to indicate the type of information in the file using a specified set of rules. The HTML has some special instruction codes (tags) to incorporate image, sound, video and animation into a web file. A software tool call ‘Web Browser’ is needed to access the information in a web file. The Web browser interprets the instruction codes in a HTML file and provides the information in a web file in an appropriate way to the user on the monitor of the computer. The process takes place in four steps.

1. First a request is made to the computer which provides the information and
checks whether information can be obtained .
2. If information can be obtained in this way the information will be provided to
the client computer which requests information using ‘HTTP’ technology.
3. The information provided will be displayed on the client computer in an
appropriate way according to the HTML tags in the file by the web browser.
4. If any image or multimedia content is to be displayed or played this will be
executed using the tools in the client computer.

In addition to the standard tags in ‘HTML’, other software tools (‘Plug-ins’) with various capabilities developed by different companies can be incorporated in to an HTML file. This will give value addition to the retrieval of content in the Internet. HTML is a kind of word processor and a HTML file can be used in a computer with any operating system. The facilities of a word processor such as creation of fonts of varies sizes and shapes, title and sub title creation, tables, lists, paragraphs and different features in paragraphs can be done using HTML. In addition to this the multimedia files like images, sounds, animations and videos can be incorporated into an HTML file.
A web browser is needed to obtain the large information in the WWW which can be used in any computer. Some of these web browsers can be downloaded from the Internet without paying any fee. Some of the widely used web browsers are ‘Firefox’, ‘Internet Explorer’, ‘Safari’, ‘Opera’ and ‘Google Chrome’. These web browsers retrieve and provide information in a very user friendly way by point and click of a mouse. The basic capabilities of a web browser are given below.

¨ The ability to display an HTML file in plain text according to the
HTML tags in the file.
¨ The ability to display web pages with images having an image file
format GIF, JPG or PNG.
¨ The ability to play other multimedia files in an HTML file such as
sound, video and animation.

¨ The ability to access web sites with ‘FTP’, Gopher’ and ‘Usenet’
facilities.
¨ The ability to provide facility to input user information in a form and
obtain such information.
¨ The ability to provide access to search engines so that the user can
search information on web pages or web sites which he or she needs.