Text has been pre-formatted if used. Example 
 Pre formated text that will keep both spaces and line breaks. 
 Pre formated text that will keep both spaces and line breaks. 
 Used to display long quotations. Example 
 Basically an HTML document is a plain text file that contains text and nothing else. When a browser opens an HTML file, the browser will look for HTML codes in the text and use them to change the layout, insert images, or create links to other pages. Since HTML documents are just text files they can be written in even the simplest text editor 
 And here, we have a LONG quotation: Basically an HTML document is a plain text file that contains text and nothing else. When a browser opens an HTML file, the browser will look for HTML codes in the text and use them to change the layout, insert images, or create links to other pages. Since HTML documents are just text files they can be written in even the simplest text editor  Used to display short quotations. Will automatically place quotations around the text. Example  Here we have a small quotation. This tag will automatically place quotations around the text. 



www.engineeringsolution.in



 INTERNET FUNDAMENTALS



Here we have a small quotation. This tag will automatically place quotations around the text. 
 Used to define a paragraph. Example 
 Paragraph Text goes here 
 Paragraph Text goes here. 
 Used to insert a single line break in the text. (There is no end tag, so 

 is wrong). Example I am on one line and 
 then I am on another. I am on one line and then I am on another. Header Tags 
 Makes the text appear as the largest header. 
 Makes the text appear as the smallest header. Example 
Header 1
 Header 1 
Header 2
 Header 2 
Header 3
 Header 3 
Header 4
 Header 4 
Header 5
 Header 5 
Header 6
 Header 6 Hyperlinks Hyperlinks can take the form of linking to one web page to another web page, opening an email or FTP client, or call for some other action. They are how we get from point A to point B on the World Wide Web; they are what make the web user friendly and convenient. A hyperlink can also move you from one point to another within a single page by using the "#" symbol. Creating Hyperlinks We use  element (A stands for anchor) to create hyperlinks in HTML. The most common form of hyperlink is undoubtedly the text hyperlink, where the hyperlink itself usually appears underlined and in a different color from the surrounding text to see it off from that text. Creating Text Hyperlinks The standard form of a hyperlink element looks like this: Find the answers at W3C.  tag is used to set up the a hyperlink and HREF attribute to set the target of the hyperlink to



www.engineeringsolution.in



 INTERNET FUNDAMENTALS



http://W3C.org (which is the home page for the World Wide Web Consortium). This the URL that browser will navigate to when the user clicks the link. The text inside the  element will appear in the hyperlink style for the page. Example       
 Creating A Hyperlink 
 Here is a Website to Check Out... W3C!    The results of this HTMLappear in following figure: Creating Graphical Hyperlinks In addition to text, you can also use images as hyperlinks. Doing so is easy to do – just put an  element in the  element instead of the text. Here is an example:       
 Creating A Graphical Hyperlink 
      



www.engineeringsolution.in



 INTERNET FUNDAMENTALS



The results of this HTML appear in following figure. When the user clicks the image in the figure, the browser navigates to the hyperlink’s target, http://W3C.org



Linking to a Section of a Document It is also possible to link to a section of a document instead of linking to the document as a whole. Anchors can be used. Creating anchors is another valuable use of the  element. Anchors supply a name to a section of a page, so you can use the anchor’s name to navigate to that section. Example       
 Linking to A Section In A Page 
 Click here to go to the bottom of the Page. 
 
 
 
 
 
 
 
 
 
 This is the bottom of the page.    Results are shown in the figures given below: Figure: Creating an anchored Hyperlink Figure: Navigating to an Anchor Creating Navigational Aids with Hyperlinks



www.engineeringsolution.in



 INTERNET FUNDAMENTALS



One popular use of hyperlinks is to make it easy to navigate around a web site using image buttons, like arrows. Here is an example that displays arrows to let the user navigate to the next or previous page in a series of pages, or to navigate to the home page just by clicking the appropriate image:       
 Creating Graphical Navigationa Aids 
 Want to get somewhere fast? Click a button below... 
             The result of this HTML appears in the figure given below: Using Front Page Express and Plug-ins Overview FrontPage Express is a Hyper Text Markup Language (HTML) Editor. FrontPage Express is a simpler version of FrontPage. Once you have mastered FrontPage Express, it would be very easy to upgrade to FrontPage to allow for more details to your web page. FrontPage Express is very similar to Word97. Toolbar



www.engineeringsolution.in



 INTERNET FUNDAMENTALS



Text Entering text into a webpage is much like entering text into a word processor. Simply type the text you want to appear and then use the following steps to spice it up. Layout The text on your webpage doesn't have to all be in paragraph blocks. You do something: Line Break When you press ENTER at the end of a line of text, the cursor drops down two lines and starts a new paragraph. The only way to get text directly underneath the first line of text is to finish filling up the line and letting word-wrap do the rest But sometimes you want to go to the very next line after only a few words. An example of this is a centered heading: Jenny Kiaschko Ed Psy 490NET · This is called a Line Break. To create a line break, simply hold down the SHIFT key and press ENTER. · Alignment You can align text and pictures to the right, center, or left of your webpage. To do this, highlight the text or picture you want to move and click on either the right, center, or left buttons on the toolbar. If you haven't started typing the text, just click on either the right, center, or left buttons and the cursor will move to that part of the page. · Indents You can indent blocks as text as well. To indent some text, click the Increase Indent Icon on the toolbar. To out-dent or un-indent some text, click the Decrease Indent Icon on the toolbar. When you indent or out-dent a block of text, the entire paragraph that the text is in is indented or out-dented. So be careful when using indent and out-dent, especially inside of lists. Lists You can also make lists. Lists are indented and denoted and are especially good for outlines. Here is an example of the two major kinds of lists, the Numbered List and the Bulleted List: Numbered List Bulleted List · Apples · Oranges · Kiwi · Tomatoes o Dogs o Cats o elephants o Sheep To make a list, select either the Numbered List or Bulleted List Icon from the toolbar. Type the text of the first list item. When you hit ENTER, the cursor drops down to the next line (not a new paragraph) and another number or bullet appears for the next list item. To end the list, press ENTER after you've typed the last list item. Then, deselect the selected List Icon. The cursor will then drop down to a new paragraph and will be out-dented to the indent before the list was started. In the case of outlines, you may want to nest lists, or have a list inside of another list. It



www.engineeringsolution.in



 INTERNET FUNDAMENTALS



would look something like this o Math Department _ Calculus · Jenny Kiaschko · Nancy Pence _ Algebra · Matt Reed · Joby Crum _ Geometry · Robin Ehrhart · Jenny Kiaschko · Erin Scheffler o Science Department and so...build a nested list, start by creating the top most list, or parent. (In the case above, you'd make a Numbered List and type in the first item.) Then to make a sub-list of that item, do the following: o Press ENTER after typing in the list item of the parent list. o Click the Increase Indent Icon. o Select the either the Numbered List or Bulleted List Icon from the toolbar. (In the case above, you'd select Numbered List.) o Type in the first item of the nested list. To end a sub-list and return to its parent list (In the example above, end the list containing Mike Loosbrock and Matt Christians and get back to list containing Work Study, Part-Time Employees, and Staff), do the following: · Press ENTER after typing in the last item of the sub-list. · Either press BACKSPACE twice, or click the Decrease Indent Icon twice. Attributes FrontPage Express allows you to make all the same attribute changes you can make in Word97. The first step in changing text attributes is to highlight the text you want to modify with the mouse. You can then make the following changes: 1. Font Type Font type is the font family of text, such as Comic Sans, Times New Roman, and Courier New. To change the font type, select the font you want from the Font Type List Box on the toolbar. (Try not to use a lot of non-standard fonts because if the font is not loaded on the computer where your page is being viewed, the font will appear as the browser default.) 1. Font Style The style of the text can either be bold, italics, or underline. To change the font style, select one or more of the Style Icons on the toolbar. · Font Color The color of the text can also be changed. To change the font color, select the Text Color Icon on the toolbar. The Color Dialog Box appears. Choose the color you want and click OK. · Font Size You can change the font size by clicking the either the Increase TextSize or Decrease Text Size Icon from the toolbar. Images



www.engineeringsolution.in



 INTERNET FUNDAMENTALS



You can insert images (*.gif, *.jpg, *.bmp) into your webpage. Keep in mind that you need to keep your images relatively small in size, otherwise, your pages will take a long time to download. To insert an image, put your cursor where you want to place the image and then: 1) Select the Insert Image icon from the toolbar. 2) The Image Dialog Box appears. Click the Browse Button. 3) Find and select the image you wish to insert and click OK. The image should appear on the webpage. After you have placed the image on the webpage, you can change the attributes of the image by right clicking on the image and choosing Image Properties. The Image Properties Dialog Box Links Links create a connection between more than one of your pages. Links also can connect your page to other pages across the World Wide Web. To link to a webpage other than your own, determine where you want to link to (For example, you might want the viewer to click on to http://www.cnn.com). To do this, first highlight the text, picture, or both, that you want to be linked (in this case, we would highlight the words "CNN News"). Next click the Hyperlink Icon on the toolbar Appears. Choose the Appearance Tab. on the words "CNN News" and have them sent Create or Edit The Create Hyperlink Dialog Box should appear, as below. Choose the World Wide Web tab. Then make sure the Hyperlink Type List Box is set to "http:" on the Hyperlink Type List Box. Lastly, on the line titled URL type the address of the webpage. In this case we would type out http://www.cnn.com. Click the OK and you have just created a link that should look andwork something like this link: CNN News. To link your own pages together, you first need to determine how the pages are to be connected. For example, you may want the viewer to click on the word "Hobbies", and have it go to a separate page of yours. To do this, follow the same directions as above: highlight the text and click the Create or Edit Hyperlink Icon on the toolbar. The Create Hyperlink Dialog Box should appear, as below. Choose the World Wide Web tab. Next, select "(other)" for the Hyperlink Type:. On the URL line type the name of your other page. In this case we would type "hobbies.htm". Once that is done you can click the OK and you will have created a link to another one of your pages.



Special Features The one line text box allows you to add a box for interactive typing, such as the one below. The scrolling text box allows you to add a scrolling text box for more information than a one line text box can handle. This is a good way to ask for a great amount of information while using minimal space. The check box allows you to add a box to gather information in a yes/no format. Please Vote for One Person Jennifer Jason Brian The radio button box gives you the same capabilities as the check box only in a radio button



www.engineeringsolution.in



 INTERNET FUNDAMENTALS



form. Please Vote for One Teacher Jim Levin Sandy Levin Michael Waugh The drop down menu box allows you to give a list of choices in a compressed amount of space. Jennifer Jason The push button box allows you to add a button for different tasks: submit or reset. Submit Reset The tools listed above are extremely useful because it allows you to add higher level features to your web page without having to know any type of coding. Plug-ins In computing, a plug-in (or plug-in) is a set of software components that adds specific capabilities to a larger software application. If supported, plug-ins enables customizing the functionality of an application. For example, plug-ins is commonly used in web browsers to play video, scan for viruses, and display new file types. Well-known plug-ins examples include Adobe Flash Player and QuickTime. Applications support plug-ins for many reasons. Some of the main reasons include: · to enable third-party developers to create capabilities which extend an application · to support easily adding new features · to reduce the size of an application · to separate source code from an application because of incompatible software licenses Specific examples of applications and why they use plug-ins: · Email clients use plug-ins to decrypt and encrypt email. · Graphics software use plug-ins to support file formats and process images (Adobe Photoshop) · Media players use plug-ins to support file formats and apply filters World Institute Of Technology 8km milestone ,Sohna Palwal Road , NH-71 B ,Sohna , Gurgaon ,Haryana. Website : www.wit.net.in E-mail : [email protected] · Microsoft Office uses plug-ins (better known as add-ins) to extend the capabilities of its application by adding custom commands and specialized features · Software development environments use plug-ins to support programming languages · Web browsers use plug-ins to play video and presentation formats (Flash, QuickTime, Microsoft Silverlight, 3DMLW)



www.engineeringsolution.in



 INTERNET FUNDAMENTALS



Section C: Languages Basic and Advanced HTML Presenting and Arranging Text Using Paragraphs and Line Breaks 
 tag starts a new paragraph and 
 tag allows you to skip to the next line of text. For example:      Here is a line of text. 
 Using the < BR > tag skips to the next line. 
 On the other hand, using the < P> tag starts a new paragraph. 
   The results are shown in the figure given below: Using 
 and  Two important formatting elements are the 
 and  elements. These elements will become very useful when working with style sheets (to be covered later). Using 
 (which stands for division) and , you can specify a range of text and style it as you want it. 
 is used to select a block of text and  to select text inline. Here is an example using the 
 tag with its ALIGN parameter to set the alignment of text without using the 
 tag:      
 Manager 
 SlowPoke Products Inc. 
 USA 
 
 Dear You: 
 When are you going to ship my order? 
 . 
 
 President 
 NeedItNow, Inc. 
 Speedy, CO 
   The results appear in following figure: On the other hand  can be used to mark sections of text inline or text in the midst of the other text. For example:      This is not going to do!   The result of this HTML appears in the following figure: Specifying the Font - 



www.engineeringsolution.in



 INTERNET FUNDAMENTALS



The  tag lets you select the size, color and face of the text. For example:      Here is some text.   The results appear in the following figure: Setting the Base Font -  This element sets the font for the default text enclosed in the element, replacing the default font used by the browser. You can specify relative sizes with respect to this default font with the  tag. In the following example, I’m setting the base font size to 4 (possible values range from 1 through 7), then temporarily increasing that size to 6 for one word with a  tag by adding 2 to the base font size.       Here is some biggertext.   The results appear in the following figure: Making Text Blink -  This tag makes the text to blink. For example:    



www.engineeringsolution.in



 INTERNET FUNDAMENTALS



   Happy New Year!!!    The results appear in the figure given below: Note:- This tag is not supported by all the browsers. Creating Horizontal Rules - 
 Draws a horizontal line to separate or group vertically. A horizontal rule is a horizontal line that serves to break up a page or to group items together. Some of the attributes of this tag are ALIGN, COLOR, NOSHADE, SIZE, STYLE and WIDTH. Here is an example showing a number of ways to display and align horizontal rules:      Here is what 
 looks like: 
 
 Here is what 
 
 Here is what 
 
 Here is what 
 
 Here is what 
   Following figure shows the results: Centering Text -  This tag centers its enclosed text in the Web browser. Here is an example of  at work centering multiline text:   



www.engineeringsolution.in



 INTERNET FUNDAMENTALS



   As you can see. 
 the  tag 
 can center multi-line text.    The results are shown in the following figure: Displaying Text In A Scrolling Marquee -  This tag displays scrolling text in a “marquee” style. Some of the attributes of this tag are: · ALIGN – Sets the alignment of the text relative to marquee. Its values can be TOP (default), MIDDLE or BOTTOM. · BEHAVIOR – Sets how the text in the marquee should move. · SCROLL – (the default; text scrolls the marquee), SLIDE (text enters from one side and stops at the other side), or ALTERNATE (text seems to bounce from one side to the other). · BGCOLOR – Sets the background color for the marquee box. · DIR – Gives the direction of the text. Possible values: LTR: left to right text or table and RTL: right to left text or table. · DIRECTION – Sets the direction the text should scroll. Can be LEFT (the default), RIGHT, DOWN, or UP. Here is an example showing various  options at work:       
 Here's a marquee! 
   
 Using Marquees 
  


www.engineeringsolution.in



 INTERNET FUNDAMENTALS



BGCOLOR="RED" WEIGHT=40 WIDTH=300 DIRECTION="DOWN"> 
 Here's another marquee! 
   
 Here's a marquee! 
   The results are shown below: Images in Web Pages Adding an Image to a Web Page -  This tag inserts an image into a web page. Some of the attributes of this tag are: SRC = "text string" SRC tells where to get the picture that should be put on the page. SRC is the one required attribute for . For example, suppose that the GIF file "../graphics/pumpkin.gif" is in the same directory as this page. ALT (text) The "alt" attribute defines an alternate text designed to be a textual replacement for objects that are usually not supported by some browsers. It also serves as additional information for browsers that do support these objects (images, forms and applets). Browsers may display this text as a tool tip when the mouse is over the object. ALIGN This attribute specifies the alignment of the element. These three values set the element's position with respect to the surrounding text. · bottom: Means that the bottom of the object should be vertically aligned with the current baseline. This is the default value. · middle: Means that the center of the object should be vertically aligned with the current baseline. · top: Means that the top of the object should be vertically aligned with the top of the current text line. These two values set the position of a floating element: · left: Cause the image to float to the current left margin. · right: Cause the image to float to the current right margin. WIDTH (length) Assigns a width to the element. HEIGHT(length) Assigns a height to the element.



www.engineeringsolution.in



 INTERNET FUNDAMENTALS



BORDER (pixels) Specifies the element's border width. HSPACE (pixels) This attribute works as a margin for the element, defining the amount of white space to be inserted at the left and right sides of the element. VSPACE (pixels) This attribute works as a margin for the element, defining the amount of white space to be inserted at the top and bottom sides of the element.   
Norwegian Mountain Trip
    The result is shown below: Norwegian Mountain Trip Creating Lists Lists let you display information in a compact and tight format. There are three kinds of lists: · Unordered Lists · Ordered Lists · Definition Lists Unordered Lists You can create unordered lists with elements like 
. Each item in the list gets its own element using the 
 list item tag. Here is an example showing how to create a bulleted list:      
 Creating an Unordered List 
 Here are some items to consider when buying a computer: 
 
 Speed 
 Cost 
 RAM 
 Disk Space 
 CD ROM Speed 
 



www.engineeringsolution.in



 INTERNET FUNDAMENTALS



 The result is shown in the following figure: Ordered Lists While unordered lists display a simple bullet before each list item, ordered lists use a number system or alphabets to indicate that the items are ordered in some way. For example:      
 Creating an Ordered List 
 Here are some items to consider when buying a computer: 
 
 Speed 
 Cost 
 RAM 
 Disk Space 
 CD ROM Speed 
   The result is shown in the figure below: Definition Lists These lists include both terms and their definitions. 
 element is used to create these lists, 
 for terms, and 
 for the definition of each term. For example:      
 Creating a Definition List 
 Here are some items to consider when buying a computer: 
 
 Speed 
 CPU speed in Megahertz. 
 Cost 
 Make sure to keep this down. 
 RAM 
 Amount of memory in the computer.



www.engineeringsolution.in



INTERNET FUNDAMENTALS



 Disk Space 
 Get plenty of Gigabytes. 
 CD ROM Speed 
 Get at least 24X 
   The result is shown below: Creating Tables  element is used to create tables. It encloses elements like , , ,  etc. Creating a basic table The basic structure of an HTML table consists of the following tags: · Table tags: 
, 
, 
, , 
 · Row tags:   · Cell tags:   Constructing an HTML table consists of describing the table between the beginning table tag, , and the ending table tag,. Between these tags, you then construct each row and each cell in the row. To do this, you would first start the row with the beginning row tag, , and then build the row by creating each cell with the beginning cell tag, , adding the data for that cell, and then closing the cell with the ending cell tag, . When you finish all of the cells for a row, you would then close the row with the ending row tag, .Then, for each new row, you would repeat the process of beginning the row, building each cell in the row, and closing the row. The following table is an example of a basic table with three rows and two columns of data. Data 1 Data 2 Data 3 Data 4 Data 5 Data 6 The codes that generated this table look like this: 
 
 
Data 1
 
Data 2
 
 
 
Data 3
 
Data 4
 
 
 
Data 5
 
Data 6
 
 




www.engineeringsolution.in



INTERNET FUNDAMENTALS



This table contains no border, title, or headings. If you wish to add any of these elements to your table, you need to include additional HTML codes. Adding a border, title, and headings In addition to the basic table tags, several options are available for adding additional elements to your table. For example, if you add a border, title, and column headings to the table in the previous section, the table would then resemble the following: TABLE TITLE Column A Column B Data 1 Data 2 Data 3 Data 4 Data 5 Data 6 The following codes generated the border, TABLE TITLE, and Column A and Column B headings for this table:  Notice that the beginning table tag, 
 
 
 

TABLE TITLE
 
 
 
Column A
 
Column B
, now includes the border tag, BORDER="5", which places a border around the table and frames each cell. The number that you ascribe to the border tag, BORDER=n, sets the width of the table border. Depending on how you design your table, you can then determine the border size that best suits your table and the overall design of your web page. To add a title to your table, you would place the title and the attributes of that title between the row commands,  and . The heading codes, , define a heading cell and, by default, these codes center the heading and set it in bold type. However, if you want the title to span across the columns below it, you need to include the COLSPAN=n code. Since this table has two columns, the COLSPAN="2" code was necessary. To add emphasis to the header, you can use the header commands to make the text larger. In this table, notice that the 
 and 
 commands made the title larger. Finally, the 
 tag created a space above the title. The individual column headings are also described by the heading codes, . Since these codes, by default, center the heading and set it in bold type, no additional commands or attributes were included in the heading commands. Polishing your table


www.engineeringsolution.in


INTERNET FUNDAMENTALS


To give your table a more polished look, you can include commands that will adjust the size of your table, add space in the cell, add space between rows, and align the data in a cell. Working with these commands is basically a process of trial and error to create the most appealing presentation of your information. The type of table that you create and the overall design of your web site will help you determine what works best for your table. Some of the commands that enable you to customize your table include: · The WIDTH=n% command sets the width of your table as a percentage of the screen. The letter n designates the percentage that you assign to this command. For example, if you want the width of your table to be one half the width of the screen, you would include the WIDTH="50%" command in the beginning table command. · The CELLPADDING=n command adjusts the vertical dimension of the cells. The letter n designates the numerical value that you assign to this command. · The CELLSPACING=n command sets the space or border around the cells. The letter n designates the numerical value that you assign to this command. · The ALIGN=(LEFT, RIGHT, or CENTER) command will horizontally align the data in a cell. For example, if you wish to place the data in the center of each cell in a row, you would include the ALIGN=CENTER command within the row command. · The VALIGN=(TOP, MIDDLE, or BOTTOM) command will vertically align the data in a cell. For example, if you wish to place the data in the center of each cell in a row, you would include the ALIGN=MIDDLE command within the row command. TABLE TITLE Column A Column B Data 1 Data 2 The following codes, along with codes previously discussed, created this table: 
 and 
 and 


 
 

TABLE TITLE
 
 
 
 
Column A
 
Column B
 
 
 
Data 1
 
Data 2
 
 
 Notice that the TABLE command now includes the WIDTH="50%" command. This command extends the table across one half of the width of the text. Also, the CELLPADDING="4" command increases the vertical dimension of the cells, and the CELLSPACING="3"command increases the border around the cells. Finally, the ALIGN="CENTER" command places Data 1 and Data 2 in the center of the cell. Working with Frames



www.engineeringsolution.in



INTERNET FUNDAMENTALS



Simply put, a frame is a web browser window within another web browser window. By using frames, you can create web pages consisting of multiple windows. Frames are related to one another in a manner determined by you, the web page author. For example, you can set up your web page so that a link in a frame will call up a page in the same frame, another frame, or the entire browser window. Creating the frames Let's suppose you want to create a web page consisting of two frames. The frame on the left will contain a list of services. When you select a service, a corresponding description will then appear in the right frame. Following figure shows a sample page: To create a page such as this, you first need to set up your main page or index.html file to accommodate frames. There are two HTML tags used for frames:  and . The  tag sets the width of each frame as a percentage of the total width of the web page. The  tag assigns a name to each frame and indicates which file it will display. Here is a sample index.html file that creates a web page with two frames. Note that the  tag normally found in HTML files is not needed.          The FRAMESET COLS code sets up the frame size starting from left to right. So from this example, you can see that the left frame will take up 30% of the page's width and the right frame will take up 70% of the page's width. Next, the FRAME code indicates: · whether or not a scroll bar will automatically appear with the frame, · the content that will appear in the frame by indicating the filename, and · the name of the frame. In this case, the left frame will automatically contain a scroll bar, indicated by the FRAME SCROLLING=YES code. This frame will display the file called links.html, indicated by the source code shown as SRC. Finally, the NAME code indicates that the frame is appropriately called left. The right frame will not automatically contain a scroll bar since the SCROLLING code is not included. (A scrolling bar will appear, however, if it is needed.) This frame will display the file called intro.html and the name of this frame is right.



www.engineeringsolution.in



INTERNET FUNDAMENTALS



Note that the even though the example uses the NAME code, assigning names to the frames is not required. It is helpful, however, to include it because the names give you as an easy way to indicate in which frame you wish to target information. So to recap, our sample code indicates that the file intro.html will contain introductory material and will appear in the right frame when the web page opens. No frame codes are needed in the intro.html file since it is simply an html file that displays in the right frame. A sample intro.html file might look like this:      
  
Computer Services
 
Introduction
 
 The Computer Services Department is responsible for supporting all the company's computers and networks and providing information services such as computer seminars, technical documentation, and publications.   Now that you have the information that will automatically open in the right frame, you can continue by creating a file for the left frame. Targeting information The left frame will contain a file called links.html which will include links to other pages. When someone clicks on a link, however, you can set it up so that the information appears in the right frame. To target information to the right frame, you must include the proper codes as shown in the example file below:      
Computer Services Topics
 
 Introduction 
 Help Desk 
 Seminars 
 



www.engineeringsolution.in



INTERNET FUNDAMENTALS



 In the sample code, you can see the standard A HREF code is used to create a link. This linking code also contains the target code which indicates where you want to display the information. Our sample file is set up so that when someone selects a link, the resulting file appears in the right frame. This is evident by the fact that the target tag is set to "right," which is the name you assigned to the right frame in the index.html file. In addition, note that the file intro.html appears not only when the web page opens, but also when you click on the link Introduction in the left frame. It also assumes that you have created a helpdesk.html file and a seminars.html file with all the relevant information. Linking to other web pages Besides linking to your own HTML files, you can also set the links in your frame to other pages on the web. To do this, you would indicate the URL instead of a filename as in the following example:  Keep in mind, however, that if you set the link to a page that also has frames, the entire page will be shown in the target frame, and you will have frames within frames. To avoid this, don't set the link to appear in a frame. Instead, have it appear in its own window by eliminating the target tag as in this example:  JavaScript Language What is JavaScript? · JavaScript was designed to add interactivity to HTML pages · JavaScript is a scripting language · A scripting language is a lightweight programming language · JavaScript is usually embedded directly into HTML pages · JavaScript is an interpreted language (means that scripts execute without preliminary compilation) What's the difference between JavaScript and Java? Actually, the 2 languages have almost nothing in common except for the name. Although Java is technically an interpreted programming language, it is coded in a similar fashion to C++, with separate header and class files, compiled together prior to execution. It is powerful enough to write major applications and insert them in a web page as a special object called an "applet." Java is not considered an easy-to-use language for non-programmers. Javascript is much simpler to use than Java. With Javascript, if I want check a form for errors; I just type an if-then statement at the top of my page. No compiling, no applets, just a simple sequence. What can a JavaScript do? · JavaScript gives HTML designers a programming tool - HTML authors are normally



www.engineeringsolution.in



INTERNET FUNDAMENTALS



not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages · JavaScript can put dynamic text into an HTML page - A JavaScript statement like this: document.write("
" + name + "
") can write a variable text into an HTML page · JavaScript can react to events - A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element · JavaScript can read and write HTML elements - A JavaScript can read and change the content of an HTML element · JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing · JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser · JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve information on the visitor's computer How to Insert a JavaScript into an HTML document The HTML    The results are shown below: To insert a JavaScript into an HTML page, we use the  tells where the JavaScript starts and ends. JavaScript Statements Unlike HTML, JavaScript is case sensitive. A JavaScript statement is a command to a browser. The purpose of the command is to tell the browser what to do. Following JavaScript statement tells the browser to write "Hello World!" to the web page: document.write("Hello World!"); JavaScript Variables Variables are "containers" for storing information. Rules for JavaScript variable names: · Variable names are case sensitive (y and Y are two different variables) · Variable names must begin with a letter or the underscore character



www.engineeringsolution.in



INTERNET FUNDAMENTALS



Note: Because JavaScript is case-sensitive, variable names are case-sensitive. Declaring JavaScript Variables You declare JavaScript variables with the var keyword: var x; var carname; After the declaration shown above, the variables are empty (they have no values yet). However, you can also assign values to the variables when you declare them: var x=5; var carname="Volvo"; JavaScript Operators JavaScript Arithmetic Operators Arithmetic operators are used to perform arithmetic between variables and/or values. Following table lists arithmetic operators available in JavaScript: Operator Description + Addition - Subtraction * Multiplication / Division % Modulus (division remainder) ++ Increment -- Decrement JavaScript Assignment Operators Assignment operators are used to assign values to JavaScript variables. Following table lists assignment operators: Operator Example Same As = x=y += x+=y x=x+y -= x-=y x=x-y *= x*=y x=x*y /= x/=y x=x/y %= x%=y x=x%y The + Operator Used on Strings The + operator can also be used to add string variables or text values together. To add two or more string variables together, use the + operator. For example: txt1="What a very"; txt2="nice day"; txt3=txt1+txt2; After the execution of the statements above, the variable txt3 contains "What a very nice day". JavaScript Comparison and Logical Operators Comparison Operators Comparison operators are used in logical statements to determine equality or difference between variables or values. Given that x=5, the table below explains the comparison operators:



www.engineeringsolution.in



INTERNET FUNDAMENTALS



Operator Description Example == is equal to x==8 is false === is exactly equal to (value and type) x===5 is true x==="5" is false != is not equal x!=8 is true > is greater than x>8 is false < is less than x<8 is true >= is greater than or equal to x>=8 is false <= is less than or equal to x<=8 is true Comparison operators can be used in conditional statements to compare values and take action depending on the result. For example: if (age<18) document.write("Too young"); Logical Operators Logical operators are used to determine the logic between variables or values. Given that x=6 and y=3, the table below explains the logical operators: Operator Description Example && and (x < 10 && y > 1) is true || or (x==5 || y==5) is false ! not !(x==y) is true Conditional Operator JavaScript also contains a conditional operator that assigns a value to a variable based on some condition. Syntax variablename= (condition)?value1:value2 Example greeting=(visitor=="PRES")?"Dear President ":"Dear "; If the variable visitor has the value of "PRES", then the variable greeting will be assigned the value "Dear President " else it will be assigned "Dear". JavaScript If...Else Statements Conditional Statements Conditional statements are used to perform different actions based on different conditions. In JavaScript we have the following conditional statements: · if statement - use this statement to execute some code only if a specified condition is true · if...else statement - use this statement to execute some code if the condition is true and another code if the condition is false · if...else if....else statement - use this statement to select one of many blocks of code to be executed · switch statement - use this statement to select one of many blocks of code to be executed If Statement Use the if statement to execute some code only if a specified condition is true. if (condition) { code to be executed if condition is true }



www.engineeringsolution.in



INTERNET FUNDAMENTALS



Example:    
This example demonstrates the If statement.
 
If the time on your browser is less than 10, you will get a "Good morning" greeting.
   Result is shown below: If...else if...else Statement Use the if....else if...else statement to select one of several blocks of code to be executed. Syntax: if (condition1) { code to be executed if condition1 is true } else if (condition2) { code to be executed if condition2 is true } else { code to be executed if condition1 and condition2 are not true } Example:    
 This example demonstrates the if..else if...else statement. 
   The result is shown below: The JavaScript Switch Statement Use the switch statement to select one of many blocks of code to be executed. Syntax: switch(n) { case 1: execute code block 1 break; case 2: execute code block 2 break; default: code to be executed if n is different from case 1 and 2 } Example:    
This JavaScript will generate a different greeting based on what day it is. Note that Sunday=0, Monday=1, Tuesday=2, etc.
   The result is shown in the figure below: JavaScript Popup Boxes JavaScript has three kinds of popup boxes: Alert box, Confirm box, and Prompt box. Alert Box An alert box is often used if you want to make sure information comes through to the user. When an alert box pops up, the user will have to click "OK" to proceed. Syntax alert("sometext"); Example:         The result is shown in the following figure: Confirm Box A confirm box is often used if you want the user to verify or accept something. When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed. If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false. Syntax: confirm("sometext"); Example:         The result is shown below: Prompt Box A prompt box is often used if you want the user to input a value before entering a page. When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value. If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null. Syntax: prompt("sometext","defaultvalue"); Example:         The result is shown in the following figure: JavaScript Functions To keep the browser from executing a script when the page loads, you can put your script



www.engineeringsolution.in



INTERNET FUNDAMENTALS



into a function. A function contains code that will be executed by an event or by a call to the function. You may call a function from anywhere within a page (or even from other pages if the function is embedded in an external .js file). Functions can be defined both in the  and in the  section of a document. However, to assure that a function is read/loaded by the browser before it is called, it could be wise to put functions in the  section. How to Define a Function Syntax: function functionname(var1,var2,...,varX) { some code } The parameters var1, var2, etc. are variables or values passed into the function. The {and the} defines the start and end of the function. Example:      
  
   Following figure shows the result: JavaScript Loops Often when you write code, you want the same block of code to run over and over again in a row. Instead of adding several almost equal lines in a script we can use loops to perform a task like this. Loops execute a block of code a specified number of times, or while a specified condition is true. In JavaScript, there are two different kinds of loops: · for - loops through a block of code a specified number of times · while - loops through a block of code while a specified condition is true The for Loop The for loop is used when you know in advance how many times the script should run. Syntax



www.engineeringsolution.in



INTERNET FUNDAMENTALS



for (variable=startvalue;variable<=endvalue;variable=variable+increment) { code to be executed } Example The example below defines a loop that starts with i=0. The loop will continue to run as long as i is less than, or equal to 5. i will increase by 1 each time the loop runs.    
Explanation:
 
This for loop starts with i=0.
 
As long as i is less than, or equal to 5, the loop will continue to run.
 
i will increase by 1 each time the loop runs.
   Following figure shows the result: The while Loop The while loop loops through a block of code while a specified condition is true. Syntax: while (variable<=endvalue) { code to be executed } Example: The example below defines a loop that starts with i=0. The loop will continue to run as long as i is less than, or equal to 5. i will increase by 1 each time the loop runs:    



www.engineeringsolution.in



INTERNET FUNDAMENTALS



 Result: The do...while Loop The do...while loop is a variant of the while loop. This loop will execute the block of code ONCE, and then it will repeat the loop as long as the specified condition is true. Syntax: do { code to be executed } while (variable<=endvalue); Example: The example below uses a do...while loop. The do...while loop will always be executed at least once, even if the condition is false, because the statements are executed before the condition is tested:      Result: The break Statement The break statement will break the loop and continue executing the code that follows after the loop (if any). Example:    
Explanation: The loop will break when i=3.
   Result: The continue Statement The continue statement will break the current loop and continue with the next value. Example:      Result: Client-Side Programming in JavaScript Using JavaScript and forms Creating the form There are few differences between a straight HTML form and a JavaScript-enhanced form. The main one being that a JavaScript form relies on one or more event handlers, such as onClick or onSubmit. These invoke a JavaScript action when the user does something in the form, like clicking a button. The event handlers, which are placed with the rest of the attributes in the HTML form tags, are invisible to a browser that does not support JavaScript. Because of this trait, you can often use one form for both JavaScript and non-JavaScript browsers. Typical form control objects -- also called "widgets" -- include the following: · Text box for entering a line of text · Push button for selecting an action · Radio buttons for making one selection among a group of options · Check boxes for selecting or deselecting a single, independent option For example:



www.engineeringsolution.in



INTERNET FUNDAMENTALS



 Enter something in the box: 
 
  
 · FORM NAME="myform" defines and names the form. Elsewhere in the JavaScript you can reference this form by the name myform. The name you give your form is up to you, but it should comply with JavaScript's standard variable/function naming rules (no spaces, no weird characters except the underscore, etc.). · ACTION="" defines how you want the browser to handle the form when it is submitted to a CGI program running on the server. As this example is not designed to submit anything, the URL for the CGI program is omitted. · METHOD="GET" defines the method data is passed to the server when the form is submitted. In this case the attribute is puffer as the example form does not submit anything. · INPUT TYPE="text" defines the text box object. This is standard HTML markup. · INPUT TYPE="button" defines the button object. This is standard HTML markup except for the onClick handler. · onClick="testResults(this.form)" is an event handler -- it handles an event, in this case clicking the button. When the button is clicked, JavaScript executes the expression within the quotes. The expression says to call the testResults function elsewhere on the page, and pass to it the current form object. Getting a value from a form object Here's the full script you can try as you experiment with obtaining values from form objects. Load the page, then type something into the text box. Click the button, and what you typed is shown in the alert box.       
Enter something in the box: 
 
  
 



www.engineeringsolution.in



INTERNET FUNDAMENTALS



 The following figure shows the result of the above script: Here's how the script works. JavaScript calls the testResults function when you click the button in the form. The testResults function is passed to the form object using the syntax this.form (the this keyword references the button control; form is a property of the button control and represents the form object). I've given the form object the name form inside the testResult function, but you can any name you like. The testResults function is simple -- it merely copies the contents of the text box to a variable named TestVar. Notice how the text box contents were referenced. I defined the form object I wanted to use (called form), the object within the form that I wanted (called inputbox), and the property of that object I wanted (the value property). Setting a value in a form object The value property of the input box, shown in the above example, is both readable and writable. That is, you can read whatever is typed into the box, and you can write data back into it. The process of setting the value in a form object is just the reverse of reading it. Here's a short example to demonstrate setting a value in a form text box. The process is similar to the previous example, except this time there are two buttons. Click the "Read" button and the script reads what you typed into the text box. Click the "Write" button and the script writes a particularly lurid phrase into the text box. set_formval.html      
 Enter something in the box: 
 
  



www.engineeringsolution.in



INTERNET FUNDAMENTALS



   The result is shown in the figure below: · When you click the "Read" button, JavaScript calls the readText function, which reads and displays the value you entered into the text box. · When you click the "Write" button, JavaScript calls the writeText function, which writes "Have a nice day!" in the text box. Reading other form object values The text box is perhaps the most common form object you'll read (or write) using JavaScript. However, you can use JavaScript to read and write values from most other objects (note that JavaScript cannot currently be used to read or write data using the password text box). In addition to text boxes, JavaScript can be used with: · Hidden text box (TYPE="hidden"). · Radio button (TYPE="radio") · Check box (TYPE="checkbox") · Text area () · Lists () Using Hidden Text Boxes From a JavaScript standpoint, hidden text boxes behave just like regular text boxes, sharing the same properties and methods. From a user standpoint, hidden text boxes "don't exist" because they do not appear in the form. Rather, hidden text boxes are the means by which special information can be passed between server and client. They can also be used to hold temporary data that you might want to use later. Because hidden text boxes are used like standard text boxes a separate example won't be provided here. Using Radio Buttons Radio buttons are used to allow the user to select one, and only one, item from a group of options. Radio buttons are always used in multiples; there is no logical sense in having just one radio button on a form, because once you click on it, you can't unclick it. If you want a simple click/unclick choice use a check box instead. To define radio buttons for JavaScript, provide each object with the same name. JavaScript will create an array using the name you've provided; you then reference the buttons using the array indexes. The first button in the series is numbered 0, the second is numbered 1, and so forth. Note that the VALUE attribute is optional for JavaScript-only forms. You'll want to provide a value if you submit the form to a CGI program running on the server, however.     Following is an example of testing which button is selected. The for loop in the testButton function cycles through all of the buttons in the "rad" group. When it finds the button that's



www.engineeringsolution.in



INTERNET FUNDAMENTALS



selected, it breaks out of the loop and displays the button number (remember: starting from 0). form_radio.html      
  
 
 
 
 
  Result: Setting a radio button selection with HTML is simple. If you want the form to initially appear with a given radio button selected, add the CHECKED attribute to the HTML markup for that button:  You can also set the button selection programmatically with JavaScript, using the checked property. Specify the index of the radio button array you want to checked. form.rad[0].checked = true; // sets to first button in the rad group Using Check Boxes Check boxes are stand-alone elements; that is, they don't interact with neighboring elements like radio buttons do. Therefore they are a bit easier to use. Using JavaScript you can test if a check box is checked using the checked property, as shown here. Likewise, you can set the checked property to add or remove the checkmark from a check box. In this example an alert message tells you if the first check box is checked. The value is true if the box is checked; false if it is not. form_check.html



www.engineeringsolution.in



INTERNET FUNDAMENTALS



     
 
 Checkbox1 
 Checkbox2> 
 Checkbox3 
 
   Result: As with the radio button object, add a CHECKED attribute to the HTML markup for that check box you wish to be initially checked when the form is first loaded. Checkbox 1> You can also set the button selection programmatically with JavaScript, using the checked property. Specify the name of the checkbox you want to check, as in form.check1.checked = true; Using Text Areas Text areas are used for multiple-line text entry. The default size of the text box is 1 row by 20 characters. You can change the size using the COLS and ROWS attributes. Here's a typical example of a text area with a text box 40 characters wide by 7 rows:   You can use JavaScript to read the contents of the text area box. This is done with the value property. Here is an example: form_textarea.html       




www.engineeringsolution.in



INTERNET FUNDAMENTALS



   
   Result: You can preload text into the text area in either of two ways. One method is to enclose text between the  and  tags. This method is useful if you wish to include hard returns, as these are retained in the text area box. Or, you can set it programmatically with JavaScript using the following syntax: form.textarea.value = "Text goes here"; · form is the name of the form. · textarea is the name of the text area. · "Text goes here" is the text you want to display Using Selection Lists List boxes let you pick the item you want out of a multiple-choice box. The listbox itself is created with the  tag, and the items inside it are created by one or more  tags. You can have any number of  tags in a list. The list is terminated with a  tag. The list can appear with many items showing at once, or it can appear in a drop-down box - normally you see one item at a time, but click to see more. The markup for the two styles is identical, except for the optional SIZE attribute. Leave off SIZE to make a drop-down box; use SIZE to make a list box of the size you wish. Use the selectedIndex property to test which option item is selected in the list, as shown in the following example. The item is returned as an index value, with 0 being the first option, 1 being the second, and so forth (if no item is selected the value is -1). form_select.html       
 



www.engineeringsolution.in



INTERNET FUNDAMENTALS



 This is item 1 This is item 2 This is item 3  
   Result: If you want the text of the selected list item instead of the index, use this in the testSelect function: function testSelect (form) { Item = form.list.selectedIndex; Result = form.list.options[Item].text; alert (Result); } Other events you can trigger within a form I've used the onClick event handler in all of the examples because that's the one you are most likely to deal with in your forms. Yet JavaScript supports a number of other event handlers as well. Use these as the need arises, and the mood fits. In Navigator 2.x The event handlers used with form object are: · onFocus -- an event is triggered with a form object gets input focus (the insertion point is clicked there). · onBlur -- an event is triggered with a form object loses input focus (the insertion point is clicked out of there). · onChange -- an event is triggered when a new item is selected in a list box. This event is also trigged with a text or text area box loses focus and the contents of the box has changed. · onSelect -- an event is triggered when text in a text or text area box is selected. · onSubmit -- an event is triggered when the form is submitted to the server (more about this important hander later in the column). Submitting the form to the server In the examples above I've limited the action of the form to within JavaScript only. Many forms are designed to send data back to a CGI program running on the server. This is referred to as submitting the form, and is accomplished using either of two JavaScript instructions: the onSubmit event handler or the submit method. In most instances, you use one or the other, not both! · Place the onSubmit event hander in the 
 tag. This tells JavaScript what it should do when the user clicks the Submit button (this is a button defined as TYPE="submit"). · Place the submit instruction anywhere in your JavaScript. It can be activated by any



www.engineeringsolution.in



INTERNET FUNDAMENTALS



action, such as clicking a form button that has been defined with the onClick event handler. Using onSubmit Here's an example of using the onSubmit event handler to send mail. The onSubmit event handler tells JavaScript what to do when the user clicks the Submit button: call the mailMe() function, where additional mail fields are appended to a mailto: URL. Navigator automatically opens a new mail window with the fields filled in. Write the body of the message, and send the mail off to the recipient. onsubmit.html       Subject of message: 
  
Send cc to: 
 
 Send blind cc to: 
 
 
 
   Using submit In the next example the submit method is used instead. The script is little changed, except that the onSubmit handler is removed, and an onClick hander for a renamed form button is added in its place. The submit() method replaces the return true statement in the previous example. submit.html  



www.engineeringsolution.in



INTERNET FUNDAMENTALS



    
 Subject of message: 
 
 Send cc to: 
 Send blind cc to: 
 
 
   Server-Side Programming in JavaScript What is Server-side Scripting? Normally when a browser requests an HTML file, the server returns the file, but if the file contains a server-side script, the script inside the HTML file is executed by the server before the file is returned to the browser as plain HTML. What is Server-side Scripting? Normally when a browser requests an HTML file, the server returns the file, but if the file contains a server-side script, the script inside the HTML file is executed by the server before the file is returned to the browser as plain HTML. Server-side JavaScript (SSJS) refers to JavaScript that runs on server-side and is therefore not downloaded to the browser. This term is used to differentiate it from regular JavaScript, which is predominantly used on the client-side (also referred to as client-side JavaScript or CSJS for short). The first implementation of SSJS was Netscape's LiveWire, which was included in their Enterprise Server 2.0 back in 1996. Since then, a number of other companies have followed suit



www.engineeringsolution.in



INTERNET FUNDAMENTALS



in offering an alternative to the usual server-side technologies. One of the biggest players in the field was Microsoft. They supported the use of JavaScript on the server within what is now known as "classic" ASP. Along with the most common VBScript language, it also supported JavaScript and PerlScript. In reality, Microsoft utilized JScript, their own version of JavaScript. To use JScript/JavaScript, all you had to do was set the LANGUAGE attribute in the opening script tag: <%@LANGUAGE="JavaScript"%> <% Response.Write("\r") Response.Write("\"Hello World\"
\r") Response.Write("\r") %> Since the code runs on the server, what is sent to the client is the output of the script rather than the source code. Hence only the tags produced by the Response.Write() functions are found in the page source:  "Hello World"
  In addition to alleviating development complexity, server-side JavaScript offers a few other benefits that you may not have considered: · The same code can validate data on both the client (for immediate user feedback) and on the server (for security), so validations never get out of sync. · The same code can prepare both the HTML DOM server side and modify it client-side, when the user changes the data or it's refreshed from the server. · Using the same code on both the client and the server, developers have fewer technologies to learn and stay on top of, and fewer parts of the application or site to maintain. On the server, you also embed JavaScript in HTML pages. The server-side statements can connect to relational databases from different vendors, share information across users of an application, access the file system on the server, or communicate with other applications through LiveConnect and Java. HTML pages with server-side JavaScript can also include client-side JavaScript. In contrast to pure client-side JavaScript pages, HTML pages that use server-side JavaScript are compiled into bytecode executable files. These application executables are run by a web server that contains the JavaScript runtime engine. For this reason, creating JavaScript applications is a two-stage process. In the first stage, shown in Figure, you create HTML pages (which can contain both clientside and server-side JavaScript statements) and JavaScript files. You then compile all of those files into a single executable. Server-side JavaScript during development



www.engineeringsolution.in



INTERNET FUNDAMENTALS



In the second stage, shown in Figure, a page in the application is requested by a client browser. The runtime engine uses the application executable to look up the source page and dynamically generate the HTML page to return. It runs any server-side JavaScript statements found on the page. The result of those statements might add new HTML or client-side JavaScript statements to the HTML page. The run-time engine then sends the resulting page over the network to the Navigator client, which runs any client-side JavaScript and displays the results. Server-side JavaScript during runtime In contrast to standard Common Gateway Interface (CGI) programs, all JavaScript source is integrated directly into HTML pages, facilitating rapid development and easy maintenance. Server-side JavaScript's Session Management Service contains objects you can use to maintain data that persists across client requests, multiple clients, and multiple applications. Server-side JavaScript's LiveWire Database Service provides objects for database access that serve as an interface to Structured Query Language (SQL) database servers. Forms and Data in JavaScript Validating form data using JavaScript Form Validation – Checking for Non-Empty This has to be the most common type of form validation. You want to be sure that your visitors enter data into the HTML fields you have "required" for a valid submission. Below is the JavaScript code to perform this basic check to see if a given HTML input is empty or not. JavaScript Code: // If the length of the element's string is 0 then display helper message function notEmpty(elem, helperMsg){ if(elem.value.length == 0){ alert(helperMsg); elem.focus(); // set the focus to this input return false; } return true; } The function notEmpty will check to see that the HTML input that we send it has something in it. elem is a HTML text input that we send to this function. JavaScript strings have built in properties, one of which is the length property which returns the length of the string. The chunk of code elem.value will grab the string inside the input and by adding on length elem.value.length we can see how long the string is. As long as elem.value.length isn't 0 then it's not empty and we return true, otherwise we send an alert to the user with a helperMsg to inform them of their error and return false. Working Example:  
 Required Field:   
 Result: Form Validation – Checking for All Numbers If someone is entering a credit card, phone number, zip code, similar information you want to be able to ensure that the input is all numbers. The quickest way to check if an input's string value is all numbers is to use a regular expression /^[0-9]+$/ that will only match if the string is all numbers and is at least one character long. JavaScript Code: // If the element's string matches the regular expression it is all numbers function isNumeric(elem, helperMsg){ var numericExpression = /^[0-9]+$/; if(elem.value.match(numericExpression)){ return true; }else{ alert(helperMsg); elem.focus(); return false; } } What we're doing here is using JavaScript existing framework to have it do all the hard work for us. Inside each string is a function called match that you can use to see if the string matches a certain regular expression. We accessed this function like so: elem.value.match(expressionhere). We wanted to see if the input's string was all numbers so we made a regular expression to check for numbers [0-9] and stored it as numericExpression. We then used the match function with our regular expression. If it is numeric then match will return true, making our if statement pass the test and our function isNumeric will also return



www.engineeringsolution.in



INTERNET FUNDAMENTALS



true. However, if the expression fails because there is a letter or other character in our input's string then we'll display our helperMsg and return false. Working Example:  
 Numbers Only:   
 Result: Form Validation – Checking for All Letters This function will be identical to isNumeric except for the change to the regular expression we use inside the match function. Instead of checking for numbers we will want to check for all letters. If we wanted to see if a string contained only letters we need to specify an expression that allows for both lowercase and uppercase letters: /^[a-zA-Z]+$/ . Example:  
 Letters Only: 



www.engineeringsolution.in



INTERNET FUNDAMENTALS



 
 Result: Form Validation – Checking for Numbers and Letters By combining both the isAlphabet and isNumeric functions into one we can check to see if a text input contains only letters and numbers. JavaScript Code: // If the element's string matches the regular expression it is numbers and letters function isAlphanumeric(elem, helperMsg){ var alphaExp = /^[0-9a-zA-Z]+$/; if(elem.value.match(alphaExp)){ return true; } else { alert(helperMsg); elem.focus(); return false; } } Form Validation – Restricting the Length Being able to restrict the number of characters a user can enter into a field is one of the best ways to prevent bad data. For example, if you know that the zip code field should only be 5 numbers you know that 2 numbers is not sufficient. Below we have created a lengthRestriction function that takes a text field and two numbers. The first number is the minimum number of characters and the second is the maximum number of characters the input can be. If you just want to specify an exact number then send the same number for both minimum and maximum. JavaScript Code: function lengthRestriction(elem, min, max){ var uInput = elem.value; if(uInput.length >= min && uInput.length <= max){ return true; } else { alert("Please enter between " +min+ " and " +max+ " characters"); elem.focus(); return false; } }



www.engineeringsolution.in



INTERNET FUNDAMENTALS



Here's an example of this function for a field that requires 6 to 8 characters for a valid username. Example:  
 Username(6-8 characters):   
 Result: Form Validation – Selection Made To be sure that someone has actually selected a choice from an HTML select input you can use a simple trick of making the first option as helpful prompt to the user and a red flag to you for your validation code. By making the first option of your select input something like "Please Choose" you can spur the user to both make a selection and allow you to check to see if the default option "Please Choose" is still selected when the submit the form. JavaScript Code: function madeSelection(elem, helperMsg){ if(elem.value == "Please Choose"){ alert(helperMsg); elem.focus(); return false; } else { return true; } } Working Example:  
 Selection:  Please Choose CA WI XX   
 Result: Form Validation – Email Validation Every email is made up for 5 parts: 1. A combination of letters, numbers, periods, hyphens, plus signs, and/or underscores 2. The at symbol @ 3. A combination of letters, numbers, hyphens, and/or periods 4. A period 5. The top level domain (com, net, org, us, gov, ...) Valid Examples: · [email protected] · [email protected] · [email protected] Invalid Examples: · @deleted.net - no characters before the @ · [email protected] - invalid character ! · shoes@need_shining.com - underscores are not allowed in the domain name The regular expression to check for all of this is a little overkill and beyond the scope of this tutorial to explain thoroughly. However, test it out and you'll see that it gets the job done. JavaScript Code: function emailValidator(elem, helperMsg){ var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/; if(elem.value.match(emailExp)){ return true;



www.engineeringsolution.in



INTERNET FUNDAMENTALS



} else { alert(helperMsg); elem.focus(); return false; } } Working Example:  
 Email:   
 Result: Validating form data using JavaScript If you've made it this far I commend you, but we're not done yet! The final step is to be able to perform all of these validation steps when the user is ready to submit their data. Each form has a JavaScript event called onSubmit that is triggered when its submit button is clicked. If this even returns 0 or false then a form cannot be submitted, and if it returns 1 or true it will always be submitted. Wouldn't it be perfect if we could somehow make an if statement that said "If the form is valid submit it (1) else don't submit it (0)"? Well with a master formValidator function we can do just that. formValidator will be somewhat like a list of checks that we want to do before a form is submitted. But before we can decide what we want to check for, we need to have our form! HTML Form Code: 
 First Name: 
 Address: 
 Zip Code: 
 State:  Please Choose



www.engineeringsolution.in



INTERNET FUNDAMENTALS



AL CA TX WI 
 Username(6-8 characters): 
 Email: 
 
 
 That's a lot of data to verify and the first thing we would probably want to check is that each field was at least filled out. To check for completion we will ensure no fields are empty and that the SELECT field has a selection. Here are the starting pieces of our master validation function formValidator. JavaScript Code: function formValidator(){ // Make quick references to our fields var firstname = document.getElementById('firstname'); var addr = document.getElementById('addr'); var zip = document.getElementById('zip'); var state = document.getElementById('state'); var username = document.getElementById('username'); var email = document.getElementById('email'); // Check each input in the order that it appears in the form! if(isAlphabet(firstname, "Please enter only letters for your name")){ if(isAlphanumeric(addr, "Numbers and Letters Only for Address")){ if(isNumeric(zip, "Please enter a valid zip code")){ if(madeSelection(state, "Please Choose a State")){ if(lengthRestriction(username, 6, 8)){ if(emailValidator(email, "Please enter a valid email address")){ return true; } } } } } } return false; } The first part of this function is where we create easy references to our HTML inputs using the getElementById function. These quick references will make our next block of code much easier to read! The second part uses a bunch of embedded if statements to see whether or not each field has the correct type of data. If every single one of those fields we check validates, then we'll



www.engineeringsolution.in



INTERNET FUNDAMENTALS



return true and the form will be submitted successfully. However, if just one of those if statements fails then the return false at the end of the function is reached and prevents the form for being submitted. As you can see this function really does do quite a lot, definitely earning the title of formValidator.. Now let's put all the necessary and HTML together and try it out! All Together Now HTML & JavaScript Code:  
 First Name: 
 Address: 
 Zip Code: 
 State:  Please Choose AL CA TX WI 
 Username(6-8 characters): 
 Email: 
  
 Result: XML Basics What is XML? · XML stands for EXtensible Markup Language · XML is a markup language much like HTML · XML was designed to carry data, not to display data · XML tags are not predefined. You must define your own tags · XML is designed to be self-descriptive · XML is a W3C Recommendation The Difference between XML and HTML XML is not a replacement for HTML. XML and HTML were designed with different goals: · XML was designed to transport and store data, with focus on what data is · HTML was designed to display data, with focus on how data looks HTML is about displaying information, while XML is about carrying information. With XML You Invent Your Own Tags That is because the XML language has no predefined tags. The tags used in HTML are



www.engineeringsolution.in



INTERNET FUNDAMENTALS



predefined. HTML documents can only use tags defined in the HTML standard (like 
, 
, etc.). XML allows the author to define his/her own tags and his/her own document structure. XML is Not a Replacement for HTML XML is a complement to HTML. It is important to understand that XML is not a replacement for HTML. In most web applications, XML is used to transport data, while HTML is used to format and display the data. XML Separates Data from HTML If you need to display dynamic data in your HTML document, it will take a lot of work to edit the HTML each time the data changes. With XML, data can be stored in separate XML files. This way you can concentrate on using HTML for layout and display, and be sure that changes in the underlying data will not require any changes to the HTML. With a few lines of JavaScript code, you can read an external XML file and update the data content of your web page. XML Simplifies Data Sharing In the real world, computer systems and databases contain data in incompatible formats. XML data is stored in plain text format. This provides a software- and hardware-independent way of storing data. This makes it much easier to create data that can be shared by different applications. XML Simplifies Data Transport One of the most time-consuming challenges for developers is to exchange data between incompatible systems over the Internet. Exchanging data as XML greatly reduces this complexity, since the data can be read by different incompatible applications. XML Simplifies Platform Changes Upgrading to new systems (hardware or software platforms), is always time consuming. Large amounts of data must be converted and incompatible data is often lost. XML data is stored in text format. This makes it easier to expand or upgrade to new operating systems, new applications, or new browsers, without losing data. XML Makes Your Data More Available Different applications can access your data, not only in HTML pages, but also from XML data sources. With XML, your data can be available to all kinds of "reading machines" (Handheld computers, voice machines, news feeds, etc), and make it more available for blind people, or people with other disabilities. XML is Used to Create New Internet Languages A lot of new Internet languages are created with XML. Here are some examples: · XHTML · WSDL for describing available web services · WAP and WML as markup · RSS languages for news feeds · RDF and OWL for describing resources and ontology · SMIL for describing multimedia for the web



www.engineeringsolution.in



INTERNET FUNDAMENTALS



XML Documents Form a Tree Structure XML documents must contain a elements. The elements in an XML document form a document tree. The tree starts at the root and branches to the lowest level of the tree. All elements can have sub elements (child elements):   .....   The terms parent, child, and sibling are used to describe the relationships between elements. Parent elements have children. Children on the same level are called siblings (brothers or sisters). All elements can have text content and attributes (just like in HTML). Example: The image above represents one book in the XML below:   World Institute Of Technology NH-71 B ,Sohna , Gurgaon ,Haryana. E-mail : [email protected] languages for handheld devices root element. This element is "the parent" of all other ..Everyday Italian Giada De Laurentiis 2005 30.00    J K. Rowling 2005 29.99    Erik T. Ray 2003 39.95   The root element in the example is . All  elements in the document are contained within . The  element has 4 children:  J K. Rowling 2005 29.99    Erik T. Ray 2003 39.95   In the example above,  and  have element contents, because they contain other elements.  also has an attribute (category="CHILDREN").