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.
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>
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
- tel
- URL
- search
- range
- color
- number
- To improve the user experience and to make the forms more interactive.
Example 1:
<!--Name-->
<input type="name">
Output:
.
Example 2:
<!--Number-->
<input type="number">
Output:
Example 3:
<!--Date-->
<input type="date">
Output:
Example 4:
<!--Current date and time-->
<input type="datetime-local">
Output:
Example 5:
<!--Phone Number-->
<input type="tel">
Output:
Example 6:
<!--Color-->
<input type="color">
Output:
Example 7:
<!--Time-->
<input type="time">
Output:
Example 8:
<!--Password-->
<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
பிறந்து சிறந்த மொழிகளில் சிறந்தே!
பிறந்த மொழி என் தாய் மொழி தமிழ்!
إرسال تعليق