Sample Web Page

HyperNote creates web pages that look something like this.

Intro

  1. HyperNote is a remarkable notetaking environment for the Macintosh, available for free download at http://www.earthvisions.net/stacks.html.
  2. Open the HyperNote Menus tutorial stack, and read the card explaining "HTML Features." It will...
    • explain much of the terminology used below, such as "HyperNote Web Format," and
    • describe the web-related control cards located in HyperNote Home.
    • Be sure to read what it says about organizing and arranging your website folder!
  3. It might be helpful to print this web page to use for reference whenever you want to edit HyperNote Web Formats.
  4. For a brief overview of HTML, click the links button above, or the previous arrow button below.

Headings and Links

  1. Note the title of the first heading, "Sample Web Page." The first heading is part of HyperNote's <Heading1> Web Format. The Web Format includes code for doing things like:
    1. Beginning with a horizontal bar ("website/images/rule.gif"), followed by your custom logo ("website/images/logo.gif") aligned left, the heading text aligned left, and a bar of links aligned right, followed by an HTML horizontal rule ("<HR>"). All of this, as shown on this page, is part of the default, preset web formats for <Heading1> and/or <HTML Header>.
    2. Or, if you prefer a different look, you may edit the <Heading1> Web Format to do something entirely different. View and change HTML codes for web formats in HyperNote with the "Web Formats" control card.
  2. A multi-colored sphere is positioned to the left of the second heading, "...HyperNote creates web pages...." Second headings are determined by HyperNote's <Heading2> Web Format, which includes code for the large sphere, as shown. You may view and change the code for the <Heading2> and other Web Formats on the "Web Formats" control card.
  3. In the upper right is a "Links Bar."
    • The links bar is specified by HyperNote's <linksBar> format.
    • The above Links Bar uses the "rainbow" style buttons.
    • Go to the "Web Links Bar" control card to edit <linksBar> html code.
    • Another possible links bar is shown below. It uses "cyan" buttons, where the asterisk represents the index or home page.
    • At the bottom of a page, a cyan "up arrow" button (added automatically) returns the browser to the top of the page.
    • You can also create a text-only links bar, using the 6th Heading format and the "|" character, as shown below the cyan links bar.
    • Each of these three links bar styles is an available preset HyperNote default setting. For any given export, switch between the Rainbow, Cyan, and Text-only styles painlessly, using a "Bar Style" button on the "Web Links Bar" control card. Or use your own custom links bar format!
Two more Links Bar styles, "cyan" and "text-only":

| Prev | Home | Next | Top |
 

Horizontal Rule

The marble bar image just below ("website/images/rule.gif") is specified by the <HorizontalRule> Web Format. To use a different image, do one of two things:

  1. Simply replace the rule.gif image in the website/images folder with your own image, also named rule.gif.
  2. Or change the <HorizontalRule> Web Format on the "Web Formats" control card. For example, you could set the <HorizontalRule> format to use an image with a different name, or to use simply the HTML "<HR>" code, instead of the website/images/rule.gif image. Web Format changes made on this control card may be permanent or just for a single export.

 

Other images in your HyperNote/website/images folder

Headings from 1 (largest) to 6 (smallest) are paired with the following images

Heading 1 uses the marble rule (images/rule.gif) as shown on top of this page.

<Heading1> Web Format

images/Heading2.gif

<Heading2> Web Format

images/Heading3.gif

<Heading3> Web Format

images/Heading4.gif

<Heading4> Web Format

images/Heading5.gif

<Heading5> Web Format

Heading 6 is centered, small font, and uses "|" marks as a text-only links bar.

<Heading6> Web Format

Note: These are the default, preset settings.

  • Any of them may be changed using the "Web Formats" control card. For example, you may add or delete images as part of any heading format. Or, you may change their alignment: all of the heading images are preset to be aligned with the middle of the line of text; you might prefer to align them to the left, right, bottom, or top. Or, you can add HTML code for a horizontal rule, and other components.
  • Or, if you only want to substitute different images without dealing with HTML code at all, you can simply replace the images in the website/images folder with different images of the same name (e.g., Heading2.gif, etc.).

 

Rainbow gifs

 
  • The rainbow gifs are used with many of the preset Web Formats; see the Web Formats control card for details. You can include them in a links bar, or simply enter the Web Format for the image (e.g., "<index>") anywhere in a HyperNote text field.
  • If you use either the rainbow images shown here, or the cyan images displayed below, then you need to link your web pages to www.elated.com, the source of these free-for-non-commercial-use images. (HyperNote writes this link automatically based on the "HTML Footer Field," so it will happen as shown at the bottom of this page, unless you make changes while editing the "Footer Field" on the "Web Header and Footer" control card.)

 

Cyan buttons

  1. triangle.gif
  2. diamond.gif
  3. smallball.gif
    • Copies of these three cyan buttons under different names are also used for the 3rd, 4th and 5th Heading Web Formats.
    • Using these names you can also use them for other purposes, even if you replace the Heading images with your own, or redefine the Heading Web Formats to use other images.

     

 

Miscellaneous images

A copy of this largesphere.gif (named Heading2.gif) is used for the second heading level, but you can use it under this name any time, even if you replace the Heading images with your own, or redefine the Heading Web Formats to use other images.

This is my logo (website/images/logo.gif). You will want to replace it with your own. It is used at the top and the bottom of the web page, unless you change the default settings on the "Web Header and Footer" control card.

The default "Footer Field" setting includes these advertising logos as shown below.

Replace this image (website/images/signature.gif) with a scan of your own signature. It is used with the <name> Web Format. Simply type <name> anywhere in a HyperNote text field, and upon exporting as HTML, your signature image will be displayed.

Web Formats make conversion of HyperNote text fields to web pages flexible and easy. They consist of text enclosed by two "<" and ">" signs defined on the Web Formats control card. For instance, to display this image, simply enter its web format; i.e., <tack>, in any HyperNote field.

A books.gif, used in the <books> web format, is automatically used to mark text exported from HyperNote source fields.

Besides this <rollingball> web format, the white background texture of this web page is the website/images/background.gif image. You can switch it for your own background image, or use the whitecanvas.gif shown right.

  • For your convenience, a complete list of images and web formats is available; click "Next" on any of Links Bar on this page.
  • Add your own buttons and images to the website/images folder. If they don't replace the provided ones, include them in your own custom Web Formats!

 

 

Kerry Magruder