The HTML You Need to Know

1) What is HTML

Hyper Text Markup Language (HTML) is the programming language used to display "web pages". In it's simplest form, it is nothing more than a bunch of "tags" that are paired together to tell your browser what to do with text.

2) What applications do I need to manipulate it?

Any text editor can be used to write HTML code. Simpletext on the Macintosh or Notepad on Windows or Vim on UNIX all work fine. HTML is just text. You can use fancy editors like BBEdit, Dreamweaver, or GoLive but they are not needed. To manipulate pages created by yvod.com we suggest you use whatever word processor you currently use to create text files... and just save the pages as text. This last point is VERY important. Make sure you save any HTML files as TEXT files and not as "formatted" files.

3) When and where can we start?

We can start right now. Hmm.... where to start? We should start with the most important thing you can do in HTML - commenting your work! Next, we will move onto tags.

Comments are little things you place into the HTML code so that people can understand what you are trying to do. In every single HTML page you should have comments. There are no exceptions to this rule. EVERY page should have comments.

Why?

You should always comment your work so that people who come behind you can understand what you were doing. This will give your code what programmers call "legs". Code with long legs will last a long time and be reused by other programmers. HTML is no different. If you comment your code, it has a much greater chance of being useful and reused by people who come after you.

Tags

HTML is a programming language which uses "opening" and "closing" tags. Everything that falls between the "tag pair" is effected by the tags. When I want to show a word or group of words in bold face, all I need to do is put a  at the beginning and a  at the end. Everything between these two tags will show up in bold.

Because HTML uses tags... it makes the language VERY easy to understand and use. On this page we will show you how to use some of the more important tags so that you can go in and edit your own HTML pages.

 (The Comment Tag)

Anything between these two tags is a comment and will be ignored by the browser. The ONLY reason you use this tag is so that people who come after you can use your work and understand it. Most yvod.com created pages have, at a minimum comment tags to define where the main content of a page goes.

Main content goes here....

 (the bold and italics tags)

These are real simple. If you want something bolded just place a at the begin and a at the end. If you want something italicized, just place a at the beginning and a at the end.

Here is an example using the italics and bold tags.

(paragraph and line-break tags)

Place a if you want a line separating another with a space in between. Place a if you want the text to flow directly beneath the line with no space. The tags is one of the few that does not need a "closing" tag. The tag also allows for an alignment option. You can specify and alignment option of left, center, or right.

Here is an example of text that has an
alignment of center
With a in it.

 (font tags)

Fonts have three options - color, face, and size.
color - You can specify what color you want your font to be
face - think of this as what kind of font you want (default, fixed width, sans, sans-serif)
size - How big or small do you want the font

Fonts can be specified by either their "hexadecimal" value or their "X11 color names" You can see these values here or here. The short version is, you can say and get a red font. Simple.

Font faces are groups of fonts that all act similar. This is a more complex subject than you "need to know" so for now we suggest you just leave this option alone.

The size option is the most important and is the most misunderstood. You can either define a font with an absolute size value between 1 and 7 or you can make it "relative" to the size of the default font. We STRONGLY suggest you use relative sizes because each person can then set their browser to display the fonts in a way that best suits them. If you force your font size on your visitors you run the risk of possibly making your site unreadable.

Here is an example of a font set to green with a size of +2. This makes the font 2 sizes bigger than the default.

Tables

Tables are the most complex thing that you "need to know". Web designers use tables so they can align the objects in a web page properly. The reason you need to know about tables is that you may find the need to add a row or two. With this in mind we will keep this lesson VERY simple and leave out 95% of table design and just give you the most basic and important rules about tables.

1) Every table needs a beginning and an ending
2) Every row needs a beginning and an ending
3) Every cell needs a beginning and an ending
4) Every table must have at least one row and every row must have at least one cell and every row must have the SAME NUMBER of cells

If you can remember these 4 rules... you will have mastered "what you need to know" about tables. Here is a table.

row 1 left cell	row 1 right cell
row 2 left cell	row 2 right cel
row 3 left cell	row 3 right cell

this table has three rows and each row has two cells (a left and a right). The code for the table looks like this:

table width="80%" border="1" align="center">
<tr>
<td>row 1 left cell</td>
<td>row 1 right cell</td>
</tr>
<tr>
<td>row 2 left cell</td>
<td>row 2 right cell</td>
</tr>
<tr>
<td>row 3 left cell</td>
<td>row 3 right cell</td>
</tr>
</table>

If you want to add a row, you simply have to copy and add from one <tr> to the closing </tr>.

<tr>
<td>row 4 left cell</td>
<td>row 4 right cell</td>
</tr>

Now the table looks like this:

row 1 left cell	row 1 right cell
row 2 left cell	row 2 right cel
row 3 left cell	row 3 right cell
row 4 left cell	row 4 right cell

And the code looks like this:

<table width="80%" border="1" align="center">
<tr>
<td>row 1 left cell</td>
<td>row 1 right cell</td>
</tr>
<tr>
<td>row 2 left cell</td>
<td>row 2 right cell</td>
</tr>
<tr>
<td>row 3 left cell</td>
<td>row 3 right cell</td>
</tr>
<tr>
<td>row 4 left cell</td>
<td>row 4 right cell</td>
</tr>

</table>

We hope this is enough HTML to get you started. Remember to always save a backup of your work so if you make a mistake you can revert to a saved "working" copy. Feel free to email us if you have any questions.