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.
<body style=”background-color:powderblue;”>
<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