Beginner's Guide to HTML and CSS

[travis]

Here's a tutorial I wrote quite a while ago on HTML and some CSS, it covers the basics of html pages, navigation, and jazzing it all up. I have edited it over the course of 2 years and will continue to edit it /good.gif' class='bbc_emoticon' alt='(Y)' />

To start with, you'll need a simple page:
Code:

Code: Select all

<html> 
<head> 
<title>(Title)</title> 
</head> 
<body> 
(text) 
</body> 
</html>

One of my biggest problems is navigation, what to use to navigate? where to position it? how big should it be? how many links should I limit myself to? should I make a links bar too? So, here are some basic navigation types.

First off, frames.

One thing that is a MUST for frames, is that you need at least 3 pages, 1 for navigation, 1 for main page, and 1 to put them together, like this:

Code:

Code: Select all

<frameset cols/rows="pixel,pixel"> the pixels or percents 
<frame name="nav1 or something" src="navigation page.htm(l)" making a frame seemless (optional) noresize SCROLLING="auto" MARGINWIDTH="0" MARGINHEIGHT="10" FRAMESPACING="0" BORDER="0"> 
then the mainpage 
<frame name="main or something" src="main page name.htm(l)" then if you want seemless you add noresize SCROLLING="auto" MARGINWIDTH="0" MARGINHEIGHT="10" FRAMESPACING="0" BORDER="0" again> 
</frameset>

this should be index.html, put this within a basic page, and make 2 other basic pages, 1 for content, and 1 for links.

And a easy way for navigation:
Code:

Code: Select all

<html> 
<head> 
<title>not needed</title> 
</head> 
<body> 
<a href="page1.html" target="whatever you called main"> 
then so on

by targeting it to the page frame you used for content, it will apear in that frame, making it alot easier to just make a basic page with text on it instead of a full page with alot of stuff on it.

My personal favorite navigation is tables, its alot more simple, but in the long run more hard. A simple table is like this:

Code:

Code: Select all

<table height="height pixels, or percents " width="width pixels, or percents" border="border size 0-100  i prefer 1" bordercolor="boreder color if you have a border" or bordercolorlight="light border color" and bordercolordark="dark boreder color" I think this is kind of neat but I never use it cellspacing="size of cell's space, I usually dont use these" cellpadding="size of cell's pad, I do not use this either"> 
<tr> 
<td>Text</td> 
</tr> 
</table>

Then the easiest way of navigation (in my opinion) is iframes, sort of like frames but they are "floating" frames, you don't need 3 pages, just two, one with the iframe content, one with the outside content, this works good with tables as navigation, then just target the links in the table to the iframe. A simple iframe would be:

Code:

Code: Select all

<iframe name="what you want to call the iframe" height="pixels or percents" width="pixels or percents">

Now that we are finished with Navigation, lets livin the pages up, with Text formats.

Simple text formats:
Code:

Code: Select all

<b>is a Bold command</b> 
<i>is an Italic command</i> 
<u>is an Underlined command</u> 
<sub>set words/phrases below the line</sub> 
<sup>Set words/phrases above the line</sup>

Text sizing:

Code:

Code: Select all

body{ 
font-size:{pixels}px; 
}

or:

Code: Select all

<h1>Biggest font [Heading1]</h1> 
<h6>Smallest font [Heading6]</h6>

For a link:
Code:

Code: Select all

<a href="site" target="optional, but _blank will pop it up in a new window">Text</a> 
or 
<a href="page" target="If you used frame/iframe their names would go here, otherwise optional">Text</a>

Link effects:

Code:

Code: Select all

<style type="text/css"> 
a:hover { 
font-family: font; 
color: color; 
text-decoration: style (underlined,bold,italics); 
} 
</style>

CSS can be External from HTML, just put it in a text document and save it as a .css
calling the CSS up:
Code:

Code: Select all

[put in the head tag] 
<link rel="stylesheet" href="main.css" type="text/css">

or, to have more compatability with more browsers:
Code:

Code: Select all

<style type="text/css" media="all"> 
@import "path/to/style.css"; 
</style>

Though, I have never seen that done before.

Enjoy.

[Josh]

Very nice Travis /smile.gif' class='bbc_emoticon' alt=':)' />