Scribd
Upload
17K views

0 - HTML Notes For BCA

HTML stands for Hypertext Markup Language and is used to create web pages. HTML documents use tags to structure and present content on web pages. The main parts of an HTML document are the head and body. The head contains metadata and the body contains the visible page content. HTML allows adding links, images, lists, tables and other elements to web pages.

Uploaded by

vandv prints
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
17K views

0 - HTML Notes For BCA

HTML stands for Hypertext Markup Language and is used to create web pages. HTML documents use tags to structure and present content on web pages. The main parts of an HTML document are the head and body. The head contains metadata and the body contains the visible page content. HTML allows adding links, images, lists, tables and other elements to web pages.

Uploaded by

vandv prints
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 22

HTML

HTML stands for Hyper Text Markup Language. It is the language of the Web. It is used to
create web pages which can be viewed using a web browser. It consists of set of tags which
describe the content of a web page. HTML documents are also called web pages.

HyperText is the method by which you move around on the web, it is not linear that is you can
go to any place on the Internet whenever you want by clicking on links — there is no set order to
do things in.
Markup specifies what HTML tags do to the text inside them. They mark it as a certain type of
text (italicised text, for example).
HTML consists of a series of short codes typed into a text-file by the site author — these are the
tags. The text is then saved as a html file, and viewed through a browser, like Internet
Explorer or Netscape Navigator. This browser reads the file and translates the text into a visible
form

HTML Tags
 HTML tags are keywords (tag names) surrounded by angle brackets like <html>
 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag, the second tag is the end tag
 The end tag is written like the start tag, with a forward slash before the tag name
 Start and end tags are also called opening tags and closing tags

Structure of an HTML document

An HTML document consists of two main parts i) The Head ii) The body.

Head:- Head is the first part of the HTML document. It consists of Title page and other
parameters that the browser will use

Body:- This part describes the actual content of a web page. It includes the text and the tags. The
textual part gives information contained in a web page and the tag defines the appearance of the
document.

Eg:
<html>

<head>

<title> Introduction to HTML </title>

</head>

<body bgcolor = “Ivory” text = “Darkblue”

Leftmarging = “80” topmargin= “80”

<b> My first HTML document </b>

</body>

</html>

Some of the Attributes in <body> tags are

1. bgcolor:- This tag sets the background color of the document. Here either color
name or hexadecimal value of that color can be specified like

<body bgcolor = “Ivory”

</body>

<body bgcolor = “#FFFFO”

</body>

2. bgproperty:- Indicates the behavior of the background image

<body bgproperty = “fixed”

</body>

indicates that background image is fixed when the document is scrolled

3. background:- Specifies the path of an image file to displayed as a background of the


document

<body bgcolor = “mysorepalace.jgg”

</body>

4. topmargin:- Sets the top margin for a page in pixels

<body leftmargin = “80”


Topmargin=”80”

</body>

5. text:- specifies the color of the normal text in the document. Here also either the
color name or hexadecimal values can be specified

<body text = “darkred”

</body>

Heading element: Heading elements are used to create headlines in document. The tags <h1>
to <h6> define different levels of heading of a page. There are six levels of heading <h1> is used
for the largest and <h6> for the smallest. Its general syntax

<h1> Maharani’s Science College for Women </h1>

<h2> Department of Computer Science </h2>

<h3> UGC ADD ON COURE </h3>

<h4> CERTIFICATE LEVEL </h4>

<h5> Web Page Creation Using HTML Tags </h5>

<h6> Creating web page is challenging and interesting </h6>

Paragraph element:- One of the important elements used in HTML is the paragraph element.
Paragraph can be created by using <p> tag which begins a paragraph and ends with </p>. The
text within <p> and </p> can be aligned left, right, center or justify by using the align attribute.

<p>This is some text in a paragraph.</p>

Output

This is some text in a paragraph

<p>This is<br>a para<br>graph with line breaks</p>


This is
a para
graph with line breaks

Text formatting tags in HTML

HTML Text Formatting Tags

Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text 
<i> Defines a part of text in an alternate voice or mood
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text

Example

<!DOCTYPE html>
<html>
<body>

<p><b>This text is bold</b></p>


<p><strong>This text is strong</strong></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>

Output

This text is bold

This text is strong

This text is italic


This text is emphasized
This is computer output

This is subscript and superscript

HTML LISTS

The most common HTML lists are ordered , unordered lists and definition list:

HTML Unordered Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items
are marked with bullets (typically small black circles). To render a list with a different bullet
type, add a type attribute to the unordered list element.

Example-1

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

How the HTML code above looks in a browser:

 Coffee
 Milk

Example-2

<ul type = “square”>


<li>Coffee</li>
<li>Milk</li>
</ul>

 Cofee
 Milk

Example-3

<ul type = “circle”>


<li>Coffee</li>
<li>Milk</li>
</ul>

o Coffee
o Milk

HTML Ordered Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. list items placed
inside of an ordered list are preceded with numbers instead of bullets.

The list items are marked with numbers.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

How the HTML code above looks in a browser:

1. Coffee
2. Milk

Example-2
<ol type="a">
<li>Coffee</li>
<li>Milk</li>
</ol>

a. Coffee
b. Milk

Example-3
<ol type="A">
<li>Coffee</li>
<li>Milk</li>
</ol>

A. Hindi
B. English

Example-4
<ol type="i">
<li>Coffee</li>
<li>Milk</li>
</ol>

i Hindi

ii English

Example-5
<ol type="I">
<li>Coffee</li>
<li>Milk</li>
</ol>

I Hindi
II English

HTML Definition Lists

A definition list is a list of items, with a description of each item. The <dl> tag defines a
definition list. The <dl> tag is used in conjunction with <dt> (defines the item in the list) and
<dd> (describes the item in the list):

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

How the HTML code above looks in a browser:

Coffee
- black hot drink
Milk
- white cold drink

Complete list of HTML List Tags


Tag Description
<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list item
<dl> Defines a definition list
<dt> Defines an item in a definition list
<dd> Defines a description of an item in a definition list

The HTML <div> Element

The HTML <div> element is a block level element that can be used as a container for grouping
other HTML elements.  The <div> element has no special meaning. Except that, because it is a
block level element, the browser will display a line break before and after it. When used together
with CSS, the <div> element can be used to set style attributes to large blocks of content.

HTML Hyperlinks (Links)

Image links are constructed by embedding an <img> tag inside of an anchor element <a>. Like
HTML text links, image links require opening and closing anchor tags, but instead of placing
text between these opening and closing tags, the developer needs to place an image tag -- with a
valid source attribute value of course.The HTML <a> tag defines a hyperlink. A hyperlink (or
link) is a word, group of words, or image that you can click on to jump to another document.
When you move the cursor over a link in a Web page, the arrow will turn into a little hand. The
most important attribute of the <a> element is the href attribute, which indicates the link’s
destination.

By default, links will appear as follows in all browsers:

 An unvisited link is underlined and blue


 A visited link is underlined and purple
 An active link is underlined and red

HTML Link Syntax

The HTML code for a link is simple. It looks like this:

<a href="url">Link text</a>


The href attribute specifies the destination of a link. url is the address of the image. Link text is
the label for the link.

Example
<a href="http://www.w3schools.com/">Visit W3Schools</a>

which will display like this: Visit W3Schools

Clicking on this hyperlink will send the user to W3Schools' homepage.

Tip: The "Link text" doesn't have to be text. It can be an image or any other HTML element.

HTML Links - The target Attribute

The target attribute specifies where to open the linked document.

The example below will open the linked document in a new browser window or a new tab:

Example
<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

HTML Links - The id Attribute

The id attribute can be used to create a bookmark inside an HTML document.

Tip: Bookmarks are not displayed in any special way. They are invisible to the reader.

Example

An anchor with an id inside an HTML document:

<a id="tips">Useful Tips Section</a>

HTML Tables

An HTML table is an element comprised of table rows and columns, much like you'd see when
working with an application such as Excel. Tables are container elements, and their sole purpose
is to house other HTML elements and arrange them in a tabular fashion -- row by row, column
by column. A table element consists of three different HTML tags including the <table> tag,
<tr> (table rows), and the <td> (table columns) tags.

HTML Table Code:


<table border="1">
<tr>
<td>Combination</td>
<td>Number of students</td>
</tr>
<tr>
<td>PMCs</td>
<td>83</td>
</tr>
</table>

Output
Combination Number of students
PMCs 83

A table can contain an infinite number of table rows. Each table row is essentially a table
element itself, with an opening and closing tag (<tr> </tr>). Table columns are also considered
child elements of HTML tables, and like table rows, an HTML table may contain an infinite
number of table data cells (<td> <tr>).

Table rows and columns are container elements that house other HTML elements such as text
links, images, and lists.

Examples on Table

A simple HTML table, containing two columns and two rows:

<!DOCTYPE html>

<html>

<body>

<table border="1">
<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

<td>$100</td>

</tr>

<tr>

<td>February</td>

<td>$80</td>

</tr>

</table>

</body>

</html>

Month Savings
January $100
February $80

Table Cellpadding and Cellspacing:

There are two attribiutes called cellpadding and cellspacing which you will use to adjust the
white space in your table cell. Cellspacing defines the width of the border, while cellpadding
represents the distance between cell borders and the content within. Following is the example:

<table border="1" cellpadding="5" cellspacing="5">


<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>

This will produce following result:

Name Salary

Ramesh Raman 5000

Shabbir Hussein 7000

Colspan and Rowspan Attributes:

You will use colspan attribute if you want to merge two or more columns into a single column.
Similar way you will use rowspan if you want to merge two or more rows. Following is the
example:

<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>

This will produce following result:


Column 1 Column 2 Column 3
Row 1 Cell 2 Row 1 Cell 3
Row 1 Cell 1
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1

Tables Backgrounds

You can set table background using of the following two ways:

 Using bgcolor attribute - You can set background color for whole table or just for one
cell.
 Using background attribute - You can set background image for whole table or just for
one cell.

Here is an example of using bgcolor attribute:

<table border="5" bordercolor="green" bgcolor="gray">


<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td>
<td bgcolor="red">Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>

This will produce following result:

Column 1 Column 2 Column 3


Row 1 Cell 2 Row 1 Cell 3
Row 1 Cell 1
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1

Here is an example of using background attribute:

<table border="1" background="/images/home.gif">


<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td>
<td bgcolor="red">Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3" background="/images/pattern1.gif">
Row 3 Cell 1
</td></tr>
</table>

This will produce following result:

Column 1 Column 2 Column 3


Row 1 Cell 2 Row 1 Cell 3
Row 1 Cell 1
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1

Table height and width:

You can set a table width and height using width and height attrubutes. You can specify table
width or height in terms of integer value or in terms of percentage of available screen area.
Following is the example:

<table border="1" width="400" height="150">


<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

This will produce following result:

Row 1, Column 1 Row 1, Column 2


Row 2, Column 1 Row 2, Column 2

Using a Header, Body, and Footer:

Tables can be divided into three portions: a header, a body, and a foot. The head and foot are
rather similar to headers and footers in a word-processed document that remain the same for
every page, while the body is the main content of the table.

The three elements for separating the head, body, and foot of a table are:

 <thead> - to create a separate table header.


 <tbody> - to indicate the main body of the table.

 <tfoot> - to create a separate table footer.

Forms in HTML

HTML Forms are required when you want to collect some data from the site visitor. For example
registration information: name, email address, credit card, etc.

A form will take input from the site visitor and then will post your back-end application such as
CGI, ASP Script or PHP script etc. Then your back-end application will do required processing
on that data in whatever way you like.

Form elements are like text fields, textarea fields, drop-down menus, radio buttons, checkboxes,
etc. which are used to take information from the user.

A simple syntax of using <form> is as follows:

<form action="back-end script" method="posting method">


form elements like input, textarea etc.
</form>

Most frequently used form attributes are:

 name: This is the name of the form.


 action: Here you will specify any script URL which will receive uploaded data.

 method: Here you will specify method to be used to upload data. It can take various
values but most frequently used are GET and POST.
 target: It specifies the target page where the result of the script will be displayed. It takes
values like _blank, _self, _parent etc.

 enctype: You can use the enctype attribute to specify how the browser encodes the data
before it sends it to the server.

HTML Forms and Input

HTML Forms are used to select different kinds of user input. HTML forms are used to pass data
to a server. An HTML form can contain input elements like text fields, checkboxes, radio-
buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend,
and label elements.

The <form> tag is used to create an HTML form:

HTML Forms - The Input Element

The most important form element is the <input> element. The <input> element is used to select
user information. An <input> element can vary in many ways, depending on the type attribute.
An <input> element can be of type text field, checkbox, password, radio button, submit button,
and more. The most common input types are described below.

Text Fields

<input type="text"> defines a one-line input field that a user can enter text into:

Example

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

How the HTML code above looks in a browser:

First name:
Last name:
Password Field

<input type="password"> defines a password field:


<form>
Password: <input type="password" name="pwd">
</form>

How the HTML code above looks in a browser:

Password:

Note: The characters in a password field are masked (shown as asterisks or circles). 

Radio Buttons

<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a
limited number of choices:

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

How the HTML code above looks in a browser:

Male
Female

Checkboxes

<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE
options of a limited number of choices.

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

How the HTML code above looks in a browser:

I have a bike
I have a car

Submit Button

<input type="submit"> defines a submit button.


A submit button is used to send form data to a server. The data is sent to the page specified in the
form's action attribute. The file defined in the action attribute usually does something with the
received input:

<form name="input" action="html_form_action.asp" method="get">


Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

How the HTML code above looks in a browser:

Username:

If you type some characters in the text field above, and click the "Submit" button, the browser
will send your input to a page called "html_form_action.asp". The page will show you the
received input.

List of form tags in html

HTML Form Tags


Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
<datalist> Specifies a list of pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation

Simple HTML examples

1. HTML document to print different headings


<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>

Output

This is heading 1
This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

2. HTML document to illustrate text formatting tags

<!DOCTYPE html>

<html>

<body>

<p><b>This text is bold</b></p>

<p><strong>This text is strong</strong></p>

<p><em>This text is emphasized</em></p>

<p><i>This text is italic</i></p>

<p><small>This text is small</small></p>


<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>

</html>

Output

This text is bold

This text is strong

This text is emphasized

This text is italic

This text is small

This is subscript and superscript

3. Create a HTML page to insert a image

<!DOCTYPE html>

<html>

<body>

<p>

An image:

<img src="smiley.gif" alt="Smiley face" width="32" height="32"></p>

<p>

A moving image:

<img src="hackanm.gif" alt="Computer man" width="48" height="48"></p>

<p>

Note that the syntax of inserting a moving image is no different from a non-moving image.

</p>
</body>

</html>

Output

An image:

A moving image:

Note that the syntax of inserting a moving image is no different from a non-moving image.

4. HTML document to illustrate different types of lists

<!DOCTYPE html>
<html>
<body>

<h4>An Ordered List:</h4>


<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<h4>An Unordered List:</h4>


<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<h4>A Definition List:</h4>


<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

</body>
</html>
Output

An Ordered List:

1. Coffee
2. Tea
3. Milk

An Unordered List:

 Coffee
 Tea
 Milk

A Definition List:

Coffee
- black hot drink
Milk
- white cold drink

You might also like