Home » HTML
 

Poll

Domain Use
 
HTML 101 PDF Print E-mail
Written by Administrator   
Saturday, 30 January 2010 23:34

I've heard enough folks bemoaning their lack of knowledge about how to write HTML and CSS that I figured I'd dust off my credentials (haven't got any) and lay it out here in simple, step-by-step instructions.

For the truly uninitiated, HTML is the coding language that creates web pages. Using HTML (which is an acronym for Hyper-Text Markup Language) you can tell your page to post text XYZ and picture ABC, where to put them and whether or not your title should be set aside and written in great big letters.  A browser (such as Internet Explorer, Firefox or Safari) doesn't interpret (or parse) information exactly like a typical human does.  It needs its directions written in a few very specific languages, of which HTML is the most commonly used.

Add CSS into the mix and you can icreate a flowery wallpaper background, choose your font color, even change the effects whenever someone's mouse is hovering over a spot on the page.

Presumably the mouse has time to hover because there are no cats around.

*Ahem* Where was I?

Ah yes - page one, if you will, of how to use HTML.

Step 1 - Understanding How HTML Talks

Chances are you've seen HTML coding at some point or another. HTML is written with words inside a set of brackets, a "<" to open the directions and "/>" to close them. The brackets tell your browser (like Internet Explorer or Firefox - whatever program lets you go online) that whatever words and symbols are inside those brackets, they need to be parsed, or interpreted, as instructions.

A very basic HTML page is written like this:

 

<html>
<head>
<title>My Page</title>
</head>
<body>
My, but this is easy!
</body>
</html>

 

Notice above that there's not a whole lot of information; but of what's there, most of it is in those brackets we were talking about. And for every set of instructions, it's echoed a little further down the line with the same thing inside the same brackets, only with a slash before the closing bracket. That slash means, "STOP! You're done. Quit now. Hey there! Cut it out!" When you use the closing slash, it tells the browser to stop doing whatever the opening set of instructions said to do, and so on and so on, step by step. Also notice that you close things out in the opposite order to which you opened them. That means you start and end with the HTML tag.

I want you to do an exercise now. Open Notepad on your desktop and paste the above information into Notepad. Where you see "My, this is easy!" above, replace it with your own line. Just keep in mind, if you write very much it will come out as one big paragraph! Then you'll save as an HTML file using Notepad, by choosing Save and where it asks you to choose a name for your file, write in "flamingo.html" (or some name and html, it's up to you) - and when you write it in, be sure to include the quotation marks. They're important because they tell Notepad to actually convert your document to an HTML file. Otherwise you'll end up with a text file called flamingo.html.txt. Not the same thing.

Save As

While technically you can save the file to wherever you want, I recommend saving it to your desktop. It's easier to access and change as you go.

After saving your file, double click on it. It should open up in a new window and show only the text you entered - except at the top of the browser, where it'll echo whatever title you typed into the "title" area.. (What?? You didn't change the title? Well, go change it and look at the top of the browser when you open your page. It'll be there.)

That's the end of Lesson 1. The next step just expands on this, don't worry.

Lesson 2 - Line Breaks, Paragraphs and Bold, Oh my!

Last Updated on Sunday, 31 January 2010 01:06