Cultural Expansion through Language...

So, everyone is learning a language these days. Seems to be the new cool thing to do. (Do you like I how I base what's considered 'cool' on Francine and Tony? Yeah, me too.) More than just learning a new language, Francine is spreading the knowledge in her blog, giving little lessons in German each week so we, her readers, can learn with her.

Now, I don't know a foreign language, and honestly, I don't have the time or energy to learn one at the moment. Maybe after the new year. Nonetheless, I want in on all the blogging fun. After a bit of thought, and remembering that I am an 'outside of the box' sort of person, I realized I just might have a language to share with you afer all; markup languages, specifically HTML and CSS.

Each week I am going to pick some elements of HTML to share with you all, based on what you ask for in comments, and teach you how to code them. this week, we'll start with basic text alteration such as bold, italics and underline. I'll also give you a basic understanding of the terms you will see most often in this process.




First, let me give you a basic understand of what HTML is and how it is used:

HTML stands for HyperText Markup Language. It is basically used to tell webpages and other documents how to display and what functionality to give to text. Most of what you see online is based off of HTML. As a matter of fact, this whole blog is based off of HTML.

HTML is the base language for several other processes and languages used in all things technical. Some examples are CCS (Cascading Style Sheets) which is used to create webpage layouts and the like, and Scripting Languages (such as JavaScript) which are used to tell a document how to run a program. These things can get very indepth and very confusing very quickly, so lets move on while we still can.

At it's most basic HTML is made up of Tags, These tags tell HTML how to display and what to do with the given text. A tag is usually made up of an opening <, a letter, word, or symbol to tell HTML what to do, and a closing >, in that order.

Tags make up elements, the smallest working part of HTML, just like the rest of the world. An elements is one complete code. Elements are made up of an opening tag, the text to be edited, and a closing tag. They usually look like this:

<b>bold</b>

A Quick run down of the parts of an element and Tags:
< tells HTML to read the following text as a code.
> tells HTML to stop reading the following text as a code.
text between the < and > tells HTML what changes to execute on the following text
adding a / before said text tells HTML to STOP executing changes.

There are such things as 'empty' tags and elements. These have no natural text- text to be edited. There are also elements with no ending tag. A good example of each is line break: <br>. Line break does just what it sounds like, inserts one line break into text. There is no text to be altered and as it only occurs once, there is no need for an ending code. You would use line break in place of hitting the enter key.

Now that you have a basic understanding of what we will be doing and WHY, lets get to some simple coding!

We'll start with text alteration codes. These are the most common and easiest elements to use in HTML. The are also the ones that make the biggest impressions on a webpage. If your layout looks great but your text is hard to read or understand it doesn't matter, right? Right.

The three most useful elements in HTML are bold, italics and underline. Let's start with Bold.

First create the opening tag: Start with a < to tell the webpage to start reading code. Then type 'b' which is the designation for 'bold' in HTML. Next, type > to tell the webpage to stop reading code.

Next, type the natural text you want to edit. In this example we will use 'Bold'.

Lastly, create your closing tag: add the closing element by typing < to tell the webpage to read code, / to tell the webpage to stop editing the text, 'b' to tell the webpage WHAT to stop, and > to tell the webpage to stop reading the text as code.

Your code should look like this:

<b>This text is bold.</b>

And display like this:

This text is bold.

Any text alteration element will work exactly the same way, and most of them have logical designaions. Here is a list of the most common text alterations and the code you will use for each:

Result/Display	Code/Designation
Bold	<b>Bold</b>
Italics	<i>Italics</i>
Underline	<u>Underline</u>
Strike	<strike>Strike</strike>
Superscript Text	<sup>Superscript</sup> Text
Subscript Text	<sub>Subscript</sub> Text
Big Text	<big>Big</big> Text
Small Text	<small>Small</small> Text
Teletype Text*	<tt>Teletype</tt> Text
*Teletype text is displayed with even letter spacing, like on a typewriter. It is also known as Typewriter Font. It is used mostly to distinguish certain words from a sentence. You have most likely seen it in a text book at some point.

Now, let say you want text this is both bold and italic: like this. To do this you will have to 'nest' your code. You fit one element within the other, like nesting dolls. It looks like this:

<b><i>This text is bold and italic.</i></b>

And displays like this:

This text is bold and italic

Notice how in the opening tags of the elements, bold is first and italic is second, while in the closing elements it is reversed. It does not matter which you use first, but HTML can get confused if you do not reverse the order of your tags when you close the elements. It doesn't happen often, but it does happen. Always remember to work from the text you want to edit out. If the closest tag to your text is <i> on one side, it should be the closest on the other as well. DO NOT do this:

<b><i>This text is bold and italic.</b></i>

It works, but with certain elements we will get to later HTML will not display properly. I do this all the time, and there have been so many cases where my page is not displaying properly and it takes me HOURS to find the problem. Spending four hours pouring over a code just to realize you need to flip two little letters is beyond annoying. Trust me. Don't do it.

There is no limit on how many elements you can use at once. If you want your text to use all of the codes I gave you today, have fun. The only problem you will have is trying to make the text both Superscript, Subscript and Teletype at once. That won't work because all three change the spacing and size of your text in unique ways. o_0

You now know how to edit your text using HTML. You even know how to nest your elements! I told you it was easy. ^_^

Now, what would you like to learn next week? I'm thinking either adding images and links (and images AS links) or changing font faces, text colors and text back ground colors. Which would you prefer?