HTML Manual

Merit Quality Excellence
Sukkur Institute of Business Administration
Introduction to Information & Communication Technology

Lab Manual
Compiled by: Umar Memon Asst. Professor Ahmad Waqas Lecturer Nahdia Majeed Lecturer
Contents
Lab
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16
Description
Understanding WWW and HTML HTML Tags and Attributes Working with hyperlinks Working with HTML Frames Working with Tables Understanding and working with Lists Working with Forms Developing website Understanding JavaScript JavaScript statements JavaScript Operators Popup boxes and user defined functions Iterative structure JavaScript Events Catching Errors Project
Page
03 10 16 20 24 32 38 47 48 55 62 71 80 87 89 96
2 | Introduction to Information & Communication Technology Lab manual
Lab 01
Understanding WWW and HTML
Objectives: After completing this Lab students will able to 1. Understand WWW 2. Understand Web pages 3. Understand basics of HTML Objective 1: Understanding World Wide Web. World Wide Web (WWW) The World Wide Web (WWW) is most often called the Web. The Web is a network of computers all over the world. All the computers in the Web can communicate with each other.
Objective 2: Understanding Web pages. Web Page Web pages are the documents in which web information is stored. Web Server Web pages are stored on Web servers. A web server is special software, which runs on a computer and responds to requests made by other computers on the network. Computers reading the web pages are called as web clients Web Browser Web browser is a simply a program which sends request to the web server and accepts a response to that request from the web server. Popular browsers include Internet Explorer (IE), Netscape Navigator etc. How does web browser fetch a web page? Whenever web client wants to view a web page, it sends request to the web server. A request contains the address of that particular web resource. Activity 1.1
Double click the Internet Explorer icon shown at the top of the window, write:
available on desktop. In the address bar
http://www.iba-suk.edu.pk and press ENTER It will display the web page of Sukkur IBA
Output 1.1
How does web browser display web pages to the requesting client? A web page contains instructions to display a web page. The web browser displays the page by reading these instructions. Web Standards The rule making body for web standards is World Wide Web Consortium (W3C). The most essential web standards are XML (eXtensible Markup Language), HTML and CSS. The latest HTML standard is XHTML1.0
Objective 3: Understanding Basics of HTML. What is HTML(Hyper Text Markup Language)? HTML is a standard language for creating web pages and controlling how the web pages will be displayed. An HTML file is a text file containing small markup tags.T he markup tags tell the Web browser how to display the page .An HTML file must have an htm or html file extension. An HTML file can be created using a simple text editor.
Activity 1.2 Click on Start button. Click Run In the dialog box write notepad and press ENTER. It will open a Notebook editor for you. Now type the following lines: <html> <head><title>ICT Lab</title></head> <body>This is my first homepage. <b>This text is bold</b> </body> </html> Save this file with the name of Activiy2.html Start your Internet browser. Select "Open" (or "Open Page") in the File menu of your browser. A dialog box will appear. Select "Browse" (or "Choose File") and locate the HTML file you just created - "Activity2.html" - select it and click "Open". Now you should see an address in the dialog box, for example "C:\MyDocuments\Activity2.html". Click OK, and the browser will display the page.
Output 1.2
What is actually happening in Activity2? The first tag in your HTML document is <html>. This tag tells your browser that this is the start of an HTML document. The last tag in your document is </html>. This tag tells your
browser that this is the end of the HTML document. The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser window. The text between the <title> tags is the title of your document. The title is displayed in your browser's caption. The text between the <body> tags is the text that will be displayed in your browser. The text between the <b> and </b> tags will be displayed in a bold font. HTML Tags Tags are instructions that are embedded directly into the text of the document.HTML tags begin with open angle bracket (<) and end with a close angle bracket (>).HTML tags are not case sensitive. What it means that you can write <HTML> or alternatively you can write <html>. HTML tags can be of two types: 1. Paired Tags 2. Singular Tags Tag is called paired if it is used with a companion tag. For example <B> Bold Text </B>.The opening tag activate the effect and closing tag turns the effect off. Tag is called singular if does not have a companion tag. For example: <BR> This is a line break will insert a line break. HTML basic tags Headings Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading. HTML automatically adds an extra blank line before and after a heading. Paragraphs Paragraphs are defined with the <p> tag. <p>This is a paragraph</p> <p>This is another paragraph</p> HTML automatically adds an extra blank line before and after a paragraph. Line Breaks The <br> tag is used when you want to break a line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it. <p>This <br> is a para<br>graph with line breaks</p>
Activity 1.3 Open Notepad editor. Write the following code and save your file with the name Activity3.html <HTML> <BODY> <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a heading</h6> </BODY> </HTML> Now open this web page in the web browser.
Output 1.3
Comments in HTML The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you
when you edit the source code at a later date.  Horizontal Rule We use a horizontal rule (the <hr> tag), to separate the sections in our web page. Activity 1.4 Open Notepad editor. Write the following code and save your file with the name Activity4.html <HTML> <BODY> <B> This is activity 4</B> <!This line will show the text in bold letters --> </BODY> </HTML> Now open this web page in the web browser. You will notice that the text which you wrote within comments tags will not displayed in the browser. It is added just to tell the person who is reading the source code the purpose of <B> tags. These comments remain hidden in the final display.
Output 1.4
Review Exercises: 1) 2) 3) 4) 5) Demonstrate some of the default behaviours of paragraph elements. Demonstrate the use of line breaks in an HTML document. Demonstrate the tags that display headings in an HTML document. Demonstrate how to insert a horizontal rule. Also demonstrate how to insert a hidden comment in the HTML source code. Write the HTML code which makes use of: o The HTML tag o The Heading tag o The Paragraph tag o The Break tag o The HR tag
The text is: Sukkur IBAs goals and objectives are to provide quality education through modern teaching style, market-oriented curriculum on affordable cost. Our purpose is to develop strength in faculty, assist business organizations by consultancy and creating research and congenial environment, fulfilling our commitment to community in building national character and economic development. Sukkur IBA is not only producing employable graduates who are accepted in the market like hot-cake but it is also promoting knowledge based economic development of this region.
Lab 02
HTML Tags and Attributes
Objectives: After completing this Lab students will able to 1. Understand the behavior of HTML tag attributes and tag elements. 2. Understand text formatting tags 3. Understand Address and textarea tags Objective 1: Understanding the behaviour of HTML tag attributes and tag elements. Tags also have attributes. Attributes add extra information to the tags. Attribute appears inside the opening tag and its value is always surrounded by double quotes. Double style quotes are the most common, but single style quotes are also allowed. Syntax <tag attribute=value> </tag> Tag Elements HTML tags mark the beginning and end of an element. Elements are the bits that make up web pages. Everything that is in-between and includes the <body> and </body> tags is the body element. Similarly '<title>' and '</title>' are tags, '<title>Sukkur IBA </title>' is a title element.
Activity 2.1 <html> <head> <title> Hey! Have fun with HTML</title> </head> <body bgcolor=blue> <h1 align="center"> Heading is aligned in center </h1> <h2 align="left">Left aligned heading</h2> <h2 align="right">Right aligned heading</h2> <hr> This web page demonstrates the use of tag attributes </body> </html> In the above HTML code identify any three Tag elements.
Can you identify which tag attributes are used? Output 2.1
What will be displayed in the web browser? When you view the HTML file in the web browser you will notice a blue colored background of the web page. The heading is also displayed in the center. This is because you have used bgcolor attribute in the body tag. Similarly center attribute of the H1 tag forces the heading text to be aligned in the center. Use Lowercase Attributes Attributes and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4.0 recommendation, and XHTML demands lowercase attributes/attribute values.
Attributes used with <body> tag bgcolor="color" This changes the background color of your page. You can set this to any color you would like to use. text="color" This changes the default text color the browser will display on your page. link="color" This changes the color of all of the non-visited links on your page. The default setting for a non-visited link is usually blue. alink="color" This changes the color of an active link on your page, which is a link that has just been clicked on by a user's mouse.
vlink="color" This changes the color of a visited link on your page. The default setting for a visited link is usually violet. background="image.gif" This adds a background image to your page. If you use this attribute, the background image will take the place of any background color you may have specified. If you don't use a background image, the browser will use your background color or its default background color.
Objective 2: Understanding text formatting tags. HTML defines a variety of elements for formatting output, like bold or italic text. Some of the text formattimg tags are described below: Tag <b> <big> <em> <i> <small> <strong> <sub> <sup> <ins> <del> <s> <strike> <u> Description Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text Deprecated. Use <del> instead Deprecated. Use <del> instead Underlines the text
Use the text formatting tags to design a web page that displays the following output. Activity 2.2
<pre> Tag Text in a pre element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks. Design a web page with the following code Activity 2.3 <pre> Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks </pre>
Output 2.3
Now try the same text without <pre> </pre> tags <del> and <ins> Tags This example demonstrates how to mark a text that is deleted or inserted to a document.
Activity 2.4 <html> <body> <p> a dozen is
<del>twenty</del> <ins>twelve</ins> pieces </p> <p> Most browsers will overstrike deleted text and underline inserted text. </p> <p> Some older browsers will display deleted or inserted text as plain text. </p> </body> </html>
Output 2.4 a dozen is twenty twelve pieces Most browsers will overstrike deleted text and underline inserted text. Some older browsers will display deleted or inserted text as plain text.
<dd> Tag The <dd> tag is used to describe an item in a definition list. The <dd> tag is used in conjunction with <dl> (defines the definition list) and <dt> (defines the item in the list).Inside a <dd> tag you can put paragraphs, line breaks, images, links, lists, etc. Design a web page with the following code and view the output in the browser. Activity 2.4 <html> <body> <dl> <dt>Breakfast</dt> <dd>- black hot drink</dd>
<dd>-Toast</dd> <dd>-Eggs</dd> <dt>Dinner</dt> <dd>- cold drink</dd> <dd>-Pasta </dd> <dd>-Omlette</dd> </dl> </body> </html>
Output 2.4
Objective 3: Understanding Address and textarea tags. The <address> tag defines the contact information for the author or owner of a document. This way, the reader is able to contact the document's owner. The address element is usually added to the header or footer of a webpage. Embed an Address tag in your HTML code: Activity 2.5 <html> <body> <address> Written by Your Name<br> Address: Your Contact Address<br>
Phone: Give your phone Number </address></body></html>
Output 2.5
<textarea> Tag The <textarea> tag defines a multi-line text input control. A text area can hold an unlimited number of characters, and the text renders in a fixed-width font. The size of a textarea can be specified by the cols and rows attributes footer of a webpage. Embed <textarea> tag in your HTML code. Activity 2.6 <html> <body> <textarea rows="2" cols="20"> In this lab you will learn the basics of HTML and java scripting. After attending ICT course you would be the HTML Gurus. </textarea> </body> </html>
Output 2.6
Lab 03
Working with Hyperlinks
Objectives: After completing this Lab students will able to 1. Work with HTML hyperlinks 2. Understand linking within a single page 3. Understand the use of <target > tag Objective 1: Working with HTML hyperlinks. HTML pages may contain links to jump to some other web page. Anchor Tag <a> HTML uses the <a> (anchor) tag to create a link to another document. An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc. The syntax of creating an anchor: <a href="url">Text to be displayed</a> The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink. This anchor defines a link to Sukkur IBAs website: <a href="http://www.iba-suk.edu.pk> Sukkur IBA </a>
Activity 3.1 <html> <body> <p> <a href="lastpage.htm"> This text</a> is a link to a page on this Web site. </p> <p> <a href="http://www.microsoft.com/">
This text </a> is a link to a page on the World Wide Web. </p> </body> </html>
Output 3.1
Objective 2: Understand linking with a single page. Suppose you have a web page and you want to give someone a way back to the top of the page if they are at the bottom of the page. Or you want to divide the page into sections and provide a way to easily jump from one section to any other section on the same page. This task is done with the use of <a> tag. Activity 3.2
<a name="top"></a>
You can place any name you wish inside the quotes. This just makes it easy to see where we are going to end up. Now, go anywhere between the body tags and type this link: <a href="#top"> Back to the Top </a> If you click on this link, you will be sent back to the top of the page.
Output 3.2
What is happening in Activity 3.2? The # sign let the browser know the destination is a named anchor within this page. So, if you create an anchor named "cool", you link to that anchor by using "#cool", like this: <a name="cool"></a>  <a href="#cool">To the Cool Section of this page</a>  You can place a named anchor anyplace on your page. You can link to it from any other part of the page. You can place one at the third paragraph, the bottom, the top, the 500th word. It can make navigating some pages a whole lot easier.
Objective 3: Understanding the use of <target > tag.

With the target attribute, you can define where the linked document will be opened. The line below will open the document in a new browser window: <a href="http://www.google target="_blank"> Visit Goooooooooooogle </a>
Activity 3.3 Design a web page which shows the list of the names of chapters of your text book (You may use the table of contents of any of your text books).When a user clicks on the Chapter name, the description of the selected chapter must be appeared to the user.
Lab 04
Working with HTML Frames
Objectives: After completing this Lab students will able to 1. Understand HTML frames and work with frameset tag. 2. Work with noframe tag. 3. Understand attributes used with frame tag. Objective 1: Understanding HTML Frames and working with frameset tag. With frames, you can display more than one Web page in the same browser window. Each HTML document is called a frame, and each frame is independent of the others. The Frameset Tag The <frameset> tag defines how to divide the window into frames Each frameset defines a set of rows or columns The values of the rows / columns indicate the amount of screen area each row / column will occupy The Frame Tag The <frame> tag defines what HTML document to put into each frame. Let say you want to make a frameset with two columns. First column is set to 25% of the total width of the browser window and the second column is set to 75% of the web page. You want to display mypage1.html in the first frame and mypage2.html in the second frame: <frameset cols="25%,75%"> <frame src="myfile1.html> <frame src="myfile2.html> </frameset> Note: The frameset column size value can also be set in pixels (cols="200,500"), and one of the columns can be set to use the remaining space (cols="25%,*").
The disadvantages of using frames are:

The web developer must keep track of more HTML documents It is difficult to print the entire page
Activity 4.1 Design a simple web page with blue background showing your personal information. Save it with the name MyInfo.html Design another page which shows the list of subjects you are enrolled in. Save the file with the name MySubjects.html Now open a new Notepad document and write the following code:
<html> <frameset cols="50%,25%"> <frame src="Myinfo.html> <frame src="MySubjects.html> </frameset> </html>
Activity 4.2 Make a horizontal frameset with three different documents. <html> <frameset rows="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> </html>
Objective 2: Working with noframe tag. I you add a <noframes> tag containing some text for browsers that do not support frames, you will have to enclose the text in <body></body> tags.
Activity 4.3 Design a web page as follows: <html> <frameset cols="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> <noframes> <body>Your browser does not handle frames!</body> </noframes> </frameset> </html>
Objective 3: Understanding attributes used with frame tag. Noresize If you want to lock frames so that they cant be resized noresize attribute is used. Activity 4.4 Design a web page as follows:
<html> <frameset rows="50%,50%"> <frame noresize="noresize" src="file1.htm"> <frameset cols="25%,75%"> <frame noresize="noresize" src="file2.htm"> <frame noresize="noresize" src="file3.htm"> </frameset> </frameset> </html>
Now view this page in the browser. Move the mouse over the borders between the frames and notice that you cannot move the borders.
Navigation Frame The navigation frame contains a list of links with the second frame as the target.
Activity 4.5 Embed the following chunk of code into your HTML code:
<a href ="frame1.html" target ="showframe">Frame 1</a> <br> <a href ="frame_2.html" target ="showframe">Frame 2</a> <br> <a href ="frame_3.htm" target ="showframe">Frame 3</a> The second frame will show the linked document. <html> <frameset cols="120,*"> <frame src="Demo.html"> <frame src="frame_1.html" name="showframe"> </frameset> </html>
Lab 05
Working with Tables
Objectives: After completing this Lab students will able to 1. Understand and work with tables in the web pages 2. Using BORDER attribute with TABLE tag 3. Insert Empty cells in a table 4. Define table cells that span more than one row or one column 5. Use cellpadding to create more white space between the cell content and its borders 6. Use cellspacing to increase the distance between the cells 7. Add background to one or more table cells 8. Use the "frame" and "border" attributes to control the borders around the table
Objective 1: Understanding and working with tables. A table is a set of rows and columns.
<TABLE> Tag In HTML tables are defined with the <table> tag.
<TR> Tag A table is divided into rows. <TR> is used to define a table row.
<TD> Tag Each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
Activity 5.1 <html> <body> <p> Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag. </p> <h4>One column:</h4> <table border="1"> <tr> <td>100</td> </tr> </table> <h4>One row and three columns:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> <h4>Two rows and three columns:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html>
Output 5.1
Objective 2: Working with Border attribute. If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show. <table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>
Activity 5.2 <table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td>
<td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
Output 5.2
Objective 3: Inserting empty cell in a table. <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td></td> </tr> </table> Table with no borders <table border=0> <Caption tag> Defines a caption for the table. <table border="6"> <caption>My Caption</caption>
<tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table>
Objective 4: Defining table cells that span more than one row or more than one column. <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>Cell that spans two rows:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table>
Objective 5: Using cellpadding. cellpadding is used to create more white space between the cell content and its borders.
<table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>With cellpadding:</h4> <table border="1" cellpadding="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
Objective 6: Using cellspacing. cellspacing is used to increase the distance between the cells. <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>With cellspacing:</h4>
<table border="1" cellspacing="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> Objective 7: Adding background to the table. <table border="1" bgcolor="red"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> Adding a background to one or more table cells <html> <body> <h4>Cell backgrounds:</h4> <table border="1"> <tr> <td bgcolor="red">First</td> <td>Row</td> </tr> <tr> <td background="IBAlogo.jpg"> Second</td> <td>Row</td> </tr> </table>
Objective 8: Using the "frame" and "border" attributes to control the borders around the table. <table frame="hsides" border="3"> <tr> <td>First row</td> </tr> </table> <br /> <table frame="vsides" border="3"> <tr> <td>First row</td> </tr> </table> Activity 5.3 Using the tags you have studied in this lab design a time table of your classes showing the subjects names, teachers, week days and time duration for each lecture.
Lab 06
Understanding and working with Lists
Objectives: After completing this Lab students will able to 1. Understand Unordered lists 2. Understand ordered lists 3. Understand definition list 4. Understand Nested lists
HTML supports three types of lists: Ordered lists Unordered lists Definition lists
Objective 1: Understanding Unordered Lists. An unordered list is a list of items. The list items are marked with bullets. An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. Activity 6.1 <ul> <li>Coffee</li> <li>Milk</li> </ul>
Output 6.1
Objective 2: Understanding Ordered Lists. An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. Activity 6.2 <ol> <li>Coffee</li> <li>Milk</li> </ol>
Output 6.2
Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc. Objective 3: Understanding Definition Lists. A definition list is not a list of items. This is a list of terms and explanation of the terms. A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each definition-list definition starts with the <dd> tag.
Activity 6.3 <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
Output 6.3
Type Attribute You can use type attribute with list tag to specify the format of listing. <ol type=A> <li> Chemistry <li>Mathematics </ol> will list the items as: A. Chemistry B. Mathematics
Activity 6.4 Design a web page which displays the following output in the browser.
You can also use the type attribute with <ul> tag. The options which can be used as a value of type attribute with ul tag include: Disc Circle Square
Activity 6.5 <html> <body> <h4>Disc bullets list:</h4> <ul type="disc"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>Circle bullets list:</h4> <ul type="circle"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>Square bullets list:</h4> <ul type="square"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> </body> </html>
Output 6.5
Objective 4: Understanding Nested Lists. Nested Lists are Lists within lists. Example <html> <body> <h4>A nested List:</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> </body> </html>
Example2: <html> <body> <h4>A nested List:</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea <ul> <li>China</li> <li>Africa</li> </ul> </li> </ul> </li> <li>Milk</li> </ul> </body> </html>
Lab 07
Working with HTML Forms
Objectives: After completing this Lab students will able to 1. Understand HTML forms 2. Creating text fields on an HTML page. 3. Creating a password field on an HTML page 4. The Form's Action Attribute and the Submit Button 5. Creating check-boxes on an HTML page. 6. Creating radio-buttons on an HTML page. 7. Creating a simple drop-down box on an HTML page. 8. Creating a simple drop-down box with a pre-selected value 9. Creating buttons 10. Drawing a border with a caption around your data 11. Adding a form to a page. 12. Sending e-mail from. Objective 1: Understanding HTML forms. HTML Forms are used to select different kinds of user input. Forms A form is an area that can contain form elements. Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form. A form is defined with the <form> tag. <form> <input> <input> </form> Form Tags Tag <form> <input> <textarea> <label> <fieldset> Description Defines a form for user input Defines an input field Defines a text-area (a multi-line text input control) Defines a label to a control Defines a fieldset
<legend> <select> <optgroup> <option> <button> <isindex>
Defines a caption for a fieldset Defines a selectable list (a drop-down box) Defines an option group Defines an option in the drop-down box Defines a push button Deprecated. Use <input> instead
Input The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most commonly used input types are explained below. Text Fields Text fields are used when you want the user to type letters, numbers, etc. in a form.
Activity 7.1 <form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form>
Output 7.1 How it looks in a browser: First name: Last name:
Note that the form itself is not visible. Also note that in most browsers, the width of the text field is 20 characters by default. Radio Buttons Radio Buttons are used when you want the user to select one of a limited number of choices.
Activity 7.2 <form> <input type="radio" name="sex" value="male"> Male <br> <input type="radio" name="sex" value="female"> Female </form>
Output 7.2 Male Female Note that only one option can be chosen. Checkboxes Checkboxes are used when you want the user to select one or more options of a limited number of choices.
Activity 7.3 <form> I have a bike: <input type="checkbox" name="vehicle" value="Bike"> <br> I have a car: <input type="checkbox" name="vehicle" value="Car"> <br> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane"> </form>
Output 7.3 I have a bike: I have a car:
I have an airplane:
Objective 2: Creating text fields on HTML Page. A text field enables a user to write text for input. It is also called text box. <html> <body> <form action=""> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form> </body> </html> Objective 3: Creating Password field. A password field is used to enter password. <html> <body> <form action=""> Username: <input type="text" name="user"> <br> Password: <input type="password" name="password"> </form> <p> Note that when you type characters in a password field, the browser displays asterisks or bullets instead of the characters. </p> </body> </html> Objective 4: The Form's Action Attribute and the Submit Button. When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.
Activity 7.4 <form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>
Output 7.3 Username:

Submit
If you type some characters in the text field above, and click the "Submit" button, you will send your input to a page called "html_form_action.asp". That page will show you the received input.
Objective 5: Creating Check boxes. Check boxes are used to select the options. <html> <body> <form action=""> I have a bike: <input type="checkbox" name="vehicle" value="Bike"> <br> I have a car: <input type="checkbox" name="vehicle" value="Car"> <br /> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane"> </form> </body> </html>
Objective 6: Creating radio-buttons. Radio buttons are also used to select the options but only one option can be selected at a time. <html> <body> <form action=""> Male: <input type="radio" checked="checked" name="Sex" value="male"> <br> Female: <input type="radio" name="Sex" value="female"> </form> <p> When a user clicks on a radio-button, the button becomes checked, and all other buttons with the same name become unchecked </p> </body> </html> Objective 7: Creating Drop down box.
A drop-down box is a selectable list.
<html> <body> <form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html> Objective 8: Creating Drop down with pre-selected values. <html> <body> <form action=""> <select name="cars">
<option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected="selected">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html> Objective 9: Creating Buttons. <html> <body> <form action=""> <input type="button" value="Hello world!"> </form> </body> </html> Objective 10: Drawing border with caption. <html> <body> <fieldset> <legend> Health information: </legend> <form action=""> Height <input type="text" size="3"> Weight <input type="text" size="3"> </form> </fieldset> <p> If there is no border around the input form, your browser is too old. </p> </body> </html> Objective 11: Adding form to a page.
The form contains two input fields and a submit button.
<html> <body>
<form name="input" action="html_form_action.asp" method="get"> Type your first name: <input type="text" name="FirstName" value="Mickey" size="20"> <br>Type your last name: <input type="text" name="LastName" value="Mouse" size="20"> <br> <input type="submit" value="Submit"> </form> <p> If you click the "Submit" button, you will send your input to a new page called html_form_action.asp. </p> </body> </html>
This form contains three checkboxes, and a submit button.
<html> <body> <form name="input" action="html_form_action.asp" method="get"> I have a bike: <input type="checkbox" name="vehicle" value="Bike" checked="checked" /> <br /> I have a car: <input type="checkbox" name="vehicle" value="Car" /> <br /> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane" /> <br /><br /> <input type="submit" value="Submit" /> </form> <p> If you click the "Submit" button, you send your input to a new page called html_form_action.asp. </p> </body> </html>
This form contains two radio buttons, and a submit button.
<html> <body> <form name="input" action="html_form_action.asp" method="get"> Male:
<input type="radio" name="Sex" value="Male" checked="checked"> <br> Female: <input type="radio" name="Sex" value="Female"> <br> <input type ="submit" value ="Submit"> </form> <p> If you click the "Submit" button, you will send your input to a new page called html_form_action.asp. </p> </body> </html> Objective 12: Sending email form. <html> <body> <form action="MAILTO:someone@yahoo.com" method="post" enctype="text/plain"> Name:<br> <input type="text" name="name" value="yourname" size="20"> <br> Mail:<br> <input type="text" name="mail" value="yourmail" size="20"> <br> Comment:<br> <input type="text" name="comment" value="yourcomment" size="40"> <br><br> <input type="submit" value="Send"> <input type="reset" value="Reset"> </form> </body> </html>
Lab 08
Developing Website
Objectives: 1. Develop a small project in HTML. Description Develop a website for a Company specialized in supplying CDs of innovative music to its worldwide audio customers. A customer may place his/her order (for purchasing CDs) online.
Owner: Assume that you are the owner of this company. Company Name: Choose any name of your choice
What your website needs to provide: 1. Quick and easy navigation (through hyperlinks) 2. Every CD has its own cover image. 3. Any customer who wants to place an order must fill a requisition form available on the website. 4. A homepage must contain Address and contact info of the company. 5. A company has its distinct logo. (For this exercise you can use any logo) Above listed are the minimum requirement you must incorporate in your website. However you may expand your website adding more features based on your own assumptions.
Lab 09
Understanding JavaScript
Objectives: After completing this Lab students will able to 1. Understand scripting language and JavaScript. 2. Differentiate java and JavaScript. 3. Understand JavaScript structure and syntax.
Objective 1: Understanding scripting language and JavaScript. What is JavaScript? JavaScript is an easy-to-use programming language that can be embedded in the header of your web pages. It can enhance the dynamics and interactive features of your page by allowing you to perform calculations, check forms, write interactive games, add special effects, customize graphics selections, create security passwords and more. JavaScript is a scripting language A scripting language is a lightweight programming language JavaScript was designed to add interactivity to HTML pages JavaScript is usually embedded directly into HTML pages JavaScript is an interpreted language (means that scripts execute without preliminary compilation) Everyone can use JavaScript without purchasing a license What can a JavaScript do?
JavaScript gives HTML designers a programming tool - HTML authors are normally 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("<h1>" + name + "</h1>") 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
Objective 2: Differentiating java and JavaScript. Are the Java and JavaScript same? NO! Java and JavaScript are two completely different languages in both concept and design! Java (developed by Sun Microsystems) is a powerful and much more complex programming language - in the same category as C and C++. 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 is Object Oriented Programming? OOP is a programming technique (note: not a language structure - you don't even need an object-oriented language to program in an object-oriented fashion) designed to simplify complicated programming concepts. In essence, object-oriented programming revolves around the idea of user- and system-defined chunks of data, and controlled means of accessing and modifying those chunks. Object-oriented programming consists of Objects, Methods and Properties. An object is basically a black box which stores some information. It may have a way for you to read that information and a way for you to write to, or change, that information. It may also have other less obvious ways of interacting with the information. Some of the information in the object may actually be directly accessible; other information may require you to use a method to access it - perhaps because the way the information is stored internally is of no use to you, or because only certain things can be written into that information space and the object needs to check that you're not going outside those limits. The directly accessible bits of information in the object are its properties. The difference between data accessed via properties and data accessed via methods is that with properties, you see exactly what you're doing to the object; with methods, unless you created the object yourself, you just see the effects of what you're doing. Other JavaScript pages you read will probably refer frequently to objects, events, methods, and properties. This tutorial will teach by example, without focusing too heavily on OOP
vocabulary. However, you will need a basic understanding of these terms to use other JavaScript references. Objects and Properties Your web page document is an object. Any table, form, button, image, or link on your page is also an object. Each object has certain properties (information about the object). For example, the background color of your document is written document.bgcolor. You would change the color of your page to red by writing the line: document.bgcolor="red" The contents (or value) of a textbox named "password" in a form named "entryform" is document.entryform.password.value. Methods Most objects have a certain collection of things that they can do. Different objects can do different things, just as a door can open and close, while a light can turn on and off. A new document is opened with the method document.open() You can write "Hello World" into a document by typing document.write("Hello World") . open() and write() are both methods of the object: document. Events Events are how we trigger our functions to run. The easiest example is a button, whose definition includes the words onClick="run_my_function()". The onClick event, as its name implies, will run the function when the user clicks on the button. Other events include OnMouseOver, OnMouseOut, OnFocus, OnBlur, OnLoad, and OnUnload.
Objective 3: Understanding JavaScript structure and syntax. How to use JavaScript into an HTML page The HTML <script> tag is used to insert a JavaScript into an HTML page. The example below shows how to use JavaScript to write text on a web page: Activity 9.1 <html> <body> <script type="text/javascript"> document.write("Hello World!"); </script> </body> </html>
Output 9.1 Hello World!
The example below shows how to add HTML tags to the JavaScript: Activity 9.2 <html> <body> <script type="text/javascript"> document.write("<h1>Hello World!</h1>"); </script> </body> </html>
Output 9.2
Hello World!
To insert a JavaScript into an HTML page, we use the <script> tag. Inside the <script> tag we use the type attribute to define the scripting language. So, the <script type="text/javascript"> and </script> tells where the JavaScript starts and ends: <html> <body> <script type="text/javascript"> ... </script> </body> </html>
The document.write command is a standard JavaScript command for writing output to a page. By entering the document.write command between the <script> and </script> tags, the browser will recognize it as a JavaScript command and execute the code line. In this case the browser will write Hello World! to the page: Note: If we had not entered the <script> tag, the browser would have treated the document.write("Hello World!") command as pure text, and just write the entire line on the page. How to Handle Browsers Browsers that do not support JavaScript, will display JavaScript as page content. To prevent them from doing this, and as a part of the JavaScript standard, the HTML comment tag should be used to "hide" the JavaScript. Just add an HTML comment tag  (end of comment) after the last JavaScript statement, like this: <html> <body> <script type="text/javascript"> <!-document.write("Hello World!"); //--> </script> </body> </html> The two forward slashes at the end of comment line (//) is the JavaScript comment symbol. This prevents JavaScript from executing the --> tag Where to Put the JavaScript JavaScript in a page will be executed immediately while the page loads into the browser. This is not always what we want. Sometimes we want to execute a script when a page loads, other times when a user triggers an event. Scripts in <body> Scripts are to be executed when the page loads and go in the body section. If you place a script in the body section, it generates the content of a page.
Activity 9.3 <html> <head> </head> <body> <script type="text/javascript"> document.write("This message is written by JavaScript"); </script> </body> </html>
Output 9.3 This message is written by JavaScript
Scripts in <head> Scripts to be executed when they are called, or when an event is triggered, go in the head section. If you place a script in the head section, you will ensure that the script is loaded before anyone uses it. Activity 9.4 <html> <head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event"); } </script> </head> <body onload="message()"> </body> </html>
Output 9.4
Scripts in <head> and <body> You can place an unlimited number of scripts in your document, so you can have scripts in both the body and the head section. <html> <head> <script type="text/javascript"> .... </script> </head> <body> <script type="text/javascript"> .... </script> </body>
JavaScript in the body section will be executed WHILE the page loads. JavaScript in the head section will be executed when CALLED.
Lab 10
JavaScript Statements
Objectives: After completing this Lab students will able to 1. Understand programming structure and basic JavaScript statements. 2. Write scripts using variables. Objective 1: Understanding programming structure and basic JavaScript statements. JavaScript is a sequence of statements to be executed by the browser. JavaScript is Case Sensitive Unlike HTML, JavaScript is case sensitive - therefore watch your capitalization closely when you write JavaScript statements, create or call variables, objects and functions. JavaScript Statements A JavaScript statement is a command to the browser. The purpose of the command is to tell the browser what to do. This JavaScript statement tells the browser to write "Hello Dolly" to the web page: document.write("Hello Dolly");
It is normal to add a semicolon at the end of each executable statement. Most people think this is a good programming practice, and most often you will see this in JavaScript examples on the web. The semicolon is optional (according to the JavaScript standard), and the browser is supposed to interpret the end of the line as the end of the statement. Because of this you will often see examples without the semicolon at the end. Note: Using semicolons makes it possible to write multiple statements on one line. JavaScript Code JavaScript code (or just JavaScript) is a sequence of JavaScript statements. Each statement is executed by the browser in the sequence they are written. This example will write a header and two paragraphs to a web page:
Activity 10.1 <script type="text/javascript"> document.write("<h1>This is a header</h1>"); document.write("<p>This is a paragraph</p>"); document.write("<p>This is another paragraph</p>"); </script>
Output 10.1
This is a heading
This is a paragraph. This is another paragraph.
JavaScript Blocks JavaScript statements can be grouped together in blocks. Blocks start with a left curly bracket {, and ends with a right curly bracket }. The purpose of a block is to make the sequence of statements execute together. This example will write a header and two paragraphs to a web page: Activity 10.2 <script type="text/javascript"> { document.write("<h1>This is a header</h1>"); document.write("<p>This is a paragraph</p>"); document.write("<p>This is another paragraph</p>"); } </script>
Output 10.2
This is a heading
This is a paragraph. This is another paragraph. The example above is not very useful. It just demonstrates the use of a block. Normally a block is used to group statements together in a function or in a condition (where a group of statements should be executed if a condition is met. JavaScript Comments JavaScript comments can be used to make the code more readable. Comments can be added to explain the JavaScript, or to make it more readable. Single line comments start with //. This example uses single line comments to explain the code: Activity 10.3 <html> <body> <script type="text/javascript"> // Write a heading document.write("<h1>This is a heading</h1>"); // Write two paragraphs: document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); </script> </body> </html>
Output 10.3
This is a heading
JavaScript Multi-Line Comments Multi line comments start with /* and end with */. This example uses a multi line comment to explain the code: Activity 10.4 <html> <body> <script type="text/javascript"> /* The code below will write one heading and two paragraphs */ document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); </script> </body> </html>
Output 10.4
This is a heading
Using Comments to Prevent Execution In this example the comment is used to prevent the execution of a single code line: Activity 10.5 <html> <body> <script type="text/javascript"> //document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); </script> </body> </html>
Output 10.5 This is a paragraph. This is another paragraph.
Using Comments at the End of a Line In this example the comment is placed at the end of a line: Activity 10.5 <html> <body> <script type="text/javascript"> document.write("Hello"); // This will write "Hello" document.write("Dolly"); // This will write "Dolly" </script> </body> </html>
Objective 2: Write scripts using Variables. Variables are "containers" for storing information. Do you remember algebra from school? x=5, y=6, z=x+y Do you remember that a letter (like x) could be used to hold a value (like 5), and that you could use the information above to calculate the value of z to be 11? These letters are called variables, and variables can be used to hold values (x=5) or expressions (z=x+y). JavaScript Variables As with algebra, JavaScript variables are used to hold values or expressions. A variable can have a short name, like x, or a more descriptive name, like carname. 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 Note: Because JavaScript is case-sensitive, variable names are case-sensitive.
A variable's value can change during the execution of a script. You can refer to a variable by its name to display or change its value. Declaring (Creating) JavaScript Variables Creating variables in JavaScript is most often referred to as "declaring" variables. You can declare JavaScript variables with the var statement: 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"; After the execution of the statements above, the variable x will hold the value 5, and carname will hold the value Volvo. Note: When you assign a text value to a variable, use quotes around the value. Assigning Values to Undeclared JavaScript Variables If you assign values to variables that have not yet been declared, the variables will automatically be declared. These statements: x=5; carname="Volvo"; have the same effect as: var x=5; var carname="Volvo";
Redeclaring JavaScript Variables If you redeclare a JavaScript variable, it will not lose its original value. var x=5; var x; After the execution of the statements above, the variable x will still have the value of 5. The value of x is not reset (or cleared) when you redeclare it.
JavaScript Arithmetic As with algebra, you can do arithmetic operations with JavaScript variables: y=x-5; z=y+5;
Activity 10.6 <html> <body> <script type="text/javascript"> var firstname; firstname="Hege"; document.write(firstname); document.write("<br />"); firstname="Tove"; document.write(firstname); </script> <p>The script above declares a variable, assigns a value to it, displays the value, change the value, and displays the value again.</p> </body> </html>
Output 10.6 Hege Tove The script above declares a variable, assigns a value to it, displays the value, changes the value, and displays the value again.
Lab 11
JavaScript Operators
Objectives: After completing this Lab students will able to 1. Use JavaScript arithmetic operators. 2. Use JavaScript comparison and logical operators. 3. Use JavaScript conditional statements o IF . ELSE o Switch . case Objective 1: Using JavaScript arithmetic operators. The assignment operator = is used to assign values to JavaScript variables. The arithmetic operator + is used to add values together. y=5; z=2; x=y+z; The value of x, after the execution of the statements above is 7. JavaScript Arithmetic Operators Arithmetic operators are used to perform arithmetic between variables and/or values. Given that y=5, the table below explains the arithmetic operators: Operator + * / % ++ -Description Addition Subtraction Multiplication Division Modulus (division remainder) Increment Decrement Example x=y+2 x=y-2 x=y*2 x=y/2 x=y%2 x=++y x=--y Result x=7 x=3 x=10 x=2.5 x=1 x=6 x=4
JavaScript Assignment Operators Assignment operators are used to assign values to JavaScript variables. Given that x=10 and y=5, the table below explains the assignment operators: Operator Example Same As Result = x=y x=5 += x+=y x=x+y x=15 -= x-=y x=x-y x=5 *= x*=y x=x*y x=50
/= %=
x/=y x%=y
x=x/y x=x%y
x=2 x=0
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. txt1="What a very"; txt2="nice day"; txt3=txt1+txt2; After the execution of the statements above, the variable txt3 contains "What a verynice day". To add a space between the two strings, insert a space into one of the strings: txt1="What a very "; txt2="nice day"; txt3=txt1+txt2; or insert a space into the expression: 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" Adding Strings and Numbers Look at these examples: x=5+5; document.write(x); x="5"+"5"; document.write(x); x=5+"5"; document.write(x); x="5"+5; document.write(x); The rule is: If you add a number and a string, the result will be a string.
Objective 2: Using JavaScript Comparison and Logical Operators. Comparison and Logical operators are used to test for true or false. 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: Operator Description Example == is equal to x==8 is false x===5 is true === is exactly equal to (value and type) 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 How can it be Used? Comparison operators can be used in conditional statements to compare values and take action depending on the result: 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 and or not Example (x < 10 && y > 1) is true (x==5 || y==5) is false !(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".
Objective 3: Using JavaScript conditional statements. Conditional statements in JavaScript are used to perform different actions based on different conditions. Conditional Statements Very often when you write code, you want to perform different actions for different decisions. You can use conditional statements in your code to do this. In JavaScript we have the following conditional statements: if statement - use this statement if you want to execute some code only if a specified condition is true if...else statement - use this statement if you want 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 if you want to select one of many blocks of code to be executed switch statement - use this statement if you want to select one of many blocks of code to be executed If Statement You should use the if statement if you want to execute some code only if a specified condition is true. Syntax if (condition) { code to be executed if condition is true } Note that if is written in lowercase letters. Using uppercase letters (IF) will generate a JavaScript error! If...else Statement If you want to execute some code if a condition is true and another code if the condition is not true, use the if....else statement. Syntax if (condition) { code to be executed if condition is true } else { code to be executed if condition is not true }
If...else if...else Statement You should use the if....else if...else statement if you want to select one of many sets of lines to execute. 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 }
How to write an if statement. Activity 11.1 <html> <body> <script type="text/javascript"> var d = new Date(); var time = d.getHours(); if (time < 10) { document.write("<b>Good morning</b>"); } </script> <p> This example demonstrates the If statement. </p> <p> If the time on your browser is less than 10, you will get a "Good morning" greeting. </p> </body> </html>
Output 11.1 This example demonstrates the If statement. If the time on your browser is less than 10, you will get a "Good morning" greeting.
How to write an if...else statement. Activity 11.2 <html> <body> <script type="text/javascript"> var d = new Date(); var time = d.getHours(); if (time < 10) { document.write("<b>Good morning</b>"); } else { document.write("<b>Good day</b>"); } </script> <p> This example demonstrates the If...Else statement. </p> <p> If the time on your browser is less than 10, you will get a "Good morning" greeting. Otherwise you will get a "Good day" greeting. </p> </body> </html>
Output 11.2
Good day
This example demonstrates the If...Else
statement. If the time on your browser is less than 10, you will get a "Good morning" greeting. Otherwise you will get a "Good day" greeting.
How to write an if..else if...else statement. Activity 11.3 <html> <body> <script type="text/javascript"> var d = new Date(); var time = d.getHours(); if (time<10) { document.write("<b>Good morning</b>"); } else if (time>=10 && time<16) { document.write("<b>Good day</b>"); } else { document.write("<b>Hello World!</b>"); } </script> <p> This example demonstrates the if..else if...else statement. </p> </body> </html>
This example demonstrates a link, when you click on the link it will take you to W3Schools.com OR to RefsnesData.no. There is a 50% chance for each of them. Activity 11.4 <html> <body>
<script type="text/javascript"> var r=Math.random(); if (r>0.5) { document.write("<a href='http://www.w3schools.com'>Learn Web Development!</a>"); } else { document.write("<a href='http://www.refsnesdata.no'>Visit Refsnes Data!</a>"); } </script> </body> </html>
Output 11.4 Visit References data!
JavaScript Switch Statement Conditional statements in JavaScript are used to perform different actions based on different conditions. The JavaScript Switch Statement You should use the switch statement if you want 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
} This is how it works: First we have a single expression n (most often a variable), that is evaluated once. The value of the expression is then compared with the values for each case in the structure. If there is a match, the block of code associated with that case is executed. Use break to prevent the code from running into the next case automatically.
How to write a switch statement? Activity 11.5 <script type="text/javascript"> //You will receive a different greeting based //on what day it is. Note that Sunday=0, //Monday=1, Tuesday=2, etc. var d=new Date(); theDay=d.getDay(); switch (theDay) { case 5: document.write("Finally Friday"); break; case 6: document.write("Super Saturday"); break; case 0: document.write("Sleepy Sunday"); break; default: document.write("I'm looking forward to this weekend!"); } </script>
Output 11.5
Finally Friday This JavaScript will generate a different greeting based on what day it is. Note that Sunday=0, Monday=1, Tuesday=2, etc.
Lab 12
JavaScript Popup Boxes and User defined Functions
Objectives: After completing this Lab students will able to 1. Understand the usage of JavaScript Popup Boxes o The Alert box o The Confirm box o The Prompt box 2. Use JavaScript Functions and create User defined functions. Objective 1: Understand the usage of JavaScript Popup Boxes. In JavaScript we can create 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");
Activity 12.1 <html> <head> <script type="text/javascript"> function disp_alert() { alert("I am an alert box!!"); } </script> </head> <body> <input type="button" onclick="disp_alert()" value="Display alert box" /> </body> </html>
Output 12.1
Alert box with Line Breaks Activity 12.2 <html> <head> <script type="text/javascript"> function disp_alert() { alert("Hello again! This is how we" + '\n' + "add line breaks to an alert box!"); } </script> </head> <body> <input type="button" onclick="disp_alert()" value="Display alert box" /> </body> </html>
Output 12.2
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"); Activity 12.3 <html> <head> <script type="text/javascript"> function disp_confirm() { var r=confirm("Press a button"); if (r==true) { document.write("You pressed OK!"); } else { document.write("You pressed Cancel!"); } } </script> </head> <body> <input type="button" onclick="disp_confirm()" value="Display a confirm box" /> </body> </html>
Output 12.3
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"); Activity 12.4 <html> <head> <script type="text/javascript"> function disp_prompt() { var name=prompt("Please enter your name","Harry Potter"); if (name!=null && name!="") { document.write("Hello " + name + "! How are you today?"); } } </script> </head> <body> <input type="button" onclick="disp_prompt()" value="Display a prompt box" /> </body> </html>
Output 12.4
Objective 2: Use JavaScript Functions and create User defined functions. A function is a reusable code-block that will be executed by an event, or when the function is called. To keep the browser from executing a script when the page loads, you can put your script into a function. A function contains code that will be executed by an event or by a call to that function. You may call a function from anywhere within the page (or even from other pages if the function is embedded in an external .js file). Functions can be defined both in the <head> and in the <body> section of a document. However, to assure that the function is read/loaded by the browser before it is called, it could be wise to put it in the <head> section. How to call a function? Activity 12.5 <html> <head> <script type="text/javascript"> function myfunction() { alert("HELLO"); } </script> </head> <body> <form> <input type="button" onclick="myfunction()" value="Call function"> </form> <p>By pressing the button, a function will be called. The function will alert a message.</p> </body> </html>
Output 12.5
How to pass a variable to a function, and use the variable in the function? Activity 12.6 <html> <head> <script type="text/javascript"> function myfunction(txt) { alert(txt); } </script> </head> <body> <form> <input type="button" onclick="myfunction('Hello')" value="Call function"> </form> <p>By pressing the button, a function with an argument will be called. The function will alert this argument.</p> </body> </html>
Output 12.6
How to pass variables to a function, and use these variables in the function? Activity 12.7 <html> <head> <script type="text/javascript"> function myfunction(txt) { alert(txt); } </script> </head> <body> <form> <input type="button" onclick="myfunction('Good Morning!')" value="In the Morning"> <input type="button" onclick="myfunction('Good Evening!')" value="In the Evening"> </form> <p> When you click on one of the buttons, a function will be called. The function will alert the argument that is passed to it. </p> </body> </html>
Output 12.7
How to let the function return a value? Activity 12.8 <html> <head> <script type="text/javascript"> function myFunction() { return ("Hello, have a nice day!"); } </script> </head> <body> <script type="text/javascript"> document.write(myFunction()) </script> <p>The script in the body section calls a function.</p> <p>The function returns a text.</p> </body> </html>
Output 12.8 Hello world!
How to let the function find the product of two arguments and return the result? Activity 12.8 <html> <head> <script type="text/javascript"> function product(a,b) { return a*b; } </script> </head> <body> <script type="text/javascript"> document.write(product(4,3)); </script> <p>The script in the body section calls a function with two parameters (4 and 3).</p> <p>The function will return the product of these two parameters.</p> </body> </html>
Output 12.8 12 The script in the body section calls a function with two parameters (4 and 3). The function will return the product of these two parameters.
Lab 13
JavaScript Iterative structures
Objectives: After completing this Lab students will able to 1. Understand the usage of JavaScript Loops o The For Loop o The While Loop o The DoWhile Loop 2. Use Break and Continue statements. Objective 1: Understand the usage of JavaScript Loops. Loops in JavaScript are used to execute the same block of code a specified number of times or while a specified condition is true. In JavaScript there are two different kind 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 for (var=startvalue; var<=endvalue; var=var+increment) { code to be executed } Activity 13.1 <html> <body> <script type="text/javascript"> var i=0; for (i=0;i<=10;i++) { document.write("The number is " + i); document.write("<br />"); } </script> </body> </html>
Output 13.1 The number is 0 The number is 1 The number is 2 The number is 3 The number is 4 The number is 5 The number is 6 The number is 7 The number is 8 The number is 9 The number is 10 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 10. i will increase by 1 each time the loop runs. Note: The increment parameter could also be negative, and the <= could be any comparing statement. How to use the for loop to loop through the different HTML headers. Activity 13.2 <html> <body> <script type="text/javascript"> for (i = 1; i <= 6; i++) { document.write("<h" + i + ">This is header " + i); document.write("</h" + i + ">"); } </script> </body> </html>
Output 13.2
The while Loop The while loop is used when you want the loop to execute and continue executing while the specified condition is true. while (var<=endvalue) { code to be executed } Note: The <= could be any comparing statement. Activity 13.3 <html> <body> <script type="text/javascript"> var i=0; while (i<=10) { document.write("The number is " + i); document.write("<br />"); i=i+1; } </script> </body> </html>
Output 13.3 The number is 0 The number is 1 The number is 2 The number is 3 The number is 4 The number is 5 The number is 6 The number is 7 The number is 8 The number is 9
The example above defines a loop that starts with i=0. The loop will continue to run as long as i is less than, or equal to 10. i will increase by 1 each time the loop runs. The dowhile Loop The do...while loop is a variant of the while loop. This loop will always execute a block of code ONCE, and then it will repeat the loop as long as the specified condition is true. This loop will always be executed at least once, even if the condition is false, because the code is executed before the condition is tested. Syntax Do { code to be executed } while (var<=endvalue);
Activity 13.4 <html> <body> <script type="text/javascript"> i = 0; do { document.write("The number is " + i);
document.write("<br />"); i++; } while (i <= 5) </script> <p>Explanation:</p> <p><b>i</b> equal to 0.</p> <p>The loop will run</p> <p><b>i</b> will increase by 1 each time the loop runs.</p> <p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p> </body> </html>
Output 13.4 The number is 0 The number is 1 The number is 2 The number is 3 The number is 4 The number is 5 Explanation: i equal to 0. The loop will run i will increase by 1 each time the loop runs. While i is less than , or equal to, 5, the loop will continue to run
Objective 2: Using Break and Continue statements. There are two special statements that can be used inside loops: break and continue. Break The break command will break the loop and continue executing the code that follows after the loop (if any). Activity 13.5 <html> <body> <script type="text/javascript"> var i=0; for (i=0;i<=10;i++) { if (i==3) { break; } document.write("The number is " + i); document.write("<br />"); } </script> </body> </html>
Output 13.4 The number is 0 The number is 1 The number is 2
Continue The continue command will break the current loop and continue with the next value.
Activity 13.6 <html> <body> <script type="text/javascript"> var i=0 for (i=0;i<=10;i++) { if (i==3) { continue; } document.write("The number is " + i); document.write("<br />"); } </script> </body> </html>
Output 13.4 The number is 0 The number is 1 The number is 2 The number is 4 The number is 5 The number is 6 The number is 7 The number is 8 The number is 9 The number is 10
Lab 14
JavaScript Events
Objectives: After completing this Lab students will able to 1. Understand the usage of JavaScript Events. Objective 1: Understand the usage of JavaScript Events. By using JavaScript, we have the ability to create dynamic web pages. Events are actions that can be detected by JavaScript. Every element on a web page has certain events which can trigger JavaScript functions. For example, we can use the onClick event of a button element to indicate that a function will run when a user clicks on the button. We define the events in the HTML tags. Examples of events: A mouse click A web page or an image loading Mousing over a hot spot on the web page Selecting an input box in an HTML form Submitting an HTML form A keystroke Note: Events are normally used in combination with functions, and the function will not be executed before the event occurs! onload and onUnload The onload and onUnload events are triggered when the user enters or leaves the page. The onload event is often used to check the visitor's browser type and browser version, and load the proper version of the web page based on the information. Both the onload and onUnload events are also often used to deal with cookies that should be set when a user enters or leaves a page. For example, you could have a popup asking for the user's name upon his first arrival to your page. The name is then stored in a cookie. Next time the visitor arrives at your page, you could have another popup saying something like: "Welcome John Doe!". onFocus, onBlur and onChange The onFocus, onBlur and onChange events are often used in combination with validation of form fields.
Below is an example of how to use the onChange event. The checkEmail() function will be called whenever the user changes the content of the field: <input type="text" size="30" id="email" onchange="checkEmail()">
onSubmit The onSubmit event is used to validate ALL form fields before submitting it. Below is an example of how to use the onSubmit event. The checkForm() function will be called when the user clicks the submit button in the form. If the field values are not accepted, the submit should be cancelled. The function checkForm() returns either true or false. If it returns true the form will be submitted, otherwise the submit will be cancelled: <form method="post" action="xxx.htm" onsubmit="return checkForm()"> onMouseOver and onMouseOut onMouseOver and onMouseOut are often used to create "animated" buttons. Below is an example of an onMouseOver event. An alert box appears when an onMouseOver event is detected: <a href="http://www.iba-suk.edu.pk" onmouseover="alert('An onMouseOver event');return false"> <img src="w3schools.gif" width="100" height="30"> </a>
Lab 15
Catching Errors
Objectives: After completing this Lab students will able to 1. Understand the usage of Try, Catch and Throw statements. 2. Understand the onerror statement. Objective 1: Understand the usage of Try, Catch and Throw statements. The try...catch statement allows you to test a block of code for errors. JavaScript - Catching Errors When browsing Web pages on the internet, we all have seen a JavaScript alert box telling us there is a runtime error and asking "Do you wish to debug?". Error message like this may be useful for developers but not for users. When users see errors, they often leave the Web page. In this Lab you will learn how to trap and handle JavaScript error messages, so you don't lose your audience. There are two ways of catching errors in a Web page: By using the try...catch statement (available in IE5+, Mozilla 1.0, and Netscape 6) By using the onerror event. This is the old standard solution to catch errors (available since Netscape 3) Try...Catch Statement The try...catch statement allows you to test a block of code for errors. The try block contains the code to be run, and the catch block contains the code to be executed if an error occurs. Syntax try { //Run some code here } catch(err) { //Handle errors here } Note that try...catch is written in lowercase letters. Using uppercase letters will generate a JavaScript error!
The example below contains a script that is supposed to display the message "Welcome guest!" when you click on a button. However, there's a typo in the message() function. alert() is misspelled as adddlert(). A JavaScript error occurs. Activity 15.1 <html> <head> <script type="text/javascript"> function message() { adddlert("Welcome guest!"); } </script> </head> <body> <input type="button" value="View message" onclick="message()" /> </body> </html>
Output 15.2
To take more appropriate action when an error occurs, you can add a try...catch statement. The example below contains the "Welcome guest!" example rewritten to use the try...catch statement. Since alert() is misspelled, a JavaScript error occurs. However, this time, the catch block catches the error and executes a custom code to handle it. The code displays a custom error message informing the user what happened:
Activity 15.2 <html> <head> <script type="text/javascript"> var txt="" function message() { try { adddlert("Welcome guest!"); } catch(err) { txt="There was an error on this page.\n\n"; txt+="Error description: " + err.description + "\n\n"; txt+="Click OK to continue.\n\n"; alert(txt); } } </script> </head> <body> <input type="button" value="View message" onclick="message()" /> </body> </html>
The next example uses a confirm box to display a custom message telling users they can click OK to continue viewing the page or click Cancel to go to the homepage. If the confirm method returns false, the user clicked Cancel, and the code redirects the user. If the confirm method returns true, the code does nothing: Activity 15.3 <html> <head> <script type="text/javascript"> var txt="" function message() { try { adddlert("Welcome guest!");
} catch(err) { txt="There was an error on this page.\n\n"; txt+="Click OK to continue viewing this page,\n"; txt+="or Cancel to return to the home page.\n\n"; if(!confirm(txt)) { document.location.href="http://www.iba-suk.edu.pk/"; } } } </script> </head> <body> <input type="button" value="View message" onclick="message()" /> </body> </html>
Output 15.2
The Throw Statement The throw statement allows you to create an exception. If you use this statement together with the try...catch statement, you can control program flow and generate accurate error messages. Syntax throw(exception) The exception can be a string, integer, Boolean or an object.Note that throw is written in lowercase letters. Using uppercase letters will generate a JavaScript error! The example below determines the value of a variable called x. If the value of x is higher than 10 or lower than 0 we are going to throw an error. The error is then caught by the catch argument and the proper error message is displayed: Activity 15.4 <html> <body> <script type="text/javascript"> var x=prompt("Enter a number between 0 and 10:",""); try { if(x>10) throw "Err1"; else if(x<0) throw "Err2"; } catch(er) { if(er=="Err1") alert("Error! The value is too high"); if(er == "Err2") alert("Error! The value is too low"); } </script> </body> </html>
Objective 2: Understanding the onerror statements. We have just explained how to use the try...catch statement to catch errors in a web page. Now we are going to explain how to use the onerror event for the same purpose. The onerror event is fired whenever there is a script error in the page. To use the onerror event, you must create a function to handle the errors. Then you call the function with the onerror event handler. The event handler is called with three arguments: msg (error message), url (the url of the page that caused the error) and line (the line where the error occurred). Syntax onerror=handleErr function handleErr(msg,url,l) { //Handle the error here return true or false } The value returned by onerror determines whether the browser displays a standard error message. If you return false, the browser displays the standard error message in the JavaScript console. If you return true, the browser does not display the standard error message. The following example shows how to catch the error with the onerror event: Activity 15.5 <html> <head> <script type="text/javascript"> onerror=handleErr; var txt=""; function handleErr(msg,url,l) { txt="There was an error on this page.\n\n"; txt+="Error: " + msg + "\n"; txt+="URL: " + url + "\n"; txt+="Line: " + l + "\n\n"; txt+="Click OK to continue.\n\n"; alert(txt); return true; } function message() {
adddlert("Welcome guest!"); } </script> </head> <body> <input type="button" value="View message" onclick="message()" /> </body> </html>
Output 15.5
Lab 16
Project
Different projects regarding website design and development will be assigned to the students in the group.

HTML Manual

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Manual

Uploaded by

Copyright:

Available Formats

Merit Quality Excellence

Sukkur Institute of Business Administration

Introduction to Information & Communication Technology

2 | Introduction to Information & Communication Technology Lab manual

available on desktop. In the address bar

3 | Introduction to Information & Communication Technology Lab manual

4 | Introduction to Information & Communication Technology Lab manual

5 | Introduction to Information & Communication Technology Lab manual

6 | Introduction to Information & Communication Technology Lab manual

7 | Introduction to Information & Communication Technology Lab manual

8 | Introduction to Information & Communication Technology Lab manual

9 | Introduction to Information & Communication Technology Lab manual

10 | Introduction to Information & Communication Technology Lab manual

11 | Introduction to Information & Communication Technology Lab manual

12 | Introduction to Information & Communication Technology Lab manual

Activity 2.4 <html> <body> <p> a dozen is

13 | Introduction to Information & Communication Technology Lab manual

14 | Introduction to Information & Communication Technology Lab manual

15 | Introduction to Information & Communication Technology Lab manual

Phone: Give your phone Number </address></body></html>

16 | Introduction to Information & Communication Technology Lab manual

17 | Introduction to Information & Communication Technology Lab manual

18 | Introduction to Information & Communication Technology Lab manual

Objective 3: Understanding the use of <target > tag.

19 | Introduction to Information & Communication Technology Lab manual

The disadvantages of using frames are:

20 | Introduction to Information & Communication Technology Lab manual

<html> <frameset cols="50%,25%"> <frame src="Myinfo.html> <frame src="MySubjects.html> </frameset> </html>

21 | Introduction to Information & Communication Technology Lab manual

22 | Introduction to Information & Communication Technology Lab manual

23 | Introduction to Information & Communication Technology Lab manual

24 | Introduction to Information & Communication Technology Lab manual

25 | Introduction to Information & Communication Technology Lab manual

26 | Introduction to Information & Communication Technology Lab manual

27 | Introduction to Information & Communication Technology Lab manual

<tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table>

28 | Introduction to Information & Communication Technology Lab manual

30 | Introduction to Information & Communication Technology Lab manual

31 | Introduction to Information & Communication Technology Lab manual

32 | Introduction to Information & Communication Technology Lab manual

33 | Introduction to Information & Communication Technology Lab manual

34 | Introduction to Information & Communication Technology Lab manual

35 | Introduction to Information & Communication Technology Lab manual

37 | Introduction to Information & Communication Technology Lab manual

38 | Introduction to Information & Communication Technology Lab manual

<legend> <select> <optgroup> <option> <button> <isindex>

Output 7.1 How it looks in a browser: First name: Last name:

39 | Introduction to Information & Communication Technology Lab manual

Output 7.3 I have a bike: I have a car:

40 | Introduction to Information & Communication Technology Lab manual

41 | Introduction to Information & Communication Technology Lab manual

Output 7.3 Username:

42 | Introduction to Information & Communication Technology Lab manual

43 | Introduction to Information & Communication Technology Lab manual

44 | Introduction to Information & Communication Technology Lab manual

<html> <body> <form name="input" action="html_form_action.asp" method="get"> Male:

45 | Introduction to Information & Communication Technology Lab manual

46 | Introduction to Information & Communication Technology Lab manual

47 | Introduction to Information & Communication Technology Lab manual

48 | Introduction to Information & Communication Technology Lab manual

50 | Introduction to Information & Communication Technology Lab manual

Output 9.1 Hello World!

51 | Introduction to Information & Communication Technology Lab manual