Sunday, 28 August 2016

JavaScript Selection Statements(if, if...else, switch)

Selection Statement
Allows the execution of one or group of statements on particular condition.
Selection statements use a condition to select or determine the statements that are to be executed.

Selection Statements are of three types

  • if
  • if..else
  • switch
if Statement
It is used when we need to execute a group of one or more statements only when a particular condition is met.
Example

<!DOCTYPE html>
<html>
<head>
    <title>javaScript if Statement</title>
</head>
<body>
    <h1>JavaScript if Statement</h1>
    <script>
        var number1 = 4;
        var number2 = 8;
        if ((number2 / number1 == 2))
        {
            document.write("Use of If Statement.<br />");
        }
    </script>
</body>
</html>


if...else Statement
If we want to execute another set of statements when condition is not true than we can use if...else statement.
Example 1

<!DOCTYPE html>
<html>
<head>
    <title>javaScript if Statement</title>
</head>
<body>
    <h1>JavaScript if Statement</h1>
    <script>
        var number1 = 4;
        var number2 = 8;
        if ((number2 / number1 == 2)) {
            document.write("if statement will be executed.<br />");
        }
        else {
            document.write("else statement will be executed.<br />");
        }
    </script>
</body>
</html>
Example 2
<!DOCTYPE html>
<html>
<head>
    <title>javaScript if Statement</title>
</head>
<body>
    <h1>JavaScript if Statement</h1>
    <script>
        var number1 = 4;
        var number2 = 8;
        if ((number2 / number1 == 3)) {
            document.write("if statement will be executed.<br />");
        }
        else {
            document.write("else statement will be executed.<br />");
        }
    </script>
</body>
</html>



Example 3

<!DOCTYPE html>
<html>
<head>
    <title>javaScript if Statement</title>
</head>
<body>
    <h1>JavaScript if Statement</h1>
    <script>
        var number1 = 4;
        var number2 = 8;
        if ((number2 / number1 == 3)) {
            document.write("if statement will be executed.<br />");
        }
        else if ((number2 / number1 == 2)) {
            document.write("else if statement will be executed.<br />");
        }
        else {
            document.write("else statement will be executed.<br />");
        }
    </script>
</body>
</html>


switch Statement
statement will be executed on the basis of a numeric or string expression. If none of the condition met than default condition will be executed.
Syntax
switch(expression)
{
case value1 : statement1;
                   break;
case value2 : statement2;
                   break;
default : statement_default;
             break;
}
Example 1: When break is not used. all the statements after the correct case will be executed.

<!DOCTYPE html>
<html>
<head>
    <title>javaScript Switch Statement</title>
</head>
<body>
    <h1>JavaScript Switch Statement</h1>
    <script>
        var number1 = 4;
        var number2 = 8;
        switch (number2 / number1)
        {
            case 1: document.write("( 8/4 ) = 1.<br />");
            case 2: document.write("( 8/4 ) = 2.<br />");
            case 3: document.write("( 8/4 ) = 3.<br />");
            default:
                document.write("Result not found");
        }
    </script>
</body>
</html>

Example 2
<!DOCTYPE html>
<html>
<head>
    <title>javaScript Switch Statement</title>
</head>
<body>
    <h1>JavaScript Switch Statement</h1>
    <script>
        var number1 = 4;
        var number2 = 8;
        switch (number2 / number1)
        {
            case 1: document.write("( 8/4 ) = 1.<br />");
                break;
            case 2: document.write("( 8/4 ) = 2.<br />");
                break;
            case 3: document.write("( 8/4 ) = 3.<br />");
                break;
            default:
                document.write("Result not found");
        }
    </script>
</body>
</html>


Features of JavaScript, syntax

JavaScript
It is a client and server side object based scripting language that is used to make interactive web pages. JavaScript is commonly used scripting language because it is written on the client side executes on the client browser, thereby reducing the load on the server.
It is lightweight programming language.
Javascript is interpreted language, which implies that scripts written in JavaScript are interpreted line by line, which is built in component of web browser.
Javascript is platform independent, means that you need to write the script once and can run it on any platform or browser without affecting the output of the script.

Features of JavaScript

  • Imperative and structured - implies that javascript supports all the syntaxes of the structured programming language C, such as if statement, loops, switch. The only difference in between c and javascript is that, semicolon is not necessary to terminate the statement in javascript while it does in C.
  • Dynamic Text - implies that javascript supports dynamic typing. this means that type of variable defined according to the value stored in it.example, after variable declaration we assign it some value that's dynamic typing. Javascript provides some built in objects such as Math, String etc.
  • Functional - implies that javascript does not support classes. Instead  objects are created from the constructor function. each constructor function represent a unique object type.
  • Prototype-based - each javascript function is associated with a prototype object. there are several built in objects that represents constructor functions, like Array(), Date(), Error(), Math(), Number() etc.
  • Platform independent -  means that you need to write the script once and can run it on any platform or browser without affecting the output of the script.
Example 1: When javascript is present inside head.

<!DOCTYPE html>
<html>
<head>
    <title>Css begins</title>
    <style>
        li {
        font-weight:bold;
        font-style:italic;
        }
    </style>
    <script>
        alert("Javascript Begins");
    </script>
</head>
<body>

    <ul style="border:double; color:black; font-weight:bold; width:100px">
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>

</body>
</html>

Example 2: Javascript at bottom
<!DOCTYPE html>
<html>
<head>
    <title>Css begins</title>
    <style>
        li {
        font-weight:bold;
        font-style:italic;
        }
    </style>
</head>
<body>

    <ul style="border:double; color:black; font-weight:bold; width:100px">
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
    <script>
        alert("Javascript Begins");
    </script>
</body>
</html>

In the example first when javascript is present at top. It is loaded first before the elements of the webpage. While in Example second first element are loaded than javascript.
It's best practice to include css at the top and javascript at the bottom. it saves your loading time.
If it's really important like some elements depends on javscript than we need to include that javascript code at the top. 

CSS evolution versions, syntax

Cascading Style Sheet
CSS stands for Cascading Style sheet. It is used to define styles and layouts in HTML and XHTML web pages. We can set the font size width, weight, border and many other properties using CSS.
We can also define CSS in different file and save it with .css extension and can use it in multiple web pages by including css file this helps in re usability of code.

Evolution Of CSS
CSS version 1 include following feature

  • provides background to elements
  • provides color to text.
  • provides alignment of text, images etc.
  • provided margin, border, padding, and positioning of elements.
  • provides font properties such as emphasis.
  • provides different text attribute, such as spacing between words,letters, and lines of text.
CSS version 2 include following feature
  • supports bidirectional text, which represents a text that can be displayed  in both right-to-left and left-to-right directions.
  • provides font properties such as shadows.
  • supports aural style sheets that are used by visually impaired persons to access the web.
  • provides styles for different media types, such as screen, tv, print.
  • provides absolute, relative, fixed positioning of elements and the z-index.
CSS 3 include the following features
  • provides attributes selectors.
  • provides custom fonts.
  • supports rgba colors.
  • provides css selectors.
  • supports the border image through border-image and border-corner image properties.
  • supports more colors and a wider range of color definition.
  • provides rounded corner for any box using border-radius and background position.
  • provides the box shadow property to add shadow effect to the elements.
  • allows multiple backgrounds in a web page.
  • allows multi column text without using a table.
  • display shadow with the text.
  • provides opacity to set the transparency of box, images, or text.
Syntax of CSS
CSS syntax has two parts 
  • selector- it defines an html element to which css style is to be applied.
  • declaration- it contains css properties and value.
selector
{
first property: value;
second property: value;
.
.
nth property: value;
}

example

<!DOCTYPE html>
<html>
<head>
    <title>Css begins</title>
    <style>
        li {
        font-weight:bold;
        font-style:italic;
        }
    </style>
</head>
<body>

    <ul style="border:double; color:black; font-weight:bold; width:100px">
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>

</body>
</html>




HTML datalist using Select Element, Option, OptGroup Element

Select Element
It allows to select single item from number of options. No default option is provided by select element that will be transmitted to server if no option is selected.
The options are written within the opening and the closing tags of the select element by using the option element.

Attributes of Select Element

  • disabled- implies that the dropdown list is disabled.
  • name- refers to the name of the dropdown list.
  • refers to the number of visible options shown in the dropdown list.
  • autofocus- allows the button control to get the focus as soon as the page loads.
  • form- refers to the id of the form.
  • multiple- specifies that the multiple items can be selected from the dropdown list
Option Element
It is used to define the options written within the select element, Each option is separately written within a separate set of option element. Option element does not contain any other element within it.

Attributes of Option Element
  • label- refers to the heading of the several groups.
  • disabled- disabled the option element.
  • selected- option that is to be displayed as default.
  • value- refers to the value that is to be sent to the server.
example

<!Doctype Html>
<html>
<body>
<h1>Select and Option element</h1>
<form>
Select any one game from the drop down
<select>
<option value="cricket">cricket</option>
<option value="football">football</option>
<option value="hockey">hockey</option>
<option value="tennis">tennis</option>
</select>
</form>
</body>
</html>



OptGroup Element

It is used to create nested and cascading drop-down lists. In both type of lists the related items are grouped under specific headings.

Attributes of OptGroup

  • label- refers to the heading of the several groups.
  • disabled- disabled the optgroup element.
example
<!Doctype Html>
<html>
<body>
<h1>Select, Option, Optgroup element</h1>
<form>
select one item from a list of Sports, fruits, vegetables:
<select>
<optgroup label="sports">
<option value="cricket">cricket</option>
<option value="football">football</option>
<option value="hockey">hockey</option>
<option value="tennis">tennis</option>
</optgroup>
<optgroup label="fruits">
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="mango">mango</option>
</optgroup>
<optgroup label="vegetables">
<option value="cabbage">cabbage</option>
<option value="tomato">tomato</option>
<option value="potato">potato</option>
</optgroup>
</select>
</form>
</body>
</html>







HTML Input Type Submit, Reset button elements

Input Type Submit
When the submit button is clicked, the form is sent to the address specified by the url.
Attributes of Input Type Submit

  • name- specifies the name of the submit button.
  • value- specifies the label that is displayed on the submit button.
example
<!Doctype Html>
<html>
<body>
<h1>Submit Button</h1>
<form>
Username : <input type="text" name="username" value="Newuser"><br />
Password : <input type="password" name="password" value="NewPassword"><br />
<input type="submit" name="Submit" value="click here"><br/>
</form>
</body>
</html>


Input Type Reset
When the reset button is clicked, form data will be cleared.
Attributes of Input Type Reset
  • name- specifies the name of the reset button.
  • value- specifies the label that is displayed on the reset button.
 example
<!Doctype Html>
<html>
<body>
<h1>Reset Button</h1>
<form>
Username : <input type="text" name="username" ><br />
Password : <input type="password" name="password"><br />
<input type="submit" name="submit" value="Submit">&nbsp;&nbsp;
<input type="reset" name="Reset" value="click to Reset"><br/>
</form>
</body>
</html>





HTML Input Type Checkbox, Radio button elements

Input Type Checkbox
Checkbox is used to select or deselect one or more options from the given set of options.
Attributes of Checkbox

  • name- defines name of the checkbox
  • value- value that should be transferred to the server after selecting the corresponding option on the checkbox.
  • checked- it is used to select the checkbox by default
example

<!Doctype Html>
<html>
<body>
<h1>CheckBox</h1>
<form>
Select One or More Option: <br/>
Sports you like to watch?<br/>
<input type="checkbox" name ="option1" value="Cricket" checked="checked">Cricket<br />
<input type="checkbox" name ="option2" value="Football">Football<br />
<input type="checkbox" name ="option3" value="Hockey">Hockey<br />
</form>
</body>
</html>


Input Type Radio
Only one item can be selected at a time while in checkbox we can select multiple items at a time.
Attributes of Radio

  • name- defines name of the radio button.
  • value- value that should be transferred to the server after selecting the corresponding option on the radio button.
  • checked- it is used to select the radio button by default
example


<!Doctype Html>
<html>
<body>
<h1>Radio</h1>
<form>
Sports you like to watch?<br/>
<input type="radio" name ="group1" value="Cricket" checked="checked">Cricket<br />
<input type="radio" name ="group1" value="Football">Football<br />
<input type="radio" name ="group1" value="Hockey">Hockey<br />
</form>
</body>
</html>

HTML Input Type Number, File, hidden elements

Input Type Number
It allows you to enter only number in the input field. If any alphabet is added the browser will prompt that only numbers are allowed.
Attributes of Input Type Number
  • min- used to set the minimum number.
  • max- used to set the maximum number.
example
<!Doctype Html>
<html>
<body>
<h1>Input Type Number</h1>
<form>
Enter Numeric Data: <input type="number" min="3" max="100">
</form>
</body>
</html>

Input Type File
It allows you to select a file from local system and save it to the server.
Attributes of Input Type File 
  • size- defines the width of visible text on the file selection field.
  • maxlength- specifies the maximum number of characters that can be entered in the file selection field.
  • accept- specifies the type of files that ca be submitted through a file upload.
example
<!Doctype Html>
<html>
<body>
<h1>Input Type file</h1>
<form>
Enter File: <input type="file" >
</form>
</body>
</html>

Input Type hidden
It is used to pass along the variable and values from one form to another. As it's name implies the variable is hidden and not shown by the browser.
Attributes of Input Type Hidden 
  • name- specifies the name of the hidden field.
  • value- specifies the value of the hidden field.
example
<!Doctype Html>
<html>
<body>
<h1>Input Type hidden</h1>
<form>
User : <input type="text" id="name"/><br />
<input type="hidden" id="greetings" value="Hello"/><br />
<input type="submit" onclick="alert(document.getElementById('greetings').value + ' from '+
document.getElementById('name').value)" value="Submit">
</form>
</body>
</html>


HTML Input Type Datetime-local, Datetime, date, month, week, time elements

Input Type DateTime-local
It is used to enter the date and time. a date time picker will be provided on the form to select date, month, year, and time.
Attributes of Input Type DateTime-local

  • min- used to set the minimum date and time value.
  • max- used to set the maximum date and time value.
  • step- it is used to convert the second into milliseconds.
example 

<!Doctype Html>
<html>
<body>
<h1>Input Type Date Time</h1>
<form>
DateTime-local :<input type="datetime-local"><br />
</form>
</body>
</html>


Input Type DateTime
It allows you to enter year, month, day, hour, minute, second, and fraction of a second in the Coordinated Universal time.
example

<!Doctype Html>
<html>
<body>
<h1>Input Type Date Time</h1>
<form>
DateTime :<input type="datetime"><br /><br />
</form>
</body>
</html>


Input Type Date
It allows you to enter the day, month, year by using the date time picker.
example

<!Doctype Html>
<html>
<body>
<h1>Input Type Date Time</h1>
<form>
Date :<input type="date"><br />
</form>
</body>
</html>



Input Type Month
Allows you to enter the month in the input control.
Attributes of Input Type Month

  • min- used to set the minimum month.
  • max- used to set the maximum month
example
<!Doctype Html>
<html>
<body>
<h1>Input Type Date Time</h1>
<form>
Month :<input type="month"><br />
</form>
</body>
</html>



Input Type Week
Allows you to enter the week of the month.
example

<!Doctype Html>
<html>
<body>
<h1>Input Type Date Time</h1>
<form>
Week :<input type="week"><br />
</form>
</body>
</html>



Input Type Time
allows you to enter time in the input control.
example

<!Doctype Html>
<html>
<body>
<h1>Input Type Date Time</h1>
<form>
Time :<input type="time"><br />
</form>
</body>
</html>


HTML Input Type Text, Tel, URL, EMail, Password elements

Input Type text, tel, url, email, password are the form elements and input type allows this type to be available on Web Page.
Input Type Text
This allows a text box to appear on form. User information can be taken in this Text Box.
Attributes of Input Type Text 

  • Name- the name given to the text box allows the program that handles the information provided in the form to identify the text box.
  • Size- defines the number of visible characters that can be seen in the text box.
  • Maxlength- specifies the number of characters users can enter in the text box.
  • Value- specifies the default text that you want to display in the text box.
example:
 <!Doctype Html>

<html>
<body>
<h1>Input Type Text</h1>
<form>
Enter your three digit number: <Input type="text" name="codenumber"
size="3" maxlength="3" value="234">
</form>
</body>
</html>

Input Type Tel
It is used to enter the telephone numbers. It only allows numeric values. We can specify a particular pattern to enter the telephone number by using the pattern attribute of the input element.
example

<!Doctype Html>
<html>
<body>
<h1>Input Type tel</h1>
<form>
Enter your Telephone Number: <Input type="tel" name="telnumber">
</form>
</body>
</html>

Input Type url
It is used to enter the valid path of a web page. A valid url consist of a protocol, a domain name, and a path name. the most widely used protocols are http(Hypertext transfer protocol), ftp(file transfer protocol). Url field is automaticaly validated when we submit the form.
example

<!Doctype Html>
<html>
<body>
<h1>Input Type url</h1>
<form>
Enter your url: <Input type="url" name="urlname">
</form>
</body>
</html>

Input Type Email
It is used to enter valid email address, which should contain @ and a dot (.). The value of the email field is automatically validated when you submit the form. We can also add more than one email address in the email field by specifying the multiple attribute.
example

<!Doctype Html>
<html>
<body>
<h1>Input Type email</h1>
<form>
Enter your email: <Input type="email" name="emailname">
</form>
</body>
</html>

Input type Password
Password is used to protect the secret information, The text entered in the password field is not readable, as the asterisk sign or dot appears in the field.
Attributes of Input type Password 

  • Name- the name given to the field allows the program that handles the information provided in the form to identify the field.
  • Size- it defines the length of the password field by default it is 20.
  • Maxlength- specifies the number of characters users can enter in the password field.
  • Values- Specifies the value that is to be displayed by default in the password field. The value that is to be displayed in the password field is in the masked form, which means that the value is reflected as dots or asterisks.
example


<!Doctype Html>
<html>
<body>
<h1>Input Type password</h1>
<form>
Enter your four digit password: <Input type="password" name="codepassword"
size="5" maxlength="4" value="234">
</form>
</body>
</html>

HTML Images, Image Maps, Colors elements

HTML Images
We can insert Image on a web page using HTML img Element.

Attribute of IMG element
  • classindicates a class name for an element
  • dir- indicates direction of text, like left-to-right or right-to-left
  • id- indicates unique id for an element
  • lang- indicates language code for the content in an element
  • style- indicates an inline style for an element
  • title- title for an element
  • src- specifies the url or location of the image.
  • alt- specifies the alternate text to be used if the web browser cannot render the image.
  • height- specifies the height of the image.
  • width- specifies the width of the image.
  • ismap- indicates that the image is used as an image map.
  • usemap- associates an element with an image map.
Ex:
<!Doctype Html>
<html>
<head><title>images</title></head>
<body>
<h1> Displaying Image</h1>
<img src="home.jpg" alt="Image not found" />
</body>
</html>
If Image is not found than following screen will appear.
Using Image as a Hyperlink
<!Doctype Html>
<html>
<head><title>images</title></head>
<body>
<h1> Displaying Image</h1>
<a href="http://www.webtechomaster.com"
<img src="home.jpg" alt="Image not found" />
</a>
</body>
</html>

Image Maps
It allows you to link multiple web pages with the single image.
Sections will be defined in the image which will act as a hyperlink.

Example:

<!Doctype Html>
<html>
<head><title>Image Map</title></head>
<body>
<h1> Image Maps</h1>
<img src="home.jpg" usemap="#homemap" height="180" width="180"/>
<map name="homemap">
<area shape="rect" coords="0,0,90,130" href="http://www.webtechomaster.com" />
<area shape="circle" coords="190,160,130" href="http://www.technicalstuf.com" />
</map>
</body>
</html>

Colors
Colors can be used to show different text color, setting background color and many other places.

We can apply colors in the web page with the help of
  • Color Names
  • Hex Values
  • RGB Configuration
Color Names
We can use the color in a web page by using its name.

Hex Values
We can also use hexadecimal number to represent a color. It contains 6 digits or 3 byte number.
Byte 1 represent the red color
Byte 2 represent the green color
Byte 3 represents the blue color

RGB Configuration
The process of displaying colors by using different combination of red, green and blue is known as the RGB configuration. In this configuration, the value of each color (red, green, blue) ranges from 0 to 255 in decimal.

<!Doctype Html>
<html>
<head><title>Colors</title></head>
<body>
<h1 >Colors</h1>
<p style="color: Black">Black</p>
<p style="color: Silver">Silver</p>
<p style="color: Gray">Gray</p>
<p style="color: Maroon">Maroon</p>
<p style="color: Red">Red</p>
<p style="color: Purple">Purple</p>
<p style="color: Fuchsia">Fuchsia</p>
<p style="color: Green">Green</p>
<p style="color: Lime">Lime</p>
<p style="color: Olive">Olive</p>
<p style="color: Yellow">Yellow</p>
<p style="color: Navy">Navy</p>
<p style="color: Blue">Blue</p>
<p style="color: Teal">Teal</p>
<p style="color: Aqua">Aqua</p>
</body>
</html>





HTML Table element

HTML Tables
Tables help us in organizing data. Webpages are created mostly using tables or div. Table simplify the design of the document. Each table is associated with a caption which describes about the content of the table. Tables can help us in showing information in tabular form.

Elements used in the Table Element

  • Caption
  • ColGroup
  • Col
  • TBody
  • THead
  • TFoot
  • TR
  • TD
  • TH
CAPTION Element
It is used to create caption of the table. A table should have only one caption element and it must be placed after the starting tag of table.
<Table>
<Caption> Caption here </Caption>
</Table>

COLGROUP Element
It is used to specify the properties, such as color, border for a group of columns in a table. The colgroup element must be placed after the caption element and before the tbody, thead, tfoot, tr element. Span attribute of colgroup is used to specify the number of columns on which the properties will be applied.
<Table>
<Caption> Caption here<,/Caption>
<ColGroup span="2" style="color:blue">
</ColGroup>
</Table>

COL element
It is used to define the properties of each column of a table separately.
In the below ex we have defined two col elements where each element represent one column of a table.
<Table>
<COL Style="background-color: blue/>
<COL Style="background-color: blue/>
</Table>

TBODY Element
This element is used to group the rows of a table and is used in conjunction with THEAD and TFOOT. These three element represent the body, head and footer of the table.

THEAD Element
This element determines the header for the table.

TFOOT Element
This element determines the footer  of the table.


<!Doctype Html>
<html>
<head><title>Table</title></head>
<body>
<h1>THEAD, TBODY, TFOOT of the TABLE</h1>
<Table>
<THEAD>
<Tr><td >  This is table head </td></tr>
</Thead>
<Tbody>
<tr><td >  This is table body</td></tr>
</Tbody>
<Tfoot>
<tr><td > this is footer</td></tr>
</Table>
</body>
</html>

TR Element
It is used to define the rows of a table.
TR can be used in the following context
  • Child of THEAD Element
  • Child of TBody Element
  • Child of TFoot Element
  • Child of Table Element
TD and TH element
Table contains rows which contains cells. A table can have one or more cells this are defined as standard and header cells. Header cells are used for showing header data while standard for general.


<!Doctype Html>
<html>
<head><title>Table</title></head>
<body>
<h1>TD and TH of the TABLE</h1>
<Table>
<Tr>
<TH> Header 1</th>
<th> Header 2</th>
</tr>
<td> data 1</td>
<td> data 2</td>
</tr>
</Table>
</body>
</html>



HTML Links and Mail System element

HTML Link or Hyperlink
This allows us to navigate from one page to another. Anchor (a) element is used for hyperlink.

Attributes of Hyperlink

  • target : specifies the location where the links of an html document will open.
values of target Attributes

  • _blank - opens the link in new window
  • _parent - opens the link in the same frame the link is clicked.
  • _self - opens the link in the present frameset.
  • _top - opens the link in the samewindow.
  • <framename>- opens the link in the respective frame.

  •  id : It is used to create fragment identifier within a document. Fragment identifier specifies a particular location within a document. we can navigate to different location within a document by using the id attribute.  
ex: <A id="top"></a> defines a location within a document.
<a href="#top"> go to top </a>provides reference to that location.

example 1: Simple use of Anchor
<!Doctype Html>
<html>
<head><title>Use of Anchor</title></head>
<body>
<h1>Use of Anchor element in navagation</h1>
<h2><a href="http://www.webtechomaster.com/2016/06/html-root-element-and-metadata-element.html"
>HTML Root Element </a>
</body>
</html>

Onclick of HTML Root Element page will redirect to the given URL.



Example: Anchor tab with id

<!Doctype Html>
<html>
<head><title>Use of Anchor With id</title></head>
<body>
<h1>Use of Anchor element with id</h1>
<h1> this is top</h1>
<a id="top"></a>
<a href="#middle">Go to middle</a><br/>
<a href="#bottom">Go to bottom</a>

<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />

<h1> this is middle</h1>
<a id="middle"></a>
<a href="#top">Go to top</a><br/>
<a href="#bottom">Go to bottom</a>


<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />


<h1> this is bottom</h1>
<a id="bottom"></a>
<a href="#top">Go to top</a><br/>
<a href="#middle">Go to middle</a>
</body>
</html>





Mail System
A mail system allows us to send and receive emails.

example:
<!Doctype Html>
<html>
<head><title>Mail System linking</title></head>
<body>
<h1><a href="mailto:san231991@gmail.com">E-mail us</a></h1> 
</body>
</html>

When you click on E-mail us you will be redirected to reference mail message window.

HTML Lists and HTML Preformatted Text element

Preformatted Text
HTML PRE element is used to show preformatted text. IT will show the text as it is without formatting it.

Attributes of PRE element
  • classindicates a class name for an element
  • dir- indicates direction of text, like left-to-right or right-to-left
  • id- indicates unique id for an element
  • lang- indicates language code for the content in an element
  • style- indicates an inline style for an element
  • title- title for an element
ex:
<!Doctype Html>
<html>
<body>
<h1>Preformatted Text</h1>
<pre>
          +
        +++
      +++++
    +++++++
  +++++++++
    +++++++
      +++++
        +++
          +                  
</pre>
</body>
</html>


HTML Lists
Html allows you to show data in the form of list.
There are three type of list

  • Ordered list (OL)
  • Unordered List (UL)
  • Definition List (DL)
Ordered list show data in some order like numeric, roman etc.
Definition list allows you to include description of items.

Ordered List Ex:

<!Doctype Html>
<html>
<body>
<h1>Ordered List</h1>
<OL>
<Li>Wake up</li>
<li>get ready</li>
<li>go for work</li>
</ol>
</body>
</html>
Unordered list ex:

 <!Doctype Html>
<html>
<body>
<h1>Unordered List</h1>
<UL>
<Li>Wake up</li>
<li>get ready</li>
<li>go for work</li>
</Ul>
</body>
</html>
Definition List Ex:
Use Of Ordered List Type Attribute:

<!Doctype Html>
<html>
<body>
<h1>Ordered List</h1>
<OL type="I">
<Li>Wake up</li>
<li>get ready</li>
<li>go for work</li>
</ol>
</body>
</html>






HTML Data Types,Character Entities, Horizontal Rules, Line Breaks, Paragraphs, Citation, Quotation, Definition and Comment

Data Types
A data type is a storage format that stores a specific type or range of value. Some of the data types that are used in programming language are int,decimal string etc.
In html, a data type is defines as the type of data that is used in the content of an element or in the value of attribute.

Basic HTML Data Types:

  • Character data type: stores single alphanumeric text, which include letters, numbers, symbols, space, or punctuation.
  • Text data type: stores a string with a maximum length of 2,147,483,647 printable characters.
  • Name data type: refer to name given to any particular data, function or unit of program in a programming language.
  • Number data type: refers to the data type that can store a number in the range of 1E-323 to 1.79E+308(positive or negative) with an accuracy  of about 15 digits. Arithmetical operations can be performed with number data types. 

Data Types defined by the RFC and IANA
RFC is a memorandum that describes the methods, behaviors, or research on the working of internet.
IANA is the entity that looks over the global IP address allocation, media types, and the other internet protocol related assignments.
According to the RFC and IANA documentation, following are the four basic data types:
  • Uniform Resource Identifier
  • Content type
  • Language code
  • Character set 
Uniform Resource identifier
It is a set of characters used to identify or name a resource on the internet.

Content Type
Also knows as mime represents types of content used in an embedded or linked resource.
example of content type
  • text/plain: represents a plain text.
  • image/jpeg: represents a compressed image file.
  • audio/basis: represents an audio file.
  • video/mpeg: represents a transmitted compressed media file.
  • application/octet-stream: represents a binary file
Language Code
It is used to represent the code of various literal languages, which are used to script the HTML document.
Some of the Language codes are:
  • English: en
  • Hindi: hi
  • German: de
  • Irish: ga
Character Set
It is a set of characters taken from several languages and scripts of the world, and are represented with unique code points.
example include dollar sign, lowercase letters, upper case letters, omega etc.

Data Types defined by W3C Specifications
W3C is an international community that develops standards to ensure long term growth of the web.
W3C specifies 5 additional data types for html.
  • Date Time
  • Red Green Blue triplet
  • Color Names
  • Link Types
  • Media Types
Character Entities
Special character such as < > in html document are knows as entities. Html enables you to include such symbol using character entities.
format of character entity is
  1. Ampersand (&)
  2. Name of the entity
  3. A terminating semicolon
some of the character entities are
  • < : &lt;
  • >: &gt;
  • &: &amp;
  • ": &quot;
  • ': &apos;
Horizontal rules
This is used to draw horizontal line across the browser window. The HR element is used to represent the horizontal rule.

Line Breaks
Used to insert line breaks in an html document.

ex:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML Elements</title>
</head>
<body>
    <div>
        <h1>Heading 1</h1>
        <h1>Heading 2</h1>
        <hr />
        <p>This is Paragraph</p>
        <br />
        <a href="http://webtechomaster.blogspot.com">click here</a>
        <hr />
        <pre>this is
              pre-formatted
           text
        </pre>
    </div>
</body>
</html>


Paragraph
used to create paragraph on html document. <p> element is used to create paragraph.

Citations
It displays text in italic format. It is used to Quote statement or remark author.

Quotation
The quotation element is used to quote certain text within the quotation mark. It is represented by Q element.

Definition
It is used to list the definition of various terms. It contains following tags
  • DL: represents a definition list
  • DT: represents terms in the definition
  • DD: represents definition of the terms
Comment
It is used to insert comment in the code document. we can use comment to describe the purpose of code which is helpful when you need to make a change in the code.
the commented code is never executed.
syntax of comment is 
<!-- this is comment -->

Ex:

<!Doctype Html>

<html>

<head>htmltitle</head>
<body>
<p> this is first paragraph</p>
<cite> this is the use of citation</cite><br/>
<q> this is quotation </q>
<!-- this code is commented 
<p> this is commented paragraph-->
<p> this is paragraph 2</p>
</body>
</html>