== Basic HTML Basics
 ==

Heading text

introduction to html --Mbepera (talk) 04:36, 24 November 2012 (UTC)by gabriel german
^{Superscript text} kampala international university (kiu)

Introduction

The building block of any webpage is the language called Hypertext Markup Language (HTML).It is made up with what is so called Tags. Understanding how to write HTML tags to build webpage is one step towards developing webpage and eventually a website.

Overview

This module will attempt to explain what HTML is and how to create a basic HTML document for use on WWW servers. We will go over the essential parts of an HTML document as well as discuss some of the most commonly used options available.

Objective

On completion of this module you will be able to • identify and use different HTML formatting codes. • create and modify HTML documents using a simple text editor. • write a series of web pages that present information, graphics, and provide hypertext links to other documents on the Internet.

What is HTML?

HTML is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet. It is relatively easy to learn, with the basics being accessible to most people in one sitting; and quite powerful in what it allows you to create. It is constantly undergoing revision and evolution to meet the demands and requirements of the growing Internet audience under the direction of the » W3C, the organisation charged with designing and maintaining the language.

The definition of HTML is HyperText Markup Language. • Hyper is the opposite of linear. It used to be that computer programs had to move in a linear fashion. This before this, this before this, and so on. HTML does not hold to that pattern and allows the person viewing the World Wide Web page to go anywhere, any time they want. • HyperText is the method by which you move around on the web — by clicking on special text called hyperlinks which bring you to the next page. The fact that it is hyper just means it is not linear — i.e. you can go to any place on the Internet whenever you want by clicking on links — there is no set order to do things in. • Markup is what HTML tags do to the text inside them. They mark it as a certain type of text (italicised text, for example). • HTML is a Language, as it has code-words and syntax like any other language.

What is an HTML File?

• HTML stands for Hyper Text Markup Language • An HTML file is a text file containing small markup tags • The markup tags tell the Web browser how to display the page • An HTML file must have an htm or html file extension • An HTML file can be created using a simple text editor

How does it work?

HTML consists of a series of short codes typed into a text-file by the site author — these are the tags. The text is then saved as a html file, and viewed through a browser, like Internet Explorer or Netscape Navigator. This browser reads the file and translates the text into a visible form, hopefully rendering the page as the author had intended. Writing your own HTML entails using tags correctly to create your vision. You can use anything from a rudimentary text-editor to a powerful graphical editor to create HTML pages.

History of HTML

HTML is an evolving language. It doesn't stay the same for long before a revised set of standards and specifications are brought in to allow easier creation of prettier and more efficient sites.

HTML 1.0

HTML 1.0 was the first release of HTML to the world. Not many people were involved in website creation at the time, and the language was very limiting. There really wasn't much you could do with it bar getting some simple text onto the web. But then, just that got the beardos a-foamin' back in the day.

HTML 2.0

HTML 2.0 included everything from the original 1.0 specification but added a few new features to the mix. HTML 2.0 was the standard for website design until January 1997 and defined many core HTML features for the first time.

HTML 3.0

More and more people were getting into the HTML game around now, and while the previous standards offered some decent abilities to webmasters (as they became known), they thirsted for more abilities and tags. They wanted to enhance the look of their sites. This is where trouble started. » Netscape at the time was the clear leader in the browser market. To appease the cries of the HTML authors, they introduced new proprietary tags and attributes into their Netscape Navigator browser. These new abilities were called Netscape extension tags. This caused big problems as other browsers tried to replicate the effects of these tags so as not to be left behind but could not get their browsers to display things the same way. This meant that if you designed a page with Netscape ETs, the page would look bad in other browsers. This caused confusion and irritation for the markup pioneers.

At this time, a HTML working group, led by a man named » Dave Raggett introduced a new HTML draft, HTML 3.0. It included many new and improved abilities for HTML, and promised far more powerful opportunities for webmasters to design their pages. Sadly, the browsers were awfully slow in implementing any of the new improvements, only adding in a few and leaving out the rest. Partly, this failure can be attributed to the size of the overhaul; and so the HTML 3.0 spec was abandoned.

   Thankfully, the people in charge noted this and so future improvements were always designed to be modular. This meant they could be added in stages, which makes it easier on the browser companies.

HTML 3.2 (wilbur)

The browser-specific tags kept coming, and it became increasingly apparent that a standard needed to be found. To this end, the World Wide Web Consortium (abbreviated to the W3C) was founded in 1994 to standardise the language and keep it evolving in the right direction. Their first work was named WILBUR, and later became known as HTML 3.2. This was a toned-down change to the existing standards, leaving many of the big steps forward for later versions. Most of the extensions tags that had been introduced by Netscape (and to a lesser-extent, Microsoft) did not make it into these new standards. It soon caught on and became the official standard in January '97, and today practically all browsers support it fully.

HTML 4.0 (cougar)

HTML 4.0 was a large evolution of the HTML standards, and the last iteration of classic HTML. Early in development it had the code-name COUGAR. Most of the new functionality brought in this time is from the ill-fated HTML 3.0 spec, as well as a host of trimmings on old tags, a focus on internationalisation, and support for HTML's new supporting presentational language, cascading stylesheets. HTML 4.0 was recommended by the W3C in December '97 and became the official standard in April 1998. Browser support was undertaken surprisingly earnestly by Microsoft in their Internet Explorer browser, and the market-leading IE5 (and current successor IE6) have excellent support for almost all of the new tags and attributes. In comparison, Netscape's terribly flawed Navigator 4.7 was crap when it came to HTML 4.0 and even basic CSS. Navigator 6 however, is a vast improvement. Once HTML 4.0 had been out for a little while, the documentation was revised and corrected in a few minor ways and was entitled HTML 4.01; the final version of the specification.

XHTML 1.0 Close to the beginning of the 21st century the W3C issued their » specifications of XHTML 1.0 as a recommendation. Since January 26, 2000 it stands as joint-standard with HTML 4.01. XHTML marks a departure from the way new specs have worked — it is an entirely new branch of HTML, taking in ideas from » XML, which is a far more complicated markup language than HTML. There aren't many new or deprecated tags and attributes in this version of HTML, but there are things that have changed with a view of increased accessibility and functionality. It's mainly just a new set of coding rules. For more about XHTML click here to go to module 7 that discusses more of it. Document Tags By "document tags," I mean the tags which divide up a Web page into its basic sections, such as the header information and the part of the page which contains the displayed text and graphics. This may seem confusing right now. Just hang on. 1. HTML The first and last tags in a document should always be the HTML tags. These are the tags that tell a Web browser where the HTML in your document begins and ends. The absolute most basic of all possible Web documents is: <HTML> </HTML> That's it. If you were to load such a page into a Web browser, it wouldn't do anything except give you a blank screen, but it is technically a valid Web page. Obviously, you'll want more than that. 2. HEAD The HEAD tags contain all of the document's header information. When I say "header," I don't mean what appears at the top of the browser window, but things like the document title and so on. 3. TITLE This container is placed within the HEAD structure. Between the TITLE tags, you should have the title of your document. This will appear at the top of the browser's title bar, and also appears in the history list. Finally, the contents of the TITLE container go into your bookmark file, if you create a bookmark to a page. What you type should probably be something which indicates the document's contents, but it doesn't have to be. The length of the title is pretty much unlimited, but don't go overboard. Users will either sneer at or be confused by exceedingly long titles. If you don't type anything between the TITLE tags, or don't include the TITLE tags at all -- remember the blank document in the HTML section earlier? -- then the browser will typically use the actual file name for the title. Therefore, a document titled "TCh4ex4.html" will have that name appear in the history list. Again, you can choose to do this, but it will likely generate either confusion or contempt. You should only have one TITLE container per document. At one point, it was possible to create "dancing titles" by including multiple TITLE tags. Not only is this a savage abuse of HTML, but the effect can only be seen in certain versions of certain browsers. Therefore, it should be avoided at all costs.

4. BODY BODY comes after the HEAD structure. Between the BODY tags, you find all of the stuff that gets displayed in the browser window. All of the text, the graphics, and links, and so on -- these things occur between the BODY tags. So, putting everything we've covered thus far into one file, we have: <HTML> <HEAD>

 <TITLE>Document Title</TITLE>

</HEAD> <BODY> </BODY> </HTML>

Let's look at the above block of HTML again, but this time with container lines sketched in. Note that the TITLE tags and text have been rearranged to make it easier to draw in the container lines. The rearrangement of the text does not in any way change the resulting Web page's appearance.

5. Comment Tags If you want to leave yourself notes in an HTML document, but don't want those notes to show up in the browser window, you need to use the comment tag. To do that, you would do the following: We've already seen some of that in the way a Web document is split into two main sections: the document's header and body. In this chapter, we're going to get into some of the structures within the BODY. 6. Headings The heading structures are most commonly used to set apart document or section titles. For example, the word "Headings" at the beginning of this section is a heading. So is this document's title (it's at the top of the page, in case you somehow missed it). Remember that these heading structures go into the body of the document. The headings being discussed here have nothing to do with the HEAD structure from the previous chapter. There are six levels of headings, from Heading 1 through Heading 6. Heading 1 (H1) is "most important" and Heading 6 (H6) is "least important." By default, browsers will display the six heading levels in the same font, with the point size decreasing as the importance of the heading decreases. Here are all six HTML pairs, in descending order of importance:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

These six lines, when placed into an HTML document, will simply display the six levels of headings. Take a look Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6

If you have a browser which is set close to its default settings, you'll notice that the text for the last two headings gets pretty small. This leads to some page designers using H6 for the fine print at the bottom of pages. This is a mistake, not to mention an abuse of the heading structure. As you no doubt know, many browsers allow the user to set the size of each element, including the headings. If a user sets H6 to a size of 18 point, the fine print won't be so fine any more! Remember: you cannot guarantee that your document will appear to other people exactly as it does to you. 7. Paragraphs As you might suspect, paragraphs are quite common in Web pages. They are one of the most basic structures in HTML. If you regard a document as a collection of structures and sub-structures, you may come up with something like: The overall structure is a page. The page is composed of a number of sections, each of which is composed of one or more paragraphs. Each paragraph is composed of words, and each word of letters. Admittedly, this is a simplified way of looking at text, but it will do for our purposes. The furthest HTML goes down this progression is to the paragraph level.

The beginning of a paragraph is marked by

, and the end by

. This lesson is obviously filled with examples of this container, and you can look at the following example page to get a more direct idea of how the paragraph tag works.

The actual HTML:

Paragraphs can often be quite long, wandering on with no clear sense of direction or purpose, boring the reader and obscuring the point of the message (if any) contained within the text. This sort of paragraph usually deserves to be broken up into several paragraphs, since its sheer bulk dissuades the reader from attempting to plumb its depths.

On the other hand, they can be pretty short.

Really short.

Cool?

...would appear as follows. Paragraphs can often be quite long, wandering on with no clear sense of direction or purpose, boring the reader and obscuring the point of the message (if any) contained within the text. This sort of paragraph usually deserves to be broken up into several paragraphs, since its sheer bulk dissuades the reader from attempting to plumb its depths. On the other hand, they can be pretty short. Really short. Cool? 8. Line Break So what if you want to end a line after a certain word, but don't want to start a new paragraph? Well, what you need is a line break, which is invoked by using the
tag. This forces a line break wherever you place it in the content (that is, whatever is after the
tag will start from the left margin of the next line on the screen.) And no, there is no
tag. The line break tag is -- that's right! -- an empty tag. And when you think about it, this makes sense. The concept of a line break beginning and ending doesn't really work, since a line break is a one-shot occurrence. Try it yourself, or look at an example below This HTML:

If you want to force a line break for some reason, but it doesn't make sense to start a new paragraph, then you can use the line break tag just as I will do at the end of this sentence.
See the forced display on the next line?
How about there?
Or there?

...is displayed as the following.

If you want to force a line break for some reason, but it doesn't make sense to start a new paragraph, then you can use the line break tag just as I will do at the end of this sentence. See the forced display on the next line? How about there? Or there?

9. Blockquote Blockquotes are handy for those long pieces of text which are quoted material and therefore need to be set apart and indented. That is exactly what blockquote does. For example: This section of text is surrounded by the blockquote tags. A blockquote can exist inside of a paragraph, and always lives on its own line (which is to say, there is an implied line break before and after the blockquote, just as with headings or paragraphs themselves). Blockquotes are set up as follows:

...text...

Just like most other things in HTML, it's a container. 10. Lists While simple in concept, lists can be very powerful in execution. There are three types of lists: unordered lists, ordered lists, and definition lists. The first two are very similar in structure, while definition lists have a unique setup. a) Unordered Lists The term "unordered list" may be a bit unfamiliar to you, but odds are you've heard of the "bullet list." That's exactly what an unordered list is -- a list of items, each one preceded by a "bullet" (a distinctive character; typically, a small black circle).

The list begins and ends with the tags

and

respectively. Each item in the list is marked using the

tag, which stands for "List Item."

has a corresponding

, but this closing tag is not required to end the list item (although you could use one if you really wanted to). You can use as many list items as you like, up to your browser's built-in maximum, if any.

Here's the markup for a simple list:

Monday
Tuesday
Wednesday
Thursday
Friday

If you loaded an HTML page containing the markup above, you would see the days of the week, each one preceded by a "bullet." To wit: 1. Monday 2. Tuesday 3. Wednesday 4. Thursday 5. Friday

Almost anything can be put into a list item -- line breaks, entire paragraphs, images, links, or even other lists. For example:

Monday
Tuesday
Wednesday
- 6am - 9am
- 9am - 12n
- 12n - 3pm
- 3pm - 6pm
Thursday
Friday

In the above case, under "Wednesday" in the 'outer list,' you would find another unordered list (the three-hour blocks of time), which is referred to as a nested list. (In the markup above, I have indented the nested list for purposes of clarity; this is not required for the lists to work. Remember what I've said about whitespace...) Here's how it looks:

1. Monday 2. Tuesday 3. Wednesday o 6am - 9am o 9am - 12n o 12n - 3pm o 3pm - 6pm 4. Thursday 5. Friday

11. Ordered Lists

On the face of it, ordered lists look a lot like unordered lists, and a lot of the same rules apply to both constructs. The only difference in HTML is that instead of using

and

, an ordered list is contained within the tags

and

. Ordered lists are based on list items, just as unordered lists are.

However, when an ordered list is displayed in a Web browser, it uses an automatically generated sequence of item markers. In other words, the items are numbered. The markup for a simple ordered list, based on the first example in this lesson:

Monday
Tuesday
Wednesday
Thursday
Friday

The above markup will look similar to the previously discussed simple unordered list, with the important difference that each day of the week is numbered instead of preceded by a "bullet." In other words, it looks like this:

1. Monday 2. Tuesday 3. Wednesday 4. Thursday 5. Friday

Ordered lists are as nestable as unordered lists, and you can nest unordered lists in ordered lists, as well as the other way around. 12. Definition Lists

As you might expect, definition lists begin and end with the tags

and

. However, unlike the unordered and ordered lists, definition lists are not based on list items. They are instead based on term-definition pairs.

Here's the markup for a basic definition list:

Do: a deer, a female deer
Re: a drop of golden sun
Mi: a name I call myself
Fa: a long, long way to run
Sol: a needle pulling thread
La: a note to follow so
Ti: a drink with jam and bread

A good way to think of it is that

stands for "Definition-list Term" and

stands for "Definition-list Definition." When the above list is displayed, it arranges the elements such that each term is associated with the corresponding definition. The exact arrangement of elements may vary from browser to browser. Here's how the above markup comes out: Do a deer, a female deer Re a drop of golden sun Mi a name I call myself Fa a long, long way to run Sol a needle pulling thread La a note to follow so Ti a drink with jam and bread Similar to ordered and unordered lists, definition lists can be arbitrarily long. Almost any structure can be placed in a

tag, but putting large-scale structures (such as paragraphs, headings, and other lists) in the

tag is not legal, according to the HTML Specification 2.0. You can leave out one part of a DT-DD pair, but this is not recommended. The Basic Anchor In order to create a hyperlink, you'll need to know two things. The first is the URL -- that is, the location -- of the file to which you want the link to go. The simplest possible anchor starts with <A> and ends with </A> a) Text Links A text link allows the programmer to create text that acts as a link, so that when it is clicked on by a user, it will transfer them to another web page. This tag allows you to make text into a link. The tag looks like <A HREF="url">. The starting tag is <A HREF="url"> and the closing tag is </A>. The text between these two tags is what is the link. The text "url" needs to be replaced with the address you are linking to. Here is an example using the link tag. ....<BODY> <A HREF="http://www.activejump.com"> Active Jump Home Page </A> </BODY>.... It will look like this My Homepage - Microsoft Internet Explorer Active Jump Home Page b) Internal Links An internal link allows you to link to another section on the same web page, so it basically scrolls the page up or down to the desired location. This is helpful to the user to quickly jump to the information he/she is looking for. The Anchors To link to a specific spot on a web page, you need to use a pair of anchors. One where you are linking from, and one where you would like to link to. The first one, is where you are linking from. It is very similar to the normal link tag. The starting tag looks like <A HREF="#name"> and the closing tag looks like </A>. The text between the two tags is what is the link. The text "name" identifies the anchor, giving it a name. The second anchor identifies where you are linking to. This tag must be placed in your HTML in the location where you would like to link to. The starting tag is <A NAME="name"> and the closing tag is </A>. It is not necessary that any text goes between these two tags as it is just identifying an area. The text "name", must match that in the first anchor, for the link to work. Here is an example of an internal link. ....<BODY> <A NAME="top"> </A> <A HREF="#top"> Go To Top Of Page </A> </BODY>.... It will look like this My Homepage - Microsoft Internet Explorer Go To Top Of Page c) Local Links A local link links from a web page to a directory on the users computer, such as C:\Windows\. This can be done with the normal link tag, but the place where the URL is normally typed will be replaced by the full directory. This link is very similar to the normal link tag, only the area it links to is different. The starting tag is <A HREF="file:///X:/..."> and the closing tag is </A>. The text between the tag is what text will be the link. In the area the link is linking to, the X is replaced with the drive letter and the ... is replaced with the directory you are linking to. Here is an example using the local link. ....<BODY> <A HREF="file:///C:/Windows/"> Click Here to go to C:\Windows </A> </BODY>.... It will look like this My Homepage - Microsoft Internet Explorer Click Here to go to C:\Windows d) Picture Links A picture link allows the programmer to create a picture that acts as a link, so that when it is clicked on by a user, it will transfer them to another web page. This tag allows you to make pictures into links. The tag looks like <A HREF="url">. The starting tag is <A HREF="url"> and the closing tag is </A>. Between these two tags is where you put the picture tag. The text "url" needs to be replaced with the address you are linking to. Here is an example using the picture link tag. ....<BODY> <A HREF="http://www.activejump.com"> <IMG SRC="images/ex.gif"> </A> </BODY>.... It will look like this My Homepage - Microsoft Internet Explorer e) Target Page The target page feature, allows a link to be created that when clicked on, will open a new browser window, so that the user will then have two windows in front of them, one, being the page with the link, and the other, the page the link went to. This allows you to have a link which opens a new window when clicked on. The tag for the link looks like TARGET="name". This adds on to the normal link tag, so the final result looks like <A HREF="url" TARGET="name">. The text, name, can be replaced with anything you want, which will be the name of the window that opens up. Choosing the same name for two links allows you to have both these links open in the same new window. ....<BODY> <A HREF="http://www.activejump.com" TARGET="new"> Go To Home Page In New Browser Window </A> </BODY>.... It will look like this Go To Home Page In New Browser Window Discussion Activity 2 What problems can you identify in the code? <HTML> <HEAD> <TITLE> My Home Page </HEAD> <BODY>

My Home Page

Hello

My pets include:

dogs,
cats, and
fish.

<IMG SRC="http://www.avu.edu.au/~jat/jat.jpg" ALT=":-)"

ALIGN=MIDDLE>

<ADDRESS> sophie@mtebe.edu.au </ADDRESS> </HTML> Post your answers in the discussion forum.

Revision Questions 1. If you are linking to a page on another server (not your own site), which type of URL do you use? 2. If linking to another page on your site, which type of URL do you use? Conclusion This module has provided an introduction to HTML. This means that there is a lot more to the language than was covered in the preceding few modules -- tables, the future of HTML, and so on which are covered in the coming modules.