Ok, this is the thread for you to discuss any HTML tricks that you all learned and to maybe learn a few more! Every two weeks I'll show you all a few things I learned from studying HTML and I'll hope this thread also teaches newcomers to HTML how to make things like your profile look amazing!

Note: Throughout this thread you will see me use symbols like { and } at the beginning and end of each code segment. These symbols represent the (<) and (>) codes you will see in actual commands. The symbols are put in place in this thread instead so that the code will be readable to you and not the computer. Example: instead of this I'll have to write {u}this{/u}, since how i wrote it before was translated into an underline against my will haha.

Lesson 1: Text (One-letter commands)

Altering text is easy, because all you do is add the proper code at the beginning and end of your words to give it the effect you want.

For example, the title of this thread was given a strikeout command, which is written with the {s} code. In order to make some of your text slashed like that, you'd have to put the {s} code at the beginning of your word/sentence and then put {/s} at the end of your word/sentence.

So it would look like {s}this{/s}, or after you switched { for < like I said at the beginning, it would look like this.

Quick Note: for every code you decide to try, there needs to be a /code to activate it. Meaning, for every {code}, there needs to be a {/code}. This tells the computer to close the code and start reading what you want it to do.

But there's tons more commands than strikeout. But once you learn strikeout, you'll be able to learn more and more commands as well (like tables and layouts and stuff, but thats another lesson)

Here's a list of all the commands you can try after you master strikeout:

strikeout = {s}strikeout{/s}
underline = {u}underline{/u}
bold = {b}bold{/b}
italics = {i}italics{/i}
quote = {q}quote{/q}

paragraph

= {p}paragraph{/p}
The paragraph command starts a new paragraph just to let ya know...

Now this is just one-letter code. Obviously meaning code that is comprised of only one letter (s for strikeout, b for bold, etc).

Next lesson: One-Word commands (like ^superscript and _subscript text)

Anyone who isn't too familiar with HTML should be able to learn from this thread. But if you already are familiar with HTML and codes like this, please discuss a few one-word commands for the next lesson...

Topics expected to cover: left-center-right margins, superscript and subscript, and others...

Nice idea Zeldisaster
I didn't know some of the above.
Please, make a lesson about layouts. For example I want to use a picture as a font of what I'm posting,but I don't know how

Originally posted by noelia

---

Nice idea Zeldisaster
I didn't know some of the above.
Please, make a lesson about layouts. For example I want to use a picture as a font of what I'm posting,but I don't know how

---

You want to use a picture as a font? You mean like word art or something? I'm not sure how to do that but I can tell you how to change your font style (like how mine is in Papyrus style).

On your edit layout screen you'll have two boxes. One for your Header and one for your signature. Put this code as the last thing in your header {font face="papyrus"}. Then put this section of code as the first thing in your signature {/font}. This should change your font style to your own liking.

{font face="chiller"}Sample Text{/font}
Sample Text

Just look in Microsoft Word (or whatever else you have that has a list of font styles) for whatever style you like best. Hope that helped or at least helps someone else. ^^

Although I couldn't do it using your way, thank's a lot for your tips
I've changed some status of a pre-made layout and that's the outcome.
What's your opinion?
(this is my first try, so please don't be too severe,lol.)

Definitely not bad for your first one ^^ but it seems like it could use a little more to it. That could just be me though. I like it when the layout takes up the whole space, as you can probably tell lol

Did you do what I did and used one of the premade layouts as your building block? lol

Edit: I don't know if you changed it or when I posted it messed up your coding or something but...yeah Lara Craft has taken over this thread xD

Ohhh it seems that it mess up everything on your reply. It's all over the place,grrr.
It seems that I have to work on it again.
Anyway thank's

Edit: It's ok now. Thank's for helping me to fix it

Alright, so Zamiel helped you with your layout problem for now haha, but I was gonna have a lesson on layouts later, covering all the cool things you can do with it.

Out of sheer boredom I'll start the next couple lessons early. Haha

Lesson Two: One-Word commands

One word commands are similar to the one-letter commands, since you don't have to remember much. The worst part about learning anything HTML is gonna be the style in which you have to type it. If even one letter is out of place, the whole code gets messed up through translation Lol, so make sure you type it right!!!

Now, I might as well demonstrate one of the tricks first before I show you another list (cuz that's what I did before) since I'm sure all of you are incredibly interested in learning how to type H₂0 correctly. Haha

For those of you who don't already know this, the 2 in that symbol is written in subscript text, which can be easily accomplished with the {sub} command. Just make sure you put {/sub} after your word/letter to activate the code.

So that's {sub}subscript{/sub} or _subscript. Or if you actually wanna type H₂0 (for idk what reason Lol), then it looks like H{sub}2{/sub}0.

The same can be accomplished with superscript text, which is higher instead of lower. Superscript text is used to write exponents in math like m(x)³. This is accomplished with the {sup}superscript{/sup} command instead. Typing superscript like that would look like this: ^superscript. Or typing m(x)³ like that would look like this: m(x){sup}3{/sup}.

But subscript and superscript aren't the only one-word commands there are. Here's a short list of all the ones I could think of right now Lol:

^superscript = {sup}superscript{/sup}
_subscript = {sub}subscript{/sub}
center margin = {center}center margin{/center}
big text = {big}big text{/big}
small text = {small}small text{/small}
citation = {cite}citation{/cite}
deleted text = {del}deleted text{/del}
emphasized text = {em}emphasized text{/em}
strikeout = {strike}strikeout{/strike}
strong text = {strong}strong text{/strong}

This is a small list. I'll update it more when I think of em. Until then feel free to try these commands out or talk about any one-word commands that I've missed (there's actually a lot that I missed). Lol










Lesson 3: Font tricks (color, style, and size)

Fonts are easy to manipulate when you know how. And every style of font on your computer (like Times New Roman and Comic Sans MS) can be used as a font in HTML.

To do this, you must start out using the {font} code along with {/font} at the end. But that's only the start. The word font in the code just signifies where the effects are going. You have to add to the effects to the first code though.

A full bar of a font's code could look something like this: This font is bigger and is red and is a different style. That whole code looks like this: {font face="georgia, arial" color="red" size="4"}This font is bigger and is red and is a different style{/font}.

Notice how the end of the code was still {/font} even though the first {font} part of it had a lot added to it? You don't always need to repeat code to use it.

Quick Note: No matter what you do to the first code, the closing code ALWAYS must remain as {/font}. Any added code to the {/font} code messes the whole thing up. {font color="red"}This{/font color="red"} type of code will not be accepted by your computer!

In order to add something to the code, it needs to first have the = sign, then you need to "quote" the effect you're looking for. For example, if you want Times New Roman as the font style, you need to add face="times new roman" to the first {font} code so that it looks like this: {font face="times new roman"}

Now, i you like the look of it as is, you don't need to start out with {font face=""}. It can be in any order you want as long as it is written correctly. For example, if you only wanted to change the color to red, you just have to write it as {font color="red"} instead.

But if you wanted to add both, you have to make sure you separate each font effect with a space, making the code look like this: {font color="red" face="times new roman"}. Notice how you only need to write the word font once at the beginning. But don't forget the closing {/font} code at the end of your sentence!

So if you start out with the {font} code, you can add a lot of stuff to it. So here's a list of some of the stuff you can add to the {font} code at the beginning to mess with it. Lol:

Face="comic sans ms" = {font face="comic sans ms"}Face="comic sans ms"{/font}
Color="orange" = {font color="orange"}Color="orange"{/font}
Size="4" = {font size="4"}Font size="4"{/font}

Wow, ok does anyone else know more? Or are there literally only three things you can add using this method? Anywho...

Next lesson: Lists, Line Breaks, and Moving Text

Again, feel free to talk about what you learned here, or share info for the next lesson if you just can't wait. Haha

Nice work Zeldisaster
I really enjoy this thread, I've added it to my favorite.
Also, I like the "next lesson" feature,lol. It's better to know what's next.
Keep up

Yeah, I have known html for 6 years, so this pretty easy for me...

Yeah, this is pretty basic stuff,

Here is some more basic HTML stuff:

<form action="awretwr@yahoo.com" method="post" enctype="text/plain">
<h3>This sends an email to me</h3>
Name:<br />
<input type="text" name="name" value="yourname" />
<br />
Mail:<br />
<input type="text" name="mail" value="yourmail" />
<br />
Comment:<br />
<input type="text" name="comment" value="yourcomment" size="40" />
<br /><br />
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>

Note: Don't do the silly { } thing... use <z> after the < so show up as <<z>form>

Note: This is a thread for beginners and you didn't explain what that code does

Originally posted by Zamiel

---

Note: This is a thread for beginners and you didn't explain what that code does

---

Was that aimed at me or septembern? Lol.

Cuz yeah, this thread is aimed at people who constantly ask "How do I fix this (insert easily coded issue) and do this (insert more easy code here) to my profile/name/laytout to make it look cooler?" cuz they don't know HTML themselves. So I thought I'd do us all a favor and teach them myself firsthand. Plus I've even taught some HTML-experienced people a couple things (ex: noelia).

And the {code} is easier to understand for beginners than your z thing, sorry to say...

Originally posted by Zeldisaster

---

Originally posted by Zamiel

---

Note: This is a thread for beginners and you didn't explain what that code does

---

Was that aimed at me or septembern? Lol.

---

I think that it was about septembern, because judging from myself, I couldn't understand what all this codes, that septembern write, are doing.
But you explain yours, and that's really helpfull

Originally posted by septembern

---

<form action="awretwr@yahoo.com" method="post" enctype="text/plain">
<h3>This sends an email to me</h3>
Name:<br />
<input type="text" name="name" value="yourname" />
<br />
Mail:<br />
<input type="text" name="mail" value="yourmail" />
<br />
Comment:<br />
<input type="text" name="comment" value="yourcomment" size="40" />
<br /><br />
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>

---

This is the HTML code for your typical email page (not really, but it explains my point Lol). If you copy and paste this into your profile (removing the {z} thing of course) and swap his email off the top {form action=etc} or your own, it should create a direct email setup. Should. Cuz I honestly haven't read through his code enough to make sure its written right, I just imagine it is. But I would not recommend copy/pasting in any way, seeing as how the last time I copy/pasted something into my profile, I needed David's help to get it fixed Lol.

Though I realize, Septembern, that even though you are quite experienced at HTML yourself, this site has over 45,000 members and only a handful even know what HTML stands for let alone how to code it all.

This won't work in your profile, but if you were web designing, this could be a page where someone could email you...

If you read my post you would have seen that you do not have to use { instead of <

Look code <--awesome

<img src="http://news.google.com/news/tbn/reWIMkVB6_cJ">

Look weird { things <---weird

{img src="http://news.google.com/news/tbn/reWIMkVB6_cJ"}

SEE? Use the <z> thing, because then you can directly copy and paste the code...

I'm not saying it's good or bad, if you wanna explain the z thing to people you can, but why would you encourage people to copy and paste instead of teaching them how to do things on their own?

I'm gonna go ahead and stick with my method. It's more effective. Even though it looks wierd.

Okay, I deleted it...

Dude, come on... I know what site you got that off of. It's the site that taught me HTML way back when. And I have that EXACT list pasted into a Word Document for quick reference to things I forgot.

Yeah that teaches a lot, but most people still don't know what each of those things DO. You STILL have to inform people why the code exists, otherwise they still won't understand it and it's all that work for nothing.

If you want to copy and paste off the internet just to spam, go do it somewhere else.

Originally posted by Zeldisaster

---

Dude, come on... I know what site you got that off of. It's the site that taught me HTML way back when. And I have that EXACT list pasted into a Word Document for quick reference to things I forgot.

Yeah that teaches a lot, but most people still don't know what each of those things DO. You STILL have to inform people why the code exists, otherwise they still won't understand it and it's all that work for nothing.

If you want to copy and paste off the internet just to spam, go do it somewhere else.

---

I did the basics, because everything I showed was too hard yeah, I saw many of your posts here were from w3schools, which you mainly just copied and pasted here...

But I won't really care to post here, as long as the Official one exists...

Originally posted by septembern

---

Originally posted by Zeldisaster

---

Dude, come on... I know what site you got that off of. It's the site that taught me HTML way back when. And I have that EXACT list pasted into a Word Document for quick reference to things I forgot.

Yeah that teaches a lot, but most people still don't know what each of those things DO. You STILL have to inform people why the code exists, otherwise they still won't understand it and it's all that work for nothing.

If you want to copy and paste off the internet just to spam, go do it somewhere else.

---

I did the basics, because everything I showed was too hard yeah, I saw many of your posts here were from w3schools, which you mainly just copied and pasted here...

But I won't really care to post here, as long as the Official one exists...

---

No, actually I spent a half hour on each post typing it up on my own (please tell me which post i copy/pasted i'd like to know), proving it's possible for a newb to type it up too after they learn it... But yeah I used w3schools to start out, but why not make it easier by teaching the people here what each code actualy means instead of forcing them to keep copy/pasting and not learn anything? Just asking...

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...