Handouts » HTML Handouts » Making a Page
How to Make a Web Page: Learning HTML Workshop
A Note About the WorkshopWe cannot, in this one hour workshop, cover all of the issues that are central to creating and maintaining a web site. There are important issues of architecture and design that are crucial to the accessibility of your site. What we can do in this workshop, is to make a simple, stand alone page that will help you to understand the basics of HTML and how web pages link to each other.
A Little BackgroundA web page contains text, hyperlinks, images, sound and other multimedia such as movies. You can type out all of your text to start, then reformat that text to incorporate hyperlinks and other media.
Web pages are created as Hypertext Mark Up Language (HTML) files. These are plain text files that contain special codes to organize and present text and multimedia. Many people use special software programs, HTML editors to create their pages. Most HTML editors present a WYSIWYG view of the page you're creating and you can in fact create a web page without knowing anything about HTML. I recommend you understand the basics of HTML so that you can troubleshoot these editors and understand why problems arise and how to deal with those errors.
Planning and PreparationBefore beginning to make the page you need to know the following:
Anatomy of a Web PageThe commands used to organize and format the web page are called tags. These tags are defined by the use of angled brackets. The text inside the angled brackets can be upper case, lower case or a mixture of both. Often the tags come in pairs, the first turning on a special effect, such as boldface, the other turning the effect off.
A web page has two parts: the head and the body. The head contains administrative information that is not displayed in a browser, such as the formal title of the page. The body contains everything a person sees in the browser window.
Formatting the text is a task that's very similar to working in a word processor or publishing program. With one important difference: blank space. When a browser presents a web page, or "renders" the HTML code, it ignores blank space and carriage returns. You can press on the space bar all day long and what you get on the rendered page is a single blank space. That's true for pressing the enter, or carriage return, key. You must enter specific commands to break lines, insert blank lines and to handle blank space.
Creating a Web PageToday we will create a small web page. The text is available for you to download, then we will format that text with HTML tags.
Download the raw text and Open it in Notepad
Viewing Your WorkYou can view web pages from your hard drive, just as you can view them on the Internet. Open this newly saved file in Netscape.
Obtaining the background and carpet images.You will need the background gif from the original sample and the image of the carpet. Open the story sample.
Formatting the PageNow you're ready to edit the file and insert the HTML tags. As you work along, save frequently and view your progress in Netscape. To see your changes you'll have to Reload Netscape. There's button on the tool bar for this command.
You may run into minor difficulties as you work along; the rendered page in Netscape may not appear as you intend. Just let me know and I'll be glad to look over your work. I've made so many typos and mistakes in HTML that I can spot an error faster than you can say "Who's the typist?"!
Web Site IssuesThere are two basic approaches to building a web site: architecture and page design. Architecture refers to the maintenance of the site (directory structures, file names, etc) and navigation (making it clear to visitors where they are and where they're going). Page design refers to the content and "look" of the site and includes such issues as continuity of color and backgrounds, page layout, how the navigation links will be presented, and scripting.
Workshop FilesThe following files are used in this workshop
Last Edited: 17 Jul 2014