HTML

HTML
HTML stands for Hypertext Markup Language. HTML is not a programming language; it is a markup
language. A markup language is a collection of markup tags. HTML uses markup tags to describe Web
pages. HTML Tags are keywords surrounded by angle brackets like <HTML>. HTML tags are
normally comes in pairs, like <b> and </b>. The first Tag in a pair is the start tag, the second tag in a
pair is the end tag. Start and End tags are also called opening tag and closing tag. It is used for creating
static web pages.
Advantages of HTML:
 It is widely used
 Every browser supports HTML language
 Easy to learn and use
 It is by default in every windows so you don’t need to purchase extra software
Structure of HTML page:
All HTML pages consist of head and a body.
 The Head is used for text and tags that do nots show directly on the page
 The Body is used for text and Tags that are show directly on the page.
Finally, all web pages have an <html> tag at the beginning and the end, telling the browser where the
document starts and where its stops.
The most basic code the code you will use for any page you make, is shown below:
<html>
<head>
<!---This section is for the title and technical info of the page---!>
</head>
<body>
<!----This section is for all that you want to show on the page---!>
</body>
</html>
The head section of the webpage includes all the stuff that does not show directly on the resulting page.
The <title> and </title> tags encapsulate the title of your page. The title is what shows in the top of your
browser window when the page is loaded. Right now it should say something like “Basis-HTML
Tutorial” on top of the window containing this text.
Another thing you will often see in the head section is meta tags. Meta tags are used for among other
things, to improve the rankings in search engines.
1|Page prepared byOdelu RJRM

DEGRE COLLEGE
Quite often the head section contains java script which is a programming language for more complex
html tags.
Finally, more and more pages contain codes for Cascading Style Sheets (CSS). CSS is a rather new
technique for optimizing the layout of major websites.
Since these aspects are way one of reach at this stage we will precede with explaining the body section.
WEB PAGE
To create a page on internet is called web page. To create a web page type the content using a word
processor and save the document with HTML extension or in ASCII format. Now open the browser
software Netscape Navigator or Internet explorer. Open the file you created. It will appear when you
actually publish it on the server.
HTML TAGS
HTML markup tags are also called HTML tags. These denote the various elements in a HTML
document. HTML tags are keywords enclosed in a pair of angular brackets. i.e <and>. These tags are
usually paired. For example <HTML> AND </HTML> to mark the start and end of the HTML
instruction or HTML element. The end tag or closing tag is preceded with a(“/” forward slash) within
the angular brackets. There are two types of tags
1. Container Tags: These tags have a start and an end tag to an HTML element. For example
<B>……</B>, <body>………..</body>
2. Empty Tag: These tags have only an opening or a start tag and no closing tags to a HTML
element. For example <LI>,<IMG > etc……….
HTML ELEMENTS
The content typed along with the start tag and end tag is called the HTML element. For example
<b>click start</b> is one HTML element. (or)
An HTML documents are defined by HTML elements. An HTML elements is every thing between the
start tag and end tag. The start tag is often called the opening tag. The end tag is often called the closing
tag.
OPENING TAG ELEMENT CONTENT CLOSING TAG
<P> This is Paragraph </p>
<b> This is bold </b>

DEGRE COLLEGE
HEAD ELEMENT: <HEAD>
This element contains information about the document. The text and tags do not show directly on the
web page. It contains the HEAD tag which is the first tag under the HTML tag. This is turn can contain
various other tags such as TITLE tag( title appears in the Title Bar of the web page).
Ex:
<html>
<head>
<title> sample </title>
</head>
</html>
BODY ELEMENT
This element defines the document’s body. This comes after the head element. The BODY tag is used to
display text, images, links etc.., on the web page.
Ex: <html>
W<head> <title> sample </title> </head>
<body>
Welcome to HTML programs
</body>
</html>
BODY TAG ATTRUBUTES

1. Text: This attribute specifies the color of the text of the entire document. The value can be the
name of the color within quotes(“ ”)
2. Bgcolor: This attribute specifies the color of the background of the web page.

DEGRE COLLEGE
HTML HEADINGS
HTML headings are defined with <h1> to <h6>. The lower number, the larger heading size and the
larger number is the lower heading size.
1. Write a program html headings
<html>
<title> HTML HEADINGS</title>
<body>
<h1> This is H1 Heading </h1>
</body>
</html>
HTML LIST’S
HTML lists contain one or more list elements lists may contain list. List are when you want to display
data in the form of points. To create a list in HTML you use <LI> tag. This is an empty tag. HTML
support several types of lists are the following
1. Unordered list
2. Ordered list
UNORDERED LIST
An Unordered list is a list of items where the sequence of the list is not significant by default it is
marked with bullets. To create unordered list. You use <UL> tag. To create each point of the unordered
list you use <LI> tag.
<UL> tag specifies the type of bullet to be displayed in a list. It can be either a circle, a disc or a square
in shape. The default shape of the bullet that appears is a disc.
<html>
<title>UNORDERED LIST</title>
<BODY>
<H2>COMPUTER PARTS</h2>
<UL>
<LI>CPU

DEGRE COLLEGE
<LI>MONITOR
<LI>MOUSE
<LI>KEYBOARD
</UL>
<UL type="circle">
<LI>CPU
<LI>MONITOR
<LI>MOUSE
<LI>KEYBOARD
</UL>
<UL type="square">
<LI>CPU
<LI>MONITOR
<LI>MOUSE
<LI>KEYBOARD
</UL >
<UL type="*">
<LI>CPU
<LI>MONITOR
<LI>MOUSE
<LI>KEYBOARD
</UL>
</BODY>
</HTML>

DEGRE COLLEGE
ORDERED LIST
An ordered list is a list of items where sequence is very important. By default it starts with numbers.
You can use <OL> tag to create an Ordered list and <LI> tag to create different points of the list.
<OL> tag supports attributes
If specifies the type of the numbering to appear for an ordered list. It can be either 1, a A,I,and i. If you
Don’t uses a type attribute with the <OL> tag then the default list created is with numbers.
<html>
<title>ORDERED LIST</title>
<BODY>
<ol>
<LI>CPU
<LI>MONITOR
<LI>MOUSE
<LI>KEYBOARD
</ol>
<ol type="a">
<LI>CPU
<LI>MONITOR
<LI>MOUSE
<LI>KEYBOARD
</oL>
<ol type="I">
<LI>CPU
<LI>MONITOR
<LI>MOUSE
<LI>KEYBOARD
</oL >
<ol type="A">
<LI>CPU
<LI>MONITOR
<LI>MOUSE
<LI>KEYBOARD
</oL>
DEGRE COLLEGE
</BODY>
</HTML>
HTML TABLES
HTML tables used to display data in a tabular format. In the table data is represented in the form of
rows and columns.
To create tables in HTML, you use following tags
1. To create the structure of table
<TABLE>……….</TABLE>
2. To create the table row
<TR>……….</TR>
3. To create table header
<TH>…………</TH>
4. To create the table data
<TD>………..</TD>
1. TABLE TAG <TABLE>
Table tag is used to define a table in an HTML document. It is a container element and contains the
following attributes.
DEGRE COLLEGE
 Align: It gives the alignment of table to surrounding text. It can be left, right and center
 Bgcolor: It is an pixels and sets the width of the border around the table. If you do not specify a
border attribute the table will be displayed without any border. Border=0 means no border.
 Height: It specifies the height of a table by using either a percentage or a pixel.
 Width: It specifies the width of a table by using either a percentage or a pixel.
2. TABLE ROW TAG <TR>
<TR> tag stands for table row. It is used to add rows to the table. The number of <TR> tags in a table
specifies the number of rows in the table.
<table>
<tr>…..</tr>
<tr>…..</tr>
</table>
3. TABLE HEADING TAG <TH>
Every table should have a table heading. If helps to recognize the type of data contained in the table.
<TH> tag is used to define a table header. i.e the first row will become the heading row for each column
created. It is a container element. By default the text in this row is bold and center aligned.
4. TABLE DATA TAG <TD>

Table data tag is used to add content to a cell. It is a container element.
<html>
<title>tables</title>
<body>
<center>
<h1><u>Student Information Table</u></h1>
<table border="2" height="20%" width="50%">
<tr>
<th>s.no
<th>name
<th>no
</tr>
<tr>
<td>1</td>
<td>odelu</td>
<td>05</td>
</tr>
<tr>
<td>2</td>

DEGRE COLLEGE
<td>balu</td>
<td>06</td>
</tr>
<tr>
<td>3</td>
<td>mounika</td>
<td>07</td>
</tr>
</table>
</BODY>
</HTML>
FORMATTING TAGS
Formatting tags are used to formatting effects on the text tin a web page are called formatting Tags.
Some of these tags are explained here.
1. BOLD TAG <B>
Bold tag helps to display the text in bold. It is a container element where the text written between the
<B> and </B> tags appear darker than the rest of the text. This tag is generally used to give headings or
to highlight important terms
<b> this is bold tab</b>
2. ITALICS TAG <I>

DEGRE COLLEGE
Italics tag helps to display the text in italics. It is container element. The text written between <I> and
</I> tag appears slightly titled than the rest of the text.
<I> this is italic text <I>
3. UNDERLINE TAG <U>
Underline tag helps to underline the text. It is a container element where the text written between <U>
and </U> tag appears underlined.
<U> this is underline tag </U.
4. STRIKETHROUGH TAG <STRIKE>
Strikethrough tag is used to strike a line through the middle of the text. It is a container element.
<STRIKE> THIS IS STRIKE TEXT </STRIKE>
5. SUPERSCRIPT TAG <SUP>
Superscript tag is used to display the text in the superscript format where the text written between the
start and end tags appear slightly above the line. This tag is mostly used with various mathematical
values
Ex: X <SUP>2</SUP + Y <SUP>2</SUP>
6. SUBSCRIPT TAG <SUB>
Subscript tag is used to display the text in the subscript format where the text written between the start
and end tags appear slightly below the line. This tag is used mainly with mathematical and scientific
data.
H <SUB> 2 </SUB> O
WRITE A PROGRAM ON HTML FORMATTNG TAGS

<html>
<title> HTML FORMATTIGM TAG </title>
<body>
<b> this is bold tab</b> <br>
<I> this is italic text <I><br>
<U> this is underline tag </U><br>
<STRIKE> THIS IS STRIKE TEXT </STRIKE> <br>
10 | P a g e p r e p a r e d b y O d e l u RJRM
DEGRE COLLEGE
X <SUP>2</SUP + Y <SUP>2</SUP> <br>
H <SUB> 2 </SUB> O
</body>
</html>
DEGRE COLLEGE
***HTML FORM****
HTML forms are used to select different kinds of user input.
FORM: A FORM is an area that can contain form elements. Form elements are elements that allow the
user to enter information (like text fields, text area fields, dropdown menus, radio buttons, check boxes,
etc….) in a form
A form defined with the <Form> tag
<form>
<input>
<input>
</form>
INPUT: The most used form tag is the <input. Tag. The type of input is specified with the type
attribute. The most commonly used input type are explained below.
 TEXT FIELDS: Text fields are used when you want the user to type letters, numbers etc…
<form>
First Name:
<input type=”text” name=”first name”>
<br>
Last Name:
<input type=”text” name=”Last name”>
</form>
 RADIO BUTTONS
It is used to when you want the user to select one of a limited number of choices.
<form>
<input type=”radio” name=”Gender” value=”Male”>Male
<br>
<input type=”radio” name=”Gender” value=”Female”> Female
</form>
 CHECK BOXES
DEGRE COLLEGE
Check boxes are used when you want the user to select one or more options of a limited number of
choices.
<form>
<input type=”checkbox” name=”vehicle” value=”Bike”/>
I Have a Bike
<input type=”checkbox” name=”vehicle” value=”car”/>
I have a car
<input type=”checkbox” name=”vehicle” value=”Laptop”/>
I have a Laptop
</form>
 THE FORMS ACTION ATTRIBUTE AND THE SUBMIT BUTTON

When the user clicks on the “Submit” button the content of the form is sent to another file. The form
actions attribute defines the name of the file to send the content to. The file defined in the action
attribute usually does something with the received input.
<form name=”input” action=”forms.html” method=”get”>
USER NAME:
<input type=”text” name=”User”>
<input type=”submit” value=”submit”>
</form>
**** WRITE A PROGRAM ON HTML FORMS
<html>
<title>HTML CHECK BOXES</title>
<body>
<form>
NAME:
<INPUT TYPE="TEXT" NAME="FATHER NAME:">
<BR>
FATHER NAME:
DEGRE COLLEGE
<INPUT TYPE="TEXT" NAME="FATHER NAME:">
<br><br>
<INPUT TYPE="CHECKBOX" NAME="GENDER" VALUE="MALE">I HAVE A BIKE
<BR>
<INPUT TYPE="CHECKBOX" NAME="GENDER" VALUE="FEMALE">
I HAVE A CAR
<BR>
I HAVE A COMPUTER
<BR>
I HAVE A LAPTOP
<BR>
<br>
GENDER
<BR>
<INPUT TYPE="RADIO" NAME="GENDER" VALUE="MALE">MALE
<BR>
<INPUT TYPE="RADIO" NAME="GENDER" VALUE="FEMALE">FEMALE
</FORM>
</BODY>
</HTML>
DEGRE COLLEGE
TO BE CONTINUED….
****WRITE A PROGRAM ON HTML FORM ACTIONS
<html>
<title>HTML CHECK BOXES</title>
<form name="input" action ="FORM.HTML" method="get">

USER NAME:
<INPUT TYPE="TEXT” NAME="SUBMIT">
<BR>
PASSWORD:
<INPUT TYPE="TEXT" NAME="PASSWORD">
<BR>
<INPUT TYPE="SUBMIT" NAME="SUBMIT">
</HTML>
HOW DOES A FORM WORK:

In a form, the user is typically presented with a number of input mechanisms that help the user to enter
data. These could be text files, radio buttons, check boxes or list boxes. When data entry is complete, the
user submits the form. Submitting the form will send the input by the user to the server for processing.
DEGRE COLLEGE
This is done by selecting the submit button on the page. This communicates to the browser that the user
has completed data entry.
The browser sends that the data and URL of the CGI script to the server.
HTML FRMES
With frames you can display more than one HTML documents in the same browser window. Each
HTML documents is called a frame and each frame in independent of the other.
HTML FRAMESET ELEMENTS:
The frameset elements hold one or more frame elements. Each frame element can hold a separate
document.
The frame set elements states how many columns or rows there will be in the frame set and how much
percentage or pixels of space will occupy.
HTML FRAME ELEMENT:
The <frame> tag defines one particular window with in a frame set. In the example below we have a set
with tow columns.
The first column is set to 25% of the width of the browser window. The second column is set to 75% of
the width of the browser window. The document “frameA.html” is put into the first column and the
document “frameB.html” is put into the second column.
<frameset cols “25%,75%”>
<frame src=”frameA.html”/>
<frame src=”frameB.html”/>
</frameset>
WRITE A PROGRAM ON HTML FRAMES
<html>
<title>freames</title>
DEGRE COLLEGE
<FRAMESET COLS="25%,75%">
<FRAME SRC="FORMA.HTML"/>
<FRAME SRC="FORMB.HTML"/>
</FRAMESET>
</HTML>
HTML MARQUEE TAG <MARQUEE>

It displays scrolling text in a “marquee” style.
MARQUEE TAG ATTRIBUTES:
ALIGN: Sets the alignment of the text relative t the marquee. Set to Top, Middle and Bottom.
BEHAVIOUR: Ser how the text in the marquee should move. Can be scroll, slide and alternative
BGCOLOR: set the background color for the marquee box.
DIRECTION: set the direction of the text should scroll, it can be lift, right, down or top.
HEIGHT: specifies the heiht of the marquee.
HSPACE: gives the left and right margins outside the marquee.
** WRITE A PROGRAM ON MARQUEE TAG***

<html>
<title>marquee </title>
<body>
DEGRE COLLEGE
<marquee bgcolor=”green” DIRECTION="LEFT" HEIGHT="25%" >
Welcome to html world
</marquee>
<marquee bgcolor=”orange” DIRECTION="right" HEIGHT="25%" >
Welcome to html world
</marquee>
</body>
</html>
HTML GRAPHIC FORMATS

Graphics enhance the communication of ideas and add aesthetic value to the document. Graphics also
make document interesting and easier for the user to read. There are a number of graphics formats
supported by most of browsers gif’s and jep of formats are mostly used.
The image element is used to incorporate in-line graphics into HTML documents
<IMG SRC=”…… IMAGE URL………”.
Where SRC is the source of the graphics file.
<img src=”myphoto.jpeg”>
DEGRE COLLEGE
<img src=”myphoto.gif”>
<img src=”rose flower.gif”>
<IMG WIDTH= VALUE HEIGHT=VALUE>
Ex: <IMG SRC=”MY PHOTO.JPEG” WIDTH=”25%” HEIGHT=”40%”>
Align this attribute is used to determine the vertical alignment of text and adjustment of the image.
1. ALIGN=left floats the image to the left margin
2. ALIGH= right aligns the image to the right margin
3. ALIGN= to align the image to the top margin
4. ALIGN=text top aligns the image to the top of the tallest in the line. ALT this attribute used to
give alternate text that will be displayed in place of the image.
*** WRITE A PROGRAM ON IMAGE TAG

<html>
<title>marquee </title>
<body>
<CENTER>
<h2>my photo </h2>
<br>
<img src="G:\Photos\New folder\Snapshot_20120116_51.jpg" height="70%" width="50%">
</body>
</html>
DEGRE COLLEGE
HOW TO INSTALL WEB PAGE
To install a web page on WWW, use Internet Services Provides (ISP) like AOL CompuServe etc. Make
sure your provider has the services you need. Space is relatively cheep to find, running from two or
more megabytes for free at Gecocities to ten megabytes or more through search engines by the phrase
free web pages and be prepared many matches. The installation totally depends upon ISP. The main
thing look for is band width, the faster the connection the better, all other things being equal.
URL:
URL stands for Unified Resourse Locator. URL locates the document to be retrived when a user clicks
on a hpter text link. URL is similar to a file name except that, in this case, the file can be on the same
machine or on a different machine in the network. There are some conventing to be retrived. A URL
need not always point to document but can also point toa query, image or result of a command. If the
reference address of the document of the document used on the internet.
The format of URL is
“Scheme: // hot. Domain / path / data name”
The URL used on www to retrieve HTML documents called HTTP URL.
WEB MANAGEMENT TOOLS
There are many different web management tools to choose from some of the best are
1. Net Objects forms http://www.netobjects.com
It controls all aspects of site with a central repository of design and features other centralized
management tools.
2. Hot Dog Pro http://www.sausage.com
Makes it fairly easy to keep track of projects by filename and does link checking
3. Adobe Page main and Site Mill http://www.adobe.com
A marvelous package fully available for the Macintosh and partially for windows 95 etc…
4. Microsoft front page 98 http://www.microsoft.com/bulider
Use of specific Microsoft specific tags and features.
DEGRE COLLEGE

HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

HTML

1|Page prepared byOdelu RJRM

2|Page prepared byOdelu RJRM

BODY TAG ATTRUBUTES

3|Page prepared byOdelu RJRM

4|Page prepared byOdelu RJRM

5|Page prepared byOdelu RJRM

4. TABLE DATA TAG <TD>

8|Page prepared byOdelu RJRM

9|Page prepared byOdelu RJRM

WRITE A PROGRAM ON HTML FORMATTNG TAGS

 THE FORMS ACTION ATTRIBUTE AND THE SUBMIT BUTTON

<form name="input" action ="FORM.HTML" method="get">

HOW DOES A FORM WORK:

HTML MARQUEE TAG <MARQUEE>

WRITE A PROGRAM ON MARQUEE TAG*

HTML GRAPHIC FORMATS

*** WRITE A PROGRAM ON IMAGE TAG

You might also like