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 & 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
2.2.3 Editing Mode 1- Tag Mode
