UNIT - 2
HTML
HTML, Hypertext Mark-up Language, is the predominant markup language for developing web pages.
It provides a means to describe the structure of text-based information in a document—by denoting certain
text as links, headings, paragraphs, lists, etc.—and to supplement that text with interactive forms,
embedded images, and other objects. HTML is written in the form of "tags" consisting minimally of
"elements" surrounded by angle brackets. HTML can also describe, to some degree, the appearance and
semantics of a document, and can include embedded scripting language code (such as JavaScript) that can
affect the behavior of Web browsers and other HTML processors.
HTML is a language for describing web pages.
• HTML is a markup language
• A markup language is a set of markup tags
• The tags describe document content
• HTML documents contain HTML tags and plain text
• HTML documents are also called web pages
HTML markup tags are usually called 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
<tagname>content</tagname>
HTML Versions
Since the early days of the web, there have been many versions of HTML:
Version Year
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013
Web Browsers
The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read
HTML documents and display them as web pages.
HTML Page Structure
Below is a visualization of an HTML page structure:
<html>
<head>
<title>Welcome To WWW </title>
</head>
<body>
<h1>This a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Basic HTML Elements : <HTML>, <HEAD>, <BODY> Tags
Each HTML document is contained within the starting <HTML> & ending </HTML>
tags.
Each HTML document also includes a header section indicated by the <HEAD> tag
which in turn contains elements like <TITLE> , <META> <SCRIPT> etc.
What ever the data we want to present must be written with in <BODY> </BODY>tags
By applying different styles
<META>
This tag is mainly used to pass information about the web page to the external world , or
to pass messages to the client such as the language of the document, last modified date
etc using the HTTP-EQUIV and CONTENT attribute pairs:
Example
<META HTTP-EQUIV="keywords" CONTENT="Biology, Chemistry">
<META HTTP-EQUIV="Last-Modified" CONTENT="Sep 06, 1996">
HTML Paragraphs <p> tag
HTML paragraphs are defined with the <p> tag.
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<pre> Tag
It is a pre-formatted tag : Displays as it is..
The data in html is displayed from left right and top to bottom irrespective of what ever format
we write in program Therefore to display as it is how we write in program we can use <pre> tag
HTML Headings
• HTML defines different types of headers using six header tags i,e <h1> to <h6> tags.
• The order of Font size is in decreasing order from h1 to h6.
Example
<h1>HELLO</h1>
<h2>HELLO</h2>
<h3>HELLO</h3>
<h4>HELLO</h4>
<h5>HELLO</h5>
<h6>HELLO</h6>
<font> tag
Specify the font size, font face and color of text:
<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>
HTML Text Formatting Tags
Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<strike> Defines striking text
<del> Defines deleted text
<u> Defines underline
HTML "Computer Output" Tags
Tag Description
<code> Defines computer code text
<kbd> Defines keyboard text
<samp> Defines sample computer code
<var> Defines a variable
<pre> Defines preformatted text
HTML Citations, Quotations, and Definition Tags
Tag Description
<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a section that is quoted from another source
<q> Defines an inline (short) quotation
<cite> Defines the title of a work
<dfn> Defines a definition term
Attributes
Every Tag is associated with set of Attributes an attribute defines the characteristic of a
particular tag.
An Attribute is represented as a name value pair with in a tag
A tag can contain any no of attributes separated by space
Example
The attributes of body tag are
<body bgcolor=red text= green>
bgcolor represent the background color of the document and text represent the foreground color
of the document.
HTML Lists
Lists are used to display the list of elements in an order
Basically HTML supports Three types of lists Ordered List , Un Ordered List 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).
Example
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
How the HTML code above looks in a browser:
Coffee
Milk
HTML Ordered Lists
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items are marked with numbers.
Example
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
How the HTML code above looks in a browser:
1. Coffee
2. Milk
HTML Description Lists
A description list is a list of terms/names, with a description of each term/name.
The <dl> tag defines a description list.
The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each
term/name):
Example
<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
HTML Links
Linking or Navigating from one page to another
Html supports three types of Hyper Links
Text Hyper Link ( Text a Link)
Graphical HyperLink ( Image as a link)
Link with in single document or Internal Link
HTML links are defined with the <a> tag.
Example
Text Hyper Link
<a href="[Link]
Graphical Hyper Link
<a href="[Link]"> <img src =”[Link]” ></a>
Internal Link
<h1><a name="seealso">See also</a></h1>
Or:
<h1 id="seealso">See also</h1>
then link to it:
<a href="#seealso">Go to the see also section</a>
The compulsory attribute for <a> tag is HREF to specify linking page
HTML Images
HTML images are defined with the <img> tag.
Example
<img src="[Link]" alt="This image" width="104" height="142">
• The compulsory attribute for <img> tag is src to specify URL of the image
• alt stands for Alternate Text – If the browser is not supporting Images it display the value
of ALT .
• height and width specify the height and width of the image.
HTML Tables
Tables are defined with the <table> tag.
A table is divided into rows using <tr> , and each row is divided into data cells using<td> tag).
td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links,
images, lists, forms, other tables, etc.
Example
<caption> Time Table </caption>
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr> </table>
<Caption> tag is used to display Heading of the table .
Important attributes of Table are
Height - To specify height of the table
Width - To specify width of the table
Border - To specify border of the table
Bgcolor - To specify background color to the table or to the row or to the coloumn
Colspan - To combine two coloumns
Row span - To combine two rows
Cell spacing - To give space between the cells
Cell Padding - space between the data and the border
HTML FORMS
• 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
• 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.
Text Fields
<input type="text"> defines a one-line input field that a user can enter text into:
<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:
ROSE
First name:
LILLY
Last name:
<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:
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
Check Box
<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.html" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
How the HTML code above looks in a browser:
Submit
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.
HTML FRAMES
Frames in HTML
• To divide a web page into different partitions we use Frames
• Two tags called <frameset> </frameset> and <frame > are used for creating frames and
loading pages into those frames.
Ex:
<frameset rows="60%,*">
<frame src="[Link]"/>
<frame src="[Link]"/>
</frameset>
<frameset> tag is a
• A container tag, requires a closing </frameset> tag
• Determines the frame types and sizes on the page
• Two frame types:
– Columns
– Rows
o rows and cols are the attributes of the <frameset>
o rows is used to divide the frame horizontally based on value
given.
o cols is used to divide the frame vertically based on value
given.
In the frameset document, the <frameset> element takes the place of the <body> element.
<frame> tag is used to
• Load a web page into a frame using src attribute
• Use the name attribute to name a frame, then target the frame name with hyperlinks
• The syntax for naming a frame is as follows:
<frame src="url" name="framename"/>
• The following code names a frame:
<frame src="[Link]" name="authors"/>
• The following code targets this frame:
<a href="[Link]" target= "authors"> Visit James </a>
• If a user clicks the Visit James link, the James page will open in the Authors frame
Ex1:
<frameset rows="40%,60%">
<frame src="[Link]" name="top">
<frame src="[Link]" name="bottom">
</frameset>
Ex2 :
<frameset rows="16%,84%">
<frame src="[Link]" name="top">
<frameset cols="50%,50%">
<frame src="[Link]" name="left">
<frame src="[Link]" name="right">
</frameset></frameset>
Cascading Style Sheets
Cascading Style Sheets (CSS) is a style sheet language used for describing the look and
formatting of a document written in a markup language.
CSS stands for cascading style sheets. Cascading style sheets provide the ability to change the
appearance of text (such as fonts, colors, spacing) on Web pages. Using CSS, you can also
position elements on the page, make certain elements hidden, or change the appearance of the
browser, such as changing the color of scroll bars in Microsoft Internet Explorer.
For Applying styles to different html elements we use CSS
Basic Structure of a Styles
• Each definition cnotains:
– A property
– A colon
– A value
– A semicolon to separate two or more style properties
– Can include one or more values
Example:
h1
{font-size:12pt; color:red}
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
HTML supports three types of Style Sheets
• External style sheet
• Internal or Embedded styles
• Inline styles
External or Embeded Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external style
sheet, you can apply unique style properties to different pages a site.
Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head
section:
<head>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
An external style sheet can be written in any text editor. The file should not contain any html
tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is
shown below:
Ex: [Link]
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/[Link]");}
Internal or Embeded Style Sheet
An internal style sheet should be used when a single document has a unique style. You define
internal styles in the head section of an HTML page, by using the <style> tag, like this:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/[Link]");}
</style>
</head>
Inline Styles
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain
any CSS property. The example shows how to change the color and the left margin of a
paragraph:
<p style="color:sienna;margin-left:20px;">This is a paragraph.</p>
Note:
If we represent style as an attribute it is called Inline Style Sheeet
If we represent style as a tag it is called Embeded style Sheeet
If we represent styles in a seperate file and link that to a web page it is called External
style sheet
CSS Selector
CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set.
CSS selectors select HTML elements according to its id, class, type, attribute etc.
There are several different types of selectors in CSS.
1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector
1) CSS Element Selector
The element selector selects the HTML element by name.
<!DOCTYPE html>
<html>
<head>
<style>
p{ text-align: center;
color: blue; }
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Output:
This style will be applied on every paragraph.
Me too!
And me!
2) CSS Id Selector
The id selector selects the id attribute of an HTML element to select a specific element. An id is
always unique within the page so it is chosen to select a single, unique element.
It is written with the hash character (#), followed by the id of the element.
An example with the id "para1".
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello Java</p>
<p>This paragraph will not be affected.</p>
</body>
</html>
Output:
Hello Java
This paragraph will not be affected.
3) CSS Class Selector
The class selector selects HTML elements with a specific class attribute. It is used with a period
character . (full stop symbol) followed by the class name.
Note: A class name should not be started with a number.
Let's take an example with a class "center".
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>
Output:
This heading is blue and center-aligned.
This paragraph is blue and center-aligned.
CSS Class Selector for specific element
If you want to specify that only one specific HTML element should be affected then you should use
the element name with class selector.
Example
<!DOCTYPE html>
<html>
<head>
<style>
[Link] {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is not affected</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>
Output:
This heading is not affected
This paragraph is blue and center-aligned.
4) CSS Universal Selector
The universal selector is used as a wildcard character. It selects all the elements on the pages.
<!DOCTYPE html>
<html>
<head>
<style>
{
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Output:
This is heading
This style will be applied on every paragraph.
Me too!
And me!
5) CSS Group Selector
The grouping selector is used to select all the elements with the same style definitions.
Grouping selector is used to minimize the code. Commas are used to separate each selector in
grouping.
Let's see the CSS code without group selector.
h1 {
text-align: center;
color: blue;
}
h2 {
text-align: center;
color: blue;
}
p{
text-align: center;
color: blue;
}
As you can see, you need to define CSS properties for all the elements. It can be grouped in following
ways:
h1,h2,p {
text-align: center;
color: blue;
}
Let's see the full example of CSS group selector.
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello Java</h1>
<h2>Hello Java (In smaller font)</h2>
<p>This is a paragraph.</p>
</body>
</html>
Output:
Hello Java
Hello Java (In smaller font)
This is a paragraph.
CSS Box Model
• The components that can be depicted on the web page consist of one or more than one rectangular
box.
• A CSS box model is a compartment that includes numerous assets, such as edge, border, padding
and material. It is used to develop the design and structure of a web page.
• It can be used as a set of tools to personalize the layout of different components. According to the
CSS box model, the web browser supplies each element as a square prism.
The following diagram illustrates how the CSS properties of
• width
• height
• padding
• border
• margin
dictate that how much space an attribute will occupy on a web page.
The CSS
box model contains the different properties in CSS. These are listed below.
o Border
o Margin
o Padding
o Content
Now, we are going to determine the properties one by one in detail.
Border Field
It is a region between the padding-box and the margin. Its proportions are determined by the width
and height of the boundary.
Margin Field
This segment consists of the area between the boundary and the edge of the border.
The proportion of the margin region is equal to the margin-box width and height. It is better to
separate the product from its neighbor nodes.
Padding Field
This field requires the padding of the component. In essence, this area is the space around the subject
area and inside the border-box. The height and the width of the padding box decide its proportions.
Content Field
Material such as text, photographs, or other digital media is included in this area.
It is constrained by the information edge, and its proportions are dictated by the width and height of
the content enclosure.
Elements of the width and height
Typically, when you assign the width and height of an attribute using the CSS width and height
assets, it means you just positioned the height and width of the subject areas of that component. The
additional height and width of the unit box is based on a range of influences.
The specific area that an element box may occupy on a web page is measured as follows-
Size of the Properties of CSS
box
Height height + padding-top + padding-bottom + border-top + border-bottom +
margin-top + margin-bottom
Width width + padding-left + padding-right + border-left + border-right + margin-left
+ margin-right
