PCTalk.info

by **Spock** » Tue 2006 Apr 18 7:47

Q: What does HTML stand for?

A: HTML is an acronym meaning HyperText Markup Language.

Q: What is an HTML program?

A: An HTML program is nothing more than information of some type surrounded by tags telling your Internet Browser what to do with that information. The HTML files are simple text files that are read in one lime at a time and "interpreted" by your browser similar to the way a DOS Batch file is read and executed.

Q: What is the simplest HTML program it is possible to write?

A: An HTML skeleton as shown below would be the simplest program. It wouldn't do much but it would run with no errors.

Code: Select all: <html> <head> </head> <body> </body> </html>

Notice that all the "tags" shown so far require an opening tag and a closing tag. The tags are enclosed inside the less than symbol "<" and the greater than symbol ">". The closing tag is the same as the opening tag except that it has a slash symbol "/" between the "<" and the start of the tag name.

The html tag lets your browser know it is working with an HTML program.

The head tag sets aside general information about the program that may not even be seen but either helps the program to run or gives information about the program for those who know how to look for it.

The body tags is where your main program resides.

Q: That's all very nice I'm sure but don't you have to be a genius to be a programmer?

A: Not really or I wouldn't be able to do it! :oops:

All you need to know is the "Rules of Grammar" and a list of commands you are likely to need to use with their explanations. It would also help to have a reference handy in case something comes up where you need something you haven't used yet.

Think of it as going to the Deep South in the U.S. The natives all speak English, they must! Yet their speech is almost incomprehensible to someone who has not been there before. With just a little practice you will be sending out such invitations as, "Ya'll come on over fer a BBQ and bring yer old lady."

For those not conversant with Deep South American, that means, "You and your wife are invited to a party where the the main course will be various meats broiled over an open flame with flavoring added that is anywhere from mildly tasteful to so hot it may be confused with a 10 alarm fire."

by **Spock** » Tue 2006 Apr 18 7:47

Q: How about showing us a program that actually does something?

A: OK, let's take the HTML skeleton and add a single line that will print something out. Since this is a programming exercise, we will be printing our "Hello World!" as that is what all beginning programming students are expected to be able to do.

Here is the code:

Code: Select all: <html> <head> </head> <body> <p>Hello World!</p> </body> </html>

If you copy the code into an empty text fle created with Notepad and then change the file extention to either .htm or .html you will have written your first program.

Notice the new tag? The "p" stands for paragraph. If you want two paragraphs you could simply place both inside the "p" tags. The paragraph tag is one of the few tags that doesn't seem to need an explicit closing tag.

<p>Paragraph 1<p>Paragraph 2

works just as well as:

<p>Paragraph 1</p><p>Paragraph 2</p>

When you double click on the new file your Internet Browser will open and display the contents of your program. Not very exciting is it? Don't worry, there is a lot more you can do to spice things up. If you don't believe me, just browse the Internet. Almost every website you see is written in HTML or some derivative.

Why not change the information in your new program, save it, and re-run it just to test your newfound programming prowess. I will be back later with more for you to learn.

by **Spock** » Tue 2006 Apr 18 7:48

Q: I tried to add tabs and lots of blank spaces in my text but it just disappears. What happened!?

A: HTML could care less how many blank spaces you put in a sentence. It will remove all but one. In fact, it will also remove blank lines. To see this, copy and paste the following into a text file, change the extension to .htm, and run it.

Code: Select all: <html> <head> </head> <body> <p>Hello World!</p> </body> </html>

When using Internet Explorer it gets rid of everything in between the "Hello" and the "World" except for a single space. I don't use Netscape Navigator or Mozilla, so cannot comment on that except to say that it should do the same.

Q: That's all very nice but how do I get my text to format the way I want it?

A: That's where tables come in. A table is composed of rows and columns. You define the contents of all columns in each row before going on to the next row.

The code that would go into the body of your program for a simple two row, three column table would look like the following:

Code: Select all: <html> <head> <title>Simple Table Example</title> </head> <body> <table> <caption>this is a simple table</caption> <tr> <td>row 1, column 1</td> <td>row 1, column 2</td> <td>row 1, column 3</td> </tr> <tr> <td>row 2, column 1</td> <td>row 2, column 2</td> <td>row 2, column 3</td> </tr> </table> </body> </html>

I have introduced several new tags here, so will try my best to explain them all.

title is rather self explanatory. In IE, it will put the title in the title bar of your browser window when the HTML program is run. Makes it nice to know what the program is supposed to do.

table = the tag that actually indicates a table is being defined. It must be set up as a pair of open and close tags.

border and bordercolor are simply tag options that set the table border to black (#000000) and wide enough to be able to see it.

width is set so the table takes up the entire width of the browser window.

caption is a tag that allows you to print a table caption whereever you wish. in this case, the caption is aligned on the "bottom" of the table. Again, it requires a pair. If in doubt, it usually does no hard to always use a pair of tags. Sometimes I will start a program with nothing but pairs of tags, properly nested, to be filled in later with the appropriate information.

tr = table row. Again, you must use them in pairs, one pair for each row of your table.

td = table columns. WHAT! Why not use "tc"? Just to confuse us lowly users I guess. At this time I have no idea why it's td instead of tc. Probably tc is being used for a tag I haven't used yet.

by **Spock** » Tue 2006 Apr 18 7:50

Q: Alright, that's enough bits and pieces. I want to know how to set up a fancy page showing thumbnails in rows and columns. Can you show me how to do that?

A: Nothing could be easier.

How about if we add pop-up captions for the thumbnails and full titles, captions, copyright information, and date last changed for the full pictures as well?

I already have a base to start from, on my Croatia Tour Thumbnail Example Page but need to scale it down quite a bit to make it easier to digest.

OK, I have the basic framework in place, now I'm just waiting on some photos and respective information sheets. Once I have everything in place, I will be able to use it as a teaching aid.

by **Spock** » Sun 2006 Apr 23 10:49

In the meantime, on with the lesson ...

Q: I see a lot of posts but not much real programming. What happens 6 months after I've written my HTML master piece and I cannot remember how it works to make changes?

A: Any good photographer takes notes one way or another. With todays digital cameras, most of the information about parameters is recorded for you with the picture. Not so when programming. That's why comments are so important.

Let's look at my typical <head> section of code for the upcoming Photo Project.

Code: Select all: <html> <head> <title>PCTalk HTML Tutorial - Welcome page</title> <meta name="robots" content="NONE"> <meta name="description" content="Photo Display Project - Index"> <meta name="distribution" content="Global"> <meta name="rating" content="General"> <meta name="author" content="C. M. Vining"> <meta http-equiv="reply-to" content="*******@pctalk.info"> <meta http-equiv="Content-Language" content="English">  <style type="text/css" media="screen">  </style> <style type="text/css" media="print">  </style> </head> <body>

WOW! That's a lot of information! Actually, compared to some programs, it's very sparse since I'm trying to keep this simple. A lot of the information could probably be removed but I left it for "instructional" purposes.

Since we are discussing comments, I suppose I'd better start with that. A comment declaration starts with <!, followed by zero or more comments, followed by >. A comment starts and ends with "--", and does not contain any occurrence of "--".

This means that the following are all legal SGML comments:





<!>

Note that an "empty" comment tag, with just "--" characters, should always have a multiple of four "-" characters to be legal. (And yes, <!> is also a legal comment - it's the empty comment).

Due to some problems with being programmers not being able to count properly (remember, an even number of "--" are required?) there is a simplified rule for HTML comments that states:

An HTML comment begins with "" and does not contain "--" or ">" anywhere in the comment.

That simplified rule is the one I will always try to use in here.

by **Spock** » Sun 2006 Apr 23 10:50

Q: What does Meta mean?

A: Here are the Meta Tags all over again. Basically, they give internal information about the program for those who know where and how to look for it. Some HTML programs, especialy those that are hand coded, don't have any.

Code: Select all: <meta name="robots" content="NONE"> <meta name="description" content="Photo Display Project - Index"> <meta name="distribution" content="Global"> <meta name="rating" content="General"> <meta name="author" content="C. M. Vining"> <meta http-equiv="reply-to" content="*******@pctalk.info"> <meta http-equiv="Content-Language" content="English">

If you want to do more research on Meta Tags, I have a small section of my website where I've gathered together different references for HTML programming and Meta Tags in particular.

by **Spock** » Sun 2006 Apr 23 10:55

Q: What's all that style stuff?

A: Again, here is a copy of the particular section. The comment at the top explains why it's set up the way it is but not what it does.

Code: Select all:  <style type="text/css" media="screen">  </style> <style type="text/css" media="print">  </style>

A css file is a Cascading Style Sheet. In a nut shell, it gathers all your font, color, and size information in one place so, if you decide you want to change it, all changes will take place across your entire system of HTML code that uses the same style sheet. In other words, it gives everything the same look and feel.

There are actually two style sheets listed there.
style.css = the overall stylesheet for most of the program system.
print.css = the stylesheet used when the Print This Page button is clicked at the bottom of the page. It is my sometimes successful attempt to get the entire page to print on a standard printer no matter how wide the page appears to be.

I even have the code for the menu option included in the style.css file, but don't want to talk too much about style sheets right now as I have a feeling it would scare off too many casual users.

For now, let's agree that it's there and helps give a common look and feel. I will come back to this topic for more explanation later. I just wanted to touch on it now as it is in the code and I'm trying to go down the program linearly ... more or less. :wink:

by **Spock** » Sat 2006 May 13 12:14

I'm going to branch this discussion off into at least two additional topics. I will list them all below with a direct link so you won't have to go search for them.

HTML Programming for Beginners 2 - Index body

HTML Programming for Beginners 3 - Thumbnail program

HTML Programming for beginners 4 - Drivers

PCTalk.info

HTML Programming for beginners 1

HTML Programming for beginners 1

Re: HTML Programming for beginners

Re: HTML Programming for beginners

Re: HTML Programming for beginners

Re: HTML Programming for beginners

Re: HTML Programming for beginners

Re: HTML Programming for beginners

Re: HTML Programming for beginners

Who is online