Buffer

Detailed and Practical HTML Tutorial

No need to be overly concerned. Understanding the the background of HTML will prepare you for any new HTML changes that is sure to come in the future.

Once you know how to structure a few HTML tags you’ll be on your way to learning lots more in the HTML world.

What happens when you look for information on the Web?

Your computer has to locate that information. It does this by using HTTP protocol. Its very usage for retrieving inter-linked resources led to the creation of the World Wide Web.

HTTP is a request/response standard of a client and a server. A client is the end-user, you – and the server is the web site where the desired information is.

Your browser interprets the text and the HTML tags to show you formatted text and images that will appear on you screen.

Note:

HTTP is not the only protocol used on the Internet. You’ve probably heard of a few others such as Simple Mail Transfer Protocol (SMTP).

It’s an Internet standard for electronic mail (e-mail) transmission across Internet Protocol (IP) networks.

Another is File Transfer Protocol (FTP). It is a standard network protocol used to exchange and manipulate files over an Internet Protocol computer network, such as the Internet.

Who or what is the World Wide Web Consortium (W3C)?

They are the main international standards organization for the World Wide Web or WWW or W3 or simply… the web.

Currently, the W3C has 180 members who come from academic, government, and from various commercial organizations around the world.

These folks work together to the development standards for the World Wide Web. … gotta have standards to make this stuff work for you and I, right?   Detailed and Practical HTML Tutorial

Tip: Want to read about W3C’s definition of the HTML, XML, or XHTML?

Go to http://www.w3.org to browse the main W3C page. Click on the subject you want. I just want to let you know that tons of information is available to you. This HTML tutorial gets you started in the right direction.

Detailed and Practical HTML Tutorial

Where does XHTML fit in?

XHTML stands for extensible Hypertext Markup Language – the latest version is 2.0.

It really is the first major change to the HTML language in a very long time. Why did the W3C do this? I’m glad you asked.

The W3C folks wanted add the structure of another widely used language, called XML, to HTML. It makes sense because XML has very flexible characteristics within it.

What is XML?

This is the newest language that the W3C has developed. The XML acronym stands for extensible Markup Language. In order to appreciate XML, it is important to understand why it was created.

XML was created so that richly structured documents could be used over the web. XML’s design goals emphasize simplicity, generality, and usability over the Internet.

You can use this HTML tutorial to learn the basics of this widely used mark-up language. Don’t be alarmed — I didn’t say programming language. No need to worry.

Once you know how to structure a few HTML tags you’ll be on your way to learning lots more in the HTML world.

Learning how to use some common HTML design tags will increase your comfort level — without having to learn programming!

Using a text editor

I recommend using Microsoft’s Notepad for PC users.

If you an Apple box then use Mac Simple Text (shipped with older Macs) or Text Edit (currently ships with the latest Macs).

UNIX vi Editor is the text editor used on Linux/UNIX operating systems.

More than likely you already have one of these editors on your machine. You can learn to create your own web pages by following my examples on this website.

What’s does WYSIWYG mean?

This is an acronym for What You See Is What You Get. These types of editors are HTML editors that attempt to display the Web page as it will show on the browser.

They are visual editors, and you don’t manipulate the code directly. Some HTML WYSIWYG editors also include a text editor, while others are purely WYSIWYG.

Tip: If you are a newbie then I recommend that you ignore the WYSIWYG programs such as Adobe’s Dreamweaver and Microsoft’s FrontPage for the time being.

Instead, I suggest that you focus on learning HTML. This will give you a solid foundation from which to mushroom your talents.

On the other hand who am to stand in the way of progress! (smile). If you are ready to move up to Dreamweaver then click on this Abobe link and then select Dreamweaver from the product menu.

What are elements?

Simply put they are called tags. Tags are the elements that tell a web page how to behave.

Tags are created and defined by the World Wide Web Consortium.

They act as indicators to your web browser as to how the document is to be interpreted by the browser and ultimately presented on your computer screen.

Most of the time you’ll see tags used in pairs – with an opening tag and an ending tag.

You can use this HTML tutorial to learn the basics of this widely used mark-up language. If you are new to coding an HTML tag, there is need to worry.

Once you know how to structure a few HTML tags you’ll be on your way to learning lots more in the HTML world. It’ll be a snap!

Learning how to use some common HTML design tags will increase your comfort level — without having to learn any programming language.

Which Tags Are Mandatory?

Most tags are paired – this just means that a start tag is paired off with an ending tag or end tag. The End tag has a forward slash that’s positioned right after the first angle bracket ( … </ … ).

<html> and </html>

<head> and </head>

<title> and </title>

<body> and </body>

* All HTML documents, or docs for short, must begin with… the start <html> tag and end with the </html> tag.
* Let’s create a simple HTML doc. First, you must code the start <html> tag.
* After that you’ll code the next 3 required pairs of tags and then finish by coding the </html> end tag to complete it.
* The start <head> and end </head> tag is used to indicate information about the document – I cover this later.
* The <title> and </title> tags holds the information for your Title Bar – this bar is displayed at the top of any browser’s window. Since it has document info it’s coded within the <head> and </head> tags.
* The <body> and </body> tags are used to contain any text that is displayed in the HTML page.
* You’re also going add a non-required paired tag to let your document have some text to display.

Code The New Web Page

Code the following in your text editor. Add this sentence to the body to allow your browser to display some on your screen…

This sentence will be displayed on my new web page.

Your HTML code should look like this:
<html>
<head>
<title>My New Web Page</title>
</head>
<body>
This sentence will be displayed on my new web page.
</body>
</html>

Save the file in a folder where you keep HTML code – use lowercase characters with a document extension type of either .htm or .html.

Note:

Older browsers ONLY recognize the 3 character .htm extension.

o In the PC environment you double-click on the saved file.
o You will see a the following in your browser window…

Tip:

Mac and Linux/UNIX users see the help documentation for your respective operating systems to browse a saved HTML file.

Now we’ll use the bold tags to modify the text in the body section

Make My Text Bold

Let’s make some of the text bold in the body section. We easily do this by surrounding it with the bold tags — <b> and </b>.

You do not have create a new file (unless you want to). Just modify the existing HTML code — it’s easier. Why reinvent the wheel

The modified code should look like this in your text editor…

<html>
<head>
<title>Web Page With Bold Text</title>
</head>
<body>
This sentence will be displayed on the modified web page and…
<b>we’ll make these characters bold by using HTML bold tags!</b>
</body>
</html>
o Notice that the web page title has been changed.
o Save your file. Then double-click on it.
o Your browser will display the following…

Change My Web Page With More HTML Tags

Now you going to see the italic tags, (<em> and </em>), and underline tags, (<u> and </u>), work in this HTML tutorial.

Again, you can do this by surrounding your text with the proper HTML tags. We’ll also see how the break tag, (<br>), and the paragraph tags, (<p> and </p>), work.

By now you know you can modify your existing HTML code for simplicity.

Let’s have the code look like this…

<html>
<head>
<title>My Web Page With More HTML Tags</title>
</head>
<body>

<p>This sentence will be displayed on the modified web page and <em>we’ll make these characters italic by using HTML italic tags.</em></p>

<p>This next sentence shows some <u>text that is underlined.</u></p>

<p>This next sentence demonstrates how the break tag <br>starts text on a new line. It is also a tag that is not used in pairs.</p>
<p>Each of these examples is contained their own paragraph. As you can see this HTML tag can be very useful.</p>

</body>
</html>
* Save your file and then have you browser do its thing.

… if not, don’t sweat it. Just correct any errors you might find and have yourself a nice do-over! We’re all human.
* We’ve made of the text italic and we’ve underlined part of the text with our HTML tags. Also, the paragraph tags and a stand alone break tag was used in our HTML tutorial web page.
* You’ve also learned how italicize and bold your text. There are many other ways to format your text. We’ll explore some more widely used tags in the next HTML tutorial section.

You can use this HTML tutorial to learn the basics of this widely used mark-up language. This section tells you about XHTML requirements, headings, and how to build a web page with good form. An XHTML document is the same as an HTML document except we are going to add some more verbiage (…code). No need to be alarmed — its not complicated.

Once you know how to structure an XHTML doc you’ll be on your way to learning lots more in the XHTML world. It’ll be a snap!

Learning how to use some common HTML tags and XHTML tags will increase your ability to create a web page.

What Are The XHTML Requirements?

First we will add the <!DOCTYPE> tag. This is placed at the beginning of your file. It will indicate to your browser that this is an HTML file that conforms to the XHTMLstandard requirements.

A typical <!DOCTYPE> tap will look like this…

<!DOCTYPE html
PUBLIC ” – //W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1 – transitional.dtd”>

…and the HTML tag itself is different in an XHTML document.
We need to add the following attributes to it:

xmlns

xml:lang

lang

With these added attributes the HTML tag is now structured like this…

<html xmlns=”http://www.w3.org/1999/xhtml”
xml:lang=”en” lang=”en”>
* You probably noticed that the letters in <!DOCTYPE> are all in caps — this tag should aways be in caps. Also, an exclamation must appear before the word DOCTYPE.
* An XHTML web page requires a full <html> tag;
<html … lang=”en”>.
The HTML web only requires the <html> tag.
* When we use the xmlns attribute it links the document to the W3C’s definition of the always evolving XHTML language.
* To recap, remember that for an XHTML web page the <!DOCTYPE…> tag must be at the top and the full <html> tag is used.

<!DOCTYPE> Variations

There are three types of <!DOCTYPE…>tags…

Strict, Frameset, and Transitional.
* Strict
The Strict variation can be used when you know that your users are using one of the newer browsers.

Trouble is most of time you don’t know what browser is going to be used. So don’t worry about using this variation.

Anyhow, here’s the structure of it…

<!DOCTYPE html
PUBLIC ” – //W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1 – strict.dtd”>
* Frameset

The Frameset variation is used when you work in frames. Working in frames just means you are combining two or more HTML documents into one HTML document.

Most people do not create frames and they shy I away from them. In this HTML tutorial I recommend that you do NOT use frames if at all possible.

Here’s how this rarely used variation is put together…

<!DOCTYPE html
PUBLIC ” – //W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1 – frameset.dtd”>
* Transitional
The Transitional is used when you are not certain what browser is going to be used to view you web page.

I do highly recommend that you use this variation — like most folks! Using transitional is good practice. It’s a safe bet.

The transitional variation is structured like this…

<!DOCTYPE html
PUBLIC ” – //W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1 – transitional.dtd”>

Note:

You may want to indent some of your code if that makes it easier to read. I’ve chosen not to indent through out most of this HTML tutorial because of the screen limitations a some of my visitor’s equipment.

It’s your choice of course — what ever makes you comfortable.

XHTML Configuration

Let’s create your first the XHTML web page. Again you do not have create a new file unless you want to. Modify the existing HTML code.

The modified code should look like this in your text editor…

<!DOCTYPE html
PUBLIC ” – //W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1 – transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”
xml:lang=”en” lang=”en”>
<head>
<title>My XHTML Web Page</title>
</head>
<body>
This sentence will be displayed on my XHTML web page.
</body>
</html>

Save the file in a folder — remember to use lowercase characters with an extension type of either .htm or .html.

XHTML Code

When you add the XHTML code to the file it does not change the appearance. In this example only the <title> tags and the sentence within the <body> tags was modified.

In the next section of this HTML tutorial we’ll explore some more widely used tags.