 |
|
 |
 |
 |
|
 Print this Article (NS4) Netscape Navigator Internet Explorer Opera Neoplanet
|
 Forums
HTML General Programming Flash Site Dev Grafix (Art)
|
 Laboratory
Smart HTML Color Lab Generators
|
 HTML Editors
Simple Editor(Win*) EditPad(Win95) AOLPress(Win95) BBEdit(Mac) Dreamweaver CuteHTML
|
|
Related Files
Font Creator True Type Fonts WEFT Icon Creator
|
 Contents
Introduction to Ultimate Enlightenment
Body Works
Images and Eye Candy
Lists and Forms
Tables
Frames and those that Float
Meta Data
Sound of Music
Channel Surfing
|
Introduction to Ultimate Enlightenment
By Lisa Hui
Although we like to keep the beginner in mind, we're going to attempt to show you how easy it can be to work with HTML and cranking out some spiffy pages and sites on the web. If you bore easily, you may want to skip straight to the culled out information in our printable index of HTML tags or our list of the top 30 cheesy-but-cool HTML tricks to jazz up your site.
Introductory Terms
- Be Fluent in Web Slang
HTML - Hyper Text Markup Language
URL - Uniform Resource Locator
DHTML - Dynamic Hyper Text Markup Language (HTML on steroids)
CGI - Common Gateway Interface
JAVA - a coffee (and a programming language)
WYSIWYG - "What You See Is What You Get"; a type of HTML editor that allows
you edit by dragging elements while simultaneously showing you how it looks
as you operate on the web page.
XML - eXtensible Markup Language
SGML - Standard Generalized Markup Language; HTML is one of its offshoots.
First Thing's First
- Don't pull out your hair in frustration.
As a general rule to approaching anything web related, 
test the water before
you jump in. Marnie Pehrson, who published an article called the
7
Deadly Web Development Mistakes, warns you to "never just assume that
your idea will work because it makes sense on paper." The best thing
to do if you're new at this, is to get some quick results (to know that you're
doing things correctly) before adding the dressings.
A HTML file usually ends with the file extension .html. While surfing, however, you may encounter a variety of extensions that show you web pages in your browser. Some of the other common ones are .htm, .shtml, .cgi, .pl, and .asp. Some that are not as common as the previous group include .exe, .php, .php3, .phtml, .jhtml, .mv, and no extension at all! The last one is probably a psuedo name for an .exe file so not to worry :)
Ground Floor
- Necessities and the Basics
Let's get cracking; to create a HTML file 
, just open your favorite text editor
(which you can probably find already installed on your computer, such as
MicroSoft Notepad for
Windows users; vi, emacs, or pico for UNIX users; or BBEdit for Mac Users) and create a "New" or "Blank" document. In this,
type (or cut/paste) the following:
<HTML>
<HEAD>
<TITLE>Ad Infinitum Web</TITLE>
</HEAD>
<BODY>
Text etc etc etc.
</BODY>
</HTML>
Now save the file ... let's call it something like mypage.html ("mypage" is whatever you want to call it - no spaces in the name please - we'll explain spaces in the HTML file name a little later)
Off to the side, know that with 3.0+ browsers you don't even have to add the starting <HTML> and ending </HTML> tags to get your text to show up in your browser! If you're really lazy, just open up a new file, type in "Hello World!" and save it as a HTML file, and presto, those words still show up in the browser :)
You can also use our page generation
utility 
at our website which takes in what you type and displays the
resultant HTML page in your browser. (You can also choose to save sample
pages for future reference from the tool bar: File > Save As) To find out
more about this Perl-powered programming marvel (just kidding, it's simple
actually), read up about it at the official page generator utility section
and find a ton of other tools at your disposal as well :)
HTML uses identifying tags which magically embue your text with various properties such as color, size change, and alignment capbilities, but let us first explain what we just wrote in this document. Tags are not case sensitive so that you may type <html> instead of <HTML> or even <hTmL> and the effect would be the same :)
If you saved the document and viewed it in your browser (open a new browser window and type in the FOLDER PATH to the file - for example C:\WebStuff\webpage.html if you stored it on your C:\ Drive in the Folder "WebStuff"), it should look like this sample page. <HTML> marks the start of the web page (tells the browser to get ready for HTML tags), and </HTML> marks the end of the web page. You may notice later on, in quite a few HTML tags, have a starter <TAG> and an ending </TAG> that has a backslash "/".
You should write any text you want displayed in the browser between the <BODY> </BODY> tags (in other words, the stuff you want to show up in the browser should be in the body of the document).
Title Me Something Nice
- Call me by Name
As a quick aside, I want to introduce you to the <HEAD> </HEAD> tags (also sometimes written as <HEADER> </HEADER>). In between the starting and ending header tag, you will be able to add a lot of features to your webpage, but for now, I'll mention the simplest header tag, <TITLE>. To add a title to your webpage, the code will look something like this:
<HTML>
<HEAD>
<TITLE>Ad Infinitum
Web</TITLE>
</HEAD>
<BODY>
Text etc etc etc.
</BODY>
</HTML>
What you see (notice the bar up top will read "Ad Infinitum Web"): mypage.html
The "Markup" in HTML
- Spice up Your Words!
As I just mentioned a moment ago, HTML gives us the ability to "mark up" our text and make it remarkable (unlike the monotone text in your text editor). Some WYSIWYG editors may display your tags in funky color codes though :)
Attributes we can use our documents include color, size, style, and variation of font types. Let's go over the possible tags you can use, and how to use them (the tags proceeded by a "[*]" indicate that they have extra parameters that allow you to modify their effects). They usually have this type of format: <TAG ATTRIBUTE="VALUE"> And this combination of attribute and value is called a parameter. We'll get to that in just a moment.
Should you have some trouble understanding how to use these, feel free to view the source code or send me an AOL Instant Message if you have AIM or send an email message to html@3dinfinity.com, and we'll try to answer your question promptly.
Still have mypage.html open? If so, let's practice some of these tags. If not, open up the page generator to work along with me as I go through the list of styles, effects, formats, and fonts. Type in a sentence [I'll be using this one: "Jack jumped over the candlestick and burned his behind." :)] or paragraph, save it, and now change its style.
Let's make the entire sentence bold:
Code: <b>Jack jumped over the candlestick and burned his behind.</b>
What you see in your browser: Jack jumped over the candlestick and burned his behind.
Or let's make the entire sentence italicized:
Code: <i>Jack jumped over the candlestick and burned his behind.</i>
What you see in your browser: Jack jumped over the candlestick and burned his behind.
Or let's make it both bold and italicized:
Code: <b><i>Jack jumped over the candlestick and burned his behind.</i></b>
What you see in your browser: Jack jumped over the candlestick and burned his behind.
Or hmmm...underline the entire sentence, italicize the name "Jack" and bold
the rest of the sentence! Let's take this one step at a time:
1.Underline the entire sentence: <u>Jack jumped over the candlestick and burned his behind.</u>
2.Italicize the name "Jack": <u><i>Jack</i> jumped over the candlestick and burned his behind.</u>
3.Bold every word in the sentence except for Jack (meaning, insert the bold <b> tag starting after "Jack"): <u><i>Jack</i> <b>jumped over the candlestick and burned his behind.</b></u>
What you see in the browser: Jack jumped over the candlestick and burned his behind.
Got the hang of it? Here's a comprehensive list of styles and effects you can add to your text:
Physical and Logical Styles
Makes the text darker and thicker: text<b>Bold</b>
<strong>Strong</strong>
Slants your words:
text
<i>Italics</i>
<em>Emphasize</em>
<cite>Citation</cite>
<dfn>Definition</dfn>
<var>Variable</var>
<address>Address</address>
Draws a line underneath the phrase: text
<u>Underline</u>
<ins>Inserted</ins>
Crosses out the phrase:
text
<del>Deleted</del>
<strike>Strike-Out 2.0</strike>
<s>Strike-Out 3.0</s>
Effects
Blink - makes your text flash. [Netscape only]<blink>Blink</blink>
Marquee - Makes your text
scroll. [Internet Explorer
only]
<marquee>Marquee</marquee>
Perhaps you want to be able to write paragraphs and have certain spacing schemes. (You may notice that no matter how much space you leave between the last word of a sentence and the first word of the next sentence it will always show up in your browser as 1 space.) So, in order to do this, we have the invention of formatting and block formatting tags.
Formatting and Block Formatting
Paragraph Break - Starts a new paragraph.| Sally saw sea shells sitting by the sea. <p> Yea, but Jack jumped over the candlestick and burned his behind. |
Sally saw sea shells sitting by the sea.
Yea, but Jack jumped over the candlestick and burned his behind. |
Line Break - Breaks the current line and continues on the next line.
| Some speculate that<br> the story of<br> Alice in Wonderland<br> is just a parable<br> about drugs. |
Some speculate that the story of Alice in Wonderland is just a parable about drugs. |
Blockquote - Automatically creates a new paragraph (<p>) and indents the quoted text.
| Unblockquoted text. <bq>Blockquoted text. Isn't this fun?</bq> |
Unblockquoted text.
Blockquoted text. Isn't this fun? |
Preformatted Text - Displays whitespace, natural line breaks in source code, doesn't wrap words and doesn't render (draw on the screen) HTML tags. The default font face is Courier size 2 (12px)
| <pre> See preformatted text oooh!</pre> | See preformatted text oooh! |
Plaintext Font - Same as the preformatted text, but some browser have trouble showing a page if that is used.
Horizontal Rule - A horizontal rule draws a line across the screen. Through parameters, you can specify the width/length, size and color of the line.
| <hr> |
|
Whitespace - When you need to indent paragraphs or add more than one space between certain things (space fillers), you can add a whitespace and it will count as an "invisible" character.
| How are you today? | How are you today? |
Centering Text - Centers everything bound between the opening and closing centering tags.
| <center>Centering Text</center> |
The paragraph break tag <p> also supports parameters that allow you to align your text. It looks something like: <p align="*">
With it, you can tell the browser what alignment you want the next paragraph (all the text until the browser finds the next <p> tag) to have. By default <p> is the equivalent of <p align="left"> which, as the tag so elegantly states, aligns your paragraph to the left.
| Code: | <p align="right"> This is what text aligned to the right looks like. |
| What it looks like in a browser: | This is what text aligned to the right looks like. |
| Code: | <p align="center"> This is what text aligned in the center looks like. |
| What it looks like in a browser: |
This is what text aligned in the center looks like. |
As well, it is possible to use "justify" as an attribute. It tries to create lines that have the same length. This may result in some stretching of words, but anyone who is familiar with word processing software may realize that this tag is quite handy when publishing documents.
An explanation of the horizontal rule (<hr>) can be found proceeding the color and gradient section of this introduction, so if you know all this stuff already, you might as well skip right to that :)
