Please keep
voting for us
as a Top 100
Web site!
|
|
|
Beginners' Guide to HTML
or, How To Make Your First Web Site
All About HTML:
By Web Developer® Staff
Starting With The BasicsWhat is a Web page? What, in brief, are Web pages capable of doing?
What does HTML stand for? What is it?
What is the best way of going about learning HTML?
What do I use to write HTML? Is there a specific piece of software?
What are the requirements for a basic HTML document? Can you show me a basic example?
How do I put pictures on my Web site?
How do I create links to other pages?
How do I get my pages on the Web? Do I have to pay for it?
How can I get people to find my page once it's on the Web?
How can I receive mail from users via my site?
Resources and pointers for further HTML exploration
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.
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.
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!
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".
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:<HTML>
<HEAD>
<TITLE>We Help You Make Your Own Web Page</TITLE>
</HEAD>
<BODY>
<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>
</BODY>
</HTML>
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.
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="/old?u=http%3A%2F%2Fwebdeveloper.com%2Fhtml%2Fpicture.gif&y=1999">
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.
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=/old?u=http%3A%2F%2Fwebdeveloper.com%2Fhtml%2F%26quot%3Bfilename%26quot%3B&y=1999 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=/old?u=http%3A%2F%2Fwebdeveloper.com%2Fhtml%2F%26quot%3Bmyfamily.htm%26quot%3B%26gt%3BHere&y=1999'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=/old?u=http%3A%2F%2Fwebdeveloper.com%2Fhtml%2F%26quot%3Bhttp%3A%2Fwww.webdeveloper.com%2F%26quot%3B%26gt%3BCheck&y=1999 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".
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.
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.
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=/old?u=http%3A%2F%2Fwebdeveloper.com%2Fhtml%2F%26quot%3BMAILTO%3Adavid%40webdeveloper.com%26quot%3B%26gt%3Bdavid%40webdeveloper.com&y=1999 </A>
In this case, when you click on david@webdeveloper.com, the mail screen pops up on your browser, and the mail you type is sent to the editor of this site!
Resources and Pointers for Further HTML Exploration
- Our Developer's Forum Some regularly-updated material to help you make your site great!
- A Beginner's Guide to HTML All you need to know to get a solid start at HTML coding.
- Learning to Publish
- Netscape's Guide to Creating Internet Sites
- Composing Good HTML--Teaches you how to write correct HTML documents.
- Web lint--When you start writing your own HTML, an HTML checker is a good program to have. For more information on this program, see "Walking the Beat with an HTML Cop," in the July/August issue of Web Developer®.
Copyright © 1999internet.comCorporation
All Rights Reserved. Legal Notices.
Contact the WebDeveloper.com staff
Last modified: Sun Sep 26 23:48:05 EDT 1999
Back to top of page
Refresh Daily
Join Editor-in-Chief David Fiedler
and find truth, justice, and a clue or two.
ActiveX / VBscript Animated GIF Archive Browsers CGI / Perl Database Connectivity Design / Graphics E-Commerce HTML-Advanced: DHTML, CSS HTML / Site Authoring Tools Intranet/Groupware Java JavaScript Multimedia: Audio / Video / Streaming Technologies Opinions Refresh Daily: Editorial Column Security Servers & Server Tools Site Design / Graphics Site Management / Marketing / Log File Analysis Tutorials VRML / 3D XML
