14. web page design

8/3/2019 14. Web Page Design

1/12


2/12

5. The tag or element cannot contain spaces:

The HTML/XHTML tags cannot have spaces. The tag should not be written as

6. The characters to be displayed with white spaces are collapsed.

The white spaces (multiple space, tab, new lines and etc) between starting and endingtags are collapsed to a single space.

7. HTML/XHTML may contain comments

The comments can be inserted into HTML/XHTML documents inside .

For example,

8. Every tag should close with close tab

In HTML, some tags don't end in close tab. But every tag in XHTML should end with

close tag.

9. The tags or elements should be nested.

The tags must be nested but not crossed.

For example,

Text to be displayed . This is wrong because it is crossed.

But, Text to be displayed . This is correct because it is nested.

DIFFERENT TYPES OF HTML/XHTML TAGS

1. Basic Document Tags

Tags Attributes Function

It starts and ends the html document.

It includes the title and additional information of the

html document. It is invisible in web page.

It defines the title of the html document.

It is nested inside tag.

It includes all portions of the html documents that are

visible by web browser. All the tags inside body is in

nested order.bgcolor It defines the background color of the web page.

background It is includes the URL of the back ground image of the

web page.

text It defines the text color in the web page.

link It defines the color of the unfollowed links.

vlink It defines the color of the followed links.

alink It defines the color of the links when they are clicked.

Example 1:

This is my first web page.

Welcome to my web page!

2


3/12

2. The Text Tags

Tags Attributes Functions

It defines the first level heading. It is the largest.

It defines the second level heading.

It defines the third level heading. It defines the fourth level heading.

It defines the fifth level heading.

It defines the sixth level heading. It is the smallest.

It makes the text bold.

It makes the text italics.

It underlines the text.

It makes the text in subscript form. Like A1, A2 It makes the text in superscript form. Like A2, B2

It makes the text in the form type writer like look.

It defines the font size, color and style (or face)

face It defines the name or face of the font. Like Arial

size It defines the font size from 1 to 7. The size 7 is the largest.

color It defines the font color. The color can be selected by

specifying its name "red" or by hexadecimal color code like

"#33FF00".

Example 2:

Text Formatting

This is heading 1

This is Arial font of size 5 and blue color

This is bold.

This is italics.

This is underlined.

This is heading 3

3


4/12

3. The common Formatting Tags

align It defines a paragraph. The value for align may be "left" or
"center" or "right".

It breaks the line. In HTML, it doesn't need the closing tag. It defines the numbering ordered list.

type It sets the numbering.

1: It is for 1,2,3

i: It is for i, ii, iii

I: It is for I, II, III

a : It is for a, b, c

A: It is for A,B,C

start It sets the starting value for the numbering.

It defines the bulleting lists.

type It sets the bullet type like disc, square, circle

It starts and ends the numbering or bulleting lists.

It defines the horizontal line across the screen

color It sets the line color

align It determines the alignment for the line.

size It sets the breadth or height of the line

width It determines the length of the l ine. I t is set in percentage

value.

Example 3:

Some Formatting tags

Selection of Subjects

Core subjects

Compulsory English

Compulsory Nepali

Major subjects

Major English

Major Nepali

Introduction to Education

Introduction to Pedagogy

Account

Computer Science

4


5/12

4. Image Tags


It inserts an image on the web page. The image in png, jpg,

gif etc are supported.

src It specifies or locates the source or URL of the image

width It determines the length of the image in pixels.

height It determines the height of the image in pixels.

align It determines the alignment of an image like left, right,

center, top, bottom, middle and etc.

border It sets the border around an image. Default is no border

vspace It sets the vertical space left around an image in pixels.

hspace It sets the horizontal space left around an image in pixels.

alt It labels an image for non-graphical browser.

Example 4:

Image tags

Welcome to Nepal

5. Marquee Tags

Tags Attributes Function ..

It inserts the scrolling text or image on marquee region of

the web page.

bgcolor It sets the background color for text marquee.

behavior It determines the scrolling effects scroll or slide or alternate.

direction It sets the direction for the scrolling marquee left or right.

scrolldelay It determines the scrolling speed.

scrollamount It determines the scrolling interruption amount.

Example 5:

Marquee with Image tags

Namaste Nepal

Welcome to Nepal

5


6/12

6. Hyperlink Tags


It links any text or image to any documents, other images or

URL's. It also links different sections of a document.

href It connects a filename with its path, any destination URL and etc.

Further, it also connects an email address with mailto:

target It sets the destination window like blank.

name It connects the name of an anchor

Example 6:

Hyperlink Tags

Links

Web Page Designing

Check mails in Yahoo

7. Table Tags


It inserts a table in the web page.

border It sets the border of the table and its cells within it.

bgcolor It sets the background color of the table.

width It sets the width (or length) of a table either in pixels or percent

cellspacing It determines the space between cells.

cellpadding

It determines the space between cell border and cell content.

It inserts a row in the table.

align It aligns the content of a row either left or center or right.valign It aligns the content of a row either top or middle or bottom.

It inserts cell data in a column in the row of the table.

bgcolor It sets the background color of the cell

align It aligns the content of the cell either left or right or center.

valign It aligns the content of the cell either top or middle or bottom.

colspan It inserts a finite number of columns in a cell.

rowspan It inserts a finite number of rows in a cell.

It defines a table header.

It inserts the caption of a table. It comes immediately after the

table tag if it is used.

6


7/12

align It aligns the caption of the table either on the top or bottom or

left or center or right.

Example 7:

Table Tags

Table

Subjects

Marks

English

56

Nepali

65

Computer60

8. Frameset Tags


It divides a single web page into specified number of rows

and columns.

rows It determines the number of rows.The value is either in pixel or percent

cols It determines the number of columns.

The value is either in pixel or percent

It manages the frames in the web page. When these tags are

used, the tags are not used.

src It links the file or URL to be displayed in the specified frame.

scrolling It sets whether the frame border is scrollable or not.

Values are "yes" or "no".

noresize It makes the frame is resizable or not.

Example 8:

Frameset Tags

7


8/12

9. Form Tags


It inserts the form in a web page.

It determines the type of form input.

type It determines the type of field or button in the formFor example,

text : to input textbox in the formpassword: to input password in the form

radio: to input radio button in the form

checkbox: to input checkbox in the formsubmit: to insert the submit button in the form

name It names the object of the form.

size It determines the size of text entry field in terms of characters.

maxsize It determines the maximum size of text entry field in terms of

characters.

It enables the users to select one option from the listbox.

name It determines the name of the select list.

multiple It enables the user to choose multiple options from the list

It adds an option to the list of options.

It is written inside the tag.

It inserts the text area in the web page. The text area enables the

user to type text in many lines like sms, comment and etc.

name It names the text area.

rows It sets the height of the text area object in terms of rows of texts.

cols It sets the width (or length) of text area object.

8


9/12

Example 9:

Form Tags

Student Record

Name:

Address:

Sex: MaleFemale

Stream: Commerce

Education

Humanities

Science

Subjects:

English

Nepali

Opt. EnglishMathematics

Account

Computer SciencePhysics

ChemistryBiology

Comments:

9


10/12

CSS (Cascading Style Sheet)

Web pages were created in HTML and XHTML. But, only these are not enough for

high level formatting of texts and multimedia presentation. So, a new technology called CSS

was developed. The CSS is a web page designing tool only. So, it doesn't replace the HTML

or XHTML. But, the CSS helps the HTML/XHTML for better formatting, presentation andlayout.

The most of the web browsers support the CSS. The CSS can be added to the HTML

document by three ways:

i. By Inline Style,

ii. By Document wide Style,

iii. Linking or Importing External Style Sheet.

Scripting Languages:

The scripting language means the programming language. With the help of scriptinglanguage, we can tell the computer to do something that we want. So, we can use the

scripting languages to add the dynamic effect to the web pages and to control the appearance

and formatting the web page contents.

Here are some scripting languages.

VBScript:

The VBScript is developed by Microsoft Corporation. It is a client-side scripting

language. It is installed when Microsoft Windows is installed in the system. It is well

supported by the Internet Explorer.

ASP:

The ASP means Active Server Pages. This is server side scripting language developed

by Microsoft Corporation. It is the database related scripting language. So, it is used with

SQL server or MS Access.

JavaScript:

The JavaScript is developed by Netscape. It is also the client side scripting language.

It is supported by most of the web browsers. The syntax of JavaScript is almost similar to Clanguage or Java.

10


11/12

Web page Designing and Editing tools

Designing complex web pages in HTML/XHTML is very difficult because a number

of tags should be typed. So, there are many web page designing software are available. These

web design software helps the designers to design web pages in user friendly and graphical

environment. With the help of the web page designing software, web pages can be designedand edited in the web browser. So, a designer can design the webpage in both WYSIWYG

(What You See Is What You Get) mode and HTML/XHTML mode.

Some of the webs designing software are as follow;

Microsoft FrontPage and Microsoft Expression Web:

It is developed by Microsoft Corporation. It was suited in Microsoft Offices from

Microsoft Office 1997 to Microsoft Office 2002. But, Microsoft stopped the FrontPage in

Microsoft Office 2003. Then Microsoft released the Microsoft Expression Web and

SharePoint designer instead of FrontPage. Anyway, FrontPage, SharePoint and Expression

web are WYSIWYG designers.

Adobe Dream weaver:

It is developed by the Adobe Corporation. It is the most popular WYSIWYG web

design tool. The Dreamweaver supports the CSS, JavaScript, ASP and etc. It is available in

both Mac and Windows operating systems.

In addition to the software we discussed above, there is a number of software to

design web pages in WYSIWYG mode. For example, CoffeeCup HTML editor, Amaya,

KompoZer and etc.

11


12/12

12

14. web page design

Documents