UNIT I
HTML
Introduction:
HTML stands for Hypertext Markup Language. It is used to display
the document in the web browsers. HTML pages can be developed to be
simple text or to be complex multimedia program containing sound,
moving images and java applets. HTML is considered to be the global
publishing format for Internet. It is not a programming language.
HTML was developed by Tim Berners-Lee. HTML standards are created
by a group of interested organizations called W3C (World Wide Web
consortium).
HTML -1991
HTML 2.0 -1995
HTML 3.2 -1997
HTML 4.10 -1999
XHTML -2000
HTML5 -2014
In HTML formatting is specified by using tags. A tag is a format
name surrounded by angle brackets. End tags which switch a format
off also contain a forward slash. Points to be remembered for HTML
tags:
Tags are delimited by angled brackets.
They are not case sensitive i.e., , and is equivalent.
If a browser not understands a tag it will usually ignore
it.
Some characters have to be replaced in the text by escape
sequences.
White spaces, tabs and newlines are ignored by the browser.
Structure of an HTML document:
All HTML documents follow the same basic structure. They have
the root tag as , which contains tag and tag. The head tag is used
for control information by the browser and the body tag contains
the actual user information that is to be displayed on the screen.
The basic document is shown below.
Sample.html
Basic HTML document
Welcome to the world of Web Technologies
A sample HTML program
HTML Tags
.
HTML tags are used to mark-up HTML elements
HTML tags are surrounded by the two characters < and >
The surrounding characters are called angle brackets
HTML tags normally come in pairs like and
The first tag in a pair is the start tag, the second tag is the
end tag
The text between the start and end tags is the element
content
HTML tags are not case sensitive, means the same as
The Declaration
The declaration tag is used by the web browser to understand the
version
of the HTML used in the document. Current version of HTML is 5
and it makes use of the
following declaration:
There are many other declaration types which can be used in HTML
document depending on what version of HTML is being used. We will
see more details on this while discussing .
tag along with other HTML tags.
HEADING
Headings are defined with the to tags. defines the largest
heading. defines the smallest heading.
This is a heading
HTML automatically adds an extra blank line before and after a
heading.
Paragraphs
Paragraphs are defined with the
tag.
a line break wherever you place it.
This
is a para
graph with line breaks
The
tag is an empty tag. It has no closing tag.
hr tag
This tag places a horizontal line across the system. These lines
are used to break the page. This tag also contains attribute i.e.,
width which draws the horizontal
line with the screen size of the browser. This tag does not
require an end tag.
.
Base font
This specify format for the basic text but not the headings.
font tag
This sets font size, color and relative values for a particular
text.
bold tag
This tag is used for implement bold effect on the text
.
Italic tag
This implements italic effects on the text.
.
strong tag
This tag is used to always emphasized the text
.
tt tag
This tag is used to give typewriting effect on the text
..
sub and sup tag
These tags are used for subscript and superscript effects
on the text.
.
..
& <> "
These are character escape sequence which are required if you
want to display characters that HTML uses as control sequences.
Example: < can be represented as <.
The Anchor Tag and the Href Attribute
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:
Text to be displayed
The tag is used to create an anchor to link from, 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 W3Schools:
Visit W3Schools!
The line above will look like this in a browser:
Visit W3Schools!
//HTML code to implement common tags.
common.html
common tags
Web Technology
Bolded text
Strong
underline
Italic
same as Italic
welcome
This is a Strike
same as above
tele text
HTML Lists
HTML lists appear in web browser as bulleted lines of text.
There are actually three different types of HTML lists,
including:-
Unordered lists (bullets)
Ordered lists (numbers), and
Definition lists (dictionaries)
Unordered Lists
An unordered list is a list of items. The list items are marked
with bullets (typically small black circles).
An unordered list starts with the
- tag. Each list item starts with the
- tag.
- Coffee
Milk
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
- tag. Each list item starts with the
- tag.
- Coffee
Milk
Here is how it looks in a browser:
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 tag. Each definition-list term starts with the tag. Each
definition-list definition starts with the tag. Inside a
definition-list definition (the tag) you can put paragraphs, line
breaks, images, links, other lists, etc.
CoffeeBlack hot drink
MilkWhite cold drink
Here is how it looks in a browser:
Coffee
Black hot drink
Milk
White cold drink
List Tags
Tag
Description
Defines an ordered list
Defines an unordered list
Defines a list item
Defines a definition list
Defines a definition term
Defines a definition description
Deprecated. Use
HTML Images
With HTML you can display images in a document.
The Image Tag and the Src Attribute
In HTML, images are defined with the tag.The tag is empty, which
means that it contains attributes only and it has no closing tag.To
display an image on a page, you need to use the src attribute. Src
stands for "source". The value of the src attribute is the URL of
the image you want to display on your page.
The syntax of defining an image:
The Alt Attribute
The alt attribute is used to define an "alternate text" for an
image. The value of the alt attribute is an author-defined
text:
HTML Backgrounds
A good background can make a Web site look really great.
Backgrounds
The tag has two attributes where you can specify backgrounds.
The background can be a color or an image.
Bgcolor
The bgcolor attribute sets the background to a color. The value
of this attribute can be a hexadecimal number, an RGB value, or a
color name.
The lines above all set the background color to black.
Background
The background attribute sets the background to an image. The
value of this attribute is the URL of the image you want to use. If
the image is smaller than the browser window, the image will repeat
itself until it fills the entire browser window.
body background="http://www.w3schools.com/clouds.gif">
The URL can be relative (as in the first line above) or absolute
(as in the second line above).
HTML Fonts
The tag in HTML is deprecated. It is supposed to be removed in a
future version of HTML.
Even if a lot of people are using it, you should try to avoid
it, and use styles instead.
The HTML Tag
With HTML code like this, you can specify both the size and the
type of the browser output:
this is a paragraph
this is another paragraph.
Font Attributes
Attribute
Example
Purpose
size="number"
size="2"
Defines the font size
size="+number"
size="+1"
Increases the font size
size="-number"
size="-1"
Decreases the font size
face="face-name"
face="Times"
Defines the font-name
color="color-value"
color="#eeff00"
Defines the font color
color="color-name"
color="red"
Defines the font color
Tables
Tables are defined with thetag.
Tables are divided intotable rowswith thetag.
Table rows are divided intotable datawith thetag.
A table row can also be divided intotable headingswith
thetag.
A data cell can contain text, images, lists, paragraphs, forms,
horizontal rules, tables, etc.
Tag
Description
Defines a table header
Defines a table row
Defines a table cell
Defines a table caption
Defines groups of table columns
Defines the attribute values for one or more columns in a
table
Defines a table head
Defines a table body
Defines a table footer
An HTML Table with a Border Attribute
A border can be added using the border attribute:
Heading
Another Heading
row 1, cell 1row 1, cell 2
row 2, cell 1row 2, cell 2
The line above will look like this in a browser:
Heading
Another Heading
row 1, cell1
row 1, cell 2
row 2, cell1
row 2, cell 2
Table Cells that Span Many ColumnsTo make a cell span more than
one column, use thecolspanattribute:
NameTelephoneBill Gates555 77 854555 77 855
Table Cells that Span Many RowsTo make a cell span more than one
row, use therowspanattribute:
Name:Bill GatesTelephone:555 77 854555 77 855
An HTML Table With a Caption ,CellPadding, cellspacing
Monthly savingsMonthSavingsJanuary$100February$50
Forms:
Forms are the best way of adding interactivity of element in a
web page. They are usually used to let the user to send information
back to the server but can also be used to simplify navigation on
complex web sites. The tags that use to implement forms are as
follows.
.
When get is used, the data is included as part of the URL. The
post method encodes the data within the body of the message. Post
can be used to send large amount of data, and it is more secure
than get. The tags used inside the form tag are:
In the above tag, the attribute type is used to implement text,
password, checkbox, radio
and submit button.
Form Tags
Tag
Description
Defines an input field
Defines a text-area (a multi-line text input control)
Defines a fieldset
Defines a caption for a fieldset
Defines a selectable list (a drop-down box)
Defines an option group
Defines an option in the drop-down box
Defines a push button
Deprecated. Use instead
Text:
It is used to input the characters of the size n and if the
value is given than it is used as a default value. It uses single
line of text. Each component can be given a separate name using the
name attribute.
Password:
It works exactly as text, but the content is not displayed to
the screen, instead an * is used.
Radio:
This creates a radio button. They are always grouped together
with a same name but different values.
Checkbox:
It provides a simple checkbox, where all the values can be
selected unlike
radio button.
Submit:
This creates a button which displays the value attribute as its
text. It is used to
send the data to the server.
Selection list:
This tag helps to have a list of item from which a user can
choose. The name of the
particular select tag and the name of the chosen option are
returned.
..
The select statement will have several options from which the
user can choose. The
values will be displayed as the user moves through the list and
the chosen one returned to the server.
.
This creates a free format of plain text into which the user can
enter anything they like. The area will be sized at rows by cols
but supports automatic scrolling.
Example 8: HTML code that implements forms
form
Name:
Password:
Qualification:
B.E
M.E
Gender:
Male
Female
course:
CSE
CSIT
Address:
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
To use frames on a page we use tag instead of tag. The tag
defines, how to divide the window into frames. The rows attribute
of tag defines horizontal frames and cols attribute defines
vertical frames. Each frame is indicated by tag and it defines
which HTML document shall open into the frame.
src(required): the URL to load in the frame, or the file name.
If you stored your individual files in the same folder as your
frameset HTML document, then youre fine just to use the file
name
noresize:If you dont specify this then users will be able to
resize your frames at will. This can cause layout issues so it is
usually a good idea to prevent that behaviour. Notice with this
attribute there is no="". Thats because theres only one setting. So
just havingnoresizeis the same as definingnoresize="noresize". Both
are fine.
scrolling: Do you want users to be able to scroll this frame? In
the case of your navigation, maybe not. On a frame-by-frame basis
you can turn off the users ability to scroll that frame, which can
be very useful.
name(highly recommended): give each frame a unique name. This
isvitalfor frames based websites in order for yourlinksto work
correctly. See below for more information.
frameborder(highly recommended): set a thickness of the border.
Apart from some messy CSS, you cant style your frames border, so
youre left with whatever the browser in question gives you. That
makes the most common use offrameborderto beframeborder="0"which
makes them invisible.
First, define a frameset with two columns:
The SRC attribute on the second frame has been omitted, because
it will be replaced in a minute. The definition of the two rows
which should go on the right goes as follows:
Nesting this last frameset in the first is a matter of replacing
the "right" frame definition with the definition of the
frameset:
CSS(Cascading Style Sheets)
Cascading Style Sheets, referred to as CSS, is a simple design
language intended to simplify the process of making web pages
presentable. CSS handles the look and feel part of a web page.
Using CSS, you can control the color of the text, the style of
fonts, the spacing between paragraphs, how columns are sized and
laid out, what background images or colors are used, as well as a
variety of other effects. CSS is easy to learn and understand but
it provides powerful control over the presentation of an HTML
document. Most commonly, CSS is combined with the markup languages
HTML or XHTML.
Advantages
CSS saves time - You can write CSS once and then reuse same
sheet in multiple HTML pages. You can define a style for each HTML
element and apply it to as many Web pages as you want.
Pages load faster - If you are using CSS, you do not need to
write HTML tag attributes every time. Just write one CSS rule of a
tag and apply to all the occurrences of that tag. So less code
means faster download times.
Easy maintenance - To make a global change, simply change the
style, and all elements in all the web pages will be updated
automatically.
Superior styles to HTML - CSS has a much wider array of
attributes than HTML so you can give far better look to your HTML
page in comparison of HTML attributes.
Multiple Device Compatibility - Style sheets allow content to be
optimized for more than one type of device. By using the same HTML
document, different versions of a website can be presented for
handheld devices such as PDAs and cell phones or for printing.
Global web standards - Now HTML attributes are being deprecated
and it is being recommended to use CSS. So its a good idea to start
using CSS in all the HTML pages to make them compatible to future
browsers.
CSS Syntax
A CSS rule-set consists of a selector and a declaration
block:
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations
separated by semicolons.
Each declaration includes a CSS property name and a value,
separated by a colon.
A CSS declaration always ends with a semicolon, and declaration
blocks are surrounded by curly braces.
Selector: A selector is an HTML tag at which style will be
applied. This could be any tag like or etc.
Property: A property is a type of attribute of HTML tag. Put
simply, all the HTML attributes are converted into CSS properties.
They could be color or border etc.
Value: Values are assigned to properties. For example color
property can have value either red or #F1F1F1 etc.
Properties and values in styles
Fonts
font-family: family name;
font-style: normal | italic | oblique;
font-weight: normal | bold | bolder | lighter;
font-size: small | medium | large | smaller | larger;
Backgrounds and Colors
color: value;
background-color: value;
background-image: URL;
background-repeat:repeat-X;
background-position:center|top|bottom|left|right|center|x
y|...;
Text
text-decoration: none | underline | overline| line-through|
blink;
text-transformation: none | uppercase | lowercase|
capitalize;
text-align: left | right | center | justify;
line-height : length | percentage;
letter-spacing: length | percentage; word-spacing: length |
percentage;
link
a:link{color:green;font-size:18px;} a:hover{color:orange;}
a:visited{color:blue,text-transform:uppercase;}
a:active{color:black;}
list
list-style-type: lower-greek |upper-latin|roman;
list-style-image: url(new.gif);
border
border-style:dashed |solid |double |dotted;
border-color:color;
border-width:top |bottom |left |right;
table
width:length| percentage;
border:solid| dotted...;
vertical-align:bottom|center;
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
Inline style
Internal style sheet/Embedded css
External style sheet/Linking css
Inline Style
An inline style may be used to apply a unique style for a single
element.
To use inline styles, add the style attribute to the relevant
element. The style attribute can contain any CSS property.
The example below shows how to change the color and the left
margin of a element:
This is a paragraph.
Eg:
HTML Inline CSS
This is red
This is thick
This is green
This is thick and green
Advantages: Disadvantages:
Testing Every Element
Quick-fixes Pseudo-elements
Smaller Websites.
Internal style sheet or Embedded
An internal style sheet may be used if one single page has a
unique style.
Internal styles are defined within the element, inside the
section of an HTML page:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Eg: internal.html
HTML Internal CSS
.red{
color: red;
}
.thick{
font-size:20px;
}
.green{
color:green;
}
>This is red
This is thick
This is green
This is thick and green
Advantages
This is Useful for small quantities of style definitions
typically limited to one document
Will override other style specification methods at the local
level so only exceptions need to be listed in conjunction with
other style methods
Disadvantages
Can not control styles for multiple documents at once
Selector grouping methods can not be used to create complex
element addressing scenarios
External Style Sheet
With an external style sheet, you can change the look of an
entire website by changing just one file!Each page must include a
reference to the external style sheet file inside the element. The
element goes inside the section:
An external style sheet can be written in any text editor. The
file should not contain any html tags. The style sheet file must be
saved with a .css extension.
Here is how the "myStyle.css" looks:
body{background-color:lightblue;}h1{color:navy;margin-left:20px;}Eg:
external.html
HTML External CSS