We'll demonstrate some fundamental HTML examples in this chapter.
If we utilize tags that you are not yet familiar with, don't be concerned.
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>.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration identifies the document type and aids in the accurate presentation of web pages by browsers.
The only time it should show is at the page's top, before any HTML tags.
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
Explaining the HTML Headings.
There are six levels of headers in HTML. A header element includes any font alterations, preceding and after paragraph breaks, and any white space required to portray the heading. With <h1> being the highest (or most significant) level and <h6> being the least, the heading components are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>, For instance:
(<h1> defines the most important heading. <h6> defines the least important heading:)
<!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>
What is HTML Paragraphs?
A paragraph in HTML is defined by the p element. Browsers automatically add some white space (a margin) before and after a paragraph, which always begins on a new line.
HTML paragraphs are defined with the <p> tag:
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
How do HTML Links work?
Hyperlinks are links in HTML. You can access another paper by clicking on a link. The mouse arrow will change into a little hand when you move the mouse pointer over a link. A link does not always have to be text. An picture or any other HTML element can be a link!
HTML links are defined with the <a> tag:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>
<a href="https://sites.google.com/d/1nCUA8lS65TA19tihuI__TchU7qtobahi/p/1nEeZSJZhw77XinMCunnA8-DVMDgJuwH4/edit">This is a link</a>
</body>
</html>
Looking for more information about HTML Links?
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
You will learn more about attributes in a later chapter.
Explaining the HTML Images.
HTML image can be included in a web page using the <img> tag. Technically, photos are linked to web pages rather than being physically put into them. The relevant picture is held in place by the <img> element. The <img> element has no ending tag, is empty, and simply includes attributes.
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:
Looking for more information about HTML Images?
<!DOCTYPE html>
<html>
<body>
<h2>HTML Images<h2>
<p>HTML images are defined with the img tag:</p>
<img src="https://images.pexels.com/photos/3278364/pexels-photo-3278364.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1 width="300" height="400">
</body>
</html>