Much of the effort of creating a web site goes into the inserting of text and graphics into individual pages, a process known as editing. There are two levels on which one can edit web pages,WYSIWYG and HTML. There is a lot of controversy about the best level to use when doing editing. The WYSIWYG level is probably easier (many XHTML designers disagree with that statement), but it gives a person less control over the end-result; the editor program creates the formatting elements that are given to the browser. The XHTML level is the level upon which the browser functions, and persons working on that level have full control over the elements that are used.WYSIWYG LevelThere are a number of WYSIWYG editors (see the Links page). Some of these editors resemble word processors and are relatively easy to learn. Other editors are similar to desktop publishing programs and give you greater flexibility in the placement of text and graphics. Choose one that fits your personality.Two professional editors that are popular are FrontPage and Dreamweaver. A free beginning-level editing program that comes with the Netscap browser is Composer. XHTML LevelFrom the viewpoint of the browser, modern web pages are written in a language called XHTML (extended hypertext markup language). XHTML provides instructions (called elements but are frequently referred to as tags) that tell the browser how to format and display the information in the page; the elements are interspersed among the text and graphics in the pages. Elements are enclosed in angle (<>) brackets.Learning XHTML isn't difficult. There are two kinds of XHTML elements. | Non-empty elements: These elements enclose content such as text or graphics (or both). The elements consist of two parts, a start tag and a close tag. An example is the paragraph tag. <p>text, graphics, etc.</b> The text, graphics, etc. could span several lines. The start tag is <p> and consists of the name of the tag (p) enclosed in angle brackets (<>). The close tag has the same name as the start tag except there is a slash (/) before the name of the tag. The start tag could also contain attributes in addition to the name of the tag. See the Learning HTML page for more detailed information about elements. | | Empty elements: Empty elements do not span user-visible information and thus have no ending tag. An example of an empty element is the image tag for inserting graphical images into a page. <img src="dog.jpg" alt="My dog, Fido" />
The name of the element is img, an abbreviation for "image". src="dog.jpg" is an attribute giving the name of the graphical file. alt="My dog, Fido" is an attribute giving alternate text that describes the graphical image. /> is the ending bracket of the start tag with a slash before the bracket to tell the browser this is an empty element. A space before the slash is necessary to make this XHTML element compatible with older browsers. |
There are two situations in which you might use XHTML. | You might be editing with a WYSIWYG editor. The editor doesn't generate exactly what you want, and you have to fine-tune the generated XHTML. Thus, even if you edit with a WYSIWYG editor, it is useful, almost mandatory, to know XHTML.
| | You might be doing your web site completely in HTML. Many designers do this because they want full control over the choice of XHTML elements. | To create HTML source files, you will need a text editor. Microsoft Windows comes with a simple text editor called Notepad. The Macintosh comes with a text editor called TextEdit, and Unix comes with vi. These editors are simple, but they work. In addition there are freeware and shareware text editors (and commercial products with free trial versions) that have more features (see the Links page for HTML Editors). As you look at text editors, look for the following capabilities. | The use of color to separate the various fields of XHTML statements.
| | Context sensitivity, such that the editor guesses ahead when you type statements.
| | Context sensitivity, such that the editor automatically corrects typos in XHTML elements.
| | Search and replace.
| | Spell checker.
| | Ease of use. |
Getting StartedLinks to a few WYSIWYG and text editors are given in the Links page. In addition, if you do an Internet search on "wysiwyg editor" and "text editor" you will get other links.As a starting point in learning XHTML, read the Learning XHTML page in this site. Then, advance to the online tutorials that are in the Links page.Other ProgramsPrograms that were created for producing printed documents can often be used as web editors. These programs include word processors and presentation programs.[ Home ] [ Up ] [ Editing Pages ] [ Layout Tables ] [ Page Margins ] [ Using XHTML ][ Dreamweaver ] [ FrontPage ] [ Composer ] [ Word Processors ] [ Presentation Programs ]
© Copyright 1998, 2011 Allen Leigh
|