my learning experiences in building a better web page

Basic HTML, Continued

Web Pages use basic markup to tell the computer to put the various elements of a web page. Most of these are element tags, but there are also formating tags, which are being depreciated. Which means the folks who write the standards for web browsers think you should use other ways to format stuff.

{NB: I am capitalizing the tags here for ease of reading. The actual standard is to have them all lower case}

Some useful element tags are :

<IMG > which specifies how a graphic element should appear on the page
<A > The anchor tag. This is the basis of web pages. It tells the web page where to send the user next. Usually, as you see here, they are blue and underlined and are useful for navigation, as you see along the bottom of the page.
< FORM > which generates forms for interactive web sites. Forms have other dependent elements, such at selection sets and text entry areas. In order to use the following tags, they have to be within the <FORM> tag. The < FORM > tag also has to have the modifiers action = which tells the program what to do next, and method = to tell how to use the data in the form. It will usually look like < FORM action=nextpage.php method="post" >
- <SELECT> which presents a list to from which to choose an option. You can do multiple selects. Usually there is just one option, but there can be more.
- <INPUT> there are several types of input fields.
  - There are text fields.
  - Text Areas, which are the same thing, but they can have multiple lines
  - there are radio buttons which usually exist as a named set. Radio buttons are mutually exclusive in their set.
  - Text boxes like radio buttons usually exist in sets, but they are usually set up as multiple choice options.
- At the end of the form there is a submission button to process the form. There can be multiple submission buttons.
<TABLE> is good for lists of disparate data, like price lists, book catalogs, and fare information. In the days before the CSS standard, it was also used for formating pages.
and there there is the plain list, which comes in two flavors. <OL> which made up numbered lists, and <UL> which made up sort of random lists like this one. Lists can be nested, as you see here.

In addition to these standard tags there are also

<P>This separates paragraphs
<BR / >This does line breaks.
<DIV>This does page sections. This page does two columns with DIV tags. The sidebar is another DIV tag. In making your page easy to read, the DIV tag used with style sheets is your visitors best friend.
<SPAN>formats portions of your text for greater emphasis. Each span can have its own identifier.
<EM> stands for Emphasis. In the early standards, there were (and are) italic and bold tags, but they are being depreciated in favor of <EM> but if you want to have bold or italic, you can use SPAN or EM with better control over your text.

All tags have to have a begining and an end tag. For every <p > there has to be a matching </p > There are a couple sort of exceptons. In the case of tags like <img >, the ending / is at the end of the tag, like so: <img src="mycoolpicture.jpg" />

Here we are on page nine of this discussion on programming web pages, and we havn't done a single bit of programming yet. This is kind of silly, considering how easy the process is to make one. Now is the time to fix that.

so now the thing to do is to start up the text editor on your computer. Macs have something called text edit, Windows has something called "Notepad." You can include your own text and your own title, but you should keep the markup the way it is.

<head>
<title>
Ode to the 44th President
</title>
</head>
<body>
I met a traveller from an antique land <br />
Who said: "Two vast and trunkless legs of stone<br />
Stand in the desert. Near them on the sand,<br />
Half sunk, a shattered visage lies, whose frown<br />
And wrinkled lip and sneer of cold command<br />
Tell that its sculptor well those passions read<br />
Which yet survive, stamped on these lifeless things,<br />
The hand that mocked them and the heart that fed.<br />
And on the pedestal these words appear:<br />
`My name is 0bamandias, King of Kings:<br />
Look on my works, ye mighty, and despair!'<br />
Nothing beside remains. Round the decay<br />
Of that colossal wreck, boundless and bare,<br />
The lone and level sands stretch far away.<br />
</body>
</html>

You can save this to your web space or to your desktop. If you save it to your desktop, you can right click the file on your desktop and tell it to open with your favorite browser, or Internet Explorer as an alternative.

The first thing to note is that this is a pretty boring web page. Sure, the poem is great, but it exists all over the web space. Without getting into the details of pictures, there is a lot that can be done to make the page easier for the reader. Which brings up the next topic, CSS.

Resources

Basic HTML, Continued