Simplifying Content

HTML source file clutter

  • HFL can greatly reduce the clutter of source files, because a lot of what must normally be added to HTML source files can be generated automatically.
  • The most common case of this is the requirement that paragraphs be marked with tags, usually the <p> tag. Without enclosing the paragraphs with tags, HTML will simply join the paragraphs together, because it ignores whitespace such as carriage-returns and spaces.
  • Thus the following input:

    • This is paragraph1 with content that refers to subject 1 and only
      to subject 1.

      This is paragraph2 with content that refers to subject 2 and only
      to subject 2.

  • would display as:
    • This is paragraph1 with content that refers to subject 1 and only to subject 1. This is paragraph2 with content that refers to subject 2 and only to subject 2.
  • To get them to be separate paragraphs, it is necessary to enclose them with tags, such as <p>:

    • <p>This is paragraph1 with content that refers to subject 1 and only
      to subject 1.</p>

      <p>This is paragraph2 with content that refers to subject 2 and only
      to subject 2.</p>

  • so that they display as:
    • This is paragraph1 with content that refers to subject 1 and only to subject 1.
    • This is paragraph2 with content that refers to subject 2 and only to subject 2.
  • Having to enclose everything in tags such as <p> makes HTML a user-unfriendly language.

Formats can generate the extra tags for you

  • An HFL format can construct the necessary HTML tags, so that the source files are much simpler, far easier to read, and much easier to create.
  • In our example above, instead of wrapping each paragraph in a tag, we can simply apply a format that will do it for us. The format used, 'sample1.hfmt', will parse (break into meaningful segments) any content tagged with <topics_nlnl>, and split paragraphs at every line that is completely empty.
  • STEPS:
    • Open file 'hello3.hfl'.

    • Change the tag enclosing the 'Jello Whirled!' from <body_content> to <topics_nlnl>.

      The <topics_nlnl> will be detected by a scope specification within 'sample1.hfmt' that will now parse the content of the tag and generate HTML sub-tags for various elements within it.

    • Now add two paragraphs of text, with an empty line between them. You can add any text you wish. For example:


      This is paragraph1 with content that refers to subject 1 and only
      to subject 1.

      This is paragraph2 with content that refers to subject 2 and only
      to subject 2.

      NOTE: the format looks at spaces, so it is very important that the empty line be just a carriage return, with no spaces at all.

      This format can also create bulleted and numbered items, and it tracks indentation. So if the source file has an indented paragraph, the generated output will also be indented.

    • Lets add some numbered list and bulleted list items. Again, you can make the text anything you wish.

      The rules are: a numbered list is a block of test that starts with a decimal followed by a period followed by a blank, and a bulleted list starts with an asterisk followed by a blank. For example:


          1. Numbered item 1, that is indented from paragraph2. Lorem ipsum dolor sit amet,
              consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua.

          2. Numbered item 2, that is indented from paragraph2. Lorem ipsum dolor sit amet,
              consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua.

      This is paragraph3 which is aligned with paragraphs 1 and 2, with content that
          refers to subject 3 and only to subject 3.

          * Bullet item 1, that is indented from paragraph3.  Lorem ipsum dolor sit amet,
              consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua.

          * Bullet item 2, that is indented from paragraph3.  Lorem ipsum dolor sit amet,
              consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua.

      This is paragraph4 which is aligned with paragraphs 1, 2 and 3, with content that
          refers to subject 4 and only to subject 4.

          This is a paragraph that is indented from paragaph4. Lorem ipsum dolor sit amet,
          consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
          dolore magna aliqua.

    • Update the <nav> and <bottom_links> sections by adding in an <item> for 'hello4.html'.

    • Save as file 'hello4.hfl'.

      Show the source file It should now look similar to this.

    • Compile file "hello4.hfl".

      Show the generated page Now if you double-click on the generated file "hello4.html", you should see that it has several paragraphs, including a numbered sub-list and a bulleted sub-list.

      If any of the paragraphs are joined to ones above them, you probably do not have a truly empty line between them.

      Show the generated HTML file The generated HTML file should look similar to this.

      Notice that the content in 'hello4.html' is now inside a large amount of HTML structure. The paragraphs were enclosed in <p> tags, <ul> and <ol> tags were generated for the numbered and bulleted lists respectively, and each list item was enclosed in an <li> tag.

      Notice also that the source file 'hello4.html' is still pretty uncluttered, and it is easy to locate the various content components.

Previous: Hello World Next: Swapping Formats