Unit 2 Notes

HTML Notes
HTML stands for Hyper Text Markup Language. An HTML file is a text file containing
markup tags. The markup tags tell the Web browser how to display the page. An HTML file
must have an ‘htm’ or ‘html’ file extension. An HTML file can be created using a simple text
editor. The rule-making body of the Web is World Wide Web Consortium (W3C). W3C
puts together specifications for Web standards. The most essential Web standards are
HTML, CSS and XML. The latest HTML standard is XHTML 1.0.
Example: Creating a simple web page
1. Start Notepad.
2. Type in the following text
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is a very basic webpage. <b>This text will be displayed in bold</b>
</body>
</html>
3. Save the file as "firstpage.html".

4. Double click the saved file the browser will display the page.
Example Explained:
The first tag in your HTML document is <html>. This tag tells your browser that this is the
start of an HTML document. The last tag in your document is </html>. This tag tells your
browser that this is the end of the HTML document.
The text between the <head> tag and the </head> tag is header information. Header
information is not displayed in the browser window.
The text between the <title> tags is the title of your document. The title is displayed in your
browser's caption.
The text between the <body> tags is the text that will be displayed in your browser.
The text between the <b> and </b> tags will be displayed in a bold font.
1
HTM or HTML Extension?
When you save an HTML file, you can use either the .htm or the .html extension. HTM is a
file extension for HTML (Hypertext Markup Language) file format. The HTML file
extension is sometimes abbreviated as .htm for compatibility with older operating systems,
such as Disk Operating System (DOS), Windows 3.x and OS/2., which support eight
character file names with a three character extension..
HTML Tags
1. HTML tags are used to mark-up HTML elements
2. HTML tags are surrounded by the two characters < and >
3. The surrounding characters are called angle brackets
4. HTML tags normally come in pairs like <b> and </b>
5. The first tag in a pair is the start tag, the second tag is the end tag
6. The text between the start and end tags is the element content
7. HTML tags are not case sensitive, <b> means the same as <B>
Use Lowercase Tags?
We have just said that HTML tags are not case sensitive: <B> means the same as <b>. It is
recommended to always use because
If you want to prepare yourself for the next generations of HTML, you should start
using lowercase tags. The World Wide Web Consortium recommends lowercase tags in
their HTML 4 recommendation, and XHTML (the next generation HTML) demands
lowercase tags.
Tags can have attributes. Attributes can provide additional information about the HTML
elements on your page.
This tag defines the body element of your HTML page: <body>. With an added bgcolor
attribute, you can tell the browser that the background color of your page should be red, like
this: <body bgcolor="red">.
Attributes always come in name/value pairs like this: name="value".
Attributes are always added to the start tag of an HTML element.
Quote Styles, "red" or 'red'?
Attribute values should always be enclosed in quotes. Double style quotes are the most
common, but single style quotes are also allowed. In some rare situations, like when the
attribute value itself contains quotes, it is necessary to use single quotes:
2
Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6>
defines the smallest heading.
<h1>This is a heading</h1>
HTML automatically adds an extra blank line before and after a heading.
Paragraphs
Paragraphs are defined with the <p> tag.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML automatically adds an extra blank line before and after a paragraph.
Line Breaks
The <br> tag is used when you want to end a line, but don't want to start a new paragraph.
The <br> tag forces a line break wherever you place it.
<p>This <br> is a para<br>graph with line breaks</p>
The <br> tag is an empty tag. It has no closing tag.
Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment will be
ignored by the browser. You can use comments to explain your code, which can help you
when you edit the source code at a later date.

Note: that you need an exclamation point after the opening bracket, but not before the closing
bracket.
3
Text Formatting Tags
Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
Character Entities
Some characters have a special meaning in HTML, like the less than sign (<) that defines the
start of an HTML tag. If we want the browser to actually display these characters we must
insert character entities in the HTML source.
A character entity has three parts: an ampersand (&), an entity name or a # and an entity
number, and finally a semicolon (;).
To display a less than sign in an HTML document we must write: < or <
The advantage of using a name instead of a number is that a name is easier to remember. The
disadvantage is that not all browsers support the newest entity names, while the support for
entity numbers is very good in almost all browsers.
Note that the entities are case sensitive.
Non-breaking Space
The most common character entity in HTML is the non-breaking space.
Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML
will remove 9 of them. To add spaces to your text, use the character entity.
4
Most Common Character Entities
Result Description Entity Name Entity Number

non-breaking space
< less than < <
> greater than > >
& ampersand & &
" quotation mark " "
' apostrophe ' (does not work in IE) '
Additional Commonly Used Character Entities
Result Description Entity Name Entity Number

¢ cent ¢ ¢
£ pound £ £
¥ yen ¥ ¥
§ section § §
© copyright © ©
® registered trademark ® ®
× multiplication × ×
÷ division ÷ ÷
The Anchor Tag and the Href Attribute
HTML uses the <a> (anchor) tag to create a link to another document.
An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a
movie, etc.
The syntax of creating an anchor:
<a href="url">Text to be displayed</a>
The <a> tag is used to create an anchor to link, the href attribute is used to address the
document to link to, and the words between the open and close of the anchor tag will be
displayed as a hyperlink.
This anchor defines a link to EEE 111 webpage:
<a href="http://www.google.com">Visit google</a>
5
The line above will look like this in a browser:
Visit google
The Target Attribute
With the target attribute, you can define where the linked document will be opened.
The line below will open the document in a new browser window:
<a href="http://www.google.com" target="_blank"> Visit google</a>
The Anchor Tag and the Name Attribute
The name attribute is used to create a named anchor. When using named anchors we can
create links that can jump directly into a specific section on a page, instead of letting the user
scroll around to find what he/she is looking for.
Below is the syntax of a named anchor:
<a name="label">Text to be displayed</a>
The name attribute is used to create a named anchor. The name of the anchor can be any text
you care to use.
The line below defines a named anchor:
<a href="#down">Bottom of the page</a>
You should notice that a named anchor is not displayed in a special way.
To link directly to the "down" section, add a # sign and the name of the anchor to the end of a
URL, like this:
<a href="http://www.iitmjp.ac.in#down">Jump to down section</a>
A hyperlink to the Useful Tips Section from WITHIN the file "firstpage.html" will look like
this:
<a name="down">Down is here</a>
IMG Tag
6
HTML img tag is used to display image on the web page. HTML img tag is an empty tag that
contains attributes only, closing tags are not used in HTML image element.
<img src="good_morning.jpg" alt="Good Morning Friends"/>
Attributes of img tag
All attributes of HTML image tag are given below.
1) src : It is a necessary attribute that describes the source or path of the image. It instructs
the browser where to look for the image on the server. The location of image may be on the
same directory or another server.
2) alt : The alt attribute defines an alternate text for the image, if it can't be displayed.
3) width : It is an optional attribute which is used to specify the width to display the image.
4) height : It specifies the height of the image.
Marquee Tag
The HTML <marquee> tag is used for scrolling piece of text or image displayed either
horizontally across or vertically down your web site page depending on the settings.
Example:
<marquee>This is basic example of marquee</marquee>
basefont tag
The HTML <basefont> tag is used to specify a base font for the document to use. This base
font is applied to complete document. This tag is depreciated now.
Attribute of basefont are: color, size, face.
Syntax:
<basefont color="red" size="5“ face=“Arial Black”>
Example
<html>
<head>
<basefont color="red" size="5">
</head>
<body>
<p>This is a paragraph.</p>
7
<p>The basefont element is not supported in HTML5. Use CSS instead.</p>
</body>
</html>
Tables
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and
each row is divided into data cells (with the <td> tag). The letters td stands for "table data,"
which is the content of a data cell. A data cell can contain text, images, lists, paragraphs,
forms, horizontal rules, tables, etc.
<table border="1">
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
How it looks in a browser:
row 1, cell 1 row 1, cell 2

Tables and the Border Attribute
If you do not specify a border attribute the table will be displayed without any borders.
Sometimes this can be useful, but most of the time, you want the borders to show.
To display a table with borders, you will have to use the border attribute:
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
Headings in a Table
Headings in a table are defined with the <th> tag.
8
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
Heading Another Heading

Empty Cells in a Table
Table cells with no content are not displayed very well in most browsers.
<table border="1">
<tr>
</tr>
<tr>
<td></td>
</tr>
</table>

row 2, cell 1
Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays
the border).
9
To avoid this, add a non-breaking space ( ) to empty data cells, to make the borders
visible:
<table border="1">
<tr>
</tr>
<tr>
<td> </td>
</tr>
</table>

row 2, cell 1
Table Tags
Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines groups of table columns
<col> Defines the attribute values for one or more columns in a table
<thead> Defines a table head
<tbody> Defines a table body
<tfoot> Defines a table footer
10
Code:
<table border=3>
<tr>
<th colspan=6>IP University Courses</th>
</tr>
<tr>
<th colspan=3>Graduate</th>
<th colspan=3>Post Graduate</th>
</tr>
<tr>
<th>BBA</th>
<th>BCA</th>
<th>B.Tech</th>
<th>MBA</th>
<th>MCA</th>
<th>M.Tech</th>
</tr>
<tr>
<td>240</td>
<td>120</td>
<td>100</td>
<td>200</td>
<td>100</td>
<td>80</td>
</tr>
</table>
HTML supports ordered, unordered and definition lists

Unordered Lists
An unordered list is a list of items. The list items are marked with bullets (typically small
black circles).
11
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Here is how it looks in a browser:
 Coffee
 Milk
Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.
Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
1. Coffee
2. Milk
Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.
Definition Lists
A definition list is not a list of items. This is a list of terms and explanation of the terms.
A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag.
Each definition-list definition starts with the <dd> tag.
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
12
<dd>White cold drink</dd>
</dl>
Coffee
Black hot drink
Milk
White cold drink
Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images,
links, other lists, etc.
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 a definition term
<dd> Defines a definition description
DIV tag
The HTML <div> tag is used to group the large section of HTML elements together.
This is the very important block level tag which plays a big role in grouping various other
HTML tags and applying CSS on group of elements. Even now <div> tag can be used to
create webpage layout where we define different parts ( Left, Right, Top etc) of the page
using <div> tag.
Adding sound file in HTML Page
 Before HTML5, audio files could only be played in a browser with a plug-in (like
flash).
 The HTML5 <audio> element specifies a standard way to embed audio in a web page.
 The controls attribute adds audio controls, like play, pause, and volume.
 The <source> element allows you to specify alternative audio files which the browser
may choose from. The browser will use the first recognized format.
Example:
13
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
HTML frames
 HTML frames are used to divide your browser window into multiple sections where
each section can load a separate HTML document.
 A collection of frames in the browser window is known as a frameset.
 The window is divided into frames in a similar way the tables are organized: into
rows and columns.
Creating Frames using <frameset>
 The <frameset> tag defines a frameset.

 The <frameset> element holds one or more <frame>elements.
 Each <frame> element can hold a separate document.
 To use frames on a page we use <frameset> tag instead of <body> tag.
 The <frameset> tag defines how to divide the window into frames.
 The rows attribute of <frameset> tag defines horizontal frames and cols attribute
defines vertical frames.
Frame Tag
frame is indicated by <frame>tag and it defines which HTML document shall open into

the frame.
<iframe> Tag
The <iframe> tag defines a rectangular region within the document in which the browser can
display a separate document, including scrollbars and borders. The src attribute is used to
specify the URL of the document that occupies the inline frame.
<noframe> tag
NOFRAMES element to provide alternate content for user agents that do not support frames
or are configured not to display frames.
Example
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows="10%,80%,10%">
14
<frame name="top" src="top_frame.htm" />
<frame name="main" src="main_frame.htm" />
<frame name="bottom" src="bottom_frame.htm" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>
Attributes of frame tag
 Src= indicate the URL of the document to be loaded into the frame.
 Name= Gives the frame a unique name.
 Scrolling= controls the appearance of horizontal and vertical scrollbars in a frame.
This takes the value yes/no/auto.
 noresize= By default you can resize any frame by clicking and dragging on the
borders of a frame. The noresize attribute prevents a user from being able to resize the
frame. For example noresize="noresize".
 frameborder=This attribute provides the user agent with information about the frame
border.
 Possible values:
 1: This value tells the user agent to draw a separator between this frame and every
adjoining frame. This is the default value.
 0: This value tells the user agent not to draw a separator between this frame and every
adjoining frame.
HTML forms
An HTML form is a section of a document which contains controls such as text fields,

password fields, checkboxes, radio buttons, submit button, menus etc.
An HTML form facilitates the user to enter data that is to be sent to the server for processing.
The HTML <form> tag is used to create an HTML form and it has following syntax:
<form action="Script URL" method="GET|POST">

form elements like input, textarea etc.
</form>
15
Form Attributes
There are two attributes within the opening < form > tag:
1. action tells the Web browser where to send the form data when the user fills out and
submits the form. This should either be an absolute URL (such as
http://www.example.com/myscript.php ) or a relative URL (such as myscript.php ,
/myscript.php , or ../scripts/myscript.php.
2. method tells the browser how to send the form data captured by various form
elements. You can use two methods:
GET: GET method sends the data captured by form elements to the web server
encoded into a URL, which points to a web server. GET is useful for sending small
amounts of data (1024 bytes) and makes it easy for the user to resubmit the form.
GET requests remain in the browser history
POST: POST method send the data enclosed in the body of the request message.
POST method can send much larger amounts of form data. POST requests do not
remain in the browser history
Forms Elements
text input & password
 A text input field –– This allows the user to enter a single line of text. You can
optionally prefill the field with an initial value using the value attribute.
<input type=”text” name=”textField” id=”textField” value=” ”>
 A password field — This works like a text input field, except that the entered text is
not displayed. This is, of course, intended for entering sensitive information such as
passwords. Again, you can prefill the field using the value attribute.
<input type=”password” name=”pass” id=”pass” value=””>
Checkbox
A checkbox field — This is a simple toggle; it can be either on or off. The value attribute
should contain the value that will be sent to the server when the checkbox is selected.
<input type=”checkbox” name=”checkboxField” id=”checkboxField value=”yes”>
Radio button
 All buttons in a group have the same name attribute. Only one button can be selected
per group.
 As with checkboxes, use the value attribute to store the value that is sent to the server
if the button is selected.
 <input type=”radio” name=”radioButtonField” id=”radioButtonField1”
value=”radio1”>
Submit button
 A submit button — Clicking this type of button sends the filled-in form to the server-
side script for processing. The value attribute stores the text label that is displayed
inside the button (this value is also sent to the server when the button is clicked)
16
 <input type=”submit” name=”submitButton” id=”submitButton”
value=”Submit Form”>
reset button
 A reset button — This type of button resets all form fields back to their initial values
(often empty). The value attribute contains the button label text:
 <input type=”reset” name=”resetButton” id=”resetButton” value=”Reset
Form”>
pull-down menu
A pull-down menu — This allows a user to pick a single item from a predefined list
of options.
 The size attribute’s value of 1 tells the browser that you want the list to be in a pull-
down menu format. Within the select element, you create an option element for each
of your options.
 Place the option label between the <option> ... </option> tags. Each option element
can have an optional value attribute, which is the value sent to the server if that option
is selected.
<select name=”pullDownMenu” id=”pullDownMenu” size=”1”>
<option value=”option1”>Option 1</option>
</select>
list box
 This works just like a pull-down menu, except that it displays several options at once.
To turn a pull-down menu into a list box, change the size attribute from 1 to the
number of options to display at once:
<select name=”listBox” id=”listBox” size=”3”>
</select>
multi-select list box
 This works like a list box, but it also allows the user to select multiple items at once
by holding down Ctrl (on Windows and Linux browsers) or Command (on Mac
browsers). To turn a normal list box into a multi-select box, add the attribute multiple
(with a value of “multiple“) to the select element.
<select name=”multiListBox” id=”multiListBox” size=”3” multiple=”multiple”>
17
</select>
text area
 This is similar to a text input field, but it allows the user to enter multiple lines of text.
Unlike most other controls, you specify an initial value (if any) by placing the text
between the <textarea> ... </textarea> tags, rather than in a value attribute. A textarea
element must include attributes for the height of the control in rows (rows) and the
width of the control in columns (cols):
 <textarea name=”textAreaField” id=”textAreaField” rows=”4”
cols=”50”></textarea>
Example of HTML form
<html>
<body>
<form action="valid.jsp">
Enter name:<input type="text" name="name" value="">
Enter password:<input type="password" name="password">
Enter Email:<input type="email" name="email" value="">
Enter Gender:
<input type="radio" name="gender" id="male" value="male">male
<input type="radio" name="gender" id="female" value="female">female
Select Country:
<select name="country" id="register_country">
<option value="india">india</option>
<option value="pakistan">pakistan</option>
<option value="africa">africa</option>
<option value="china">china</option>
<option value="other">other</option>
</select>
<input type="submit"value="register">
</form>
</body>
</html>
output
18
19

Unit 2 Notes

Uploaded by

Copyright:

Available Formats

You might also like

Unit 2 Notes

Uploaded by

Document Information

Original Title

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

Unit 2 Notes

Uploaded by

Copyright:

Available Formats

HTML Notes

Example: Creating a simple web page

3. Save the file as "firstpage.html".

Use Lowercase Tags?

Attributes always come in name/value pairs like this: name="value".

Attributes are always added to the start tag of an HTML element.

Quote Styles, "red" or 'red'?

Paragraphs are defined with the <p> tag.

<p>This is another paragraph</p>

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

The <br> tag is an empty tag. It has no closing tag.

Note that the entities are case sensitive.

Result Description Entity Name Entity Number

Additional Commonly Used Character Entities

Result Description Entity Name Entity Number

The Anchor Tag and the Href Attribute

The syntax of creating an anchor:

<a href="url">Text to be displayed</a>

This anchor defines a link to EEE 111 webpage:

<a href="http://www.google.com">Visit google</a>

The Target Attribute

<a href="http://www.google.com" target="_blank"> Visit google</a>

The Anchor Tag and the Name Attribute

Below is the syntax of a named anchor:

<a name="label">Text to be displayed</a>

The line below defines a named anchor:

<a href="#down">Bottom of the page</a>

<a href="http://www.iitmjp.ac.in#down">Jump to down section</a>

<a name="down">Down is here</a>

Attributes of img tag

All attributes of HTML image tag are given below.

4) height : It specifies the height of the image.

<marquee>This is basic example of marquee</marquee>

How it looks in a browser:

row 1, cell 1 row 1, cell 2

Tables and the Border Attribute

Headings in a table are defined with the <th> tag.

How it looks in a browser:

Heading Another Heading

Empty Cells in a Table

How it looks in a browser:

row 1, cell 1 row 1, cell 2

How it looks in a browser:

row 1, cell 1 row 1, cell 2

HTML supports ordered, unordered and definition lists

Here is how it looks in a browser:

Here is how it looks in a browser:

Here is how it looks in a browser:

Adding sound file in HTML Page

Creating Frames using <frameset>

 The <frameset> tag defines a frameset.

frame is indicated by <frame>tag and it defines which HTML document shall open into

Attributes of frame tag

An HTML form is a section of a document which contains controls such as text fields,

<form action="Script URL" method="GET|POST">

text input & password

multi-select list box