|
There is a lot to know if you're trying to learn HTML. Beginning HTML encompasses more than just HTML tags.
To fully utilize HTML, you need to understand the tags, familiarize yourself with concept and design, learn graphic design, and other technologies like JavaScript and CSS.
Below are some of the basic tags with descriptions and examples for reference.
Hyper Text Markup Language (HTML)
HTML is not case sensitive.
The language is used to write Web pages. Based on SGML and recently rewritten to follow XML guidelines.
The following is an example containing standard HTML tags.
The example consists of the head, which contains the title and the body, which consists of paragraphs, lists, subheadings, graphics.
Use styling tags inside the paragraph tags. For example: bold, italic, color text, lists, font size, etc.
Example:
<HTML>
<HEAD>
<TITLE>MY
Home Page</TITLE>
</HEAD>
<BODY>
<P>FIRST
PARAGRAPH</P>
<P>SECOND
PARAGRAPH</P>
</BODY>
</HTML>
The Tags:
<HTML>
The <HTML> tag is always the
first tag in your html document. It tells the browser that your file contains html code.
Use closing </HTML> tag at end of document, see above example.
<HEAD>
The head tag introduces text that describes an HTML document. Most documents have only a TITLE tag in the head section
See above example.
<TITLE>
The title tag, which is always located in the HEAD section, defines the title of an HTML document.
When a person bookmarks your page, the title will be used as a reference inside their bookmarks/favorites.
Search engines will also index the title of your page, therefore the title should be very descriptive.
<BODY>
The body tag introduces the body of the document. It should appear after the head section. The majority of your page content will exist between the body
open and close tags. Use closing </BODY> tag at end of document, see above example.
Heading
<H1>
Heading.
There are six levels of headings, 1 being the largest. The heading 1 tag defines a level 1 heading. The text content between the heading tags will be affected in size.
<H2>
Sample text for heading h2
</H2>
Paragraph
<P>
The paragraph tag starts a new paragraph. It is equivalent to two BR tags.
The </p> tag is optional if the tag is only to insert space between two paragraphs, but necessary when attributes like "center" will be applied to the whole paragraph.
The ALIGN attribute can be one of LEFT, RIGHT, or CENTER.
Example:
<P
ALIGN=CENTER> My Stuff </P>
Output:
My Stuff
Unordered list
<UL>
The unordered list tag introduces an unordered (bulleted) list, which is made up of List
Item (LI) tags. The COMPACT attribute instructs the browser to reduce the space occupied
by the list. For a numbered list use OL. For a list without bullets or numbers use MENU.
For a list without bullets or numbers made up of short items that can be arranged into
columns use DIR.
Example:
<UL>
<LI>listed
item
<LI>listed
item
<LI>
listed item
(/UL>
The output for unnumbered lists look like this:
List item
List item
List item
Ordered or numbered lists.
<OL>
Example:
<OL>
<LI>listed
item
<LI>
listed item
<LI>
listed item
</OL>
The output for an ordered/numbered list look like this:
- Listed item
- Listed item
- Listed item
A nested list:
Example:
<UL>
<LI>Orange County Cities
<UL>
<LI>Fountain Valley
<LI>Huntington Beach
<LI>Costa Mesa
</UL>
<LI>Los Angeles County Cities
<UL>
<LI>Hollywood
<LI>Long Beach
<LI>Pasadena
</UL>
</UL>
The output for the above nested list looks like this:
- Orange County Cities
- Fountain Valley
- Huntington Beach
- Costa Mesa
- Los Angeles County Cities
- Hollywood
- Long Beach
- Pasadena
<BLOCKQUOTE>
This tag is used to separate quotes from the body of the text.
For Example:
<P>F.
A. Mignet states that: </P>
<BLOCKQUOTE>
<P>
Mary Stuart, during the years 1579 and 1580, was incessantly devising plans for
getting her son out of Scotland.
</P>
</BLOCKQUOTE>
The result
would be:
F. A.
Mignet states that:
Mary Stuart, during the years 1579 and 1580, was incessantly devising Plans
for getting her son out of Scotland.
Horizontal Rule
The horizontal rule tag creates a horizontal line across your page or within defined areas, like table cells.
You can add the following attributes: Size, width, align, color, noshade.
<HR align="left" size="1" width="70%" noshade color="#708EA0">
<BR>
The line break tag breaks the current line of text. There is no closing </BR> tag.
STYLING YOUR TEXT
<FONT>
This tag is used to not only set the style of the font but can also be used to size and color the
font. It can also be used inside other tags, e.g. the header tag.
</FONT>
Example for changing size of font:
<FONT SIZE =3>
The number can be changed up to 7
</FONT>
Bold
<B>
Makes the text bold
</B>
Italic
<I>
Makes the text italic
</I>
You can use
these tags in combination for example:
<B><I> BIG SALE WITH HUGE SAVINGS</I></B>
Result would look like this:
BIG SALE WITH HUGE SAVINGS
Emphasized
<EM>
Emphasized
</EM>
The emphasized tag is use when you wish to emphasized text. Most browsers simply display it in italics.
Underlined
<U>
This is underlined
</U>
The subscript tag
<SUB>
The subscript tag
</SUB>
The subscript tag displays text in a smaller font than usual, as well as lower than normal.
The superscript tag
<SUP>
The superscript tag
</SUP>
The superscript tag displays text in a smaller font than usual, as well as higher than normal.
Non Breaking Space
&NBSP
Use this code when you want a non-breaking space. A non-breaking space is a white-space character that HTML will not condense. It is usually used to hold open table cells and add spacing between words.
For
example:
<P>
When Mary Queen of Scots died her son became King of Scotland and England
</P>
<P>
C
A S T
L E
</P>
Output:
When Mary Queen of Scots died her son became King of Scotland and England.
C A S T L E (Stretched out word)
Coloring the font:
<FONT COLOR=red>
This will change the font to red.
</FONT COLOR=red>
Try some of the following:
<FONT COLOR=black>
<FONT COLOR=blue>
<FONT COLOR=fuchsia>
<FONT COLOR=gray>
<FONT COLOR=green>
<FONT COLOR=lime>
<FONT COLOR=maroon>
<FONT COLOR=navy>
<FONT COLOR=olive>
<FONT COLOR=purple>
<FONT COLOR=red>
<FONT COLOR=silver>
<FONT COLOR=teal>
<FONT COLOR=white>
<FONT COLOR=yellow>
You can also use the Hexidecimal equvilent:
red FF0000
green 00FF00
blue 0000FF
black 000000
white FFFFFF
grey 888888
yellow FFFF00
cyan 00FFFF
Adding background color:
<BODY BGCOLOR=White>
This tag will make the background of your document white.
Try some of these other color tags:
<BODY BGCOLOR=red>
<BODY BGCOLOR=navy>
<BODY BGCOLOR=teal>
<BODY BGCOLOR=black>
<BODY BGCOLOR=green>
<BODY BGCOLOR=fuschia>
<BODY BGCOLOR=blue>
<BODY BGCOLOR=maroon>
<BODY BGCOLOR=yellow>
<BODY BGCOLOR=lime>
<BODY BGCOLOR=olive>
<BODY BGCOLOR=purple>
<BODY BGCOLOR=silver>
<BODY BGCOLOR=yellow>
|
|
