 |
| (Source: Howtocode) |
How to write HTML Document?
* Document Type Declaration:
At first you need to declare your document as a HTML type document. To do that we need to write something on top so that browser's first read that code and define that this is a HTML Document.
So how to write and where to write it and whats the code?
The code is <!DOCTYPE html>
We should write this code at the top of every HTML document.
* <HTML></HTML> Declaration:
This is must include code we can't make a html page without this. This declaration notify browsers that in between these all the html codes are present.
The code is <html>all HTML codes here</html>
We should write this code after <!DOCTYPE html>
* Body Tag Declaration:
This is also must include code. In between these all the visible parts are coaded like text images etc.
The code is <body>all visible HTML codes here</body>
We should write this code after <html> and end before </html>
[info title="Simple Code mixing all Declaration" icon="check-circle"]<!DOCTYPE html>
# Document Type Declared
<html>
# Starting All HTML Codes
<body>
# Starting visible HTML Codes
</body>
# Ending Visible HTML Codes
</html>
# Ending All HTML Codes
[/info]
# Document Type Declared
<html>
# Starting All HTML Codes
<body>
# Starting visible HTML Codes
</body>
# Ending Visible HTML Codes
</html>
# Ending All HTML Codes
[/info]
HTML Headings:
It is simple to make HTML Headings. These headings are defined from <h1> to <h6> tags.
[info title="Simple Headings" icon="check-circle"]<h1>Sample Heading 1</h1>
<h2>Sample Heading 2</h2>
<h3>Sample Heading 3</h3>
<h4>Sample Heading 4</h4>
<h5>Sample Heading 5</h5>
<h6>Sample Heading 6</h6>
- <h1> defines the most important headings.
- <h6> defines the least important headings.
[info title="Simple Headings" icon="check-circle"]<h1>Sample Heading 1</h1>
<h2>Sample Heading 2</h2>
<h3>Sample Heading 3</h3>
<h4>Sample Heading 4</h4>
<h5>Sample Heading 5</h5>
<h6>Sample Heading 6</h6>
[/info]
HTML Paragraphs:
HTML paragraphs are defined with the <p> tag.[info title="Example for Paragraph" icon="check-circle"]<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML links are defined with the <a> tag.
Attributes are used to provide additional information about HTML elements.
* The alt reffers to show alternative text if the image is not loaded.
* The height and width are like attributes which is used to manage the image size.
* <li> is used to list items or texts.
* <ol> is used for ordered/number lists.
You covered the basic codes used in HTML. I will be back with more articles like this if you liked it just subscribe and like for more articles.
<p>This is another paragraph.</p>
[/info]
HTML Links:
This is a most important code for all links we see.HTML links are defined with the <a> tag.
[info title="Example for Links" icon="check-circle"]<a href="https://www.sspradhan.com">This is My Link</a>
[/info]
The link's destination is specified in the href attribute.[/info]
Attributes are used to provide additional information about HTML elements.
HTML Images:
HTML images are defined with the <img> tag.[info title="Example for Images" icon="check-circle"]<img src="sspradhan.jpg" alt="sspradhan.com" width="104" height="142">
[/info]
* The src reffers to source file of an image.[/info]
* The alt reffers to show alternative text if the image is not loaded.
* The height and width are like attributes which is used to manage the image size.
HTML Buttons:
HTML buttons are defined with the <button> tag.[info title="Example for Buttons" icon="check-circle"]<button>Click me</button>
[/info]
[/info]
HTML Lists:
[info title="Example for List" icon="check-circle"]<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
[/info]
* <ul> is used for unordered/bullet list.<li>Coffee</li>
<li>Tea</li>
</ul>
[/info]
* <li> is used to list items or texts.
* <ol> is used for ordered/number lists.
You covered the basic codes used in HTML. I will be back with more articles like this if you liked it just subscribe and like for more articles.