02 - HTML and JavaScript

HTML Introduction

Hyper Text Markup Language is abbreviated as HTML. HTML is not a programming language but it is a markup language. HTML coding can be performed through Notepad or WordPad. The code created in Notepad or WordPad can be displayed on any Web Browser present in the system.

The code written in Notepad must be saved with ‘.html’ extension. HTML tags always written in pair; first tag is start and second tag is the end tag. HTML tags are not case sensitive. HTML code is written in form of HTML elements having tags enclosed in the angular brackets containing the code.

2.1 HTML Form Tags and Elements

2.1.1 HTML Elements

HTML elements are used for developing any html file. These elements are the basic building blocks of HTML language. All the data is added within the HTML elements. They must be added in the specify hierarchy in the html document. Each start tag of an element must have a corresponding closing tag.

1) <html> element: The <html> element indicates as the first element in the document. The text between the tag defines the web page contents.

2) <head> element: The <head> element is first element in the <html> element. It acts as a container elements storing other tags present in the tag hierarchy.

3) <title> element: The <title> element is used for inserting title to a web page. The title is displayed on the top of the page. Creative heading for a document can be added in the title tag.

4) <body> element: The <body> element contains the data to be displayed on the web page. It contains <p> element that defines a paragraph in the document.

An example of the above HTML elements is as shown below:

<html>
 <head>
   <title>HTML document</title>
 </head>
 </body>
  <p>HTML Tutorial for developers</p>
  <p>Introduction to HTML</p>
 </body>
</html>

5) Empty HTML element: The HTML element that does not contain any content is known as empty tag. The <br> tag is an empty element in HTML. It is used for line break in a document. It does not contain a closing tag.

2.1.2 HTML Attributes

Every HTML attribute provides additional information about the element used. The start tag contains the attribute. Attributes always appear in name-value pair. They are always specified in the start tag. Some of the attributes are mentioned below:

1) id attribute: It is used to uniquely specify the element in the web page. With id attribute user can easily distinguish between several controls present in the page. It save developers time for the search of the specific element.

<html>
 <head>
 </head>
 <body>
   <p “id=1” > This is even number</p>
   <p “id=2” > This is odd number</p>
 </body>
</html>

In the above example, the paragraph with “id=1” identifies an even number and with “id=2” identifies odd number. User can easily differentiate between the two paragraphs.

2) class: It is used to specify the class element in the code. It is associated with the cascading style sheets. The syntax of the class attribute is as mentioned below:

class=”classname01 classname02 classname03 classname04”.

Here classname represent different CSS files to be used.

3) style: It is used to specify the inline CSS style for an element.

<html>
 <head>
 </head>
 <body>
    <p style =”font-family; arial; color:#0000A0; “> New Year Eve </p>
 </body>
</html>

In the above example, font type Arial and font color code is added to the text. The output will be formatted by the styles assigned in the tag.

2.1.3 HTML Heading and formatting tags

1) HTML headings: Headings are the name to specify the content present in its body. HTML has six heading tags depending on the priority to be used.

<h1>, <h2>, <h3>, <h4>, <h5> and <h6> are the six different heading tags present.

<h1> is the most important while <h6> is the least important heading. The browser adds empty space before and after the heading is defined. Different effects cannot be applied through the heading tag.

<html>
 <head>
 </head>
 <body>
    <h1>School life is the best to learn</h1>
    <h2>Learn well so you can earn well</h2>
    <h3>An apple a day keeps doctor away</h3>
    <h4>Rome was not built in a day</h4>
    <h5>Laughter is the best medicine</h5>
    <h6>Nothing is impossible in this world</h6>
 </body>
</html>

2) HTML Lines: The <hr> tag is used to create a horizontal line in an HTML page. The <hr> tag is also known as empty tag as it does not require a closing tag.

<html>
 <head>
 </head>
 <body>
    <p> Knowledge is the best treasure</p>
    <hr/>
    <p>London is a place to visit</p>
 </body>
</html>

3) HTML Comments: Comments are used for adding additional description for easy understanding. Comments are ignored and not displayed by the browser.

<html>
 <head>
 </head>
 <body>
    <p>First application to be created on web controls </p>
    <!—User creating the demo - - >
 </body>
</html>

4) HTML formatting: HTML provides user to format the text using different formatting tags. Bold <b> and Italic <i> tags are used for formatting the text. The Underline <u> tag is used to display the word in the underline format. Strike <strike> tag draws a thin line over the text. Superscript <sup> tag is used to display the text above the normal height of the text. Subscript <sub> tag is used to display the text below the normal height of the text. The Small <small> tag is used to display the text in smaller font size, Big <big> tag is used to display text in larger font size.

<html>
 <head>
 </head>
 <body>
  <b>Light travels faster than sound</b><br/>
  <i>Sound waves have frequency </i><br/>
  <u>Do not make noise in Library</u>
  <p>This is not the proper format
  <strike>displayed</strike></p>
  <p>Do not enter in <sup>restricted</sup>zone</p>
  <p>Please ensure you check the <sub>safety</sub>measures</p>
  <p>Check for <small>train</small>availability</p>
  <p>This is the <big>correct</big>path to your house</p>
 </body>
</html>

2.1.4 HTML Links

The hyperlink is defined using <a> tag. The use of hyperlink is to navigate between several web pages. The color of the text determines the status of the link.

If the link is not visited by the user, it is marked as blue. A visited link is marked purple in color. The red color indicates the link is active.

The href attribute specifies the destination of the link. The target attribute is used to specify where the document will open.

<html>
 <head>
 </head> 
 <body>
    < a href = “http://www.gmail.com/”  target=”_blank”>Gmail Webpage</a>
 </body>
</html>

2.1.5 HTML CSS

CSS is used to add some style to the HTML elements. CSS can be added to HTML in three different ways:

Ø Inline Style

Ø Internal Style Sheet

Ø External Style Sheet

1) Inline Style: The Inline Style is used to apply style to an element in the CSS file. The style attribute contains the specific CSS property. The example mentioned below is used to change the text color and right margin of a paragraph.

<html>
 <head>
 <body>
    <p style=”color:red; margin – right:10px;”>Starting new point</p>
 </body>
 </head>
</html>

2) Internal Style Sheet: The Internal Style Sheet are used when the style is to be applied to a single document. The Internal styles are defined in the <head> tag of the page. The <style> tag is used to define the styling in the document. The example to add internal style sheet is as shown below:

<html>
 <head>
 <style>
    body { background – color : pink; font – family:arial; }
    p { color : blue; }
 </head>
</html>

3) External Style Sheet: The external Style Sheet are useful when the website look and feel needs to be changed. The <link> tag is useful for creating the link to individual web pages. The <link> tag is defined in the <head> section of the hierarchy.

The example of the <link> tag in external style sheet is mentioned below:

<html>
 <head>
  <link rel = “stylesheet” type=”text/css” href=”creation.css” >
 </head>
</html>

2.1.6 HTML Images

The <img> tag is used to represent images in HTML. The <img> tag is an empty tag as it contains attributes and no closing tags. The list of image attributes are mentioned below in a tabular format.

Attributes

Description

Width

Used to set the width of image

Height

Used to set the height of image

Border

Sets the border around the image

Src

Specifies the URL which is the source of the image

Alt

Displays alternative text when the image is missing

align

Sets the horizontal alignment of the image depending on the value passes by the user

valign

Sets the vertical alignment of the image depending on the value passes by the user

hspace

Sets the horizontal space around the image

vspace

Sets the vertical space around the image

name

Assigns the name of the image in the document

Id

It is the id of the image in the document

title

It is used to specify the title of the document

The example of <img> tag with various attributes is as mentioned below:

<html>
 <head>
 </head>
 <body>
    <img src=”daisy.gif” alt=”Flowers” width=”20” height=”30” border=”1” align=”left” />
 </body>
</html>

2.1.7 HTML Tables

The <table> tag is used to create tables in HTML.

A table contains rows and columns. The <tr> tag is used to represent the row in the table. Each row is divided into data cells.

The <td> tag is used to represent table data. Border and Table Headers are attributes of the HTML table. If the border attribute is not specified, no table border is added.

The <th> tag is used for adding heading to the table.

An example of HTML table with following attributes is mentioned below:

<html>
 <head>
 </head>
 <body>
    <table border=”1” >
     <tr>
      <th>SrNo</th>
      <th>NAME</th>
     </tr>
     <tr>
      <td>01</td>
      <td>Kajal</td>
     </tr>
     <tr>
      <td>02</td>
      <td>Mamta</td>
     </tr>
    </table>
 </body>
</html>

The cell padding and cell spacing attributes are used for aligning the white space in the table cell. Cell padding is the distance between the cell borders and the content. Cell spacing is used for the defining the width of the cell.

The col span and row span attributes are used to merge cells in the table. The col span attribute is used to merge two or more columns cell in the table. The row span attribute is used to merge two or more row cell in the table.

The table background color can be set using the bgcolor attribute. The table width and height can be set using width and height attributes. The caption tag is used for the table tile.

An example of HTML table using the above attributes is mentioned below:

<html>
 <head>
 </head>
 <body>
  <table border=”2” bgcolor=”pink” width=”500” height=”300” cellpadding=”4” cellspacing=”4” >
    <caption>Exam Details</caption>
      <tr>
       <th>No</th>
       <th>Name</th>
       <th>Class</th>
      </tr>
      <tr><td rowspan =”2” >01</td>
        <td>John</td><td>Grade12</td></tr>
      <tr><td>Mark</td><td>Grade11</td></tr>
  </table>
 </body>
</html>

2.1.8 HTML Lists

Items can be added in the list form using HTML lists. There are three types of lists in HTML.

Ø Unordered list

Ø Ordered list

Ø Definition list

Unordered list: In unordered list items are placed without specific order sequence. The <ul> tag is used for the list creation. The list items are marked with bullets in the presentation. The example of unordered list is mentioned below:

<html>
 <head>
 </head>
 <body>
    <h3>Programming languages</h3>
    <ul>
     <li>C</li>
     <li>C++</li>
     <li>Java</li>
     <li>PHP</li>
     <li>VB</li>
    </ul>
 </body>
</html>

Ordered list: Ordered list contains items in number format. The <ol> tag is used to define ordered list. Each item in ordered list is defined in the <li> tag. The example of the ordered list is as mentioned below:

<html>
 <head>
 </head>
 <body>
   <h4>Data Structure</h4>
   <ol>
    <li>Stack</li>
    <li>Queue</li>
    <li>Link</li>
    <li>Tree</li>
    <li>Graph</li>
   </ol>
 </body>
</html>

Definition list: Description list contains list of names with their description. The <dl> tag is used for description list. The <dt> tag is used for defining terms. The <dd> tag is used for the term definition. The </dl> tag is used for the end of the list. The example of the definition list is stated below:

<html>
 <head>
 </head>
 <body>
  <h3>List of country capitals</h3>
  <dl>
   <dt>London</dt>
   <dd>Capital city of United Kingdom</dd>
   <dt>Cairo</dt>
   <dd>Capital city of Egypt</dd>
   <dt>Columbo</dt>
   <dd>Capital city of Sri Lanka</dd>
  </dl>
 </body>
</html>

2.1.9 HTML Form and Controls

The HTML form is used for collection of data that can be passed to the server. The <form> tag is used for creating form in HTML. There are several form control used for designing and assigning values in the HTML form.

The list of HTML form is as mentioned below:

Ø Text input control

Ø Buttons

Ø Checkbox

Ø Radio buttons

Ø Select box

Ø File select box

Ø Hidden control

Text input control:  

The Text input controls are used for user text input in the HTML form. Based on the input type there are three types as follows:

1) Single line text input control: When one line of user input is required, use the single line text input control. The <input> element with attribute of text type is used for single line text input. The attributes like type, name, value, size, maxlength are used with the <input> tag for the form. The example of single line text input control is mentioned below:

<html>
 <head>
 </head>
 <body>
  <form>
    Source station:
    <input type=”text” name=”Source station” />
    <br>
    Destination station:
    <input type=”text” name=”Destination station” />
  </form>
 </body>
</html>

2) Password input control: It is a single line input having attribute type is password and value in the input is masked. The example is mentioned below:

<html>
 <head>
 </head>
 <body>
  <form>
    Username:
    <input type=”text” name=”Username” />
    <br>
    Password:
    <input type=”text” name=”Password” />
  </form>
 </body>
</html>

3) Multi line text input control: If the user wants to enter multiple line input, use the multiline input text control. The <textarea> tag is used to enter multiple line input. The example of multiline text input is as mentioned below:

<html>
 <head>
 </head>
 <body>
   <form>
    Summary:<br/>
    <textarea rows=”6” cols=”40” name=”Summary” >
    User can add text in the specified area….
    </textarea>
   </form>
 </body>
</html>

Buttons: The <input> tag is used for adding button to the form. The type attribute is specify the button used in the form. There are three types of attribute values as submit, reset and button. The example of the button in HTML is mentioned below:

<html>
 <head>
 </head>
 <body>
  <form>
    <input type=”submit” name=”Submit” value=”submit” />
    <br/>
    <input type=”reset” name=”reset” value=”reset” />
    <br/>
    <input type=”button” value=”Button” />
  </form>
 </body>
</html>

Checkbox: When the user wants more than one option to be selected from the list of options, the checkbox control is used. The <input> tag is used to create the checkbox control.

<html>
 <head>
 </head>
 <body>
  <form>
    <input type=”checkbox” name=”Pizza” value=”Food” />Pizza
    <input type=”checkbox” name=”Pasta” value=”Food” />Pasta
  </form>
 </body>
</html>

Radio Button: When the user wants only one option to be selected from the list of options, the radio button control is used. The <input> tag is used to create the radio button control.

<html>
 <head>
 <body>
  <form>
    <input type=”radio” name=”Gender” value=”Male” />Male
    <br/>
    <input type=”radio” name=”Gender” value=”Female” />Female
    <br/>
    <input type=”button” value=”Button” />
  </form>
 </body>
 </head>
</html>

Select Box: The select box gives user with many options for selection of data from the list. The <select> tag is used for adding dropdown list control on the HTML form. The example of the select box is mentioned below:

<html>
 <head>
 </head>
 <body>
  <form>
    <select name=”dropdown”>
     <option value=”Java” selected>Java</option>
     <option value=”SQL”>SQL</option>
     <option value=”PHP”>PHP</option>
    </select>
  </form>
 </body>
</html>

File Select Box: To upload a file on the web page the File upload or File Select box is used. The <input> tag is used to upload the file on the page. The example of the HTML File select box is mentioned below:

<html>
 <head>
 </head>
 <body>
  <form>
    <input type=”file” name=”fileup” accept=”image/*”  />
   </form>
 </body>
</html>  

Hidden Control: The Hidden control passes information between pages without the user accessing it. User can view the data from the page source. The <input> tag supplied by hidden attribute is used for passing the secure information. The example of the Hidden control is mentioned below:

<html>
 <head>
 </head>
 <body>
  <form>
     <h1>User Information</h1>
    <input type=”hidden” name=”info” value=”12” />
  </form>
 </body>
</html>

2.2 Understanding JavaScript using programs

JavaScript is a scripting language used for developing web pages. JavaScript statements are commands to be executed by the browser. It helps the browser understand what functions are to be performed.

It provides various features to the user as mentioned below:

1. Functional programming: It accepts a function as parameter value inside another function. Functions without names can also be used in JavaScript.

2. Object Oriented: JavaScript supports the many object oriented concepts like inheritance, object creation. It is easy to learn for the user.

3. Client side and server side accessibility: JavaScript can access the document model of the browser and at runtime can change the web page structure. Using Open Source enterprise content management system, JavaScript can be used at server side as well.

4. Browser support: JavaScript is supported by all the web browsers. It does not require any plugin to execute the script on the browser.

2.2.1 JavaScript Statements

1) The <script> tag: The <script> tag is used to define client side script in JavaScript. By providing the ‘src’ attribute, user can link to external file.

2) The <noscript>tag: The <noscript> tag is used as an alternative to the client side script, when the tag is not supported by the browser.

An example of the script tags is mentioned below:

<html>
 <title>Welcome 2014</title>
 <body>
   <script language=”javascript”>
     document.write(“New Year 2014 Started” );
   </script>
   <noscript>
     <p>Sorry some problem with the script</p>
   </noscript>
 </body>
</html>

2.2.2 JavaScript Comments

JavaScript comments make the code more easy to understand for the user. There are single line and multiline comments in JavaScript. The single line comments start with // while multiline comments start with /* and end with */. Comments can even be used at the end of each line of the code. It is used to provide more information about the statement. The example of JavaScript comments is mentioned below:

<html>
<title>Study comments in Javascript</title>
 <body>
   <script language =”javascript”>
      //document.getElementById(“g1”).innerHTML = “where were you?”;
      /* document.getElementById(“p1”).innerHTML =”Addition of two numbers”;
      */
   </script>
 </body>
</html>

2.2.3 JavaScript Data Types

JavaScript has dynamic data types. Any variable can be to any data type in JavaScript.

1) JavaScript Strings: A string can be written inside single and double quotes in JavaScript. Any text inside quotes is considered as string. The example of JavaScript string is mentioned below:

var firstnames="Mick";
var lastname='Harry';

2) JavaScript numbers: JavaScript supports only one number type. Numbers can be written without decimal point.

var y=12. 00 //number with decimal 
var z=12 //number without decimal

3) JavaScript Arrays: Arrays in JavaScript are zero based indexes. Value at [0] position in an array is considered as the first element in array list.

var  names=new  Array();
names[0]="Alice";
names[1]="George";
names[2]="Rosy";
            OR
var  names=new  Array();("Alice","George","Rosy");

4) JavaScript Objects: An object in JavaScript is delimited by curly braces. The name and value pair define the object properties. The properties are separated by comma delimiter.

var address { streetno:12, houseno:3, city:”london”};
        OR
var address = {
        streetno : 12;
        houseno : 3;
        city       : “london”
        };

2.2.4 JavaScript Variables:

JavaScript variables are used for holding expressions and values. In JavaScript, variables must begin with a letter. Variable names are case sensitive.

var name; //declaration of variable
name=”John” //assign value to variable

2.2.5 JavaScript Operators:

Arithmetic operators: They are used to perform arithmetic operation between variables or values. Addition, subtraction, multiplication, division, modulus, increment and decrement are various assignment operators.

Comparison operators: They are used to determine equality or difference between the variables.

Conditional operators: They are used to assign values to a variable based on some condition. The syntax of conditional operator is mentioned below:

variablename=(condition)?value1:value2

2.2.6 Conditional Statements:

The code can perform actions depending on the decisions of different conditions. The flow of code is determined through various conditional statements:

1) If Statement:

If the condition specified is true, run the specific code. The syntax of if statement:

if (condition)
{
    Code to be executed if the condition is true
}

2) If else Statement:

The statements are executed if the respective conditions are true. The syntax of the If else statement is as below:

If (Condition)
{ 
     Code to be executed if the condition is true
}
Else
{
      Code to be executed if the condition is not true
}

3) If else if else statement:

This is used when many code blocks are to be executed. The syntax is

If (condition 1)
{
      Code to be executed if condition1 is true
}
Else if (condition 2)
{ 
      Code to be executed if condition2 is true
}
Else
{
       Code to be executed when both the conditions are not true
}

4) Switch Statement:

Switch statement is used to select one from many blocks of code. The syntax of switch statement is as below:

switch(n)
{
    case 1:
               Execute code block1;
               break;
     case 2: 
               Execute code block 2;
               break;
    default:
                code to be executed if none of the condition is satisfied
}

2.2.7 JavaScript Functions

JavaScript functions are the code of block that are executed when they are called. The syntax of a JavaScript function is as below:

function functionname()
{
     code to be executed
}

An example of JavaScript function is shown below:

<html>
 <head>
  <script>
   function number()
   {
    alert(“Unique number”);
   }
  </script>
 </head>
 <body>
   <button onclick=”number()”>Click</button>
 </body>
</html>

There are two ways of JavaScript functions:

1) Calling JavaScript function with arguments: User can pass values when it calls the function. These values are called arguments. The argument list is separated by commas. The syntax of JavaScript function with arguments is as mentioned below:

functionname(argument1,argument2)

An example of JavaScript function with arguments is mentioned below:

<html>
 <head>
   <script>
     function student ( name, id )
       {
     alert(“Welcome”+name+”, id”+id);
       }
   </script>
 </head>
 <body>
    <button omclick =”student(‘Mick’, 2)”></button>
 </body>
</html>

2) Functions with a return value: Some JavaScript functions return values. The return statement is used for returning values.

An example of function with return value is mentioned below:

<html>
 <head>
  <script>
    function square(a)
    {
    var b = a * a;
    return b;
    }
    var x = 4;
    square(x);
    document.write(“the square is”+b);
   </script>
 </head>
</html>

Like us on Facebook