HTML stands for HyperText Markup Language. This is the language of the world wide web, and its lifespan thus far indicates that it is a successful way to format documents on the internet. In this tutorial, we’ll cover the basics of creating an HTML page.
Firstly, though, it must be noted that the current standard for web markup is XHTML, or eXtensible HyperText Markup Language. The difference is twofold: It is extensible, meaning that it can be extended more easily, and it is presented slightly differently. XHTML is said to be HTML reformulated in XML. This means that it is made to interact better with more applications and services. We don’t need to go into too much detail here, but let it suffice to say that this tutorial will be written for XHTML.
(If the notion of writing XHTML instead of HTML scares you, don’t worry: the main differences are tiny. All you need to remember for now is that your document needs to be written cleanly and properly; all tags must be closed, including tags which previously had no end tags in HTML 4.01; and elements and attributes must be in lowercase.
And now, on with the show…
The purpose of HTML is to deliver content in a structured way. In another tutorial, you will learn about CSS, or Cascading Style Sheets, which will allow you to present your content stylistically. For now, we will ignore things like colorization and placement, which is best left for CSS.
- Important concept:
- Separate content from presentation! Think of HTML as being like a raw web page, circa 1995, with no coloring or layout. CSS will do that for you. CSS can take that 1995 page and turn it into a modern-looking stylish page. However, CSS doesn’t have anything to do with actual content whatsoever. That’s what HTML is for!
HTML is made up of elements (or tags), which may have attributes.
An element, or tag, is a word or abbreviation surrounded by angle brackets, like so: <element>. An element tells the web browser (or PDA, or other document reader; collectively these are called User Agents) that something more than just plain text is going to need to happen. For instance, a word or phrase might be bold or italicized, or there may be an image or video or sound file, or a link to another page.
Elements must have closing tags, or must close themselves. For example: bold text might be formatted like this: <strong>This text is bold</strong>. However, because some tags don’t enclose content but simply present content themselves (like a line break or an image), they won’t have end tags, but will close themselves, like this:
This text has
<br />
a line break
or
Here is an image: <img src="folder/file.jpg" />
An attribute is something which brings specificity to an element. For example, you might want to put an image up on your website, but simply saying “image!” isn’t enough. The image must be defined further, especially with respect to its actual source file. An attribute looks like this: <element attribute=”whatever”>.
Here is a basic XHTML document:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>PageTitle</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
</body>
</html>
Try it out:
- copy and paste the code above into a text editor (I highly recommend Evrsoft’s 1st Page 2000 – the 2006 version is great but suffers from slowdown issues – and HTML-Kit).
- Save your file as basic.html (name it whatever you like, but be sure to include the .html extension).
- Now open the page in your web browser. You can do this in a number of ways, such as selecting “Open file…” from the File menu, or double-clicking on the file from within its folder. (Your setup may vary.)
You should see a completely blank page. That’s okay; we haven’t added any content yet. First, let me explain what’s actually going on, and then we’ll play around with stuff.
!DOCTYPE- This is your DTD, or Document Type Definition. This is important to tell the User Agent what kind of HTML you are presenting. You don’t know what your site’s visitors are using to view your page, so it’s crucial that you tell the application that you’re giving it a specific brand of HTML. In this scenario, we are using XHTML 1.0 Strict. The DTD doesn’t look like a normal tag.
html- This merely tells the User Agent to start reading the HTML. In XHTML, you must include an XML NameSpace, or xmlns, attribute. This also helps the User Agent to determine what exactly is being displayed. The other attributes define what language your document is written in. This is helpful, for example, in search engines, when a user only wants to search pages written in a specific language.
head- This is where you put things that will not literally be displayed in the browser window. For example, CSS rules, JavaScripting, meta tags (see below), etc.
title- This is what defines the name of the page as displayed at the top of the application, in the title bar (in Windows, this is the blue bar with the minimize/maximize and close buttons).
meta- These tags can contain all sorts of information about the page being viewed, such as the author, the author’s email address, copyright information, character encoding, and the description and keywords used to help index your site in search engines or other directories.
body- This is where things get fun! Virtually anything you put here will be viewable on the web page. This is where the actual content goes.
(Notice that html, head, title, and body have their own closing tags, while meta does not.)
Now that you know all the boring stuff, let’s make something cool happen. From this point on, you’ll be putting your content in between the body tags.
In your HTML document, between the body tags, type this:
Hello, world!
Save it, then refresh your browser. You should see a blank page with the words you added to your document.
Now, we’ll want to try something more interesting. Here are some basic things you can do:
| tag | what it does |
|---|---|
| <strong> | makes text strong, or bold |
| <em> | emphasises text (italics) |
| <big> | makes text bigger |
| <small> | makes text smaller |
| <sub> | enables subscript, as in H2O |
| <sup> | enables superscript,as in 4100 |
| <pre> |
prints text exactly as you type it |
| <code> | presents HTML code- used extensively throughout this tutorial! |
| <blockquote> | displays a block quote, on it’s own line:“I know not with what weapons World War III will be fought, but World War IV will be fought with sticks and stones.” -Dr. Albert Einstein |
| <q> | displays a smaller quoteinline |
| <hr /> | makes a horizontal rule, or line: |
| <br /> | creates a ↵ line break |
| <img /> | displays an image; needs the src attribute to define what image. |
You probably noticed that most of those are tags that you would wrap around a section of text, and some stand alone and are self-closing, because they are content in and of themselves. Would you wrap an image around text? I’d like to see what that would look like! A horizontal rule? A line break? No, but a paragraph of text must define the beginning and the end to make sense.
Here’s how you wrap an element around, say, a phrase:
<strong>This text will be bold</strong>
And here’s how a self-closing element should look:
There will be a line break next.<br />
- Important concept:
- Don’t forget to put a space between the last character and the slash!
You can also wrap more than one tag around content; e.g., if you want to make text both bold and italicized.
<strong><em>This text will be bold and italicized!</em></strong>
Notice the color coding. It doesn’t really matter what order you put them in, as long as they are nested properly. Nesting is when you put the closing tags in the opposite order of the opening tags. You can think of it like a stack of bowls: one bowl will hold another, and the left side of the carrying bowl will be on the outside, as will the right. Bowls cannot pass through each other (without disastrous results)!
Here’s how NOT to nest tags!
<strong>This text <em>contains bold and</strong> italic text.</em>
Now, try this: go to your “View” menu at the top of your browser and select “View Source”. See if you can spot some familiar elements! Don’t worry if you don’t understand it, or if you feel overwhelmed. There’s still a lot to go over, but it’s actually really simple stuff.
That’s all for now. In upcoming tutorials, we’ll cover images, links, lists, tables… and CSS! Stay fed…
For more information, see:
- Wikipedia.org: Html
- HTMLSource
- HTMLDog: Beginning HTML
- HTML.net HTML tutorial
- HTMLQuick.com
- The World Wide Web Consortium’s XHTML 1.0 Specification
- The World Wide Web Consortium’s HTML 4.01 Specification
Popularity: 3% [?]
- HTML%20Beginner%27s%20Course%2C%20part%201&bodytext=HTML%20stands%20for%20HyperText%20Markup%20Language.%20This%20is%20the%20language%20of%20the%20world%20wide%20web%2C%20and%20its%20lifespan%20thus%20far%20indicates%20that%20it%20is%20a%20successful%20way%20to%20format%20documents%20on%20the%20internet.%20In%20this%20tutorial%2C%20we%27ll%20cover%20the%20basics%20of%20creating%20an%20HTML%20p" title="Digg">
- HTML%20Beginner%27s%20Course%2C%20part%201¬es=HTML%20stands%20for%20HyperText%20Markup%20Language.%20This%20is%20the%20language%20of%20the%20world%20wide%20web%2C%20and%20its%20lifespan%20thus%20far%20indicates%20that%20it%20is%20a%20successful%20way%20to%20format%20documents%20on%20the%20internet.%20In%20this%20tutorial%2C%20we%27ll%20cover%20the%20basics%20of%20creating%20an%20HTML%20p" title="del.icio.us">
- HTML%20Beginner%27s%20Course%2C%20part%201&annotation=HTML%20stands%20for%20HyperText%20Markup%20Language.%20This%20is%20the%20language%20of%20the%20world%20wide%20web%2C%20and%20its%20lifespan%20thus%20far%20indicates%20that%20it%20is%20a%20successful%20way%20to%20format%20documents%20on%20the%20internet.%20In%20this%20tutorial%2C%20we%27ll%20cover%20the%20basics%20of%20creating%20an%20HTML%20p" title="Google Bookmarks">
- HTML%20Beginner%27s%20Course%2C%20part%201&source=jeremyjarratt.com+x+jeremy+jarratt+is+a+blogger%2C+musician%2C+artist%2C+poet%2C+web+developer%2Fdesigner%2C+armchair+philosophizer%2C+teller+of+tales%2C+and+roustabout.+Also%2C+something+he+calls+a+%26quot%3Bbehavioral+artist.%26quot%3B+%28Not+sure.%29+This+is+his+latest+home+on+teh+internets+-+where+he+stores+his+swear+words%2C+when+he%26%23039%3Bs+not+hurling+them+at+the+sun+in+vain.&summary=HTML%20stands%20for%20HyperText%20Markup%20Language.%20This%20is%20the%20language%20of%20the%20world%20wide%20web%2C%20and%20its%20lifespan%20thus%20far%20indicates%20that%20it%20is%20a%20successful%20way%20to%20format%20documents%20on%20the%20internet.%20In%20this%20tutorial%2C%20we%27ll%20cover%20the%20basics%20of%20creating%20an%20HTML%20p" title="LinkedIn">
- HTML%20Beginner%27s%20Course%2C%20part%201&body=HTML%20stands%20for%20HyperText%20Markup%20Language.%20This%20is%20the%20language%20of%20the%20world%20wide%20web%2C%20and%20its%20lifespan%20thus%20far%20indicates%20that%20it%20is%20a%20successful%20way%20to%20format%20documents%20on%20the%20internet.%20In%20this%20tutorial%2C%20we%27ll%20cover%20the%20basics%20of%20creating%20an%20HTML%20p" title="Ping.fm">
- HTML%20Beginner%27s%20Course%2C%20part%201&opener=bm&ei=UTF-8&d=HTML%20stands%20for%20HyperText%20Markup%20Language.%20This%20is%20the%20language%20of%20the%20world%20wide%20web%2C%20and%20its%20lifespan%20thus%20far%20indicates%20that%20it%20is%20a%20successful%20way%20to%20format%20documents%20on%20the%20internet.%20In%20this%20tutorial%2C%20we%27ll%20cover%20the%20basics%20of%20creating%20an%20HTML%20p" title="Yahoo! Bookmarks">
- HTML%20Beginner%27s%20Course%2C%20part%201&submitSummary=HTML%20stands%20for%20HyperText%20Markup%20Language.%20This%20is%20the%20language%20of%20the%20world%20wide%20web%2C%20and%20its%20lifespan%20thus%20far%20indicates%20that%20it%20is%20a%20successful%20way%20to%20format%20documents%20on%20the%20internet.%20In%20this%20tutorial%2C%20we%27ll%20cover%20the%20basics%20of%20creating%20an%20HTML%20p&submitCategory=science&submitAssetType=text" title="Yahoo! Buzz">
Loading ...
Just a quick note: you can subscribe to an RSS feed for the Tutorials section to keep up with any new tutes. If you don’t know what this means, check this out.
Dude,
Very nice work, I mean that. I am going to give this a whilr this weekend once I am feeling a lil better, sinus crap. Ahh, anywho say hello to Holly for me and keep up the info, this is great!