Scribd
Upload
222 views

HTML

This document provides an introduction to HTML and its basic elements for designing webpages. It discusses HTML tags for headings, titles, links, images, tables, frames, and forms. Key elements include the <head> and <body> sections, anchor tags for hyperlinks, image tags, table tags, frameset tags for dividing pages into frames, and form tags for collecting user input. The document also covers attributes for these elements and how to align, size, and position different content blocks.

Uploaded by

api-3734530
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
222 views

HTML

This document provides an introduction to HTML and its basic elements for designing webpages. It discusses HTML tags for headings, titles, links, images, tables, frames, and forms. Key elements include the <head> and <body> sections, anchor tags for hyperlinks, image tags, table tags, frameset tags for dividing pages into frames, and form tags for collecting user input. The document also covers attributes for these elements and how to align, size, and position different content blocks.

Uploaded by

api-3734530
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 7

Online Shopping

1.4 INTRODUCTION TO HTML

HTML- (HyperText Mark-up language) is the tool for


designing static WebPages. It is a documentation language to mark
the headings, title, tables etc. is machine independent, and all Internet
browsers accept the HTML code. Every HTML document has the
following two sections:
• Head
• Body
The head begins with the <HEAD> tag
ends with </HEAD> tag and the body begins <BODY> tag and ends
with </BODY>. Headings can be created with tags H1, H2…H6.H1 will
make a big heading, H2 will make it smaller, and H3 will make it till
smaller,and so on.The title begins <TITLE> tag and ends with
</TITLE>.
ANCHOR TAG:
When a page is shown, some of its words may need further
explanation. Such words are called hot text and they appear in
different color. A hot text is created with an anchor tag, <a>.For
example, if a hot text “NARAYANA COLLEGE ”is to be created with an
HTML document, college.html we must type
<a href=”college.html”>NARAYANA COLLEGE</a>.
When we click a hot text another HTML document is opened. This is
how we link two texts. This is called the HYPER LINK.

ALIGNING THE HEADINGS:


We can also align the heading to the left, right or center.
The following are the four types of alignments.
1.Left

12
Dept of C.S.E.,Narayana Engineering College., Nellore.
Online Shopping

Example: <H2 align=left>NARAYANA COLLEGE</H2>


2.Right
3.Center
4.Justified

IMGAGE TAG :
A picture or an image in the web page can be inserted
using the <img> tag. The <img> tag has several
attributes to inform the source, height of the picture,
width of the picture alignment, etc. The following are
the important attributes:
 Src
 Height
 Width
 Align
 Alt
The src attribute specifies the source of the picture. It
gives the file name of the picture file. The height and
the Width may be expressed in terms of pixels,
percentages or en units. The default is pixels.
For Example. Consider the following.
<Image src=”flower.gif” height=150 width=250 >
We can also specify the align attributes.

TABLES:

Tables are very efficient means of displaying information in a


concise and precise form.
The following are the components of a table:
• Table caption

13
Dept of C.S.E.,Narayana Engineering College., Nellore.
Online Shopping

• Table heading row


• Rows and columns
In HTML, the beginning of a table is marked by the <TABLE>
tag and the end is marked by the </HEAD> tag. If we want a border
for our table, we must give the beginning tag as <TABLE BORDER>.
The caption for the table must be given with the <Caption> tag. Each
row of the table must be given with the <tr> tag. The table heading in
each column must be given with a <th> tag. So the heading row must
be coded in an HTML document as follows:
<tr><th>Course<th>OC<th>BC<th>SC/ST<th>TOTAL
The first row of the table is the heading row, and hence entry
was given the <th> table head tag. The entries in the other rows are
called table data, and entered with the <td> tag.
For Example:

Computer Science 1 2 3 4 5

This is coded as
<tr><td>Computer Science<td>1<td>2<td>3<td>4<td>5

Each cell can be assigned a background color using the bgcolor


attribute, the <td> tag must be given as follows:
<td bgcolor = “#ff0000”>

FRAMES:
It is possible to divide the container into several frames, and
use each frame for displaying a different HTML document. Frames
have the following characteristics.
• Each frame is given a name
• Each frame will be targeted by an HTML document.

14
Dept of C.S.E.,Narayana Engineering College., Nellore.
Online Shopping

• Each frame resizes itself dynamically in response to the changes


in the size of the visible client area.
A set of frames is defined using the <frameset> tag which ends
with the </frameset> tag. The <frameset> tag has two attributes.
• Row or column frame
• Size of each frame
The size of the frames are mentioned in any of the following
units:
• Pixel
• Percentage
• Fraction

PIXEL UNIT:
The pixel unit represents the number of pixels in each frame.
Comas must separate the numbers. For Example, consider the
following:

<Frameset cols=”150,70,70”>
……………………..
…………………….
</frameset>

This definition creates three column-wise frames, with the first


frame of 150 pixels width, the second of 70 pixels width and the third
also of 70 pixels width.

PERCENTAGE UNIT:
The percentage unit divides the window according to the
specified percentages. For example, consider the frameset definition:

15
Dept of C.S.E.,Narayana Engineering College., Nellore.
Online Shopping

<frameset rows=70%, 30%>


……………………………..
………………………………
</frameset>
In the above definition, two row-wise frames are defined in the
container. The first frame has 70 per cent of the container and the

Frame 1 70%

Frame 2 30%
second one has 30 per cent of the container.

FRAME DEFINITION:

The definition of the frame is given using the <frame> tag. The
<frame> tag may have the attributes:
 Source HTML address (SRC)
 Name of the frame (NAME)
 Margin width (MARGINWIDTH)
 Scrolling button (SCRPLLING)

The SRC attribute specifies the URL of the HTML document to be


displayed in this frame.

FORMS:
The form appears when we click the hot text. A form is defined
with the <form> and </form> tags. The form tag has three attributes.
They are
 action
 method

16
Dept of C.S.E.,Narayana Engineering College., Nellore.
Online Shopping

 enctype

ACTION ATTRIBUTE:
The action attribute informs the browser the location of the server
to which the form input has to be submitted.

METHOD ATTRIBUTE:
The method has only two choices of values. They are
Method = ”get”
Method =”post”
With the post method, the information from the user is
put into the data stream of the HTTP, and the back-end program can
read the data as input through the “standard input” data stream.
In the case of method = ”get”, the data received in the
form are placed at the end of the URL.

HIDDEN FIELDS:

In the <input> tag, we can specify type= “hidden “ to hide the text
typed by the user.
SUBMIT AND RESET BUTTONS:
The submit button is used at the end of the user input .After the user
has typed all the entries in the form, he can click the submit button
only when the user clicks the submit button Is the data given by the
user sent to the server. The submit button is created in the HTML code
as follows:
<input type = “submit” value= “submit”>

The Reset button is used to reset the values of all the values in
the form of the user . After typing some entries in the form, if the user
17
Dept of C.S.E.,Narayana Engineering College., Nellore.
Online Shopping

wants to change them, he can do so by clicking the reset button. The


reset button is created by using the <input> tag with the value and
type attributes. It is specified as follows:
<input type=”reset” value=”start over”>

18
Dept of C.S.E.,Narayana Engineering College., Nellore.

You might also like