The basics of HTML
On Tuesday I taught a session on visualizing data at the Knight Center, highlighting free and easy-to-use multimedia tools. Over the next couple of days, I’ll be posting tutorials on everything we discussed. Up first: Basic HTML.
HTML, or hyper-text markup language, is not a programming language. It uses tags to create web pages. The tags are surrounded by brackets: < and >. Most tags work in pairs, with an opening tag (like <strong>) and a closing tag (the matching closing tag would be </strong>). Browsers read and interpret the tags, but do not display the keywords within the brackets. Tags can be nested and follow a “last in, first out” philosophy.
Every HTML document starts by declaring that, hey, it’s an HTML document: <html>. That is followed by <head>, which can include scripts, meta information and where to find style sheets. The <body> defines everything you see on a web page — that’s where you can add text and links and images. So all of that means an “empty” HTML document looks like this:
<html>
<head>
</head>
<body>
</body>
</html>
If you copy that, save it as an HTML document (with either an .htm or .html extension), and open it in a browser, you would see a blank page. Now type your name after the <body> tag and save it. Open it in the browser again and you’ll see your name (or whatever you typed).
OK, don’t give up — I swear HTML isn’t really that tricky and we’re about to get to the fun stuff. Most blog and content management systems allow you to create links, modify text or add images easily. But not all, and there are still some places where HTML knowledge comes in handy. (We’ll get to a couple of those in upcoming tutorials.)
- If you want to use or play with HTML, try one of these free HTML editors:
- Komodo Edit
- Kompozer
- Crimson (Windows)
- Coffee Cup (Mac)
(If you already have an Adobe Suite, you might have Dreamweaver or GoLive. Those, of course, aren’t free. For what it’s worth, I have Dreamweaver, but it’s such a memory-hog that I usually use Komodo.)
Change the appearance of text
What it looks like: Add a return
to text
How to do it: <br/>
What it looks like: Bold text
How to do it: <strong>Text that will be bold</strong>
What it looks like: Italic text
How to do it: <em>Text that will be italic</em>
What it looks like: Strikethrough text
How to do it: <del>Text that will have a line through it</del>
What it looks like: Small text
How to do it: <small>Text that will be small</small>
What it looks like: Big text (This is different from headlines.)
How to do it: <big>Text that will be big</big>
Create links
What it looks like: Link to another site or web page
How to do it: <a href="URL">Text that will be a link</a>
The URL must include http://
What it looks like: Open a link in new window
How to do it: <a href="URL" target="_blank">Text that will be a link</a>
What it looks like: Link to an e-mail address
How to do it: <a href="mailto:E-MAIL ADDRESS">Text that will be a link</a>
What it looks like: Link to an e-mail address with a preset subject line
How to do it: <a href="mailto:E-MAIL ADDRESS?subject=SUBJECT">Text that will be a link</a>
To make sure your subject line displays appropriately, use %20 instead of spaces between words in the subject line.
What it looks like: Make part of your link bold
How to do it: <a href="URL">Text that will be a link <strong>Text that will be bold</strong></a>
How to do it: <a href="URL">Text that will be a link <strong>Text that will be bold</strong> More of the link that isn't bold</a>
Add images
Images must be hosted somewhere online — either on your web server or a photo-share site such as Flickr or Picasa. If you link to a photo on your desktop, no one else will be able to see it.
What it looks like:
How to do it: <img src="IMAGE FILENAME" alt="DESCRIPTION OF IMAGE" />
You can make your image a link by combining the image with a link. What it looks like:
How to do it: <a href="URL"><img src="IMAGE FILENAME" alt="DESCRIPTION" /></a>
Learn more
To learn more about HTML, download this HTML help sheet from Liquidcity, visit W3 Schools or ask in the comments.
- Posted by Erica Smith at 10:21 pm / Permalink for this post
- Filed under: , html, tutorial
- RSS comments feed for this post
Great overview Erica!
A few points:
You should never use HTML to alter the “appearance” of content. That’s the job of your CSS. Tags such as “strong” and “em” should be used for their meaning only.
Many usability studies condemn the use of the target attribute to open new windows with links. That attribute is also deprecated in strict DOCTYPEs.
Every Web page needs a DOCTYPE. Though a bit complex, this AListApart article covers it well.
You should always validate every Web page using the free tool from the W3C. This will take the pain out of bug-checking long lists of HTML.
A great source for both HTML and CSS is the Web site HTML Dog.
Thanks, Patrick!
Actually creating pages does get a bit more involved, and should include everything you said, of course. I didn’t get into CSS (cascading style sheets, for those learning the lingo) or a lot of specifics because, well, we were limited on time and wanted to get to so much more. But anyone serious about learning HTML and how it all works should check out the links Patrick included.