Computer Science 1000 Markup Languages III
advertisement
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 Protocol Server Name Pathname URL http://www.somewhere.com/im/in/here.html Protocol the computer on the web that stores the file Pathname tells the computers how to handle the file Server Name Pathname Protocol Server Name 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 URL there are different types of URLs absolute site-relative document-relative internal these are often referred to collectively as relative (discussed later) 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>&lt;ul&gt;</tt>. Each item in the list is denoted by <tt>&lt;li&gt;</tt>. </p> <h5>Example:</h5> <pre> &lt;ul&gt; &lt;li&gt; Ham &lt;/li&gt; &lt;li&gt; Pineapple &lt;/li&gt; &lt;li&gt; Cheese &lt;/li&gt; &lt;/ul&gt; </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>&lt;ol&gt;</tt> Items are specified with <tt>&lt;li&gt;</tt>, as before.</p> 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>&lt;ul&gt;</tt>. Each item in the list is denoted by <tt>&lt;li&gt;</tt>. </p> <h5>Example:</h5> <pre> &lt;ul&gt; &lt;li&gt; Ham &lt;/li&gt; &lt;li&gt; Pineapple &lt;/li&gt; &lt;li&gt; Cheese &lt;/li&gt; &lt;/ul&gt; </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>&lt;ol&gt;</tt> 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 id="section1"></a> a destination anchor can be linked to directly, by including the anchor name in the URL use the # character to separate <a href="lists.html#section1">lists.</a> clicking the link will take the user directly to that point in the file 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>&lt;ul&gt;</tt>. Each item in the list is denoted by <tt>&lt;li&gt;</tt>. </p> <h5>Example:</h5> <pre> &lt;ul&gt; &lt;li&gt; Ham &lt;/li&gt; &lt;li&gt; Pineapple &lt;/li&gt; &lt;li&gt; Cheese &lt;/li&gt; &lt;/ul&gt; </pre> <hr /> <a id="ordered"></a> <h4>Ordered Lists</h4> 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>&lt;ul&gt;</tt>. Each item in the list is denoted by <tt>&lt;li&gt;</tt>. </p> <h5>Example:</h5> <pre> &lt;ul&gt; &lt;li&gt; Ham &lt;/li&gt; &lt;li&gt; Pineapple &lt;/li&gt; &lt;li&gt; Cheese &lt;/li&gt; &lt;/ul&gt; </pre> <hr /> <a id="ordered"></a> <h4>Ordered Lists</h4> 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>&lt;ul&gt;</tt>. Each item in the list is denoted by <tt>&lt;li&gt;</tt>. </p> <h5>Example:</h5> <pre> &lt;ul&gt; &lt;li&gt; Ham &lt;/li&gt; &lt;li&gt; Pineapple &lt;/li&gt; &lt;li&gt; Cheese &lt;/li&gt; &lt;/ul&gt; </pre> <hr /> <a id="ordered"></a> Simple Lists two types unordered ordered bulleted element name: <ul> 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> Example! <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> 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: Team Player Goals Assists Pittsburgh Penguins Sidney Crosby 24 48 Pittsburgh Penguins Evgeni Malkin 24 28 Toronto Maple Leafs Dion Phaneuf 12 20 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 Team Player Goals Assists Pittsburgh Penguins Sidney Crosby 24 48 Pittsburgh Penguins Evgeni Malkin 24 28 Toronto Maple Leafs Dion Phaneuf 12 20 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 Team Player Goals Assists Pittsburgh Penguins Sidney Crosby 24 48 Pittsburgh Penguins Evgeni Malkin 24 28 Toronto Maple Leafs Dion Phaneuf 12 20 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> Team Player Goals Assists Pittsburgh Penguins Sidney Crosby 24 48 Pittsburgh Penguins Evgeni Malkin 24 28 Toronto Maple Leafs Dion Phaneuf 12 20 <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> Team Player Goals Assists Pittsburgh Penguins Sidney Crosby 24 48 Pittsburgh Penguins Evgeni Malkin 24 28 Toronto Maple Leafs Dion Phaneuf 12 20 <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> Team Player Goals Assists Pittsburgh Penguins Sidney Crosby 24 48 Pittsburgh Penguins Evgeni Malkin 24 28 Toronto Maple Leafs Dion Phaneuf 12 20 Tables to obtain a border, use the border attribute value: size of border, in pixels <table border="5"> <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> Rule=1 Border = 5 Border = 20 Other children of <table> <caption> displays a caption for the table Other children of <tr> <th> displays a cell as a header typically in separate font from other table data <table border="5"> <caption>Player Data!</caption> <tr> <th >Team </th> <th >Player </th> <th >Goals </th> <th >Assists </th> </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> Rowspan and colspan used with <td> and <th> indicates the number of rows (columns) that cell should take up <table border="5"> <caption>Player Data!</caption> <tr> <th colspan="2"></th> <th colspan="2">Points</td> </tr> <tr> <th >Team </th> <th >Player </th> <th >Goals </th> <th >Assists </th> </tr> <tr> <td rowspan="2">Pittsburgh Penguins </td> <td >Sidney Crosby </td> <td >24 </td> <td >48 </td> </tr> <tr> <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> Nested Tags as we've seen, tags can be embedded in other tags e.g. a <p> tag embedded inside the <body> tag other nesting is possible e.g. suppose we want to apply both bold and italic to the same text <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Nested Elements</title> </head> <body> <p> This is <strong><em>bolded, italicized </em></strong> text. </p> </body> </html> Nested Tags note that the ordering (inside vs outside) of the tags in this example doesn't matter. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Nested Elements</title> </head> <body> <p> This is <em><strong>bolded, italicized </strong></em> text. </p> </body> </html> Nested Tags an inside tag does not have to encompass all of the content of the outer tag. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Nested Elements</title> </head> <body> <p> This is <em><strong>bolded, </strong> italicized </em> text. </p> </body> </html> Nested Tags note that tags must be nested correctly that is, the inside tag must be closed before the outside tag is closed Incorrect <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Nested Elements</title> </head> <body> <p> This is <em><strong>bolded, italicized </em></strong> text. </p> </body> </html> Colour web content can be recoloured this can be accomplished using the style attribute can also be done using stylesheets, not considered right now inside the style attribute, you can include pairs separated by semicolons text colour: color : <value> background: background-color: <value> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Nested Elements</title> </head> <body> <h1 style="color: red; background-color: blue"> Heading </h1> <p style="background-color: gray">This is a paragraph. </p> </body> </html> Colour note that colour settings apply to all content within a tag for example, you can apply a background colour to your entire page by using the style attribute in the body tag <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Nested Elements</title> </head> <body style="background-color: yellow"> <h1> Heading </h1> <p>This is a paragraph. </p> </body> </html> Colour what happens if an outer tag and an inner tag have different colour styles? <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Nested Elements</title> </head> <body style="background-color: yellow"> <h1 style="background-color: orange"> Heading </h1> <p>This is a paragraph. </p> </body> </html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Nested Elements</title> </head> <body style="background-color: yellow"> <h1 style="background-color: orange"> Heading </h1> <p>This is a paragraph. </p> </body> </html> In other words, the style from the innermost tag applies.
