What is HTML?
- HTML is a markup language
- HTML is the short form of the Hyper-text Markup Language.
- It is helpful in creating Web pages.
- An HTML page may consist of a series of elements and attributes.
- In sort, HTML is all about - how the content will be visible on the web page.
- In HTML elements and attributed are used to define the structure and the content of the web page.
HTML Structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Heading</h1>
<p>This is a paragraph.</p>
</body></html>
HTML Structure Explanation
- <!DOCTYPE html> declaration - every html document begin with this tag.
- <html> element - Whatever we write on the html page everything comes within this tag <html> ... </html>
<head>element - It may contains the information about the document such as:- page title - highlighted 2 in the below screenshot
- favicon (logo that appear with page title) - highlighted 1 in the below screenshot
- internal CSS/JS
- inclusion of internal or external CSS/JS or any other file
- <body> element - This may contains the content that is displayed on the web page, such as
- text
- heading
- table
- images
- audio/videos
- and other types of multimedia content
Example code
<!DOCTYPE html>
<html>
<head>
<title>This is page title</title>
</head>
<body>
<h1>Heading goes here</h1>
<p>This is a paragraph 1.</p>
<p>This is a paragraph 2.</p>
</body>
</html>
Code Example to understand the different part of the web page
<!DOCTYPE html>
<head>
<!-- stylesheet
// css file incldue
-->
<title>My HTML Tutorial</title>
<link rel="icon" type="image/x-icon" href="fav.png">
</head>
<body style="background-color:lightblue">
1. Comment - <!-- your text goes here... --> <br>
2. Head Tag - H1 to H6 <br/>
<h1>This is head 1</h1>
<h2>This is head 2</h2>
<h3>This is head 3</h3>
<h4>H4 Tag</h4>
<h5>H5 Tag</h5>
<h6>H6 tag</h6>
3. 'your_file_name.html' - html file name<br>
4. Editor - Use notpad or VSC (Visual Studio Code)
5. <br> or <br/> - for line break<br>
6. Space - My name is Shree Ram Sharma <br>
7. <p>This is a paragraph tag...</p> <p>This is second paragraph</p>
8. <b>This is bold tag.</b> <strong>This is strong tag</strong> <br>
9. <i>Italic tag</i><br>
10. <u>This is an underline tag.</u><br>
11. <strike>This is a strike tag</strike><br>
12. <a href="https://www.google.com">This is a link tag.</a><br>
13. Element - all tags are elements.... <a></a> <p></p> <h1></h1><br>
14. Attributes - It provides additional information about the HTML elements.<br>
15. Element - <a>a tag</a> Attribute - href<br>
16. target attribute - <a href="https://www.google.com" target="_blank">This is a link tag.</a><br>
17. img element - <img> or <img/> <br>
<img src="pexels-pixabay-60597.jpg" height="600" width="800" alt="Red Rose" title="This is Red Rose"><br>
18. style
<h1 style="color:#ff0000; background-color: blue; width: 30%; text-align: center;">This is H1 tag.</h1>
<br>
19. <em style="color: green">this is em tag.</em> <br>
20. <small>This is small</small> <br>
21. <del>this is deleted text</del> <br>
22. <ins>this is INS element</ins> - use for underline <br>
23. 50<sub>2</sub> - this can be use for the sub-script. <br>
24. 50<sup>2</sup> <br>
25. <blockquote>this is blockquote </blockquote>
26. table in html
<table border="2">
<tr>
<td>
1 row 1 column
</td>
<td>
1 row 2 column
</td>
</tr>
<tr>
<td>
2 row 1 column
</td>
<td>
2 row 2 column
</td>
</tr>
<tr>
<td>
3 row 1 column
</td>
<td>
3 row 2 column
</td>
</tr>
</table>
<br>
27. List
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ol>
28 . List
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
<dd>- white cold drink</dd>
</dl>
29.
<ol>
<li> Items
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>Chairs
<ul>
<li>Chair 1</li>
<li>Chair 2</li>
<li>Chair 3</li>
</ul>
</li>
</ol>
<br><br><br><br>
</body>
</html>
Watch this video to learn more
Thank you!
Tags
HTML Tutorial
hi
ReplyDelete