Web Science/Part1: Foundations of the web/Web content/HTML for web document structures

From Wikiversity
Jump to navigation Jump to search

HTML for web document structures

Learning goals

  1. Be able to write simple HTML code having learned a few example elements of HTML (headings, paragraphs, lists, tables, links, anchors, emphasize, input fields; but also few dirty ones like italics, color,...)
  2. See that HTML really is just another simple mark up and has nothing to do with programming
  3. Be able to structure web Content using HTML and create pages following a specified structure.

Video

Script

In the previous lecture we have seen how to structure content using XML. The core idea was that we write down what the content is about, e.g. a record or an artist, and how such content may be structured, e.g. that a record stores something that an artist created. Thus the XML document that we created structured the content in a way that was rather independent of its use. One piece of software may use it to answer database queries. Another piece of software may use it to ship data from one database to another. And, finally our browser may use the structure to display the content. The browser can do so, but the resulting display does not look very nice yet, hence we undertook the effort in the previous lesson to transform the XML document into some HTML document that could be displayed in a much nicer way.

But, how is the resulting HTML document related to XML? Actually, the result is also an XML document. But the result is a document that does not talk about entities like artists, but about entities like headings, lists, list items, emphasized pieces of texts, and so on. Thus, HTML is really a kind of XML subdialect, one also calls it an application of XML, that has standard element names for document structures and not for almost arbitrary content structures.

Minimal HTML document

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Title of the document</title>
 </head>
 <body>
 Content of the document......
 </body>
 </html>

What are some sample categories are relevant for document structure?

  • headings
  • paragraphs
  • lists
  • emphasizing of text
  • tables

The core idea is that elements define a structure and attributes provide additional information.

<!DOCTYPE html>
<html>
<body>

<h1>This text is heading</h1>
<h2>This text is a subheading</h2>

<p>Here comes a paragraph with links to <a href="./#TableAnchor">table</a>, 
<a href="./#UnorderedListAnchor">unordered list</a> and 
<a href="./#OrderedListAnchor">ordered list</a>
and some other link to <a href="http://userpages.uni-koblenz.de/~staab/">Steffen</a></p>

<p><strong>This text is strong</strong></p>
<p><em>This text is emphasized</em></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

<h3><a name="TableAnchor">Let's do a table</h3>
<table>
<tbody>
<tr>
<td>A1</td>
<td>A2 </td>
<td>A3 </td>
<td>A4 </td>
</tr>
<tr>
<td>B1</td>
<td>B2 </td>
<td>B3 </td>
<td>B4 </td>
</tr>
<tr>
<td>C1</td>
<td>C2 </td>
<td>C3 </td>
<td>C4 </td>
</tr>
</tbody>
</table>

<h3><a name="UnorderedListAnchor">Some unordered list</h3>

<ul>
<li>One list item</li>
<li>Another list item</li>
<li>Yet another list item</li>
</ul>

<h3><a name="OrderedListAnchor"></a>And an ordered, i.e. numbered, list</h3>
<ol>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
</li>
</ol>

</body>
</html>

You may interactively type the HTML code examples into http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_br and immediately display the result by submitting your HTML code.

Quiz

1

What is the outcome of the following html code?
<h2>Example Listing</h2>
<ol>
  <li>item</li>
  <li>item</li>
</ol>

Example Listing

  • item
  • item

Example Listing

First item
Second item

Example Listing

  1. item
  2. item

Example Listing

1. item 2. item

2

<table>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
    <td>D</td>
  </tr>
</table>
</table>

AC
BD
CA
DB
CD
AB
AB
CD

3 Map the following:

<strong>hello world</strong>
<em>hello world</em>
<code>hello world</code>
<sub>hello</sub><sup>world</sup>
helloworld
hello world
hello world
helloworld
hello world

Further reading

no further reading defined
You can define further reading here.
In general you can use the edit button in the upper right corner of a section to edit its content.

Discussion