HTML revisited...

HTML revisited...
by kurt_der_koenig 10/27/04
====================================
Well my first tut so be easy on me. I know that this is not the first tutorial like this on AO
and I'm not going to pretend it to be so. But my purpose of this is maybe to present something
new and fresh for the community. If anybody sees mistakes in this please feel free to say so.
====================================

HTML, Hyper Text Markup Language, is the base of every webpage-
it tells the browser what to do. Whether HTML is a programming language or not is always a
debate. Personally, its not but one has to learn it so its just as "important" parse. I will also refer
to html as code for now on.

The very basic of the code is the tag. These tags are surrounded by angle brackets like so
< >. Some examples of tags are::: <title></title>, <table></table> and so on. As you
noticed these tags have closings(ex. </table>) and are very important. If one is not closed it can
totally mess up your site. Like my programming teacher once said, "One little thing and your hair
will fall out!". Mistakes can be really frustrating if not caught early. It is wise to test your code
over and over and also to check your code after a while to root out these mistakes. Going back to tags, not every one has a closing(not until xhtml, more on that later), like <hr>, <br> and so on.

Before we go on, lets go over browsers. One browser is not the same as the other. For length and boring properties we will only talk about Internet Explorer
(IE;http://www.microsoft.com/windows/ie/default.mspx) and Mozilla Firefox
(http://www.mozilla.org/products/firefox).It is wise to test out everything in at least two
other browsers to meet some common ground. Font size, positioning, etc are common differences in browsers. IE might b*tch about one thing and Mozilla will grope about something else. Like said before, test!

To begin making a webpage simply open up a simple text editor. For windows, notepad will be
enough (start>run>notepad.exe).

The basic layout of a webpage:

Code:

<html> start of page, proper <head> used to store meta tags,the title,and scripts <title></title> title tag,displays the words in the title bar on your browser </head> ends the head tag <body> body tag, just like a letter the important stuff goes here! </body> end body tag </html> end html tag, ends webpage

It is very important to follow the above layout, think of it as a letter. Something thats out of its
proposed area will not function correctly-if at all. To save the document as a webpage save it
with an extension of .html or .htm, both results are the same.

Comments in your code can help you spot out specific parts and help others understand what
they are looking at. To set up a comment simply type:: . If you
mistype your comment Firefox will ignore it but internet explorer will treat it as regular text and
display it; this basically goes for any code that is mistyped.

Text formatting
===============

Although not as important to know with the onset of scripting (CSS...), it is good to at least
know. To denote the beginning of the desired formatting begin with the use of font tags,
<font></font>. With these tags one can do everything from font style, size, and color.

<font face="sans-serif, times new roman">AO ist k-rad</font>

This tag set will format the text between the tags to 'sans-serif', and if sans-serif is not present
then it will skip to 'times new roman'. Fonts that might work on a Windows operating system
might not work on a Mac Os, etc. If a font style(s) is not on the system's computer it will revert to
the user's current default style. It is best to have at least one font from each system to make sure you will get out your perceived concept to a broader audience. To what fonts work with what system, have a look at this::: http://www.webbedenvironments.com/dh...rSafeFonts.pdf

<font color="black">Antionline</font>

This will color Antionline black. You can either use words to denote which color (ie. black,
brown, blue...) or hexadecimal values (ie. #ff0000") which can get a more broad area of colors
than just words. A list of hex. values are here::: www.visibone.com/colorlab

<font size="7">Anitonline.com</font>

This sets the size of the tagged words. The numbers 1 to 7 are a reasonable range. One can also use the pt system. 1pt, 2pt, 3pt, and so on.

other basic formattings::::

To bold a word use the bold tag, ex. <b>hey</b> . The same concept plays for italizing, ex.
<i>hey</i> . The break tag, <br> will bump whatever comes after it to the next line. The
<p></p> tags do the same thing but instead of just bumping it will make whatever is between
have its own line with a line in between the next content. ex. <p>what</p>

Link making
===========
To begin a link type- <a href=""></a>

<a href="index.html">click here</a>

This makes 'click me' a clickable link.

<a href="index.html" target="aus">klick hier</a>

The 'target' attribute will open the link in the predestined option. If the target is not present it will open in a new window. The targets can either be a frame/iframe/etc. Another way to change the links target is to put the tag:: <base target="here"> before the body tag. It will change all links to the indicated target.

To change the link colors the old way::
In the body tag you have the option of LINK, ALINK, AND VLINK.

LINK- will change the main links colors.
ALINK- will change the colors of an active link
VLINK- will change the colors of a previous visited link

ex.
<body link="black" alink="blue" vlink="white">

Image usage
===========
The use and how they are implemented are key to a webpage. To begin with an image, type
<img src="">.

<img src="scheisse.jpg">

This of course will show the picture of 'scheisse:).jpg', ooo what could that be? jk

<img src="l337.jpg" width="100" height="150">

The 'width' and 'height' attribute will do exactly what they say- adjust the picture to what you
say. This is very useful for multiple resolution site designs, image rollovers, etc.

<img src="lamer.jpg" align="right">

This will align the pic right. You can set it with: right, left, center, justify. Also 'valign' can be a
life saver when making tables, or whatever. The settings can be the same as the valign but also:: top and bottom. The alignment will also help when putting text next to the image.

<a href="index.html"><img src="blingbling.jpg" border="0"></a>

This creates a link to a page using an image instead of words. The 'border="0"' makes the border that would usually appear around the image-shows that it is a link-disappear. If you have link attributes(CSS, or other), in Mozilla Firefox, and leave the border above zero or unmodified the pic's border will change like a normal link. Internet Explorer will just use the blue border and not the regular link formatting.

Basic Frames & IFRAMES
======================

Except for IFRAMEs, frames are not best for design and can really mess-up when used across
multiple resolutions(my own personal experiences). I will only go over the basics of it.

<FRAMESET ROW="50,*">
<FRAME NAME="one" SRC="one.html">
<FRAME NAME="two" SRC="two.html">
</FRAMESET>

This will create the basic layout of a top frame and a bottom frame.'ROW="50,*' creates the top frame fifty rows from the top. To change is thickness just change the number of fifty. 'NAME' is used for links to open in this frame.

scrolling="no" - will take away the ability of being able to scroll, and will take away the
scrollbar.

noresize - will prevent users from resizing the frame.

To set up a page with a top, right and middle frame follow the following format.

<FRAMESET ROW="50,*">
<FRAME NAME="one" SRC="one.html">
<FRAMESET COL="120,*">
<FRAME NAME="two" SRC="two.html">
<FRAME NAME="three" SRC="three.html">
</FRAMESET>
</FRAMESET>

The highlighted section will create the t shaped frame page. 'COLS' will do the same as 'ROW' but instead of thickness it

will do colloms <ie. width>.

Thats it...I hate those bloody frames, now on to IFRAMES.

To beginning an IFRAME type, <iframe src="">

The iframe tag is pretty much like an image tag. ALIGN, VALIGN, WIDTH, HEIGHT all
works for this tag. New attributes are NAME, FRAMEBORDER, and SCROLLING.
examples:::
<iframe src="index.html width="230" height="300" name="in" scrolling="no"
frameborder="0">

This example shows the iframe in all it's glory- 230 by 300, name is used to identify for
links(discussed before), scrolling is set to off and the scrollbar will not show up, frameborder
prevents a border to show up.

Tables
======

Tables are a staple in web design. A simple layout of a table is as follows:

Code:

<table> marks the beginning of table <tr> creates rows <td> creates cells </td> ends cell tag </tr> ends row tag </table> ends table tag

Different attributes for table are 'WIDTH', 'HEIGHT', 'ALIGN', 'VALIGN', 'BORDER',
'BORDERCOLOR', and 'BACKGROUND'.

ex::
<table align="center" width="240" height="300" border="0"
background="bluescreenofdeath.jpg">
<tr valign="top">
<td>hey</td>
</tr>
</table>

This table is aligned in the center of the page with a width of 240 and a height of 300, a border
of zero, and a background picture. The 'tr' tag has an attribute of 'valign="top"'; this will prevent
your information from dragging to the bottom.

To have multiple tables on one page is very simple. To set it up think of it as a 'table(s) inside if
a table'.

Code:

<table align="center"> <tr valign="top"> <td> <table align="left"> <tr valign="top"> <td>your info here </td> </tr> </table> <table> <tr valign="top"> <td>your info here </td> </tr> </table> </td> </tr> </table>

The highlighted tags are your container that will set up a "workable" area to put the rest of your
tables in. Your first table that is in the container 'must' have an alignment attribute. If there is
more than one than the rest will need them also. When designing for multiple resolutions one
way of toppling it is to use percentages instead of regular numbers for your width attributes.
Example:: <table width="100%"> , this will reshaped the table to fit the current size monitor.
Testing multiple resolutions can help make your site succeed(1024 *764 and 800 * 640 are the
most common). Firefox has an extension that can be beneficial to site design and making
http://www.chrispederick.com/work/firefox/webdeveloper which can help with testing
multiple resolutions and so on. Also setting up a second monitor up and by have one with one
resolution and one with another can work the deed. Most new graphic cards have a second
monitor hook-up especially with laptops, if not a second graphic card will be needed. A simple
16mb card will do and can be picked up for less than ten dollars or even free from a local mom
and pop computer seller.

Html 4.01 is the latest version of html and the last. The "newer" version is XHTML which is
merely the same thing but 'nicer'. Now every tag has a closing. Example the break tag; <br />. All
tags must be lower case and not a mixed bag of cases. Tags must not be misformed, ex. <b><a
href="#">hey</b></a> instead of <b><a href="#">hey</a></b>, which is improper
anyway so doing such a thing should not be problem.

Hopefully I brought something new and/or helpful. Here are some helpful links to learn/explore more::

Previous html tuts::
http://www.antionline.com/tutorials/search.php?q=html
html tuts/ help::
http://www.w3schools.com/html/html_examples.asp
http://www.programmingtutorials.com/html.aspx

Designing for multiple resolutions::

http://www.russharvey.bc.ca/resources/pixels.html