User Interface Design

<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
...
<h6>Header 6</h6>

<p>Paragraph 1</p>

<p>Unordered List</p>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
<p>Ordered List</p>
<ol>
<li>item 1</li>
<li>item 2</li>
</ol>

<p>Below are more semantic!</p>
<strong>Strong</strong>
<em>Emphasis</em>

<p>Below are more stylistic!</p>
<b>bold</b>
<i>italic</i>

<h1>Absolute URLs:</h1>
<a href="http://yahoo.com/">HTTP</a> 
<a href="https://yahoo.com/">HTTPS</a>
<!--Follows the Current Protocol:-->
<a href="//yahoo.com/">HTTP/S</a>

<h1>Img in Absolute URL:</h1>
<img src="https://www.iso.cuhk.edu.hk/english/images/resource/cuhk-emblem/hor_4c.jpg" />

<h1>Img in Relative URL:</h1>
<img src="incl/cuhk-logo.png" />
<img src="/web/lectures/incl/cuhk-logo.png" />
				

<table>
  <tr><!--table row-->
    <th>First Name</th>
    <th>Last Name</th>
  </tr>
  <tr>
    <td>Alan</td>
    <td>Turing</td>
  </tr>
  <tr>
    <td>Eugene</td>
    <td>Peterson</td>
  </tr>
</table>

<table>
  <tr><th>First Name</th>
      <th>Last Name</th></tr>

  <!--Merging the cell in next row-->
  <tr><td rowspan="2">Alan</td>
      <td>Turing</td></tr>
  <tr><td>Tam</td></tr>

  <!--Merging the cell in next column-->
  <tr><td colspan="2">
    Superman!!!!!!!!!!!</td></tr>
</table>

<style>
*,body{color:#00F}
p{color:#F00}
p.highlight{background:#FF0}
p.highlight2{background:#CCC}
#uniqueId1{font-size:30px;color:#00FF00}
</style>

<h3>inherited the color!</h3>
<p>Oh</p>
<p class="highlight">My</p>
<p class="highlight highlight2">God!</p>
<p id="uniqueId1">overriden the color</p>

<style>
p{color:#F00}
p.highlight{background:#FF0}
#uniq1,#uniq2{color:#00FF00}
div p.highlight{background:#CCC}
</style>

<p class="highlight">Hello World!</p>
<p class="highlight" id="uniq1">Yo!</p>
<div id="uniq2">
<p class="highlight">Hello!</p>
</div>

<style>
.menu a:link{color:#00F}
.menu a:hover{font-weight:bold}
.menu a:visited{color:#F00}
</style>
<nav>
<ul class="menu">
<li><a href="#a">Home</a></li>
<li><a href="#b">About Us</a></li>
<li><a href="#c">Contact Us</a></li>
</ul>
</nav>
<a href="#">Unaffected!</a>

<style>
nav ul{display:none}
nav:hover ul{display:block}
</style>
<nav>
<h3>MENU</h3>
<ul>
<li><a href="#a">Home</a></li>
<li><a href="#b">About Us</a></li>
<li><a href="#c">Contact Us</a></li>
</ul>
</nav>
Some Content

<style>
ul li:nth-child(even){color:#CCC}
ul li:nth-child(2n){background:#333}
ul li:nth-child(2n+1){background:#EEE}
</style>

<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Contact Us</li>
</ul>

<style>
.para1{color:#0F0;line-height:150%}
.para2{color:#F00;font-size:150%}
</style>

<p class="para1">Have I not commanded you? Be strong and courageous. Do not be afraid; do not be discouraged, for the LORD your God will be with you wherever you go.</p>

<p class="para2">Have I not commanded you? Be strong and courageous. Do not be afraid; do not be discouraged, for the LORD your God will be with you wherever you go.</p>

<style>
.title{text-align:center}
.para{text-align:justify;color:#F00}
.right{text-align:right}
</style>

<h1 class="title">Joshua 1:9</h1>
<p class="para">Have I not commanded you? Be strong and courageous. Do not be afraid; do not be discouraged, for the LORD your God will be with you wherever you go.</p>
<p class="right">Copyright. NIV.</p>

<style>
nav ul{display:none;position:absolute;margin:-20px}
nav:hover ul{display:block}
</style>
<nav>
<h3>MENU</h3>
<ul>
<li><a href="#a">Home</a></li>
<li><a href="#b">About Us</a></li>
<li><a href="#c">Contact Us</a></li>
</ul>
</nav><p>Some Content</p>

<style>
p.wide{margin:10px;padding:5px}
p.border,p.wide{border:3px solid #CCC}
p.LRonly{border-top:0;border-bottom:0}
p.lifted{margin-top:-50px}
</style>
<p>Content 1</p>
<p class="wide">Content 2</p>
<p class="border">Content 3</p>
<p class="border LRonly">Content 4</p>
<p class="lifted">Content 5</p>