HTML FOR BEGINNERS HTML is a very simple computer language

Part One by Kathana

HTML is a very simple computer language. It stands for HyperText Mark-up Language. It is the language used to write webpages, such as Dragonmount. This course is designed to teach you the basics of HTML, enough to build basic webpages and look super spiffy on message boards. The first lesson will explain how to use HTML and where to use it. The second lesson will cover text effects and links. The third lesson will cover backgrounds and graphics. The fourth will show you how to put it all together into a page.

This class is designed for some one who has absolutely NO idea what HTML is or how to use it, so it may seem a bit slow at times. Trust me, its better this way. Its also recommended that you copy and paste these posts into a Word file so that you can get to them later. This is a TON of stuff to memorize, especially if you use it infrequently. Keeping the posts will allow you to refer to them later. If you ever wish to publish them, please email me at [email protected]Your homework will be to accurately duplicate what I demonstrate in class. Since the DM messaboards supoort HTML, you just have to post the code into the body of your post. Rather simple, huh? You won’t be able to simply copy and paste the codes. In order for me to post code so that you may read it, I have to make changes to it. I’ll be adding in extra spaces at certain points.

I’m going to start off slow today by showing you what HTML looks like and how I’ll be presenting it to you. A string of code looks basically like: < A HREF=mailto:[email protected] >[email protected] . That’s the code I used to make the email link above. It looks kinda complicated, but its very logical. It starts with a bracket “<”. Then there is some instructions for your browers, which is the software you use to view webpages. (I’ll elaborate on browsers upon request. I can’t answer most technical questions though, just give general differences.) After that is another bracket “>”, which closes that section. The line outside of any brackets is what will appear in your browser. The last set of brackets closes the code. Its important to close your brackets. Otherwise, everything following that first set will become a link.

Brackets are important. They let your computer know that everything within them is instructions for displaying a webpage. For every command in HTML, there is usually a matching pair. Remember the code I showed you before? It also works with smaller strings, such as italics . Omitting the last bracket set will mean that all your text will be in italics and that can annoying. .

Another good rule is ALL CAPS. You may have noticed that I put all my HTML in caps. I’m not trying to really ram it all down your throats. Most HTML commands can be recognized if they are typed in lower case. However, they are easier to find when your editing if you make them stand out like this. It’s also probably a good idea to put spaces between sections of code. They won’t be oicked up by browsers and it makes it easier to find what you want to edit. I’ll go over this again later when I explain how to put together a page.

Your assignment tonight is just answer a few questions, so I know you read it. * g*

very small type

, or colored text. These effects are very simple to produce, but look very cool.

Italics, bold and underling are probably the easiest. Simply use the first letter of each word.
Italics , Bold , Underline , Remember, I’ve added spaces to my HTML so it will be visible on the message boards. Those spaces will have to be deleted before it will work.

Text sizes are also very simple. Actually, I’m going to be showing you heading sizes, which are slightly different from font sizes. The difference is minimal and I wouldn’t worry. * g * Heading sizes are on a scale of one through six, with one being the largest and six being the smallest. The codes look like this:

Largest

Larger

Large

Small

Smaller

Smallest

< H6 >, < /H6>Remember to delete those spaces!

Colors involve a slightly longer string of code. The quotation marks are very important. If you leave those out, your computer will not understand the instructions we are giving it. When you use this code “whatever will be replaced by either a hex code, or the name of the color.

Colors on the internet are assigned a hex code. Without going into too much detail, this simply indicates the amount of red, blue and green used by your monitor to make the color. Hex values look like “666666”. By putting different values in, you can make different colors. A complete listing of hex values can be found at . Or you can experiment on your own.

Alright, it seems like we’ve covered a lot today, but not really. Most of this is pretty simple stuff. Tables, frames and other more advanced techniques will REALLY hurt your head. * g * To wrap up, we’re going to cover another really simple technique, linking.

Linking is how we get around on the internet. It’s a special text effect that allows you to travel from one place on the ‘net to another. Links are the blue underlined text that can be found in this lesson. You can also make a graphic into a link, but we’ll talk about that next time.

The code for a link looks like < A HREF= “http://www.dragonmount/whitetower “> The White Tower < /A >. Lets break this down for ya’ll. < A HREF= “ http://www.dragonmount.com/whitetower “ > This is telling your browser where to take you. Once again, the quotes are VERY important. Without them, you’ll get error messages or dead links.

The text “The White Tower” is what you will see in your browser. It will be blue and underlined unless you specify otherwise when you set up the page. I’ll explain more about that later. Blue is just the default color for most browsers. < /A > closes the code out. If you forget that, everything will look screwy. ( Yes that is a technical term * G* ).

To make a mail link, use < A HREF=” mailto: “ >. This will direct your computer to open up your email client. If the viewer doesn’t have an email client set up, it won’t work. ( You can ask me about what the heck I’m talking about. I’ll answer any questions I can.)

Okay, to review, I’ve discussed italics, bold and underlined text. We’ve gone over heading sizes, font colors and linking. If anyone is having trouble with any of this PLEASE ask me questions. It took me months of fiddling to figure this stuff out and I was constantly pestering my knowledgeable friends to tell me what I was doing.

Only the last paragraph of or so of this is anything other than me going on and on and on. So you know.

HTML is markup language. I'll explain it as I've found it works: In stuff like Word, you can center stuff by hitting the little button that centers things, and from then on, whenever something that understands the same language Word uses to talk about that document makes your page, it will put that part centered. Your text is there, yes, but when you save it, it also saves additional data saying stuff like what words you wnat centered and what words you want bolded.

HTML is the same thing, but much simpler, so that you don't have to pay a lot of money to buy a program. Word saves the data talking about placement in the file as extra stuff you never directly see. When you create html, though, you can write the direct "data" in such a way that you can see it as you do it, yet when a browser gets the same file, it will treat it the way Word treats .doc's: It will only draw the effects, not the actual stuff talking about what effects you want to have happen.

In html, it is incredibly easy to stick in that extra data. It does so by tags. You can put a tag, which whenever a browser sees that tag, it will know to, say, put an image there, or to center some text.

For this class, you will need:
A text editor
In windows, click your start menu, go to accesories, and click on notepad. That's what I recommend to use at first, starting basic and simple.
For mac users, use simpletext.
A browser
use either Internet Explorer or Netscape, it doesn't matter.

How to make HTML, in a general sense:
You will be writing everything you need in notepad. What you write is no more "magical" or complicated then if you were to write a story in notepad and print it or anything like that. So that browsers will know that you meant it to be HTML, though, you will need to save it with a .html extension. This means, you will need to click save as when you save it, drop the little selector to say "all files" where it asks about file type, and then when you type it, type filename.html.

You can then look at this by going to file then open, and if you've done it right, it will not necessarily look like what you just typed in notepad. It will have substituted out your tags for what you want.

The important part:
The Dragonmount boards accept HTML tags. This means that if I were to type in the tag to show you guys an image, it wouldn't show that tag, it'd try to show the image, which would be totally unuseful. I can also make the symbols, the brackets, used in tags appear, but that takes me like 4 awkward keystrokes, and I would be unable to edit my posts without fixing them over and over again. So, I have a work around to this.

Whenever you see [ I mean <, and whenever you see ] I mean >. So I will say, [img src="http://www.etc.com/etc.gif"], but if you wanted to do the same thing in html, you would have to type <img src="http://www.etc.com/etc.gif"> And don't forget, or you'll be totally confused.

So far I've said plenty about tags, but never told you what makes up a tag. This post is about that.

The majority of stuff on a web page, and in any sort of document, is just text. content. If you're doing a webpage on Pokemon, most of the characters on the page will be about Pokemon. As such, for HTML, your browser will assume that you are doing content which you want to appear as is unless you tell it otherwise.

The way to tell your browser that what you are doing is something it will should pay especial attention to is to enclose it in a > and a < (remember from now on that [ and ] are the same thing as I just said, for all intents and purposes). If I put [Pikachu is annoying] the browser would try to interpret that as something I was telling it to do to the webpage, and the words PIkachu is annoying would never appear on the page at all. If it didn't understand what I was trying to tell it, it'd just ignore it.

There are, of course, a set number of things you can put between the [ and ] that the browser will understand. That's what th emajority of this class will be, teaching what the different tags it can understand are.

There is a convention with this i should mention here. There are some tags that talk about one instance of something. Say if you want to put an image somewhere, there is a tag that goes where you want the image. Others talk about spans of the page, though. Say, if you wnat to bold some text, you need to say where to start bolding and where to stop. The normal way HTML says to stop something is with a / in the tag. Bolding text would be: [b] this is bolded [/b] this is not.

Attributes:
Okay, say I was talking about a division of text... I'll get inot this later, but you can mark off a division by saying [div] This is in the division [/div]. Well whoop te doo, that's a division of text. Who cares, if you don't do anything with the division? Many many tags have different attributes you can add to them. The difference, to me, between a tag and an attribute is you can have a tag just sitting there, and while it might not be very interesting, it'd at least mean something. An attribute, though, can't just be left along.

tag = noun or verb
attribute = adjective

So if I wanted to do something interesting with our divded off text, I could do [div align=center color="red"] this is a division[/div] and that part would be centered and red.

There is one big difference between doing sigs in DM and doing an entire webpage, and that's the html and head tags. Just ask Tanel. *eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeg*

Okay, these tags are ones you should have in every webpage.

tag:
[html]
Your page and etc.
[/html]

attributes:
none

explanation:
The html tag basically says that you are doing html, and that the stuff inside of it would be treated as html by a browser. Yes, the .html at the end of the file you did does say a lot about the fact that you are doing html, but this is used as well. You can often just leave these out, and the browser will assume, but it's a bad habit.

tag:
[head]
Various header stuff
[/head]

attributes:
none

explanation:
The head marks out a part of your html page, the parts you don't see. Basically, if it is in the head tag, you won't see it's actual effects on the page itself. Not all that much stuff goes in it, usually, but some stuff does... For example, the next tag, the title tag.

tag:
[title] This is my stupid shut up April example page[/title]

attributes:
none

explanation:
This makes the words up at the top of the page appear. The ones not even in the page itself. For example, right now, when I look up at the top of the browser, I see `Dragonmount`. They did that using the title tag. If I want to bookmark a page, the default name is the title of the page, as well.

tag:
[body]
The body of the page
[/body]

attributes:
OMG, soooooo many. Where do I start?

text="#000000"
-This changes the color of all text in the page. Oops, I forgot to explain colors... I'll do that next post, k?

vlink="#cccccc"
-This changes the color of all visited links.

alink="grey"
-This changes the color of all active links... Don't ask me what an active link is, though, I don't think I've ever seen one.

link="red"
-This changes the color of all links in a page.

bgcolor="white"
-This changes the color of the background color of a page.

background="background.gif"
-This specifies an image to act as a background to a page.

explanation:
The body marks out the important stuff. If it appears on the page, it'll be between the body and end body tags.

lol, and now that I"m done, I've realized how stupid putting explanation after attributes was. I'll change that next lesson.

So, this is how every webpage you do should prolly start out:
[html]
[head]
[title] My random generic site [/title]
[/head]
[body]

This is the important stuff, like a description of my favorite tree.

[/body]
[/html]

First, line breaks and spacing.

In word, you just hit return or the space bar, but html doesn't quite accept that. For spacing, it will accept the first space for free, but then it will ignore them. So, in html "a b" will look the same as "a b" when you look at it in the browser.

Html won't display line breaks at all. You can put a bunch of returns in your code, and should, to make it neater, but the browser will ignore those. The most common tag is
for a line break, but there are other tags that will move stuff down too.

colors:

There are two ways to specify colors, in all the tags that involve colors. You can do it by name, like color="papayawhip" (yes, that is a named color), or by hexidecimal code like color="#000000" (that's black). You really should do hexidecimal whenever possible, because there are only so many named colors, and also because some older browsers don't know the same named ones as others, or really off the wall browsers don't know any named ones at all.

Here, I'll find you a color chart url... http://hotwired.lycos.com/webmonkey/reference/color_codes/ That place isn't so great, remind me and I'll find a better one another day.

Refering to files:
In all tags where you refer to files (images, most of the time), there's a system: If you are talking about on a different server, the first thing you put it http:// If you are talking about in the same directory, you can just say the name of the file. If you are talking about in a directory higher than the one you are in, you need to have a .. (two periods). And if you are talking about a directory that is lower or you are talking about the file itself after going up, you need a /

Examples:

An image on another server:
[img src="http://www.attwc.com/dollandsword/sigs/dollandsword.jpg"]
This is an image on another server (http://) and the server is www.attwc.com. Once on that server, you're going down (/) into the dollandsword directory, then down (/) again into the sigs directory. From there, you're using (/) the dollandsword.jpg file.

An image on the same server, in teh same directory as what you are working on:
[img src="dollandsword.jpg"]
Isn't that so easy?

An image on the same server, but in a way different directory:
[img src="../mystuff/sigs/dollandsword.jpg"]
The key to this is to think of it in terms of being in the smae directory as your html and needing to get to the other directory. From your html you are going up (..), but from there you are going down (/) again into another directory called mystuff, and then you're going down (/) again into a directory called sigs. Your image is in that directory. so you use dollandsword.jpg with /.

I'll just have at here, in this post.

Oh, btw, with attributes. You can totally mix and match. Add as few or as many as you want. Like, all of these are valid:
[img src="etc.gif"]
[img src="etc.gif" border=0]
[img src="etc.gif border=0 width=600 align=right]

tag:
[b] text [/b]

explanation:
This will bold the text inside of it.

attributes:
none

tag:
[i] text [/i]

explanation:
Italicizes text.

attributes:
none

tag:
[u] text [/u]

explanation:
Underlines

attributes:
none

tag:
[br]

explanation:
Creates a line break. You can stack them, do like 10 of them if you want a really large space between two things.

attributes:
none

tag:
[h1] text [/h1], [h2] text [/h2], etc., I think up to six.

explanation:
Creates a heading. a [h6] is the smallest heading, a [h1] is the biggest. Basically, it's like big text, bolded, with a couple of line breaks afterwards.

attributes:
I don't think there are any....

tag:
[tt] text [/tt]

explanation:
Umm, it looks funky

attributes:
none

tag:
[blockquote] text [/blockquote]

explanation:
This will indent by a bit on both sides of the text. Say, if you don't think that the sides are large enough on something, that it'd look better more towards the center of the page, do these. You can stack them, too. [blockquote][blockquote][blockquote] Much more farther in text [/blockquote][/blockquote] some only slightly far in text. [/blockquote]

attributes:
none

tag:
[ol]
[li]text
[li]text
[/ol]

explanation:
A list. IN this case, an ordered list. Every place you put a [li] it will create a new list item, setting it off with a few returns and an indent, and also putting something before it. For an [ol] it "orders" them with number. For an [ul] it leaves them "unordered" and puts bullets.

attributes:
umm... I don't know any of htem :/

tag:
[font] text [/font]

explanation:
Yes, well, this just sort of says that you're talking about the font in that span. The important stuff is in the attributes, for this one.

attributes:

color="#000000"
changes your text to that color

size="+1"
changes the size. You can either say a direct size, I think one through seven (seven being biggest) with size="4" or whatever, or you can just say one size smaller with "-1" or two sizes bigger with "+1"

tag:
[hr]

explanation:
Makes this cool line thingy.

attributes:

width=200
This says how far across the page it can go. It can be in absolute values of pixels, or it can be percentage of the page with width="50%"

noshade
It just makes it look different. Umm, you'll have to experiment, it's hard to describe.

size=10
Sets the height of the line.

Next lesson, anchors (links) and images, maybe formatting depending on how tired of this I get.

I'm rather tired, but I'll try to get through as much as I can before I sleep.

tag:
[a] text [/a]

explanation:
This is an "anchor". An anchor either, well, anchors a bit of something on the page, or it refers to something else anchored. Did that sound familiar, hopefully? This is a link. It is either somehting you can click to go somehwere, or the place you go when you click on a link. Which is determined in the attributes.

attributes:
href="filename.html" or href="http://url"
ooooo, now it makes sense? [a href="whatever.html"]Go to whatever[/] would make a link to whatever. href stands for hyper-reference.. I don't know whta that means, though. I do know that reference does sort of make sense in my mind with something talking about another place, so it does help me remember.

name="there"
You can also name an anchor, so that you can refer to it later. You will have to precede a reference to an anchor in the same page with a #, though. Sooo....
[a href="#there"]Click here to go down[/a]
would take you farther down the page to whereever you put:
[a name="there"]Welcome to down here[/a]

Hrrrmm... here's a question which i seriously wonder... Would [a href="1.html" name="toone"]To One[/a] be a link you could click on to get to 1.html, and would it also be possible to get to that place on the page with [a href="#toone"]la[/a]??

tag:
[img]

explanation:
This is for images. Wherever you stick an [img], the browser will stick an image.

attributes:
src="file.gif"
This is the important one. The browser won't be sticking an image anywhere unless you specify an image, and you do that with this tag.

border="2"
There is a one pixel clear border automatically placed around all images. It keeps text from running up against them and such. Unfortunately, when you make an image into a link (by doing [a href="place.html"][img src="placeimage.jpg"][/a]), the border won't be invisible anymore. It'll turn the color of links, and that can look just ugly sometimes. As such, the borders most useful value is border="0", which will erase that ugly blue line.

width=200
This says how wide the image is. This will sort of "save space" for the image on a page for those who have slow connections and would like to read the text before the image is done downloading. It's also helpful with tables and stuff sometimes. When in just numbers, it's in pixels. You cna also do width=30% to specify by percent of the screen or space. You can make an image any size by playing with its width and height, btw, but don't do it... It will still take just as long ot load, and if you try to make it larger, it will look all grainy and funky.

height=100
same deal

Argh, what should come next? I'm too tired for frames or tables... What else is there? Oh well... tables hopefully coming soon..

Oh, in the meantime, if you're bored:
Full Moon Graphics
Moyra's Web Jewels

Those are the things that I wish I could do. *grins* Also, you could get graphics if you wanted to make a page, I could help you figure out how to use the templates.

How to move stuff around a page short of tables is the basic ghist of this post.

tag:
[br]

explanation:
It is a line break. It will end one line or create one blank line. Basically, where you'd hit return in Word, you'll use this tag.

attributes:
none

tag:
[p]paragraph[/p]

explanation:
This tag blocks off a paragraph of text. It will create two line breaks at the end of the paragraph, as well.

attributes:

align=center (center, left, right are the choices)
This will center, right align, or left align, the block of text.

tag:
[div]text or image[/div]

explanation:
A division just refers to a division of the page. It will add a spare line break at the end of it, btw. It's main use is in the attributes.

attributes:

align=center (center, right, left)
Aligns the contents.

I think there were more attributes, but I can't remember them right now...

tag:
[span] text [/span]

explanation:
This is like the [div] tag, except it won't add that line break at the end.

attributes:
same as [div], to my knowledge

Basic Tables:
HTML will never do exactly what you want it to. It's infuriating, but it's also what makes it so simple. Tables were originally created to serve in the capacity I'm about to show you, but people eventually figured out you could do a lot more with them. I'll do an example of a more complicated table soon, and give you an idea of what is possible with them, but for now you can get the basic incarnation.

The table defines an area that is a table, then defines its rows and columns. Here, it works like this:

[table]
[tr]
[td]Row 1, column 1[/td]
[td]Row 1, column 2[/td]
[/tr]
[tr]
[td]Row 2, column 1[/td]
[td]Row 2, column 2[/td]
[/tr]
[/table]

The [table][/table] define the entire area of the table. The [tr][/tr] will define a row of a table. The [td][/td] define a table cell (so, if you have two cells in a row, you obviously have two columns).

Row 1, column 1	Row 1, column 2
Row 2, column 1	Row 2, column 2