Document Markup Languages

Abdallah A Hassan Document Markup Languages

Agenda • What are Markup Languages? • HTML • SGML • XML • Document Type Definition (DTD) • MathML • Cascading Style Sheets • Conclusions

What are markup languages? • Contents of a document (text sections /equations/figures/tables/etc.) are marked up with tags to both • identify it. • delimit it. • So the Document is composed of elements • each element is usually composed of • Start tag (usually a word in angle brackets) • Data contained in the tag • End tag

What are markup languages? • Marking contents of the document with tags can be useful for several reasons: • Presentation of document. • Making the structure clear. • Describing the content. • Instructing the tools handling the document.

Unmarked document example September 1, 2000 Dear Prof. Stein, I would like to tell you how much I enjoyed reading your new text “Digital Signal Processing, A Computer Science Perspective”. I hope we will be able to meet at the next conference. Sincerely, Dee Espy

Structural Markup <HEADING>September 1, 2000</HEADING> <GREETING>Dear Prof. Stein, </GREETING> <BODY> I would like to tell you how much I enjoyed reading your new text “Digital Signal Processing, A Computer Science Perspective”. I hope we will be able to meet at the next conference. </BODY> <SIGNATURE> Sincerely, Dee Espy </SIGNATURE>

Presentational Markup <RIGHT-JUSTIFY>September 1, 2000</RIGHT-JUSTIFY> <BOLD>Dear Prof. Stein,</BOLD> I would like to tell you how much I enjoyed reading your new text <UNDERLINE> “Digital Signal Processing, A Computer Science Perspective”. </UNDERLINE> I hope we will be able to meet at the next <BLINK>conference.</BLINK> Sincerely, <IMAGE SRC=“deesignature.jpg” ALIGN=“left”> <FONT FACE=“Times-Roman”>Dee Espy</FONT>

Descriptive Markup <DATE>September 1, 2000</DATE> Dear <PERSON>Prof. Stein,</PERSON> I would like to tell you how much I enjoyed reading your new text <BOOK> “Digital Signal Processing, A Computer Science Perspective”. </BOOK> I hope we will be able to meet at the next <EVENT>conference.</EVENT> Sincerely, <PERSON>Dee Espy</PERSON>

HTML • The language for web browsing. • Fixed set of around 100 tags. • Focuses on document representation rather than the meaning of its elements.

HTML <HTML> <HEAD> <TITLE>Web page title</TITLE> </HEAD> <BODY> marked-up text </BODY> </HTML>

Some HTML tags <H1>Level 1 Heading</H1> Level 1 Heading <H2>Level 2 Heading</H2> Level 2 Heading <H3>Level 3 Heading</H3> Level 3 Heading <EM> emphasized </EM> emphasized <P> Paragraph </P> Paragraph • <A HREF=url>link</A> link • <UL> <LI> item 1 </LI> .item 1 <LI>item 2 </LI> .item 2 </UL> • <OL> <LI> item 1 </LI> 1 item 1 <LI>item 2 </LI> 2 item 2 </OL>

SGML (Standard Generalized Markup Language) • HTML was an instance of SGML. • Appeared in 70s and became an ISO standard in 1986. • Has not been widely used due to • Complexity • Inflexibility

XML (Extensible Markup Language) • Widely used for communicating data between applications. • Aimed at simplifying SGML. • Flexible and extensible. • XML tags focus on the meaning rather than the representation. • An XML document has a hierarchical structure with a single root element enclosing all other elements.

XML example <Assessment> <MCQ> <question> Algorithm X is : </question> <choices> <choice> O(n) </choice> <choice> O(nlogn) </choice> <choice> O(1) </choice> <choices> <targeted_sections> 2 </targeted_sections> <targeted_sections> 3 </targeted_sections> <ans> 1 </ans> </MCQ> <MCQ> ... </MCQ> <Essay> .... </Essay> </Assessment>

XML (Extensible Markup Language) • Easy to create special purpose languages based on XML • DTD (Document Type Definition) • Schema

DTD (Document Type Definition) • Formal description of the XML document. • Specifies which elements are allowed and hierarchal structure of elements.

DTD (Document Type Definition) • Writing a DTD file for documents of a specific domain (chemistry, music, etc.) EQUALS Defining an XML-based markup language for that domain.

DTD example <!ELEMENT Assessment((MCQ | Essay)+) <!ELEMENT MCQ(question, choices, hint?, targeted_sections*,ans)> <!ELEMENT choices(choice, choice ,choice+)> <!ELEMENT question (#PCDATA)> <!ELEMENT hint (#PCDATA)> <!ELEMENT targeted_sections (#PCDATA)> <!ELEMENT choice (#PCDATA)> . . .

XML example <?xml version=“1.0“?> <!DOCTYPE assessment SYSTEM “http://www.abc.com/assess.dtd“> <Assessment> <MCQ> <question> Algorithm X is : </question> <choices> <choice> O(n) </choice> <choice> O(nlogn) </choice> <choice> O(1) </choice> <choices> <targeted_sections> 2 </targeted_sections> <targeted_sections> 3 </targeted_sections> <ans> 1 </ans> </MCQ> <MCQ> ... </MCQ> <Essay> .... </Essay> </Assessment>

Available XML based languages • VML = Vector (graphics) Markup Language • SSML = Speech Synthesis Markup Language • CPML = Call Policy Markup Language • DSML = Directory Services Markup Language • MathML = Mathematical Markup Language • CML = Chemical Markup Language • AML = Astronomical Markup Language • BSML = Bioinformatic Sequence Markup Language • GedML = Genealogical Data Markup Language • FinXML = Financial market Markup Language • ChessML • SDML = Signed Document Markup Language • RELML = Real Estate Listing Markup Language • etc. etc. etc. ...

MathML • Extended from XML to describe mathematical notations. • Recommended by W3C math working group. • Deals not only with presentation but also meaning of formulae components.

MathML • Composed of two parts • Presentation MathML • Content MathML

Presentation MathML • Focuses on display of an equation • Has about 30 elements and 50 attributes • ax^2 + bx + c <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE math PUBLIC "-//W3C//DTD MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/mathml2.dtd"> <mrow> <mi>a</mi> <mo>⁢</mo> <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>+</mo> <mi>b</mi> <mo>⁢</mo> <mi>x</mi> <mo>+</mo> <mi>c</mi> </mrow>

Content MathML • focuses on the semantic meaning of the expression • <apply> element represents a function or operator, given in the first child

Content MathML • ax^2 + bx + c <math> <apply> <plus/> <apply> <times/> <ci>a</ci> <apply> <power/> <ci>x</ci> <cn>2</cn> </apply> </apply> <apply> <times/> <ci>b</ci> <ci>x</ci> </apply> <ci>c</ci> </apply> </math>

Cascading Style Sheets CSS • Language for presentation of documents written in a markup language. • So, it enables separation of document content from document presentation.

Cascading Style Sheets CSS • Benefits: • Improves content accessibility. • Enable multiple pages to share formatting. • Page can display differently for different screen sizes. • Page can presented differently for different rendering methods (on screen , in print, Braille-based devices, etc.)

Cascading Style Sheets CSS • Simple syntax • English keywords for various style properties • A style sheet is a list of rules • Rule : Selector(s) + declaration block • Declaration : property : value • h1 { color: black; background-color: red; } h2 { color: white; background-color: green; }

Conclusions • Document markup languages allow applications to handle documents more efficiently. • XML is widely used and core standard for web • It is easy to define a markup language based on XML and customized to documents of a specific domain. • Separation of the document presentation and document content is highly desirable.

Thank you so much

Document Markup Languages