Introduction
Welcome to HTML for Dummies! This class is an Introductory Level coding class, where students will learn to use HTML in their posts with ease over time. In time, an Advanced Level class will follow, so if you're interested, keep an eye open! If you're interested in joining, please go down to the sign-up post and post yourself in! I'll usually check the board a few times a day, so this will be an active class. If you need to contact me, you can reach Ji'alantin Jesriad at darempf@yahoo.com. Enjoy the class!
Lesson 1
Welcome to HTML for Dummies. This class is designed for me, your teacher, to give you a basic idea of the background of HTML code and how you can use it. First of all, we'll start out with it's background for today.
HTML is a very simplistic coding system compared to some others, but, like every type of code, it takes some time and effort to learn. HTML itself is an acronym for Hyper Text Mark-up Language. In plain english, that means this isn't just everyday text. It's above normal text. As a matter of fact, it is running this very bulletin board on which I'm now posting for you to read. The fact that it's a language shows it will work in unison with other parts of itself and carries some power with it. So what you are actually learning isn't just a few letters here and there: it's the ability to change normal text into cool & powerful stuff!!!
For this lesson, I want you to do a little research *hears the groans* Yea, yea- chill out. This is easy stuff. I want you to try and find out something unique about the actual coding language, such as what other languages it was based on, when it was first created or how, how many sites to date (approximately) have been made using HTML code, etc- something interesting. AND NO PUTTING WHAT OTHER PEOPLE PUT! That defeats the purpose of this. There's plenty of information out there about it that's unique or creative, so go grab a piece! :-)
Student Response:
Amara:
Okay. Well HTML, when it began, had NO IMAGES! Ick! Basically, the idea was to have something that worked for everything, for information exchange. Then Netscape and IE started having fun, and HTML began diverging. There's something about a consortium that wasn't helping for a while thrown into the mix. At the moment, some stuff doesn't work for both, but the idea is that it will converge in line with guidelines.
Lesson 2
Today we're going to cover one of the basic and most frequently used codes on the Grey Tower: italics. In order to make italics, or any code for that matter, you have an opening command starting it and a closing command ending it. HTML commands are always inside of carrots (these: < >) In this case, the opening command is a left carrot (<), then i, then a right carrot (>) to start it. It looks like < i > but with no spaces. The closing commands are almost always the same thing but with a backslash (/) right before it. So this closing command is < / i > (again, without the spaces). Your assignment is to type a short paragraph about your character doing something, and to place their thoughts in italics. There should be at least 3 thoughts. Go for it!
Student Response:
Cole:
Cole sat in the Gardens and thought about the class he was skipping. Stupid class. How did I let Jesriad get me into it... Cole pondered this for awhile longer when Jesriad came around the corner. Light! The class must be over! Cole jumped up and climed the tree as fast as possible, and when he thought he had excaped the evil city boy, he heard him yell up. "Cole..." Cole could here his foot tapping. Well, if I let go of the branch I'll go to a yellow instead of his class....
Lesson 3
This lesson will use the other two most common HTML codes, although neither one is used much on the Grey Tower in comparison to italics. They are BOLD text and UNDERLINED text.
To make BOLD text, you do the same thing as last time, but with a B. Thus your commands are < b > and < / b > (as always, without the spaces). It should look thicker on the whole.
To make UNDERLINED text, you do the same thing yet again, but with a U. Thus your commands are < u > and < / u > (no spaces!!!). Your text should easily be emphasized with underlined.
Also, you can use more than one code at the same time, so don't feel hesitant to use two things for extreme emphasis on something!
Your assignment for this lesson is to write another paragraph about your character doing something. This time, you will use all 3 types of emphasis: bold text should be whenever your character does some important action, underlined text should be whenever they have some important thought, and italics will again be any thoughts. You should have at least 2 examples of each kind of code!
Lesson 4
This lesson is on how to align text. You can actually align your text wherever on the page that you feel like lining it up. However, aligning 2 things differently on the same line usually doesn't work, so this code isn't used much. However, if you need to make an outline of some sort, or somehow divide parts of your text, it can be quite helpful. There are three places you can align your text to.
One is left (which is standard),
The second is center,
And the last is right.
The code for aligning text is different from what we have covered so far. The code is < div align = "left" > (or "center" or "right"). However, in this one there IS a space in between "div" and "align", but there are no others. The end command is < / div > (no spaces).
Your assignment (this time) is simple. Use all 3 alignments on 3 different messages (such as what I did above) with one being bold, one being in italics, and one being underlined.
Lesson 5
This lesson will cover the break. No, not as in hitting enter (although you can do that in code as well). What a "horizontal rule" actually does is it creates a line across the page, which can be very useful for splitting up 2 areas of text. The code is unique, however, because there is no end code for it- it's just a 1-code wonder. :) Type in < hr > (no spaces) to see it separate your text nicely (such as in a short story).
Your assignment is to write a before-and-after. This means something like "Jesriad had finally finished up his work for the day, so he headed into the BBI and saw his friend." Then you would have a rule, and the end. "Several hours later, the party had died down and the gleeman had gone in for the night, so Jesriad headed home." Something like that.
Lesson 6
This is the last lesson you'll learn things in. In this lesson, you will learn how to color text and how to make marquis.
Coloring text is actually somewhat difficult, since coloring is based on the hexidecimal system. You know how they always call it RGB color? That stands for Red Green Blue- the order of the 3 values you put in to get a color. If I wanted to, say, color a red g, I would need to know that the code for red is #FF0000. That's FF for red, 00 for green, and 00 for blue- making a red. The code for coloring text is < font color ="FF0000" > or whatever other value you would use, minus all the spaces I put except the one between "font" and "color". The end code is < / font > (no spaces).
To make a marquis is fairly easy in comparison. With marquees, instead of needing the hexidecimal value for the colors, you can usually type in "red" or "blue", although more obscure things like "turquois" or "sapphire" usually will not work. The code for the marquis is < marquee width = 100 > with the only space being between "marquis" and "width"- whatever number you wish can be used, although the number value is pixels, so don't go over but maybe a few hundred. That's it! That simple. Then end it with < / marquee > (no spaces) You can add color to it like I did by using < font color = red > (or whatever) with the only space being between font & color. Then end it with < / font > (no spaces). You can also use bold, italics, or underline just like any other normal text.
Your final to complete this class is to make a short post about your character IC (at LEAST 3 paragraphs) using all of the codes we have learned so far. They can write a paper, play basketball, spar, or whatever else, as long as you properly use ALL codes. Good luck!