KEMBAR78
HTML Notes | PDF | Hyperlink | Html
Scribd
Upload
25 views26 pages

HTML Notes

The document provides an introduction to HTML, explaining its definition, uses, advantages, and disadvantages. It details basic HTML tags and attributes, the structure of an HTML document, and how to create and view HTML files. Additionally, it covers text formatting, lists, and nested tags, along with examples for better understanding.

Uploaded by

chhinnamastahospital1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
25 views26 pages

HTML Notes

The document provides an introduction to HTML, explaining its definition, uses, advantages, and disadvantages. It details basic HTML tags and attributes, the structure of an HTML document, and how to create and view HTML files. Additionally, it covers text formatting, lists, and nested tags, along with examples for better understanding.

Uploaded by

chhinnamastahospital1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

HOPE COMPUTER INSTITUTE, Rajbiraj

Introduction to HTML
What is HTML?
HTML (Hypertext Markup Language) is the standard language used to create web pages. It uses
tags to structure content, such as text, images, and links, on the web.

Uses of HTML

• HTML is used to create and structure web pages.


• HTML embeds images, videos, and audio on web pages.
• HTML creates links to connect different web pages and resources.
• HTML structures content with headings and paragraphs.
• HTML organizes content into ordered and unordered lists.
• HTML builds forms to collect user input.

Advantage and disadvantage of using HTML


Advantages of Using HTML

1. HTML is simple and straightforward, making it great for beginners.


2. All web browsers can read and display HTML.
3. HTML is open-source and doesn't require any special software or licenses.
4. HTML works well with CSS and JavaScript to create dynamic websites.
5. HTML helps improve search engine rankings with tags and headings.
6. HTML can be used with other web technologies like PHP and databases.
7. HTML makes it easy to link to other web pages and resources.

Disadvantages of Using HTML


1. HTML alone cannot create dynamic content without help from CSS or JavaScript.
2. Creating complex layouts requires a lot of manual coding.
3. Large HTML files can become hard to manage and maintain.
4. HTML lacks advanced features and relies on other languages for complex tasks.
5. Sometimes HTML can look different in various browsers, requiring extra testing and
adjustments.

HTML Tags and Attributes


HTML Tags
HTML tags define the structure and content of a web page. They are enclosed in angle brackets
(<>) and usually come in pairs: an opening tag and a closing tag.

Basic HTML Tags

1. <html>: The root element.


2. <head>: Contains meta-information.
3. <title>: Sets the page title.
4. <body>: Contains the page content.
5. <h1> to <h6>: Headings.
6. <p>: Paragraph.
1
HOPE COMPUTER INSTITUTE, Rajbiraj

7. <a>: Hyperlink.
8. <img>: Image.
9. <ul> and <ol>: Unordered and ordered lists.
10. <li>: List item.
11. <div>: Division or section.
12. <span>: Inline section.
13. <table>, <tr>, <td>, <th>: Table and its components.

HTML Attributes
Attributes provide additional information about elements. They are included in the opening tag.
Common HTML Attributes

1. href: URL for a link.


2. src: URL for an image.
3. alt: Alternative text for an image.
4. title: Tooltip text.
5. id: Unique identifier.
6. class: Class name for CSS styling.
7. style: Inline CSS styles.
8. target: Where to open the link.
9. name: Name of an element (used in forms).
10. value: Value of an input element.

Example
<!DOCTYPE html>
<html>
<head>
<title>Simple Example</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is a simple paragraph.</p>
<a href="https://www.example.com">Visit Example</a>
<img src="image.jpg" alt="Description of image">
</body>
</html>>
This example shows basic HTML tags and attributes in use.

Basic Structure of an HTML Document


An HTML document has a basic structure that includes several key elements:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
2
HOPE COMPUTER INSTITUTE, Rajbiraj

<p>Welcome to the HTML tutorial.</p>


</body>
</html>

Explanation of the Basic Structure


1. <!DOCTYPE html>
o This tells the browser that the document is an HTML5 document.
2. <html>
o The root element that wraps all the content on the page.
3. <head>
o Contains meta-information about the page, such as the title and links to CSS and
JavaScript files.
4. <title>
o Sets the title of the page, which appears in the browser's title bar or tab.
5. <body>
o Contains the content of the page that is displayed in the browser.

Creating, Saving and Viewing an HTML Document


Start Notepad (a text editor) by pressing Win + R key, type Notepad and press Enter.
Type a basic structure into text editor. For Example:

<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML document.</p>
</body>
</html>

Go to File > Save As.


Choose the location where you want to save the file, give it a name like index.html
Finally Click on Save.

To view, Double-click the saved index.html file. It will open in your default web browser (e.g., Chrome,
Firefox, Edge).

Comments in HTML

The comment tag is used to insert a comment in the HTML source code. Browser will not display
comment. We can use comment to explain tag/code. Which can help us when we edit the source code
later.

<!--This is comment -->

Comment tag requires ! after opening bracket, but not before the closing bracket.

<html>
<head> <title>Comments</title> </head>
<body>

3
HOPE COMPUTER INSTITUTE, Rajbiraj

<!—This comment will not be displayed. -->

COMPUTER

</body>

</html>

Character Formatting (Paragraph, Heading, Text Format)


There are a number of style tags, which alter the appearance or format of the text. These tags make
HTML documents more attractive. Some of the tags used for formatting HTML documents are : <P>,
<CENTER>, <BR>, <HR>.

Paragraph

Paragraphs are defined with the <P> tags. It denotes a paragraph. HTML automatically adds an extra
blank line before and after a paragraph.

<P> This is a paragraph</P>

<P> This is another paragraph</P>

By default, the text is left-aligned. You can use an attribute ALIGN to change the alignment of the
text.
For example,

<P ALIGN=RIGHT> This is right aligned paragraph. </P>

Heading
The heading tag is used to create heading in documents. HTML supports 6 different levels of
headings. The highest-level header format is <H1> and the lowest level is <H6>.
For example,

<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
By default, the headings are left-aligned. You can use an attribute ALIGN to change the alignment of
the headings
For example,

<H1 ALIGN=CENTER> This is Center aligned heading. </h1>

Line Breaks
A tag <BR> can be used to end line. <BR> is a singular tag and has no closing tag.

4
HOPE COMPUTER INSTITUTE, Rajbiraj

For Example,

<p>This is<br>a paragraph<br>with line breaks.</p>


Output

This is
a paragraph
with line breaks
Horizontal Rule
The <HR> Horizontal rule tag allows adding horizontal line across the webpage. It is a singular tag.

Example:
<HTML>
<HEAD>
<TITLE>
Inserting horizontal rule
</TITLE>
</HEAD>
<BODY>
<H1> Hope Computer Institute </H1> <BR>
<B> Deal with best Quality Education </B> <BR>
<I> Rajbiraj-5, Near Sanima Bank, Saptari, Nepal BR>
<P>
<B> <U> Computer : </B> </U> It is an advance electronic device, through which user can do any
types of work with maximum 100% accuracy and very fast speed. It can do any work within a second.
<P>
<HR>
IT is an EDP (Electronic Data Processing) system by which computer can process all given instructions
according to requirements.
</BODY>
</HTML>
Text Formatting:
The processing of changing the appearance of HTML Document is known as text formatting or Text
element formatting. The web browser only identified the single space between the words or text for
giving line break, paragraph break, formatting tags are used.

Text formatting tags in HTML are of two types:

• Physical tags
• Logical tags

Physical Tags

Physical Tags affect the appearance of the text. These tags are used to specify the exact way in which
text/characters are to be formatted and displayed in the browser.

5
HOPE COMPUTER INSTITUTE, Rajbiraj

Some of the physical text formatting tags are:

Tags Explanation Example Results


<B>….</B> Displays the text in bold. <B> Text </B> Text
<I>….</I> Displays the text in Italic. <I>Text</I> Text
<U>…</U> Underline the text <U>Text</U> Text
<SUP>…</SUP> Displays the text as (a+b)<SUP>2</SUP> (a+b)2
superscript.
<SUB>…</SUB> Display the text as H<SUB>2</SUB>O H2O
subscripts.
<BIG>…</BIG> Display text in bigger size This is <BIG>Big</BIG> This is BIG
<SMALL>…</SMALL> Display text in smaller size This is This is small
<SMALL>small</SMALL>
Logical Tags

Logical tags are inbuilt commands in the browsers to render certain features of the content in a specific
style. Browser use these logical tags to display feature like definitions, citations and computer codes in a
specific style.

Tags Explanation Example


<EM>…</EM> To emphasize the text <EM>Text</EM>
<DEFN>…</DEFN> <DEFN>Computer is an
…</DEFN>
<CITE>…</CITE> To write some quote or <CITE>Citation</CITE>
citation
<CODE>…</CODE> Defines computer code text. <CODE>…</CODE>

For example,

<html>
<head> <title> Demonstration of text formatting tags </head> </title>
<body>
<b> This text is bold</b>
<br> <Strong> This text is strong </Strong>
<br> <big> This text is big </big>
<br> <em> This text is emphasized </em>
<br> <i> This text is Italic </i>
<br> <small> This text is small </small>
<br> subscript H <sub> 2 </sub> SO <sub> 4 </sub> = Sulphuric Acid
<br> superscript (a+b) <sup> 2 </sup> = a<sup>2</sup> +2ab +b<sup>2</sup>
<br> <code> Computer code </code>
<br> <kbd> Keyboard input </kbd>
<br> <samp> Sample text </samp>
<br> <var> Computer Variable </var>
</body>
</html>

6
HOPE COMPUTER INSTITUTE, Rajbiraj

Nested Tags (Tag inside tags or Multiple Tags)


In the above example, we saw a line of code with nested tags. <BR> <Strongs> these are both insert a
line break and strong or same as bold </STRONG>. When you use nested tags you must be sure that they
do not overlap each other. They must be nested exactly.

Font Tags
The <font> tag was used in HTML to specify the font face, font size, and color of text. It has attributes
like SIZE, COLOR AND FACE.

It has the format of:

<FONT SIZE=”1 TO 7” COLOR=Color name” or “RRGGBB” FACE=”font name”>…….</FONT>

Attributes Explanation Example


SIZE Define the font size of the text value from <FONT SIZE=”5”>text </FONT>
1 to 7. The default size is 3.
COLOR Specifies the color of the text. It can be <FONT COLOR=”GREEN”>text
specifies by the color name or as a </FONT>
hexadecimal code as #RRGGBB.
FACE Specifies the font type of the text. <FONT FACE=”arial”>text
</FONT>

The list of colors and their associated hexadecimal RGB values are:
Color Name Hexadecimal RGB Color Name Hexadecimal RGB
Value Value
Black #000000 Silver #C0C0C0
White #FFFFFF Gray #808080
Red #FF0000 Maroon #800000
Lime #00FF00 Olive #808000
Blue #0000FF Green #008000
Yellow #FFFF00 Purple #800080
Cyan / Aqua #00FFFF Teal #008080
Magenta / Fuchsia #FF00FF Navy #000080

Creating Lists
HTML supports several types of list elements that cab be included within the <BODY> tags of the
documents. The different types of lists that can be created in HTML are :
• Ordered list
• Unordered list
• Definition list
1. Ordered List or Numbered list
In HTML, all the list items in an ordered list are marked with numbers by default instead of
bullets. An HTML ordered list starts with the <ol> tag and ends with the </ol> tag. The list items
start with the <li> tag and end with </li> tag.

7
HOPE COMPUTER INSTITUTE, Rajbiraj

Syntax
<ol>List of Items</ol>

Example of HTML Ordered List


<html>
<head> <title>HTML Ordered List</title> </head>
<body>
<h2>List of Fruits</h2>
<ol>
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
<li>Grapes</li>
<li>Orange</li>
</ol>
</body>
</html>
Different Types of Ordered Lists in HTML

Instead of numbers, you can mark your list items with the alphabet: A, B, C or a,b,c, or roman
numerals: i, ii, iii, etc. You can do this by using the <ol> tag type attribute

To mark the list items with letters A, B, C, etc., you must specify A as the type attribute’s value in
the <ol> tag.

Here is an example

<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<h2>List of Fruits</h2>
<ol type="A">
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
</ol>
</body>
</html>

Write a HTML code to show the use of Roman numerals to list the items.
2. Unordered List or Bulleted List

8
HOPE COMPUTER INSTITUTE, Rajbiraj

In HTML unordered list, the list items have no specific order or sequence. An unordered list is also called
a Bulleted list. It begins with the <ul> tag and and closes with a </ul> tag. The list items begin with the
<li> tag and end with </li> tag.

Syntax

<ul>List of Items</ul>

Example of HTML Unordered List

<html>
<head> <title>HTML Unordered List</title> </head>
<body>
<h2>List of Fruits</h2>
<ul>
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
<li>Grapes</li>
<li>Orange</li>
</ul>
</body>
</html>

2. Definition List or Description List

In an HTML Description list or Definition List, the list items are listed like a dictionary or encyclopedia.
The tags used for creating a definition list are:

• <DL> - Definition List


• <DT> - Definition List Term
• <DD> - Definition List Description

<html>
<head> <title>HTML Description List</title> </head>
<body>
<dl>
<dt><b>Apple</b></dt>
<dd>A red colored fruit</dd>
<dt><b>Honda</b></dt>
<dd>A brand of a car</dd>
<dt><b>Spinach</b></dt>
<dd>A green leafy vegetable</dd>
</dl>
</body>

9
HOPE COMPUTER INSTITUTE, Rajbiraj

Setting Marquee Tags


<MARQUEE> tags displays the content as a moving tag. It is a paired tag. So the contents should be
enclosed in between the <MARQUEE> and </MARQUEE>. It is used to insert a scrolling area of text.

The tag <MARQUEE> supports following attributes:

Attribute Explanation
width provides the width or breadth of a marquee. For
example width="10" or width="20%"
height provides the height or length of a marquee. For
example height="20" or height="30%"
direction provides the direction or way in which your marquee will allow you to scroll.
The value of this attribute can be: left, right, up, or down
scrolldelay provides a feature whose value will be used for delaying each jump.
scrollamount provides value for speeding the marquee feature
behavior provides the scrolling type in a marquee. That scrolling can be like sliding,
scrolling, or alternate
loop provides how many times the marquee will loop
bgcolor provides a background color where the value will be either the name of the
color or the hexadecimal color code.
vspace provides a vertical space, and its value can be
like vspace="20" or vspace="30%"
hspace provides a horizontal space, and its value can be
like hspace="20" or hspace="30%"

Here's are some example of how to use <marquee> tag in HTML:

Scroll Up
<marquee width="60%" direction="up" height="100px">

This is a sample scrolling text that has scrolls in the upper direction.

</marquee>

Scroll Down
<marquee width="60%" direction="down" height="100px">

This is a sample scrolling text that has scrolls texts to down.

</marquee>

Scroll Left to Right


<marquee width="60%" direction="right" height="100px">

This is a sample scrolling text that has scrolls texts to the right.

</marquee>

10
HOPE COMPUTER INSTITUTE, Rajbiraj

Scrolling Speed
<marquee behavior="scroll" direction="up" scrollamount="1">Slow Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="12">Little Fast Scrolling</marquee>
<marquee behavior="scroll" direction="left" scrollamount="20">Fast Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="50">Very Fast Scrolling</marquee>

Creating Links
Link are the most important part of the World Wide Web. HTML links, or hyperlinks, connect
web pages and are created using the `<a>` tag with the `href` attribute. Links can be text,
images, or other elements. Users can click on links to navigate between different pages.
These links are provided by URLs (Uniform Resource Locator), which give the location and
filename of a document.

Creating hyperlink using anchor tag <A>


In HTML, an anchor tag <A> used to define hyperlinks. It is a paired tag. The <A> tags indicates
the start of a link and </A> indicates the end of the link.
The syntax of <A> tag:
<A HREF=”URL”> Hyperlink Text </A>
Here, HREF is an attribute of the anchor tag. It specifies an URL or the address of the linked
file. This file will be opened when we click the Hyperlink Text.
Example:
<A HREF=http://www.hopecomputercenter.com.np> Hope Computer Institute </A>
In this example the “Hope Computer Institute” represents the contents that is highlighted as a
link to the file name as the value of HREF.
The attributes supported by <A> tag here:
Attributes Explanation Example
HREF Specify the URL of the target resources. <A HREF=”mypage.html”>…</A>
NAME Specify the location of an internal reference <A NAME=”top”>…</A>
in a document.
TITLE Specify the tooltip information for the link. In <A HREF=”mypage.html”
the browser window, if the user hold the TITLE=”Get Information about my
mouse over a link long enough, TITLE self”>My Self </A>
attribute will be displayed.

Link Types
There are three major types of links:

• Internal Links
• Local Links
• External Links

11
HOPE COMPUTER INSTITUTE, Rajbiraj

1. Internal link is a hyperlink that points to another location within the same webpage or
website. It allows users to navigate to different sections of a page without leaving the current
page.
Links within a same page is created in two steps:

• Create an anchor- define target location


• Create a link pointing to an anchor
Anchor can be created by using the attribute NAME.
For example, <A Name=”top”></A>
Link pointer to anchor can be created by using attribute HREF.
<A HREF=”#top”>Go TO TOP </A>
The # symbol identifies the word “top” as a named point within the current webpage rather than
a separate webpage.
2. Local Links: These are links to other webpage of the same website. The format for
creating local
link is : < AHREF = “URL”> text to be displayed </A>
Local Links can be the full URL (http://www.hopecomputer/sales/report.html) or partial (Relative
to current directory
3. External Links: These are links to the webpage of other website. For example, if we are
using hotmail.com and we got emails containing links to other website, then those links are
called external links which are the full URL.

<html>
<head> <title> Using Hyperlink </head> </title>
<Body>
Local Hyperlink
<a name =”Top”> </a>
<a href=”#Top”> Go To Top </a>
Internal Hyperlink
<a href=https://hopecomputercenter.com.np> Hope Computer Center </a>
</BODY>
</html>

Defining the colors for links on the page


The color of the text links is specified in the <BODY> tag.
For example:
<BODY LINK="GREEN" VLINK="RED" ALINK="YELLOW">
The attributes of the tag <BODY> for defining colors of links are:

12
HOPE COMPUTER INSTITUTE, Rajbiraj

Attributes Explanation Example


LINK Standard Link To specify the color of the unvisited link. The standard color is
blue.
VLINK Visited Link To specify the color of the visited link. The standard color is
purple
ALINK Active Link To specify the color of the link when the mouse is on it. The
standard color is red.

Link Targets
By default, links open in the current window. If you want the link to open in another window, you
need to add a target.
For Example:
<A HREF="http://www.nepal.gov.np" target="_blank">Nepal</A>
This will open the page in a new window.
The different values of attributes target are:

Value Explanation
_blank It loads the page in a new window.
+
_self It loads the page in the current window

Inserting Images
Graphics, pictures, and images can also be inserted in an HTML document to make it more
interesting and attractive. There are number of formats supported by most web browsers. The
most widely used amongst them are the JPEG and GIF format.
Inserting an image on the Webpage is implemented by using tag <IMG>. The tag <IMG> can
have attributes like: SRC, ALIGN, BORDER, HEIGHT, WIDTH, ALT, HSPACE, and VSPACE.

Attributes Explanation Example


SRC Specify the location and name of the image to
be included in the webpage; <IMG SRC="mypic.jpeg>
Specify the positioning of the <IMG SRC="mypic.jpeg"
ALIGN image on the webpage. Its value can be LEFT, ALIGN="RIGHT">
RIGHT, TOP, BOTTOM, and MIDDLE.
BORDER Specify the width of the border around the image <IMG SRC-"mypic.jpeg"
in terms of pixels. BORDER="4">
Specify the height of the <IMG SRC="mypic.jpeg"
HEIGHT
image. The value of height can be positive pixel HEIGHT="30%">
value or a percentage from 1 to 100.
Specify the weight of the image. The value of <IMG SRC="mypic.jpeg"
WIDTH weight can be positive pixel value or a WEIGHT="50%">
percentage from 1 to 100.
Specify an alternate text to be displayed when
ALT <IMG SRC="mypic.jpeg"
the graphics feature is turned off in the browser
ALT="This is my picture">
or while the image is being downloaded.

13
HOPE COMPUTER INSTITUTE, Rajbiraj

Specify the horizontal space


HSPACE around the image i.e. space on the left and right <IMG SRC="mypic.jpeg"
of the image. Its value is a positive number of HSPACE="12">
pixels.
Specify the vertical space round the image i.e.
VSPACE space between the top and bottom of the image. <IMG SRC="mypic.jpeg"
Its value is a positive number of pixels. VSPACE="8">

Note:
To insert the image, the image and the webpage must be in the same location (i.e. same folder)
otherwise, you have to provide detailed link.
Setting HEIGHT and WIDTH attributes allow the browser to reserve space for the image on the
webpage.
Example:

<HTML>
<HEAD> <TITLE> Inserting Image </TITLE> </HEAD>
<BODY>
<IMG SRC="computer.jpg" HEIGHT="200" WIDTH="300" border=1>
<! - Comment => some of the options, we use, may not be supported on other browsers. As
most of the servers use "Microsoft Internet Explorer", on "Mozilla Firefox" will work around
this browser.
</BODY>

Working with Table


A table is a two dimensional structure, consisting of rows and columns. In a webpage, a table is
used for the following purposes:

• to make the data easier to interpret, and


• in cases were each cell contains text, graphics and links.
The table in HTML has following five basic tags:

Tag Description
<TABLE> It is the main tag. All other tags are placed within this tag.

<TR> Table Row. It defines a horizontal row or cell. It is used to add rows to the
table.
<TD> Table Data. It specifies the individual block or cell in the table. It is used to add
column to the table.

<TH> Table Header. It defines a table header cell and emphasizes the data in
boldface.
<CAPTION> It specifies the caption (heading/title) to the table. The default position is
centered at the top of the table.

14
HOPE COMPUTER INSTITUTE, Rajbiraj

The attributes supported by the tag <TABLE> are:

Attributes Explanation
ALIGN Specify the alignment of the table. Its value can be LEFT, CENTER, and
RIGHT.
BACKGROUND To insert the image at the background of the table.
BGCOLOR Specify the background color of the table
BORDER Specify the thickness of the border. To specify the table border, specify
BORDER="0".
BORDERCOLOR Specify the color of the table border.
CELLPADDING Specify the distance between the cell and the content.
CELLSPACING Specify the space between cells.
VALIGN Specify the alignment of the content in the cells. Its value can be TOP or
BOTTOM.
WIDTH Specify the minimum width of the table. The values can be in pixels or in
percentage of the window size.
The following attributes can be added to <TR>, <TD> and <TH>

Attributes Explanation
ALIGN Specify the alignment of the cell. Its value can be LEFT, CENTER, and
RIGHT.
BACKGROUND To insert the image at the background of the cell.
BGCOLOR Specify the background color of the cell.
BORDERCOLOR Specify the color of the cell border.
VALIGN Specify the alignment of the content in the cells. Its value can be TOP,
MIDDLE or BOTTOM.
WIDTH Specify the minimum width of the cell. The values can be in pixels or in
percentage of the table width.
HEIGHT Specify the minimum height of the cell. The values can be in pixels or in
percentage of table height.

Note:
1. The table properties are set for the entire table.
2. If a certain property is set for a single cell, it will have higher priority that the setting for the
table as a whole.

15
HOPE COMPUTER INSTITUTE, Rajbiraj

<HTML>
<HEAD><TITLE> Creating Table </TITLE> </HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TH> Column 1 Header </TH> <TH> Column 2 Header </TH>
</TR> .
<TR>
<TD> Row 1 - Col 1 </TD> <TD> Row 1 - Col 2 </TD>
</TR>
<TR>
<TD> Row 2 - Col 1 </TD> <TD> Row 2 - Col 2 </TD>
</TR>
</TABLE>
</BODY>
</HTML>

The attributes supported only by <TD> and <TH>


Attributes
Explanation
COLSPAN Number of columns a cell should span. It specifies how many cell columns of
the table should be merging.
ROWSPAN Number of rows a cell should span. It specifies how many cell rows of the table
should be merging.

<html>
<head> <title> Merging column </title> </head> <body>
<table border="1">
<tr> <td colspan="3"> Telephone numbers </td>
</tr>
<tr>
<td>100</td> <td>101</td> <td>103</td>
</tr>
</table>
</body>
</html>

16
HOPE COMPUTER INSTITUTE, Rajbiraj

<html>
<head> <title> Merging Rows </title> </head>
<table border="1">
<tr>
<td rowspan="3">Telephone numbers </td>
<td>100</td>
</tr>
<tr>
<td>101</td>
</tr>
<tr>
<td>103</td>
</tr>
</table>
</body>
</html>

Working with Forms


A form is a collection of fields that is used for gathering information from people visiting the
website. Site visitors fill out a form by typing text, clicking radio buttons and check boxes, and
selecting options from drop-down menus. After filling out the form, site visitors submit the data
they entered, which can be processed in a variety of ways depending on the form handler set
up. The form element has no formatting attributes.
HTML Form Elements
A form contains special interactive elements that users use to send the input. They are text
inputs, textarea fields, checkboxes, dropdowns, and much more.
For example,
<form>
<label for="name">Name:</label>
<input type="text" name="name"><br><br>
<label for="sex">Sex:</label>
<input type="radio" name="sex" id="male" value="male">
<label for="male">Male</label>
<input type="radio" name="sex" id="female" value="female">
<label for="female">Female</label> <br><br>
<label for="country">Country: </label>
<select name="country" id="country">
<option>Select an option</option>
<option value="nepal">Nepal</option>

17
HOPE COMPUTER INSTITUTE, Rajbiraj

<option value="usa">USA</option>
<option value="australia">Australia</option>
</select><br><br>
<label for="message">Message:</label><br>
<textarea name="message" id="message" cols="30" rows="4"></textarea><br><br>
<input type="checkbox" name="newsletter" id="newsletter">
<label for="newsletter">Subscribe?</label><br><br>
<input type="submit" value="Submit">
</form>

Elements Type <INPUT> ATTRIBUTE ELEMENTS


TYPE Types of input entry field.
NAME Variable name passed to script languages.
The data associated with the variable name to be passed to the script
VALUE
language.
SELECTED Option is selected by default when the document is initially loaded.
CHECKED Button/box checked by default.
SIZE Number of characters in text field or number of rows in list box (select).
MAXLENGHT Maximum number of characters accepted.
URL Location or the source.

The HTML form elements that can be specified as attributes to the <input>tags are:
Elements Type Description Syntax
Text A text field <input name="text1"
type="text" size="25"

18
HOPE COMPUTER INSTITUTE, Rajbiraj

maxlenght="50"
value="Nepal computer">

<input name="pass"
A password test field in which each keystroke
Password type="password" size="12"
appears as an asterisk (*).
maxlenght="10">

A new element that provides a button other


than submits or reset button. It would be used <input name="btn_send"
Button
with either JavaScript or VBScript to cause type="button" value="10">
an action to take place.

<input name="hobby"
Checkbox allows the users to select more
Checkbox type="checkbox"
than one option.
value="football" checked>

Radio buttons allow users to select only one <input name="gender"


Radio option among group. type="radio" value="male"
checked>

This is the element that causes the browser


<input name="btn_submit"
to send the names and values of the other
Submit type="submit"
elements to web server specified by the
value="submit">
ACTION attribute of the FORM elements.

It allows you to substitute and for standard <input name="img_submit"


Image Submit
submit button. type="image" src="url">

It allows the surfer to clear all input in the <input name="btn_reset"


Reset
form elements type="reset" value="reset">

<textarea name="message"
TEXTAREA A multi line text entry field. cols="30"rows="10">default
text</textarea>
<select name="choice"
size="5" multiple> <option
Select (Drop
The two following examples are<select></ value="1" selected>item 1
Down List, List
select> elements, where the attributes are set <option value="2">item 2
box)
differently. <option value="2">item
3</select>

<input name="h_text"
A field that may contain a value but is not
Hidden type="hidden"
displayed within a form.
value="anything">

19
HOPE COMPUTER INSTITUTE, Rajbiraj

Create an HTML Form to Input the Basic Details of a Student for new admission.
<HTML>
<HEAD> <TITLE> Form Elements </TITLE> </HEAD>
<BODY>
<H3> Text Box </H3>
<form>
First name: <input type="text" name="firstname" /><br>
Last name: <input type="text" name="lastname">
</form>
<H3> Text Box for Password </H3>
<form>
Password: <input type="password" name="pwd" />
</form>
<H3> Radio Button </H3>
<form>
<input type="radio" name=" 'sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
<H3> Checkbox </H3>
<form>
<input type="checkbox" name="aubject" value="Computer" />Computer science
<br>
<input type="checkbox" name="subject" value="Hotel Management" />Hotel Management
</form>
<H3> Submit button </H3>
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
<H3> Drop down menu </H3>
<form action="">
<select name="Stream">
<option value=”Science”>Science</option>
<option value=”Management”>Management</option>
<option value=”Humanities”> Humanities </option>
<option value=”Education”> Education </option>

20
HOPE COMPUTER INSTITUTE, Rajbiraj

</select>
</form>
</body>
</html>

21
HOPE COMPUTER INSTITUTE, Rajbiraj

Create an HTML Form to Input the Basic Details of an Employee.


<!DOCTYPE html>
<html lang="en">
<head>
<title>Employee Details</title>
</head>
<body>
<form>
<fieldset>
<legend>Employee Details</legend>
<p>
First name: <input type = "text" name = "fname" />
</p>
<p>
Last name: <input type = "text" name = "lname" />
</p>
<p>
<input type = "radio" name = "Gender" value = "Male"> Male
<input type = "radio" name = "Gender" value = "Female"> Female
</p>
<p>
Employee ID: <input type = "text" name = "ID" />
</p>
<p>
Designation: <input type = "text" name = "ID" />
</p>
<p>
Phone Number: <input type = "text" name = "phone" />
</p>
<p>
<input type = "submit" name = "submit" value = "Submit" />

22
HOPE COMPUTER INSTITUTE, Rajbiraj

</p>
</fieldset>
</form>
</body>
</html>

23
HOPE COMPUTER INSTITUTE, Rajbiraj

Create an HTML Form to Input Student registration detail.

<html>
<body>
<form>
<div class="container">
<Right> <h1> Student Registeration Form</h1> </center>
<hr>
<label> Firstname </label>
<input type="text" name="firstname" placeholder= "Firstname" size="35" required
/><br></br>
<label> Middlename: </label>
<input type="text" name="middlename" placeholder="Middlename" size="15" required
/><br></br>
<label> Lastname: </label>
<input type="text" name="lastname" placeholder="Lastname" size="15"required
/><br></br>
<div>
<label>
Course :
</label>

<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select><br></br>
</div>

24
HOPE COMPUTER INSTITUTE, Rajbiraj

<div>
<label>
Gender :
</label><br>
<input type="radio" value="Male" name="gender" checked > Male
<input type="radio" value="Female" name="gender"> Female
<input type="radio" value="Other" name="gender"> Other
</div><br>
<label>
Phone :
</label>
<input type="text" name="country code" placeholder="Country Code" value="+977"
size="2"/>
<input type="text" name="phone" placeholder="phone no." size="10"/
required><br></br>
Current Address :<br>
<textarea cols="80" rows="5" placeholder="Current Address" value="address" required>
</textarea><br></br>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required> <br></br>

<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw"
required><br></br>

<label for="psw-repeat"><b>Re-type Password</b></label>


<input type="password" placeholder="Retype Password" name="psw-repeat"
required><br></br>
<button type="submit" class="registerbtn">Register</button>
</form>
</body>
</html>
25
HOPE COMPUTER INSTITUTE, Rajbiraj

************* The End *****************

26

You might also like