Posted 03.14.2009

Posted 03.14.2009

A Crash Course in HTML…In English

OK, so I know, there are thousands of these out on the Internet.

But several of my friends (Karyn, Mary Lindsey, and Jackie) have (re)started blogging. It makes me giggle when they start talking about code–most of which includes, copy and paste.

I wrote a crash course in HTML for one of my clients, so I thought I’d share it (modified) on my blog as well, for all to read.


HTML stands for Hyper Extensive Markup Language, its the code that makes up a site.

references

There are plenty of sites across internet for learning HTML. But here are my personal favorites (listed according to preference):


starting and ending tags

HTML uses angle brackets < > to define code

The computer only knows what you tell it. So when you’re entering content, it needs to know when you want to begin and end a style. (A style being bold, italics, etc.)

If I wanted to start a bold section, I would type <b></b> as soon as I want the bold to stop, I would type </b> . Everything that is typed between those tags would be bold. For example,

<b>i am bold</b>

would appear to the user as

i am bold

It is very important that you remembered to close your HTML tags. A forgotten closing bold tag would make the rest of the webpage bold.

I say that, but there are a few tags that are the exception to that rule. An image tag <img /> , a line break tag <br /> , and a horizontal rule tag <hr /> only have an opening tag. However, the /> signifies that there is only an opening tag.

I’ve included a chart at the end of this section that displays the HTML tags that you will use the most.


the difference between paragraph tags and line breaks

Using a paragraph tag is like hitting the <return> key twice, while a line break would be like hitting the <return> key once. For example:

<p>This is a paragraph of text.</p>
<p>This is another paragraph of text.<br />
But I want this to appear on the following line.</p>

would be rendered as:

This is a paragraph of text.

This is another paragraph of text.
But I want this to appear on the following line.


images + attributes and parameters

Attributes and parameters are tags that give further definition to your web elements. Let’s take the image tag for instance.

The base tag is . (Remember, the image tag doesn’t have an opening and a closing tag). However, that doesn’t tell the computer very much. It doesn’t say which image you want to use, how big it is, how it will interact with the text around it, etc. And so, we introduce parameters + attributes.

Parameters and attributes appear within the opening tag only. They look like attribute_name="value"

<img src="http://www.domainname.com/images/myPic.jpg" width="100" height="100" align="right" />

Let’s break it down. src defines the image source. width defines how wide the image is. height defines how tall the image is. align tells the computer that the image should appear to the right of the text (left is another option).

The only tag that you really need to make your image is appear is the src tag. It will automatically decide the dimensions of your image. You should NEVER use a width or height larger than what the image actually is. If you do, your image will appear pixelated. You should also be aware of the size of your image. If the image is larger than the width (or height) of the space you are trying to put it, then it could blow out your page, breaking the layout.


clearing

At some point, you may want an image and then some text, another image, and then some more text. So, you use the following snippet


Looks good, huh?

The problem is that your code aligned it left, like you asked it. The problem is it wants to keep aligning stuff left. The solution? A clearing break.

Instead of a simple <br /> , use <br clear="left" /> which will clear the text, all the way back to the left. <br clear="right" /> will clear the text all the way to the right. <br clear="both" /> will clear the text in both directions.


Much better.


links

Linking one page to another — important stuff. Attributes + parameters are used here too.

<a href="http://www.domainname.com" title="a description of where my link goes" target="_blank">my link</a>

looks like:

In the example, the only parameter that you really need is the href (hyper reference), which tells the browser where to take you. The title tag is just a description of where the link takes you. This snippet makes Google happy, because then it knows what you are looking at and where you are going. It can index that. The target tells the browser to open the link in a new “blank” window. (And no, the underscore is not a typo). Typically, you will only use this parameter if you are linking to another site that would take the user away from you. The opposite of "_blank" is "_self." –opening the link in the same window.


lists

There are 2 types of lists: an ordered list (numbered) and an unordered list (bulleted), both behavior similarly.

Here’s an example of an unordered list:

<

 <ul>
    <li>Item number one</li>
    <li>Item number two</li>
    <li>Item number three</li>
</ul> 

rendered as:

  • Item number one
  • Item number two
  • Item number three

The first <ul> tag tells the computer that you are going to create an unordered list. The nested <li> tags represent list items. The

tells the computer that you are done with your list.

The ordered list works the same way, except instead of ul tags, you will use ol tags:

 <ol>
    <li>Item number one</li>
    <li>Item number two</li>
    <li>Item number three</li>
</ol> 

rendered as:

  1. Item number one
  2. Item number two
  3. Item number three

NOTE:

Indenting the code is not necessary, however, it does make the code easier to read.


a few things to note :: proper etiquette

Assuming that you’ve looked through the Webmonkey cheat sheet, (since Amy marked it as her favorite)….you’ll see a few things.


the font tag

The font tag should NEVER be used. It is an outdated tag, used once upon a time. The styles for your site have already been defined and will be applied to your content automatically. Overriding those preferences with the font tag will visually degrade your site due to inconsistencies.


frames

You should NEVER have to use a frame. It is another outdated web practice.


forms

The cheat sheet does explain inserting form elements, however, this is only the visual side. Yes, it will give you a text box, radio button, etc. but there is code in the back end that is needed to make the form actually do something (i.e. retrieve the information and store it in a database, etc.)


frequently used tags

Italics

<i></i> or <em></em>

Bold

<b></b> or <strong></strong>

Link

<a href="http://www.domain.com">Text that the user will see</a>

New Paragraph

<p>My Paragraph</p>

Line Break

<br />

Image

<img src="http://www.domain.com/path_to_image" />

Horizontal Rule

<hr />

special characters

The following codes will allow special characters to be displayed:

space

&nbsp;

Note: the browser will only render out one space at a time, unless otherwise specified. For example "hey    you" would look like "hey you", unless you used "hey &nbsp;&nbsp;&nbsp;&nbsp;you"

copyright

&copy;

registered

&reg;

trademark

&trade;


Ok, I think that's enough to get started, or at least make you dangerous.