Computer Science 1000

Computer Science 1000 Markup Languages

Extensible Hypertext Markup Language (XHTML) • a stricter version of HTML • syntax defined by XML • further syntax restrictions • element/attribute names must be lowercase • attribute values must be quoted • widespread browser support

<html> • defines the root of the document • all other content must be included in html element content • must include xmlns attribute • xml namespacing (xml not discussed here) • attribute value must be "xmlns="http://www.w3.org/1999/xhtml" • must contain exactly two tags • head • body

Attributes • name = "value" pair • included in the start tag of an element • defines some feature of the element • value must be in quotation marks • one element may contain several attributes • ordering of attributes irrelevant • separated by white space <html xmlns="http://www.w3.org/1999/xhtml">

<head> • information typically intended for browser • example tags included in <head>: • Very common: • <title> : the title of the document (appears in tab) • Common: • <script>: contains Javascript code • <meta>: information intended for search engines and servers • Less Common: • <base>: defines URL base for relative links

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> This is an example! </title> </head> <body> </body> </html>

<body> • the content of your webpage • text, images, tables, forms, etc • <p> • a paragraph of information • logically separates information • eg. in most browsers, two paragraphs separated by blank space

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> This is an example! </title> </head> <body> <p> This is paragraph one! </p> <p> This is paragraph two! </p> </body> </html>

Whitespace • outside of certain tags (e.g. p), whitespace is basically ignored • hence, you do not need to include your tags on separate lines, as in previous examples • however, you are stronglyrecommended to use whitespace to make your program more readable

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> This is an example! </title> </head> <body> <p> This is paragraph one! </p><p> This is paragraph two! </p> </body> </html>

<html xmlns="http://www.w3.org/1999/xhtml"><head><title> This is an example! </title></head><body><p> This is paragraph one! </p><p> This is paragraph two!</p></body></html>

Whitespace within tags <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> This is a space example! </title> </head> <body> <p> This is CPSC 1000: Intro to Computer Science. Your instructor is: Kevin Grant. Your classroom is: UH B756. </p> </body> </html>

HTML & Whitespace • HTML treats whitespace within text tags (e.g. p) as word separators • type of whitespace irrelevant (space, tab, etc) • number of contiguous characters irrelevant, replaced by single blank • In previous example, we could use two <p> elements to separate the text

Whitespace within tags <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> This is a space example! </title> </head> <body> <p> This is CPSC 1000: Intro to Computer Science. </p> <p> Your instructor is: Kevin Grant. </p> <p> Your classroom is: UH B756. </p> </body> </html>

Unrecognized Elements • what happens if we include an unrecognized element in our document? <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> This is an example! </title> </head> <body> <p> Hello World! </p> <pp> Good to see you! </pp> </body> </html>

Most browsers attempt to display the page anyway • unrecognized element: ignores markup • unrecognized attribute: ignores attribute <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> This is an example! </title> </head> <body> <p> Hello World! </p> <pp> Good to see you! </p> </body> </html>

Most browsers attempt to display the page anyway • unrecognized element: ignores markup • unrecognized attribute: ignores attribute <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> This is an example! </title> </head> <body> <p> Hello World! </p> <pp> Good to see you! </p> </body> </html> XHTML considers text directly in <body> element to be a part of an implicit <p> element

Special Characters • Suppose you were making an HTML instructional website:

Will this work? <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> HTML - The P element </title> </head> <body> <p> <p> </p> <p> Used to enclose paragraph information.</p> <p> Example: </p> <p> <p> This is paragraph one. </p> </p> <p> <p> This is paragraph two. </p> </p> </body> </html>

Special Characters • XHTML parser sees < and > as markup • start of a tag • we want < and > to be part of content • solution: use an escape symbol • also called a entity reference • a sequence of symbols that represents a special character • begins with &, ends with ;

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> HTML - The P element </title> </head> <body> <p> <p> </p> <p> Used to enclose paragraph information.</p> <p> Example: </p> <p> <p> This is paragraph one. <p> </p> <p> <p> This is paragraph two. <p> </p> </body> </html>

Fundamental XHTML elements • suppose we were creating a tutorial website for XHTML elements • we are constructing the page for simple lists (to be taken shortly) • Given what we know now, the page might look like this:

Example

Title goes in head element • To achieve a new line, we place in a separate <p> tag • To include special characters in our code, must use references: • < : < • >: >

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Simple Lists</title> </head> <body> <p>XHTML Elements</p> <p>Topic 6: Simple Lists</p> <p>Purpose:</p> <p>A list is an XHTML construct used to create bulleted or enumerated data.</p> <p>There are two types of simple lists: Unordered and ordered. A more complex type of list, definition, can be found at /xhtml/def.html.</p> <p>In an unordered list, each element is displayed as a bullet. This is for data whose ordering is unimportant. Unordered lists use the tag <ul>. Each item in the list is denoted by <li>. </p> <p>Example:</p> <p><ul></p> <p><li> Ham </li></p> <p><li> Pineapple </li></p> <p><li> Cheese </li></p> <p></ul></p> </body> </html>

Result • page is: • boring • ugly • code is difficult to read

Problem 1: No emphasis on any data These have same visual weight

Headings • produce section headings • allow information to categorized hierarchically • 6 levels provided by HTML • <h1> - highest level • <h2> - second highest level • … • <h6> - 6th highest level • Browsers have a default on how these headings are displayed

Example Top-level Second-level Third-level

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Simple Lists</title> </head> <body> <h1>XHTML Elements</h1> <h2>Topic 6: Simple Lists</h2> <h3>Purpose:</h3> <p>A list is an XHTML construct used to create bulleted or enumerated data.</p> <p>There are two types of simple lists: Unordered and ordered. A more complex type of list, definition, can be found at /xhtml/def.html.</p> <p>In an unordered list, each element is displayed as a bullet. This is for data whose ordering is unimportant. Unordered lists use the tag <ul>. Each item in the list is denoted by <li>. </p> <h3>Example:</h3> <p><ul></p> <p><li> Ham </li></p> <p><li> Pineapple </li></p> <p><li> Cheese </li></p> <p></ul></p> </body> </html>

Problem 2: Spacing These are all defined in separate paragraphs, even though the data belongs together. Hence, a space is included between elements.

The <br> tag • provides a line break in the code • breaks occur in the same paragraph of information • allows visual separation of information, while maintaining logical coupling of information (within the <p> tag) • uses the <br> tag

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Simple Lists</title> </head> <body> <h1>XHTML Elements</h1> <h2>Topic 6: Simple Lists</h2> <h3>Purpose:</h3> <p>A list is an XHTML construct used to create bulleted or enumerated data.</p> <p>There are two types of simple lists: Unordered and ordered. A more complex type of list, definition, can be found at /xhtml/def.html.</p> <p>In an unordered list, each element is displayed as a bullet. This is for data whose ordering is unimportant. Unordered lists use the tag <ul>. Each item in the list is denoted by <li>. </p> <h3>Example:</h3> <p> <ul><br></br> <li> Ham </li><br></br> <li> Pineapple </li><br></br> <li> Cheese </li><br></br> </ul> </p> </body> </html>

<br></br> • Note that these tags contain no content • emptytag • Shorthand for empty tags: • <element-name /> <p> <ul><br /> <li> Ham </li><br /> <li> Pineapple </li><br /> <li> Cheese </li><br /> </ul> </p>

This isn't bad, but we can do better • Notice that our tags have no indenting • Placing a <br /> after each line is cumbersome • Difficult to differentiate the example code from the other content

The <pre> tag • preformatted text • overrides whitespace processing and font rendering • all whitespace is preserved • tags still work in preformatted text • entity references still work in preformatted text

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Simple Lists</title> </head> <body> <h1>XHTML Elements</h1> <h2>Topic 6: Simple Lists</h2> <h3>Purpose:</h3> <p>A list is an XHTML construct used to create bulleted or enumerated data.</p> <p>There are two types of simple lists: Unordered and ordered. A more complex type of list, definition, can be found at /xhtml/def.html.</p> <p>In an unordered list, each element is displayed as a bullet. This is for data whose ordering is unimportant. Unordered lists use the tag <ul>. Each item in the list is denoted by <li>. </p> <h3>Example:</h3> <pre> <ul> <li> Ham </li> <li> Pineapple </li> <li> Cheese </li> </ul> </pre> </body> </html>

Text Decoration • it would be nice to emphasize certain parts of the text with • bold • italics • monospace font, to show our example XHTML code (like in the pre tag)

Bold Italic Monospaced

Font Style Elements in XHTML

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Simple Lists</title> </head> <body> <h1>XHTML Elements</h1> <h2>Topic 6: Simple Lists</h2> <h3>Purpose:</h3> <p>A <b>list</b> is an XHTML construct used to create bulleted or enumerated data.</p> <p>There are two types of simple lists: <i>unordered</i> and <i>ordered</i>. A more complex type of list, <i>definition</i>, can be found at /xhtml/def.html.</p> <p>In an <b>unordered list</b>, each element is displayed as a bullet. This is for data whose ordering is unimportant. Unordered lists use the tag <tt><ul></tt>. Each item in the list is denoted by <tt><li></tt>. </p> <h3>Example:</h3> <pre> <ul> <li> Ham </li> <li> Pineapple </li> <li> Cheese </li> </ul> </pre> </body> </html>

<strong> and <em> • while <b> and <i> are part of XHTML, they are not recommended • strictly visual markup, rather than semantic • instead, use <strong> for bold, and <em> for italic • received better by other technologies • screen readers

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Simple Lists</title> </head> <body> <h1>XHTML Elements</h1> <h2>Topic 6: Simple Lists</h2> <h3>Purpose:</h3> <p>A <strong>list</strong> is an XHTML construct used to create bulleted or enumerated data.</p> <p>There are two types of simple lists: <em>unordered</em> and <i>ordered</i>. A more complex type of list, <em>definition</em>, can be found at /xhtml/def.html.</p> <p>In an <strong>unordered list</strong>, each element is displayed as a bullet. This is for data whose ordering is unimportant. Unordered lists use the tag <tt><ul></tt>. Each item in the list is denoted by <tt><li></tt>. </p> <h3>Example:</h3> <pre> <ul> <li> Ham </li> <li> Pineapple </li> <li> Cheese </li> </ul> </pre> </body> </html>

Horizontal Rules • suppose we add a second set of information to the page • a discussion about ordered lists, in addition to unordered lists • we will use similar formatting (headings, strong, em) to achieve similar effects for this discussion

Computer Science 1000