The Very, Very Basics of HTML
No matter what your job at ECN, you won't be able to do it without knowing at least a little bit of HTML. HTML stands for HyperText Markup Language, but you don't need to know that in order to use it. HTML is the language used to build web pages. If you want to see what HTML looks like, visit almost any web page. Right-click (or control-click on a Mac) on any empty spot on the page and choose "View Source" or "View Page Source" from the menu that pops up.
If you've never written HTML before, the first thing you may notice is the strange looking code contained in angled brackets that look like this: < >. Don't let this scare you! The second thing you may notice is that, for the most part, the text that you saw on the web page is still readable in the code. In fact, if you look at it long enough, you can start to mentally filter out the code and read only the page content. Now it seems less complicated, doesn't it?
If the very idea of HTML makes you nervous, take a deep breath and repeat the following: "HTML is not programming." Programming is tricky and requires the solving of logic problems and knowledge of complex "languages." HTML is much easier. If you can format a document in Microsoft Word, you can use HTML.
Let's use the formatting of a Word document as a model for understanding HTML. Suppose that you typed the following sentence in Word:
ECN is way cooler than those other departments.
When you read it back to yourself, you decide that you want the word "way" to be italicized. In Word, you would highlight the word and then click a button marked "italic," and the highlighted text would instantly change to italics. This is because Word is a "What You See Is What You Get" (WYSIWYG) editor. Any changes you make to the text show up on the screen as soon as you make them, and the document will look basically the same on any screen or printed page.
HTML, on the other hand, is not WYSIWYG. Unlike Word, HTML documents are created in one program (usually a text editor) and displayed in a different program (usually a web browser). There are programs that allow you to edit web pages in a WYSIWYG format, such as Dreamweaver, but even the best of these programs has its limitations. It is often faster and easier to simply build or edit an HTML document with a text editor.
To change the formatting of text using HTML, we use what are called tags. A tag is a word or letter inside angled brackets that tells a web browser how to display a section of text. Let's look at the same sentence that we used before, but this time we will make the word "way" italic using HTML.
Adding Tags
The tag for "italic" is <i>. By inserting the <i> tag into an html document, we can make any text that follows it italic. For example, if we typed the following code:
we would end up with the following output:ECN is <i>way cooler than those other departments.
ECN is way cooler than those other departments.
Well, that's a start, but it isn't exactly what we want. We don't want everything after the <i> tag to be italicized; we want the italics to stop after the word "way." To set an end to the italicized section, we use a closing tag. A closing tag is the same as a regular tag except that there is a preceding slash inside the angled brackets. The closing tag for "italic" is </i>. Almost all HTML tags require a closing tag to define where they end.
Now we can define our italic section easily with the following code:
which will give us the output:ECN is <i>way</i> cooler than those other departments.
ECN is way cooler than those other departments.
Woo Ha! Now we know how to make text italic, but <i> is only one of many tags in HTML. For example, <b></b> will make text bold. There are plenty of good HTML reference guides on the web, so I won't list all of the tags here. Visit the links page for some good web-based references on HTML.
Line Breaks
Another important fact about HTML is that it ignores line breaks in your code. Suppose we typed the following in your HTML document:
One dark night when all was bright, Two dead boys got up to fight. Back to back, they faced each other, drew their swords, and shot each other. A deaf policeman heard the noise, drew his gun, and stabbed the boys. If you don't believe this lie is true, as the blind man, he saw it too.
Even though you typed the poem just as you wanted it to be formatted, it will look like this when you display it in a browser:
One dark night when all was bright, Two dead boys got up to fight. Back to back, they faced each other, drew their swords, and shot each other. A deaf policeman heard the noise, drew his gun, and stabbed the boys. If you don't believe this lie is true, as the blind man, he saw it too.
That doesn't look right at all! That is because all of the line breaks that we so carefully entered are being ignored by the browser (although this seems irritating at first, you will eventually be glad that HTML works this way). In order to make the line breaks visible, we need to add break tags for each line break. The tag for a line break is <br>. (Note: The break tag is one of the rare tags that does not require a closing tag.) To put breaks after each line, your code would look like the following:
One dark night when all was bright,<br> Two dead boys got up to fight.<br> Back to back, they faced each other,<br> drew their swords, and shot each other.<br> A deaf policeman heard the noise,<br> drew his gun, and stabbed the boys.<br> If you don't believe this lie is true,<br> as the blind man, he saw it too.
The results will look like this:
One dark night when all was bright,
Two dead boys got up to fight.
Back to back, they faced each other,
drew their swords, and shot each other.
A deaf policeman heard the noise,
drew his gun, and stabbed the boys.
If you don't believe this lie is true,
as the blind man, he saw it too.
That looks much better, but we want a line in between the two stanzas. There are two ways to get a blank line in between two lines of text. First, you can use a double <br> like so:
drew their swords, and shot each other.<br> <br> A deaf policeman heard the noise,
The other method is to use a paragraph tag, written as <p>. A <br> tag automatically places a line of white space between two sections.
Important Note About the <p> Tag: Many references and other HTML coders will tell you that you do not need to use a closing </p> tag. While this was true for a long time, the rule is changing. Due to new standards in web design, it is good to get into the habit of closing your <p> tags. Whenever you use a <p> to open a new paragraph, be sure to place a </p> at the end of the paragraph.
Conclusion
To go into greater detail when there are many excellent HTML resources available would be unnecessary. This introduction to HTML should help you to understand some of the fundamentals of HTML. To learn more, I highly reccommend that you ask your co-workers for help. Not only is it a good way to learn, it is a good way to get to know your fellow ECN employees. If nobody is available that can answer your questions, check out the links section for some great websites that should be useful.