Staredit Network

Staredit Network -> Serious Discussion -> Html Lessons
Report, edit, etc...Posted by Shmeeps on 2004-08-23 at 19:36:02
Hehe, J/k. OK, I'll just go through some basic stuff and post more later, if you don't understand something, or I left out something, then just feel free to post stuff.

Ok, here we go.

Lesson 1:
1.1BASIC TAGS

One thing to always remember, all HTML documents must end with the Extension of .html. If you don't it'll be read as a file, and all the tags will get messed up.

The first tag you always want to start with is
CODE
<HTML>
. This enables HTML tags, so you can use them.

The next would be
CODE
<head>
which is the top of the document. I always put the
CODE
<title>
tag in there, which is what shows at the top of the screen. (IE it says Staredit Network at the top of this page.)

You must remember to end tags too, so now would probably be a good time to end the title tag. You'd put </title> to end it, also to the same with the head tag.
1.2THE BODY

Now we start the body. The body is enabled with the
CODE
<body>
tag.This is also were you add background color, text color, link color. That stuff. You'll have to use Hexidecimal to do this.
CODE
<BODY BGCOLOR="#FFFFFF" TEXT="#8080C0" LINK="#0000FF" VLINK="#660066" ALINK="#FF0000">
is the tag you use for defining colors. BGCOLOR is the background color, TEXT is the text color, LINK is  the link color, VLINK is the color of a link you've clicked on, and active link (ALINK)? Well, to be honest, no freaking clue.

You usually put your content into the body tag, then end it, then end the html tag, then your done.
1.3LINKS

To make a link, do this.
CODE
<a href="http://www.staredit.net">Staredit.net</a>

That would make the underlined text that you can click on, a link, that says Staredit.net, and links to this site.
1.4IMAGES

CODE
<IMG SRC="http://www.staredit.net/logo.gif" BORDER="0" WIDTH="437" HEIGHT="267" ALIGN="bottom" ALT="">
would be the tag you would use to show an image. This would show the image at the top of the page, but modified. Border makes a nice little border around it, width and height need no explaining, align shows where it'll be aligned too, (Like top, bottom, left right). If you use
[/CODE]<img src-"http://www.staredit.net/logo.gif">[/CODE]
instead of the other, it'll use the defaults, no border, its usual width/height, and left alignment.
1.5SOUNDS

CODE
<EMBED SRC="com_go.wav" WIDTH="150" HEIGHT="70" AUTOSTART="false" LOOP="false" TYPE="audio/midi">

This is the standard sound tag, it'll play the "com_go.wav" if the play hits the play button, with the width of 150, and height of 70. It won't autostart (Start when the user loads the page) and wont loop (keep playing). The type shows that its a sound file. These are the defaults too, but I'm pretty sure you must include the TYPE.

1.6E-Mail
CODE
<A HREF="mailto:killershmeeps@yahoo.com?subject=WTF mate?!!?! one111&body=ladfgbabgfafg">tjy</A>

This tag makes a standard link, but that launches your E-Mail client (Like outlook, or Yahoo!) with these. Mailto: killershmeeps@yahoo.com, Subject: WTF mate?!!?! one111, Message: ladfgbabgfafg. The link will be tjy. You can also use this...
CODE
<a href="mailto:killershmeeps@yahoo.com">Mail me!</a>

That will just launch the E-Mail client, with no set message, or subject.
1.7Table
CODE
<TABLE BORDER="0" BGCOLOR="#FFFFFF">
<CAPTION>Some table</CAPTION>
<TR>
<TD>a</TD>
<TD>b</TD>
<TD>c</TD>
</TR>
<TR>
<TD>d</TD>
<TD>e</TD>
<TD>f</TD>
</TR>
<TR>
<TD>g</TD>
<TD>h</TD>
<TD>i</TD>
</TR>
</TABLE>

This will make a table with a different letter in each row, <TR> is a row (left to right) while anything between <TD> and </TD> will be in that rows cell, according to what number it is (IE, first TD, it'd be the first column, second, second column)

1.8Lists
CODE
<UL TYPE="disc">
<LI>Awsome
<LI>Uberness
</UL>

UL TYPE="disc" will start off the list, while the LI will make a new line with the cool dot in front of it. These lists look much nicer than others.

1.9Other stuff
<p> Makes a paragragh, or skips a line and writes on the next one. (needs no end tags)
<br> Goes to the next line, equivelant of using the enter key in notepad. (needs no end tags)
<meta ~~ ""> For search engines, for title, description ect. (needs no end tags)
<font> for size/font change. (<FONT SIZE="+1"></FONT>)
<H#> Higher the number, lower the font size.
<b><i><u> Bold, Italic, Underline!

That's all I can pull off the top of my head, so feel free to put in more stuff.
Next Page (1)