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.
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
| Tag | Description | Code Example |
|---|---|---|
| html | HTML Tag to Start the HyperText Web Page. The Html tags is the format tag in which the whole web-page is documented. | <html> .... </html> |
| head | Head Tag contain document's meta description, style, title, script etc. | <html> <head> </head> </html> |
| title | Title tag is used to set the document/page title. | <html> <head> <title> MyMixIndia HTML-Tutorial </title> </head> </html> |
| body | Body tag is the main content holder which contain rest of the document data. | <html> <head> <title> MyMixIndia HTML-Tutorial </title> </head> <body> MMI-HTML-TUTORIALS </body> </html> |
| !DOCTYPE html | doctype tag in html is used to define the document type. It Describe the HTML version. | <!DOCTYPE html> <html> .... </html> |
| link | It is used link the external style/source file and it is a unpaired tag used inside head section. | <link rel="stylesheet" type="text/css" herf="mystyle.css"> |
| meta | The meta tag is used to describe the meta information about the page like page description, keywords, content and it is used inside the head section. | <meta name="description" content="MMI-HTML Tutorials."/> |
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.
<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.
<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
<img src="path/source of image" >, path/source = mmi_1.png
Width & Height
<img src="mmi_1.png" width="40px" height="40px">
Alt – Alternate Text
<img src="mmi_1.png" width="40px" height="40px" alt="This Is An Image">
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 –
<a href="file2.html">Click here to Go on File 2</a>
There is another tag name called a link.
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
<table></table>
Table head section
<thead></thead>
Table body section
<tbody></tbody>
Table Row
<tr> </tr>
HTML – Media
- HTML Media
HTML Media are the tags used for multimedia files like sound, video, animation, etc.
Example – For Sound
<audio controls> <source src="audio_file.mp3" type="audio/mpeg"> </audio>
For Video
<video> <source src="video_file.mp4" type="video/mp4"> </video>
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
<img src="image_file.png" alt="MMI - Image File">
Width & Height attribute
<img src="image_file.jpg" alt="MMI - Image File" width="50px" height="50px">
HTML – List
- HTML List
There are basically three types of list tags in HTML. Ordered list, Unordered list, and Description list.
Example – Ordered List
<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
<ul> <li>..content..</li> </ul>
Example – Description List
<dl> <dt>name 1</dt> <dd>Information about name 1</dd> </dl>
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
<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
<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
<form method="post" action="_blank"> <input type="text" name="box" /> </form>
More Tutorials
-
CSS Tutorials
Learn CSS and start designing your web page.