NICT Computer Education Pvt. LTD.: Internet & HTML

NICT Computer Education Pvt. Ltd.
Internet & HTML
HTML
97
Visit us at : http://www.nicteducation.com
NICT Computer Education Pvt. Ltd. Internet & HTML
INTRODUCTION TO HTML
HTML - Hyper Text Markup Language
Difference between the World Wide Web and the Internet :
Web is just one of the many services available on the internet. Internet is something similar
to the Road that connects many cities, and the cities are similar to the Web which contains
some information.
Information can be in different types like -Text, e-mail, Usenet, Chat Sessions, Audio. Video,
Pictures, Movies etc.,
HYPER :
Hyper is the term used to link different web sites. Hyperlink is an interactive table of contents.
You can use the Image or the Text as the hyper link. When you point your mouse to the hyperlink
they change their shape to the pointing finger and they are "Clickable".
WEB PAGE :
A Web page is simply a special type of file written in HTML. Publishing Web Page means
transferring your web page to a place where it can be served by an HTTP server. A Web page
may contain Text file, Image files, multimedia files or the combination of these. Web pages have
many advantages over traditional media. They are easy to update and relatively inexpensive
to maintain. Web pages are efficient for distributing information and all of this happens with
wider and global audience.
In short, web pages are many things tomany people - but the one thing common to all is their
underlying structure, which is written in HTML.
URL :
Uniform Resource Locator. It is the address of the Web Page. The URL is unique, all the URL
follow a simple understanding like :
www, http, name, domains

www - World Wide Web
http - Hyper Text Transfer Protocol
Name - Name of the web page
Domains - 2 Character Domain, 3 Character Domain, 4 Character Domain.
IP ADDRESS IN URL :
Some URLs vary from the examples by including a series of numbers for the domain name.
These specially formatted numbers are called numerical Ip addresses.
Ex : http://205.226.125.6/
URL with path names and file names :
98
Ex : http://www.sonic.net/web/albany/workshop/lefthand.com
URL with Port Numbers :

Only a few URLs need to include a port number to work properly. The port number comes
right after the domain name, and it's a number preceded by a colon. Most URLs do not have
the port numbers, which is easier to remember.
Ex : http://ezone.org:1080/ez/e7/
The list of Protocols used in URLs
PROTOCOL DESCRIPTION
ftp:// File Transfer Protocol
http:// Hyper Text Transfer Protocol
telnet:// Interactive session using the Telnet Protocol
File:// Local Filename
Gopher:// Gopher Protocol
URLs never have spaces in them, and be careful about dashes, and do not get confused with
the Period or Comma that is the part of the sentence as part of the URL.
HTML stands for Hyper Text Markup Language :
Hyper Text means ordinary text that has been dressed up with extra features, such as formatting,
images multimedia, links to other documents.
Markup is the process of taking ordinary text and adding extra symbols. Each of the symbols
used for markup in HTML is a command that tells a browser how to display the text. Markup
can be very simple, or it can be very complicated.
Language is actually a key point to remember about HTML. HTML is a computer language,
related to computer programming languages like Basic, C and pascal
Markup Languages are a special type of computer language because they are solely concerned
with classifying the parts of a document according to their function.
Hence it is not correct to speak of "programming HTML" because HTML is not really a
programming language. Instead, HTML is a markup language that has a different goal than
creating a program.
The main goal of HTML is to be a universal language for classifying the function of different
99
sections of a document. In other words, HTML is used to define the different parts of your
page. You indicate which part of your document is a title, which part of your document is an
address, which part of your document should be emphasized, which part of your document
should include an image, and so on.
HTML is neither a page - layout language nor a printing language. The only thing HTML
does is classify parts of your document so that a browser can display it correctly. This allows
documents to be displayed on many different kinds of platforms.
Advantages of HTML
Flexibility : You can always work on your web site even when you are away from the computer
you usually work on.
Deeper Understanding : You will have a much better concept of structure of your page and
understanding of why it works the way it does, because you built the page from the ground level.
Troubleshooting : Since you have written the HTML, you'll be able to troubleshoot it efficiently
and have a better idea of what techniques to try if something is wrong or not working.
Price : Using HTML does not cost you money. There are no expensive licenses to buy and no
annoying upgrades to purchase.
Learning : There is no big trick to learn HTML. It is much simpler than any programming
language, and several orders of magnitude simpler than human languages. The reason why
the web is so popular and has such diverse content is because it was very easy for so many
people to learn HTML and create web pages. All it takes is learning HTML's commands, which
are called TAGS
HTML was invented in the year 1989 by a researcher named Tim Berners-Lee who worked for
CERN, the European Laboratory for Particle Physics in Geneva, Switzerland.
CERN researchers developed the first world wide web programs in 1990. By the mid of 1992,
there were ony 26 web servers; by mid 1994, there were more than 10,000 web servers, from
there, the web began to really take off: Millions of Servers are operating today.
World Web Consortium (W3C) is now responsible for the standards of HTTP, HTML and other
Web-Technologies.
HTML's Incredible Straight Forward Tags

A Tag is a unit of markup, a set of symbols defined in HTML to have special meaning. All Tags
start with a less-than sign (<) followed by a keyword, and conclude with a greater-than sign
(>). These symbols are known as angle brackets.
100
Ex : <strong> <img> <TITLE> </b> <HTML>
Tags are not case-sensitive, so <Title>, <title>, and <TITLE> all have the same meaning.
There are two types of Tags. Start Tags and the End Tags. Start Tags are used to begin the effect
and the end tags are used to end that effect. End tags always repeat the keyword with a slash
in front. Tags can be nested within each other. Many Tags can take attributes that effect tag's
behaviour. An attribute is a keyword separated by a space within the angle brackets. Some
attributes require a value preceded by an equal sign.
SGML
HTML is one member of family of markup languages called SGML, which stands for Standard
Generalized Mark up Language. SGML was developed in 1986 to define markup languages
designed for various different purposes.
HTML's Basic structure tags :

1. <html> </html>
2. <head> </head>
3. <Title> </title>
4. <body> </body>
<html>
<head>
<Title> Welcome to NICT </title>
</head>
<body>
hello to you students
</body>
</html>
When creating an HTML document you should observe these basic order:
1. Start your document with the <html> tag, which declares you are writing an HTML
document.
2. To start the head section, use the <head> tag.
3. Inside the head section is the title of the document. Start the title with the <title> tag.
Immediately after type the title you want for your document.
4. To close the title use the end tag. And similarly close the head tag. End tags are critical
- if you leave off a required end tag. Your document might not display at all.
5. Next, start the body section with the <body> tag.
6. Type the text of your document, and close the body section with the Body end tag.
7. Finally end your document with the </html> end tag.
<Html>
<head>
101

Title of your document goes here
</head>
<body>
your document goes here.
</body>
</html>
Introduction to HTML / FILE

An HTML file is used to generate a Web page. World Wide Web is a set of all the web sites and
the documents that can be provided to clients. The world wide web is nothing but a collection
of related HTML files. The computers that host web sites are called servers.
A Web page is basically a text file that contains the text to be displayed and references to
elements such as images, sounds, and Hyperlinks to other documents. We can create an HTML
page with a Text editor such as Notepad or Microsoft Front page editor.
All the Web pages use the protocol HTTP in accessing the server, and http://
www.nictonline.com is the name of the server. All computers on the internet have a unique
address, such as 265.126.202.58.This Numeric address in known as the IP (Internet Protocol)
address, which computers use to communicate with one another.
Let us see the basic structure of the HTML document.

<HTML>
<head>
<title> Web Page </title>
</head>
<BODY>
Plain text, images, sounds, and Script languages. HTML Commands.
</BODY>
</HTML>
in the abovc syntax we have
HTML - Which determines the limits of the HTML document.
HEAD - Contains the initial document information such as Title
TITLE - A Web page Title, and it does not appear any where in the window, but it is
displayed in the Browser's title bar.
102
BODY -
Delimits the document's body, which is the largest part of the document. All the
text, images, sounds appear in the
<BODY> ............................. </BODY> Tags.
Let us see steps involved in making an HTML document which can be opened using Internet
Explorer.
Step 1 : Open NotePad from Start>Programs>Accessories>NotePad
Step 2 : Type in the following code in NotePad and save the file as sample. Html
Step 3 : The following code displays the different sizes of headers and text will be
displayed on the screen.
<HTML>
<HEAD> <TITLE> A Sample HTML Document with different Headings </TITLE></HEAD>
<BODY Bgcolor=Green>
<Center>
<h1> Welcome to NICT Computer Education Pvt. Ltd. </h1>
<Hr width = "40%">
<Hr width = "60%">
<Hr width="80%">
<Hr width="100%">
</Center>
</Body>
</html>
Step 4 : Save the file with sample.html on DESKTOP and double click on the Icon
The above code first sets the Title of the Explorer to A Sample HTML document with different
headings will be displayed.
Bgcolor is nothing but Background color of the Web page.

<Center> tag is used to display the information in the Center of the Screen.
And we have different Header tags namely H1, H2, H3, H4, H5, H6 which will display the
Hello text in different sizes.
Let us see some basic tags used in most web pages.
HTML Basic Tags
The following table lists the basic HTML tags and their usage
103
Tags Usage
<Body></Body> Blocks out a documents body
<H1> &</H1> First-level heading
<H2> &</H2> Second-level heading
<H3> &</H3> Third-level heading
<H4> &</H4> Fourth-level heading
<H5> &</H5> Fifth-level heading
<H6> &</H6> Sixth-level heading
<Head> & </HEAD> Blocks out a document's head
<HTML> & </HTML> Blocks out an entire HTML document
<TITLE> & </TITLE> Supplies the title that label the entire document
<BR> Forces a line break in the on screen text flow
<P> & </P> Breaks up text into content blocks
<PRE> & </PRE> Preformatted
<STRONG> & </STRONG> Provides maximum emphasis to enclosed text
<B> & </B> Products bold text
<Center> & </Center> Centers enclosed text
<Font> & </Font> Sets the size, color and typeface of text
<HR> Draws a horizontal line across the page
<I> & </I> Produces italic text
<S> &</S> Produces text that has been struck through
<SMALL> & </SMALL> Makes text smaller
<STRIKE> & </STRIKE> Produces text that has been struck through
<TT> & </TT> Produces True Type text
<U> & </U> Underlines enclosed text
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
Here is a small program to use to know the other basic tags in HTML. Here we can see the
usage of the <B>, <I>, <BR>, <P> and <HR> tag with the size attributes.
<HTML>
<HEAD>
<TITLE>
My HTML page for the Internet
</TITLE>
<HEAD>
<BODY>
<CENTER>
<H1> Welcome to NICT's Home Page </H6>
<H6> Let us start the Journey. </H6>
<CENTER>
<HR size = "4">
<B> <I> Thanks for visiting my page (/I></B>
Once again I take
this opportunity to Welcome you to our page.We
assure you of a good time till you are in our page. <P>
<HR size ="2">
<CENTER>
<p> We conduct online courses too. <Br>
<p> We are currently giving online training
& Copy NICT Computer Education
</CENTER>
<HR size = "3">
</body>
</HTML>
In the above code, we can see the tags like <Br>, <p>. The tags will perform the same action
of <BR> and <p>. So HTML tags are not case sensitive. From the above example we have
learnt how to set bold and italics formatting.
Write the HTML code in Notepad. Save it as abc.html and open the file in a Browser.
121
CHAPTER 4
TABLES
 Table Attributes
 TD and TH Attributes
 A More Complex Sample Table
 Rowspan
 Colspan
122
Tables
Tables are a very flexible way to do what many beginning HTML users want to do line up
items according to a grid pattern. A grid pattern can be a very effective way to provide visual
cohesion on a web page.
Example:-
The element TABLE is used to define tables, Within the table element, you use the TR element
for table rows, TH for table headers, TD for table data, and the CAPTION element for the
table's caption. Here's a simple table example :
<TABLE>
<CAPTION> The stanley Cupo Results. </CAPTION>
<TR><TH> Game </TH><TH>Red Wings</TH><TH> Black
Hawks</TH></TR>
<TR><TD>1</TD><TD>3</TD><TD>2</TD></TR>
</TABLE>
PLACING AN IMAGE IN A CELL
To place an image in a cell, you follow the same rules as for placing an image on a web page.
The following example places a border around an image which is placed in a single cell table
and also makes the image a link to NICT home page.
The BODY of the HTML document that gives this example is:
<H3 ALIGN=”CENTER”>
<TABLE BORDER=”10" CELLPADDING=”0" CELLSPACING=”0">
<TR>
<TD><A HREF=”index.htm”><IMG SRC=”globe.gif ” ALIGN=”CENTER” ALT=”cross”
WIDTH=”90" HEIGHT=”120" BORDER=”0"></A>
</TABLE></H3>
Experiment with different attribute values. Add some cell padding and cell spacing. Place a
border around the image as well as a border around the table, or experiment with the ALIGN
attribute as in ALIGN=”RIGHT” and ALIGN=”LEFT” or remove the ALIGN attribute altogether.
You can learn a lot from experimenting.
<TD><IMG SRC=”globe.gif” ALIGN=”CENTER” ALT=”cross” WIDTH=”90" HEIGHT=”120"
BORDER=”0">
If you use images in a table, be sure to specify the WIDTH and HEIGHT attributes in the IMG
tag. This allows the browser to lay out the table in advance, so it can draw the table and place
the text above and below the table before the image is loaded.
123
Table Attributes
Align
Left Center Right

Top of the Cell
CONTENTS
Middle of the Cell
UNDER
CONSTRUCTION Bottom of the Cell
The horizontal alignment of the table on-screen (not the contents of the table). Possible values
follow:
bleedleft Aligned at the left window border
bleedright Aligned at the right window border
center Centered between text margins
justify Table should fill space between text margins
left At the left text margin
right At the right text margin
Border
Causes browser to render a border around the table; if missing, the table has no grid around
it or its data. You can set the thickness of the border by giving this attribute an integer value.
For example : Border = "3" gives the table a three-pixel border.
Cellspacing You can set this to the number of pixels you want placed between cells of the table
Cellpadding You can set this to the number of pixels you want placed around the data in the
cells.
Width specifies how wide the table will be; if given an NN% the width is NN% of the width
124
of the display; otherwise, the width is in pixels, It's not advisable to give the width in pixels,
because you don't know how wide your user's browsers will be.
The CAPTION element is used to lable a figure or table. Its attribute is Align, which is used to
position the caption relative to the figure or table. Values include top, bottom, left and right.
The TH element identifies a table header cell, and TD identifies a table data cell. Browers
usually treat these two elements differently in terms of how they are rendered. In general, a
TH element's contents are placed in boldface and centered by default. A TD's elements usually
are aligned to the left.
TD and TH Attributes
Align Horizontal alignment of the paragraphs in a table row; values include left, center, right,
justify, and decimal (text aligned on decimal points).
Colspan specifies the number of columns the cell spans.
No wrap prevents the browser from wrapping the contents of the cell.
Rowspan Specifies the number of rows the cell spans.
Valign Vertical alignment of material in a cell. Values include top, middle, and bottom.
The TR identifies a container for a row of table cells. Its attributes are the same as for TH and
TD. Working with tables is fairly easy and usually leads to pleasing results when you finetune
your elements.
Listing 5.5 A simple table example with data centering.

<BODY>
<TABLE Border = "2" Cellpadding = "3"
Cellspacing = "3">
<CAPTION> The Stanley Cup Results.</CAPTION>
<TR><TH>Game</TH><TH>Red Wings</TH><TH> Black
Hawks</TH></TR>
<TR><TD Align = "center">1</TD><TD>
Align = "center">3</TD><TD>
Align = "center>2</TD></TR>
<TR><TD Aligh = "center">2</TD><TD>
Align = "center">1</TD></TR>
Align = "center">8</TD><TD
125
<TR><TD Aligh = "center">5</TD><TD

Align = "center">2</TD><TD
</TABLE>
Here are some tips for working with tables :

 Remember that table data can consist of lists, images, forms, and other elements. The
TD is a true container that can hold other HTML elements even more tables.
 The TH element typically is rendered as bold text.
 The TD element typically is rendered as regular-weight text.
 Always use TRS as "holders" for THS and TDS. Think of building your table row by row.
Each time you start a new row, you also should consider using a BR or P element to
break the row, so that browsers that do not render tables at least will be able to show
the contents of your table with each row's data on a separate line.
The browser sets the number of columns in a table to be the greatest number of colums in all
the rows Blank cells are used to fill any extra columns in the rows.
126
CHAPTER 5
Frames
Objectives
 Frameset Attributes
 Frame Attributes
 Forms, Tables, and Frames Check
127
With frames, you can divide a browser window into different panes of information that can
be viewed and changed independently.
Currently, only Netscape and Microsoft Internet Explorer browsers recognize frames. Some
problems also exist with frames; they violate many of the navigation practices that users have
come to expect, they are fairly difficult to use well, and user easily can get confused using them.
No longer is the current URL display on the browser valid, printing no longer is straightfor-
ward, and there's the possibility of the infinite fragmentation of the user's browser window
(which will be illustrated with an example later in this discussion).
The new elements to implement frames are frameset, frame and noframes. The attribute target
of the A (anchor) element is also added. The FRAMEset element is the container for a frame
instead of having a BODY element, a frame document uses FRAMESET. This element can be
nested.
With frames you are not writing web pages in the traditional sense. What you are in fact doing
is creating a template where more that one web page can sit.
Frame commands allow you to display more than one web page at the same time on the
browser screen. In other words, each frame contains its own web page. In addition, you also
need a separate document that creates the frames.
Frameset Attributes
Cols="col width value list" comma-separated list of values indicating the width of each of the
columns. The values are the same syntax as for the rows attribute.
Rows="row_height value_list" a Comma-separated list of values indicating the height of each

of the rows.
 If a number, the row is that high in pixels.
 If a number followed by a % the row gets that percent of the total window height.
 If an *, the row gets the remaining room.
 If a number followed by an *, that row gets the much more shares of the height.
The FRAME element identifies a single frame in a frameset.
128
FRAME Attributes
Marginheight = "Value" The number of pixels to add to the top and bottom of the contents
of the frame.
Marginwidth = "Value" The number of pixel to add to the left and right of the contents of the
frame.
Name = "text" Assigns a name to the frame. This then can be used in other documents in the
Target attribute of the A (anchor) element.
Noresize A flag that indicates that the frame is not resizeable by the user. Normally, a user
can manually alter the size of the frame by using the small boxes that appear on the display
of the frame. The Noresize attribute makes this resizing impossible.
Src"url" The url refers to the resource to be displayed initially in this frame.
Scrolling = "Yes/No/Auto" this allowes you to control if and when the scroll bar appear in
a frame. Normally, scrollbars are added only if there is not enough room to display all the
contents in a frame. The Yes value for this attributes add scrollbars to the frame even if the
frame contents can fit within the frame itself. A No value means the scrollbars are added,
even if they are needed. The value of auto (the default) means that the scrollbars are added
when necessary.
The NOFRAMES element brackets contents that will be rendered by non-frame enabled brows
typically this content is a BODY element and a page of HTML.
The frames scheme adds an attribute to the A (anchor) element; target; This attribute defines
in which frame the new content referenced in the anchor is displayed when selected.
129

NICT Computer Education Pvt. LTD.: Internet & HTML

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

NICT Computer Education Pvt. LTD.: Internet & HTML

Caricato da

Copyright:

Formati disponibili

NICT Computer Education Pvt. Ltd.

Internet & HTML

www, http, name, domains

URL with Port Numbers :

The list of Protocols used in URLs

ftp:// File Transfer Protocol

http:// Hyper Text Transfer Protocol

telnet:// Interactive session using the Telnet Protocol

File:// Local Filename

Gopher:// Gopher Protocol

HTML stands for Hyper Text Markup Language :

HTML's Incredible Straight Forward Tags

Ex : <strong> <img> <TITLE> </b> <HTML>

HTML's Basic structure tags :

Introduction to HTML / FILE

Let us see the basic structure of the HTML document.

Bgcolor is nothing but Background color of the Web page.

Let us see some basic tags used in most web pages.

HTML Basic Tags

 A More Complex Sample Table

Left Center Right

bleedleft Aligned at the left window border

bleedright Aligned at the right window border

center Centered between text margins

justify Table should fill space between text margins

left At the left text margin

right At the right text margin

Listing 5.5 A simple table example with data centering.

<TR><TD Aligh = "center">5</TD><TD

Here are some tips for working with tables :

 Forms, Tables, and Frames Check

Rows="row_height value_list" a Comma-separated list of values indicating the height of each

The FRAME element identifies a single frame in a frameset.

Potrebbero piacerti anche