WIXLIB

UNIT 4WEB PAGE jectives4.2Basics of web page design using HTML4.2.1 Method to create and view the web pages in browser4.2.2 HTML Basic tags4.2.3 Image tags4.2.4 Frames4.2.5 FormsJavaScript and VBScriptFeatures of Microsoft Expression WebWeb Site Design Scripting ToolsSummaryFurther Readings4.0INTRODUCTIONThis unit explains the process of design of web pages. Web pages can be created by using HTML.However, to create pages with rich features, you need to use advanced DHTML, XML etc. In this unit,we confine to the creation of web pages using HTML. Using HTML, it is also possible to add imagesetc. to a web page. A web page can be frame based. A web page can also have forms as part of it whichcan be designed using HTML. JavaScript and VBScript facilitate validation. Though JavaScript and VBScript have several features which perform more tasks apart from validation, we do not dwell into themas they are beyond the scope of the unit. One of the tools that can be used to develop web pages isMicrosoft Expression Web. Also, explained in this unit are some scripting tools in brief.4.1OBJECTIVESAfter studying this unit, you should be able to Know about basic HTML Create simple web pages using HTML Insert images into web pages Create simple frame based web pages Design forms Know the features of Microsoft Expression Web Know about various scripting tools4.2Basics web page design using HTMLHTML is a markup language used to create hyper texts that are platform independent. Markup featurecan be links to other web pages, e-mail, multimedia, documents, databases etc1

Structure of HTMLA html file consists of two sections Head BodyTags are used in to identify each sections like head, body, title, paragraphs, tables, images, etc.,Syntax of HTML tags: tag name Text Contents /tag name Head begins with Head tag and ends with /head tag.Title begins with Title tag and ends with /Title Body begins with body tag and ends with /body Heading tags start form H1 to H6 and ends with /H1 to /H6 The names of tags are not case sensitive.Syntax of HTML file ! Comment for html file head Title This text will appear on the window title /Title Body Html statement 1Html statement 2Html statement 3 .Html statement n /Body /head Each statement can be of type as follows: Headings Paragraph text Table Anchor to some other page, image, audio/video file, etc., Multimedia (audio, video, image, animated image) Forms Frames4.2.1Method to create and view the web pages in browser2

Writing HTML fileHTML files are written in any editors like edit (at command prompt), Notepad, WordPad or any editor.Once the contents of html are written, the file should be saved as filename.html.Viewing the contents of HTML fileThe output of html file is viewed using Internet Explorer, Modzilla, and Opera, Mosaic or any internetbrowsing tools. Steps to see the output of html file:1. Go to File option and select the open option2. Browse the html file and select html file3. Click on OK to see the output of html file in internet explorer or any other browsers.A web page contents has headings, paragraphs, tables, images, frames, etc. The headings in html aredefined from H1 to H6 with the size of heading in H1 large and size of heading in H6 small. Thefollowing example gives an illustration of H1 to H6.Example 1: Write a html file with title “Welcome to HTML World”, display headings H1 to H6Solution:HTML code1. Using Notepad, type the following: head Title Welcome to HTML /Title Body H1 The size of HTML heading is H1 h1 H2 The size of HTML heading is H2 h2 H3 The size of HTML heading is H3 h3 H4 The size of HTML heading is H4 h4 H5 The size of HTML heading is H5 h5 H6 The size of HTML heading is H6 h6 /Body /head 2. Save the file with webpage1.html ( or any name with .html extension)3. Click Internet explorer or any browser. Go to File option and Open the filewebpage1.html (refer to figure 4.1, figure 4.2, figure 4.3, figure 4.4)3

Figure 4.1Figure 4.2Figure 4.3Figure 4.44. Click OK and the output appears as shown in figure 4.5.Figure 4.54

4.2.2HTML BASIC TAGSThe following are Paragraph and Line break tags.Paragraph tag p is used to start a new paragraph or to end a sentence and start a new paragraph. Forparagraph tag /p is not mandatory. Line break br is used to break a line i.e have empty/blank lineExample 2. Write a html file to illustrate paragraphs and breaksSolution: HTML codeThe sequence of steps is same as example 1. The contents of html file are head Title Welcome to HTML World /Title Body h3 About Web page! /h3 h4 p A collection of related Web pages is called a Web Site. Web sited are housed on Webservers, host computes that store thousands of web pages. Copy a page onto the server iscalled as posting or uploading or publishing. Generally it is called uploading. Copy apage from server to the user’s computer is called downloading. br br Posting isgenerally used with newsgroups internet. br p Web pages are used to distribute news, travel information, banking, education, etc. /h4 /Body /head The output is shown in figure Figure 4.65

The common HTML tags for text formatting are shown in table 4.1.Tag symbol ! b i u ol ul li tt strike sub sup big small DescriptionComments to html code and will NOT appear in thewebpage, meant for html writer.Bold textItalic textUnderline textOrdered listUnordered listList itemTypewrite fontStrike throughSubscriptSuperscriptBig fontSmall fontTable 4.1Example 3. Design a web page to illustrate features of table 4.1.Solution: HTML CodeUsing Notepad, the following html code can be typed and saved as webpage3.html. The output is shownin figure 4.7. ! This html web page illustrates tags of table 4.1 head Title HTML Tags Table 1 /Title Body b Unordered List /b ul li One li Two li Three li Four /ul i Ordered List /i ol li One li Two li Three li Four /ol Figure 4.7 ! Nesting of List 6

u Nesting of Lists /u ol li One li Two ul li Two sub item unordered li Two sub item unordered /ul li Three ol li Three sub item one li Three sub item two /ol li Four /ol /Body /head Anchor tag is demonstrated in the following example.In web pages often some words needs further explanation, and anchor tag can be used to link currentweb page to other web page or document or short notes or multimedia application. Wherever there is ananchor tag, hand symbol appears and when the user clicks on it, the corresponding page is opened.Example 4: Write html file using anchor tagsSolution: HTML Code head Title Anchor Tag /Title Body In web pages often some words needs further explanation, and anchor tag can be used to link br current web page to other web page or document or short notes or multimedia application. br Wherever there is an anchor tag, hand symbol appears and when the user clicks on it, the correspondingpage is opened. br br The following anchor which is underlined gives a href "webpage3.html" Ordered and Unordered List /a illustration /Body /head The output is shown in figure 4.8.7

Figure 4.8Text can be aligned as shown in following tags: h2 align center This is centered text /h2 h2 align justify This is justified text /h2 h2 align left This is lefttext /h2 h2 align right This is righttext /h2 Handling tablesTable is used to display data in row and column order. Splitting of rows and columns is also supportedin html. Various types of tags in table handling are as given in table 4.2.Table Tag table border tr td DescriptionTable border with width, cell padding and cellspacing attributesTable row with column and row spanTable descriptor with align, row and column spanattributeTable 4.2Example 6: Write code in HTML to illustrate table tags.Solution: HTML Code html head Title Table Example using HTML /Title /head Body table border 3 caption Big List of Car Prices /caption tr th colspan 2 b Maruthi8

th colspan 2 th colspan 2 HyundaiTata /b tr th Model th Price (Rs) th Model th Price (Rs) th Model th Price (Rs) tr td Classic 800 AC td 3,00,000 td Sonata Gold td 16,50,000 td Indica td 3,20,000 tr td Esteem td Santro td IndigoAC td 5,00,000 td 4,00,000 td 4,50,000 tr td Versa AC td Getz td Indigo Max td 4,50,000 td 3,50,000 td 6,50,000 /Body /html The output is as shown in figure 4.9.Figure 4.94.2.3Image tagAttributes of image are src, height, width, align, altAlign can be set as left, right, middle, top, text top, abs middle, baseline or bottomExample 5: Display image bluehill.jpg with width 150, height 250, hspace 25, vspace 25Solution: HTML code ! To display image html head Title Blue Hills /Title /head Body h1 Blue Hills /h1 hr size 4 img src "c:\blue hills.jpg" align left width 150 height 150 hspace 20 vspace 20 /img br clear left Blue hills provide a good healthy and environment and close to nature. It is right in herbal plants usefulfor all species of life.9

hr size 2 h1 Bordered Sunset /h1 img src "c:\Sunrise.jpg" align left width 150 height 150 hspace 20 vspace 20 border 5 /img Sun rise wishes all of a good and happy day. /Body /html Figure 4.10The output is depicted in figure 4.10.Animated gif images can be downloaded from internet with .gif as extension.Syntax to insert animated Gif in html file: img src ”animated.gif” alt ”text message” width w height h hspace hs vspace vs To insert anchor with animated gif the following syntax can be followed: a href ”Animation Concept” img src ”animated.gif” alt ”text message” width wheight h hspace hs vspace vs /a Syntax to insert movies in html file: embed src “movie.mov” width ”w” height ”h” /embed Syntax to insert sound in html file: embed src “sound.mp3” autoplay true /embed 10

4.2.4 FramesWindow is called a container and can be divided in number of areas and each area is called a frame.Each frame has a name, can have html code and size can dynamically once the window area getsmodified.The following HTML code divides frame as two columns of size 50% and 50% frameset cols ”50%,50%” ---------------------- /frameset 50%Left Frame50%Right FrameFigure 4.11The following HTML code divides frame as two columns of size 50% and 50% and right frame tofurther 40% and 60% as shown in figure 4.12. frameset cols ”50%,50%” ----------- frameset rows "40%, 60%" -------------------- /frameset /frameset 40%topframe50%Left frame60%BottomframeFigure 4.12Example 6. Write html file to display the frame shown aboveSolution: HTML CodeThis example has main html file as cc.html and it has creates three frames and first frame contains htmlfrom c1.html, second frame contains html code from c2.html and third frame contains html fromc3.html.The output is shown in figure 4.13.cc.html html head title Frame Illustration /title /head frameset cols "50%,50%" frame name "leftframe" src "c1.html" frameset rows "50%, 50%" frame name "topframe" src "c2.html" frame name "bottomframe" src "c3.html" /frameset 11

/frameset /html c1.html html head title Contents /title /head body h1 Contents /h1 Travelling by car is easy and comfortable /body /html c2.html html head title Welcome /title /head body h1 Welcome /h1 Select any text and you will be happy /body /html c3.htmlFigure 4.13 html head title Frame World /title /head body h1 Frames /h1 This example has THREE frames /body /html 4.2.5 FormsForms help to develop interactive applications. Dynamic html supports active interactive webapplications. Forms can have the following features Text with paragraphs Drop down list Dialog box Check box, radio button Buttons Text Box12