Advanced Web Design Tutorial : HTML

There are many tags in html. All the tags are very important for marking up webpages. I am discussing them step by step in this advanced web design tutorial.

HTML Heading

The <h1> to <h6> tags are defines the headings.

<h1> defines the most important heading. <h6> defines the least important heading.

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

Note: Browsers automatically add some white space (a margin) before and after a heading. You should use HTML headings for headings only. You should not use headings to make text BIG or bold.

Horizontal Rules

In an HTML page The <hr> tag defines a break between two lines. It is used to separate content (or define a change) in an HTML page.

<head> Element

The HTML <head> element has nothing to do.

It is a container for metadata. HTML metadata is data about the HTML document. Metadata are not displayed.

<p>paragraph & <pre> Element

The <p> element is used for writing a paragraph in a web page. <p> tag should be end by </p>

Line break

For making line break in the paragraph you can use <br> tag. You need not to end this <br> tag.

Preformatted text defined by the HTML <pre> element .

All the text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

Style Attributes

The general rules of using style attribute is <tagname style=”property:value;“>

For changing background color you can use background-color.
You can use color for changing text color .
For changing size of the font. You can use font-size.
You can fix alignment of text by using text-align.

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

<h1 style=”color:blue;”>This is a heading</h1>
<p style=”color:red;”>This is a paragraph.</p>

<h1 style=”font-family:verdana;”>This is a heading</h1>
<p style=”font-family:courier;”>This is a paragraph.</p>

<h1 style=”font-size:300%;”>This is a heading</h1>
<p style=”font-size:160%;”>This is a paragraph.</p>

<h1 style=”text-align:center;”>Centered Heading</h1>
<p style=”text-align:center;”>Centered paragraph.</p>

</body>

If you want to learn the previous part. part 03

All ideas related to advanced-web-design

Advanced Web Design Tutorial Part-03

Advanced Web Design Tutorial Part-04