Site hosted by Angelfire.com: Build your free website today!

Tisthammerw's Guide to Learning html Part I



First I'll start with telling you about the basics of html. It stands for Hyper Text Markup Language. When starting from scratch, you typically have this sort of format below:



<html>
<head>
<title>Insert Title Here</title>
</head>

<body>

<p>
Insert what you want on your website (paragraphs, pictures, etc.) here. In this case, we have a small paragraph in simple text.

</body>

<html>
 		The <html>...</html> always encloses the entire html document.

In between <title>...</title> is what the text will be at the very top of the window.


In the <body>...</body> section, this is where you tell the computer what you want to appear in the web page. All the text, paragraphs, headers, tables, links, and other stuff that you want to appear on the web page will be written in this area. Right before you start a paragraph, you'll want to put <p> right before it.


If you want to see what the code to the left box above will display, click here, and note the “Insert Title Here” text at the very top of the window when you click on that link.

Did you do it? What do you think? Okay, so it's not much to look at with just one paragraph. But if you stick with me, we'll learn more stuff along the way.



Text
html code resulting effect
<i>Italicized Text</i> Italicized Text
<b>Bold Text</b> Bold Text
<u>Underlined Text</u> Underlined Text
<tt>Typewriter Text</tt> Typewriter Text
<font size="1">This is font size 1</font> This is font size 1
<font size="2">This is font size 2</font> This is font size 2
<font size="3">This is font size 3</font> This is font size 3
<font size="4">This is font size 4</font> This is font size 4
<font size="5">This is font size 5</font> This is font size 5
<font size="6">This is font size 6</font> This is font size 6
<h1>This is heading size 1</h1>

This is heading size 1
<h2>This is heading size 2</h2>

This is heading size 2
<h3>This is heading size 3</h3>

This is heading size 3
<h4>This is heading size 4</h4>

This is heading size 4
<h5>This is heading size 5</h5>
This is heading size 5
<h6>This is heading size 6</h6>
This is heading size 6
<font color="red">Red Text</font> Red Text
<font color="orange">Orange Text</font> Orange Text
<font color="yellow">Yellow Text</font> Yellow Text
<font color="green">Green Text</font> Green Text
<font color="blue">Blue Text</font> Blue Text
<font color="purple">Purple Text</font> Purple Text




Lists
html code resulting effect
Syntax:

<ul>
<li>[list item]
<li>[list item]
</ul>



[unordered list]
Example:

<ul>
<li>List item 1
<li>List item 2
</ul>



  • List item 1
  • List item 2
Syntax:

<ul>
<li type="[type]">[list item]
<li type="[type]">[list item]
<li type="[type]">[list item]
</ul>



[unordered list with selected bullet types]
Example:

<ul>
<li type="circle">List item 1
<li type="disc">List item 2
<li type="square">List item 3
</ul>



  • List item 1
  • List item 2
  • List item 3
Syntax:

<ul>
<li>[list item]
    <ul>
    <li>[nested list item]
        <ul>
        <li>[next nested list item]
        </ul>
    </ul>
</ul>

[unordered list nested twice]
Example:

<ul>
<li>List item
    <ul>
    <li>Nested list item
        <ul>
        <li>Next nested list item
        </ul>
    </ul>
</ul>

  • List item
    • Nested list item
      • Next nested list item




Links
html code resulting effect
Syntax:

<a href="[Web Address]">="[Name of Link]</a>



[Link]
Example:

<a href="http://www.pepsi.com">Click here to go to the Pepsi website</a>



Click here to go to the Pepsi website
Syntax

<a href="[Web Address]" target="_new">[Name of Link]</a>



[Link that opens up in a new window]
Example:

<a href="http://www.pepsi.com" target="_new">Click here to go to the Pepsi website</a>



Click here to go to the Pepsi website

[Note: The target="_new" makes it so that it opens in a new window.]







html code

Some normal text above the blockquote goes here.

<blockquote>This will quote a block of text as a separate paragraph like this, indented on both the left and right sides. Note: blockquotes don't work to well in tables, so that's why I had to show you this example without one.</blockquote>

Some normal text below the blockquote goes here.

resulting effect

Some normal text above the blockquote goes in here.
This will quote a block of text as a separate paragraph like this, indented on both the left and right sides. Note: blockquotes don't work to well in tables, so that's why I had to show you this example without one.
Some normal text below the blockquote goes here.




Tables

html code



<table border=3 width=450 cellpadding=3 cellspacing=3 align="center">

<caption>Table captions appear above or below the table (the default is above).</caption>

<tr>
<th>Table Header For the First Column</th>
<th>Table Header For the Second Column</th>
<th>Table Header For the Third Column</th>
</tr>

<tr>
<td>Something in the 1st Column.</td>
<td>Something in the 2nd Column</td>
<td>Something in the 3rd Column</td>
</tr>

</table>

effect



Table captions appear above or below the table (the default is above).
Table Header For the First Column Table Header For the Second Column Table Header For the Third Column
Something in the 1st Column. Something in the 2nd Column Something in the 3rd Column