Displaying Text and Hypertext
echohtml command is used to display text. echohtml also supports a subset of HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheets) which allows you to format the output.
We have already seen how to use echohtml command in the Hello World Tutorial. Lets see how can we use inline CSS and display a table using echohtml. Copy and paste the following command and press enter.
echohtml <p align="center" style="font-family:arial;font-size:15pt">Following table shows hexadecimal values of colors <font color="red"><b>red</b></font>, <font color="green"><b>green</b></font> and <font color="blue"><b>blue</b></font>:</p> <table style="margin-top:10px" align="center" border=1 cellspacing=0 cellpadding=5><tr><th>Color</th><th>Hexadecimal value</th></tr><tr><td>Red</td><td>#ff0000</td></tr><tr><td>Green</td><td>#00ff00</td></tr><tr><td>Blue</td><td>#0000ff</td></tr></table>
You will see a similar output as shown in the image below:
Supported HTML tags
| Tag | Description | Comment |
|---|---|---|
| a | Anchor or link | Supports the href and name attributes. |
| address | Address | |
| b | Bold | |
| big | Larger font | |
| blockquote | Indented paragraph | |
| br | Line break | |
| center | Centered paragraph | |
| code | Code | Same as tt. |
| dd | Definition data | |
| dfn | Definition | Same as i. |
| div | Document division | Supports the align (left, right, center, justify) attribute. |
| dl | Definition list | Supports the align (left, right, center, justify) attribute. |
| dt | Definition term | Supports the align (left, right, center, justify) attribute. |
| em | Emphasized | Same as i. |
| font | Font size, family, and/or color | Supports the following attributes: size, face, and color. |
| h1 | Level 1 heading | Supports the align (left, right, center, justify) attribute. |
| h2 | Level 2 heading | Supports the align (left, right, center, justify) attribute. |
| h3 | Level 3 heading | Supports the align (left, right, center, justify) attribute. |
| h4 | Level 4 heading | Supports the align (left, right, center, justify) attribute. |
| h5 | Level 5 heading | Supports the align (left, right, center, justify) attribute. |
| h6 | Level 6 heading | Supports the align (left, right, center, justify) attribute. |
| hr | Horizontal line | Supports the width attribute, which can be specified as an absolute or relative (%) value. |
| i | Italic | |
| img | Image | Supports the src, width, and height attributes. |
| kbd | User-entered text | |
| li | List item | |
| ol | Ordered list | Supports the type (1, a, A, square, disc, circle) attribute. |
| p | Paragraph | Supports the align (left, right, center, justify) attribute. |
| pre | Preformated text | |
| s | Strikethrough | |
| samp | Sample code | Same as tt. |
| small | Small font | |
| span | Grouped elements | |
| strong | Strong | Same as b. |
| style | Style sheet | Allows CSS to be included. A limited subset of CSS syntax can be used to change the appearance of the text. |
| sub | Subscript | |
| sup | Superscript | |
| table | Table | Supports the following attributes: border, bgcolor, cellspacing, cellpadding, width (absolute or relative), and height. |
| td | Table data cell | Supports the width, bgcolor, colspan, rowspan, align (left, right, center, justify) and valign (top, middle, bottom) attributes. |
| th | Table header cell | Supports the width, bgcolor, colspan, rowspan, align (left, right, center, justify) and valign (top, middle, bottom) attributes. |
| tr | Table row | Supports the bgcolor attribute. |
| tt | Teletype font | |
| u | Underlined | |
| ul | Unordered list | Supports the type (1, a, A, square, disc, circle) attribute. |
| var | Variable | Same as i. |
Supported CSS Properties
| Property | Values | Description |
|---|---|---|
| background-color | <color> | Background color for elements |
| background-image | <uri> | Background image for elements |
| color | <color> | Text foreground color |
| font-family | <family name> | Font family name |
| font-size | [ small | medium | large | x-large | xx-large ] | <size>pt | <size>px | Font size relative to the document font, or specified in points or pixels |
| font-style | [ normal | italic | oblique ] | |
| font-weight | [ normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ] | |
| text-decoration | none | [ underline || overline || line-through ] | Text effects |
| font | [ [ <'font-style'> || <'font-weight'> ]? <'font-size'> <'font-family'> ] | Font shorthand property |
| text-indent | <length>px | First line text indentation in pixels |
| white-space | normal | pre | nowrap | pre-wrap | Declares how whitespace in HTML is handled. |
| margin-top | <length>px | Top paragraph margin in pixels |
| margin-bottom | <length>px | Bottom paragraph margin in pixels |
| margin-left | <length>px | Left paragraph margin in pixels |
| margin-right | <length>px | Right paragraph margin in pixels |
| padding-top | <length>px | Top table cell padding in pixels |
| padding-bottom | <length>px | Bottom table cell padding in pixels |
| padding-left | <length>px | Left table cell padding in pixels |
| padding-right | <length>px | Right table cell padding in pixels |
| padding | <length>px | Shorthand for setting all the padding properties at once. |
| vertical-align | baseline | sub | super | middle | top | bottom | Vertical text alignment. For vertical alignment in text table cells only middle, top, and bottom apply. |
| border-color | <color> | Border color for tables. |
| border-style | none | dotted | dashed | dot-dash | dot-dot-dash | solid | double | groove | ridge | inset | outset | Border style for tables. |
| background | [ <'background-color'> || <'background-image'> ] | Background shorthand property |
| float | [ left | right | none ] | Specifies where an image or a text will be placed in another element. Note that the float property is only supported for tables and images. |
| text-transform | [ uppercase | lowercase ] | Select the transformation that will be performed on the text prior to displaying it. |
| font-variant | small-caps | Perform the smallcaps transformation on the text prior to displaying it. |
Note: Some HTML tags and CSS properties may also effect the prompt.