Computer Science 1000

Computer Science 1000 Markup Languages III

URL • Universal Resource Locator • the location of a webpage on the internet • made up of different parts: http://www.somewhere.com/im/in/here.html Server Name Pathname Protocol

URL • Protocol • tells the computers how to handle the file • Server Name • the computer on the web that stores the file • Pathname • the name of the file, and the folder that it is stored in • Note: not all parts are necessary • e.g. target is often omitted http://www.somewhere.com/im/in/here.html Server Name Pathname Protocol

URL • there are different types of URLs • absolute • site-relative • document-relative • internal (discussed later) these are often referred to collectively as relative

URL – Absolute • an absolute URL specifies at least a server and a pathname • e.g. a bio on your textbook author: • http://homes.cs.washington.edu/~snyder/bio.html • an absolute pathname is total, in that it contains all the information that a browser would need to know to find a file

URL – Site-relative • a site-relative URL specifies no server, but a full pathname • e.g.: • /~snyder/bio.html • always begins with a forward slash • a site-relative URL assumes that the server is the same as the page that it is listed on • hence, if the URL above was listed on the page http://homes.cs.washington.edu/~snyder/index.html, then the URL would refer to http://homes.cs.washington.edu/~snyder/bio.html

URL – Document-relative • a document-relative URL specifies no server, and only a partial path • e.g.: • bio.html • a document-relative URL assumes that the listed file is on the same server and in the same folder as the page that it is listed on: • hence, if the URL above was listed on the page http://homes.cs.washington.edu/~snyder/index.html, then the URL would refer to: http://homes.cs.washington.edu/~snyder/bio.html

URL – Document-relative • a document-relative URL can also specify a folder name before the filename • e.g.: • folder1/bio.html • hence, if the URL above was listed on the page http://homes.cs.washington.edu/~snyder/index.html, then the URL would refer to: http://homes.cs.washington.edu/~snyder/folder1/bio.html

URL – Site-relative • a site-relative URL specifies at least a server and a pathname • e.g. a bio on your textbook author: • http://homes.cs.washington.edu/~snyder/bio.html • an absolute pathname is total, in that it contains all the information that a browser would need to know to find a file

URL • certain parts of the • there are different types of hyperlinks • absolute • document-relative • site-relative • internal these are often referred to collectively as relative

Back to our example • notice that we have site-relative URL on our webpage • when users wish to visit those pages, they will have to manually enter the location into their web browser.

Hypertext • allows text to refer to other text • often on another page • indicated with the <a> tag (anchor) • the content of the tag specifies the referring text • the href attribute specifies the URL of the text • the text in <a> is typically referred to as a hyperlink, or link • most browsers underline, by default

<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 <em>ordered</em>. A more complex type of list, <em>definition</em>, can be found <a href="def.html">here</a>. </p> <hr /> <h4>Unordered Lists</h4> <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> <h5>Example:</h5> <pre> <ul> <li> Ham </li> <li> Pineapple </li> <li> Cheese </li> </ul> </pre> <hr /> <h4>Ordered Lists</h4> <p>In an <strong>ordered list</strong>, each element is displayed as a number. This is for data whose ordering is important. Ordered lists use the tag <tt><ol></tt>. Items are specified with <tt><li></tt>, as before.</p> <h5>Example:</h5> <pre> <ol> <li> Roll out dough </li> <li> Place ham, pineapple, and cheese on dough </li> <li> Bake for a reasonable amount of time. </li> </ol> </pre> </body> </html>

Hyperlink • an absolute URL is handled in the same manner

<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 <em>ordered</em>. A more complex type of list, <em>definition</em>, can be found <a href="def.html">here</a> or <a href="http://www.w3schools.com/tags/tag_dl.asp"> here</a>. </p> <hr /> <h4>Unordered Lists</h4> <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> <h5>Example:</h5> <pre> <ul> <li> Ham </li> <li> Pineapple </li> <li> Cheese </li> </ul> </pre> <hr /> <h4>Ordered Lists</h4> <p>In an <strong>ordered list</strong>, each element is displayed as a number. This is for data whose ordering is important. Ordered lists use the tag <tt><ol></tt>. Items are specified with <tt><li></tt>, as before.</p> <h5>Example:</h5> <pre> <ol> <li> Roll out dough </li> <li> Place ham, pineapple, and cheese on dough </li> <li> Bake for a reasonable amount of time. </li> </ol> </pre> </body> </html>

Hypertext • convenient • to visit a link, user simply clicks • no manual entry • clean • no file names or directory structure polluting code • easy • browser handles absolute and relative references

Hypertext – finer • hyperlinks can link one document to another • we can also refer to another place in another document, or even the same document • this is accomplished using anchors

Destination Anchors • the <a> tag can also be used as a destination anchor • use the id attribute (cannot use empty tag syntax) • a destination anchor can be linked to directly, by including the anchor name in the URL • use the # character to separate • clicking the link will take the user directly to that point in the file <a id="section1"></a> <a href="lists.html#section1">lists.</a>

In our example • two candidates for destination anchors • unordered list section • ordered list section

<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 <em>ordered</em>. A more complex type of list, <em>definition</em>, can be found <a href="def.html">here</a> or <a href="http://www.w3schools.com/tags/tag_dl.asp"> here</a>. </p> <hr /> <a id="unordered"></a> <h4>Unordered Lists</h4> <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> <h5>Example:</h5> <pre> <ul> <li> Ham </li> <li> Pineapple </li> <li> Cheese </li> </ul> </pre> <hr /> <a id="ordered"></a> <h4>Ordered Lists</h4> <p>In an <strong>ordered list</strong>, each element is displayed as a number. This is for data whose ordering is important. Ordered lists use the tag <tt><ol></tt>. Items are specified with <tt><li></tt>, as before.</p> <h5>Example:</h5> <pre> <ol> <li> Roll out dough </li> <li> Place ham, pineapple, and cheese on dough </li> <li> Bake for a reasonable amount of time. </li> </ol> </pre> </body> </html>

Now, we can link to these sections from the initial HTML <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: <a href="#unordered"><em>unordered</em></a> and <a href="#ordered"><em>ordered</em></a>. A more complex type of list, <em>definition</em>, can be found <a href="def.html">here</a>.</p> <hr />

<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 <a href="#unordered"><em>unordered</em></a> and <a href="#ordered"><em>ordered</em></a>. A more complex type of list, <em>definition</em>, can be found <a href="def.html">here</a> or <a href="http://www.w3schools.com/tags/tag_dl.asp"> here</a>. </p> <hr /> <a id="unordered"></a> <h4>Unordered Lists</h4> <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> <h5>Example:</h5> <pre> <ul> <li> Ham </li> <li> Pineapple </li> <li> Cheese </li> </ul> </pre> <hr /> <a id="ordered"></a> <h4>Ordered Lists</h4> <p>In an <strong>ordered list</strong>, each element is displayed as a number. This is for data whose ordering is important. Ordered lists use the tag <tt><ol></tt>. Items are specified with <tt><li></tt>, as before.</p> <h5>Example:</h5> <pre> <ol> <li> Roll out dough </li> <li> Place ham, pineapple, and cheese on dough </li> <li> Bake for a reasonable amount of time. </li> </ol> </pre> </body> </html>

Images • our webpage looks good for a technical document • pictures would make the document more visually pleasing

Images • placed using the <img> tag • an empty tag • several available attributes: • src • style • height • width

src • specifies the URL of the image source • URL can be absolute or relative <img src="list.gif" />

style (optional) • browsers by default place images as though they were a single character • e.g. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Image Placement</title> </head> <body> <p> This is an <img src="list.gif" /> example of how images align with text by default in webpages. It is as though the image is a character of text. </p> </body> </html>

style • use the style attribute • style="float:left" • style="float:right" <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Image Placement</title> </head> <body> <p> <img src="list.gif" style="float:left" /> This is an example of how images align with text using the <em>float:left</em> value of the <em>style</em> attribute. </p> </body> </html>

height and width (optional) • specifies the height and width of your image in the document • if not included, the actual image height and width will be included

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Simple Lists</title> </head> <body> <img src="list.gif" style="float:right" height="200" width="200" /> <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 <a href="#unordered"><em>unordered</em></a> and <a href="#ordered"><em>ordered</em></a>. A more complex type of list, <em>definition</em>, can be found <a href="def.html">here</a> or <a href="http://www.w3schools.com/tags/tag_dl.asp"> here</a>. </p> <hr /> <a id="unordered"></a> <h4>Unordered Lists</h4> <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> <h5>Example:</h5> <pre> <ul> <li> Ham </li> <li> Pineapple </li> <li> Cheese </li> </ul> </pre> <hr /> <a id="ordered"></a> <h4>Ordered Lists</h4> <p>In an <strong>ordered list</strong>, each element is displayed as a number. This is for data whose ordering is important. Ordered lists use the tag <tt><ol></tt>. Items are specified with <tt><li></tt>, as before.</p> <h5>Example:</h5> <pre> <ol> <li> Roll out dough </li> <li> Place ham, pineapple, and cheese on dough </li> <li> Bake for a reasonable amount of time. </li> </ol> </pre> </body> </html>

Simple Lists • two types • unordered • bulleted • element name: <ul> • ordered • enumerated • element name: <ol> • both list elements must contain at least one child • list element • element name: <li>

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Simple Lists</title> </head> <body> <ul> <li> Ham </li> <li> Pineapple </li> <li> Cheese </li> </ul> <ol> <li> Roll out dough </li> <li> Place ham, pineapple, and cheese on dough </li> <li> Bake for a reasonable amount of time. </li> </ol> </body> </html> Example!

Definition • a list of terms and descriptions • often used for a glossary or index • name: <dl> • each term: <dt> • each definition: <dd>

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Simple Lists</title> </head> <body> <dl> <dt> Sidney Crosby </dt> <dd> Number 87, Pittsburgh Penguins, Center</dd> <dt> Alexander Ovechkin </dt> <dd> Number 8, Washington Capitals, Left Wing</dd> <dt> Dion Phaneuf </dt> <dd> Number 3, Toronto Maple Leafs, Defence</dd> </dl> </body> </html> Example!

Tables • present data in tabular form • many options available for table construction • tables are decomposed as follows • a table <table> is a sequence of rows • a row <tr> is a sequence of cells • a cell <td> can contain almost any markup or content

Example: table tr tr tr tr td td td td td td td td td td td td td td td td

Example: • each row is an explicit child of table table tr tr tr tr td td td td td td td td td td td td td td td td

Example: • the ith column is found by taking the ith cell of each row table tr tr tr tr td td td td td td td td td td td td td td td td

<table> <tr> <td >Team </td> <td >Player </td> <td >Goals </td> <td >Assists </td> </tr> <tr> <td >Pittsburgh Penguins </td> <td >Sidney Crosby </td> <td >24 </td> <td >48 </td> </tr> <tr> <td >Pittsburgh Penguins </td> <td >Evgeni Malkin </td> <td >24 </td> <td >28 </td> </tr> <tr> <td >Toronto Maple Leafs </td> <td >Dion Phaneuf </td> <td >12 </td> <td >20 </td> </tr> </table>

Computer Science 1000