Background Color

Background Color we can add in a webpage using many ways.
1. Inline CSS
2. Internal CSS
3. External CSS

Background color is applicable to almost all elements. Like TD, TABLE, P, DIV, SPAN etc.,

Example Code:

Output:

Background Graphics/Image

Background Graphics - which means background image to the web elements or a whole web page. We can add it using many ways.
1. Inline CSS
2. Internal CSS
3. External CSS

Background color is applicable to almost all elements. Like BODY, TD, TABLE, P, DIV etc.,

Example Code:

Output:

Forms

Forms are using to post Data to one server.  We can target the destination page in FORM tag itself, where the data need to get posted!.  Form required many elements to post the Data like INPUT (text, checkbox, radio), TEXTAREA, SELECT, IMG, etc,

Basically FORM has two types of method to post the data.
1. GET Method
2. POST Method

1. GET Method
By using this method all the data which means all input field TextBox, DropDown, TextArea, Checkbox, Radio button etc., all the values will get clubed together and post in the URL (Target page).  This method is Unsecure and Limitation in terms of URL Length.  We can submit a form with huge data.

When we should not use GET Method?
We should not use in Login, Change Password screen etc., like some confidential data related screen, because if the data is posted in the URL and this will be visible to the user as well as advantage to the hackers.

Simple example, If the data is posted in the URL, this URL stored in browser history.  If you didnt cleared the browse history, other persons can able to see your confidential information and they can do malpractice.

When can we use GET Method? 
We can use GET method where it won't create problem to show some data in the screen.
Example: Pagination, Bread Crumbs, Search result etc.,

2. POST Method
By Using Post method, it is almost similar to GET Method.  Only difference, it will post the data by hidden.  Also there is no restriction to post the data using POST method.  Post data size is Unlimited!!

Source Code:

Output:

Reference for More Details..

Image maps

Use the < map > tag to use an image-map. 

An image-map is an simply image with clickable areas.

The < map > tag contains a number of < area > tags, that defines the clickable areas in the image-map:

Source:

Output:
(mouse hover on first image area i.e. Sun), on click it will take us into sun.htm webpage.

(mouse hover on second image area i.e. Mercury), on click it will take us into mercury.htm webpage.

(mouse hover on third image area i.e. Venus), on click it will take us into venus.htm webpage.

Images

Images otherwise called as Graphics.   To Add images into a web pages we have to add < img /> tag.

To add width & height of a image tag using multiple ways.
1. Image attribute height & width
2. Inline CSS height & width
3. Internal CSS height & width

In the following example you can see all the examples with output.

Source:

Output:

Directory Lists

Directory List is nothing but a combination of Ordered and Unordered list tags in HTML.

Okay, What is Directory List in a Computer?
We usually say like.  Directory is a collection of folders and files.  Sometimes folder will again have a sub-folder.  Sub-folder will again files or folders and this will keep on go.. By this same approach directory are li tags and sub-directories are ul+li and etc.,

Source Code:

Output:

Using UnOrdered Lists

Explanation:

Unordered List is a type of List in HTML.

The Word "UnOrdered" gives direct meaning of HTML list displayed without Order in the form, but using some symbols like disc, circle.

An Unordered list starts with the < ul > tag. Each list item starts with the < li > tag

Source Code:

Output:

Using Ordered List

Explanation:

Ordered List is a type of List in HTML.

The Word "Ordered" gives direct meaning of HTML list displayed in Ordered form.
An ordered list starts with the < ol > tag. Each list item starts with the < li > tag

Output:

Displaying Text in Lists

Explanation:

In HTML List we can use any information like Text, Image, Link etc.,

Now, we focus on how to display text in a List?

Source Code:


Output:

List in HTML

Explanation:

The Word "List" gives direct meaning of Listing out some information in a Webpage in either Ordered List or UnOrdered List.

Two Types List tags in HTML:
1. Ordered List
2. Unordered List

Elementary tags in HTML

Explanation:

HTML provides a set of "tags" that are embedded in documents to be displayed by a Web browser.

HTML tags usually, but not always, come in pairs, an opening tag and a closing tag.  Tags are enclosed in the 'greater than' and 'less than' symbols, "<"  ">". The opening tag of a pair of tags looks like this: . The closing tag of a pair looks like this:

What are the Important HTML tags?
All the Tags are important but few of the tags are most frequently used by the Web Developers.  As follows:

Introduction to HTML

Explanation:

HTML = HyperText Markup Language

HyperText  is a text which contains links to other texts.  The term was coined by Ted Nelson around 1965.  The first publicly available of HTML was a document called "HTML Tags", on the Internet by Tim Berners-Lee in late 1991.

Markup refers to the sequence of characters or other symbols that we insert at certain places in a text.

In Short, HTML is a language developed for Web and Website oriented purpose.

What are the possible extension for HTML?
a .html (ex: student.html)
b .htm (ex: lecturer.htm)

What is the Media type for HTML?
text/html

Web Design UNIT II

Introduction to HTML, Elementary tags in HTML, List in HTML, Displaying Text in Lists, Using Ordered List, Using UnOrdered Lists, Directory Lists, Definition lists combining List Types Graphics and images, Format Graphics and HTML Documents, Images and Hyperlink anchors, Image maps, Tables, Frames, Forms, Background Graphics and Background Color.