1. 1 Labels and Tags October 14, 2015

2. 2 Grammar A set of components and rules that define a method/means of communication among objects. Components are the lexical elements of the language Rules are expressed in the syntax of the language Every language has a grammar! Programming languages Spoken languages Written languages

3. 3 Specification Methods Natural-language specifications Natural-language extensions Formal language  Specified grammar  Effective lexical processors/analyzers Semi-formal languages  Grammars  Conversation Diagrams  State Charts  User Action Notation Better for describing human computer communications

4. 4 Grammars in a Software Context Standalone concept Grammar that defines/describes object Grammar that defines/describes and interchange Application of the concept SGML HTML XML

5. 5 Grammars BNF (Backus-Naur form) helpful in describing programming languages Describes objects that occur in computer based interchanges Example: ::= ::= | ::= A|B|C|D|E|F|G|H|I|J|K|L|M|N|O|P|Q|R|S|T|U|V|W|X|Y|Z ::= - ::= ::= 0|1|2|3|4|5|6|7|8|9

6. 6 Multiparty Grammars Language structure to accommodate more than one participant The person (“U”) The computer (“C”) Effective for text-oriented command sequences ::= ::= LOGIN ::= A|B|C|D|E|F|G|H|I|J|K|L|M|N|O|P|Q|R|S|T|U|V|W|X|Y|Z ::= HELLO [ ]

7. 7

8. 8 Grammar Analysis of a Conversation Diagram Data elements Catalog/SKU information Item description Quantity Unit price Discount terms Build a grammar that describes Line Item screen  Structure  Data elements  Messages Conversation LINE ITEM SCREEN Name Department Location Phone Fax e-mail PROGRAM ERROR MESSAGE W/PROMPTS

9. 9 Grammar of the Data Elements ::= ::= - ::= | ::= A|B|C|... |X|Y|Z|0|1|2|... |8|9 ::= ::= | ::= A|B|C|... |X|Y|Z|0|1|2|... |8|9 ::= ::= 0|1|2|3|4|5|6|7|8|9 ::= $. ::= 0|1|2|3|4|5|6|7|8|9 ::=. % ::= 0|1|2|3|4|5|6|7|8|9 Described the data elements to be entered by the user (in this case, the purchasing agent.

10. 10 Grammar of the Screen Session ::= ::= ENTER NEXT LINE ITEM CATALOG/SKU ITEM DESCRIPTION QUANTITY UNIT PRICE DISCOUNT TERMS ::= ::= - ::= | ::=A|B|C|... |X|Y|Z|0|1|2|... |8|9 ::= ::= | ::=A|B|C|... |X|Y|Z|0|1|2|... |8|9 ::= ::=. ::= 0|1|2|3|4|5|6|7|8|9 ::= >. ::= 0|1|2|3|4|5|6|7|8|9 ::= ERROR : | ACCEPTED ::= | ::= A|B|C|... |X|Y|Z|0|1|2|... |8|9

11. 11

12. 12 DOCUMENT TAGS Document tags divide up a Web page into its basic sections (e.g, header information, text, and graphics). HTML The first and last tags in a document should always be the HTML tag. These are the tags that tell a Web browser where the HTML in your document begins and ends. The above sequence of tags will give you a blank web screen. HEAD The HEAD tags contain all of the document's header information. TITLE This container is placed within the HEAD structure. Between the TITLE tags, you should have the title of your document. This will appear at the top of the browser's title bar, and also appears in the history list. Finally, the contents of the TITLE container go into your bookmark file, if you create a bookmark to a page.

13. 13 DOCUMENT TAGS BODY BODY comes after the HEAD structure. Between the BODY tags, all of the text, the graphics, and links, are displayed. Document title   What would this HTML document look like COMMENT Precede comments with an exclamation point (!) inside the angle brackets   Appear only in the code – not on the screen  Why are Comment Tags important???

14. 14 TEXT STRUCTURE HEADINGS The heading structures are most commonly used to set apart document or section titles. Heading structures go into the body of the document. Six levels of headings  Heading 1 (H1) is "most important" and Heading 6 (H6) is "least important."  By default, browsers will display the six heading levels in the same font, Point size decreasing as the importance of the heading decreases. Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6

15. 15 TEXT STRUCTURE Paragraphs Common in Web pages. Most basic structures in HTML. Page is composed of a number of sections; each section composed of at least one paragraph. The beginning of a paragraph is marked by, and the end by. Line Break BEGINS AND ENDS WITH A tag.  Forces a line break  Whatever is after the tag will start from the left margin of the next line on the screen.)  THERE IS NO TAG. Blockquote Used to quote long pieces of material and set apart from the rest of the text. Blockquotes are set up as follows: ...text...

16. 16 LISTS Unordered Lists Like a MS Word "bullet list." Each list item is preceded by a "bullet" or burgher dot Begins with the tag and and ends with the tag Each item in the list is marked using the and ends with a tag, Stands for "List Item." Example:  Monday Tuesday Wednesday Thursday Friday would be displayed as Monday Tuesday Wednesday Thursday Friday

17. 17 LISTS Ordered Lists Lists can also be ordered. Use and, instead of and. Ordered lists display numerated sequential group of items.  Monday Tuesday Wednesday Thursday Friday The above markup, similar to the previous slide, would look like this: 1. Monday 2. Tuesday 3. Wednesday 4. Thursday 5. Friday

18. 18 ANCHORS HREF Stands for "Hypertext REFerence," Refers to the location of the file you want to load. Anchors take the following form, where URL is the location of the resource you want to skip to. For example, a message to visit the PSU IST web site "http://www.ist.psu.edu" that would be be displayed on a web page as: “Checkout http://www.ist.psu.edu to see the Penn State IST web site “ would be coded as “Check out to see the Penn State IST web site http://www.ist.psu.edu You can also reference a mail to address. For example “Send inquiries to: Professor Green

19. 19 IMAGES IMG Use use an SRC attribute. The URL of the graphic you want to have displayed on your Web page. Thus, a typical image tag will take the form: ALIGN Screen space can be wasted when graphics are integrated into paragraphs. Text can be “ALIGNED” within the vertical space which is created by the graphic. Text lined up with the bottom of the graphic, or can align it to either the top or the middle of the graphic using the ALIGN attribute  Causes the top of any text on the same line as that graphic to be aligned with the top of the graphic. There is also an  ALIGN=middle option, Align the text's baseline with the middle of the graphic, and of course ALIGN=bottom, Default display strategy for most browsers