Basic HTML Class

INSTRUCTIONS FOR CHANGING WEBSITE: A basic HTML lesson.

(HTML stands for hypertext markup language)

Lesson 1: HTML SOURCE:

a) right click on ANY WEBPAGE anywhere and view the source. Most webpages are generated using 'wizards' and are bloated and oversized, taking much longer to load. Your webpages should be much smaller and load faster. When you view other people's webpages you will see a lot of junk. When you view the source of your webpages you will begin to apprecaite the clean layout of hand coding your pages in NOTEPAD.

b) right click and view the source of your webpages. Scroll down and you will see an image tag that displays an image on the screen:

NOTE: Where you see the [ sign, replace it with the less than sign (shift comma) and where you see the ] sign, replace it with the greater than sign (shift period). If we put the tags in here you wouldn't see them.

[img src="somepic.jpg" height=500 align=right]

Some tags do not specify size - original photo size is used and most do not specify alignment.

Look at the text you wrote for the page and then look at the page to see how it displays. Use [p] to end a paragraph (with a space) and [br] to end a line (no space).

[b] and [/b] turn BOLD on and off
[i] and [/i] turn italic on and off
[u] and [/u] turn underline on and off
[center] and [/center] turn center alignment on and off.

[font size=+0 face=times color=blue] is a typical font tag and all letters after that will have those characteristics.

You can also use HEX CODES to pick specific shades of color. Go to google and look up "hex code color chart". For example, you can say [font color="b87333"] for a nice shade of gold. Compare that with sayig color=gold and you will see the subtle differences that hex codes allow you to use for shading.

You can also go small as in size=-1 or big as in size=+1 Go down to -5 or up to +5. Try these for variations in accenting specific phrases.

Remember that all html files start with [html and end with [/html] and there is the [TITLE]MY WEBPAGE TITLE[/title] and the [head] [/head] markers that search engines look in to find info on your page and the [body][/body] tags where most of your code/text/images go.

A complete body tag might be:

[body bgcolor=green background="somebak.jpg"] where you can use a photo to show behind all your text. CAREFUL: this usually makes text hard to read.

Lesson 2: HTML TABLES.

[table width=50% cellpadding=5 bgcolor=green] sets the width of this table to 50 percent of the available space, gives a 5 pixel margin of space and a background of green.

For various colors, look up hex color chart at google.

i.e. [table bgcolor="b87333"] giving a gold colored background.

You can use words, like color=white, black blue etc. or the hex codes to define colors.

[tr] and [/tr] start and end a row
[td] and [/td] start and end a column in a row, just like a spreadsheet.

So, a 2 column table might be:

[table width=90% cellpadding=20 border=5 bordercolor=aqua]
[tr]
[td align=right]Photo of big fish:[/td]
[td][center][img src="bigfish.jpg"][/center][br]
[font color=blue]HERE IS A BIG FISH[/td][/tr]
[tr]
[td align=right]Photo of small fish:[/td]
[td][center][img src="lilfish.jpg"][/center][br]
[font color=blue]HERE IS A SMALL FISH[/td][/tr]
[/table]

And making a list is easy:

The [li] tag starts a new list item.

Use the [ul] tag to create a bullet list and
use the [ol] tag to create a numbered list. Put a [li] tag for each item in a list. Right click the source of this page to see how the tables below were done:

The first thing

The next thing

The last thing

and

Something I said
Something I did
and something they did

Finally, the href tag allows people to click a link and go to a new page as in:

[a href="somenew.html"]Click HERE[/a] to go somewhere else. The NEXT button an example using an image to click and go somewhere else. You will need to view the source to see how it works, but you should have mastered that by now.

99% of all html editing you will do involves the codes above. When I forget how to use a tag or am looking for a tag, I go to google and put the search phrase in as in:

"html"+"list"+"free tutorial"

(use the quotes and plus signs)

This will bring back a ton of websites with information on using list tags.

When I need to learn some new Javascript, I do the same thing, as in:

"javascript"+"change a picture"+"free tutorial"

Javascript is useful for creating DHTML (dynamic HTML) pages that can change, depending on the user's requests and movements. FIRST learn basic HTML. Then you might want to consider checking out a library book on Javascript and learning that to make more interesting pages. The BLACK BOOK series is a great place to start; they are easy to read, have tons of information and are thick (and expensive).

Once you have HTML and JAVASCRIPT down, it's time to learn a CGI (common gateway interface) language, such as Perl. Perl is used by 80% of the web servers out there and it can do everything from posting credit card purchases and uploading photos (as in a BLOG), to a website, to generating web pages on the fly, to recording guest book information.

As a final quiz to this class, write a webpage that sells a CD via PayPal, by clicking on a CD photo. This will require a PayPal account which is free and using ftp (below) which is also free.

Next, for extra credit, write a web page that acts as a guest book, that uses Javascript to check that the visitor typed in a valid email address (easy Javascript code and lots of tutorials on that), and then using a Perl Program (look it up on google as most folks do), that allows a visitor to upload a photo and their email address; a basic guest book and blog.

Start small and get one part of your assignment done and working, then move on. Don't try to code it all at once or learn everything before doing something.

Make the webpage; it will involve a form, as in:

Enter your email address:

Then click upload to send us your photo.

If you enter an email address and click that, you will see an error because there is no javascript loaded to checkvalid(). And if you just click UPLOAD it will go off and look for somewhere.com (see the html source code), and a perl script called someperl.pl, which probably doesn't exist and you will get a blank page. Hit BACK to come back here.
See if you can encase your form in a table, such as:

Enter your email:

Then click upload to send us your photo.

View this source to see how that was done.
After you get it working, make the javascript function called checkvalid and lay that into your code.
Then you need to make a perl program and put that on your server and get it to accept the form data (myemail) and store it in a file. There are lots of free examples out there.
Then you need to learn how to upload a photo; I learned that in the Black Book series, learning about binary uploads (jpgs, gifs etc. are binary files). The program is a bit complicated, but works well and by the time you get done with the javascript part of this you just may be ready for it!
Then you can learn to send and receive email with Perl-neat stuff!

This assignment may take you a month or more...lots more if you don't focus and practice. There are ways to make it happen faster, the Library being one, google being another and team work being the fastest way. Each of you should spend time looking at tutorials, testing your simple webpage, with Javascript and Perl running and together you can afford the $10/month for a server that allows you to run Perl. You will also need to install Perl on your PC to test your programs before uploading them. If you can do all this, the final step is to develop an Apache server of your own; another lesson in this series.

Once any of your simple pages are finished, use the FTP lesson (below) to upload it to your site. If you have a godaddy hosted website, simply go to a DOS command prompt, and log in by typing:

ftp

then enter your username and password

then to send a page type:

send thispage.html

then type quit to end the ftp session.

If you want to upload photos, before sending it, switch to binary mode by typing:

then type

send thispic.jpg

and your binary image will go to your server.

Or you can use WS-FTP which you can find on Google which makes FTP a little easier but not really a good lesson for kids.

Learn these and if you need MORE, check out a library book or tutorials on the web. There are tons of them.