Web Design Basics | The Basic HTML Tags For Web Design with Examples

Share:


Don't worry if these examples use tags you have not learned.
You will learn about them in the Proceeding Chapters.

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>.
Input | Example <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

OutPut | Result

This is a Heading

This is a paragraph.


HTML Headings

HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:

Input | Example <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>

OutPut | Result
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5


HTML Paragraphs

HTML paragraphs are defined with the <p> tag:
Input | Example <p>This is my paragraph.</p>
<p>This is my Second paragraph.</p>

OutPut | Result
This is my paragraph.
This is  my Second paragraph.



HTML Links

HTML links are defined with the <a> tag.
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements:
Input | Example <a href="http://x3coded.com">This is my Website | Blog link</a>




HTML Images

HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:
Input | Example <img src="x3coded.com_logo.jpg" alt="x3coded.com" width="300" height="200">

OutPut | Result



HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.
You will learn more about CSS later in this tutorial.
Input | Example <h2 style="color: red;">
I am red</h2>
<h2 style="color: blue;">
I am blue</h2>

OutPut | Result

I am red

I am blue


No comments

Sponsored

Search This Blog