1 / 28

HTML CODING

HTML CODING. Kevin.godsey@mo.usda.gov. Text output is black and white text that opens in NOTE pad. These files can be saved and used in other programs.

tal
Download Presentation

HTML CODING

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML CODING Kevin.godsey@mo.usda.gov

  2. 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.

  3. HTML Structure 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.

  4. 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>

  5. 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.

  6. It is best to type all KEY words in Capital letters e.g. • SECTION WHEN AT START • ELEMENT “title” “This is a title”. • END SECTION.

  7. It helps to visualize the structure when you indent sub-sections . SECTION WHEN AT START ELEMENT OPEN “HTML”. ELEMENT OPEN “BODY”. END SECTION.

  8. 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.

  9. 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.

  10. 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”).

  11. 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”).

  12. 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.

  13. A simple output consists of at least three sections: SECTION WHEN AT START ELEMENT OPEN “HTML”. ELEMENT OPEN “BODY”. END SECTION. SECTION DATA Main body of data or table……. END SECTION. SECTION WHEN AT END ELEMENT CLOSE “BODY”. ELEMENT CLOSE “HTML”. END SECTION.

  14. 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”

  15. 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").

  16. 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.

  17. A simple table example: TEMPLATE basic TAG "td" ELEMENT "tr" FIELD VALUETAG "h4" . SECTION WHEN AT START DATA 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. SECTION DATA 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.

  18. Here is the same table marked up with Attiributes TEMPLATE basic TAG "td" ELEMENT "tr" FIELD VALUETAG "h4" . SECTION WHEN AT START DATA ELEMENT OPEN "HTML". 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") . USING basic "component". ELEMENT CLOSE "thead". END SECTION. SECTION DATA 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.

  19. This is a main report that runs subreports:

  20. The first sub-report plots the textures on a triangle

  21. Thethird, forth and fifth sub-report have hyperlinks, prints a soils description and creates a mini profile

  22. 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==1 data ELEMENT OPEN "h3" ATTRIB ("style", p12) "x". ELEMENT Close "h3". end section.

  23. 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.

  24. 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

  25. 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.

  26. 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.

  27. EXEC SQL SELECT compname FROM component;. TEMPLATE basic TAG "td" ELEMENT "tr" FIELD VALUETAG "h4" . SECTION WHEN AT START DATA ELEMENT OPEN "HTML". 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") . USING basic "component". ELEMENT CLOSE "thead". END SECTION. SECTION DATA ELEMENT OPEN "tbody". ELEMENT OPEN "tr". USING basic compname. ELEMENT CLOSE "tr". ELEMENT CLOSE "tbody". END SECTION.

More Related