Learning HTML: Part 1

In what hopefully will become a series, I’ll be showing the basics of HTML. It is the most basic primer I could think of so if you already know it you’ll likely be bored. But for those just starting, it might well do to get you off on the right foot.

Materials

Items you’ll need that aren’t provided here:

Lesson 1 – Creating the html file

An HTML file is just a text file with an extension (.html, .htm) that lets the computer know it should be opened with a browser. This means you can edit it without any fancy program.

Open your text editor of choice. Open a ‘new’ file if needed. Copy and paste this text into it:

<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first web page. </p>
<p>Do you like it?</p>
</body>
</html>

Now save the file to a place you can find it (your Desktop will do for now). Call it hello.html. If using Notepad, make sure the 2nd dropdown says ‘All Files .‘ or something similar or you’ll end up saving it with a .txt extension.

Now locate that file on your computer. You should see it has an icon for your default browser (if you see one that looks like a piece of paper, seen note above). Double-click on the file (or use Ctrl-O in your browser to find the file and open it). The file will open in your browser and you’ll see something like this.

Congratulations-you just made your first webpage. But what was all that for?

HTML Structure

Those bits you see in your text file surrounded by < and > are called tags. These are what constitute the ‘Markup’ in HyperText Markup Language. These tags tell the browser how to render your webpage. Tags come in two forms, enclosing, which means there is a tag that starts: <tag> Other text in between, which might include other tags, and a closing tag </tag> There are also self-closing tags that don’t have any text inside. The most common are <br /> (line break) and <hr /> (horizontal rule).

In order for a page to be ‘valid’, tags need to be nested. That means whenever you open a tag, you need to close any tags that come after it before you can close it.

Example of invalid markup

<html>
<head>
<title>My First Web Page
</head>
<body>
<h1>Hello World!
</p>
This is my first web page. </p>
Do you like it?
</html>
</body>

If you are the sort to run around the web looking at source files, you’ll actually see a lot of this, sadly. But you won’t do it, right? A handy way to help yourself learn not to is to use indentation. That’s where you use tabs or spaces in your text file to help you visually see how tags are nested.

Every webpage is required to have three tags: head, title and body. The html tag wraps them all up in a pretty package for the browser.

<head> Tags

Tags in the head part of the document don’t show up on a web page. They are used to impart information about the page- who wrote it, what it’s about, how to display it and more.

Doctype is short for ‘document type definition’. By using a doctype at the start of our document we can tell the browser what rules it should follow when rendering the webpage. For these lessons, we are going to follow xHTML 1.0, so at the beginning of your page replace the opening html tag with these two lines:

<!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">

so it looks like:

<!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>My First Web Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first web page. </p>
<p>Do you like it?</p>
</body>
</html>

The first line tells the browser where to find the rules. The second line we’ve amended to add some attributes for the html tag telling it what namespace and language to use. I’m not going to go into detail on these for now-you can Google them if you like.

Later we’ll add more tags to your document’s <head> section but for now, let’s move onto something you’ll see.

Body Tags

The <body> contains what people see on your webpage. You use tags to mark up your text semantically, telling the browser what it is. By doing this, you create an outline-rather like what you would make in a word processor.

There are two types of body tags: Block and Inline.

Block Level Tags

Block level tags are used to group bits of text together. Unless told otherwise, they always push themselves onto a new line below any previous block tag.

Header Tags

The most important thing to remember is: tags are for setting up the structure of your document, not for setting styles or saying how it should look. We’ll do that in a bit.

Header tags outline your document by breaking it up into different sections. There are six header tags: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> with <h1> being the most important and <h6> being the least. Always keep your header tags in a logical order-don’t jump from a <h2> to a <h4>.

With most sites, there is only one <h1> tag on a page, usually the site name or possibly article title. After that you’ll have <h2> and content under it that may have other header tags. When you need to jump back and have another section that’s as important, you’ll use another <h2> tag.

Paragraph tags

The <p> tag is wrapped around a paragraph of text. You’ll use this tag the most.

Lists

We’ll cover lists in another lesson.

There are more block level tags, but we’ll not cover those now.

Inline Tags

Inline tags are tags that are shown in-line with other tags or text. You can use these within block level tags to bring special attention to pieces of your text. The most commonly used are <strong> (think loud) and <em> (emphasis).

Lesson Two

Replace the text in your text editor with this text:

<!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>My First Web Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first web page. </p>
<h2>Who I Am</h2>
<p>My name is Fred. </p>
<p>I have a cat named Marcus. He and I like to go for walks. </p>
<h2>What I do</h2>
<p>I work in a flower shop. Every day I arrange flowers for people.</p>
<p>I like flowers, do you?</p>
<h3>Flowers I like</h3>
<p>I like daisies and roses and mums and tulips.</p>
</body>
</html>

Save and refresh your browser. It should look like this.

Notice the header tags. The <h2> tags separate major sections of the page. The <h3> tag heads up a sub-section within the larger <h2> ‘What I do’ section. The paragraph tags enclose your content under each of these headings.

Okay, the text is completely inane. As part of your homework, why don’t you change some of the text to be more what you would have? Leave the tags and just change the text inside. You can add more headers and paragraphs too.

…tune in for more later.


1 That isn’t a slam on Microsoft, rather it’s due to the browser having rendering issues that I don’t want to address (okay, maybe it’s a little slam).

2 The link provided is to the basic executable (single file) version of SciTE. More versions, including multi-lingual ones, are also available here: http://scintilla.sourceforge.net/SciTEDownload.html.


Add Your Comment