Index



Session 2.2 Html and Xtml Syntax



2.2.1 Text Mode


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>a bit modern</title>
<!-- I linked to the stylesheet using two methods, the @import method as well as the link rel method, to ensure maximum accessibility -->
<style type="text/css" media="all">
<!--
@import url(styles.css);
-->
</style>
<link rel="stylesheet" type="text/css" href="styles.css" media="all" />
</head>
<body>
<div id="wrap"><!-- start of container -->
<div id="header">a bit modern - bigBlue</div>
<div id="content"><!-- left column, contains navigation and photos -->
<div id="column1">
<div id="nav">
<ul>
<li><a href="#" accesskey="a">About Us</a></li>
<li>
<ul>
<li><a href="#" accesskey="1">A submenu</a></li>
<li><a href="#" accesskey="2">A submenu item</a></li>
<li><a href="#" accesskey="3">Another item</a></li>
</ul>
</li>
<li><a href="#" accesskey="p">Portfolio</a></li>
<li><a href="#" accesskey="h">History</a></li>
<li><a href="#" accesskey="r">Resources</a></li>
</ul>
</div>
<img src="Images/camera1.gif" alt="" height="60" width="100" /> <img
src="Images/camera2.gif" alt="" /> <img src="Images/camera3.gif"
alt="" />
<form action="#"> <input class="login" value="username"
onfocus="this.value=''" onmouseover="this.className='login_hover'"
onmouseout="this.className='login'" type="text" /> <input
class="login" onfocus="this.value=''"
onmouseover="this.className='login_hover'"
onmouseout="this.className='login'" type="password" />
<div id="submit" onmouseover="this.id='submit_hover'"
onmouseout="this.id='submit'" onclick="location.href='#'">log in</div>
</form>
</div>
<!-- end of left column --><!-- right column, this is the main content area, and where the links are -->
<div id="column2">
<h1>The modified version by Petros (Text by Petros)</h1>
<p>I liked the design which Boris made! But for my needs it was to
narrow, so I made the main part 200 pixel bigger. And the other thig
was the colour scheme. I like blue very much, so I changed the colour
scheme into blue. That's all from my side.</p>
<h1>The Original Design by Boris (Text by Boris)</h1>
<p>This design I tried to make very minimalistic, yet I wanted it to
have some advanced design features, so there you go: Advanced CSS
navigation, a sophisticated yet beautiful layout, a pleasing color
scheme, and all without a single table. This design is created with
standards-compliant <acronym
title="Extensible Hypertext Markup Language">XHTML</acronym> 1.0
Transitional and <acronym title="Cascading Style Sheets">CSS</acronym>.
The images you find on this page are either created by me or taken from
<a href="http://www.sxc.hu">the stock xchng</a>. The navigation is
inspired by <a href="http://torchbox.com/">Torchbox</a>, and the site
that first opened me up to the low-sat brown color scheme was <a
href="http://www.aqualung.net">Aqualung.net</a>. Design tested in
Internet Explorer 6, Firefox 1, Opera 8, and K-Meleon 0.9. You can use
this template with no restrictions: sell it, reskin &amp; resubmit it,
claim it as your own, etc. Feel free to contact me at <a
href="mailto:bcherny@gmail.com">bcherny at gmail dot com</a> with any
questions or comments.</p>
<h1>The Artists</h1>
<p> <b>Petros</b><br />
I am a Software Developer specified in developing Web-Based
Applications. <br />
<b>Boris:</b><br />
My name is Boris Cherny and I'm a freelance web designer, as well as a
huge fan of the open-source design community. I've submitted many
designs to <a href="http://www.oswd.org">OSWD.org</a>, and I believe
that each design I submit is better than the last. I constantly reform
my style, and learn to be a better coder through experience and
inspiration.</p>
<h1>Version Two</h1>
<p>After a few complaints and many bugs, here is version 2 of A Bit
Modern. Updates include:</p>
<ul>
<li>Menu Items can now be added or removed without damaging the layout</li>
<li>The footer no longer appears in the center of the screen in
Firefox</li>
<li>There is a login area in the left column</li>
<li>I added comments to the code for the sake of readability and
useability</li>
<li>All images are now preloaded, using CSS and NO Javascript</li>
</ul>
<p>I really want to thank Andreas, NickyD, ditchCrawler, TomW,
whowrotewhat, hash bar, Sanden Cottongame, Nish Vamadevan, and Astor,
they're the ones who pointed out bugs and helped me fix them :). I'd
like to give a bit more credit to Andreas for allowing me to pester him
with coding questions, and for answering all those questions with
knowledge and expertise.</p>
<h1>Some Links</h1>
<div id="links">
<div>
<ul>
<li><a href="http://www.hicksdesign.co.uk/">hicksdesign</a></li>
<li><a href="http://www.im-visions.com/start/">Intuitivmedia</a></li>
<li><a href="http://www.jeremy-fields.com/">Jeremy Fields</a></li>
<li><a href="http://solardreamstudios.com/">solarDreamStudios</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="http://www.stopdesign.com/">Stopdesign</a></li>
<li><a href="http://www.studiotwentyeight.com/">StudioTwentyEight</a></li>
<li><a href="http://www.t26.com/fonts.php">T.26</a></li>
<li><a href="http://torchbox.com/">torchbox</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- end of right column --><!-- remove my name from the footer if you want, this is open source ;) -->
<div id="footer"> Original design by <a
href="http://www.bcdesignplace.com">Boris Cherny</a>. (c) 2005 your
corporation. Modified version by <a href="http://www.peman.de">Petros
Dolaschjan </a>
</div>
<!-- end of container --></div>
</body>
</html>

2.2.2 Design Mode

preview01


2.2.3 Editing Mode 1- Tag Mode

tag mode


References Links