WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS Properties
HTML 4.01 Tags
Site Management
WD Forums

    Web Video
    Expression Web



    Forum, Blog, Wiki & CMS

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

    The Coffee Lounge
    Computer Issues

Beginners' Guide to HTML or, How To Make Your First Web Site

Beginners' Guide to HTML
How To Make Your First Web Site

All About HTML:
Starting With The Basics
By Web Developer® Staff

What is a Web page? What, in brief, are Web pages capable of doing?
A Web page is an Internet "document" that can be accessed by Internet users with an HTML browser (such as Netscape or Microsoft). By providing the browser with a unique address, or Uniform Resource Locator (URL, variously pronounced "you-are-ell" or "earl"), you open the page with that address. Web pages commonly provide text, pictures or other graphics, and links to other pages. Newer technology also allows Web pages to provide three-dimensional images, animated images, and sound.

Back to top of page

What does HTML stand for? What is it?
HTML, or Hypertext Markup Language, is a language that uses text and a defined set of commands (known as tags) to create most of what you see on a World Wide Web page. The tags can serve two distinct functions: They either "tell" the text how to behave (bold, italic, etc.), or make the text act as a command to insert a link, picture, or sound onto your page.

Back to top of page

What is the best way of going about learning HTML?
Reading helps, and so does practical experience; we recommend a combination of both. You should start by finishing off the rest of this page--it gives you a manageable-sized portion of answers to questions you may have. You'll undoubtedly have more complicated questions as you learn more.

One the best ways to learn HTML is to see how other people have done it! Using your favorite browser, find your favorite page. Then look for the "Source" or "Document Source" command under the "View" menu. This will show you a window with all of the HTML used to create that page. Look it over; more times than not, you'll be surprised at the relatively few commands it took to put together what seemed at first like a complicated page!

Back to top of page

What do I use to write HTML? Is there a specific piece of software?
The easiest way is to use a WYSIWYG (what you see is what you get) Web page creation program, which operates much like a word processing package and (with a bit of your help) not only writes your HTML for you, but also helps you put together your page from start to finish. These programs are especially useful for those who don't have the time or the inclination to learn all the nuts and bolts of HTML, but you should at least have a cursory knowledge of HTML before using them.

Once people start working in HTML on a production level, they often use HTML editors, which have special features (such as automatically inserting closing tags; see below) that make HTML work fast and easy for people who know what they're doing.

HTML files are basically simple plain ASCII text files that can be created with any text editor such as BBEdit for Macintosh, or Notepad if you are using Windows. If you don't want to invest in either of these programs, you can use your word processor program of choice; just make sure that when you save your document, you save it as "text only with line breaks," and make sure the filename ends in ".htm" or ".html".

Back to top of page

What are the required elements for an HTML document? Can you show me an example?
Every HTML document does require certain tags in order for it to work. All of the basic tags work in pairs; whatever tag you use must have a matching end tag in order for the browser to denote the beginning or end of a style or command. The only difference between the beginning and ending tag in the pair is that the / must be used with the second, or closing tag. All tags must be surrounded by < and >, but are not case-sensitive; that is, typing in HtmL will be read by the computer the same as HTML. For a basic HTML document, you need only the five tags that are contained in the following:

<TITLE>We Help You Make Your Own Web Page</TITLE>
<H1>Question Five of the Web Developer® Beginners HTML Page</H1>
<P>This is a short example of how easy it is to make your own Web page.</P>
<P>If you follow the guidelines here, you will be on the Internet in no time!</P>

In this example:

<HTML> indicates that this is a piece of HTML code.

<HEAD> is the first distinct part of your document. It contains the TITLE.

<TITLE> provides a title in the header for your document. It is also what will be displayed by a browser when someone matches the keywords that are applicable to your site.

<BODY> is the second and most distinct part of your HTML document. It contains all of the body text; which can come in six sizes. <H1> denotes the size of this piece of body. For more information on body sizes, see the intermediate HTML page. It will also contain other tags, such as those that will link your page to others, and those that will spice up your page with images and sounds.

<P> denotes the start of a new paragraph.

Back to top of page

How do I put pictures on my Web site?
All pictures must be converted to one of several digital formats, so you'll need a scanner and software (such as Adobe Photoshop) to manipulate the picture into the form you wish to display it in; the pictures don't appear there magically! To get your pictures to display on a Web page, you must use certain HTML tags to "point to" the picture files that, like your HTML files, have been uploaded to a server. Where and how you place the tags deems how the art will be viewed by a particular user.

Pictures can be saved in a variety of styles; the GIF format is the most commonly recognized by various browsers, and is thus most commonly used. The JPEG format is also fairly common; it creates better quality photos, especially with scans. A program called GIF Converter is also helpful; it converts files saved in the Macintosh PICT format to either a GIF or a JPEG, and allows you to edit the files.

Here is the most common tag used to find and place a picture on a Web page:

<IMG SRC="picture.gif">

IMG SRC is the tag that codes a picture placement; "picture.gif" is the name of the GIF file that corresponds to the picture in question. This filename will change based on the picture you are using.

Back to top of page

How do I create links to other pages?
This is one of the most important things you need to learn, and it's easy to do! You need to know two things; first, the exact address of the page you are linking to, and then, the tag for linking. HTML's tag for linking is <A>, which stands for anchor. To link your file to another file, use <A followed by HREF="filename" and then close the command with a right angle bracket. The following is an example of a typical link to another page you've created:

<A HREF="myfamily.htm">Here's my family's home page</A>

When clicked upon, this link, which will be viewed on a user's screen as "Here's my family's home page" with an underline underneath it, will cause the user's browser to open the file "myfamily.htm". Linking to any page anywhere on the Web is just a little more complicated, since you must provide the exact, full URL address. The following HTML code would link to Web Developer®'s home page:

<A HREF="http://www.webdeveloper.com/">Check out my favorite site</A>

Note that a correct URL must include the "http://" at the beginning, and must end with either a slash "/" character at the end (for a domain name or directory) or a file name, usually ".htm" or ".html".

Back to top of page

How do I get my pages on the Web? Do I have to pay for it?
Before you get ready to put (or "upload") your page(s) onto the Web, you must make sure of three things. First, you must have a completed and correct HTML document (to check your first one without even using the Web, just open the HTML file in your favorite browser). Second, you must have copies of all your images and sounds, so those who access your pages will be able to see the pictures you have provided. Third, you will need a private account on a Web server--a computer permanently connected to the Internet--so you can upload your files to it, and other people can see them.

You also must be able to transfer your files to the server. For a Macintosh, you will need a program called Fetch; you can download this program from Dartmouth College's FTP server, where the program was developed. Follow the instructions for the uploading of files from there. For IBM and compatibles, use any FTP (File Transfer Protocol) client (there's a basic one built in to Windows 95); one of the easiest to use is Cute FTP.

From there, you have the choice of a few different options for getting your pages up on the Web. Depending on your circumstances at school or at work, you may have to pay a fee to keep your pages on the Web; the rates will vary from provider to provider. University servers will sometimes upload student or faculty pages to their server for free or a minor fee; if you work in a company that allows you to use their server, that's another option. If neither of these are possible, you'll need an independent ISP (Internet Service Provider), price the options, then upload the information to the provider so they can put it up for you. You will be paying a fee (most likely on a month-to-month basis) in this case. Fees could be flat, but many times they depend on how many people are accessing your site (called "hits"). The more hits, the more taxing it is on the server, and potentially, the more you'll pay.

Back to top of page

How can I get people to find my page once it's on the Web?
Heard of Yahoo? Or AltaVista? Or WebCrawler? You have if you've heard the term "search engine." Search engines are basically companies present on the Internet that help users find what they want based on certain keywords. For instance, if you enter the term "Web Developer", a screen will magically appear with links to all of the sites that have matching keywords. If you enter into sites such as Yahoo! and AltaVista, you can click on links to add your URL; other automatic search databases such as Lycos will find your new page within a couple of weeks, and add your URL to their database. Here you will find a complete list of search engines.

Back to top of page

How can I receive mail from users via my site?
If you're selling something, or providing hard copy to users of your site, or you just want feedback on what people think of your handiwork, you'll want to create a mail link on your site. You do it in a way similar to creating a site link. Use the MAILTO command as the following example does:

<A HREF="MAILTO:dave@somewhere.com">dave@somewhere.com </A>

In this case, when you click on dave@somewhere.com, the mail screen pops up on your browser, and the mail you type is sent to the person with the address in the link.

Back to top of page

Resources and Pointers for Further HTML Exploration

Back to top of page

HTML5 Development Center

Recent Articles