Charas-Project

Off-Topic => Really Old Stuff => Archive => HTML & DHTML => Topic started by: GaryCXJk on September 19, 2003, 05:30:48 PM

Title: HTML: Lesson 1
Post by: GaryCXJk on September 19, 2003, 05:30:48 PM

Well, I decided to make a topic similar to Alex' "PHP lessons (http://charas-project.net/forum/showthread.php?threadid=1092&forumid=9&catid=5)", but now for HTML. Later I'll discuss JavaScript. But first HTML.

HTML stands for Hypertext Markup Language. HTML is used for websites. You can create HTML pages with Notepad, which is strongly suggested. The lay-out of a page is made with code, called tags.

I'll discuss some tags. First, let's start with the basics. I call this a template, because I always use this in other pages.

The title

The content
...

I'll explain everything step by step. First we'll begin with .... This defines that the document is an HTML page. The current versions of Internet Explorer and Netscape support pages where this tag is left out. Note that once you opened a tag ( ) you'll always have to close it (</html> ). Also, every tag isn't case sensitive (for example, and are the same).

Next, we'll go to ..., the "head" of the page. This is used as preloaded content, like the title, or meta tags, which I will discuss later. Most people leave this one out, but there is a warning. When you make a typing error, the text is shown on screen, or it can cause the whole page to mess up. With the head you can avoid such things.

Everyone knows what ... does. Everything between these tags will be shown as title. Note that style tags don't work there. You'll have to use plain text only. You can only use one title at a time.

Next the ..., the body of the page. There the content will be displayed. You can type everything in there. You can leave this out too, but remember that when you use the head tags, the text might not be displayed without the body tag.

Now let's start with the style tags. You have the three standard styles, called bold (... ), italic (... ) and underlined (... ). You'll have to be carefull if you are going to assign two styles on a text. When you opened multiple tags, you'll have to close them in the opposite order, like ..., and not ....

You can all type this in Notepad, all you have to do is save it with the .html or .htm extension. You can just open the page by double clicking on it.

When you have written a text with a hard return, you'll notice that the hard return doesn't show up in the page when opened with your favourite browser. It's not an error, it's like a precaution. A line can't be bigger than 255 symbols, so you often need that new line, but you don't want that to show up on your page. To create a hard return in the page, you simply add
.

Well, that concludes the first lesson. Next lessons will be about lists and tables, but I have to make sure everyone gets this.

Title: may as well....
Post by: shinotebasiiackh on June 25, 2004, 04:07:29 AM

OK... it seems that Gary will not grace us with his knowledge of HTML.
because im bored and my chicken-pot-pie is cooking, i will be filling in. eckscoos the typos.

ok class, please open EditPlus, take out a NO. 2 pencil, and we will begin.

a table is a way of displaying information. example: Rob, Bob, and Tod all like running they want to see who can run the longest. over three races they ad up their time. Rob got 23, 12, and 21 minutes on the three races. Bob got 31, 1, and 15 minutes on the three races. Tod got 20, 12, and 17 minutes on the three races.

ok. now i can show you how to display all that in table form.

first off we have the tag. some of the attrabutes that are commonly used for the

tage follow: height="..." width="..." border="..." cellpadding="..." cellspacing="..." and align="...".

the width tag determins the width of the table. the height tag determins the height of the table. the border tag determins how many pixels are on the border of the table.. it would be a good idea to set it for 0 if you dont want a border... some browsers set the default as 1. the cellpadding tag basicly puts and invisible border around the table cells. i'll tell you what a table cell is in a moment. the cellspacing tag shows how much space there is between table cells. the align tag shows where to put the table. exe: align="left".

alrigt... finally on to the actuall learning.

after the

tag we would have the tag. shows that there is a table row. after we have

shows us that there is a collum, or cell, within the row. so a little example would be this:

boo

booboo

holy phuq!

this code would show like this:

boo
booboo
holy phuq!

thats basicly how a table operates

so now i can show you how you could use a table to display information!

Names	Rob	Bob	Tod
Race #1	23 mins	31 mins	20 mins
Race #2	12 mins	1 mins	12 mins
Race #3	21 mins	15 mins	17 mins
Outcome	56	47	49

thats the basic thing on tables. for now i must go and return things to the movie store. i'll tell you about lists in a moment. (i like them better than tables)

P.S. try the code on an HTML editing program to see the results...