nodivisions

NoDivisions / Make Taxation Theft Again.

Quick and Easy HTML Tutorial.

This tutorial is short and easy and quick, because HTML is short and easy and quick. I also have a bigger one that covers some tangential things like file extensions, text editors, etc. That one covers the whole process of creating a webpage including all the mundane details of the steps involved, that people who are newer to computers or programming might appreciate. If that's you, go for it. If on the other hand you're plenty familiar with computers and file extensions and editors and such, then stay right here and I'll teach you HTML quickly.

To create a webpage:

Open a text editor like Notepad and create a new text document. Save it as index.htm in a folder on your computer somewhere. Note that it must be a straight text editor like Notepad, not a "word processor" like Microsoft Word, because Word will add extra junk (they call it "formatting") to your text document and it won't work as a webpage. If you insist on using such a word processor, you must choose "plain text" as the file type when you save the file.

Type all this into the text file:

<html>
<head>
<title>My page and stuff...</title>

<!-- NOTE: the style section is entirely optional.  Most
 websites use it, of course, but it's not actually a necessary
 part of a webpage. -->
<style type="text/css">
body
{
	background-color: #935790;
	/* note: #000000 is black, #ff0000 is red,	*/
	/*	 #00ff00 is green, #0000ff is blue,	*/
	/*	 #ffffff is white, and everything	*/
	/*	 else is somewhere in between (each	*/
	/*	 digit can be 0-9 or a-f).		*/
}
#acontainer
{
	width: 300px;
	border: 1px solid #000000;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	margin-bottom: 5px;
	padding: 20px;
	/* margin is outside the border, padding is inside, */
	/* and setting both left and right margins to auto  */
	/* causes the element to be centered.               */
	background-color: #ffffff;
}
.silly
{
	border-top: 3px dashed #00ff00;
	padding-top: 10px;
}
.bigblue
{
	font-size: 24px;
	color: #0000ff;
}
.probablytoobig	{ font-size: 80px;		}
.yellowishy	{ color: #a2b801;		}
.graybackground	{ background-color: #dadada;	}
.mono		{ font-family: monospace;	}
.bold		{ font-weight: bold;		}
.it		{ font-style: italic;		}
a.nounderline	{ text-decoration: none;	}
.centered	{ text-align: center;		}
</style>
</head>

<body>
<div id="acontainer">

<p class="centered">This is a centered paragraph.</p>
<p>This is a paragraph<br />with a line break. Line breaks in
your code, where you press Enter to make a new line, don't show
up in the browser.  So that's what the br tag is for.</p>

<p class="mono">This paragraph contains a link to 
<a href="http://www.google.com">google</a>'s website.  Here
is <a href="http://www.google.com" target="_blank">another</a>
that opens in a new browser window.  Here's a 
<a class="nounderline" href="http://go.com/">link</a> that's
not underlined.  And this whole paragraph is in a fixed-width
(monospace) font.
</p>

<p>Here's a horizontal rule:</p>
<hr>

<p>Formatting:
<span class="bold">bold</span>,
<span class="it">something italic</span>,
<span class="bigblue">big blue text</span>,
<span class="probablytoobig">yeah...</span>,
<span class="yellowishy">ew.</span>,
<span class="graybackground">running out of clever things
to say</span>.
</p>

<p class="silly">what is this.</p>

</div>
</body>
</html>

When you type that up, save the file as "index.htm", then open it up in a web browser. It should look like this:

Well, it won't be at www.mysite.com, it will be at some location on your computer's hard drive. But you get the idea.

To make a webpage with images and lists, try this:

<html>
<head>
<title>My next page</title>
</head>

<body>

<ol>
<li>This is an ordered list.</li>
<li>Here's the second list item.</li>
<li>Etc...</li>
</ol>

<ul>
<li>This is an UNordered list.</li>
<li>Pretty simple...</li>
</ul>

<p>Here is how to put an image on your page.  First, get an
image file and put it in the same folder as your index.htm file.
Name it doggie.jpg or something nice.  Then type this:
<img src="doggie.jpg" width="163" height="155" border="5">
</p>

<p>If you want to make your image into a hyperlink, type this:
<a href="http://www.dogs.com"><img src="doggie.jpg" width="163"
 height="55" border="5"></a>.</p>

</body>
</html>

That will give you something like this: