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:

  1. Blue
  2. Yellow
  3. 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,
  1. text
  2. Date
  3. DateTime
  4. DateTime-local
  5. time
  6. week
  7. month
  8. email
  9. tel
  10. URL
  11. search
  12. range
  13. color
  14. number

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


Example 1:

<!--Name-->

<input type="name">


Output:

Name:


.

Example 2:

<!--Number-->

<input type="number">


Output:

Age:


Example 3:

<!--Date-->

<input type="date">


Output:

Date of birth:


Example 4:

<!--Current date and time-->

<input type="datetime-local">


Output:

Date / Time:


Example 5:

<!--Phone Number-->

<input type="tel">


Output:

Phone:


Example 6:

<!--Color-->

<input type="color">


Output:

Color:


Example 7:

<!--Time-->

<input type="time">


Output:

Time:


Example 8:

<!--Password-->

<input type="password">


Output:

Password:


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

Name:
Age:
College:
Department:
Email:
Phone:
Date Of Birth:


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

  1. Element Selector
  2. Class Selector
  3. Id Selector
  4. 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:

  1. First Value - Top left corner.
  2. Second Value - Top right corner.
  3. Third Value - Bottom right value.
  4. 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:

  1. First Value - Top left corner.
  2. Second Value - Top right corner and Bottom left corner.
  3. 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:

  1. First Value - Top left and Bottom right corners.
  2. 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


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

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


தாய் மொழி தமிழ் என்று சொல்வதை விட மொழிகளின் தாய் தமிழ் என்று திமிருடுடன் சொல்வோம்! || வாழ்க தமிழ் ! வளர்க தமிழ்!

Post a Comment

إرسال تعليق

أحدث أقدم