Talking Code – HTML
October 17th, 2006 by Guest
The girls have been asking me to write a post about HTML, so instead of talking about writing prose this week, I’m going to see if I can come up with some HTML basics for those of you who don’t already know them.
A bit of background
HTML means hypertext markup language. A HTML document is a plain text document that your browser reads and interprets in order to deliver web pages to your screen.
The Code
Luckily for us HTML is fairly simple to learn.
We use markup or tags to describe the structure and content of the webpage we want to build.
First we need a text editor. You can use wordpad, notepad or even get something as fancy as Crimson Editor to help you with your markup.
We start by telling the browser the document is HTML, and we do this with a <html> tag at the top of the document. We also put a </html> tag at the end of the document to show the code has finished, but we can worry about that later.
HTML documents are made of two parts, the head and the body. So we put a <head> tag after our initial <html> tag. All sorts of information can go in the head section of the document, but as we’re only looking at the basics I’ll leave that for another time. One of the things that does go in the head section is the page title. <title>My Webpage</title>.
Next we’ll need to close that head tag and open up the body, we do that like this </head> <body>.
The body is where the meat of your webpage will go. There are all sorts of presentation methods you can use, such as tables (lots of people hate this method, but I’ve never really figured out why) or style sheets, but once again we’re sticking to the basics so I’ll skip those for now.
The first thing you’ll probably want on your page is a heading. There are six heading tags we can use <h1> through to <h6> that look like this:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Because we want our heading to stand out we’ll use heading 1 <h1>Welcome to my webpage</h1>.
You’ll probably want some text on your page as well, so we’ll need to use the paragraph tag <p>. You’ll put your text between an opening and closing paragraph tag.
A quick note on closing tags. It’s true some browsers will let you get away with omitting the closing tags such as the paragraph tag </p>, and they can usually figure out what you mean, but they don’t always get it right so using the closing tags is a good habit to get into.
No webpage would be complete without images. At some point you’ll need to figure out where you’re going to keep your images. One way to go would be to put them on your server in an image directory, but for now let’s just assume we know where an image is kept and we can worry about how to get it there later. The image we want is located at http://www.writerunboxed.com/wp-includes/images/daffy.jpg. In order to get this image on screen we use the image source tag like so <img src=”http://www.writerunboxed.com/wp-includes/images/daffy.jpg”> which gives us;
As well as text and images, webpages need links. Links are what makes the internet great. To add links we use an anchor tag combined with a href tag or Hypertext Reference, like so <a href=”http://www.jackslyde.com”>Jack Slyde</a> which creates a link that looks like this Jack Slyde.
You can put all of this together to make a simple webpage. When you have finished creating your HTML document, you’ll need to save it as a .html file, and then upload it to the internet using something like SmartFTP or CuteFTP. I can cover this later if anybody is interested.
Once you’ve got the hang of the basics you can start exploring style sheets, tables, xhtml and you could pretty much keep going forever, or at least until you’ve learnt all you need to know.
There are some excellent resources at Webmonkey and W3 Scools if you are looking for more information.
3 Responses to “Talking Code – HTML”
One important note about the paragraph break tag .
All web browsers will read the paragraph break tag correctly. The problem is when you attempt to apply style sheets. If you do not have individual paragraphs enclosed within the opening and closing paragraph break tags, your styles won’t work correctly.
The is important because right now, most people see HTML as part of their weblog or on-line journal (or whatever) and such programs use style sheets to achieve their layout. So forgetting that closing tag means cats and dogs living together: total chaos.
But if you are making a plain HTML page, then you can feel free to leave off the closing paragraph break tag.
And the best thing to have when writing HTML is a good reference book.
Jack,
Thanks for this non-technical introduction to HTML. It’s always nice to see explanations for technical subjects written in plain English.
Biff
You’re welcome, Biff.