After reviewing this introduction to the process of making Web pages, you will be able to make a Web page from scratch, using a simple word-processor. You will learn how to incorporate graphics into a Web page and how to link your page to other Web pages. You will also understand what is involved in making that page a part of the Web and what HTML-editing software (like Dreamweaver) can and cannot do.
HTML is a markup language, which means that it is not programming per se (it isn’t a programming language like Java or C++). Writing with HTML is more like making format notes that indicate how you want the words to look or the pictures to be placed when a person views them using a browser (e.g. Internet Explorer, Firefox, or Netscape). Using text-editing software to type HTML is the oldest method of making Web pages. Webmasters augment HTML with things like XML, Javascript, PHP and ASP to create more sophisticated interactions, but these things are not needed to created nice looking, simple web pages. HTML with no augmentation has the advantage of being easy to learn and easy for just about any computer with browser software to interpret correctly. To make Web pages that contain words, pictures and perhaps a little video or sound, a command of basic HTML is all you need.
HTML is a collection of tags that help you format your work. A tag looks like this: <font size=”16”>. It is called a tag because the less-than and greater-than signs at the beginning and end make it look like the kind of tag you might see attached to items in a store. In a way, HTML tags work the same way as store tags do because they give specific information about the item they are attached to. Here are some common HTML tags:
<i> -- “italicize the text”
<b> -- “make the text bold”
<font size=”16”> -- “set the font size to 16”
HTML is easy to type using word-processing software. Any word-processor will do, but the simplest ones are the best because they do not try to re-format your work (for example, Microsoft Word does not make it easy to create a simple HTML file, you often see quite a few extra letters and symbols thrown in when trying to view the file on a browser). Use the simplest word-processing software on your computer:
• on a PC: Notepad or Wordpad;
• on a Macintosh: Simpletext or TextEdit.
Using the simplest possible word-processing software will ultimately make things much, much easier as you learn to “spin” Web pages.
In this introduction to HTML the assumption is that you are not using any Web editing software (like Macromedia Dreamweaver or Microsoft FrontPage). You really do not need these to make Web pages and, although you may find them helpful later on as you get more involved in making larger and more sophisticated Web sites, it is actually better to start by making Web pages without the aid of these software packages. You will be amazed at how much you can create using simple word-processing software. Even more importantly, you will be able to fix the small problems that invariably arise when using Web editing software because you will understand the basics of HTML at the “source code” level.
The collection of tags and words that comprise a Web page is called its source code. This is a very techno-sophisticated sounding term, but all it really means is “here is how the page looks before a browser makes use of the tags.” For example, here is a little bit of source code:
<b>This is bold text!</b>
<P>
<i>And this is italic text!</i>
The “<P>” is a “paragraph” tag; it means, “start a new paragraph.” Most tags require an “end” tag (for example, </i>) to indicate when that particular formatting should stop. The “/” character inside a tag indicates an end. When the browser interprets this source code it looks like this:
This is bold text!
And this is italic text!
The source code is everything that has been typed by the person creating it to get the Web page to look a specific way for the person viewing it. You can view the source code of any Web page. Browser software like Netscape and Internet Explorer invariably provides an easy way to see the HTML tags used to create the page that is displayed on the screen. For example, in Internet Explorer, select the pull-down menu “View,” then select “Source.” In Netscape, select “View,” then select “Page Source.”
If you have ever looked at, well…anything on the World Wide Web, you have used browser software (if you are reading this you are using browser software right now!). A browser is any software that translates source code into formatted text. A browser interprets HTML tags, using them to arrange text and organize images in the browser window in a very specific manner. Browsers do not create Web pages; they allow one to view Web pages. There are a number of popular Web browsers and each has slightly different capabilities and strengths; all of them, however, can interpret basic HTML. If you are going to create Web pages, it is a good idea to keep a few different browsers on your computer so that you can check to be sure that your Web pages look appropriate no matter which browser is being used to view them.
Making a Web page is quite easy, once you know the procedure. Let’s start with a quick explanation of the terms “HTML file” and “Web page.” For our purposes these two terms are synonymous. A Web page is an HTML file and vice-versa. HTML files always end in either “.html” or “.htm”. The only way a browser can read an HTML file is if the file names ends with .htm or .html -- We cannot stress this enough, as soon as you create the file, name it something that ends in .htm or .html. For example “starthere.html” and “page_two.htm” are valid file names that a browser will interpret as a Web page. However, files without a .htm or .html, such as files named “mygreatwebpage” or “mypage.doc” will not be recognized by a browser.
Naming HTML files that will be interpreted by multiple computers and browsers is a little trickier than naming files that will only be read on your computer. Remember that your HTML files have to be read and interpreted by any computer connected to the Internet. There are some conventions to follow that will ensure that your files are readable by everyone. Of course the file name must end in either .htm or .html, but following a few other rules will help your files get read properly no matter what computer views them. The first rule is no blank spaces. Do not put a blank space anywhere in the file name (for example “my page.html” is a must-to-avoid). If you are using multiple words, use an underscore character to link them together (“my_page.html” will work). There are some characters that should be avoided when naming files, including “?” “/” and “$” – these are characters used in programming to denote very specific situations and can cause problems if they are used in a filename. Also, avoid using the period character (“.” – everyone calls this a dot) anywhere but just before the file extension. A less critical concern but worth mentioning all the same is to avoid using numbers to start a filename or as a complete filename (for example, “1page.html” and “1123.html”). Finally, avoid using capital letters, stick with lower case letters and numbers for filenames.
All HTML files begin and end with the tags <HTML> and </HTML>. All HTML files have a head and a body, which are marked by the <HEAD></HEAD> and <BODY></BODY> tags. For example, here’s some source code:
<HTML>
<HEAD>
<TITLE>
Mrs. Johnson’s Web Page
</TITLE>
</HEAD>
<BODY>
<B><I>Hello! </B></I>
<P>
Welcome to Mrs. Johnson’s Web page.
<P>
Mrs. Johnson is a <b> fictitious character</b> that I thought up to show how <i> source code</i> works.
<P>
<HR>
<I>Last updated March 5, 2006</I>
</BODY>
</HTML>
Notice where the <HTML> and </HTML> tags are placed (at the beginning and end of the code sequence). Notice how the <HEAD></HEAD> and <BODY></BODY> tags are placed (they mark the beginning and ending of the head and body sequences). The head sequence is where information is placed that will not be seen in the browser window (in our example, the only information in the head sequence is the title which appears as a label above on the outer edge of the browser window). The body sequence is where information is placed that will be seen within the browser window.
HTML tags are not case sensitive. You can use either uppercase letters or lowercase letters when creating tags. You can place tags on their own lines or type one long continuous, left-to-right line; the browser will simply read each tag as it comes to it, it does not matter whether they are each on their own line, in one continuous line, or some combination of the two. Giving each tag its own line is a good idea, especially when learning to write HTML. This will make it easier to see what you are doing and easier to proofread and troubleshoot your work later on.
You can use tags to control the alignment of the items on a Web page. Items can be either be centered, left justified or right justified. The tags that make this happen are pretty easy to remember; they are:
<CENTER> </CENTER>
Everything after the <CENTER> tag and before the </CENTER> tag will be centered within the browser window.
<LEFT> </LEFT>
Everything after the <LEFT> tag and before the </LEFT> tag will be aligned to the left within the browser window.
<RIGHT> </RIGHT>
Everything after the <RIGHT> tag and before the </RIGHT> tag will be aligned to the right within the browser window.
Text can be formatted using tags.
<B> </B>
Everything after the <B> tag and before the </B> tag will be made bold.
<I> </I>
Everything after the <I> tag and before the </I> tag will be italicized.
<P>
Anything after the <P> is a new paragraph (some people add the </P> at the end of each paragraph, but this is not necessary).
<FONT SIZE=” “> </FONT>
This will change the type size to whatever is specified within the quotation marks. For example to make the type size 18 point, the tag would be <FONT SIZE=”18”> (if you do not add the </FONT> tag, all the text for the rest of the Web page will be 18 point).
<FONT COLOR=” “> </FONT>
This will change the color of the font to whatever is specified within the quotation marks. See the box titled Specifying Color in HTML to learn more about what to put within the quotation marks.
To change the font color and size, put everything together in one FONT tag. For example, to make text that is 20 point and green use the tag <FONT SIZE=”20” COLOR=”GREEN”>. To return the font to its default size and color, use the </FONT> tag.
<BLOCKQUOTE> </BLOCKQUOTE>
This will indent the text in a way that is typically used for quotations. It is very effective for making a paragraph or passage stand out from the rest of the text.
One of the great strengths of the Web is the ability to link pages to other pages in other places. All you need to know is the URL (Universal Resource Locater) or address of the page you wish to link to. For example, the URL or address of the Google search engine home page is http://www.google.com/.
<A HREF=” “> </A>
Use these tags to create a link from your page to another Web page. For example the source code <A HREF=” http://www.louvre.org/”> The Louvre Museum</A> will create a link that looks like this, The Louvre Museum, and when clicked will take the user to the Louvre Museum’s Web site.
<A HREF=” “ TARGET=”BLANK”> </A>
Add “TARGET=”BLANK” to your link tag to have the link open in a new window. Having a link open in a new window keeps the original Web page open (for example, if students “wander off” to the Louvre, then to the Prado and then to the Metropolitan Museum of Art, they can still see your Web page in a separate window the entire time they are wandering).
All Web pages have a unique URL (Universal Resource Locater) also called a Web address. For example, the URL or address for The New York Times on the Web is http://www.nytimes.com/. This is known as an absolute path name because there is only one HTML file with this address on the entire Web, and the address is a complete one (that is to say it begins with http://). When you are making Web pages that will link to each other, and you do not know yet what each page’s absolute path name will be, you can use a relative path name, that is the name of the file itself. For example, you can link my_page_1.html to my_page_2.html by using the file name itself. You can only use relative path names when all the files reside in one directory (or are nested in directories within one main directory, but this takes some practice with slash dot syntax , using the “/” and “.” characters to navigate within the directories -- we recommend avoiding slash dot syntax until you have more practice spinning Web pages). Use absolute path names for pages on other Web sites that you wish to link to. Use relative path names when linking the pages of your own Web site.
As you have seen from your own Web surfing, many pages have pictures on them. Graphics cannot be directly inserted into an HTML file, but the HTML file can make space for a graphic file that the browser will display within the same window as the HTML file. Browsers can display three types of graphic files: .jpg (or .jpeg), .gif and .png (this means the image file has to be formatted as one of these file types and that the file name has to end in .jpg, .jpeg, .gif or .png). For the image to show correctly, the graphic file has to reside somewhere the browser can find it. It is a good idea to place the graphic file in the same directory as the HTML file that uses it and to use a relative path name to call that file.
<IMG SRC=” “>
IMG SRC is short for “Image Source.” Place the name of the graphic file you would like to display within the quotation marks. For example, the tag that allows the display of a picture of a rubber duck (a file named “duck.jpg”) is <IMG SRC=”duck.jpg”>.
<IMG SRC=” “ HEIGHT=” ” WIDTH=” ”>
To control the size of the image you can add HEIGHT and WIDTH. Place the number of pixels you want the image to be within the quotation marks that follow HEIGHT and WIDTH.
The background color of an HTML page is gray by default. Some browsers automatically change the default color to white, but some browsers do not. To control the background color of your Web page, you make an adjustment to the <BODY> tag.
<BODY BGCOLOR=” “>
Instead of a <BODY> tag, use the <BODY BGCOLOR=” “> tag. Place the name or the hexadecimal notation of the color you would like to use within the quotation marks. See below ("Specifying Colors in HTML") to learn more about how to name colors. For example, to make a page that has a white background, use the tag <BODY BGCOLOR=”white”> or <BODY BGCOLOR=”#FFFFFF>.
There are two methods of specifying colors in HTML. The simplest way is to use the name of the color. However, there are 16 colors that can be called by name, they are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. A much wider array of colors are available by using hexadecimal notation. Hexadecimal names of colors look like this: #000000 (this is black) or #FFFFFF (this is white). Hexadecimal color names are the “#” sign plus six characters between “0” and “F” (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F: sixteen possible characters, hence the name hexadecimal). The first two characters are the value for red, the next two are the value for green and the last two are the value for blue (red, green and blue are the primary colors of light). 0 is the lowest value for that color and F is the highest. For example, #FF0000 is bright red while #660000 is a pale red or pink. Hexadecimal color code charts are very easy to find on the Web (try using the phrase “HTML color” in any search engine).
A nice little visual component of a Web page is the “hard rule” – a horizontal line that looks as if it is etched into the background. This is an easy and elegant-looking way to separate information on a Web page. All you need to do is place the tag <HR> wherever you want a horizontal line.
With a little practice using these tags you can create some pretty nifty Web pages using nothing more than a simple word-processor. As with anything, the more you practice the better you will get with HTML. Best of all, when you are ready to begin using Web editing software like Macromedia Dreamweaver or Microsoft FrontPage, you will be able to troubleshoot formatting problems because you are able to understand and edit the source code.