Originally posted by septembern

---

Let's not let this go on any farther... I got a little carried away...


I don't want this to turn into anything big...

---

Ya coulda fooled me... But thank you Lol.

Now I'd like to request that you edit your earlier post (delete what you copy/pasted from w3schools) and let me continue with this "class" Lol that I created out of boredom/frustration. Please.

Okay, I deleted it

I'm glad to see this worked itself out while I was away and yes Zeld the earliar comment I made was directed at septembern (I would have quoted it but I'm on my psp atm ).

Let me establish some rules for this thread.

While this is your "class" Zeld, you can't be telling people what to delete from it. It's still on this message board, which means that it's open to anyone to post what they'd like; if something is out of place, the mods will take care of it.

If someone is posting things that you don't like, you can talk to them personally, but don't use the thread.

Also: Don't post 2 lessons in one, it makes for a very long to read post. Also, I'm making a rule of only posting 1 lessons a day or more apart. Just to give a chance for people to discuss and ask questions and whatever.

I look forward to your next lesson. I like this thread.

Septembern and Zeldisaster arguing over HTML.

Priceless.

L.K. : talk about mixed signals... Lol but I understand. It won't happen again. Scout's honor (though honestly I was never a scout Lol but you get my point)

Anywho...

Quick Note: I'm still going to continue using the {code} as I've been doing for the past lessons. Nothing will change. Just switch { for < as you've been doing.

Lesson Four: Line Breaks and Moving Text

Quick Note: I understand that the last lesson promised that this lesson would include a topic on lists. However, if I included lists into this lesson it would make for too long of a post. I'll cover it on the next lesson though, but as for now...

I'll start out with the easiest topic of the two: Line Breaks

Line breaks translate out to just a few pixels bigger than what you get from pressing the Enter key on a typical document. Or at least thats what it looks like to me Lol. It's one code, put in the middle of any two lines of code that you wanna seperate: {br /} It's that easy. Just type this code {br /} anywhere you want to insert a break. But make sure you type space before you put the / in that code otherwise it won't work.

Quick Note: This code is special in which it does not need to be closed with another {/} code. The code itself is closed and will work the second you type it in. All it is is four characters inside the code: {br /}

Moving on. To moving text. Lol

More easy code, but not as easy as line breaks. Remember how you added variables to the {font} code to make different effects? Now's time to learn a real effect:

This should be moving while you read it

That's called a marquee. You can easily make text move by the {marquee} code. But putting it at the beginning isn't all you need. As with every other code, you have to close it with {/marquee}.

Try that out, and you'll notice that your text starts out at the right, moves to the left, disappears off screen, then reappears at the right again, in one continuous motion. This is a standard marquee (like they use in movie theaters), but you can add more code to it to make different marquee effects happen.

My above code looks like this written out: {marquee behavior="alternate"}This should be moving while you read it{/marquee}

Doesn't the setup look similar to what you did with the {font} code? All I did was add a variable and it altered the entire effect. But there's more than one thing you can do with the {marquee} code that makes it better than {font} even though the setup is the same. Mainly because you can't simply use {font}random words{/font} but you CAN use {marquee}random words{/marquee}.

Here's a list of a few different marquee styles:
Simple Marquee
= {marquee}Simple Marquee{/marquee}
Marquee Behavior="Alternate"
= {marquee behavior="alternate"}Marquee Behavior="Alternate"{/marquee}
Marquee Behavior="Slide"
= {marquee behavior="slide"}Marquee Behavior="Slide"{/marquee}

Quick Note: The slide effect makes the text stop after one pass across the screen.

You can further add more code to the {marquee} to control things like direction and spacing. For example:
You should only see a little bit of this at a time
That marquee looks like this written out:

{marquee direction="left" width="10%"}You should only see a little bit of this at a time{/marquee}

Now, even though you can change the direction of the marquee to Direction="right" this is not recommended since Left is easier to read. I'll prove it to you:

This text should be almost impossible to put together since it's going the wrong way

That code looks like this: {marquee direction="right" width="10%"}This text should be almost impossible to put together since it's going the wrong way{/marquee}

See? Impossible to read... If you want the text to go left like a typical marquee, just leave the entire Direction variable out of it. Just keep it looking like this: {marquee width="50%"} or any percentage you want. Then type your words. Then close with {/marquee}.

Alright, so here's a list of those two extra variables (for those of you who like lists better) Lol:

Marquee Direction="Left"
= {marquee direction="left"}Marquee Direction="Left"{/marquee}
Marquee Width="50%"
= {marquee width="50%"}Marquee Width="50%"{/marquee}
Marquee Height="50%"
= {marquee height="50%"}Marquee Height="50%"{/marquee}

Ok, so that's all I have for Line Breaks and marquees. Anyone who can give more code for marquees, please do so. Anyone who can find something I missed for Line Breaks, please do so.

Next Lesson: Lists and Links

Originally posted by Dragon master

---

Septembern and Zeldisaster arguing over HTML.

Priceless.

---

lol, I just hope that isn't an insult

Originally posted by septembern

---

Originally posted by Dragon master

---

Septembern and Zeldisaster arguing over HTML.

Priceless.

---

lol, I just hope that isn't an insult

---

Lol! I would say 50%

Oh nice, now everyone is using marquees and blink and the likes in their layouts and such.

KNUCKING GREAT!!!

DM: That was kinda the point of this thread, to show people cool stuff they could do...

Well, might as well keep it going then, now that I know people are ACTUALLY reading and using these tools for what they were intended. Lol

Lesson 5: Lists and Links

Ok everyone's seen the occasional word every now and then that's written in green instead of white. Plus you can click on the green words and they'll open up a new window and take you to a different webpage. Now's time to figure out the secret to making this happen yourself.

The trick: {a} but more specifically, {a href=""}insert word here{/a}

The wierd word in there (href) means Http Reference just to let you know, which is what you need to put into the quotes that I showed you. However, the only issue is that you ALWAYS have to put http:// in the URL of the site you want to link. You can't just use the "www", you have to put "http://www" cuz it's the only way it'll work.

My above word "green" was actually written like this: {a href="https://www.vizzed.com/vizzedboard/"}green{/a}

Quick Note: You also have to put a / at the end of the URL as well, as I did with the word "green." The technical reason for this is because that / closes the URL (as with all other code) Without it, your browser may open up two pages at once or some other inconvenience...

Glitch: Comet Chat Blank Links

Here's a fun little thing to try, but maybe they'll remove it soon... Next time your in the chat bar or chatroom with your friends, try typing in 3 dots (...) and then almost ANY two-letter word (such as he, it, in, is, on, us) and watch what happens. Comet Chat mistranslates it as a link, but clicking on it takes you to a blank page.

So if you type in ...it...in...he...is...us...on...up...us...an... or anything even close to this, you're gonna have a huge link on your hands... Lol

Now onto lists...

Lists are gonna be the first "form" I'll teach you, since it's the easiest to write out. Lists don't do any special effect, but it does make everything neater and nicer to look at. For example:

What I did today after I woke up:

• Got out of bed


• Brushed my teeth


• Took a shower


• Watched tv a bit


• Went to friend's house

Easy as that. Now doesn't that look mildly professional? Lol

That was done with the {ul} form, which means "unordered list." Unordered is the reason why you see dots to mark each point on the list, whereas if I used {ol} or ordered list instead, those dots would be numbers instead.

Now, the easiest way to teach lists are to show it to you, then break it down into its main points, so here's the above list (as long as it is...) written out:

What I did today after I woke up:
{ul}
{li}Got out of bed{/li}
{li}Brushed my teeth{/li}
{li}Took a shower{/li}
{li}Watched tv a bit{/li}
{li}Went to a friend's house{/li}
{/ul}

That was a lot of code!!! So, now it's time to explain it all: First take a look at the beginning and end of all that code and you'll see that there's where I put the {ul} and {/ul} codes. Setting it up this way is called a form, and the computer treats everything inside as one thing (a list in this case). However, inside every form, you need objects, which is why I had to use {li} to specify to the computer what I wanted to be put into the list. If I didn't put {li} and {/li}, the computer would've treated it as if I had just pressed Enter instead of putting it into the list (if that makes any sense Lol).

So make sure you use {li} and {/li} for EVERY single point that you want to put into your list, even though it may end up being a lot to type (depending on your list).

As short as that was, that pretty much covers it all (for links and lists). And I think now's when I end this lesson... If anyone else wants to add to it, go right ahead, but until then...

Next lesson: Tables and some basic interactive content (for your layout or solo web design project)

Check out my profile and you'll see where I wrote My Hobbies and the Pop Quiz, which give you a basic foreshadowing of what the next lesson is...

DM's gonna be so mad when he sees everybody using tables and dropdown menus and stuff like that after the next lesson... Sorry DM! I'm just teaching HTML, don't hate me!!! Lol

Nice lesson Zeldisaster
The funny glitch about chatrooms(...gr...it) is something that I've also found out by myself in the general chatroom accidentally. It was so weird and funny.
I can't wait for the next lesson
By the way, your new signature is better than the old one.

Yay! Next lesson your teaching something I taught you! Haha. And awesome. I thank you for teaching me something new. And noelia thanks for the compliment haha. I made it for him.

Do you know much about CSS? (Including stylesheets and styles within HTML tags.) I do and I was just wondering. With CSS you can do a lot of neat things as well.

Originally posted by Zeldisaster

---

DM's gonna be so mad when he sees everybody using tables and dropdown menus and stuff like that after the next lesson... Sorry DM! I'm just teaching HTML, don't hate me!!! Lol

---

If you didn't understand my point, then I'll make it clear for you:

Blink and marquees are f***ing ugly and should be abolished.

Now if you manage to teach some tables and to use them well, then fine.

But I highly doubt that.

Originally posted by Dragon master

---

Blink and marquees are ugly and should be abolished.

---

Hate to point this out, but I never taught blink. I may have blink in my profile, but none of my lessons have blink in them. I forgot about it when I was making the font lesson (I hate being rushed Lol)

Though thank you for reminding me, you've just written part of my next lesson for me.

Originally posted by dramabethie

---

And noelia thanks for the compliment haha. I made it for him.

---

I didn't know it...so I have to thank you, dramabethie, for the great work,lol.

Lesson 6: Tables and Basic Interactive Content

Now, like lists, tables are just another way to organize information, but depending on how detailed your gonna try to go, they can get a bit complicated. First off though, let's talk about a very basic table. And for that, you only need to learn three new codes: {table}, {td} and {tr}.

{table} is the code that sets it all up. Setting up this {table} code the same way you'd set up a list is what translates your data into the proper structure.

{td} stands for Table Data, meaning everything inside every block cell in the table. The more of these you have, the more that's gonna be in your tables.

{tr} stands for Table Row. The more of these that you have, the bigger your table will be (when combined with {td} code above)

Fusing these three codes together are what creates a table, but how can you accomplish this using only three codes? Well, when you set it up, it may remind you of both a list and a form.

This	is
a	table.

This is a very basic four-cell table, though it isn't incredibly easy to set up. In order to properly create a table, you might wanna think about it like you're keeping track of two different lists at once (a vertical list and a horizontal list) and that's why it can get complicated. The table above was set up like this:

{table border="1"}{tr}
{td}This{/td}
{/td}is{/td}
{/tr}
{tr}
{td}a{/td}
{td}table.{/td}
{/tr}{/table}

This looks just a little complicated, doesn't it? Lol. First off, you'll probably notice the border="1" code in there. This number can be set anywhere from 0-7, depending on whether you want a border (using 1-7) or no border at all (using 0). Different border styles make your table look different. But now let me draw your attention to the {tr} codes in that table. The {tr} code looks just like a list setup (remember the {ul} code?) which mean the {td} codes are similar to last lesson's {li} code. However, if you only had one {tr} code set up, your table would only be one row, like this:

This

is

one

row.

Thus, my first table I showed you has two {tr} code lists inside of it. Just simply put one {tr} code after the first {tr} code's closing code (the {/tr} code) and it will be official. Lol. Now this is complicated to explain, so just look at how a basic row is set up and then you can do this as many times as necessary for as many rows as you want:

{tr}
{td}{/td}
{/tr}

This is as basic as you can get if you wanna remember tables for later use. Just remembering this will help you create any amount of basic tables you want, making it look like a Microsoft Excel spreadsheet. Lol. Remember: each {tr} code and {/tr} closing code defines how many rows you want. Each {td} code and {/td} closing code defines how much information you want in each row.

Quick note: DO NOT CONFUSE THESE CODES. The {tr} comes BEFORE the {td} code. If you switch those codes, it'll look the exact same as if none of those codes even existed in your table.

Let's see if this works, a 6x6 table:

This	is	a	six	cell	table.
is
a
six
cell
table.

Hey, it worked!

Another simple table, which you can do after you mess with tables long enough. Lol

Now, onto basic interactive content, which unfortunately can only be viewed in a Web Page or on your Profile, so if it sounds interesting, put it in your profile to try it out.

Quick Note: Each one of these will have a space and a / at the end. You do not need to close this code in any way, you simply need to write it into the place you want to put it.

First, the submit button, which you can actually change the word Submit to anything else you want, and the button will change to fit:

{input type="submit" value="Submit" /}

If you change the value variable to anything else, the word Submit on the button will change as well (for example, if you change it to value="Hello" then the Submit button will be a Hello button instead. Lol)

Next, the Checkbox/Radio buttons. You can change the input type to either "checkbox" or "radio" to change how the button works:

{input type="checkbox" /} : Put whatever you want to decide here.

But you can put more than one, to make a sort of checklist:

{input type"checkbox" /} : Item on list
{input type"radio" /} : Item on list
{input type"checkbox" /} : Item on list

It's that easy. Oh! And there's also ways to type in personal info and the like, such as your first name:

Name:
{input type="text" /}

You can even change the input type to type="password" instead and watch what happens. Lol

Simple as that. Try it out!

Ok, so these are all the simple ones, now for the famous dropdown list!

{select}
{option}This is the first option in the menu{/option}
{option}Second option{/option}
{option}Third option{/option}
{option}Fourth option{/option}
{option}Fifth option{/option}
{/select}

That's a more advanced list when you write it out. Same concept as any other list, just different words. Instead of {ul} you write {select}. Instead of {li} you write {option} and then close all of those codes as well.

Quick note: Never forget to close codes that must be closed. Just cuz a few codes don't need it, doesn't mean you can forget about closing code!

So I think that's it for this lesson. I think I covered enough for you all to manage for a while. Not that many lessons left before I gotta start teaching layouts, so just bear with me until then. There's still a lot of stuff yet to cover before beginners to this will understand layouts though, so I wanna make sure you're all ready for it when it comes later on. But for now:

Next lesson: Tables inside tables, Blinks (short lesson), and signature coding (very basic, if you wanna do a quick one yourself with a picture off the internet)

Hope the next lesson works!

Hate to do this, but I haven't posted an update in a long time in this thread, nor do I plan to for a long time.

DarkHyren or somebody: Close for now please! I will talk to a mod when it's necessary to re-open it in the future.

Crap, that was an edit. The summon doesn't work in an edit. Oh well. Somebody close this!