HTML Basic Examples

In this chapter we will discuss HTML basics.

Don't worry, we will learn very easily.

All 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>

HTML Heading

Example

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is my first heading</h1>
<p>This is my first paragraph</p>
</body>
</html>

HTML Headings

HTML headings are defined with the < h1> to < /h6>

HTML Heading

Example

<h1>This is my first heading 1</h1>
<h2>This is my first heading 2</h2>
<h3>This is my first heading 3</h3>
<h4>This is my first heading 4</h4>
<h5>This is my first heading 5</h5>
<h6>This is my first heading 6</h6>

This is Heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

HTML Paragraphs

HTML Paragraph are defined with the < p > Tag

HTML Paragraphs

Example

<p>This is paragraph</p>
<p>This is another paragraph</p>

HTML Links

HTML links defined with the < a >

Example

This links destination is specified in the href attribute.

Attributes are used to provied additional information about HTML elements

You will learn more about attributes next chapter.

HTML Images

HTML images defined with the < img > Tag.

The source file ( src ), alternative text ( alt ), width,and heightare provided arrtibutes.

Example

            <!DOCTYPE html>
                <html>
                <head>
                    <title>Document</title>
                </head>
                <body>
                  <img src="codezara.jpg" alt="https://codezara.com/restaurant" width="300" height="400">
                </body>
                </html>

How to view HTML source

Have you ever seen a web page and wondered Hay How did they do that

How to view HTML source code

Click the CTRL + U in an HTML page or right click on the page and select View page source This will open a new tab containing HTML source code of the page.

Inspect and HTML elements

Right click on an element ( or a blank area ) and choose inspcet 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 panels that opens.