Hypertext Builder 5.0
HTML Authoring System
1. Letter From the Author and Programmer
2. Who Needs It?
3. The Interface
4. The Tools
5. Other Useful Features
1. Letter From the Author and Programmer
Dear Hypertext Builder 5.0 User,
Thank you for using Hypertext Builder 5.0. Several new features for Hypertext Builder have been developed since the release of version 4.0. To name a few: Visual HB, a visual page editor; VRML Orbitor, a VRML sitemap builder; and ASP support. In addition, an effort has been made to more tightly integrate Style Sheets with Hypertext Builder. That effort has led to Style Sheet support directly being supported by the Quickstart tool, making it easier than ever to quickly and easily insert style information into HTML documents. Several other improvements have been made, and I hope they allow you to be more productive and creative in your web ventures. Good luck.
Sincerely,
Paul Katz
PAKSoft Productions
http://users.aol.com/napkatz/paksoft/
2. Who Needs It?
Hypertext Builder 5.0 combines the power of direct code editing with the ease of WYSIWYG (What You See Is What You Get) tools. Hypertext Builder 5.0 does not attempt to conceal the HTML language, instead it helps automate the creation of complex code. If you do not want to interact with the HTML code at all, then Hypertext Builder 5.0 is not the program for you. However, if you want to create effective web based solutions with HTML, read on.
3. The Interface
Hypertext Builder 5.0 sports an intuitive interface. At the top of the Hypertext Builder 5.0 window, there is a toolbar with several tabs. The tabs lead to most of the authoring features of Hypertext Builder 5.0. The buttons either insert code into the editing window, or launch authoring tools..
On the left side of the Hypertext Builder 5.0 window, a side bar can be located. Most of the buttons found here are self-explanatory. External Preview launches an external browser and allows the user to preview the HTML document. The SmartColor button color-codes the HTML code in the editing window. SmartColor is a fully integrated feature of all the wizards, and tools.
On the bottom of the Hypertext Builder 5.0 window, there is a toolbar with several different functions. On the left side of this bar, there are several tools that can be used to manage the website's directory. The drive, directory, and file boxes are used to select and maintain the directory. The Retrieve Files button is used to transfer files from other directories into the website directory. The Thumbnail Browser button allows the user to browse through all the images in the website directory. On the right side of the toolbar, there are six tabs: Tags, Attributes, Javascript, Date/Time, Faces, and Custom. These tabs allow easy access to all of the HTML language. The Custom tab allows the user to insert future HTML tags as they come out.
The Editor window is made up of primarily two parts. The editing area is located on the left side of the window. This is where the user edits the HTML document. This is also where the wizards insert the code. The preview area is located on the right side of the window. This is where the HTML document can be previewed. The preview window is actually a shrunken down version of Microsoft Internet Explorer. Between the right and left sides of the editor window are two buttons. The top ">" button is used to transfer the code on the left to the preview winodw on the right. The second button labeled "!" launches Visual HB, a completely visual interface for making quick edits to the web page. If Internet Explorer 4.0 or higher is not installed, the preview window and both buttons will not be present in the editor window.
4. Tools
This chapter discusses all the authoring tools available in Hypertext Builder 5.0. Each one is listed in alphabetical order.
Anchors
HTML documents are tied together using hyperlinks. The Anchors tool provides a way to insert hyperlinks that lead to other web pages or E-mail addresses. The first tab in the dialog box, Links, is used to insert hyperlinks that lead to other pages. The URL box specifies the location of the other web page. The Link Caption Box specifies the text that will be displayed on the current HTML document. The Target box is used to specify how the Web Browser will display the linked page.
The second tab, Named Reference, is used to create text that can be linked to by hyperlinks. The Reference Text box is used to specify the text used to identify the named reference. The Text Displayed box dictates what text will appear in the web browser.
The third tab, E-mail, is used to create hyperlinks to E-mail addresses. The Link Caption box specifies the text that will appear in the browser. The E-mail Address box specifies the address the link leads to.
ASP
This ASP tool provides a way for users to insert ASP server variables and ASP conditionals into their web pages.
Floating Frame
This tool is used to insert floating frames into HTML documents. A Floating Frame acts like a regular frame, except it does not divide the browser window. Instead, it floats in a web page.
The Alignment box determines the orientation of the floating frame. The Name box is used to determine the name the browser uses to identify the floating frame. The HTML File box is used to set the URL of the page contained in the floating frame. The Height and Width boxes are used to determine the dimensions of the floating frame. The Margin Height and Margin Width boxes set the distance between the floating frame and the browser's edges. The Frame Border checkbox determines whether the floating frame has a border around it. Sometimes omitting a border can create a more seamless appearance. The Scroll Bars checkbox determines whether the floating frame contains scroll bars.
Font
The Font Wizard is used to set font attributes. Font Size can be set on a scale of 1 to 7. Font Color can be set either using a hexadecimal value or a pre-defined color value. The Primary Font Name can be any font installed on the user's computer. The Seconday Font Name box can be used to declare a backup font in case the primary font is not installed on the user's system.
NOTE: Try to pick a universal font, such as Times New Roman. Not every computer has the same font library.
Form Input
The Form Input Tool creates eleven different types of input controls: button, checkbox, hidden, image, listbox, password textbox, radio switch, reset button, submit button, single-line textbox, and multi-line textbox. Each of these different input controls has different properties. The Name and ID property boxes determine how scripts and programs identify the input controls.
Form Wizard
The Form Wizard is used to create the opening and closing tags of a form. The first box in the tool is used to set the URL that will handle the form's information. The Method box is used to set how a web server will deal with the form's information. GET sends the data to the action URL and opens it as if it were a link. POST sends the data via an HTTP post transaction. The Target box determines how the web browser will open the new page.
Frame Builder / Frames
Frames have become a popular way of showing more than one web page at a time. The Frames tool allows the user to create an HTML document that uses one of several possible frame configurations. Creating a frame layout is a four step process. The first step is to choose whether to start with rows or columns. The next step is to decide how many rows/columns needed. Once that has been done, the number of columns in each row, or the number of rows in each column must be selected. Finally, the user enters in all the attributes of each frame.
NOTE:
IF AN HTML DOCUMENT CONTAINS FRAMES, IT SHOULD NOT CONTAIN BODY TAGS.
Image
The Image tool is used to insert images, animations, and VRML worlds into HTML documents. The Media Type box is specifies the type of media. SRC is used for pictures such as gifs, jpegs, and bitmaps. DYNSRC is used to insert animations, such as AVI files. VRML is used to insert VRML worlds. The URL box is used to specify to source of the media file. The Height and Width boxes are used to specify the dimensions of the image, animation, or VRML world. If these are left blank, the default dimensions of the picture or animation will be used. HSPACE, and VSPACE are used to specify the image's distance from the web page's margins. The Border box allows the user to enter the width of the border around the image, animation or VRML world. Leaving this box blank will keep the media file from being bordered. The Alignment box is used to determine how the image, animation, or VRML world positions itself on the web page. The Image Map checkbox allows the user to define an image map for a picture. Image Maps can be used to create context-sensitive pictures.
NOTE: The SRC media type should be used for animated gifs.
Image Map Builder
The Image Map Builder is used to create context sensitive images. Using this tool, web authors can create graphical menus.
The Name box is used to specify the name of the image map. The main part of the Image Map Builder is separated into two parts. The grid on the bottom is used to determine each of the hot spot's parameters. The picture window on the top is used to determine the coordinates of the hotspots. Creating an image map involves several steps. First, an image needs to be selected using the Open Web Image menu item. Next, the spin button is used to determine how many hotspots there will be. Once that is done, the user selects a row in the grid. The Image Map Builder creates rectangular hotspots. Left-clicking on the image defines the upper-left corner of the hotspot. Right-clicking on the image defines the lower-right corner of the hotspot. The user uses this to define the rectangles geometry. Each click adds coordinates to the grid rows. The Link Address part of the grid indicates the URL the hotspot leads to.
Inline Style Sheet
This tool creates an Inline style sheet. Options that can be set include margins, font properties, and background color. Font size is precise compared to the 1 through 7 size scale of conventional HTML text.
Script Tags
This simple tool inserts the opening and closing tags for scripts. The dialog box gives the user the option to choose between VB Script and Javascript.
In-tag Scripts
In-tag Scripts inserts a line of script directly into an HTML tag. The Language box is used to specify the scripting language of the code box. The Event box is for defining which DHTML event triggers the script. The code box contains the actual script being inserted. Users should place the cursor inside the tag they wish to attach the script to before opening this tool.
In-tag Style
In-tag Style inserts style information directly into an HTML tag. The font style is determined by using an ordinary font dialog box. Users should place the cursor inside the tag they wish to attach the style information to before opening this tool.
Java Applet
This tool inserts the tags which are used to insert Java Applets in web pages. This tool does not author Java Applets. The Alignment box determines how the Applet will be oriented on the web page. The Alternate Text box is used to set the text that appears before the applet is loaded. The Width and Height boxes determine the dimensions of the Applet, and the Hspace and Vspace determine its distance from the page margins.
List Builder /List
The List Builder is used to (Surprise, Surprise) create lists. There are five different types of lists that the List Builder can construct: Definition Lists, Directory Lists, Itemized Lists, Ordered Lists, and Unordered Lists. Definition Lists are used to create a list of terms and definitions. Itemized Lists and Unordered Lists are used to create bulleted lists. Ordered lists are used to create numbered lists which can be in the form of regular numbers or roman numerals.
The Text Color button is used to set the font color of any of the selected list cells. If this button is never used while creating a list, then no color information will be included when it is generated.
Marquee
Marquees are lines of moving text. The tag that creates marquees debuted in Microsoft Internet Explorer 2. Since then, marquees have become popular elements on many web pages.
The Marquee tool allows the user to create marquees of different types, sizes, colors, and speeds. The Marquee Dialog box consists of three tabs: Text Attributes, Movement, and Size and Placement. For most marquees, the user only needs to concern himself/herself with the first tab.
The first tab, Text Attributes, allows the user to determine the text size, the text color, and the background color of the marquee. In addition, this is also the tab where the user types in the text to be displayed. If the background color is not set, the marquee will have a transparent background.
The second tab, Movement, is used to help refine the movement of the text. The Behavior box gives users a choice of three settings: scroll, slide, and alternate. Scrolling text starts at one side of the browser, and moves completely across it, disappearing off the screen. Sliding text does the same thing, except it stops before moving off the screen. Alternating text continually bounces off each side of the browser. The Direction box lets the user specify which way the text moves. The Loop box determines how many times the text will move across the browser window. The Scroll Amount window enables users to determine how far the text moves with each change in position. The Scroll Delay box determines how much time passes before each change in position.
The third tab deals with the dimensions and placement of the marquee. Users usually do not need to deal with these settings. The Alignment box determines how the marquee is oriented on the page. The Width and Height boxes determine the dimensions of the marquee. The Vspace and Hspace boxes determine how far away the marquee is from the web page's margins.
Object Tags
This tool is used to insert ActiveX controls into an HTML document. Double clicking on the listbox will insert the selected control. Right clicking on the box, and then going into options will lead to a menu that defines how the code will be inserted. The Include Codebase checkbox allows the HTML author to tell where to get the control in case it is not installed on the Internet browser's computer.
Paragraph Builder /Paragraph
This tool is used to create paragraphs using a standard WYSIWYG word processor. Buttons are available to align, bolderize, italicize, underline, and strike-thru text. In addition, the font color, name, and size can also be altered.
Parameter Tags
This tool is used to insert parameters that are used by ActiveX controls and Java Applets. The dialog box contains a grid that allows users to insert parameter names and their values.
QuickColor
Quick color is used to insert hexadecimal color values into the editor window. A standard color dialog box is used for the color selection.
QuickStart
QuickStart is used to create the opening and closing tags of an HTML document. Several page attributes can be set through QuickStart. The Title and Margin tab is used to set (surprise) the document's title, and margins, as well as the HTML type. The Color and Graphics tab is used to set the text and background colors of the document, as well as possible background images. The Set Color buttons allows the user to convert any color into hexadecimal. The other way is to use one of the predefined colors, available in the dropdown lists. The Background Image box allows the user to select an image to be used as the document's background. The watermark checkbox determines whether the image is fixed. The third tab, META information, can be used to set refresh rates and document keywords, the latter often used by search engines. The fourth tab, Style Sheets, allows the creation for extremely specific font settings for the document. Specific character layout schemes can be created
for individual HTML tags. Style Sheets are supported by Internet Explorer 3.01 and higher, and Netscape 4.0 and higher.
Script Tags
This simple tool inserts the opening and closing tags for scripts. The dialog box gives the user the option to choose between VB Script and Javascript.
Scripting Tools
Scripting tools is a set of scripts and scripting tools that insert Javascripts and VB scripts into the HTML page without coding. There are 9 Javascripts, 6 VB Scripts, and 2 VBScripting tools, and 1 Javascript tools.
Premade Scripts
Javascripts
- Autoscroll
- Makes the page automatically scroll inside the browser window.
- Current Platform Script
- Shows the current OS of the computer system.
- Current Resolution Script
- Shows the resolution of the moniter.
- Current Color-Depth Script
- Shows the current color-depth of the display.
- Current Date Script
- Shows the current date on the webpage.
- Current Time Script
- Shows the current time on the webpage.
- Current Weekday Script
- Shows the current weekday on the webpage.
- CPU Type Script
- Shows the type of processor in the computer system.
- Frame Buster
- Stops a page from being contained in a frame.
- Browser Name Script
- Displays the name of the web browser.
- Last Modified Script
- Displays the last time the page was modified.
VB Scripts
- Current Date Script
- Shows the current date on the web page.
- Current Weekday Script
- Shows the current weekday on the web page.
- Current Time Script
- Shows the current time on the webpage.
- Good Morning, Afternoon, and Evening Script
- Depending on the current time, displays "Good Morning", "Good Afternoon", or "Good Evening"
- Browser Name Script
- Displays the name of the web browser.
- Last Modified Script
- Displays the last time the page was modified.
Scripting Tools
- Image rollover
- Creates an image that changes when the mouse moves over it.
- Linkbox Script
- This tool creates a list box with links to other pages
- Random Background Color Script
- This tool creates a script that randomly uses 1 of 5 colors as the web page's background color.
- Random Text Script
- This tool creates scripts that randomly display different lines of text.
- Scrolling Status Bar Message
- Creates a scolling line of text in the browser's status bar.
Sound
The Sound tool is used to insert background music or sounds into a web page. Currently, Microsoft Internet Explorer supports wave, MIDI, and AU formats. The Source box is used to specify the URL of the sound file. The Loop box determines how many times the sound or music will be repeated.
Special Effects
Having graphics on a web page is nice; however, picture files can often take up a lot of web space. In addition, web pages that use a lot of pictures generally take longer to load. The Special Effects tool allows users to create HTML generated graphics. These can be a helpful alternative to embedded graphics.
Special Effects offers four tools for creating HTML generated graphics. The first tool is 3D Text. This tool uses Style Sheets to create 3D Text. For good results, the Back Color should be a color close to the background color of the HTML document. This tool allows the user to use any font; however, it is recommended that Arial be used for most 3D text.
The second tool, Sloped Text, allows users to create slanted text. The Smallest Font box and Largest Font box determines how big the slope is.
The third tool creates horizontal gradient dividers. This tool uses the RGB system of depicting colors. Color 1 and Color 2 are each made up of the combined values of red, green, and blue. Each RGB value can go up to 255. The Gradient Divider Tool takes the two colors and creates a gradient from one to the other. The Steps box determines how many levels there are in the gradient. For a nice effect, go with at least 20 steps. The Height box determines the height of the gradient in pixels.
The fourth tool, Gradient Text, uses the same principle as Gradient Divider tool. For this tool, however, a line of text will make up the gradient. The Height box is based on font size, not pixels.
Table Builder
Tables have become a very popular part of HTML page design. Instead of being used simply to depict data, they are now used to precisely line up text and graphics on a page. The Table Builder provides a user friendly WYSIWYG interface for creating tables. It consists of two tabs, one providing the main editor, and the other providing access to the table properties.
The first tab, Grid Cells, is the WYSIWYG part of the Table Builder. It supports the setting of font size, font color, and background color. This editor allows the user to define a column's width by simply resizing it as one would in Excel. Row Height can also be modified in order to view the entire contents of a cell, however, it has no impact on the HTML output.
In second tab, Table Settings, is used to set non-WYSIWYG properties. The Table Title box creates a visible Footer above the table. This option usually is not needed or used. The Border Size box determines the width of the table border in pixels. Leaving this box blank results in a non-bordered table. The Border color box determines the color of the border using either a hexadecimal color setting or one of the predefined color values. The Cell Padding box sets how close text is to the side of a cell. The Cell Spacing box determines how close the cells are to the outer border of the table. The Frame Border box is used to set the appearance of the external border of the table. The Rules box is used to determine the appearance of the inner cell borders. The Text Alignment box determines how the text inside the cells is oriented horizontally. The Vertical Text Alignment box determines how the cells text inside the cells is oriented vertically. The Transparent Background checkbox is used to determine whether the table background is transparent or whether the cells can have background colors. The percentage width box determines whether the table's width is determined by pixels or by percents.
Visual HB
Visual HB is a completely visual HTML editor built into Hypertext Builder. It is extremely useful for making quick rewrites to pages without having to worry about coding. If Windows 98 or Internet Explorer 4.0 or higher is installed, then this tool can be reached by pressing the button in the editor window below the ">" button. This tool is based on Microsoft's DHTML Editing component.
VRML Orbiter
VRML Orbiter allows users to create an animated VRML (Virtual Reality Markup Language sitemap. It makes a kind of solar system, with a central orb, and several rotating planets. Each of these planets can have a URL affiliated with it. The Central Text box is used to set the text that will appear above the central orb. The Spheres area is used to create all the planets that will rotate around the central orb. The Preview button launches a VRML browser (If one is installed) to preview the sitemap. The Save File button saves the sitemap as a VRML 2.0 file.
5. Other Useful Features
Besides the tools explained above, Hypertext Builder 5.0 contains several other abilities which ease the creation of HTML Document.
Importation Features
Hypertext Builder 5.0 has the ability to import both text and spreadsheet files. The text importation feature automatically inserts the necessary HTML tags along with the imported text. Hypertext Builder 5.0 can import either RTF (Rich Text Format) Files or regular TXT (Text) files. Hypertext Builder 5.0 can also insert spreadsheet files saved under the Text and Tabs format. These features allow the user to create an HTML page before he/she even begins to use Hypertext Builder 5.0's authoring features.
Note: Images and tables embedded in RTF Files cannot be imported.
Customizable Tag Buttons and List
A custom bar which contains six customizable buttons is available. Their captions, and "insert text" settings can be set in the Hypertext Builder 5.0 settings dialog box. In addition, in the lower right corner of the Hypertext Builder 5.0 window is a series of lists. One of these is customizable. The settings for this list can also be set in the Hypertext Builder 5.0 settings dialog box.
PAK PIM (Personal Information Manager)
PAK PIM is a tool that helps the user maintain his/her development schedule. It includes an agenda calender that shows any date from 0 AD to 3000 AD. It also includes a phone directory, and a URL directory.
Publish File
Hypertext Builder 5.0 includes built-in FTP capability. The Publish File button takes the file currently selected in the Website Directory file box, and transports it to an FTP directory. The settings for Publish File can be set in the Hypertext Builder Settings box, located in the View menu.