Web page disignign

What is a Web Page?
A web is a page with hypertext links that cross-reference text in the Internet .A web page is also know as HTML pages because it is coded in HTML language.
Today web pages(HTML pages ) are the standard interface of the internet.

Power of HTML
Earlier HTML pages could only hold text.However, since the boom of Internet people have added more and more capabilities to this langauge.
It can now have images,animations,multimedia contents and even interactive application.

What is HTML ?
Most HTML tags have two parts the strarting tag that indicates the start of text or formatting and the closing tag that indicates the end of text of formatting .
The closing tag is the same as the starting tag,the only differneces is that it begins with a / just after the <>

Creating and editing web pages
Since a web page is a text file it can be created or edited in any text editor. However, there is application specially made for designing web pages. These applications are known as HTML editors.
Use any editor of your choice to create web pages.

A blank HTML page
A blank HTML page has the following code:





It appears in the page

Creating your first web page
The above written code is a blank web page.Copy it to Notepad.Write the title of the page between the tags.And write some one or two paragraphs of the between the and tags.
Give the save command and in the file name box type the filename inside double quotation("")with an extension of '.htm'.Now you can open the document in any browser and view it.

Tags and their Properties

Most of the HTML tags have their properties. The properties of every tag goes inside the opening tag .A tag can have any number of properties separated by space .Most of the properties have a value.For example if you are specifying the color property then its value will be the name of the color. A tag with properties will be written like.

Body tags and their meaning

Opening Tag	Closing Tag	Use
		Visible area of the HTML Page
		Formatting start and end.
		Paragraph start and end
	[None]	Horizontal line
	[None]	Line Break
		Start and end bold text.
		Start and end Italic text.
		Start and end Underline text.

Example

Welcome to my site

---

More tag propeties.
Propeties Value

tag align Paragraph alignment[left,center,right and justify]

to

Tag Heading one(It is the greatest font size)

....

It is smallest font then the previous font size

---

tag width Width of line in pixel or percent
align alignment[left,center and right]
Color Color or line(IE only)
size size of the Horizontal line

Tag Font face
Font size
Font color

List tags and their use

Opening Tag	Closing Tag	Use
		Start and end of the bullet list
		Start and end of the number list
		Start and end of directory list
		Start and end of the list item
		Start and end of division or paragraph
	none	Insert image.
		Hyperlink or anchor.

Tag Proepeties

tag
Type Type of bullet(circle,sqaure or disc)
tag
Type Type of numbering(1,A,a,I or i)
Start Beginning count of numbering (e.g.1,2,3,4 etc)
tag
Align Alignment of paragraph(left,center,right ro justify)

Example








Computer Course






5. Java


6. Oracle


7. C++


8. HTML


9. Javascript








img tag properties

Property	Value
SRC	Location of the image(e.g."c:\windows\circle.gif")
WIDTH	Width of the image in pixel
HEIGHT	Height of the image in pixel
ALT	Alternate or tool-tip text
VSPACE	Space to the right and left of image in pixels
HSPACE	Space to the right and left of image in pixels
NAME	Name of the image.
LOWSRC	Location of a lower resolution image
ALIGN	Alignment of text with imag.(top,middle,bottom etc)

Example








Welcome to My site











Anchor tag properties

Property Value
Tag
Name Name of the anchor
HREF Location of the file that is referenced.
TARGET Name of the window or frame to open the target file.

NOTE: Hyperlink is the part of the references another document. When you click on a hyperlink the referenced document is opened. Anchor is a reference point inside a document that can be referenced by a hyperlink. Whentag is used as anchor it doesn't have a closing tag.

Table in an HTML document

In HTML a table begins with a

tag and ends with a tag.
Between the tag there are the rows that are enclosed between and tags. So there is one pair of and tags for each row.
Inside these rows are the cells, which are enclosed between the tags.


Example






tag pairs inside every row should be the same. The contents of the cell goes between the	and












Row 1, Col 1	Row 1, Col 2
Row 2, Col 1	Row 2, Col 2





Contents of a cell
The context of a cell is written between the and tags.A cell of table can contain any text,HTML,image or even another table(i.e.you can have a table inside another table).
Tables are used in web pages to arrange the layout and /or to display tabular data.

Table/cell Properties


and

tag Property Value WIDTH Width of table /cell in pixel or percent HEIGHT Height of table/cell in pixel or percent BGCOLOR Background color of table/cell BACKGROUND Background image of table/cell Tag only Property Value BORDER Thickness of table border in pixel BORDERCOLOR Color of table border CELLSPACNING Space between cells in pixel CELLPADDING Space between cell border and content in pixel More tag properties Property Value

tag only ROWSPAN Number of rows the cell spans Example Simple Table With Formatting Row 1, Col 1 Row 1, Col 2 Row 2, Col 1 Row 2, Col 2 This is a double-width, double-height cell with centered contents. Images in HTML document As we learnt earlier, a web page can only store text. So any images that appear inside the page is not inside the HTML document.Actually the image is a different file and there is a tag in the HTML page specifying the location of the image.The browser displays the image in the page as if it were a part of that document. Image Formats in a HTML page There are two types of image formats used in web pages.GIF(Graphics Interchangeable Format ".gif")and JPEG(Joint Photographics Expert Group ".jpg").The PNG(Portable Network Graphic ".png") format is still consideration and most probably will be used as web graphic format in the future. Inserting image into the HTML page IF you have a JPEG or GIF image you can insert it into HTML page by inserting thetag.Refer to lecture 3 for the properties of the tag looks like: Example The SRC property of the tag is must.All other tags are optional.If you dono't specify the width and height property the image dimesion is calculated automatically.If you don't specify the width and height property the image resized in the browser while displaying. If the width and height property is not specified then the browser will take a little longer time to display the image as it has to calculated the values, so it is better to specify them at design time. Other properties the tag are ALT and LOSRC.The ALT property is used to specify the text that will appear if the image cannot be shown in the page or when the mouse moves will be loaded before the actual high-resolution image is loaded .This property is used when low source image instead of a blank page before the large image appears. The format will be something like this: Example: Forms in a HTML document Forms are used in a web page to collect information form the user .Generally user cannot write or edit a web page in the browser but in a form he can type and enter data,which can be collect by the web site owner. For example a from can be used to accept the username and password of a user to log him onto the system or to take his details for any other purpose. Tags for inserting a form A form is inserted into a web page using the and tag.All the elements of a form tag are put between these tags inside the tag.The Type property of the tag determines the type of form element it is.For example will be a text box and will be a password box.The Tag doesnot have a closing tag. All types of form fields are inserted using the Tag except the Drop Down and list Box.These are enclosed between and tags.The list items are placed between these tags.Each list item is enclosed between a pair of and tags. The type of elements in a from From Element Tag Type Description Text Box Text Field where the user can enter any text Password Box Password Field where the user can enter password Text Area Textarea Field where the user can enter multiple line of text Check box Checkbox Filed where the user can check one or more of available option Radio Button Radio Filed where the user can select any one of available option Button Button Command buttton used to enter a command Submit Button Submit Command button used to submit the form Reset Button Reset Command button used to reset the form Drop Down Box Filed where the user can select an item from the drop down menu List Box Field where the user can select one or more items from a list Example here is a blank web page with only a from Full Name: Gender:MaleFemale Age Group: 12 13 14 15 16 From Elements and their properties Tag properties Property Value NAME Name of the Form METHOD How the form data will be sent(Get or Post) ACTION The script or program file that will handle the form data Text Field/Password Field/File Field Property Value NAME Name of the Field SIZE Width of field in number of characters MAXLENGTH Themaximum number of character allowed (Including space) Check BOX/Radio Button(INPUT TYPE="CHECKBOX"> Property Value NAME Name of the check box/radio button VALUE Value to pass when checked CHECKED Doesnot have a value,the box will appear checked initially BUTTON /SUBMIT BUTTON /RESET BUTTON // Property Value NAME Name of the Button(optional) VALUE Text on the button face Hidden field Property Value NAME Name of the field VALUE value of pass Drop Down/List Box Tag Property Value NAME Name of the field SIZE Number of lines in the list box . Tag Property Value VALUE Value to be passed when selected SELECTED Doesnot have a value,appears selected initially Text Area Property Value NAME Name of the field ROWS Height of the field in number of line COLS Width of the field in number of characters WRAP Type of text wrapping[off,virtual or physical] Frame Until now wach web page when opend takes over the entire browser screen.The browser screen could not be split into separate(unique) sections,showing different but related information. The HTML tags that divide a browser screen into two or more HTML recognizable unique region is the tags.Each unique region is called a frame.Each frame can be loaded with a different document and hence,allow multiple HTML documents to be seen concurrently. The HTML frame is a powerful feature that enables a web page to be broken into different unique section that,although realated ,operate independently of each other. The Tag The spliting of a browser screen into frames is accomplished with the and tags embedded into the HTML document .The tags require one of the following two attributes depending on whethher the screen has to be divided into rows and columns. ROWS This attribute is used to divide the screen into multiple rows.It can be set equal to a list of values.Depending on the require size of each row.The values can number of pixel,percentage of screen resolution and the symbol of * which indicates the remaining space of the screen COLS This attribute is used to divide the screen into multiple columns.It can be set equal to a list of values.Depending on the require size of each Columns..The values can number of pixel,percentage of screen resolution and the symbol of * which indicates the remaining space of the screen Example The Tag Once the browser screen is divided into rows(Horizontal sections)and columns (Vertical Sections),Each unique section defined can be loaded with different HTML documents.This is achieved by using the tag,which takes in the following attributes : Propery Value SRC Indicates the URL of the document to be loaded into the frame. MARGINHEIGHT Specifies the amount the amount of white space to be left at top and bottom of the frame MARGINWIDTH Specified the amount of white space to be along the sides of the frame NAME Gives the frame a unique name so it can be targeted by other documents.The name given must begin with an Alphanumeric character. NORSIZE Disables the frames resizing capability SCROLLING Controls the appearance of horizontall and vertical scrollbars in a frame.This takes the values YES/NO/AUTO Example <FRAMESET ROWS="30%,*"> Subscribe to: Post Comments (Atom) Blog Archive ▼  2007 (6) ▼  September (6) Web page disignign About Java Histroy of C++ About c Qbasic Fundamental of Computers About Me Niranjan View my complete profile