Beginner's Guide to HTML and CSS

travis · Post by **travis** » Sat Sep 18, 2004 5:48 pm

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 <img src=\'http://www.killanet.net/forum3/public/s ... >/good.gif\' class=\'bbc_emoticon\' alt=\'(Y)\' />

To start with, you'll need a simple page:
Code:
[code]<html>
<head>
<title>(Title)</title>
</head>
<body>
(text)
</body>
</html>[/code]

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]<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>[/code]

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]<html>
<head>
<title>not needed</title>
</head>
<body>
<a href="page1.html" target="whatever you called main">
then so on[/code]

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]<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>[/code]

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]<iframe name="what you want to call the iframe" height="pixels or percents" width="pixels or percents">[/code]

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

Simple text formats:
Code:
[code]<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>[/code]

Text sizing:

Code:
[code]body{
font-size:{pixels}px;
}[/code]
or:
[code]<h1>Biggest font [Heading1]</h1>
<h6>Smallest font [Heading6]</h6>[/code]

For a link:
Code:
[code]<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>[/code]

Link effects:

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

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][put in the head tag]
<link rel="stylesheet" href="main.css" type="text/css">[/code]

or, to have more compatability with more browsers:
Code:
[code]<style type="text/css" media="all">
@import "path/to/style.css";
</style>[/code]

Though, I have never seen that done before.

[size=23]Enjoy.[/size]

Josh · Post by **Josh** » Sat Sep 18, 2004 6:08 pm

Very nice Travis <img src=\'http://www.killanet.net/forum3/public/s ... /smile.gif\' class=\'bbc_emoticon\' alt=\':)\' />