One of the first things you'll need to know a bit about is HTML - HyperText Markup Language. A formatting/scripting language that is used on nearly every bit of information sent to (or received from) the Internet...
The result of a BSP application will be a HTML document. The same goes for the Internet Service, ultimately the file that is presented to a browser window is an HTML document. So what is HTML ? It's the formatting language that internet documents are described in. HTML documents are plain-text (also known as ASCII) files that can be created using any text editor (e.g. Notepad on a Windows machine). The specific thing that makes a text file an HTML file is the fact that tags like <HTML> can be found in the file. Also the file name should have an extension .htm or .html.
HTML documents have normally a head (<HEAD>...</HEAD>) and a body (<BODY>...</BODY>) and the whole document is enclosed by <HTML> and </HTML>). Most tags in a HTML document will have a closing tag, e.g. <B>to start typing bold and </b> to end it again.
Within a HTML document, <SCRIPT> ... </SCRIPT> tags can be added, in which scripting logic such as JavaScript can be put in place...
Check out the HTML homepage of the W3C consortium for more information on this.
For a tutorial and full reference on HTML, check out www.w3schools.com - HTML tutorial.
A brief overview of commonly used HTML tags.. in logical order
| Main HTML document components | |
| HTTP | <HTTP> ...contents of the html page ... </HTTP> |
| HEAD | html tag indicating the header of the document <HEAD> ... </HEAD> |
| TITLE | html tag indicating the title of the document <TITLE> ... </TITLE> |
| BODY | html tag indicating the body of the document <BODY> ... </BODY> |
| Lists | |
| OL | Ordered (numbered) List <OL> ...<LI> tags... </OL> |
| UL | Unordered List <UL> ...<LI> tags... </UL> |
| LI | List (object on list) <LI> No closure required |
| Tables | |
| TABLE | Table definition <TABLE> ... </TABLE> , within the TABLE tag, the TH and TD tags apply. |
| TD | Table cell <TD> ... </TD> - </TD> is optional! |
| TH | Table header <TH> ... </TH> (as TD tag) |
| TR | Table Row <TR> ... </TR> - </TR> is optional ! |
| Reference and Image | |
| A | Reference <A HREF=http://www.abapcadabra.com>click here</A> |
| HREF | HTML attribute for <A>, hyperlink reference <A HREF=http://www.abapcadabra.com>click here</A> (Attribute) |
| IMG | Image <IMG src=picture.gif> |
| Text formatting | |
| P | Paragraph <P> no tag closure required |
| B | Bold <B> ... </B> |
| I | Italics <I> ... </I> |
| U | Underline <U> ... </U> |
| CENTER | html tag for text-justification (to the center) <CENTER> ... </CENTER> |
| FONT | Font settings <FONT size=large> ... </FONT> |
| PRE | Preformatted <PRE> ... </PRE> |
| SPAN | String settings <SPAN class=something> ... </SPAN> |
| HTML form (entry fields) | |
| FORM | html FORM (holding input fields) definition <FORM name=myform> ... </FORM> |
| INPUT | html FORM - input field definition <INPUT name=myfield> |
| TEXTAREA | html FORM - input field definition, text field <TEXTAREA name=mytext> ... </TEXTAREA> |
| SELECT | html FORM - input field definition, pull-down <SELECT name=mypulldown> <OPTION>...<OPTION>...<OPTION>... </SELECT> |
| OPTION | html FORM - input field definition, pull-down entry <SELECT name=mypulldown> <OPTION>...<OPTION>...<OPTION>... </SELECT> |
| Miscellaneous | |
| DIV | An area (division) of the HTML page, defined as <DIV> ... </DIV>. Divisions can be situated somewhere, contents can be changed, characteristics can be altered. |
| SCRIPT | Involve Javascript (as example). |