[Skip navigation]

[LU]

Mathematical statistics

Webpage structure

The structure of a standardized Matstat webpage is more complicated than a straight forward page. This is due to the need for layout directions. The browser needs to be told which parts to layout in what way. The different <div id="something">-tags do the work of structuring, the stylesheet then determines how a particular part of the structure should be layed out. E.g. it says that a <h2>-tag should be bold white on blue if is occurres in the left hand navigation bar but big, blue, smallcaps, and centered if it occurres in the headline, and big blue and left adjusted in the main body.

I suggest that you skim through the following code and read the gray comments to get an idea of what is what.

Page code structure


Mandatory code is upright and black.
<!-- Optional code can be commented out. Uncomment to use it. -->
User specified code is bold and blue.
Alternative code is bold and red.
<!-- Comments on the code are in italics. -->
      

Compare the following code with the resulting page.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<!-- The "lang"-attribute is used by, e.g., voice synthesisers.                               -->
<!-- You can change language on parts of the contents by adding it to the tag.                -->
<!-- E.g. This is a word in <span class="sv">svenska</span> in the middle of an English text. -->
<!-- Use "en" below for pages mostly in English, "sv" for pages mostly in Swedish.            -->
<HTML lang="en">
<HEAD>
<!-- Load the default Matstat stylesheet. -->
<link rel="stylesheet" type="text/css" title="matstat_style" href="/css/matstat_style.css">
<!-- Use the following line on personal homepages. It contains layout information for the addresses. -->
<link rel="stylesheet" type="text/css" title="matstat_style" href="/css/matstat_person.css">
<!-- You can use the following line if you are have tables och definition lists (<dl>). It has layout information for the headers. -->
<link rel="stylesheet" type="text/css" title="matstat_style" href="/css/tabell_style.css">
<!-- You can add additional style information needed on particular pages. -->
<!--<link rel="stylesheet" type="text/css" title="matstat_style" href="personal_styles.css">-->
<TITLE>Page Title</TITLE>
</HEAD>

<BODY>
<!-- This is the top of the page. We want to be able to jump here. -->
<a name="top"></a>

	      <!-- Textbar: give stylesheet-less browsers the opportunity to skip the navigation and go directly to the contents. English version. -->
<div id="textbar">
<p>[<a href="#start">Skip navigation</a>]</p>
</div><!-- textbar -->

<!-- Textbar: give stylesheet-less browsers the opportunity to skip the navigation and go directly to the contents. Swedish version. -->
<!-- 
<div id="textbar">
<p>[<a href="#start">Hoppa över navigeringen</a>]</p>
</div><!-- textbar -->
-->

<!-- lftBar: contains the logo and the navigationbar to the left of the window. -->
<div id="lftBar">
<!-- imgplace: contains the logo. -->
<!-- Use "2radce" in English pages, "2radcs" on Swedish pages.-->
<div id="imgplace"><A href="http://www.lu.se/"><IMG alt="[LU]" align=middle src="/icons/2radce.gif" border="none"></A></div>
<!-- navbar: contains the list of links. -->
<div id="navbar">

<h2>Optional heading for linkgroup</h2>
<ul>
<li><a href="./">Link</a></li>
<li><a href="./">Link</a>
	  <ul>
	  <li><a href="./">Sublink</a></li>
	  <li><a href="./">Sublink</a></li>
	  </ul>
</li>
<li><a href="./">Link</a></li>
</ul>
<h2>Optional heading for another linkgroup</h2>
<ul>
<li><a href="./">Link</a></li>
<li><a href="./">Link</a>
	  <ul>
	  <li><a href="./">Sublink</a></li>
	  <li><a href="./">Sublink</a></li>
	  </ul>
</li>
<li><a href="./">Link</a></li>
</ul>
<h2>Optional header for other information</h2>
<p>Optional information</p>

</div><!-- navbar -->
</div><!-- lftBar -->
<!-- main: the white area. -->
<div id="main">
<!-- header: everything above the page title. -->
<div id="header">
<!-- placenav: the topmost "you are here"-line. English version. -->
<div id="placenav">
<p><a href="http://www.lu.se/" title="Lund University">Lund University</a> /
<a href="http://www.naturvetenskap.lu.se/" title="Faculty of Science">Science(NF)</a> -
<a href="http://www.lth.se/" title="Faculty of Engineering">Engineering(LTH)</a> /
<a href="/" title="Centre for Mathematical Sciences">MatCent</a> /
<a href="/matstat/" title="Mathematical Statistics">MatStat</a> /
<!-- Replace links below by your page's "you are here", as many as you need. -->
<a href="/matstat/local_info/">Local</a> /
<a href="./">Webstandard</a>
<!-- Ending in this page without link. -->
Example
</p>
</div><!-- placenav -->

<!-- placenav: the topmost "you are here"-line. Swedish version. -->
<!--
<div id="placenav">
<p><a href="http://www.lu.se/" title="Lunds Universitet">Lunds Universitet</a> /
<a href="http://www.naturvetenskap.lu.se/" title="Naturvetenskaplig fakultet">N-fak</a> -
<a href="http://www.lth.se/" title="Lunds Tekniska Högskola">LTH</a> /
<a href="/" title="Matematikcentrum">MatCent</a> /
<a href="/matstat/" title="Matematisk statistik">MatStat</a> /
<!-- Replace links below by your page's "you are here", as many as you need. -->
<a href="./">Lokalt</a> /
<a href="./internet/">Internet</a> /
<!-- Ending in this page without link. -->
Webstandard
</p>
</div><!-- placenav -->
-->
<!-- matstatnav: shortcuts -->
<div id="matstatnav">
<!-- Take care of weird linebreaks. -->
<div class="clear"></div>
<!-- The following is one row. -->
<div class="row">
<!-- This is the left-adjusted part. English version. -->
<div class="rowleft">
<a href="/matstat/" title="Mathematical Statistics">MatStat</a> :
<a href="/matstat/education/">Education</a> |
<a href="/matstat/research/">Research</a> |
<a href="/matstat/staff/">People</a> |
<a href="/library/">Library</a> |
<a href="/help/">Help</a> |
<a href="/matstat/local_info/">Local</a>
</div><!-- left -->

<!-- This is the left-adjusted part. Swedish version. -->

<!--
<div class="rowleft">
<a href="/matstat/" title="Matematisk statistik">MatStat</a> :
<a href="/matstat/education/">Utbildning</a> |
<a href="/matstat/research/">Forskning</a> |
<a href="/matstat/staff/">Personer</a> |
<a href="/library/">Bibliotek</a> |
<a href="/help/">Hjälp</a> |
<a href="/matstat/local_info/">Lokalt</a>
</div><!-- left -->
-->
<!-- This is the right-adjusted part. English version. -->
<div class="rowright">
<form method="GET" action="http://www.google.com/u/lundmaths">
<input type="text" name="q" size="10" maxlength="255"
value=""> <input type="submit" name="sa"
value="Search!" title="Google-search www.maths.lth.se">
</form>
</div><!-- right -->

<!-- This is the right-adjusted part. Swedish version. -->

<!--
<div class="rowright">
<form method="GET" action="http://www.google.com/u/lundmaths">
<input type="text" name="q" size="10" maxlength="255"
value=""> <input type="submit" name="sa"
value="Sök!" title="Google-sök www.maths.lth.se">
</form>
</div><!-- right -->
-->
</div><!-- row -->
<!-- The care of weird linebreaks. -->
<div class="clear"></div>
</div><!-- matstatnav -->
</div><!-- header -->
<!-- rubrik: the page title. -->
<div id="rubrik">
<!-- This is where stylesheet-less browsers can jump to. -->
<a name="start"></a>
<h1>Webstandard Example</H1>
<h2>Optional subtitle</h2>
</div><!-- rubrik -->
<!-- Page contents starts here -->

This is all yours!
<h2>A title</h2>
<h3>A subtitle followed by a paragraph and an unordered list</h3>
<p>Some text in a paragraph.</p>
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
<h2>Another title followed by an ordered list</h2>
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
<h3>A subtitle followed by a table</h3>
<table cellspacing=0>
<tr><th>Head</th> <th>Head</th> <th>Head</th></tr>
<tr><th class="row">Row head</th> <td>a</td> <td>b</td></tr>
<tr><th class="row">Row head</th> <td>alpha</td> <td>beta</td></tr>
</table>
<h4>A subsubtitle followed by a definition list</h4>
<dl><dt>DT</dt> <dd>The term to be defined</dd>
<dt>DD</dt> <dd>The definition of the term</dd>
</dl>

<!-- Page contents ends here -->
<!-- foot: update and validate. -->
<div id="foot">
<p>
<!-- Created: Wed Dec 14 14:09:17 CET 2005 -->
<!-- Xemacs updates this automatically. If you use som other editor you must keep track of the date yourself! -->
<!-- hhmts start -->
Last modified: Wed Dec 14 14:14:18 CET 2005
<!-- hhmts end -->
by <A HREF="mailto:your_mail_address">Your Name</A><br>
Validate:
<a href="http://validator.w3.org/check/referer">HTML</a> /
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> |
<a href="#top">Top of page</a>
</p>
</div><!-- foot -->
</div><!-- main -->
</BODY>
</HTML>