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

Masthead, Frank & WEC

This has been a tough week or two on magazines here in Canada. Masthead and Frank have both called it a day.

North Island Publishing's Masthead Magazine and its online counterpart, mastheadonline.com, are closing their doors. Masthead has been an institution in the Canadian magazine racket for the last 21 years, educating us with lessons by expert writers, contributors and trade events, keeping us up to speed on changes around the industry, and generally reminding us of the importance and relevance of our industry.

Run-of-the-mill Web guys like me were inspired by Masthead to pursue a career in publishing. The magazine and website gave me a sense of belonging to a community.

Sadly, Michael Bate's two-times-monthly satirical institution and occasional lawsuit target, Frank, has shut down as well.

The economical issues have hit even closer to home for this editor - two of the major projects I've been working on have also found their way to the back burner or possibly the never burner. Advertising money is harder to find. Businesses everywhere are feeling the pinch, if not being pinched right out.

These big shake-ups in Canadian publishing, as well as the disturbing economical situation we're all enduring now, prompted me to share a bit of what I know about online magic. Got a publication with a website? Got a publication with no website? Whatever your setup is, I'll try to help you out. My publishing and A/V friends will pipe in from time to time too.

This blog may not help your RRSPs bounce back from disaster or fill up your gas tank for $0.499/litre (remember that?), but if I can share some knowledge that saves you a few minutes or a few bucks, then I'm doing my part.

In this blog I'll cover topics such as:
*** Website - registering a domain name and setting up hosting
*** Website - basic HTML coding
*** Website - using an HTML editor such as Dreamweaver
*** Graphic Design - slicing up Photoshop images for use in a webpage
*** Graphic Design - creating images for use in websites and banner ads
*** Multimedia Production - creating dynamic motion graphics for video
*** Multimedia Production - editing sound for audio and video podcasting
*** Multimedia Production - editing video for web publication
*** Music - how to play drums for AC/DC in four easy steps (just kidding - there are only three steps)

...and anything else you'd like to learn!

We'll get rolling soon with the next topic to pop into my mind. In the meantime, if you have any great suggestions for things you would like to learn about, fire them over to me. Whether I know how to do it or not, I'll learn it, and teach it.

That's the kind of guy I am.

Write to me anytime at rfairley@gmail.com or editor@webeditorcanada.com, or add a comment to one of my posts to get in touch.

While you're waiting, check out mastheadonline.com. It's a must-see, and you can comment on the story of their doors closing. Maybe we can convince them to at least keep the website up.

While you're there, don't miss Kat Tancock's "Magazines Online" blog. She's got great insight into online publishing.

I hope you enjoy what goes up here, and stick around for exciting lessons!

Rock on,

Russ