How to create styles from a given document

Styles mainly consist of expressions. Expressions can either be plain text that must be somewhere in your document, or a regular expression which must match your document.

To see how this works, lets take the following example - The sections are now marked:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 
<html>
|        <head>
|               <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
1               <link rel="stylesheet" type="text/css" href="../style.css">
|        
|               <title>Test Document</title>
|        </head>
 
        <body>
|
2               <h1>Test Document</h1>
|               <div class="hr"><hr></div>
 
|                
3               <p>Test Documents Text.</p>
|       
        </body>
</html>

Section #1: The Head

The head should be divided into two expressions. The first one checks for the existence of the head and the second one checks for the meta information which must be in the head section.

<head>(n|r|.)*?</head>

Options:

  • Inheritance = “normal” - can be any value because this is a top-level expression which does not inherit from a different expression.
  • Min = “1
  • Max = “1” - may only occur once in an HTML document

Hint: Instead of the first check you can create a trigger with the class com.inet.doqua.TidyValidateHTML, since this check is covered by this trigger.

Now create a sub-expression by marking the expression above and clicking the expression button (expression button) and name it “title”. The expression is almost the same as the one above.

<title>(n|r|.)*?</title>

Options:

  • Inheritance = “normal” - meaning only to search on matches of the parent expression: the expression is to be contained within the head area.
  • Min = “1
  • Max = “1” - may only occur once in an HTML document

Create another sub-expression to the head and name it “content type”.

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Options:

  • Inheritance = “normal” - meaning only to search on matches of the parent expression: the expression is to be contained within the head area.
  • Min = “1
  • Max = “1” - may only occur once in an HTML document

This expression is plain text only and checks for the content type inside the head tags. Add another style as before.

<link rel="stylesheet" type="text/css" href="(\.\./)+style.css">

Options:

  • Inheritance = “normal” - meaning only to search on matches of the parent expression: the expression is to be contained within the head area.
  • Min = “1
  • Max = “1” - may only occur once in an HTML document

The expression for CSS-Styles allows the style.css to be located in any directory above the current one.

Section #2: The Body and Heading

Create a new expression parallel to the head expression. You can use the same regular expression and settings - just replace head with body - and call it e.g. “Body”. Now add another expression below:

<body>(\n|\r|\s)*?<h1>(\n|\r|.)*?</h1>(\n|\r|\s)*?<div class="hr"><hr></div>

Options:

  • Inheritance = “normal” - can be any value because this is a top-level expression which does not inherit from a different expression.
  • Min = “1
  • Max = “1” - may only occur once in an HTML document

Though the code is a one-liner, it will check for the two lines you have in your HTML. And it also makes sure that the block is the first entry in your HTML body.

Add another expression nested in the body expression from above:

<h1>(\n|\r|.)*?</h1>

Options:

  • Inheritance = “normal” - meaning only to search on matches of the parent expression: the expression is to be contained within the body area.
  • Min = “1
  • Max = “2000” - since there is no maximum in this case, you need to arbitrarily define one.

What's next?

 

© Copyright 1996 - 2024, i-net software; All Rights Reserved.