» Basic HTML

"But all this coding stuff is way too complicated!"
Actually, it's not. The learning curve for HTML, compared to other programming languages, is frighteningly fast. I know 12-year-olds who can code just as well as 30-year-olds. And that's exactly what these series of articles are here to help you with - basic, solid walkthroughs to teach anyone how to create their own custom Smack Jeeves comic template, and maintain it themselves, too. There won't be any complicated or fancy extras in these sets of articles - that's for you, the reader, to discover on your own, if you get interested in web design. Everyone who knows how to surf the internet, however, can learn how to code basic HTML, which is the foundation for any custom template. If you're already familiar with the HTML and CSS, you can go straight to the second article. If not, read on, and find out how simple it really is!

Tools that make Life Simple
Hyper Text Markup Language (HTML) basically stands for a text document that any web browser can read and convert into a web page. Simply put, that means you can make a webpage using little other than the standard "text editor" program that comes with every computer. If you'd like something a little more refined than a text editor, try Arachnophilia - it's free, and it runs on any operating system. Arachnophilia is like a text editor on steroids; it can help you get through this tutorial much more quickly by making it easier to identify different HTML tags. Whatever you do, don't try to use a WYSIWYG editor such as "Dreamweaver" or "Frontpage" to make your web design - visual web page editors always put in a lot of extra code that you don't need. And as the purpose we're shooting for is to ultimately make a custom page for the Smack Jeeves web site, extra code is always a bad thing.

* A special note to Photoshop Users: I consider Photoshop to be just another WYSIWYG editor when it comes to making web pages. However, Augest has made a fantastic tutorial for creating pages visually in Photoshop. I recommend that everyone go through this series of articles anyway, since if you understand the basics, you will be able to modify and improve upon Augest's own suggestions without bugging her constantly for help.

What the hell are "standards"?
A supplementary article to the introduction to HTML, I'm going to attempt to make a crash-course introducing the term "standards" and what they mean for you as a web designer, for those who are curious. And, if you're serious about making a good website, then you probably should be curious.

If you know anything about the internet, you probably also know about the W3C, otherwise known as the "World Wide Web Consortium." This is an international group of people and organizations which work together to develop standards for the internet. These "standards" are, in theory, to help the world wide web reach its full potential by developing protocols and guidelines to ensure long-term growth. In English, that means they give us, and the major browser-making companies, code formats to follow, so that every browser / internet capable device will be able to display web pages in a similar manner, and be forwards and backwards compatible for a very long time. This is a Very Good Thing, despite the fact that Microsoft had, at least until version 7 of "Internet Explorer," tried to get in the way of this sort of progress for personal profiteering reasons.

Now that you know what standards are, you should probably know what they apply to: HTML or "Hypertext Markup Language," CSS or "Cascading Style Sheets," and finally and perhaps most importantly, XHTML. XHTML is the logical next version of HTML, which is currently parked at version 4.01. XHTML pretty much looks the same as HTML with some minor differences, but it has one major advantage - XHTML can be read by non-web-browser devices. Like, your palm pilot or your cell phone screen, or perhaps even your Playstation Portable. Because XHTML has to be not only cross-browser compatible like HTML, but also cross-device compatible, it's a lot more strict than normal HTML. That is why following standards is so very important; leaving out a quotation mark here, a backslash there, a table row tag occasionally, this will not cause any serious harm to come to your webpages in plain old HTML. Most browsers today can compensate for bad coding and display a poorly-written webpage properly anyway. BUT if you want maximum access, compatibility and less chance for future trouble, you should be following XHTML standards strictly.

To learn what exactly those standards are, visit the XHTML 1.0 specification page - highly technical, but not unreadable. Skip to section 3 of the article to learn what XHTML standards actually are, and section 4 if you're interested on reading up on the difference between XHTML and HTML.

Basic Terminology
These words should be familiar in your vocabulary if you're going to make a custom Smack Jeeves page. Don't worry if you don't understand them all now, just get to know them!

• TAG - The part of an HTML page that is code, and not content
• ATTRIBUTE - Special, customizable parts of HTML tags and CSS.
• CONTENT - This is all the stuff that makes your webpage unique - your text, your images, your comic, etc.
• HEADER - The top half of your web page code, where you do things like set styles, fonts, colours and titles for your web page
• BODY - The lower half of your web page code, where you display your content
• LINK - A tag that makes a connection to a different webpage
• IMG - The tag that lets you insert images into your webpage
• HEX CODE - Short for "hexadecimal code," the 6-digit/letter combination that translates to a colour on a web page
• SCRIPT, JAVASCRIPT - Special code that you can stick on a webpage to do fancy stuff, like make pop-up windows or rating votes
• CSS - "Cascading Style Sheets" - the code that lets you set your webpage colour and fonts, among other things. It's different from HTML!
• GLOBAL / LOCAL - A term for types of code on the Smack Jeeves site; "Global" means it works on every page in your Smack Jeeves Comic, "Local" means it works only on the page that you put the code in.
• REMOTE - Sort of like the terms "Global" and "Local," this term refers to anything that is NOT hosted on the Smack Jeeves site.
• VARIABLE - The part of a Smack Jeeves page that is code, and not content
• LOOP - Part of the Smack Jeeves code that automatically repeats itself when needed
• SWITCH - Part of the Smack Jeeves code that tells loops when to start and stop repeating themselves

Basic HTML Tags
So now that you know what a TAG is, let's list the ones most commonly used in websites. If you want to be a really good designer that goes by the latest standards, make sure all your tags are lowercase. And take note of the quotation marks and backslashes - these are important to include!

<html> and </html>
The opening and closing tags of every web page, these go at the very top and the very bottom of your page, respectively. Both of these tags should ALWAYS be included, no excuses, and nothing goes BEFORE or AFTER them! If you're using Arachnophilia to generate a webpage, the program will stick these in for you automatically.

<head> and </head>
The tags that define the header portion of your webpage. Both of these tags should also ALWAYS be included, no excuses, inbetween the HTML tags.

<title> and </title>
The tag that puts the title of your webpage on a browser window. It belongs inside of the header.

<meta name="" content="" />
There's more than one type of META-tag that can be put on a web page, but they're all basically used for search engine type stuff rather than showing off your content. If it's important to you that your comic shows up in Google, be sure to include these in your header!

<link rel="" type="" href="" />
These tags, which also belong in your header, are used to import information into your webpage from another site. Use these if you have a remotely hosted style sheet, or if you want to use a custom favicon (the little icon that shows to the right of your page title in a browser).

<body> and </body>
The tags that define the content of your webpage. Both tags should ALWAYS be included in a webpage, no excuses, inbetween the HTML tags and after the header. Some of you familiar with older HTML might remember that body tags used to be the key for controlling things like colours on your webpages. They're not anymore! You don't need to do anything fancy to your body tag other than stick it in your webpage; in some cases, it might even be detrimental to put specifications in your body tag.

<p> and </p>
Paragraph tags. These are only important if you have webpages with a whole lot of text on them.

<br />
Line break tags; these are the equivalent of a carriage return for a webpage, because hitting the return key on your keyboard won't cut to separate lines in HTML. Very useful for spacing your content out!

<img src="" />
The tag for inserting images into your webpage. You can manipulate this tag with special properties, and also in your stylesheets.

<a href=""> and </a>
The tag for inserting links into webpages.

<div> and </div>
Divider tags; they don't appear to do anything very important that you can see in plain old HTML, but they are ESSENTIAL for making CSS work!

<table> and </table>, <tr> and </tr>, <td> and </td>
These tags insert a table into a web page; this is the old-fashioned way to organize your content if you don't want to rely on CSS so much.

<hr />
A visual line break in your page, this can also be manipulated with special properties to change its width and colour, etc.

<h1> and </h1>, <h2> and </h2>, etc.
Header tags of differing sizes. H1 is the largest you can get and H6 is the smallest. These are used to organize your page content, and are also used by search engines to figure out what's on your page if you don't have meta tags. That means, use these only for titles! Don't use these just to make bold or large text, there are special tags for that.

<strong> and </strong>
Tags to make your text bold. Those familiar with HTML might remember the <b> tags; those are being depreciated and this is the new method of making your text bold without using CSS.

<em> and </em>
Tags to make your text italic. Those familiar with HTML might remember the <i> tags; those are being depreciated and this is the new method of making your text italic without using CSS.

<ul> and </ul>, <ol> and </ol>, and <li> and </li>
The tags for "lists" - UL means unordered list, that is, a vertical listing of things with plain old dots in front of them. OL means ordered list, that is, a vertical listing of things with numbers in front of them. LI is what you use to separate each item in a list.

Sample HTML Page
If you've gone through that list, copy and paste this into Arachnophilia (or a text editor) and then save it as an .HTML document. Then open it up in a browser to see the result! Don't be afraid to play around with the text and the tags to see what they do, either.

<html>
<head>
	<title> A Simple HTML Page </title>

	<meta name="Author" content="Type My Name Here!" />
	<meta name="Keywords" content="Separate key words for search engines by 
	commas here, key words, comic, comics, good art, my name, etc" />
	<meta name="Description" content="This would be the text that shows up 
	in Google underneath the title of your page, you can use whole sentences here.  
	Be sure to keep it sort of short!" />

	<link rel="stylesheet" type="text/css" HREF="http://www.smackjeeves.com/styles.css" />
</head>

<body>
	<h1>This is a Header</h1>

	<p>This is a paragraph of text.  Blah, blah blah blah.</p>

	This is a line of text.<br />
	This is another line of text with two space breaks beneath it.<br /><br />
	This is <strong>bold text</strong> and <em>italic text</em>.
	<br /><br />

	Below is a line break:<br />
	<hr />

	<div align="center">This is text aligned in the center of your page.</div>
	<div align="right">This is text aligned on the right of your page.</div>

	An image:
	<img src="http://img71.imageshack.us/img71/9318/smackemjeevesbyenkida6wv.jpg">

	<br /><br />

	<a href="mailto:nicole.wehmann@gmail.com">This is a link, which also goes to an email 
	address (mine).</a>

	<br /><br />

	<table border="2" align="center">
		<tr>
			<td colspan="3">Tabluated Information, Row #1</td>
		</tr>
		<tr>
			<td align="left" valign="top">Column #1, left justified at the top 
			<br /><br /><br /></td>
    			<td align="center" valign="middle">Column #2, centered in the 
    			middle</td>
		   	<td align="right" valign="bottom">Column #3, right justified 
		   	on the bottom</td>
		</tr>
		<tr>
			<td>Another Row</td>
    			<td>This Time</td>
    			<td>Divided by columns</td>
		</tr>
	</table>

	<br /><br />

	Unordered List:
	<ul>
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>
	</ul>

	Ordered List:
	<ol>
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>
	</ol>

	<br /><br />

</body>
</html>

- Enkida