Here is Part one of 3 about how to write a simple web page using notepad or any text editor on your computer.
Let's create a very simple Web Page to help make this clearer:
Introduction to Web Publishing
We will create a simple Web Page in Notepadin this project, but first a little background information about the language of the web HTML will be presented. Note if you do not have notepad on your computer any text editor (file extension "txt") will work.
HTML, SGML and Formatting Languages:
What is HTML?
The Hypertext Markup Language (or HTML) is the language used to create the documents for the World Wide Web. Although most browsers will display any document that is written in plain text, there are advantages that you get by writing documents using HTML. When HTML documents are read by applications specifically designed for the Web (usually called browsers or Web browsers) they can include formatting, graphics, and even links to other documents.
As a markup language, HTML is not so much concerned about the appearance of the documents, but about the structure of a document. Rich Text Format (RTF) and Postscript, on the other hand, are examples of formatting languages. Formatting languages are concerned more with the appearance of the document (typefaces and the exact position of illustrations, for example). A markup language is used more to describe the structure of the document. For example, you use HTML to mark the headings, normal paragraphs, lists (and whether they are numbered or not), and even things like addresses. (Today CSS has become a very popular formatting tool in the design of websites. To learn more visit http://www.w3schools.com/css/#)
HTML is a relatively simple implementation of Standard Generalized Markup Language (SGML). SGML encompasses several types of markup languages called Document Type Definitions (DTD). HTML is simple enough to just type in directly without using some sort of HTML editor. HTML editors are useful, especially if you have massive quantities of documents to write, but they are not necessary to get started. A text editor such as Notepad is a fine place to begin. FREE WYSIWYG software is available today for very fast web design. Wysiwyg means what you see is what you get and pronounced wizziewig, here you can find some popular free sites: http://webdesign.about.com/od/htmleditors/tp/aatpfreewyswin.htm (XML is useful to mention here under this family, HTML displays information on the web and XML is a way of storing data on the web. So if you have a database of info that needs to go on the web you may incorporate XML into your site. For example large employers with online employee logins will probably have XML help them to execute the data online.
In general, HTML commands begin with a < and end with a >. The commands are almost never case sensitive and are either "container" or "separator" commands (although there are numerous exceptions to both of those generalizations). A container command has a beginning command and an ending command. The commands would thus be applied to the text in-between the beginning and ending commands. We will see examples of these commands in our project.
White space, meaning anything that is not a printable character, is generally ignored in HTML. Leaving a blank line in your document will generally not create a blank line when the document is displayed in an Internet browser.
The designers of HTML were concerned with conveying the structure of documents in a simple, portable way. The advantage of this approach is that users on any kind of system, from a Macintosh to a PC can view documents formatted with HTML with relatively little loss of information. Another advantage of HTML is that it is such a simple language it can be quickly learned by just about anyone who is interested in learning more about web pages.
Let's begin to create some html documents, for PC you will need to open notepad, go to your start button/All Programs/Accessories/Notepad
1. Open Notepad and key the following exactly as shown:
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
Remember to hit the enter key after each entry. Save this file as WebpageTemplate. We can than use this file as a template for other Web Pages:
Save the existing file WebpageTemplate as a new file called My First Web Page. (Go to the File menu and select Save As...)
These are the four container tags included in every HTML document.
Every HTML document should start by declaring itself as such. The "<html>" tag at the very top of the document achieves this. The very last text in a document should be the "</html>" tag.
The top part of the document should also have a section for heading information which is surrounded by the <head> and </head> commands. There are several items of information that you can put in the header. One piece of information you should always have in the heading is the title. The title is surrounded by the <title> and </title> commands.
The title of a document is not normally displayed as part of the page, but is often displayed in some sort of special section in most browsers (Mosaic puts the title in a Document Title box just under it's menu. Netscape puts the title on the Title Bar, for example). The title should be both descriptive and short enough to fit comfortably on one line. (another very important family of tags that we nest in the header section and thus will not be displayed in the browser window, are the META Tags. These tags are very important for Search Engine Optimization, SEO)
The "body" of the document should also be marked off with the <body> and </body> commands. This is the part of the document that is normally displayed as the page in most browsers.
Let's create a very simple Web Page to help make this clearer:
2. Open the file My First Web Page:
In between the <title> </title> tags key "Great Links for New Web Publishers."
In between the <body> </body> tags key "Here are some great links for new Web Publishers." If you have typed this correctly it should appear in Notepad exactly as shown here:
<html>
<head>
<title>Great Links for New Web Publishers
</title>
</head>
<body>Here are some great links for new Web Publishers.
</body>
</html>
3. Select Save Asfrom the File Menu. We will now save our File as an html document by naming the file My First Web Page.htmlThis creates an html file that corresponds to the existing text file My First Web Page.txt. Make sure you know where you have saved this file on your computer. Hint use your desktop if you are not clear about how to find files you have saved on your computer.
Close all open files in Notepad.
Go to My Computer and locate the file My First Web Page.html
Notice how the html file you just created has the icon of your default Web Browser. Default means what Internet Browser your computer will use automatically when you try to access the World Wide Web. Popular browsers today are Foxfire, Internet Explorer, Chrome, Safari and Opera.
4. To view your Web Page, simply Double Clickon the html file you previously created in # 3.
If all has gone as planned here you will see your Internet Browser open a window that says "Here are some great links for new Web Publishers." Now wasn't that easy and fun?
To see how all web pages are created go to the file menu bar on your browser, choose view and and select source. Do this for several sites you pull up on the web and you can start to see how web pages are put together.
Stay tuned for more lessons on web page creation.
Mary Lockman is a r
ealtor with John L. Scott Methow Valley providing real estate services for Winthrop homes and land, Mazama homes and land and all the Methow Valley real estate.
Visit www.methowrealestateservices.com (created in notepad from a template) to find specific searches for Mazama homes, Mazama land, Winthrop homes, Winthrop land, Wolf Creek homes, Wolf Creek land and all the properties in Methow Valley, Washington broken out by communities, homes and land for your searching convenience.