Software Methods Content 1 Markup Languages HTML XML

Introduction • Markup Language – A set of markup conventions used together for encoding

Introduction (cont. ) • HTML – Hyper. Text Markup Language – Not a procedural

Markup Languages • Markup language – Used to format text and information • HTML

Editing HTML • HTML files or documents – Written in source-code form using text

Common Tags • Always include the <HTML>…</HTML> tags • Comments placed inside <!--…--> tags

An Simple Example 1 2 3 4 5 6 7 8 9 10 11

Headers • Headers – Simple form of text formatting – Vary text size based

Header Elements H 1 through H 6 1 2 3 4 5 6 7

Header Elements H 1 through H 6 (cont. )

Text Styling • Underline style – <U>…</U> • Align elements with ALIGN attribute –

Styling Text on Web Pages 1 2 3 4 5 6 7 8 9

Linking • Links inserted using the A (anchor) element – Requires HREF attribute •

Images • Images as anchors • Background color – Preset colors (white, black, blue,

Images (cont. ) • Image background – <BODY BACKGROUND = “background”> – Image does

Formatting Text with <FONT> • FONT element – Add color and formatting to text

Formatting Text with <FONT> (cont. ) • SIZE – To make text larger, set

1<HTML> 2 3<!-- Fig. 9. 8: main. html --> 4<!-- Formatting text size and

Special Characters, Horizontal Rules and More Line Breaks • Special characters – Inserted in

Special Characters, Horizontal Rules and More Line Breaks (cont. ) • Horizontal rule –

1<HTML> 2 3<!-- Fig. 9. 10: header. html --> 4<!-- Line breaks and horizontal

Introduction to XML • XML – Markup language for describing structured data – content

Introduction to XML (cont. ) • XML parsers – Check an XML document’s syntax

Structuring Data • Element types – Can be declared to describe data structure •

Structuring Data (cont. ) 1 2 3 4 5 6 7 8 9 10

1<? xml version = "1. 0"? > 2 3<!-- Fig. 27. 5: letter. xml

34 <paragraph>It is our privilege to inform you about our new 35 database managed

Business letter formatted by XSL John Doe 123 Main Street Anytown, Anystate 12345 555

Document Type Definitions (DTD) • Document Type Definition – Specify list of element types,

Document Type Definitions (DTD) (cont. ) – !ATTLIST • Defines attributes for an element

1<!-- Fig 27. 6: letter. dtd --> 2<!-- DTD document for letter. xml -->

Customized Markup Languages • Customized Markup Languages – Can create own tags to describe

Customized Markup Languages (cont. ) Other Examples • Wireless Markup Language (WML) – Allows

Object Middleware • A popular middleware is CORBA (Common Object Request Broker Architecture) which

Java Beans (Java Applets) • A Java applet is a program written in the

Main References • e-Business & e-Commerce : How to Program, H. M. Deitel, P.

Slides: 46

Download presentation

Software Methods Content 1. Markup Languages : HTML, XML 2. Object Middleware, Java Beans

Introduction • Markup Language – A set of markup conventions used together for encoding texts. – Specify what markup is allowed, how markup is to be distinguished from text and what the markups means • Two types of markup languages – Descriptive : describe what the contents are and mean, but let the users (browsers) interpret them and display them in their own ways – Procedural : instruct the users (browsers) how to display the text, what font size to use, how much space it should move after a certain is printed, etc

Introduction (cont. ) • HTML – Hyper. Text Markup Language – Not a procedural programming language like C, Fortran, Cobol or Pascal – Markup language • Identify elements of a page so that a browser can render that page on your computer screen • Separate presentation of a document and structure of that document

Markup Languages • Markup language – Used to format text and information • HTML – Marked up with elements, delineated by tags – Tags: keywords contained in pairs of angle brackets • HTML tags – Not case sensitive – Good practice to keep all the letters in one case • Forgetting to close tags is a syntax error

Editing HTML • HTML files or documents – Written in source-code form using text editor – Notepad: Start-Programs-Accessories – HTML-Kit: http: //www. chami. com/html-kit • HTML files –. htm or. html extensions – Name your files to describe their functionality – File name of your home page should be index. html • Errors in HTML – Usually not fatal

Common Tags • Always include the <HTML>…</HTML> tags • Comments placed inside  tags • HTML documents – HEAD section • Info about the document • Info in header not generally rendered in display window • TITLE element names your Web page – BODY section • Page content • Includes text, images, links, forms, etc. • Elements include backgrounds, link colors and font faces • P element forms a paragraph, blank line before and after

An Simple Example 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <HTML>   <HEAD> <TITLE>Internet and WWW How to Program - Welcome </TITLE> </HEAD> <BODY> Welcome to Our Web Site! </BODY> </HTML>

Headers • Headers – Simple form of text formatting – Vary text size based on the header’s “level” – Actual size of text of header element is selected by browser – Can vary significantly between browsers • CENTER element – Centers material horizontally – Most elements are left adjusted by default

Header Elements H 1 through H 6 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <HTML>   <HEAD> <TITLE>Internet and WWW How to Program - Headers </TITLE> </HEAD> <BODY>  <CENTER> <H 1>Level 1 Header</H 1>  <H 2>Level 2 header</H 2>  <H 3>Level 3 header</H 3>  <H 4>Level 4 header</H 4>  <H 5>Level 5 header</H 5>  <H 6>Level 6 header</H 6>  </CENTER> </BODY> </HTML>

Header Elements H 1 through H 6 (cont. )

Text Styling • Underline style – … • Align elements with ALIGN attribute – right, left or center • Close nested tags in the reverse order from which they were opened • Emphasis (italics) style – … • Strong (bold) style – … • and tags deprecated – Overstep boundary between content and presentation

Styling Text on Web Pages 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <HTML>   <HEAD> <TITLE>Internet and WWW How to Program - Welcome </TITLE> </HEAD> <BODY> <H 1 ALIGN = "center">Welcome to Our Web Site! </H 1> We have designed this site to teach about the wonders of HTML. We have been using HTML since version 2. 0, and we enjoy the features that have been added recently. It seems only a short time ago that we read our first HTML book. Soon you will know about many of the great new features of HTML 4. 0. <H 2 ALIGN = "center">Have Fun With the Site!</H 2> </BODY> </HTML>

Styling Text on Web Pages (cont. )

Linking • Links inserted using the A (anchor) element – Requires HREF attribute • HREF specifies the URL you would like to link to – <A HREF = “address”>…</A> – Can link to email addresses, using <A HREF = “mailto: emailaddress”>…</A> – Note quotation mark placement

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <HTML>   Linking to other Web Pages <HEAD> <TITLE>Internet and WWW How to Program - Links </TITLE> </HEAD> <BODY> <CENTER> <H 2>Here are my favorite Internet Search Engines </H 2> Click on the Search Engine address to go to that page.  Yahoo: <A HREF = "http: //www. yahoo. com"> http: //www. yahoo. com</A> Alta. Vista: <A HREF = "http: //www. altavista. com" > http: //www. altavista. com </A> Ask Jeeves: <A HREF = "http: //www. askjeeves. com" > http: //www. askjeeves. com </A> Web. Crawler: <A HREF = "http: //www. webcrawler. com" > http: //www. webcrawler. com </A> </CENTER> </BODY> </HTML>

Linking to other Web Pages (cont. )

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <HTML>   Linking to an Email <HEAD> <TITLE>Internet and WWW How to Program - Contact Page </TITLE> </HEAD> <BODY>   My email address is <A HREF = "mailto: deitel@deitel. com" > deitel@deitel. com</A>. Click on the address and your browser will open an email message and address it to me. </BODY> </HTML>

Images • Images as anchors • Background color – Preset colors (white, black, blue, red, etc. ) – Hexadecimal code • First two characters for amount of red • Second two characters for amount of green • Last two characters for amount of blue • 00 is the weakest a color can get • FF is the strongest a color can get • Ex. black = #000000

Images (cont. ) • Image background – <BODY BACKGROUND = “background”> – Image does not need to be large as browser tiles image across and down the screen • Pixel – Stands for “picture element” – Each pixel represents one addressable dot of color on the screen • Insert image into page – Use <IMG> tag • Attributes: – SRC = “location” – HEIGHT (in pixels) – WIDTH (in pixels) – BORDER (black by default) – ALT (text description for browsers that have images turned off or cannot view images)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <HTML>   Images (cont. ) <HEAD> <TITLE>Internet and WWW How to Program - Welcome </TITLE> </HEAD> <BODY BACKGROUND = "background. gif"> <CENTER>  <IMG SRC = "deitel. gif" BORDER = "1" HEIGHT = "144" WIDTH = "200" ALT = "Harvey and Paul Deitel" > </CENTER> </BODY> </HTML>

Formatting Text with • FONT element – Add color and formatting to text – FONT attributes: • COLOR – Preset or hex color code – Value in quotation marks – Note: you can set font color for whole document using TEXT attribute in BODY element

Formatting Text with (cont. ) • SIZE – To make text larger, set SIZE = “+x” – To make text smaller, set SIZE = “-x” – x is the number of font point sizes • FACE – Font of the text you are formatting – Be careful to use common fonts like Times, Arial, Courier and Helvetica – Browser will display default if unable to display specified font • Example …

1<HTML> 2 3 4 5 6<HEAD> 7<TITLE>Internet and WWW How to Program - Welcome </TITLE> 8</HEAD> 9 10<BODY> 11 12<H 1 ALIGN = "center">Welcome to Our Web Site! </H 1> 13 14 15We have 16 designed this site to teach about the wonders of 17HTML. 18 19We have been 20 using HTML since version 2. 0, 21 and we enjoy the features that have been added recently. 22 23It 24 seems only a short time ago that we read our first HTML 25 book. 26 27Soon you will 28 know about many of the great new feature of HTML 4. 0. 29 30<H 2 ALIGN = "center">Have Fun With the Site!</H 2> 31 32</BODY> 33</HTML> Formatting Text with (cont. )

Using the FONT Element to Format Text

Special Characters, Horizontal Rules and More Line Breaks • Special characters – Inserted in code form – Format always &code; • Ex. & – Insert an ampersand – Codes often abbreviated forms of the character – Codes can be in hex form • Ex. & to insert an ampersand • Strikethrough with DEL element • Superscript: SUP element • Subscript: SUB element

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <HTML>   Special Characters <HEAD> <TITLE>Internet and WWW How to Program - Contact Page </TITLE> </HEAD> <BODY>  My email address is <A HREF = "mailto: deitel@deitel. com" > deitel@deitel. com</A>. Click on the address and your browser will automatically open an email message and address it to my address. All information on this site is © Deitel & Associates, 1999.    <DEL>You may copy up to 3. 14 x 10 2 characters worth of information from this site. </DEL> Just make sure you do not copy more information than is allowable. No permission is needed if you only need to use < &frac 14; of the information presented here. </BODY> </HTML>

Inserting Special Characters into HTML

Special Characters, Horizontal Rules and More Line Breaks (cont. ) • Horizontal rule – <HR> tag – Inserts a line break directly below it – HR attributes: • WIDTH – Adjusts the width of the rule – Either a number (in pixels) or a percentage • SIZE – Determines the height of the horizontal rule – In pixels • ALIGN – Either left, right or center • NOSHADE – Eliminates default shading effect and displays horizontal rule as a solid-color bar

1<HTML> 2 3 4 5 6<HEAD> 7<TITLE>Internet and WWW How to Program - Horizontal Rule </TITLE> 8</HEAD> 9 10<BODY> 11 12 13<HR WIDTH = "25%" SIZE = 1> 14<HR WIDTH = "25%" SIZE = 2> 15<HR WIDTH = "25%" SIZE = 3> 16 17Size: 4 18Width: 75% 19<HR WIDTH = "75%" SIZE = "4" ALIGN = "left"> 20 21Size: 12 22Width: 25% 23<HR WIDTH = "25%" SIZE = "12" ALIGN = "right"> 24 25Size: 8 26Width: 50% 27No shade. . . 28<HR NOSHADE WIDTH = "50%" SIZE = "8" ALIGN = "center"> 29 30</BODY> 31</HTML> Horizontal Rules

Using Horizontal Rules

Introduction to XML • XML – Markup language for describing structured data – content is seperated from presentation – XML documents contain only data • Applications decide how to display the data – Language for creating markup languages • Can create new tags – Possible to search, sort, manipulate and render XML using Extensible Stylesheet Language (XSL) – Highly portable – Files end in the. xml extension

Introduction to XML (cont. ) • XML parsers – Check an XML document’s syntax – Support either the • Document Object Model (DOM) – Build a tree structure containing the XML document’s data • Simple API for XML (SAX) – Process the document and generate events – Document Type Definition (DTD) files • Defines grammatical rules for the document • Used to check the XML document structure against

Structuring Data • Element types – Can be declared to describe data structure • XML elements – Root element • Must be exactly one per XML document • Contains all other elements in document • Lines preceding the root element are called the prolog – Container element • Contains sub-elements (children) – Empty element • No matching end tag • In HTML, IMG

Structuring Data (cont. ) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <? xml version = "1. 0"? >  <article> <title>Simple XML</title> <date>September 6, 1999</date> <author> <fname>Tem</fname> <lname>Nieto</lname> </author> <summary>XML is pretty easy. </summary> <content>Once you have mastered HTML, XML is easily learned. You must remember that XML is not for displaying information but for managing information. </content> </article>

IE 5 Displaying article. xml

1<? xml version = "1. 0"? > 2 3 4 5 6<!DOCTYPE letter SYSTEM "letter. dtd"> 7 8<letter> 9 10 <contact type = "from"> 11 <name> John Doe</name> 12 <address 1>123 Main St. </address 1> 13 <address 2></address 2> 14 <city>Anytown</city> 15 <state>Anystate</state> 16 <zip>12345</zip> 17 <phone>555 -1234</phone> 18 <flag gender = "M"/> 19 </contact> 20 21 <contact type = "to"> 22 <name>Joe Schmoe</name> 23 <address 1>Box 12345</address 1> 24 <address 2>15 Any Ave. </address 2> 25 <city>Othertown</city> 26 <state>Otherstate</state> 27 <zip>67890</zip> 28 <phone>555 -4321</phone> 29 <flag gender = "M"/> 30 </contact> 31 32 <salutation>Dear Sir: </salutation> 33 Business letter with DTD

34 <paragraph>It is our privilege to inform you about our new 35 database managed with XML. This new system allows 36 you to reduce the load of your inventory list server by 37 having the client machine perform the work of sorting 38 and filtering the data. </paragraph> 39 <closing>Sincerely</closing> 40 <signature>Mr. Doe</signature> 41 42</letter> Business letter with DTD (cont. )

Business letter formatted by XSL John Doe 123 Main Street Anytown, Anystate 12345 555 -4321 Joe Schmoe Box 12345 15 Any Ave. Othertown, Otherstate 67890 555 -4321 Dear Sir, It is our privilege to inform you about our new database managed with XML. This new system allows you to reduce the load on your inventory list server by having the client machine perform the work of sorting and filtering the data. Sincerely, Mr. Doe

Document Type Definitions (DTD) • Document Type Definition – Specify list of element types, attributes and their relationships to each other – Optional, but recommended for program conformity – !Element • Element type declaration – defines the rules for an element • Plus sign (+) – one or more occurrences • Asterisk (*) – any number of occurrences • Question mark (? ) – either zero or exactly one occurrence • Omitted operator – exactly one occurrence • #PCDATA – The element can store parsed character data

Document Type Definitions (DTD) (cont. ) – !ATTLIST • Defines attributes for an element • #IMPLIED – Can assign its own type attribute or ignore • #REQUIRED – The specified attribute must be declared in the document • #FIXED – The Specified attribute must be declared with given value

1 2 3 Business Letter DTD 4<!ELEMENT letter (contact+, salutation, paragraph+, 5 closing, signature ) > 6 7<!ELEMENT contact (name, address 1, address 2, city, state, 8 zip, phone, flag) > 9<!ATTLIST contact type CDATA #IMPLIED> 10 11<!ELEMENT name (#PCDATA)> 12<!ELEMENT address 1 (#PCDATA)> 13<!ELEMENT address 2 (#PCDATA)> 14<!ELEMENT city (#PCDATA)> 15<!ELEMENT state (#PCDATA)> 16<!ELEMENT zip (#PCDATA)> 17<!ELEMENT phone (#PCDATA)> 18<!ELEMENT flag EMPTY> 19<!ATTLIST flag gender (M | F) "M"> 20 21<!ELEMENT salutation (#PCDATA)> 22<!ELEMENT closing (#PCDATA)> 23<!ELEMENT paragraph (#PCDATA)> 24<!ELEMENT signature (#PCDATA)>

Customized Markup Languages • Customized Markup Languages – Can create own tags to describe data, creating a new markup language Example • Math. ML – Developed by W 3 C for describing mathematical notations and expressions Integral symbol Delta symbol

Customized Markup Languages (cont. ) Other Examples • Wireless Markup Language (WML) – Allows portions of Web pages to be displayed on wireless devices – Works with Wireless Application Protocol (WAP) • Extensible Business Reporting Language (XBRL) – Facilitates the creation, exchange and validation of financial information • Electronic Business XML (eb. XML) – Used for exchanging business data

Object Middleware • A popular middleware is CORBA (Common Object Request Broker Architecture) which is a client-server middleware that enables a client to invoke a method on a server object either in the same machine or across a network. Client Result Object Request Broker

Java Beans (Java Applets) • A Java applet is a program written in the Java programming language that can be included in an HTML page, much in the same way an image is included. • When you use a Java technology-enabled browser to view a page that contains an applet, the applet's code is transferred to your system and executed by the browser's Java Virtual Machine. Java beans Server Network Java bean to be run here Client PC

Main References • e-Business & e-Commerce : How to Program, H. M. Deitel, P. J. Deitel and T. R. Nieto, Prentice Hall, 2000. • The XML Companion, Neil Bradley, Addison-Wesley, 1998. • e. Business Essentials: Technology and Network Requirements for Mobile and Online Markets, 2/e, by Mark Norris and Steve West, John Wiley & Sons.