What the heck is an HTML?

Hi gang!

I hope you're having a good day! I'm ok. I had a late band practice last night, which usually involves about three hours of talking about upcoming shows, drinking some cheap domestic beer, and generally rockin' out.

Hey, we recorded a bit of our beer-fueled rockin'... wanna hear?

5375playsU2.mp3

Anyways, practicing (beer) tired me out, and I'm dragging today, so we're starting with an easy one...

(Monday we'll do Lesson 2: Programming for GIS - Remote Sensing and Advanced Spatial Imaging Software Design Methodologies - just kidding.)

Today's lesson is square one: Web Dev 101 - Basic HTML

If your job has something to do with the web, there's a good chance that you know a bit about HTML. You may know how to code it from scratch, you may know a few basic commands to fix work you've created in your editing software, or you may have just heard of it. Well, even if you never need to write code from scratch, it never hurts to know the basics.

For those of you new to it, HTML (Hypertext Markup Language) is the code with which we write websites.

For more about what HTML is click here. We're going to skip the theory for now and focus on actually building a little something.

Let's learn how to create a very simple HTML page with a few basic elements in it. Our website will have a title that shows up in your browser's title bar, a heading, a couple of paragraphs of information containing links to other websites, and a link to an email address.

For some of you this will be old hat, but we've gotta start somewhere. If you want to work on more advanced lessons, email me at rfairley@gmail.com with suggestions for future lessons and I'll post them.

BUILDING A SIMPLE WEBSITE
please note: I'm working on a Mac, so my screenshots are Apple-specific and my PC instructions are from memory

GETTING STARTED:

PC: Open Notepad - this can be found by clicking Start --> Accessories --> um... programs I think, and then Notepad. You can also open it by clicking Start --> Run and typing notepad.exe

Mac: I think TextEdit is the best program for us, which you'll find in Applications in your Finder window. Open TextEdit c'est ca:

Lookin' good. We're now faced with a blank text editor. Let's get coding!

To simplify things, I'm going to give you the code for our webpage, and then I'll explain it.

Type this in your text editor (click to enlarge):

Or download my example file by right-clicking this link and choosing to save it on your machine. Once you have it, open it with your text editor:

My%20website.html

When you have the code written in your editor, click "Save as" and save it as "My website.html" (or anything.html) - Mac users will need to select the file type as Unicode to keep it as plain text. Don't choose any of the other ones, or you'll need to go back and convert your code to plain text. Actually, to make your coding easier, you can choose "Make Plain Text" before you get started in the Format menu. Up to you.

Save the file to your desktop, or somewhere else easy to find.

Now, let's check out the page!

In Windows Explorer (PC) or Finder (Mac), navigate to where the file is saved and right-click it. Choose "Open with" and then select your browser (Internet Explorer, Safari, Firefox, etc.)

You should see something like this (click to enlarge):

Note the title at the very top!

Great stuff! "How do I get it online?", you may ask. Well, we'll go over that next time.

"What the heck does the code mean?", you might also ask. I'll tell you. Let's take a look at it.

I'll start with basic syntax. An HTML element is comprised of the following:

• a start tag marking the beginning of an element (e.g. html within these brackets: <>)
  
• any number of attributes (we'll look at these in a future lesson)
  
• some amount of content (e.g. Click here!)
  
• an end tag (e.g. - < /head> - notice the "/")
  

You'll notice that there is a structure within the code (I've left out the <> characters, due to my blog program trying to interpret them):

The html (start tag) and /html (end tag) tags encapsulate everything, thus defining where the code starts and finishes.

The head and /head tags contain information for the website that doesn't need to be in the body - the title always shows up in head of an HTML document.

The body and /body tags contain the information we would like to display on our website.

The other tags I used are:

• center - these tags will center all of the content found between the start and end tags

• p - this is a paragraph break - no end tag is necessary, though some people use one.

• br - this is a line break - again, no end tag necessary.
• a - these are anchor tags which are used for links. The "href=" found within the start tag indicated that I wanted to hyperlink to something, and the "mailto:rfairley@gmail.com" and "http://www.google.com" told the browser where to link (mailto is a command your browser will understand). The content found between the start and end tags will act as your actual link.
  

For more about tags, check out: http://en.wikipedia.org/wiki/Html_tags

Have fun playing around with your new basic website - try changing the title and links, and try adding new elements using other tags you find online. Maybe see if you can get a picture to display! The code within the < > brackets should look something like this: img src="your picture" - Good luck!

If you had any problems with this lesson, or would like further clarification of the tags or code structure, please feel free to write me at rfairley@gmail.com (just click the email link in the website you just built!).

Sorry about the confusion with the <> characters - I'll get it sorted for next lesson.

Have a great weekend!

Rock on!

Russ