Scribd
Upload
134 views12 pages

Web Page Design

The document provides information about web page designing using HTML and XHTML. It discusses the basic components and tags used in HTML/XHTML to design web pages, including headings, text formatting, lists, images, tables, hyperlinks and more. Guidelines are provided on proper syntax and rules that should be followed for valid HTML/XHTML code, such as using lowercase tags, quoting attributes, closing all tags, and nesting tags properly.

Uploaded by

Kishan Pun
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
134 views12 pages

Web Page Design

The document provides information about web page designing using HTML and XHTML. It discusses the basic components and tags used in HTML/XHTML to design web pages, including headings, text formatting, lists, images, tables, hyperlinks and more. Guidelines are provided on proper syntax and rules that should be followed for valid HTML/XHTML code, such as using lowercase tags, quoting attributes, closing all tags, and nesting tags properly.

Uploaded by

Kishan Pun
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 12

WEB PAGE DESIGNING Web pages are the interlinked hypertext documents that provide information through text,

image, audio, video, animation and other multimedia contents. Web pages are written in a tagged language called HTML or XHTML. HTML/XHTML The HTML (Hypertext Markup Language) or XHTML (eXtended Hypertext Markup Language) is markup language and used to design the web pages. These are also called the tagged languages because they are written as tags inside the angle brackets <>. A tag is a keyword enclosed inside the angle brackets. The HTML was first introduced by Tim Berners Lee at CERN lab in 1990. The HTML is not really anything more that plain text. So, we can create the HTML files with the simplest text editor program like notepad. THE COMPONENTS OF HTML ELEMENT There are three components of an HTML element. They are a pair of tags one starting and other ending, attributes with values and the texts to be displayed. The syntax or general form of an HTML element is: <tag [attribute1="value1" attribute2="value2"..]> The text to be displayed </tag>

HTML and XHTML rules: The HTML and XHTML both are used for web page designing. The HTML is the old version and its reformation is XHTML. Today, it is suggested to follow the rules of XHTML. Some rules to be followed are; 1. The tags or elements should be case sensitive The elements or tags are not case sensitive in HTML. But, they are case sensitive and written in lowercase in XHTML. 2. The attribute/value should be case sensitive The HTML attributes/ values are not case sensitive. But, XHTML attributes/values are case sensitive. In the Windows server, flower.gif and FLOWER.GIF mean the same file. But they mean the different files in UNIX based server. So, it is suggested that attributes and values should be case sensitive. 3. The values should be quoted The HTML values are not quoted. But the XHTML enforce quoting the values. So, the values should be quoted. For example, <img src="flower.gif"> 4. Every attribute should have a value The attribute may not have values in HTML but every attribute should have a value in XHTML. So, it is suggested that every attribute should have a value. For example, <img src="flower.gif">

5.

The tag or element cannot contain spaces: The HTML/XHTML tags cannot have spaces. The tag <img> should not be written as <i m g> 6. The characters to be displayed with white spaces are collapsed. The white spaces (multiple space, tab, new lines and etc) between starting and ending tags are collapsed to a single space. 7. HTML/XHTML may contain comments The comments can be inserted into HTML/XHTML documents inside <!--and -->. For example, <!-- This is the first web page by --> 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, <b><i> Text to be displayed </b></i>. This is wrong because it is crossed. But, <b><i> Text to be displayed </i></b >. This is correct because it is nested.

DIFFERENT TYPES OF HTML/XHTML TAGS 1. Basic Document Tags Tags <html></html> <head></head> <title></title> <body></body> bgcolor background text link vlink alink 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 <head> tag. It includes all portions of the html documents that are visible by web browser. All the tags inside body is in nested order. It defines the background color of the web page. It is includes the URL of the back ground image of the web page. It defines the text color in the web page. It defines the color of the unfollowed links. It defines the color of the followed links. It defines the color of the links when they are clicked.

Example 1: <html> <head> <title>This is my first web page.</title> </head> <body bgcolor="green">Welcome to my web page!</body> </html> 2

2. The Text Tags Tags <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> <b></b> <i></i> <u></u> <sub></sub> <sup></sup> <tt></tt> <font></font> face size color 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) It defines the name or face of the font. Like Arial It defines the font size from 1 to 7. The size 7 is the largest. It defines the font color. The color can be selected by specifying its name "red" or by hexadecimal color code like "#33FF00".

Example 2: <html> <head><title>Text Formatting</title></head> <body bgcolor="#b02b00"> <h1>This is heading 1</h1> <font face="Arial" size="5" color="blue"> This is Arial font of size 5 and blue color</font> <br></br> <b>This is bold.</b> <br></br> <i>This is italics.</i> <br></br> <u>This is underlined.</u> <br></br> <h3>This is heading 3</h3> </body> </html>

3. The common Formatting Tags Tags <p></p> <br> </br> <ol></ol> type Attributes align Functions 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. 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 It sets the starting value for the numbering. It defines the bulleting lists. 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 It sets the line color It determines the alignment for the line. It sets the breadth or height of the line It determines the length of the line. It is set in percentage value.

start <ul></ul> type <li></li> <hr></hr> color align size width

Example 3: <html><head><title>Some Formatting tags</title></head> <body bgcolor="green"> <font face="Arial" size="5" color="blue"> Selection of Subjects</font> <hr color="red" align="left" size="5" width="80%"></hr> <p align="left">Core subjects</p> <ol type="i"> <li>Compulsory English</li> <li>Compulsory Nepali</li> </ol> <p align="left">Major subjects</p> <ul type="square"> <li></li> <li>Major English</li> <li>Major Nepali</li> <li>Introduction to Education</li> <li>Introduction to Pedagogy</li> <li>Account</li> <li>Computer Science</li> </ul> </body> </html>

4. Image Tags Tags <img></img> Attributes Function 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: <html><head><title>Image tags</title></head> <body bgcolor="green"> <font face="Arial" size="5" color="blue">Welcome to Nepal</font> <hr color="red" align="left" size="5" width="50%"></hr> <img src="E:\web images\nepal-flag.png" width="245" height="300" border="2" alt="Nepali flag"> </img> </body> </html> 5. Marquee Tags Tags Attributes <marquee> .. </marquee> bgcolor behavior direction scrolldelay scrollamount Function It inserts the scrolling text or image on marquee region of the web page. It sets the background color for text marquee. It determines the scrolling effects scroll or slide or alternate. It sets the direction for the scrolling marquee left or right. It determines the scrolling speed. It determines the scrolling interruption amount.

Example 5: <html> <head><title>Marquee with Image tags</title></head> <body bgcolor="#CCCCCC"> <marquee bgcolor="green" behavior="scroll" direction="left" scrollamount="4"><font size="5" color="white">Namaste Nepal</font></marquee> <p></p> <font face="Arial" size="5" color="blue">Welcome to Nepal</font> <hr color="red" align="left" size="5" width="80%"></hr> <img src="E:\web page examples\images\nepalmap.jpg" align="left" border="1"></img> </body> </html>

6. Hyperlink Tags Tags Attributes <a></a> href target name Example 6: <html> <head><title>Hyperlink Tags</title></head> <body bgcolor="#CCCCCC"> <font face="Arial" size="5" color="blue">Links</font> <hr color="red" align="left" size="5" width="65%"></hr> <a href="E:\web page examples\web page designing.doc" > Web Page Designing</a> <br></br> <a href="E:\web page examples\images\nepal-flag.png"> <img src="E:\web page examples\images\flag-icon.png"></img></a> <br></br> Check mails in <a href="http://www.mail.yahoo.com" >Yahoo</a> </body> </html> 7. Table Tags Tags Attributes <table> </table> border bgcolor width cellspacing cellpaddin g <tr></tr> align valign <td></td> bgcolor align valign colspan rowspan <th></th> <caption> </caption> Function It links any text or image to any documents, other images or URL's. It also links different sections of a document. It connects a filename with its path, any destination URL and etc. Further, it also connects an email address with mailto: It sets the destination window like blank. It connects the name of an anchor

Functions It inserts a table in the web page. It sets the border of the table and its cells within it. It sets the background color of the table. It sets the width (or length) of a table either in pixels or percent It determines the space between cells. It determines the space between cell border and cell content. It inserts a row in the table. It aligns the content of a row either left or center or right. 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. It sets the background color of the cell It aligns the content of the cell either left or right or center. It aligns the content of the cell either top or middle or bottom. It inserts a finite number of columns in a cell. 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.

align

It aligns the caption of the table either on the top or bottom or left or center or right.

Example 7: <html> <head> <title>Table Tags</title></head> <body bgcolor="#CCCCCC"> <font face="Arial" size="5" color="blue">Table</font> <hr color="red" align="left" size="5" width="65%"></hr> <table border="2" width="30%"> <tr> <th>Subjects</th> <th>Marks</th> </tr> <tr> <td>English</td> <td>56</td> </tr> <tr> <td>Nepali</td> <td>65</td> </tr> <tr> <td>Computer</td> <td>60</td> </tr> </table> </body> </html> 8. Frameset Tags Tags Attributes <frameset> </frameset> rows cols <frame> </frame> src scrolling noresize Functions It divides a single web page into specified number of rows and columns. It determines the number of rows. The value is either in pixel or percent 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 <body></body> tags are not used. It links the file or URL to be displayed in the specified frame. It sets whether the frame border is scrollable or not. Values are "yes" or "no". It makes the frame is resizable or not.

Example 8: <html> <head> <title>Frameset Tags</title></head> <frameset rows="25%,*" framespacing="1" border="1" frameborder="1"> <frame name="header" src="E:\web page examples\images\himal.jpg" noresize scrolling="no"></frame> <frameset cols="20%,*"> <frame name="links" target="main" noresize src="E:\web page examples\frameset links.html"></frame> <frame name="main" scrolling="yes" src="E:\web page examples\frameset main.html"></frame> </frameset> 7

</frameset> </html> 9. Form Tags Tags Attributes <form> </form> <input> </input> type

Functions It inserts the form in a web page. It determines the type of form input. It determines the type of field or button in the form For example, text : to input textbox in the form password: to input password in the form radio: to input radio button in the form checkbox: to input checkbox in the form submit: to insert the submit button in the form It names the object of the form. It determines the size of text entry field in terms of characters. It determines the maximum size of text entry field in terms of characters. It enables the users to select one option from the listbox. It determines the name of the select list. 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 <select></select> 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. It names the text area. It sets the height of the text area object in terms of rows of texts. It sets the width (or length) of text area object.

name size maxsize <select> </select> name multiple <option> </option> <textarea> </textarea> name rows cols

Example 9: <html> <head> <title>Form Tags</title></head> <body bgcolor="#CCCCCC"> <font face="Arial" size="5" color="blue">Student Record</font> <hr color="red" align="left" size="5" width="65%"></hr> <form> <p>Name:<input type="text" name="tb1" size="20"></input></p> <p>Address:<input type="text" name="tb2" size="40"></input></p> <p>Sex: <input type="checkbox" name="cb1" value="on">Male</input> <input type="checkbox" name="cb2" value="on">Female</input></p> <p>Stream: <select name="s1"> <option>Commerce</option> <option>Education</option> <option>Humanities</option> <option>Science</option> </select> </p> <p>Subjects: <input type="radio" name="rb1" value="1">English</input> <input type="radio" name="rb2" value="2">Nepali</input> <input type="radio" name="rb3" Value="3">Opt. English</input> <input type="radio" name="rb4" value="4">Mathematics</input> <br></br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp;&nbsp;&nbsp; <input type="radio" name="rb5" value="5">Account</input> <input type="radio" name="rb6" value="6">Computer Science</input> <input type="radio" name="rb7" value="7">Physics</input> <input type="radio" name="rb8" value="8">Chemistry</input> <input type="radio" name="rb9" value="9">Biology</input></p> <p>Comments:<br></br> <textarea name="ta1" rows="3" cols="50"></textarea></p> <p> <input type="submit" name="sbmt1" value="Submit"></input> <input type="reset" name="rst1" value="Reset"></input></p> </form> </body> </html>

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 and layout. 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 scripting language, 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 C language or Java.

10

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 designed and 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

You might also like