[ Basics ]Web Page Beginnings


Essentials

Web pages can be created using a simple text editor. All of the text for these pages was coded by hand with images created in various drawing/painting programs. The project took several months, but there is quite a bit to sort through, here. That and I took my time, experimenting with different browsers and their preferences.

Learn the basic parts of the HTML skeleton, some text formatting tags, horizontal rules, some content, and you will soon have an HTML presentation.


Background

HTML stands for HyperText Markup Language. It is not WYSIWYG. HTML instead uses tags (instructions or codes surrounded by less than and greater than signs) to tell Web browsers what formatting commands to apply to elements described in the page. There are opening and closing tags. The closing tags are preceeded by a slash.
For example: <HTML> and </HTML> are the opening and closing tags found at the beginning and end of an HTML file.

There are several dozen HTML tags that apply to text formatting, images, links, and other things. Each tag may have several attributes that can be applied to extend the functionality of the tag. What makes it very interesting is that different browsers display things differently. Even a single browser can present a page in a completely different way simply by changing the preferences (for instance, not auto-loading images in Netscape).

Most browsers conform to HTML 2.0 standards without too much variation. The major players in the development and future standardization of the Web (let's say the W3 Consortium, Netscape, and Microsoft) are constantly introducing new tags. When I first started coding these pages, HTML 3.2 was new and hot. Now, dynamic HTML (DHTML) is out along with Java (platform or language??), ActiveX, and all what-else. Several new features have been added, but not all browsers support all of them. Netscape and Microsoft"s Internet Explorer both have features that the other one has not yet implemented. This makes writing Web pages somewhat sticky. It is best to write pages for HTML 2.0 (so everyone can access your pages including those with text-only browsers), and then add the fancy stuff later.


Posting It

Publishing your Web pages requires an Internet Service Provider (ISP) that can provide that service (you can create your own Web Server, but you're going to need more help than you'll find here). You may need software to push files from your computer to your ISP. Your ISP should explain that and offer a way to acquire the software. Realize that your ISP may also charge you for this service and may limit things like:

Again, check with your ISP.


Skeleton

And finally to get going, you will need some basic working knowledge of HTML commands and the associated attributes.

All HTML pages have some elements in common. The following is an HTML skeleton:

     <HTML>
          <HEAD>
               <TITLE>
                    Title of HTML page goes here
               </TITLE>
          </HEAD>
          <BODY>
               <P>Content of the page goes here</P>
               <!-- Comments use these tags -->
          </BODY>
     </HTML>

The <HTML> ... </HTML> tags are the first and last HTML tags in the file and let the Web browser know that the file is actually an HTML document.

The <HEAD> ... <HEAD> tags are a kind of a prologue, giving information to the browser about the rest of the file.

The <TITLE> ... </TITLE> tags are a required part of the <HEAD>.

The <BODY> ... <BODY> tags contain the content of the page with all of the codes in place to format the text, graphics, and other elements on the page.

The <!-- ... --> tags contain the comments that are ignored by the browser but useful to authors.


Conventions

Some rules of thumb for using HTML tags include:


Rules

The <HR> command will display horizontal rules on your page. In HTML 2.0 that was it, not even a closing tag was used. HTML 3.2 has improved rules. Now you can specify different:

Examples

The following examples show basic paragraph text followed by horizontal rules as follows:


Code: <P>2 pixels thick</P>
<HR></HR>
Result:2 pixels thick



Code: <P>Align left, 4 pixels thick, 75% wide</P>
<HR ALIGN=LEFT SIZE=4 WIDTH=75%></HR>
Result:Align left, 4 pixels thick, 75% wide



Code: <P>Align left, 8 pixels thick, 75 pixels wide</P>
<HR ALIGN=LEFT SIZE=8 WIDTH=75></HR>
Result:Align left, 8 pixels thick, 75 pixels wide



Code: <P>75% wide, use NOSHADE attribute</P>
<HR WIDTH=75% NOSHADE></HR>
Result:75% wide, use NOSHADE attribute



Code: <P>Align right, 16 pixels thick, 50% wide</P>
<HR ALIGN=RIGHT SIZE=16 WIDTH=50%></HR>
Result:Align right, 16 pixels thick, 50% wide



Code: <P>Last example: 3 shrinking rules</P>
<HR WIDTH=80%><HR WIDTH=60%><HR WIDTH=40%></HR>
Result:Last example: 3 shrinking rules






[Top] [Back] [Next] [Main Menu] [Index]
[ Basics ] [ Text ] [ Images ] [ Links ] [ Tables ] [ Forms ]
©Ken Kaleta 1997, 1998, 1999