1. If You Know Nothing About HTML, This is Where You Start.

2. What is HTML? Hyper Text Markup Language.
HTML is a computer language that is used to create documents on the World Wide Web.
HTML is very simple, and logical. It reads from left to right, top to bottom and uses plain text.
The websites you view on the internet are actually text files that consist of HTML Tags.

3. What’s a Tag?
Commands.
Tags are instructions that tell your Web browser what to show on the page
All tags begin with a less-than sign < and end with a greater-than sign >. So anything inside of < > is a tag.
Each tag must be accompanied by a closing tag, which is exactly the same as the tag except it includes a slash after the less-than sign: </

4. And you’re ready to make websites!
Getting Started
What you need:
A computer.
A web browser.
A word processor
preferably Windows Notepad
And you’re ready to make websites!

5. Open Notepad

6. Remember! Write the page as you would any other text document.
When you SAVE the document always click ‘Save As…’ and ALWAYS save the file as an HTML document (.html)
If you don’t save as an HTML document, your computer will save it as it’s default format.

7. Beginning to Write Basic HTML tags Affect Code Code Used What it Does
Bold B
<B>Bold</B>
Italic I
<I>Italic</I>
Underline U
<U>Underline</U>

8. Variations You can use as many tags at one time as you’d like.
For example:
<B><I><U>Text Text Text</B></I></U>
Looks like:
Text Text Text

9. Single Tags These tags do not require that you close them. Tag
What It Does
<HR>
This command gives you a line across the page. (HR stands for Horizontal Reference.)
<BR>
This BReaks the text and starts it again on the next line. Remember you saved your document as TEXT so where you hit ENTER to jump to the next line was not saved. In an HTML document, you need to denote where you want every carriage return with a <BR>.
<P>
This stands for Paragraph. It does the exact same thing as the <BR> above except this tag skips a line. BR just jumps to the next line, P skips a line before starting the text again.

10. Writing Your First Page
Example:
This…
Looks like this

11. Manipulating Text Heading Commands
<H1>This is Heading 1</H1>
<H2>This is Heading 2</H2>
<H3>This is Heading 3</H3>
<H4>This is Heading 4</H4>
<H5>This is Heading 5</H5>
<H6>This is Heading 6</H6>
Heading commands create nice, bold text and are quite easy to use. It's a simple H# and /H# command.

12. Font Size There are twelve font size command.
+6 through +1 and -1 through -6.
+6 is the largest (it's huge); -6 is the smallest.
<FONT SIZE="+1">This is +1</FONT>

13. Font Color and Face
HTML uses Hex Codes for colors. A hex code is a 6 digit code that translates into a specific color.
<FONT COLOR=“#FFFFFF”>White Text</FONT>
To change the Font of your text, use the Face attribute.
<FONT FACE=“Arial”>Arial Text</FONT>

14. Text Alignment
To center text, simply place <CENTER> before the text, and </CENTER> at the end of the text you want centered.
To move text to the left or the right, use the <P> tag.
<P ALIGN=“right”>Text is pushed to the right.</P>

15. Images The command to place an image is constant.
<IMG SRC=“URL of image">
You can manipulate an images size, alignment, and placement on page, just like text.
<IMG ALIGN=“right” SRC=“URL of image”>
<IMG HEIGHT=“##” WIDTH=“##” SRC=“URL of image>

16. For this Class!
Save all images to an “images” folder that you create in your “Web” folder in “My Documents”
The URL of your image will then be
<img src="images/nameofyourimage.jpg“>

17. So, You Want a Table?
Will give you

18. What’s Happening? <TABLE> starts and ends the entire thing.
<CAPTION> and </CAPTION> places a caption over your table. The caption will be bolded and centered.
<TR> is used when you want a new Table Row to begin.      Notice that you need to end every table row with an </TR>.
<TD> denotes Table Data. You put this in front of every piece of information you want in a cell.      You need to end every one that you open with an </TD>.
</TABLE> ends the whole deal.

19. Table Borders
To get this…
Use this…

20. What’s Happening?
BORDER tells the table how large the border should be. This is all relative in terms of pixels. Three is larger than two and two is larger than one, etc. Try different numbers. BORDER=0 gets rid of the borders altogether.
CELLSPACING gives the amount of space between cells.
CELLPADDING gives the amount of space (or padding) between the cell border and the cell contents. Note the cell border walls tend to fill out. A higher number fills out more.

21. Finally Just about anything will go inside of a table. Add hyperlinks
Add pictures
Tables inside of Tables
Color
Frames

22. Making HyperLinks To link to other websites:
<A HREF=“URL of site”>Link Text</A>
You can make images links:
<A HREF=“URL of site”><IMG SRC=“URL of image”></A>

23. 3 Column Table
To make a 3 column table, first add the table’s data (border, cellspacing, and cellpadding)
Next add the tag width after cellpadding, make sure the width is 100%
<table border="1" cellspacing ="1" cellpadding="1" width=100%>