Web Design

Lesson 2

In the last lesson you learned how to create paragraphs, as well as how to make text italicized, underlined, or boldface. In this lesson it's time to learn how to do even more things with text. Isn't that awesome? I can tell you're about to fall out of your chairs in excitement! Just kidding.

First let's find out how to change the font size. Yep, you can make it bigger and smaller - and with what? More codes. Don't worry, these aren't difficult either. Actually, the code for font size is one of the most ridiculously simple codes in existence. You take the words "font size" and put them inside the less-than and greater-than signs - remember those? (Your math teachers must love me.) Then you add an equal sign, =, and quotation marks around a number. I'll write it out soon, don't worry.

Hopefully you also remember how to end a code. Well, you're in luck for this one. This is another general principle of HTML. When a start tag has a space inside, then for the end tag, you usually need to include only the word before the space. (I'll explain the reasons behind this in a later lesson.) So for this tag, you just have to put "font" - and the forward slash, of course.

The complete code ends up looking like this:

Now that you know the code, let's take a look at what the different sizes look like. The number you insert can go from 1 to 7. Here are some examples below:

Size 1	Size 2	Size 3	Size 4
Size 5	Size 6	Size 7

Now that you know how to change the font size, let's move on to the alignment. That basically means the position on the page. (If you want or need further clarification, you can read a definition here.) No doubt you've encountered this in Microsoft Word, where you click icons to align text to the left, right, or center. There's another type of alignment called "justified", which means that for each line of text, the spaces between the words stretch so that each line ends at the same place and is the same length. The left and right edges look like straight lines. It gives the document or webpage a neater, more streamlined look.

These codes are a little more complex than the ones before, if only because they're not quite as easy to remember. Inside the ever-present < and >, you write "div align". The "div" stands for "division", or sections of a page. "Align" is short for "alignment", which is why I've been using that word. Then, like the font-size tag, you have an equal sign and quotation marks. But this time, instead of putting in a number, you put the alignment: left, right, center, or justify. And remember the end tag rule about the space? It applies here - for the end tag, you just put "div". I'll show you this pair of tags, too:

Now I'll show you some examples of the different alignments.

THIS PARAGRAPH IS LEFT-ALIGNED. Random text, random text, random text. This paragraph is left-aligned. Random text, random text, random text. This paragraph is left-aligned. Random text, random text, random text. This paragraph is left-aligned. Random text, random text, random text. This paragraph is left-aligned. Random text, random text, random text. This paragraph is left-aligned. If you actually read this whole paragraph, you have too much time on your hands.

THIS PARAGRAPH IS RIGHT-ALIGNED. Random text, random text, random text. This paragraph is right-aligned. Random text, random text, random text. This paragraph is right-aligned. Random text, random text, random text. This paragraph is right-aligned. Random text, random text, random text. This paragraph is right-aligned. Random text, random text, random text. This paragraph is right-aligned. If you actually read this whole paragraph, you have too much time on your hands.

THIS PARAGRAPH IS CENTERED. Random text, random text, random text. This paragraph is centered. Random text, random text, random text.
This paragraph is centered. Random text, random text, random text. This paragraph is centered. Random text, random text, random text. This paragraph is centered.
Random text, random text, random text. This paragraph is centered. If you actually read this whole paragraph, you have too much time on your hands.

THIS PARAGRAPH IS JUSTIFIED. Random text, random text, random text. This paragraph is justified. Random text, random text, random text. This paragraph is justified. Random text, random text, random text. This paragraph is justified. Random text, random text, random text. This paragraph is justified. Random text, random text, random text. This paragraph is justified. If you actually read this whole paragraph, you have too much time on your hands.

That's enough for today. Do your assignment; practice; maybe play around with your homepage. Tomorrow you get to learn even more. See you then!