Basics of HTML

INTRODUCTION

This is a very basic intro to hand coding HTML.(hypertext mark up language) To get further information there are many websites on the internet which folks have put up that are very helpful. Of course, you can buy books too. You can always click 'View' and then 'Source' in Internet Explorer to see the code that creates the page. Although HTML code is the main way to create a webpage many features of a webpage can be generated by other languages, like JavaScript, that can enhance the HTML or totally replace it, so not every webpage's source code will be pure HTML code.

Of course there are many programs that will generate HTML code for you, like Dreamweaver and Frontpage, and you could learn to use these programs and never need to know any HTML. But if you know HTML you won't need such programs and if you can't get a program to do exactly what you want to a webpage you can just manipulate the HTML yourself. HTML is a simple language and doesn't compare with the complexity of C++, Pascal, or Fortran.

HTML Syntax

The syntax of HTML is basically all involved with 'tags'. There are opening tags and closing tags. Everything between the opening and closing tags appears on the webpage but the tags themselves do not. The tags will affect what is in between them. For instance...

<font color="#FF0000">This text will appear on the webpage as red</font>

...the <font color="#FF0000"> is an opening tag and the </font> is a closing tag. The text in between them is turned red by these tags. The 'color=#"FF0000"' is an attribute of the font tag that affects color. So make note that tags have attributes that specify something more specific about how the tag works. The font tag has other attributes that affect font style, etc. too. Consider that you can have opening and closing tags nested within other opening and closing tags and that is the concept of HTML. Note that there are a few tags where you can use the opening tag without ever using the closing tag but for the most part any opening tag has a closing tag too. There is a short list of tags that are used all the time to do basic things and this CD will introduce you to all of those.

Copy and Paste Code From This CD

This CD itself is just a collection of webpages using HTML so you'll be viewing it in a web browser like Internet Explorer or Netscape. Of course, you can see the code that generates these pages as well. However, without having to view the source code of these webpages on this CD you can copy and paste code right off the browser window to build your own webpage. This may save you some typing. You may wonder how the code can be displayed on the webpage without actually being executed by the browser. The '<' and '>' symbols that HTML tags are identified with can be generated with Iso-Latin-1 Character Entities so they can show up on the page and without being carried out as a real tag. There are dozens of these Character Entities and they all begin with an '&', then have a few letters or numbers and then end with a ';'. So if you see a bunch of these in the source code they are used to sort of deactivate that particular line of code so the code will actually show up on the webpage for you to see and copy and paste.

Using Text Editor and Browser Together to Hand Code HTML

To hand code HTML all you need is a text editor to type the code and an internet browser like Internet Explorer or Netscape to view your work. You want to save the HTML file you're making from your text editor as a pure text file and put a .htm or .html extension on it instead of the .txt extension that pure text files usually get. The browser won't recognize a file unless it has a .htm or .html suffix. The reason it has to be a pure text file is so there isn't any hidden code added to your HTML. For instance, you could type out your HTML code in MS Word but if you save it as a Word Document, Word inserts a bunch of 'Word code' that fouls up the HTML code. You won't see this 'Word code' but it's there and makes no sense to a browser. So beware, it must be saved as a text file (not even rich text) and it must have a .htm or .html extension.

Notepad is a good text editor for typing HTML and it's nice to have both your Notepad document and your browser programs open simultaneously. In your browser, just click 'file' and then 'open' and browse to the place you saved your Notepad document and open it up. You can see your webpage. Go back to Notepad and make some edits. Re-save those changes and then refresh the view in your browser to see your changes. When you have your webpage finished and looking just how you want it than upload it into your web account using an FTP software.

Putting Your Final Draft On the Internet

WS_FTP by Ipswitch is on the CD. To load it onto your computer just create a folder in your Program Files folder and name it WS_FTP and copy all the files in the WS_FTP folder on the CD to the WS_FTP folder you created on your hard drive. Then drag a shortcut to WS_FTP95.exe onto your desktop. Dial up your connection to the internet and click this shortcut and you get a 15 day free trial. Some configuration of the software is necessary to upload into your account. Remember, you must upload not only your HTML file but also any image files it uses and other HTML files it links to and any image files they use too to have your whole website work properly. Any links that go out to internet URL's will work without you uploading anything explicit for them.

Not All Browsers Will Show Your Webpage Identically

It is good to check your page in different browsers as there will be subtle differences. Internet Explorer is most commonly used with Netscape probably being the second most commonly used. You may want to have both browsers installed on your computer so you can check your pages out in both.

Happy Hand Coding,

Dave Sauer
Cripple Creek Victor Schools
dsauer@ccvschools.com