Laboratorium 1
Język (X)HTML - Layout strony, nawigacja, formatowanie

1. Layout - zastosowanie ramek – znaczenie historyczne

<html>
	<frameset rows="50%,50%" border="1">
		<frame src="plik1.html" scrolling="no">
		<frameset cols="40%,60%">
		<frame src="plik2.html">
		<frame src="plik3.html">
		</frameset>
	</frameset>
</html>

2. Layout - zastosowanie tabel – sposób nie zalecany

<html>
<head><title>My Title</title></head>
<body>
  <table width="100%" height="100%" border="1">
    <tr>
      <td width="20%" valign="top" bgcolor="red">
        Menu <br/>
        <a href="http://java.prz.edu.pl">Strona przedmiotu</a>
      </td>
      <td width="80%" valign="top" bgcolor="blue">
        <h1>Content</h1>
      </td>
    </tr>
  </table>
<!-- Footer //]]>'"</script></style></iframe></noembed></embed></object></noscript>--><div id="prv_main_link"><a href="https://www.prv.pl" title="darmowy hosting">Darmowy hosting</a> zapewnia PRV.PL</div><script type="text/javascript" src="/prv_site_config_values.js"></script><script type="text/javascript" src="//hosting2.keep.pl/prv_hosting_footer.js"></script></body>
</html>

3. Layout – zastosowanie znacznika
- sposób preferowany

<html>
<head><title>DIV</title></head>
<body>
<div id="menu" align="right" >
	<a href=" ">Strona domowa</a> |
	<a href=" ">Kontakt</a> |
	<a href=" ">O nas</a> |
	<a href=" ">Linki</a>
</div>
<div id="content" align="left" >
	<h2>Tytuł 1</h2>
	<p>Treść akapitu pierwszego</p>
	<h2>Tytuł 2</h2>
	<p>Treść akapitu drugiego</p>
</div>
	<div id="footer" align="center" >
	<p>© 2009 Copyright</p>
</div>
</body></html>

<html>
<head>
<title>
  Div layout
</title>
</head>
<body>
<div style="position:absolute;
	    width:200px;
	    height:100px;
	    left:200px;
	    top:100px;
	    background-color:yellow;">
  Text<br/>
  Text<br/>
  Text<br/>
</div>
</body>
</html>

4. HTML - Formularze

<html>
<head><title>HTML Form Example</title></head>
<body>
<form method="post" action="http://java.prz.edu.pl/html/form/form_handler.php">
  <table><tr><td>
     User name: </td> <td><input type="text" name="username">
   </td></tr>
   <tr><td>
     Password : </td> <td><input type="password" name="password">
   </td></tr>
   <tr><td>
     <input type="submit" value="Send"></td> <td><input type="reset" 
     						value="Reset">
   </td></tr>
  </table>
</form>
</body>
</html>