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.

External Style sheets

Explanation:

External Style Sheet is a type of CSS.  In External CSS, Style sheet are kept in a separate file with the collection of CLASS's and ID's.  The style sheet file must create with a .css extension. Example: kmcpgs.css, ArignarAnna.css etc.,

Why we need to use External and its purpose?
Purpose of External CSS is to keep all css code in a separate file.  Whenever we develop a Website with multiple web pages in that case Inline CSS & Internal CSS will increase the burden if we need to make a generic change in terms of color or background image etc.  By using External CSS, just we can modify a common file and it will reflect in all the web pages in one GO.  Or else we have to update each and every page it will increase our development time and inefficient way of maintaining a website.

Separate CSS file i.e. styles.css

Created a HTML page and linked the CSS file or path also possible.

Additional Reference

Internal Style information

Explanation:

Internal Style Sheet is a type of CSS.  Adding the Style Attribute or Attributes on a < style > element the HTML page. Style attribute(s) are clubbed together are named as either CLASS or ID.

What is the difference between CLASS & ID in Style Sheet?
CLASS - any valid CSS name which starts with DOT (.) are class.
ID - any valid CSS name which starts with # are id.

When can we use CLASS & ID?
Usage of CLASS - whenever a same style sheet is required in many places, in that case we have use it as class.
Usage of ID - whenever an unique style sheet is required in a webpage then we can go with id.

Example #1:

Example #2:

For Additional Reference

Inline Style information

Explanation:

Inline Style Sheet is a type of CSS.  Adding the Style Attribute or Attributes on the HTML tag itself directly.

Example #1:

Example #2:

Additional Reference

Introduction to style sheet

Explanation:

Style Sheet otherwise called as CSS (Cascading Style Sheet).
CSS used to make a Website colorful and make it in a good look & feel.

Website with only HTML = Website designed and looks like Plain text
Website with HTML + CSS = Better look

CSS can be added to HTML elements in 3 ways:

• Inline - using a style attribute in HTML elements
• Internal - using a < style > element anywhere in the HTML
• External - using one or more external CSS files

W3C has actively promoted the use of style sheets on the Web since 1994.

Introduction to DHTML

Explanation:

DHTML is an Advanced Version of HTML. Dynamic + HTML = DHTML. So, What is Dynamic?  to perform some interactive action or making animated webpages etc all come under the word DYNAMIC.

How can we achieve the Dynamic?  By Using HTML + Javascript + CSS ( Cascading Style Sheet) + DOM (Document Object Model).

DHTML is Case-Insensitive like HTML. So, we can write the code in both uppercase and lowercase or combination of cases, this is allowed in DHTML.

DHTML was introduced by Microsoft with the release of Internet Explorer version 4.0 in 1997

According to the World Wide Web Consortium (W3C):
"Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated."

Web Design Unit III

Introduction to DHTML, Introduction to style sheet, Setting the default style sheet language, Inline Style information, Internal Style information, External Style sheets, Cascading Style Sheets.