Html

HTML

HTML (HyperText Markup Language) is the basic building block of web pages. Without HTML world wide web(www) wouldn’t exist.
Three advantages of HTML are:
• It is easy to code,
• HTML-based websites are static,
• HTML-based websites are easy to design and have low development costs.

Example:

<!DOCTYPE html>  
<Html>  
<Head>  
</Head>  
<Body>  
    ..  
    ..  
</Body>  
</Html>

Advantages of Using Html

  • It is highly flexible and user friendly.
  • It is efficient and reliable.
  • It provides a search engine compatible with the web pages.
  • It is easier to maintain and update any Web sites.

Disadvantages of Using Html

  • It is complex to design an attractive Web page only by using Html.
  • There are many incompatibilities of Html.

HTML Tags
HTML tags are the instruction that defines how a web browser will format and display the content. They are used to create an HTML document. An HTML tag can have an attribute and a value. There are two types of tags: Start tags are used to begin an effect, and End tags are used to end that effect.

HTML Comments
Comments are some text or code written in your code to give an explanation about the code, and not visible to the user. You can add comments in your HTML file using <!--comment here--> tag.

HTML Element
An element is a fundamental component of the structure of an HTML text document. The HTML instructions, along with the text to which the instructions apply, are called HTML elements. Two types of HTML elements are:

  • Container element: <TAG> ……… </TAG> and
  • Empty element: Not having a closing tag i.e. <TAG>

Document Structure Element
Document structure elements are required within an HTML document for it to conform to HTML standards.
They are:
Html element:
The tag <HTML> tells the document is an HTML document.

HEAD element:
The HEAD element marks the position of the head section. It contains the styling for a single page and the document’s title.

Body element:
Body elements include the entire content of document that is supposed to display in the web browser window.

Paragraph formatting
paragraphs are defined with the <p> tag. Paragraphs allow adding text to a document to adjust the end of a line to suit the browser’s window size.

Break line
A <br> tag can be used to end the line. It forces a line break. It is a singular tag.

Font tag
Font tag is use to give the size and color of the text.

Example:

 <font size ="5" color="black"> Text...</font>

Hyperlink
A Hyperlink is used to link other web pages, the section of the same web pages or website. The element used for hyperlinking is <A>…. </A> tag.

Ordered List:
The order list has a number or letter before an item. The order list begins with <OL> tag and must end with </OL> tag.

unordered list
Unordered lists start with a list mask such as bullet. The unordered list begins with <ul> tag and must end with </ul> tag.

Table in HTML
Tables display content in rows and columns on the web pages. All table elements are included in between <table> and </table>.

Example:

<Html>
<Head><Title>Creating Table</Title></Head>
<Body>
<table border = "1">  
<tr>  
<th> Roll no. </th>  
<th>Name </th>  
</tr>  
<tr>  
<td>1 </td>  
<td> Rohit podel </td>  
</tr>  
<tr>  
<td>2 </td>  
<td> Anish shrestha</td>  
</tr>  
<tr>  
<td>3 </td>  
<td>Jayu purja pun </td>  
</tr>  
</table>
</Body>
</Html>

In above example <tr> tag represent table row and <td> tag represent table data elements.
Output:

Roll no. Name
1 Rohit poudel
2 Anish shrestha
3 Jayu purja pun

Table attributes

Width
We can specify the width of the table in pixels or percentage of the document width.

Border
We can specify the border width(Border=“2”) in pixels.

Bordercolor
This attribute will set the color to the border of the cell.

Align
The table can have left, right, and center alignment.

Cellspacing and Cellpadding
Cellspacing gives the space between cells and Cellpadding gives the space between the border of a table cell and its component.

Forms in Html
Forms are used to gather information from users via web pages. <input> tags are used to take input with different types. Form is initialized with <Form> tag and closed with </form> tag.
Example:

<html>  
<Body>  
<form>  
Username: <input type = "text">  
Password: <input type = "password">  
<button type="submit"> submit </button>  
</form>  
</body>  
</html>

Output:

Username:

Password:

submit

Form Objects
When creating an interactive website for the internet, it is necessary to capture user input and process this input. Based on the result of this processing, appropriate information from the website can be dispatched to be viewed.
The attributes properties of the form are:
Method
The method property of the form is used to specify the method used to send data captured by various form elements back to the webserver. The method used can be either GET or POST(default).

Action
The action attribute of the form tags points to the URL of a program on the webserver that will process the form data being captured and sent back.

Name
It is a form name used by script languages.

Target
It is the target frame where the response page will show up.

Audio in HTML5

Html5 supports <audio> tag that is used to embed the sound content in HTML or XHTML.We can specify audio as follows:

<audio src="music.wav" controls autoplay >  
</audio>

The current html5 has not specified which audio formats to use, but the most commonly used audio formats are ogg, mp3, and wav.

Video in html5
The current HTML5 draft specification does not specify which video formats browsers should support in the video tag. But most commonly used video formats are: ogg and mp4. Here is the simplest way to initialize video:

<video src="Abc.mp4" width="300" height="300" controls> ..... </video>  
we can use <source> tag to specify media along with media type and many other attributes.For example:  
<video width="300" height="300" controls autoplay>  
<source src="Abc.mp4" type="video/mp4"/>  
..... </video>

Graphics using svg and canvas tags
SVG
SVG stands for Scalable Vector Graphics. It is used to draw paths, boxes, circles, text, and graphic images. Svg is used to define graphics for the web.
Example:

<html> <body> <svg width="100" height="100">  
<circle cx="50" cy="50" r="40" strokes = "green" stroke-width="4" fill="yellow"/>  
</svg>  
</body>  
</html>

CANVAS
The html5 canvas element can be used to draw graphics on the webpage via javascript. By default <canvas> element has 300px of width and 150px of height. However, it can be customized using the css property.
Example:

<html>  
<head>  
<script>  
     Window.onload = function(){  
      var canvas = document.getElementById("mycanvas");  
      var context = canvas.getcontext("2d");  
};  
</script>  
</head>  
<body>  
    <canvas id="mycanvas" width="300" height="200" > </canvas>  
</body>  
</html>