HTML CODING [email protected]. Text output is black and white text that opens in NOTE pad. These files can be saved and used in other programs

HTML CODING

[email protected]

• Text output is black and white text that opens in NOTE pad. These files can be saved and used in other programs.• HTML output is more dynamic with

formatting options with color, table boarders, pictures, and hyperlinks that open in an Explorer window. They can be copied and pasted into excel and access.

HTML documents are divided into sections. The “head” section (the contents of the head element) and a “body” section (the contents of the body element).

The body can be subdivided into paragraph and tables.

HTML Structure

The HTML output is controlled with the ELEMENT command.

Example:ELEMENT “P” “this is a test paragraph”.

This will open a paragraph print the text in the second set of quotes and then close the paragraph.

<p> This is a test paragraph </p>

An element in HTML represents some kind of structure or semantics and generally consists of a start tag, content, and an end tag

Tags are used to mark up the start and end of an HTML element.

Valuetags are used to mark up one field at a time.

An attribute defines a property for an element, consists of an attribute/value pair, and appears within the element’s start tag. An element’s start tag may contain any number of space separated attribute/value pairs.

•It is best to type all KEY words in Capital letters e.g.

SECTION WHEN AT STARTELEMENT “title” “This is a title”.END SECTION.

It helps to visualize the structure when you indent sub-sections .

SECTION WHEN AT STARTELEMENT OPEN “HTML”.ELEMENT OPEN “BODY”.

END SECTION.

Some elements do not have to be typed in for the report to run.

HTML is automatically put into the report when the run button is click.

However if the report is complex you may receive an error message with multiple root elements.

•Explicitly include all start and end tags, including the optional tags

•Quote all attribute values, use double-quoted syntax, and do not use any whitespace around the equals sign: ATTRIB(“style”,“color:red”).

•Use lowercase for all element and attribute names.

You can have more than one tag or attribute per element with different properties. You can also nest tags and valuetag in complex structures.

ELEMENT OPEN “table” ATTRIB(“style”, “background-color:red”) ATTRIB (“border”, “3”).

If you want more than one style property you have to concatenate the properties with a semi-colon.

ATTRIB(“style”, “color:red;font:12;font:italic”).

• If the data is too complex to fit into a single element then use the term open and close after the specification of element.

• ELEMENT OPEN “p” “This is a test paragraph”.• ELEMENT CLOSE “p”.• Results are the same for this example:• <p> This is a test paragraph</p>

• Every OPEN element must have a corresponding CLOSE element.

A simple output consists of at least three sections:

SECTION WHEN AT STARTELEMENT OPEN “HTML”.ELEMENT OPEN “BODY”.

END SECTION. SECTIONDATA

Main body of data or table…….END SECTION. SECTION WHEN AT END

ELEMENT CLOSE “BODY”.ELEMENT CLOSE “HTML”.

END SECTION.

Different types of ELEMENT• Open the document

ELEMENT OPEN “HTML”.• Close the body

ELEMENT CLOSE “body”.• Create a line break

ELEMENT “br”.• Create a horizontal line

ELEMENT “hr”.• Open a table• ELEMENT OPEN “table”

• Open a table row• ELEMENT “tr”

• Open a hyperlink• ELEMENT OPEN “link”

• Open a picture• ELEMENT OPEN “img”

ATTRIB("src","https://nrcs.sc.egov.usda.gov/ssra/nssc/Projects/NASIS/triangle.jpg") ATTRIB ("target", "_blank") ATTRIB ("alt","'NASIS site link broken'") ATTRIB ("width", "600") ATTRIB ("height", "536") ATTRIB ("usemap","#texture").

Examples of Attributing elements• ELEMENT "h3" ATTRIB ("style", "color:FF0000") "Red text indicates critical errors.".

Red text indicates critical errors.

• ATTRIB("style", "color:#0000FF;font:12") “Test color and size”.Test color and size

• ELEMENT OPEN "h2" ATTRIB ("align", "center") "This report make over 200 checks on the data.".

• This report make over 200 checks on the data.

A simple table example:

TEMPLATE basic TAG "td" ELEMENT "tr" FIELD VALUETAG "h4" .

SECTION WHEN AT STARTDATA ELEMENT OPEN "HTML".

ELEMENT OPEN "body" . ELEMENT "h2" "List of Components" .ELEMENT OPEN "table”.ELEMENT OPEN "thead”.

USING basic "component".ELEMENT CLOSE "thead".

END SECTION.

SECTIONDATA

ELEMENT OPEN "tbody".ELEMENT OPEN "tr".

USING basic compname.ELEMENT CLOSE "tr".ELEMENT CLOSE "tbody".

END SECTION.

SECTION WHEN AT END DATA

ELEMENT CLOSE "table".ELEMENT CLOSE "body".ELEMENT CLOSE "HTML".

END SECTION.

Here is the same table marked up with Attiributes



ELEMENT OPEN "body" . ELEMENT "h2" ATTRIB ("style", "color:0000FF") "List of Components" .ELEMENT OPEN "table" ATTRIB("border", "3") ATTRIB("style", "background-color:FF0000").ELEMENT OPEN "thead" ATTRIB ("align", "center") .


END SECTION.

SECTIONDATA



END SECTION.

SECTION WHEN AT END DATA

ELEMENT CLOSE "table".ELEMENT CLOSE "body".ELEMENT CLOSE "HTML".

END SECTION.

This is a main report that runs subreports:

The first sub-report plots the textures on a triangle

The third, forth and fifth sub-report have hyperlinks, prints a soils description and creates a mini profile

Define statements can be used to build HTML coding.

DEFINE y1 y||" px".DEFINE x1 x||" px".

DEFINE p12 "position:absolute;left:"||x1||";top:"||y1||";color:3366FF“.

SECTION WHEN c1==1dataELEMENT OPEN "h3" ATTRIB ("style", p12) "x".ELEMENT Close "h3".end section.

This example selects the component name and inserts it into a url with a define

statement and then calls it later when the OSD button is pushed.

• EXEC SQL• select compname• from component;.

• DEFINE fl1 compname[0:1].• DEFINE name1 upcase(compname).

• DEFINE osd1 "http://www2.ftw.nrcs.usda.gov/osd/dat/"||fl1||"/"||name1||".html".

• section when at start• data

• element open "a" Attrib("href",osd1) Attrib("target", "_blank") "VISIT OSD SITE".• element close "a".• end section.

Exercise:

•Create a table of component names in your selected set.•Use a template for the table•Give the table a border with shading•Color the background of the table•Use H2 for the title and color the font•Center the table heading in the cell•Size the text with H4

INSTRUCTIONS• Build your report in stages• Write your query and run with a default xml

output. • The Explorer window will show you all the

formatting for the default report. • You can run the report in HTML default format

and open the window with view source. It will start with a style sheet with all the default soil survey values.

• Next write the basic template and sections without any fanfare (no attributes)

• Run the report and fix any errors that crop up.• Then start adding attributes to the fields until

you have a final product. • Note NASIS and Windows will shut down and

fail after 54 explorer windows have been opened.

EXEC SQLSELECT compnameFROM component;.



ELEMENT OPEN "body" . ELEMENT "h2" ATTRIB ("style", "color:0000FF") "List of Components" .ELEMENT OPEN "table" ATTRIB("border", "3") ATTRIB("style", "background-color:FF0000").ELEMENT OPEN "thead" ATTRIB ("align", "center") .


END SECTION.

SECTIONDATA



END SECTION.

Documents

HTML CODING [email protected]. Text output is black and white text that opens in NOTE pad. These files can be saved and used in other programs