Learn HTML Basic Code
Tips (Total 7)
# Tips-1) How to create HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
Example of HTML Documents
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Output should be:
# Tips-2) How to create HTML <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is:
How is to look HTML <!DOCTYPE> Declaration
<!DOCTYPE html>
Full Example of HTML <!DOCTYPE> Declaration with HTML Page
Most top of a HTML Page should use <!DOCTYPE> Declaration
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Output should be:
<!DOCTYPE> Declaration
Output should be:
# Tips-3) How to create HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
How is to look HTML Headings Code?
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
Why we use HTML Headings Code?
HTML Headings Code makes a title Upper and Lower. If you use <h1>Most Upper Title</h1> then <h6>Most Lower Title</h6>.
Output should be:
Full Example of HTML Headings
Below has given code to understand HTML Headings. Follow it.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
Output should be:
# Tips-4) How to create HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
How is to look HTML Paragraphs?
Followings are sample of HTML Paragraphs
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
How to use HTML Paragraphs?
Between <body> and </body> you should use HTML Paragraphs
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
Full Example of HTML Paragraphs
Here is full example of HTML Paragraphs. You can try them yourself.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Output should be:
# Tips-5) How to create HTML Text Links
HTML links are defined with the <a> tag:
How is to look HTML Link?
Following is example of HTML Text Link
<a href="https://www.w3schools.com">This is a link</a>
What is the work of HTML Text Link?
To move one page to another page, We use HTML Text Link. Even to go one Website to another Website, We use HTML Text Link
Full Example of HTML Text Link
Following is the best example of HTML Text Link Code.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>
<a href="https://itupto">This is a link</a>
</body>
</html>
Output should be:
# Tips-6) How to create HTML Image
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:
How is to look HTML Image Code?
<img src="https://itupto.com/avatar.png" alt="W3Schools.com" width="200" height="200">
Why should use HTML Image Code
To make visible can use HTML Image Code. For the purpose of Photo Gallery, Image Content etc..
Full Example of HTML HTML
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>
<img src="https://itupto.com/avatar.png" alt="W3Schools.com" width="200" height="200">
</body>
</html>
Output should be:
# Tips-7) How to View HTML Source
Have you ever seen a Web page and wondered "Hey! How did they do that?"
View HTML Source Code:
Right-click in an HTML page and select "View Page Source" (in Chrome) or "View Source" (in Edge), or similar in other browsers. This will open a window containing the HTML source code of the page.
Inspect an HTML Element:
Right-click on an element (or a blank area), and choose "Inspect" or "Inspect Element" to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.