Hypertext Markup Language

HTML Stands for Hypertext Markup Language and is use to create web page

HTML is a blueprint for the website

HTML Introduction

HTML (Hypertext Markup Language) is the standard Markup language used to create web pages.

Hypertext- Text which will take us other pages

Markup - Set of symbols inserted in a text documents to control it's structure, formatting.

1 / 5

2 / 5

3 / 5

4 / 5

5 / 5

HTML Format

<!DOCTYPE html>
<html>
   <head>

   </head>

   <body>

   </body>

</html>

HTML Heading Tag

<h1> - The heading tag is used in HTML to define headings of a page.

Example:

HTML

<h1>Hello world!</h1> <h2>Hello world!</h2> <h3>Hello world!</h3> <h4>Hello world!</h4> <h5>Hello world!</h5> <h6>Hello world!</h6>

Output:

Hello world!

Hello world!

Hello world!

Hello world!

Hello world!

Hello world!

HTML Paragraph Tag

<p> - Paragraph tag is used to defines a paragraph of text.

Example:

<p>This is the Paragraph</p>

Output:

This is the Paragraph

HTML Anchor Tag

<a> - Create a Hyperlink to a web page.

Format:
<a href=" website link ">Name of the website</a>

Example:

<a href="www.youtube.com"> YouTube </a>

Output:

YouTube

HTML Image Tag

The <img> tag is used to embed an image in an HTML page

Format:
<a src=" image link or location " alt="Alternative text if the image doesn't load"/>

Example:

<a src="ERS Siva.jpg" alt="ERS Siva"/>

Output:

HTML List

HTML Lists are used to specify lists of information.

There are two different types of HTML lists: Ordered List or Numbered List (ol) Unordered List or Bulleted List (ul).

1.Ordered List

The <ol> tag defines an ordered list.

An ordered list can be numerical . The <li> tag is used to define each list item.

Example:

<ol>
   <li> Blue </li>
   <li> Yellow </li>
   <li> Red </li>
</ol>

Output:

Blue

Yellow

Red

2.Unordered List

The <ul> tag defines an unordered list.

An ordered list can be Bulletin Point . The <li> tag is used to define each list item.

Example:

<ul>
   <li> Blue </li>
   <li> Yellow </li>
   <li> Red </li>
</ul>

Output:

Blue

Yellow

Red

HTML <hr> Tag

The <hr> tag is used to define thematic changes in the content of an html page.

The <hr> element is most often displayed as a horizontal rule that is used to separate content (or define a change) in an HTML page.

Example:

<h1> Hello World! </h1>
<hr>

Output:

Hello World!

HTML <iframe> Tag

An <iframe> tag is used to embed another document within the current HTML Document.

Format:
<iframe src="Website link"></ifarme>

Example:

<iframe src="erssiva.com"></ifarme>

Output:

Here, ERS Siva Webpage :

HTML <br> Tag

The <br> tag inserts a single line break.

HTML <center> Tag

The <center> tag is used to text alignment in center.

Format:
      <center>

      </center>

Example:

<center>

      <h1>Hello World!</h1>

</center

Output:

Hello World!

Bold Text

HTML <b> tag is used to display the written text in bold format.

Example:

<b>

     வாழ்க தமிழ்! வளர்க தமிழ்!

</b>

Output:

வாழ்க தமிழ்! வளர்க தமிழ்!

Italic Text

To make text italics in HTML, use the HTML tag <em> or <i> and close the tag with </em> or </i> .

Example:

<i>வாழ்க தமிழ்! வளர்க தமிழ்! </i>

Output:

வாழ்க தமிழ்! வளர்க தமிழ்!

Underline Text

We can write it inside the start tag <u> and closing tag </u> to underline the text.

Example:

<u>வாழ்க தமிழ்! வளர்க தமிழ்! </u>

Output:

வாழ்க தமிழ்! வளர்க தமிழ்!

Highlighted Text

The <mark> tag defines text that should be marked or highlighted.

Example:

<mark>

     வாழ்க தமிழ்! வளர்க தமிழ்!

</mark>

Output:

வாழ்க தமிழ்! வளர்க தமிழ்!

Delete Text Crossline

The <s> or <del> tag defines text that has been deleted from a document. Browsers will usually strike a line through deleted text.

Example:

<del>

     வாழ்க தமிழ்! வளர்க தமிழ்!

</del>

Output:

~~வாழ்க தமிழ்! வளர்க தமிழ்!~~

HTML Tables

To make a table in HTML, use the <table> tag.

Within this table tag, you'll place the <tr>, <th>, and <td> tags.

The <tr> tag defines a table row.

The <th> tag defines the table header.

The <td> tag defines the table Column.

Example:

HTML

<table border="1"> <tr> <th>Front End</th> <th>Back End</th> <th>Database</th> </tr> <tr> <td>HTML</td> <td>Java</td> <td>Mongo DB</td> </tr> <tr> <td>CSS</td> <td>Python</td> <td>MySQL</td> </tr> <tr> <td>JavaScript</td> <td>Node JS</td> <td>AWS</td> </tr> </table>

Output:

Front End	Back End	Database
HTML	Java	Mongo DB
CSS	Python	MySQL
JavaScript	Node JS	AWS

Input Types

HTML 5 introduces several input types like,

text

Date

DateTime

DateTime-local

time

week

month

email

tel

URL

search

range

color

number

- To improve the user experience and to make the forms more interactive.

Example 1:

<input type="name">

Output:

Example 2:

<input type="number">

Output:

Example 3:

<input type="date">

Output:

Example 4:

<input type="datetime-local">

Output:

Example 5:

<input type="tel">

Output:

Example 6:

<input type="color">

Output:

Example 7:

<input type="time">

Output:

Example 8:

<input type="password">

Output:

HTML Form

To create an HTML form, we will use the HTML <form> element.

It starts with the <form> tag and ends with the </form> tag.

We can add the input elements within the form tags for taking user input.

We can build the HTML Form use with HTML Table and input types

Example:

HTML

<h1>Register Form</h1>
  <form>
    <table border="1">
      <tr>
        <td>Name:</td> <td><input type="text" placeholder="Enter Your Name"></td>
        </tr>
      <tr>
        <td>Age:</td> <td><input type="number" placeholder="Enter Yout Age"></td>
        </tr>
        
          <tr>
    <td>College:</td>
    <td>  
       <select placeholder="Select">
          <option>---Select---</option>
         <option>Thangavelu Engineering College</option>
          <option>TJ Institute of Technology</option>
         <option>Other Colleges</option>
         </select>
      </td>
            </tr>
      <tr>
    <td>Department:</td>
    <td>  
       <select placeholder="Select">
          <option>---Select---</option>
         <option>Artificial Intelligence and Data Science</option>
          <option>AIML</option>
         <option>Information Technology </option>
          <option>EEE</option>
         <option>Mechanic</option>
          <option>CSE</option>
      </select>
     </td>
   </tr>  
      <tr>
        <td>Email:</td> <td><input type="email" placeholder="Enter Your Email"></td>
        </tr>
      <tr>
          <td>Phone:</td> <td><input type="tel" placeholder="Enter Your Phone Number "></td>
        </tr>
      <tr>
        <td>Date Of Birth:</td> <td><input type="date" placeholder="Date of Birth"></td>
        </tr>
      <tr>
      <td></td><td><input type="reset"> <input type="submit"></td>
      </tr>
   </table><br>
    </form>

Output:

Register Form

Updating...

*Would you have this post full HTML code. Send mail. contact form is available in below this post*

----Thanks to visit----

Published by:

ERS Siva Blogger

பிறந்து சிறந்த மொழிகளில் சிறந்தே!

பிறந்த மொழி என் தாய் மொழி தமிழ்!

Name:

Age:

Date of birth:

Date / Time:

HTML and CSS Full Tutorial || ERS Siva

Hypertext Markup Language

HTML Introduction

HTML Format

<!DOCTYPE html> <html> <head> </head> <body> </body> </html>

HTML Heading Tag

Example:

Output:

Hello world!

Hello world!

Hello world!

Hello world!

Hello world!

Hello world!

HTML Paragraph Tag

Example:

<p>This is the Paragraph</p>

Output:

HTML Anchor Tag

Example:

<a href="www.youtube.com"> YouTube </a>

Output:

YouTube

HTML Image Tag

Example:

<a src="ERS Siva.jpg" alt="ERS Siva"/>

Output:

HTML List

1.Ordered List

Example:

<ol> <li> Blue </li> <li> Yellow </li> <li> Red </li> </ol>

Output:

2.Unordered List

Example:

<ul> <li> Blue </li> <li> Yellow </li> <li> Red </li> </ul>

Output:

HTML <hr> Tag

Example:

<h1> Hello World! </h1> <hr>

Output:

Hello World!

HTML <iframe> Tag

Example:

<iframe src="erssiva.com"></ifarme>

Output:

HTML <br> Tag

HTML <center> Tag

Example:

<center> <h1>Hello World!</h1> </center

Output:

Hello World!

Bold Text

Example:

<b> வாழ்க தமிழ்! வளர்க தமிழ்! </b>

Output:

வாழ்க தமிழ்! வளர்க தமிழ்!

Italic Text

Example:

<i>வாழ்க தமிழ்! வளர்க தமிழ்! </i>

Output:

வாழ்க தமிழ்! வளர்க தமிழ்!

Underline Text

Example:

<u>வாழ்க தமிழ்! வளர்க தமிழ்! </u>

Output:

வாழ்க தமிழ்! வளர்க தமிழ்!

Highlighted Text

Example:

<mark> வாழ்க தமிழ்! வளர்க தமிழ்! </mark>

Output:

வாழ்க தமிழ்! வளர்க தமிழ்!

Delete Text Crossline

Example:

<del> வாழ்க தமிழ்! வளர்க தமிழ்! </del>

Output:

வாழ்க தமிழ்! வளர்க தமிழ்!

HTML Tables

Example:

Output:

Input Types

<!DOCTYPE html>
<html>
<head>

</head>

<body>

</body>

</html>

<ol>
<li> Blue </li>
<li> Yellow </li>
<li> Red </li>
</ol>

<ul>
<li> Blue </li>
<li> Yellow </li>
<li> Red </li>
</ul>

<h1> Hello World! </h1>
<hr>

<center>

<h1>Hello World!</h1>

</center

<b>

வாழ்க தமிழ்! வளர்க தமிழ்!

</b>

<mark>

வாழ்க தமிழ்! வளர்க தமிழ்!

</mark>

<del>

வாழ்க தமிழ்! வளர்க தமிழ்!

</del>