Download Report

HTML
What is a computer network?
A computer network is a collection of computers linked through cables or wireless
means.
What is Internet?
Internet is a network of computers of different sizes and configurations around the
globe.
What do you need to set up Internet?
In order to setup Internet, we need a computer, MODEM (external or internal) and a
telephone connection.
How do you set up Internet?
To set up the Internet, the computer has to be connected to the telephone through the
MODEM. The user has to register with an Internet Service Provider (ISP) with a
username, who in-turn gives an Internet registration address on the computer which
shall be used to connect the computer to the Internet. This registration address is
called the IP address.
What is a MODEM?
A MODEM is the short form of Modulator and Demodulator. The MODEM converts
the Analog signals received from the telephone line to digital form for the computer
and vice versa.
What are internal and external modems?
Internal modems are those which can be fixed inside the computer.
available in the form of printed circuit boards with connecting outlets.
They are
External modems are those, which are to be connected to the computer and placed
outside the computer. They are available as separate units.
What is a browser?
A browser is a software which helps to receive and send information, designed using
HTML, between two computers.
There are different types of browser, the text browser which displays only text.
Graphics cannot be displayed on these browsers. Graphic browsers display text as
well as graphical information. Internet Explorer and Netscape Navigator are two
examples of browsers.
What is HTML?
HTML stands for Hyper Text Markup Language. This language is used to design
information that can be displayed on browser and transmitted across the Internet.
What are tags?
Tags are commands used in HTML programming. There are two main types of tags –
Container tags and Empty tags. <HTML>, <BR>, <BODY>, <HTML>
What are container tags?
Container tags are those, which are in pairs. Other tags and messages are typed
between the pair. e.g. <HTML></HTML>, <BODY></BODY>
What are empty tags?
Empty tags appear as single tags. e.g. <BR>, <HR>
What are attributes of tags?
Attributes of tags are the properties of the tags that have special functions to perform
such as BGCOLOR gives the background colour, BORDERCOLOR gives a color to
the border of a table.
Let us see the tags used to design the HTML pages.
All HTML pages begin with <HTML> and end with </HTML>. This is a container
tag. An HTML page has two main sections, the header and the body.
The header section of the HTML is designed using the <HEAD></HEAD>. This
container tag contains another container tag <TITLE></TITLE>. Any information
typed between <TITLE></TITLE> tags appear on the title bar of the browser window
in which the HTML page is displayed.
The body of an HTML page is designed using the tags<BODY></BODY>. The
information which has to be displayed on the browser is enclosed between the
<BODY> and </BODY> tag.
The following example shows the usage of the above-discussed tags.
<HTML>
<HEAD>
<TITLE>MY PAGE</TITLE>
</HEAD>
<BODY>
This is my first HTML page.
</BODY>
</HTML>
The message MY PAGE is displayed on the title bar
The message “This is my first HTML page." appears as the body of the HTML page.
The text typed in the body of the HTML page appear continuously. It can be broken
into multiples using the <BR> tag. This is an empty tag. It inserts a line break and
pushes the text after the cursor to the next line as shown in the example below
<HTML>
<HEAD>
<TITLE>MY PAGE</TITLE>
</HEAD>
<BODY>
This is my first <BR>HTML page.
</BODY>
</HTML>
TEXT-FORMATTING :
Modifying the appearance of the text during the presentation on the browser pages.
The text can be formatted using three simple container tags as shown in the example
<HTML>
<HEAD><TITLE>MY PAGE</TITLE></HEAD>
<BODY>
This text is <B>bold</B>. <BR>
This text is in <I>italics</B>.</BR>
This text is <U>underlined</U>.
</BODY>
</HTML>
HTML provides a set of six sizes of headings which can be used with the help of six
pair of tags. The following example illustrates the usage of the tags
<HTML>
<HEAD>
<TITLE>DIFFERENT TYPES OF HEADINGS</TITLE>
</HEAD>
<BODY>
<H1>HELLO</H1>
<H2>HELLO</H2>
<H3>HELLO</H3>
<H4>HELLO</H4>
<H5>HELLO</H5>
<H6>HELLO</H6>
</BODY>
</HTML>
We can create new paragraphs using the tag <P>. Paragraphs can be aligned to the
left of the page, right of the page or at the center of the page using the attribute
ALIGN of the tag <P>. The following example explains the difference between the
<BR> and the <P> tags and the ALIGN attribute of the tag <P>.
<HTML>
<HEAD>
<TITLE>PARAGRAPHS</TITLE>
</HEAD>
<BODY>
The BR tag moves the cursor to the<BR>
beginning of the next line.<BR>
The P tag inserts a blank line and then<P>
moves the cursor to beginning of the line after the blank line.
<P ALIGN=LEFT>
This part of the text has <B>left.</B> alignment.
<P ALIGN=RIGHT>
This part of the text has <B>right </B> alignment.
<P ALIGN=CENTER>
This part of the text has <B>center</B> alignment.
</BODY>
</HTML>
Superscript and Subscript
Certain situations arise which displaying formulae on the HTML pages.
involve special type of formatting.
These
For example, when we need to display formula such as H2O, CaCO3, H2SO4, or x2,
3x3, we use special tags to either raise the text above or push them down below the
normal line of writing.
Tabs to display the text like x2, 3x3 are called superscript tags and those used to
display text such as H2O, CaCO3, H2SO4 are called subscripts tags.
Tag used for superscript formatting is <sup></sup>.
To display x2, 3x3 the HTML code will be as follows
x2
=
x<sup>2</sup>
3x3
=
3x<sup>3</sup>
Tag used for subscript formatting is <sub></sub>.
To display H2O, CaCO3, H2SO4 the HTML code will be as follows
H2O
=
H<sub>2</sub>O
CaCO3,
=
CaCO<sub>3</sub>
H2SO4
=
H<sub>2</sub>SO<sub>4</sub>
WORKING WITH GRAPHICS
Graphics are any pictures drawn using a computer. The pictures are also referred by
the name images. There different formats of storing images. Different formats have
different extensions in their filenames.
.BMP
.GIF
.JPG
.TIF
. PNG
-
Bit Map Picture format.
Graphics Interchange Format (can be still pictures or animated)
(JPEG) Joint Photographic Experts Group
Tagged Image File format
Ping format
The best formats used on HTML pages are GIF, JPG and PNG. The GIF occupies
less memory space but the quality in colour transperancy is not appreciable. The JPG
and the PNG format occupy less memory space and retain the colour transperancy of
the original picuture.
We cannot use the cut-paste or copy-paste technique to display images on the HTML
pages.
<IMG> tag is used to insert pictures on an HTML page. The important attribute of
<IMG> tag is the SRC which specifies the path and the name of the source file that
contains the image (picture).
Given a picture rabbit1.jpg, the following code uses the IMG tag to insert the picture
into an HTML page. The output of the code will be as given. This picture does not
have any border.
<HTML>
<BODY>
<IMG SRC=”rabbit1.jpg”>
</BODY>
</HTML>
To provide a border of a specified thickness, we have to use the attribute BORDER.
In the example, the border of thickness 3 pixels has been specified.
<html>
<body>
<img src="rabbit1.jpg" border="3">
</body>
</html>
In order to place this picture as a background for the entire HTML page, we use the
following code and the output will as shown in the picture.
<html>
<body background="rabbit1.jpg">
<img src="rabbit1.jpg" border="3">
</body>
</html>
HTML - Hyperlinks
Hyperlinks play very important role in connecting pages in the same website or pages
across websites. They also connect different location in a large document.
The hyperlinks which connect across sites are known as External hyperlinks, while
those which connect the locations within the document are known as Internal
hyperlinks.
The tag which is used to create hyperlinks is the <A></A> container tag. This is tag
is also called Anchor tag.
EXTERNAL LINK
External links are created with <A></A> tag in the following manner:
<A HREF=”http://www.google.com”>Google</A>
Link text
Absolute path
Hyperlink reference
INTERNAL LINK
Internal links are created in two stages.
First the location to be liked is marked using the name attribute as follows:
<A name = “position1”></A>
Second step is linking this location using the HREF.
<A HREF=”#position1”>Position 1</A>
Link text
Named location
Hyperlink
Inserting the attribute target=”_blank” inside the tag <A> will open the page in a
new window.
HTML- Tables
COLSPAN and ROWSPAN
COLSPAN
Colspan is the attribute of the tag<TABLE> . The purpose of COLSPAN is to
indicate width of a columns in terms of the specified number of columns.
The following example and the illustration display the action of COLSPAN.
<TABLE>
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
Product
COMPUTER
MOUSE
$1299
$15
<TH>Product</TH>
<TH COLSPAN=2>Amount</TH>
<TD>COMPUTER</TD>
<TD>$1299</TD>
<TD>95c</td>
<TD>MOUSE</TD>
<TD>$15</TD>
<TD>95c</TD>
Amount
95c
95c
The column containing Amount
spans two columns.
ROWSPAN
Rowspan is the attribute of the tag<TABLE> . The purpose of ROWSPAN is
to indicate height of a row in terms of the specified number of rows.
The following example and the illustration display the action of COLSPAN.
<html>
<body>
<table border=1 bordercolor="black">
<tr>
<th rowspan=5>Parts of a Head</th>
<td>Eyes</td>
</tr>
<tr>
<td>Nose</td>
</tr>
<tr>
<td>Mouth</td>
</tr>
<tr>
<td>Ears</td>
</tr>
<tr>
<td>Chin</td>
</td>
</tr>
</table>
</body>
</html>
Parts of Head
Eyes
Nose
Mouth
Ears
Chin
The row containing Parts of Head
spans five rows