Ready to tackle some HTML (Hypertext Markup Language)? Before you start, you may want to grab a coffee to keep you awake. This HTML tags tutorial will take you awhile to get through. There is a lot we have to cover. By the end of the tutorial should be able to write out your first [...]
Ready to tackle some HTML (Hypertext Markup Language)? Before you start, you may want to grab a coffee to keep you awake. This HTML tags tutorial will take you awhile to get through. There is a lot we have to cover. By the end of the tutorial should be able to write out your first HTML page, without a program!
Here we go.
What are HTML Tags?
HTML is composed of a series of HTML tags. These tags tell an internet browser how to display your web page. There are so many HTML tags you will have to learn, that by the end of this tutorial you may feel overwhelmed. That is why, if you need to get away for a bit, I have broken down this tutorial into manageable chunks. To each chunk I have given a heading.
Let me begin by showing you a very simple HTML tag that you will most likely use a lot. This tag is a divider tag <div></div>. Every HTML tag has a beginning and an end. The visible text or elements inside divider will be placed in between the two tags.
Some sources will tell you that a break tag <br> in your HTML does not need an end tag. The same goes for the paragraph tag <p>. Although it works to write <br> for every break, a better way to write it is <br />. And although every time you write <p> a new paragraph will be displayed, a better way to write it is with a closing tag after the paragraph </p>.
Example: <p> This is a proper way to write a HTML paragraph </p>.
Get into the habit of always starting AND ending all your HTML tags.
HTML tags never to be written using uppercase letters. Again, it will work, however with XHTML it will not. Again, learn to do it the right way. If your start writing your tags like this <DIV> > </DIV> it will be hard to get rid of the habit later.
QUICK SUMMARY:
1. All HTML is written using HTML tags.
2. Always end the tags you start.
3. Always use lowercase letters.
The 2 Major Sections to a Web Page.
The 2 major parts or sections to a web page. There the head section and the body section. Their tags look like this: <head> </head> and <body> </body>.
The Head Section
The head section contains all the information and meta data a web browser will need in order to properly display the body section. This information is also used by search engine robots and spiders. Some information you will find there is your web page keywords, description, title, and how may times a robot should visit.
The last part of the head section often provides hyperlink references to other pages it will need to display the page correctly. For example, perhaps you have a CSS (Cascading Style Sheet), or some JS Javascript used in a widget on your web site.
The Body Section
The body section contains the content of your web page. Within the content you will refer most often to the images you have stored on your web server and the cascading style sheet(s) you have made for your web site (you will learn how to create a cascading style sheet in another tutorial). You may also refer to other web pages and content stored on other web servers.
QUICK SUMMARY
1. There are two main sections to your web page, the head and body.
2. The head section contains information and meta data for search engines and your web browser.
3. The body section of your web page contains the content of your web page.
HTML Elements
On the very top of every HTML page you will see something like this:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Now what does that all mean? The following is a large quote from Wikipedia. I think it provides a more detailed answer than I can come up with. If you can not make heads or tails out of it, do not worry. It is not terribly important. However, for those of you who may find it interesting, and want to understand every HTML tag you are going to use, I included it as part of this HTML tutorial.
Beginning of quote ”
Element standards
HTML elements are defined in a series of freely-available open standards issued since 1995, initially by the IETF and subsequently by the W3C.
Since the early 1990s, manufacturers of user agents (e.g. web browsers) have often developed their own elements, some of which have been adopted in later standards. Other user agents may not recognise non-standard elements, and they may be ignored or displayed improperly.
In 1998, XML (a simplified form of SGML) introduced mechanisms to allow anyone to develop their own elements and incorporate them in XHTML documents, for use with XML-aware user agents.[2]
Subsequently, HTML 4.01 was rewritten in an XML-compatible form, XHTML 1.0 (eXtensible HTML). The elements in each are identical, and in most cases valid XHTML 1.0 documents will be valid or nearly-valid HTML 4.01 documents. This article mainly focuses on real HTML, unless noted otherwise; however, it remains applicable to XHTML. (See HTML for a discussion of the minor differences between the two).
Since the first version of HTML, several elements have become outmoded, and are deprecated in later standards, or do not appear at all, in which case they are invalid (and will be found invalid, and perhaps not displayed, by validating user agents).[3]
At present, the status of elements is complicated by the existence of three types of HTML 4.01 / XHTML 1.0 DTD:
- Transitional, which contain deprecated elements, but which were intended to provide a transitional period during which authors could update their practices;
- Frameset, which are versions of the Transitional DTDs which also allow authors to write frameset documents;
- Strict, which is the up-to date (as at 1999) form of HTML.
The first Standard (HTML 2.0) contained four deprecated elements, one of which was invalid in HTML 3.2. All four are invalid in HTML 4.01 Transitional, which also deprecated a further ten elements. All of these, plus two others, are invalid in HTML 4.01 Strict. While the frame elements are still current in the sense of being present in the Transitional and Frameset DTDs, there are no plans to preserve them in future standards, as their function has been largely replaced, and they are highly problematic for user accessibility.
(Strictly speaking, the most recent XHTML standard, XHTML 1.1 (2001), does not include frames at all; it is approximately equivalent to XHTML 1.0 Strict, but also includes the Ruby markup module.)[4]
A common source of confusion is the loose use of deprecated to refer to both deprecated and invalid status, and to elements which are expected to be formally deprecated in future.
” end of quote.
A Simple Web Page
Let’s look at simple web page.
<!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”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
</head>
<body>
<p> This is my first paragraph </p>
</body>
</html>
That is all there is to it. You have a web page. Copy and paste the code to your favorite HTML editor and preview it in an internet browser. If you open it with Dreamweaver CS4 it will look like this:
All you should see are what you placed in your body section: <p> This is my first paragraph</a>.
Let me explain the code you just used. Before I do this I will show you how you can add comments to HTML without it actually appearing on a web page in a browser. No one will see them unless they view the source files.
To add a comment you have to add these two HTML tags:
<!– here is a comment –>
The words, “here is a comment” will not appear in your page. I am going to add comments to the HTML of your page so that you know what each part means.
Here the same page again, except this time there are comments included in the HTML script.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<!– This tells an internet browser that the page it is an xhtml page and that it is written in HTML and that the script may contain some depreciated elements. –>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<!– This element describes schema (defines the structure of an XML document) from the http://www.w3.org/1999/xhtml namespace (do not worry if you do not understand what this means) –>
<head> <!– your opening head tag –>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <!– tells a internet browser that your document contains HTML and text –>
<title>Untitled Document</title> <!– your title –>
</head><!– your head closing tag –>
<body> <!– the beginning of the body section of your HTML page –>
<p> This is my first paragraph </p> <!– your paragraph–>
</body><!– body closing tag –>
</html><!– html closing tag –>
And that is all. Now you know how to create a HTML page.
It may be time for you to grab another coffee or quit for the day. You choose. Keep following our site updates. My next tutorial will teach you how to include some more HTML tags to your page to make it look slightly more interesting!
QUICK SUMMARY
1. You should know how to create a simple HTML page.
2. You should know the most important parts of every HTML page and what they mean.
3. You should know how to add comments to your HTML.
No related posts.
3 Responses
Share and enjoy!
If w3.org is linked to in every single page, what would happen if that site shut down? Would half the Internet be lost? I certainly don’t want that to happen.
Hello Nicholas. I am not sure I understand your question. If w3.org shut down, not half the internet would be lost. Just the links to that site would not work.