Editing Pages

Home Up Editing Pages Layout Tables Page Margins Using XHTMLDreamweaver FrontPage Composer Word Processors Presentation Programs

horizontal rule

 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 Level

 There 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 Level

 From 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.

bulletNon-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.
 

bulletEmpty 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.

bulletYou 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.

bulletYou 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.
 
bulletThe use of color to separate the various fields of XHTML statements.

bulletContext sensitivity, such that the editor guesses ahead when you type statements.

bulletContext sensitivity, such that the editor automatically corrects typos in XHTML elements.

bulletSearch and replace.

bulletSpell checker.

bulletEase of use.

Getting Started

 Links 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 Programs

 Programs 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 ]

horizontal rule

Google
 
Web shire.net

Banner

 
© Copyright 1998, 2011 Allen Leigh