HTML Tutorials

HTML – Introduction

  • What Is HTML?
  • Code Example
  • Output

HTML stands for “HyperText Markup Language“. It is designed for making webpages. It is a standard markup language that resulted in designed documents to display information or data on the Internet through web browsers.

It is developed by WHATWG in 1991-1993 officially released. Key Person – British Computer Scientist and Director of World Wide Web Consortium – Tim Berners-Lee.

Type format – Web/Document File. File Extensions .html, .htm.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
HTML Code Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
MyMixIndia - HTML Tutorial
</body>
</html>
HTML Code Example <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <body> MyMixIndia - HTML Tutorial </body> </html>
HTML Code Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
    MyMixIndia - HTML Tutorial
</body>
</html>

HTML – Tags

  • What are HTML Tags?

The HTML tags are the basic building blocks of the document. The whole Web Page is divided into blocks and these blocks are sequentially placed to form a structured document page.

Tags are the basic elements of the HTML which contain the content.

Table Of HTML Tags



See -All HTML – Tags


HTML – Attributes

  • HTML Attributes

HTML Attributes provides additional information about the Tag/Element. Attributes are placed in starting tags and can help in changing or modifying the behavior of the tag. Attributes contain name, id, class, href link, source, value, and other properties.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<a attribute_name="attribute_value">......</a>
<a attribute_name="attribute_value">......</a>
<a attribute_name="attribute_value">......</a>

 

The basic difference between the tags and elements are:

  • Elements are the starting and ending tags that contain the main content.
  • Whereas Tags are the basic keywords or the building blocks in the HTML document.
  • Elements with no closing/ending tags contain no content.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<br> tag is a single or unpaired tag.
<br> tag is a single or unpaired tag.
<br> tag is a single or unpaired tag.

Some Attribute is optional and some tags are only used with attributes.

Example Of HTML Attributes


Src – Source

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<img src="path/source of image" >, path/source = mmi_1.png
<img src="path/source of image" >, path/source = mmi_1.png
<img src="path/source of image" >, path/source = mmi_1.png

Width & Height

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<img src="mmi_1.png" width="40px" height="40px">
<img src="mmi_1.png" width="40px" height="40px">
<img src="mmi_1.png" width="40px" height="40px">

Alt – Alternate Text

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<img src="mmi_1.png" width="40px" height="40px" alt="This Is An Image">
<img src="mmi_1.png" width="40px" height="40px" alt="This Is An Image">
<img src="mmi_1.png" width="40px" height="40px" alt="This Is An Image">

More about HTML – Attributes


HTML – Links

  • HTML Links

HTML Links are widely used tags in the web-documents. Links used to load an external file or make a connection with other documents. Linking also used to provide a quick jump over document blocks and over web-pages. example –

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<a href="file2.html">Click here to Go on File 2</a>
<a href="file2.html">Click here to Go on File 2</a>
<a href="file2.html">Click here to Go on File 2</a>

There is another tag name called a link.

More about HTML – Links


 

HTML – Tables

  • HTML Tables

The table can also be formed in HTML by using the table tag. The Table is divided into sub-element form which includes a head section, body section, table row, table data, etc.

example – Table

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<table></table>
<table></table>
<table></table>

 

Table head section

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<thead></thead>
<thead></thead>
<thead></thead>

 

Table body section

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<tbody></tbody>
<tbody></tbody>
<tbody></tbody>

 

Table Row

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<tr>
</tr>
<tr> </tr>
<tr>

</tr>

More about HTML – Tables


 

HTML – Media

  • HTML Media

HTML  Media are the tags used for multimedia files like sound, video, animation, etc.

Example – For Sound

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<audio controls>
<source src="audio_file.mp3" type="audio/mpeg">
</audio>
<audio controls> <source src="audio_file.mp3" type="audio/mpeg"> </audio>
<audio controls>

<source src="audio_file.mp3" type="audio/mpeg">

</audio>

 

For Video

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<video>
<source src="video_file.mp4" type="video/mp4">
</video>
<video> <source src="video_file.mp4" type="video/mp4"> </video>
<video>

<source src="video_file.mp4" type="video/mp4">

</video>

More about HTML – Media


 

HTML – Image

  • HTML Image

Image is an important part of any document and it is very useful file type. HTML support all image format types like jpg, jpeg, png, gif, etc.

Example – Image

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<img src="image_file.png" alt="MMI - Image File">
<img src="image_file.png" alt="MMI - Image File">
<img src="image_file.png" alt="MMI - Image File">

 

Width & Height attribute

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<img src="image_file.jpg" alt="MMI - Image File" width="50px" height="50px">
<img src="image_file.jpg" alt="MMI - Image File" width="50px" height="50px">
<img src="image_file.jpg" alt="MMI - Image File" width="50px" height="50px">

More about HTML – Image


 

HTML – List

  • HTML List

There are basically three types of list tags in HTML. Ordered list, Unordered list, and Description list.

Example – Ordered List

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<ol>
<li>..Content..</li>
</ol>
<ol> <li>..Content..</li> </ol>
<ol>

<li>..Content..</li>

</ol>

 

Where li is the sub-element or nested element list tag of ol tag. li contain the main content of the list data.

Example – Unordered List

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<ul>
<li>..content..</li>
</ul>
<ul> <li>..content..</li> </ul>
<ul>

<li>..content..</li>

</ul>

 

Example – Description List

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<dl>
<dt>name 1</dt>
<dd>Information about name 1</dd>
</dl>
<dl> <dt>name 1</dt> <dd>Information about name 1</dd> </dl>
<dl>

<dt>name 1</dt>

<dd>Information about name 1</dd>

</dl>

More about HTML – List


 

HTML – Classes & Ids

  • HTML Classes & Ids

Html classes are the attributes and used for applying style properties and javascript on some specific tags/elements. Whereas Ids are the uniquely defined attribute for an element in the document.

Example – Class

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div>
My Mix India - Html Tutorials
</div>
<style>
.big{
color:red;
font-size:30px;
}
</style>
Here . is an identifies for a class attribute when it used in css and in js
<div> My Mix India - Html Tutorials </div> <style> .big{ color:red; font-size:30px; } </style> Here . is an identifies for a class attribute when it used in css and in js
<div>

My Mix India - Html Tutorials

</div>

<style>

.big{

color:red;

font-size:30px;

}

</style>

Here . is an identifies for a class attribute when it used in css and in js

The same # is used for the Ids.

Example – Ids

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div id="small">
MMI - id Example
</div>
<style>
#samll{
color:blue;
}
</style>
<div id="small"> MMI - id Example </div> <style> #samll{ color:blue; } </style>
<div id="small">

MMI - id Example

</div>

<style>

#samll{

color:blue;

}

</style>

 

More about HTML – Classes and Ids


HTML – Forms

  • HTML Forms

Form is a very important in HTML/Web Documents and it is a very common element used over the internet. There are most of the things made up of HTML forms like Any input section in any web page. There are many other form elements in HTML. some of them are input, textarea, legend, etc.

Example – Forms

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<form method="post" action="_blank">
<input type="text" name="box" />
</form>
<form method="post" action="_blank"> <input type="text" name="box" /> </form>
<form method="post" action="_blank">

<input type="text" name="box" />

</form>

More about HTML – Forms


 

More Tutorials