Unit2 - Short

HTML
• HyperText Markup Language (HTML) is the main markup

language for web pages. HTML elements are the basic building-
blocks of web pages.
• HTML is written in the form of HTML elements consisting of tags,

enclosed in angle brackets (like <html>), within the web page
content. HTML tags most commonly come in pairs like <h1> and
</h1>.
• The first tag in a pair is the start tag, the second tag is the end tag
(they are also called opening tags and closing tags). In between
these tags web designers can add text, tags, comments and other
types of text-based content.
• When you save an HTML file, you can use either the .htm or the
.html file extension. There is no difference. 1
Tags
HTML markup tags are usually called HTML tags.
HTML tags are keywords 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
Start and end tags are also called opening tags and closing tags
2
Container Tags
• Container tags are those tags that have both opening and closing tags.
• Container tags enclose elements like text, images, and videos.
• The content that we write inside a container tag gets displayed on the
browser.
• The opening and closing tags are also known as On and Off tags.
• For example, the strong tag has both opening and closing tags around the
text: <strong>Hello World</strong>. The content written inside the strong tag,
i.e., "Hello World", will become bold and will be displayed in the browser.
Syntax
<opening_tag> ... </closing_tag>
Empty Tags
• Empty tags are those tags that do not have any closing tags.
• Empty tags only have the opening tag.
• In other words, these tags are self-closing. These tags do not have any text or
embedded elements.
• However, they are used to perform specific actions like inserting line breaks or
adding metadata to the web page.
• For example: <hr> tag, <br> tag
Attributes
• Attributes are used to modify the value of the HTML element.
• HTML elements can have attributes.
• Attributes provide additional information about an element.
Attributes are always specified in the start tag.
• Attributes come in name/value pairs like: name="value"
4
Example
<HTML>
<HEAD>
<TITLE>WEB PAGE DESIGN - INTRODUCTION</TITLE>
</HEAD>
<BODY>
This is my first attempt at a Web page.
</BODY>
</HTML>
5
<HTML> and </HTML> tags
• The first line in the coding reads <HTML>. It
tells the browser that what follows is an HTML
document. It is called the opening HTML tag.
• The last line in our coding reads </HTML>. It

tells the browser that the HTML document is
finished. It is called the closing HTML tag.
• These opening and closing HTML tags make up

the HTML element of our web page.
6
<HEAD> and </HEAD> tags
• Each web page must have the HEAD element.
Statements (or tags) that give information to a
person visiting your website, or information
such as those needed for a Search Engine are
placed between the
<HEAD> and </HEAD> tags.
• The HEAD tag must not contain any text or

normal markup tags. If it does, the browser
will assume that it is in the BODY part of the
document.
7
<TITLE> and </TITLE> tags
• One of the statements that must be included between the <HEAD>
and </HEAD> tags is the TITLE of your web page. Notice that this
title is placed by the browser at the very top of the screen - above
the menu choices.
• The TITLE of your web page must occur between the <TITLE> and
</TITLE> tags and you are only allowed one TITLE element per
page.
• The information you provide in the title is also used to label the
bookmark entry for your web page. That is, when a visitor
bookmarks your site (adds it to their favorites list), it is the title that
appears in the list.
• Most search engines also use the title in search engine results.
Therefore you should take time to make up a good descriptive title
for each of your web pages.
8
<BODY> and </BODY> tags
• It contains all the text and tags. It is the part
that will be displayed on the browser screen.
Thus the BODY element contains the actual
contents of the document.
• The tags only tell the browser how to display
the information. The body of each of your
Web pages is declared through the BODY
element.
9
Text Formatting Tags
HTML <b> and <strong> Tags
• In HTML, <b> tag and <strong> tag display the text in bold front.
• Example
<b>This text is bold</b>
<strong>This text is important!</strong>
HTML <i> and <em> Elements

• The content inside is typically displayed in italic.
HTML <sub> Element

• The HTML <sub> element defines subscript text. Subscript text appears half a
character below the normal line, and is sometimes rendered in a smaller font.
Subscript text can be used for chemical formulas, like H2O.
HTML <sup> Element

• The HTML <sup> element defines superscript text. Superscript text appears
half a character above the normal line, and is sometimes rendered in a smaller
font. Superscript text can be used for footnotes, like WWW[1]
10
<body>
<b>this text is bold</b><br>
<i>this text is in italics</i><br>
<u>this text is underlined</u><br>
a<sup>2</sup><br>
a<sub>2</sub><br>
<strong>this text is
strong</strong><br>
<em>this text is
emphasised</em><br
>
</body>
11
HTML Headings
• Page headings are created with the <hn> tag, in which n is a
number between 1 and 6.
• Headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important heading. <h6> defines the least
important heading.
• Heading tags make it easy to make global changes to
headings. Eg.
<h1> This is heading 1</h1>
<h2>This is heading 2</h2>
• Heading tag has align attribute.

Eg. <H1 align=”right”>This is heading <H1>
12
<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>
13
HTML Lines(hr tag)
• The <hr> tag creates a horizontal line in an HTML page.
Here, hr stands for horizontal rule.
• It has some attributes like:

<hr size=10 width=10 color=”red” noshade
align=left/right/center>
• Size: specifies the broadness of the line
• Width: specifies the length of the line
• Color: specifies color of the line
• Noshade: specifies whether to shade the line or not.
If noshade is written the line turns to black otherwise it is
of white color.
• Align: to place the line on particular side
14
<body>
this is line 1<br>
<hr>
this is line 2<br>
<hr size=20 width=400 color=”green” noshade align=right>
this is line 3<br>
<hr size=30 width=600 color=”blue” noshade align=center>
</body>
15
<br> Tag
• <BR> tells your browser to go to the beginning of the next line. BR
stands for line BReak. <BR> acts in the same way as the ENTER key
on your keyboard.
• With <BR>, the browser is also told to go to the beginning of the
next line.
16
<html>
<body>
first line<br>second line<br>third line
</body>
</html>
17
<P> Tag
• <P> for Paragraph tells your browser to insert a blank

or empty line and then begin a new line (a new
paragraph).
• How <p> is different from <br>

<br> tells the browser when a line ha s ended while <p>
tells thebrowser to leave a blank line and begin a new
paragraph.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
18
•
Example
This tag has one attribute : align with values: left, right,
center.
Example:
<body>
<p align=left>this paragraph is left aligned</p>
<p align=center>this paragraph is center aligned</p>
<p align=right>this paragraph is right aligned</p>
</body>
19
Font Tag
The <font> tag specifies the font face, font size, and font color of
text.
Attribute Description
Size Specifies the font size.
Color Specifies the font color.
Face Specifies the font face.
20
• Example
<p>
<font size=5 face="arial" color=red>
This paragraph is in Arial, size 5, and in red text color.
</font>
</p>
21
<body>
<font face="comic sans MS" size=5 color=red>This is first font
style</font><br><br>
<font face=“arial black" size=7 color=green>This is second font
style</font><br><br>
<font face=“century" size=4 color=blue>This is third font
style</font>
</body>
22
Basefont Tag
• Basefont tag specifies the common font style, size and
color of the text written on the web page.
• It acts as default font for the content i.e. if no font tag is
specified the specifications of basefont will be applicable.
• Bu t where font tag is specified, the specifications of font tag
will overwrite the specification of basefont tag.
• If anyone want some specific line or paragraph of different
font style then font tag can be used for that particular text.
• This tag is specified in <HEAD></HEAD> tag.
23
<head>
<title>abcde</title>
<basefont size=7 color=red face="arial black">
</head>
<body>
<p>
this paragraph will follow the base font
</p>
<p>
<font face="comic sans MS" size=5 color=green>This will
follow the font tag</font><br><br>
</p>
</body>
24
25
Background color and
Background Image
• Background color and background image are attributes of body
tag.
• bgcolor attribute is used to give background color to web page
and background attribute is used to insert any image as the
background of the web page.
• If both bgcolor and background are specified then background
will be visible.
• <html>
<body background="bgimage.jpg" bgcolor="red">
<h1>Hello world!</h1>
</body>
</html>
• For different shades of background use R G B . i.e. _ _ _ _ _ _ .

Fill these six positions by any value between 0 and 9 and
between A and F.
E .g. <body bgcolor=00AF52>
26
<body bgcolor="pink">
Background color of this page is pink.
</body>
27
<body background="C:\Documents and Settings\All
Users\Documents\My Pictures\Sample Pictures\Water
lilies.jpg">
<font color="red">
<h1 align=center>This page is displaying background
image</h1>
</font>
</body>
28
29
<pre> Preformatting Tag
• A web browser interprets your html document as being one

long line. Sure, you may have tabs and line breaks in
notepad aligning your content so it is easier to read for you.
Browser ignores those tabs and line breaks.
• Use the <pre> tag for any special circumstances where you
wish to have the text appear exactly as it is typed. Spaces,
tabs, and line breaks that exist in your actual code will be
preserved with the pre tag.
30
<body>
<font face="arial black" color="blue" size=2>
Text with out pre tag: <br><br>
1
2 2
3 3 3
<br><br>
The time has come to
change the world
<br><br>
Produ ct price
Book 250
Shoes 700
Bag 500
</font>
31
<pre>
<font face="arial black" color=red size=2>
Text with pre tag: <br><br>
1
2 2
3 3 3
<br><br>
The time ha s come
to
change
Product pricethe
Book 250 world
<br><br>
Shoes 700
Bag 500
</font>
</pre>
</body> 40
33
Comment Tag
• The comment tag is used to insert comments in the source

code.
• Comments are not displayed in the browsers. You can use
comments to explain your code, which can help you when
you edit the source code at a later date.
• This is especially useful if you have a lot of code. It is also a
good practice to use the comment tag
• It ha s a beginning tag .

34
<body>


The syllabus of my subject is composed of four units


</body>
35
36
• Inserted Text
Anything that appears within <ins>...</ins>
element is displayed as inserted text.
• Deleted Text
Anything that appears within <del>...</del>
element, is displayed as deleted text.
37
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text
Example</title>
</head>
<body>
<p>I want to drink
<del>coke</del>
<ins>pepsi</ins>
</p>
</body>
</html>
38
• Marked Text
• Anything that appears with-in
<mark>...</mark> element, is displayed as
marked with yellow ink.
39
<html>
<body>
<p>Do not forget to buy

<mark>milk</mark>
today.</p>
<p><strong>Note:</
strong> The mark tag is
not supported in
Internet Explorer 8 and
earlier versions.</p>
</body>
</html>
40
HTML Lists
41
Introduction
• Lists are used to group related pieces of
information together, so they are clearly
associated with each other and easy to read.
• It is good from structural point of view as they
help create a well-structured, more
accessible, easy-to-maintain document.
• For mentioning a list of items, HTML offers
several mechanisms for specifying lists of
information.
42
Type
s
There are 4 types of Lists:
• Unordered
• Ordered
• Definition
• Directory
43
Unordered Lists
• An unordered list displays the list elements

with the help of bullets, there is no assorted
order.
• An unordered list starts with the <UL> and
end with </UL>.
• Each list item starts with the <LI> and ends
with </LI>.
44
• Eg.
<body>
<ul>
<li>Coffee</li>
<li>Cold Drink</li>
</ul>
</body>
Output:
• Coffee
• Cold drink
45
Attributes
:
Type:
• <UL
type=”circle/square/disc”>
Circle
Square
Disc
The
default 46
INPUT OUTPUT
<html>
<body>
<h2>Unordered List with Square

Bullets</h2>
<ul type="square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
47
Ordered Lists
• An ordered list displays the list elements with

the help of numberings and the elements
are ranked in some sequence.
• An ordered list starts with the <OL> and end
with </OL>.
• Each list item starts with the <LI> and ends
with </LI>.
48
Eg.
<html>
<body>
<ol>
<li>Coffee</li>
<li>Cold drink</li>
</ol>
</body>
</html>
OUTPUT
1. Coffee
2. Cold drink
49
Typ
e
• <OL Type="I"|"A"|"1"|"a"|"i">: designates the
appearance of the numbers preceding the items in the
list, where
"I" causes the items to be numbered I, II, III, IV, V, etc.
"A" causes the items to be numbered A, B, C, D etc.
"1“ causes the items to be numbered 1, 2, 3, 4, 5 etc.
"a" causes the items to be numbered a, b, c, d, e
etc. "i" cause the items to be numbered i, ii, iii, iv, v,
etc.
The default type is 1,2,3…
50
• Start=<value>: this attributes is used whenever
the list is to be started with some specific
value as starting.
• Eg.
<OL type=”1” start=3> : List will start from 3
<OL type=”i” start=3> : List will start from iii
<OL type=”A” start=3> : List will start from C
<OL type=”I” start=3> : List will start from III
<OL type=”a” start=3> : List will start from c
51
FIND OUTPUT
<html> <html>
<body>
<body>
<ol>
<li>Coffee</li> <ol type=“I" start="50">
<li>Tea</li>
<li>Milk</li>
<li>Coffee</li>
</ol> <li>Tea</li>
<li>Milk</li>
<ol start="50">
<li>Coffee</li> </ol>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</body> </html>
</html>
52
Definition Lists
• Definition lists is used to make glossaries

which consists of term and definition. This
allows you to list terms and their definitions.
• This kind of list starts with <DL> and end
with
</DL> tag.
• Each data term is starts with <DT> and
ends with </DT>.
• Each data definition starts with <DD> and
ends with </DD>. 53
<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
54
Directory List
• Directory list is similar to UL element. It represents the
elements in bullets. Since there is unordered list for the
purpose, it is depreciated tag and is rarely used.
Eg.
<DIR>
<LI>abc</LI>
<LI>pqr<LI>
<LI>xyz</LI>
</DIR>
Output:
• Abc
• Pqr
• Xyz
55
<!DOCTYPE html>
<html>
<body>
<dir>
<li>html</li>
<li>xhtml</li>
<li>css</li>
</dir>
<p>The dir element is not

supported in HTML5. Use CSS
instead.</p>
</body>
</html>
56
TABLES
57
Introduction
• Table can be defined as collection of rows and
columns. All the characteristics applicable to an
entire table are included within the table tag. The
table tag must include a pair <table> and </table>.
There are various other tags:
• <tr>: stands for table row, it is used to
make different rows of the table.
• <th>: stands for table head, it is used to deign
different column names of the table.
• <td>: stands for table data, it is used to enter data
into the table cells.
58
Attribute
s
• background="C:\Documents and Settings\30.jpg": used to
give any background to the table
• bgcolor="pink" : used to set any color for table. For setting
color of particular cell use bgcolor in <td> tag
• border=2 : used to set width of border
• align="left/right/center" : to align the table
• rules="rows/cols/all" : to put lines in rows only, columns only
or both
• width=200 : sets width of table. For setting width of
particular
cells use width in <td> tag.
59
• cellpadding=10 : spacing between cell borders and written
text
• cellspacing=10 : spacing between the cells
• bordercolor="red" : to give color to border
60
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table rules= “all“ border=3>
<tr>
<td>Row 1, Column 1</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
75
Example
<table>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
<tr>
<td>A </td>
<td>10</td>
</tr>
<tr>
<td>B</td>
<td>20</td>
</tr>
<tr>
<td>C</td>
<td>30</td>
</tr>
</TABLE>
62
Spanning
• Spanning here means merging. There are
certain cases in which we need to merge rows
or columns.
• It is of two types:
• Rowspan: to merge rows
• Colspan: to merge columns
63
Example
<body>
<table rules="all">
<tr>
<td rowspan=3 align="center">Products and Prices</td>
<td>Book</td>
<td>450</td>
</tr>
<tr>
<td>Diary</td>
<td>80</td>
</tr>
<tr>
<td>Register</td>
<td>50</td>
</tr>
</TABLE>
</body>
64
Output
65
Marquee
• Marquee is one of the important tag
introduced in HTML to support such scrollable
texts and images within a web page.
66
• <html>
• <head>
• <title>Example for HTML Marquee Tag</title>
• </head>
• <marquee>
• This is sample scrolling text.
• </marquee>
• </html>
67
attributes
• Width: provides the width or breadth of a
marquee.
• For example width="10”
• Height provides the height or length of a
marquee. For example height="20"
• 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
• Bgcolor provides a background color where
the value will be either the name of the color
or the hexadecimal color-code. 87
• loop
• This specifies how many times to loop. The
default value is INFINITE, which means that the
marquee loops endlessly.
SCROLLDELAY, together with SCROLLAMOUNT, sets
the speed of the scrolling.
• Scrolldelay sets the amount of delay in

milliseconds (a millisecond is 1/1000th of a
second). The default delay is 85.
• Scrollamount provides a value for speeding the
marquee feature SCROLLAMOUNT sets the size in
pixels of each jump. A higher value
for SCROLLAMOUNT makes the marquee scroll
faster. The default value is 6.
69
• Marquee's behaviour can be changed using
behavior attribute.
• Scroll
• Slide
• Alternate
70
• <html>
• <head>
• <title>Example for HTML Marquee Tag</title>
• </head>
• <marquee width="10%" direction="up"

height="70%“bgcolor="pink" >
• This is sample scrolling text.
• </marquee>
• </html>
71
72
• Add Other Characters- Here are a few other common escape
codes:
• " -> " for double quotation marks
• ' -> ‘ for single quotation marks
• © -> © for the copyright symbol
• ® -> ® for the registered trademark symbol
• ¢ -> ¢ for the cent sign
• £ -> £ for the pound sign
• ¥ -> ¥ for the yen sign
• € -> € for the euro sign
• ← -> ← for the leftwards arrow
• ↑ -> ↑ for the upwards arrow
• → -> → for the rightwards arrow
• ↓ -> ↓ for the downwards arrow
• ° -> ° for the degree sign
• ¶ -> ¶ for the paragraph symbol
• ÷ -> ÷ for the division symbol
• &there4; -> ∴ for the therefore symbol
73
HTML Forms
74
• The <form> Element
• The HTML <form> element defines a form that is
used to collect user input:
• <form>
.
form elements
.
</form>
• An HTML form contains form elements.

• Form elements are different types of input
elements, like text fields, checkboxes, radio
buttons, submit buttons, and more.
75
76
Text Input
<input type="text"> defines a one-line input field for text
input:
<form>
First name:<br>
<input type="text"
name="firstname">
<br>
Last name:<br>
<input type="text"
name="lastname">
</form> 77
Radio Button Input
<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number
of choices:
• <form>
<input type="radio" name
="gender" value="male“ ch
ecked> Male<br>
="gender" value="female">
Female<br>
="gender" value="other"> O
ther
</form>
78
<html>
<body>
<form
action="/action_page.php”>
<input type="checkbox"
name="vehicle" value="Bike">
I have a bike<br>
<input type="checkbox"
name="vehicle" value="Car"
checked> I have a car<br>
<input type="submit"
value="Submit">
</form>
</body>
</html>
79
The Submit Button
<input type="submit"> defines a button for submitting the form
data to a form-handler.
The form-handler is typically a server page with a script for
processing input data.
The form-handler is specified in the form's action attribute:
<form action="/action_page.php">
First name:
<br>
<input type="text"
name="firstname"
value="Mickey">
<br>
Last name:
<br>
<input type="text"
name="lastname"
value="Mouse">
<br><br>
101
<input type="submit" value="Sub
The Action Attribute
• The action attribute defines the action to be

performed when the form is submitted.
• Normally, the form data is sent to a web page on
the server when the user clicks on the submit
button.
• In the example above, the form data is sent to a
page on the server called "/action_page.php".
This page contains a server-side script that
handles the form data:
• <form action="/action_page.php">
81
Attribute
•
s
Following is the list of attributes for <input> tag for
creating text field.
• type: Indicates the type of input control and for text

input control it will be set to text.
• name: Used to give a name to the control which is
sent to the server to be recognized and get the value.
• Value: This can be used to provide an initial value
inside the control.
• Size : Allows to specify the width of the text-input
control in terms of characters.
• Maxlength : Allows to specify the maximum number of
characters a user can enter into the text box.
82
<input type = "password”
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "password" />
</form>
</body>
</html>
83
84
The Name Attribute
• Each input field must have a name attribute to

be submitted.
• If the name attribute is omitted, the data of
that input field will not be sent at all.
• This example will only submit the "Last name"
input field:
85
First name:<br>
<input type="text" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="
Mouse"><br><br>
<input type="submit" value="Submit">
</form>
86
Select Boxes
• A select box is a dropdown list of options that

allows user to select one or more option from
a pull-down list of options.
• Select box is created using
the <select> element and <option>element.
• The option elements within
the <select> element define each list item.
87
88
• Create a drop down list for 2 values :
• Maths
• physics
89
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "Maths" >Maths</option>
<option value = "Physics"selected>Physics</option>
</select>
</form>
</body>
</html>
90
Button
• <input type="button"> defines a button:
• <input type="button" onclick="alert('Hello

World!')" value="Click Me!">
Or
<input type = "button" name = "ok" value =
"OK" />
91
92
93
input type="date">
• is used for input fields that should
contain a date.
• Depending on browser support, a date picker
can show up in the input field.
94
• Birthday:
• <input type="date" name="bday">
• <input type="submit">
• </form>
95
96
Input Type Email
• The <input type="email"> is used for input fields

that should contain an e-mail address.
• Depending on browser support, the e-mail
address can be automatically validated when
submitted.
• <form>
E-mail:
<input type="email" name="email">
</form>
97
98
Input Type Number
• The <input type="number"> defines
a numeric input field.
• You can also set restrictions on what numbers are
accepted.
• The following example displays a numeric input
field, where you can enter a value from 1 to 5:
• <form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1
" max="5">
</form>
99
100
101
102
103
Textarea: container tag
<html>
<head>
<title>Form Example</title>
</head>
<body>
<form action="/action_page.php" >
<textarea cols="30" rows="5">

</textarea>
<input type="SUBMIT" name="s1"
value="submit form">
</form>
</body>
</html>
104
Button Controls
• There are various ways in HTML to create clickable
buttons. You can also create a clickable button using
<input>tag by setting its type attribute to button.
The
type attribute can take the following values −
• Submit: This creates a button that automatically
submits a form.
• Reset: This creates a button that automatically resets
form controls to their initial values.
• Button: This creates a button that is used to trigger a
client-side script when the user clicks that button.
• image : This creates a clickable button but we can use
an image as background of the button. 134
<html>
<head>
<title>types of Button </title>
</head>
<body>
<form>
<input type = "submit" name = "submit" value = "Submit"
/>
<input type = "reset" name = "reset" value = "Reset"
/>
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src =
"/html/images/logo.png" />
</form>
</body>
</html>
135
107
There are 3 ways of implementing
style in HTML :
• Inline Style : In this method, the style
attribute is used inside the HTML body tag.
• Embedded Style : In this method, the style
element is used inside the <head> element of
the document.
• External Style Sheet : In this method the
<link> element is used to point to an external
CSS file.
Inline Style
• In Inline styling, the rules are directly written
inside the starting tag using the style attribute
• . The style attribute includes property and
value pairs.
• Each ‘ property : value ‘ pair is separated by a
semicolon ( ; ).
<!DOCTYPE html>
<html>
<body>
<h1 style="color:Blue;font-size:25px;">
Example of Inline Style</h1>
<p style="color:red;">First
paragraph</p>
<p style="color:green;font-size:40px;">
Second paragraph</p>
<hr style="border-color:orange;">
</body>
Embedded Style :
Embedded style sheets only affect the

document they are embedded in.
Embedded style sheets are defined in

the
<head> section of an HTML document using
the <style> tag.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:red;}
p
{color:blue;}
</style>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a
paragraph.</p
>
<h1> this is another
heading<h1>
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:
powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a
paragraph.</p>
</body>
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-
align:center">This is a
header</h1>
<p
style="color:green">Thi s
is a paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
font size=24
</head>
<body>
<p style = "color:green; font-size:24px;" >
Hello, World!</p>
</body>
</html>
• <!DOCTYPE html>
• <html>
•
• <head>
• <title>HTML Inline CSS</title>
• </head>
•
• <body>
• <p style = "color:red;">This is red</p>
• <p style = "font-size:20px;">This is thick</p>
• <p style = "color:green;">This is green</p>
• <p style = "color:green;font-size:20px;">This is
thick and green</p>
• </body>
•
• </html>
Difference between cellspacing and cellpadding:
• There is major difference between cellpadding and cellspacing .
• Both are related to cells height and width in cellpadding space between 1 cell and
cellspacing means space between 2 cells.
• Think of a cell as a box. Cellspacing is the space between boxes. Cellpadding is the
space between the content inside the box and its borders.
• CellSpacing is used to set space between different table cells. CellPadding is used
the space between the edges of the cell and the content of the cell.
• Cellpadding space between Content of cell and Cell Wall while Cellspacing is space
between two cells .
Exercise
• Create an html table with caption as shown below:
• Create html table as below:

Frames in HTML
• HTML frames are used to divide your browser window into multiple sections
where each section can load a separate HTML document.
• Multiple views offer designers a way to keep certain information visible,
while
other views are scrolled or replaced.
• For example, within the same window, one frame might display a static banner, a
second a navigation menu, and a third the main document that can be scrolled
through or replaced by navigating in the second frame.
• 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
• 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. Each frame is indicated by <frame> tag and it defines which
HTML document shall open into the frame.
<html>
<head>
<title>HTML Frames</title>
</head> Home.html
<frameset rows = "30%,70%">
<frame src = "frame1.html" />
</frameset>
</html>
<html>
<html>
<body style="background-color:red;">
<body style="background-color: orange;">
<h2>Frame 1</h2>
<h2>Frame 2</h2>
</body>
</body>
</html>
</html>
Frame1.html Frame2.html
OUTPUT
• Now if you want to divide your page column wise, use cols attribute. The code can
be:
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols = "30%,70%">
</frameset>
</html>
<noframes> tag
• If a user is using any old browser or any browser, which does not support frames
then <noframes> element should be displayed to the user.
• So you must place a <body> element inside the <noframes> element because
the
<frameset> element is supposed to replace the <body> element, but if a browser
does not understand <frameset> element then it should understand what is inside
the <body> element which is contained in a <noframes> element.
• You can put some nice message for your user having old browsers. For
example, Sorry!! your browser does not support frames. as shown in the below
example.
<html>
<frameset cols = "25%,50%,25%">
<frame src = “top_frame.htm" />
<frame src = “main_frame.htm" />
<frame src = bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
Frame's name and target attributes
• One of the most popular uses of frames is to place navigation bars in one frame
and then load main pages into a separate frame.
• Let's see following example where a test.html file has following code −
<html>
<head> <title>HTML Target Frames</title>
</head>
<frameset cols = "200, *">
<frame src = “menu.html" name = "menu_page" />
<frame src = “main.html" name = "main_page" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
• Here, we have created two columns to fill with two frames. The first frame is 200
pixels wide and will contain the navigation menu bar implemented
by menu.html file.
• The second column fills in remaining space and will contain the main part of the
page and it is implemented by main.html file. For all the three links available in
menu bar, we have mentioned target frame as main_page, so whenever you click
any of the links in menu bar, available link will open in main page.
• Following is the content of menu.html file:
<html>
<body bgcolor = "#4a7d49">
<a href="ecommerce.html" target= "main_page">E-commerce</a>
<br /> <br />
<a href="costaccounting.html" target ="main_page">Cost Accounting</a>
<br /> <br />
<a href="businessEnvironment.html" target = "main_page">Business Environment</a>
</body>
</html>
• Following is the content of main.html file −
<html>
<<body bgcolor = "#b5dcb3">
<h3>This is main page and content from any link will be displayed here.</h3> <p>So
now click any link and see the result.</p>
</body>
</html>
• When we load test.html file, it produces following result −
• Now you can try to click links available in the left panel and see the result.
• <frameset rows="*,*" cols="*,*"> <frame
src="frame_1.html"> <frame
src="frame_4.html"> </frameset>
•
<html>
<frameset cols="*,*,*,*">
<frame src=“frame_1.html">
<frame src="frame_2.html">
</frameset>
</html>
<html>
<frameset rows="*,*,*,*">
</frameset>
</html>
Mixing Columns and Rows
• Columns and rows of frames can both appear on the same webpage by nesting
one frameset inside of another.
• To do this, we first create a frameset and then nest a child frameset within the
parent element. Here’s an example of how we could nest two rows within a set of
three columns.
<frameset cols="*,*,*">
<frameset rows="*,*">
</frameset>
</frameset>
• Another example-
<frameset cols="*,*,*">
<frameset rows="*,*">
</frameset>
</frameset>

Unit2 - Short

Uploaded by

Document Information

Original Description:

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

Unit2 - Short

Uploaded by

Copyright:

Available Formats

HTML

• HyperText Markup Language (HTML) is the main markup

• HTML is written in the form of HTML elements consisting of tags,

HTML tags are keywords surrounded by angle brackets like <html>.

HTML tags normally come in pairs like <b> and </b>.

• HTML elements can have attributes.

• Attributes provide additional information about an element.

Attributes are always specified in the start tag.

• Attributes come in name/value pairs like: name="value"

• The last line in our coding reads </HTML>. It

• These opening and closing HTML tags make up

• The HEAD tag must not contain any text or

HTML <i> and <em> Elements

HTML <sub> Element

HTML <sup> Element

• Heading tag has align attribute.

• It has some attributes like:

• <P> for Paragraph tells your browser to insert a blank

• How <p> is different from <br>

• For different shades of background use R G B . i.e. _ _ _ _ _ _ .

• A web browser interprets your html document as being one

• The comment tag is used to insert comments in the source

<!--This is a comment. Comments are not displayed in the

The syllabus of my subject is composed of four units

<p>Do not forget to buy

• An unordered list displays the list elements

<h2>Unordered List with Square

• An ordered list displays the list elements with

The default type is 1,2,3…

• Definition lists is used to make glossaries

<h2>A Description List</h2>

<p>The dir element is not

• Scrolldelay sets the amount of delay in

• <marquee width="10%" direction="up"

• An HTML form contains form elements.

• The action attribute defines the action to be

• type: Indicates the type of input control and for text

• Each input field must have a name attribute to

• A select box is a dropdown list of options that

• <input type="button"> defines a button:

• <input type="button" onclick="alert('Hello

• The <input type="email"> is used for input fields

<form action="/action_page.php" >

<textarea cols="30" rows="5">

Embedded style sheets only affect the

Embedded style sheets are defined in

• There is major difference between cellpadding and cellspacing .

• Create html table as below:

• A collection of frames in the browser window is known as a frameset. The window

You might also like