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 / 6

2 / 6

3 / 6

4 / 6

5 / 6

6 / 6

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

Div Tag

The <div> tag defines a division or a section in an HTML document.

The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript.

The <div> tag is easily styled by using the class or id attribute.

Any sort of content can be put inside the <div> tag!

Cascading Style Sheets

Introduction

CSS stands for Cascading Style Sheets.

CSS describes how HTML elements are to be displayed on screen, paper, or in other media.

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

The "cascading" refers to how multiple sheets (files) are examined in sequence to determine how the HTML elements should be presented on the screen.

Differents - HTML and CSS

HTML	CSS
HTML is used to structure the content on the web page.	CSS is used to add style to the content of a web page.
HTML is a markup language used to create static web pages and web applications.	CSS is a style sheet language responsible for the presentation of documents written in a markup language.
HTML is a “markup language”.	CSS is a “style sheet”

Types of CSS

Inline

Internal

External

Inline CSS

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

Internal CSS

Internal CSS is a form of CSS using which you can add CSS to HTML documents.

It helps to design the layout of a single HTML web page and change the styles of a web page within HTML code.

External CSS

External CSS is a form of CSS which is used to add styling to multiple HTML pages at a time.

It helps to design the layout of many HTML web pages simultaneously.

The external CSS is always saved with the . css extension, and through this file, we can change the complete style of our HTML web page.

To add external CSS in HTML we use the <link>tag. We use the rel attribute to specify the relationship between the linked document and the HTML file

CSS Selectors

Element Selector

Class Selector

Id Selector

Universal Selector

1. Element Selectors

Element selector used to select HTML element based on it's name.

Example:

Here, all <h1> elements on the page will be center-aligned, with a green text color

h1 {
   text-align : center ;
   color : green ;
}

2. Class Selectors

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

Example:

In this example all HTML elements with < h1 class = " title " > will be red and justify aligned:

.title {
   text-align : justify ;
   color : red ;
}

3. Id Selectors

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Example:

   In this example HTML elements with < h1 id = " title " > will be red and justify aligned:

#title {
   text-align : justify ;
   color : red ;
}

4. Universal Selectors

The universal selector (*) selects all HTML elements on the page.

Example:

The CSS rule below will affect every HTML element on the page:

* {
   text-align : center ;
   color : red ;
}

CSS Box Model

The CSS box model is a container that contains multiple properties including borders, margin, padding, and the content itself.

It is used to create the design and layout of web pages.

According to the CSS box model, the web browser supplies each element as a square prism.

1. Content :

The content of the box, where text and images appear.

Example :

In this example Content:

.ers {
   background-color:black;
   color : white ;
}

ERS Siva

2. Padding :

Clears an area around the content. The padding is transparent.

Example:

In this example : Padding .

.ers {
   background-color:black;
   color : white ;
   padding : 25px;
}

ERS Siva

3. Border :

A border that goes around the padding and content.

Example :

In this example : Border .

.ers {
   border-style : solid ;
   border : 8px blue ;
   background-color:black;
   color : white ;
   padding : 25px;
   width :170px;
   height :100px;
}

ERS Siva

4. Margin :

Clears an area outside the border. The margin is transparent.

Example :

In this example : Margin .

.erssiva {
   border-style : solid ;
   border : 8px blue ;
   background-color:black;
   color : white ;
   padding : 25px;
   width :170px;
   height :100px;
   margin :auto;
}

ERS Siva

CSS Properties

CSS offers several features that make it simple and effective to specify different text styles, including color, alignment, spacing, decoration, transformation, etc.

1. Width :

The width property sets the width of an element.

2. Height :

The height CSS property specifies the height of an element.

3. Color :

The color property specifies the color of text.

4. Font Family :

The font-family property specifies the font for an element.

5. Text Alignment :

The text-align property specifies the horizontal alignment of text in an element ( Right/Left/Center/Justify ).

6. Font Size :

The CSS font-size property sets the size of the text.

It can be defined using various units like pixels (px), em units (em), rem units (rem), percentages (%), or keywords like small, large, etc.

7. Background Color :

The background-color CSS property sets the background color of an element.

Example :

In this example Background color is orange :

#ers {
   border-style : solid ;
   border : 8px orange;
   border-radius : 20px;
   background-color : orange;
}

ERS Siva

8. Border Radius :

The border-radius property defines the radius of the element's corners.

Example 1:

In this example Border Radius four values:

First Value - Top left corner.

Second Value - Top right corner.

Third Value - Bottom right value.

Fourth Value - Bottom left value.

#ers {
   border-style : solid ;
   border : 8px violet ;
   border-radius : 5px 50px 30px 15px ;
}

ERS Siva

Example 2:

In this example Border Radius three values:

First Value - Top left corner.

Second Value - Top right corner and Bottom left corner.

Third Value - Bottom right value.

#ers {
   border-style : solid ;
   border : 8px violet ;
   border-radius : 15px 50px 30px ;
}

ERS Siva

Example 3:

In this example Border Radius two values:

First Value - Top left and Bottom right corners.

Second Value - Top right and Bottom left corners.

#ers {
   border-style : solid ;
   border : 8px violet ;
   border-radius : 15px 50px ;
}

ERS Siva

Example 4:

In this example Border Radius One value. The value applies for all four corners :

#ers {
   border-style : solid ;
   border : 8px violet ;
   border-radius : 20px;
}

ERS Siva

9. Display :

In CSS, the display property determines how an element looks.

Types:

Here some Display Values:

1. display:inline;
    Displays an element as an inline element.Any height and width properties will have no effect. This is default.

2. display:block;
    Displays an element as a block element. It starts on a new line, and takes up the whole width.

3. display:inline-block;
    Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values.

4. display:none;
    The element is completely removed.

10. Overflow :

Specifies what happens if content overflows an element's box.

Example 1:

In this example without Overflow:

#ers {
   border-style : solid ;
   border : 4px red ;
   border-radius: 50px;
}

Example 2:

In this example with Overflow:

#ers {
   border-style : solid ;
   border : 4px red ;
   border-radius: 50px;
   overflow: hidden;
}

11. Border Style:

The border-style property sets the style of an element's four borders.

This property can have from one to four values.

Example 1:

In this example Border Style is Solid :

#ers {
   border-style : solid ;
   border : 8px gold ;
}

ERS Siva

Example 2:

In this example Border Style is Dotted:

#ers {
   border-style : dotted ;
   border : 8px pink ;
}

ERS Siva

Example 3:

In this example Border Style is Double:

#ers {
   border-style : double ;
   border : 8px purple ;
}

ERS Siva

Example 4:

In this example Border Style is Dashed:

#ers {
   border-style : dashed ;
   border : 4px green ;
}

ERS Siva

Updating...

Every pain gives a lesson and Every lesson changes a person

----Thanks to visit----

Published by:

ERS Siva Blogger

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

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

Name:

Age:

Date of birth:

Date / Time:

Hypertext Markup Language - HTML || 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>