The
most important tags in HTML are tags that define headings, paragraphs and line
breaks.
Basic HTML Tags Tag
|
Description
|
<html>
|
Defines
an HTML document
|
<body>
|
Defines
the document's body
|
<h1>
to <h6>
|
Defines
header 1 to header 6
|
<p>
|
Defines
a paragraph
|
<br>
|
Inserts
a single line break
|
<hr>
|
Defines
a horizontal rule
|
<!-->
|
Defines
a comment
|
Headings
Headings are defined with the <h1>
to <h6> tags. <h1> defines the largest heading while <h6> defines
the smallest.
<h1>This
is a heading</h1>
<h2>This
is a heading</h2>
<h3>This
is a heading</h3>
<h4>This
is a heading</h4>
<h5>This
is a heading</h5>
<h6>
This is a heading</h6>
HTML automatically adds an extra
blank line before and after a heading. A useful heading attribute is align.
<h5
align="left">I can align headings </h5>
<h5
align="center">This is a centered heading </h5>
<h5
align="right">This is a heading aligned to the right </h5>
Paragraphs
Paragraphs are defined with the <p>
tag. Think of a paragraph as a block of text. You can use the align attribute
with a paragraph tag as well.
<p
align="left">This is a paragraph</p>
<p
align="center">this is another paragraph</p>
Important:
You must
indicate paragraphs with <p> elements. A browser ignores any indentations
or blank lines in the source text. Without <p> elements, the document
becomes one large paragraph. HTML automatically adds an extra blank line before
and after a paragraph.
Line Breaks
<p>This
<br> is a para<br> graph with line breaks</p>
The
<br> tag has no closing tag.
Horizontal Rule
The <hr> element is used
for horizontal rules that act as dividers between sections, like this:
<hr
width="50%" align="center">
Comments
in HTML
The
comment tag is used to insert a comment in the HTML source code. A comment can
be placed anywhere in the document and the browser will ignore everything
inside the brackets. You can use comments to write notes to yourself, or write
a helpful message to someone looking at your source code.
<p>
This html comment would <!-- This is a comment --> be displayed like
this.</p>
Notice
you don't see the text between the tags <!-- and -->. If you look at the
source code, you would see the comment. To view the source code for this page,
in your browser window, select View and then select Source.
Note: You
need an exclamation point after the opening bracket <!-- but not before the
closing bracket -->.
HTML
automatically adds an extra blank line before and after some elements, like
before and after a paragraph, and before and after a heading. If you want to
insert blank lines into your document, use the <br> tag.
Try
It Out!
Open your
text editor and type the following text:
<html>
<head>
<title>My First
Webpage</title>
</head>
<body>
<h1
align="center">My First Webpage</h1>
<p>Welcome
to my first web page. I am writing this page using a text editor and plain old
html.</p>
<p>By
learning html, I'll be able to create web pages like a pro....<br>
which I am
of course.</p>
</body>
</html>
Save
the page as mypage2.html. Open the file in your Internet browser. To
view how the page should look, visit this web page: http://profdevtrain.austincc.edu/html/mypage2.html
Other
HTML Tags
As
mentioned before, there are logical styles that describe what the text should
be and physical styles which actually provide physical formatting. It is
recommended to use the logical tags and use style sheets to style the text in
those tags.
Logical Tags
Tag
|
Description
|
<abbr>
|
Defines
an abbreviation
|
<acronym>
|
Defines
an acronym
|
<address>
|
Defines
an address element
|
<cite>
|
Defines
a citation
|
<code>
|
Defines computer
code text
|
<blockquote>
|
Defines
a long quotation
|
<del>
|
Defines
text
|
<dfn>
|
Defines
a definition term
|
<em>
|
Defines emphasized
text
|
<ins>
|
Defines
inserted text
|
<kbd>
|
Defines
keyboard text
|
<pre>
|
Defines
preformatted text
|
<q>
|
Defines
a short quotation
|
<samp>
|
Defines
sample computer code
|
<strong>
|
Defines strong
text
|
<var>
|
Defines
a variable
|
Physical Tags
Tag
|
Description
|
<b>
|
Defines bold
text
|
<big>
|
Defines big
text
|
<i>
|
Defines italic
text
|
<small>
|
Defines
small text
|
<sup>
|
Defines superscripted text
|
<sub>
|
Defines subscripted text
|
<tt>
|
Defines
teletype text
|
<u>
|
Deprecated.
Use styles instead
|
Character
tags like <strong> and <em> produce the same physical display as <b>
and <i> but are more uniformly supported across different browsers.
Some
Examples:
The
following paragraph uses the <blockquote> tag. In the previous sentence,
the blockquote tag is enclosed in the <samp> Sample tag.
We
the people of the United States, in order to form a more perfect Union,
establish Justice, insure domestic Tranquility, provide for the common defense,
promote the general Welfare, and secure the Blessings of Liberty to ourselves
and our Posterity, do ordain and establish this Constitution for the United
States of America.
Although
most browsers render blockquoted text by indenting it, that's not specifically
what it's designed to do. It's conceivable that some future browser may render
blockquoted text in some other way. However, for the time being, it is
perfectly safe to indent blocks of text with the <blockquote>.
Example:
<abbr
title="World Wide Web">WWW</abbr>
Result
:
WWW
No comments:
Post a Comment