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.

.

..

&amp &lt&gt&nbsp&quot

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 &lt.

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

1. tag. Each list item starts with the
2. tag.
3. 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

instead

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