Before getting into the details of making HTML documents accessible, an understanding of basic HTML concepts is needed. If you are familiar with the general structure and coding of HTML , you can skip this page and move onto the the first common HTML element to be covered, Making Images Accessible.
You must have the ,
and container tags in every HTML file. The tag tells the browser that this is an HTML document. You must begin and end your files with this tag. The tag contains general information like the title of your document. The tag holds all your content: words, pictures, artwork and other stuff.
HTML is also not case sensitive. That means, you can use either lowercase or uppercase. is the same as . For consistency, use either one or the other. It’s best not to mix and match. For our purposes, I have written our code in lowercase.
The third rule is that every html page has two parts: the head and the body. There must be ,
and container tags in every HTML file. To build any web page, you will need four primary tags: , ,
and <body>. These are all container tags and must appear as pairs with the beginning and an ending.</p>
</div>
<div class="post-tags"><a href="http://animation11.net/tag/basic-concepts-of-html/" rel="tag">Basic Concepts of HTML</a>, <a href="http://animation11.net/tag/html/" rel="tag">HTML</a>, <a href="http://animation11.net/tag/html-concepts/" rel="tag">HTML Concepts</a>, <a href="http://animation11.net/tag/html-tools/" rel="tag">HTML tools</a></div>
</div>
<!-- /post -->
<!-- post -->
<div id="post-12" class="post-12 post hentry category-web-designing tag-css-tinderbox tag-open-designs tag-openwebdesign tag-oswd tag-web-desinging-tips tag-web-desinging-tools tag-web-desinging-tools-and-tips">
<h2 class="title"><a href="http://animation11.net/2009/08/24/web-desinging-tools-and-tips/" rel="bookmark" title="Permanent Link: Web Desinging Tools and Tips">Web Desinging Tools and Tips</a></h2>
<div class="post-date">
<p>Aug 24th</p>
</div>
<div class="post-info">
<p class="author alignleft">Posted by <a href="http://animation11.net/author/yogi/" title="Posts by yogi ">yogi</a> in <a href="http://animation11.net/category/web-designing/">Web Designing</a> </p>
<p class="comments alignright"><a href="http://animation11.net/2009/08/24/web-desinging-tools-and-tips/#comments" class="no comments">No comments</a></p>
<div class="clear"></div>
</div>
<div class="post-content clearfix">
<p>Just like in most other professions, a web designer’s set of tools is what brings a concept into fruition. There are many applications available to our disposal, but there are some that just stand out from the crowd. The tools in this article are what’s regarded as the most popular tools used for web design. </p>
<p>1. <strong>OSWD</strong>: Over 2,000 of the best freebie web design templates. Also allows for search capability by color, contrast, validation, and other categories.</p>
<p>2. <strong>OpenWebDesign</strong>:A large and active community of individuals who share free web design templates. Includes regular design contests and a sub-category of most popular designs to speed up your search.</p>
<p>3. <strong>Open Designs</strong>: Headed by a non-profit board, the open design community has almost 600 designs which have been vetted and moderated by the community’s volunteer board. Also includes a relatively active forum where designers can share tips and resources.</p>
<p>4. <strong>CSS Tinderbox</strong>: CSS Tinderbox prevents you from having to “reinvent the wheel” by providing very basic, yet solid, CSS/XHTML design templates from which you can build off of.</p>
<p>Build world-class websites and applications with one of the industry’s leading web authoring tools. Adobe® Dreamweaver® CS4 software is ideal for web designers, web developers, and visual designers.</p>
</div>
<div class="post-tags"><a href="http://animation11.net/tag/css-tinderbox/" rel="tag">CSS Tinderbox</a>, <a href="http://animation11.net/tag/open-designs/" rel="tag">Open Designs</a>, <a href="http://animation11.net/tag/openwebdesign/" rel="tag">OpenWebDesign</a>, <a href="http://animation11.net/tag/oswd/" rel="tag">OSWD</a>, <a href="http://animation11.net/tag/web-desinging-tips/" rel="tag">Web Desinging Tips</a>, <a href="http://animation11.net/tag/web-desinging-tools/" rel="tag">Web Desinging Tools</a>, <a href="http://animation11.net/tag/web-desinging-tools-and-tips/" rel="tag">Web Desinging Tools and Tips</a></div>
</div>
<!-- /post -->
<div class="page-navigation" id="pagenavi">
<div class="alignleft"></div>
<div class="alignright"></div>
<div class="clear"></div>
</div>
</div>
<!-- /primary content -->
<div id="sidebar">
<ul class="sidebar-blocks">
<li class="block"><div class="block-widget_calendar" id="instance-calendar-4"><h3 class="title"><span> </span></h3><div class="block-div"></div><div class="block-div-arrow"></div><div id="calendar_wrap"><table id="wp-calendar" summary="Calendar">
<caption>March 2010</caption>
<thead>
<tr>
<th abbr="Monday" scope="col" title="Monday">M</th>
<th abbr="Tuesday" scope="col" title="Tuesday">T</th>
<th abbr="Wednesday" scope="col" title="Wednesday">W</th>
<th abbr="Thursday" scope="col" title="Thursday">T</th>
<th abbr="Friday" scope="col" title="Friday">F</th>
<th abbr="Saturday" scope="col" title="Saturday">S</th>
<th abbr="Sunday" scope="col" title="Sunday">S</th>
</tr>
</thead>
<tfoot>
<tr>
<td abbr="February" colspan="3" id="prev"><a href="http://animation11.net/2010/02/" title="View posts for February 2010">« Feb</a></td>
<td class="pad"> </td>
<td colspan="3" id="next" class="pad"> </td>
</tr>
</tfoot>
<tbody>
<tr><td><a href="http://animation11.net/2010/03/01/" title="Zenni Optical glasses">1</a></td><td>2</td><td><a href="http://animation11.net/2010/03/03/" title="Nice payday loans">3</a></td><td><a href="http://animation11.net/2010/03/04/" title="North Dakota sex offender">4</a></td><td>5</td><td>6</td><td>7</td>
</tr>
<tr>
<td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td>
</tr>
<tr>
<td>15</td><td>16</td><td>17</td><td>18</td><td id="today">19</td><td>20</td><td>21</td>
</tr>
<tr>
<td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td>
</tr>
<tr>
<td>29</td><td>30</td><td>31</td>
<td class="pad" colspan="4"> </td>
</tr>
</tbody>
</table></div></div></li><li class="block"><div class="block-widget_archive" id="instance-archives-4"><h3 class="title"><span>Archives</span></h3><div class="block-div"></div><div class="block-div-arrow"></div> <ul>
<li><a href='http://animation11.net/2010/03/' title='March 2010'>March 2010</a></li>
<li><a href='http://animation11.net/2010/02/' title='February 2010'>February 2010</a></li>
<li><a href='http://animation11.net/2010/01/' title='January 2010'>January 2010</a></li>
<li><a href='http://animation11.net/2009/12/' title='December 2009'>December 2009</a></li>
<li><a href='http://animation11.net/2009/11/' title='November 2009'>November 2009</a></li>
<li><a href='http://animation11.net/2009/10/' title='October 2009'>October 2009</a></li>
<li><a href='http://animation11.net/2009/09/' title='September 2009'>September 2009</a></li>
<li><a href='http://animation11.net/2009/08/' title='August 2009'>August 2009</a></li>
<li><a href='http://animation11.net/2009/07/' title='July 2009'>July 2009</a></li>
</ul>
</div></li><li class="block"><div class="block-widget_categories" id="instance-categories-5"><h3 class="title"><span>Categories</span></h3><div class="block-div"></div><div class="block-div-arrow"></div> <ul>
<li class="cat-item cat-item-14"><a href="http://animation11.net/category/basic-concepts/" title="View all posts filed under Basic Concepts">Basic Concepts</a>
</li>
<li class="cat-item cat-item-78"><a href="http://animation11.net/category/blogging/" title="View all posts filed under Blogging">Blogging</a>
</li>
<li class="cat-item cat-item-9"><a href="http://animation11.net/category/careers-for-freshers/" title="View all posts filed under Careers For freshers">Careers For freshers</a>
</li>
<li class="cat-item cat-item-236"><a href="http://animation11.net/category/gaming/" title="View all posts filed under Gaming">Gaming</a>
</li>
<li class="cat-item cat-item-3"><a href="http://animation11.net/category/graphics/" title="View all posts filed under Graphics">Graphics</a>
</li>
<li class="cat-item cat-item-174"><a href="http://animation11.net/category/news/" title="View all posts filed under News">News</a>
</li>
<li class="cat-item cat-item-138"><a href="http://animation11.net/category/review/" title="View all posts filed under Review">Review</a>
</li>
<li class="cat-item cat-item-60"><a href="http://animation11.net/category/softwares/" title="View all posts filed under Softwares">Softwares</a>
</li>
<li class="cat-item cat-item-269"><a href="http://animation11.net/category/technology/" title="View all posts filed under Technology">Technology</a>
</li>
<li class="cat-item cat-item-68"><a href="http://animation11.net/category/tools/" title="View all posts filed under Tools">Tools</a>
</li>
<li class="cat-item cat-item-1"><a href="http://animation11.net/category/uncategorized/" title="View all posts filed under Uncategorized">Uncategorized</a>
</li>
<li class="cat-item cat-item-5 current-cat"><a href="http://animation11.net/category/web-designing/" title="View all posts filed under Web Designing">Web Designing</a>
</li>
</ul>
</div></li><li class="block"><div class="block-widget_links" id="linkcat-2"><h3 class="title"><span>Blogroll</span></h3><div class="block-div"></div><div class="block-div-arrow"></div>
<ul class='xoxo blogroll'>
<li><a href="http://aprocon.org/">Aprocon [dot] Org</a></li>
<li><a href="http://votepuma.com/">Crucial Gadgetz</a></li>
<li><a href="http://greenheartmed.com/">EDUCATION plus</a></li>
<li><a href="http://kicae.com/">Fashion Freeze</a></li>
<li><a href="http://nam-na.com/">NEWS @ SCREEN</a></li>
<li><a href="http://filmslanka.com/">News Galaxy</a></li>
</ul>
</div></li>
<li class="block"><div class="block-widget_recent_comments" id="instance-recent-comments-3"> <h3 class="title"><span>Recent Comments</span></h3><div class="block-div"></div><div class="block-div-arrow"></div> <ul id="recentcomments"><li class="recentcomments"><a href='http://stencilingart.info/pt-templet-stencils-alpha-and-numeric-alphabet-and-symbols/' rel='external nofollow' class='url'>PT TEMPLET Stencils Alpha and Numeric, Alphabet and Symbols | The art of stenciling</a> on <a href="http://animation11.net/2009/10/26/numeric-keypad/comment-page-1/#comment-10">Numeric Keypad</a></li><li class="recentcomments">Dorothy Parker on <a href="http://animation11.net/2009/11/07/easy-debt-consolidation/comment-page-1/#comment-9">easy debt consolidation</a></li><li class="recentcomments"><a href='http://Website' rel='external nofollow' class='url'>Polprav</a> on <a href="http://animation11.net/2009/10/03/what-is-rss-feeds/comment-page-1/#comment-4">What is RSS Feeds?</a></li><li class="recentcomments"><a href='http://Website' rel='external nofollow' class='url'>Polprav</a> on <a href="http://animation11.net/2009/10/13/basic-things-about-computer-graphics/comment-page-1/#comment-2">Basic Things about Computer Graphics</a></li><li class="recentcomments"><a href='http://wordpress.org/' rel='external nofollow' class='url'>Mr WordPress</a> on <a href="http://animation11.net/2009/10/10/careers-in-creative-field/comment-page-1/#comment-1">Careers in Creative Field</a></li></ul>
</div></li><li class="block"><div class="block-widget_text" id="instance-text-3"><h3 class="title"><span>Alexa Rank</span></h3><div class="block-div"></div><div class="block-div-arrow"></div> <div class="textwidget"><SCRIPT type='text/javascript' language='JavaScript' src='http://xslt.alexa.com/site_stats/js/s/a?url=http://animation11.net/'></SCRIPT></div>
</div></li><li class="block"><div class="block-widget_meta" id="instance-meta-4"><h3 class="title"><span>Meta</span></h3><div class="block-div"></div><div class="block-div-arrow"></div> <ul>
<li><a href="http://animation11.net/wp-login.php?action=register">Register</a></li> <li><a href="http://animation11.net/wp-login.php">Log in</a></li>
<li><a href="http://animation11.net/feed/" title="Syndicate this site using RSS 2.0">Entries <abbr title="Really Simple Syndication">RSS</abbr></a></li>
<li><a href="http://animation11.net/comments/feed/" title="The latest comments to all posts in RSS">Comments <abbr title="Really Simple Syndication">RSS</abbr></a></li>
<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress.org</a></li>
</ul>
</div></li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<!-- /main content -->
<!-- foooter -->
<div id="footer">
<div class="page-content">
<div id="copyright">
Mystique theme by <a href="http://digitalnature.ro">digitalnature</a> | Powered by <a href="http://wordpress.org/">WordPress</a> <br /> <a class="rss-subscribe" href="http://animation11.net/feed/" title="RSS Feeds">RSS Feeds</a> <a class="valid-xhtml" href="http://validator.w3.org/check?uri=referer" title="Valid XHTML">XHTML 1.1</a> <a id="goTop" class="js-link">TOP</a>
</div>
</div>
</div>
<!-- /footer -->
</div>
</div>
<!-- /shadow -->
<script type='text/javascript' src='http://animation11.net/wp-content/themes/mystique/js/jquery.mystique.min.js?ver=2.8.4'></script>
<script type="text/javascript">
/* <![CDATA[ */
var isIE6 = false; /* <- do not change! */
var isIE = false; /* <- do not change! */
/* ]]> */
</script>
<!--[if lte IE 6]> <script type="text/javascript"> isIE6 = true; isIE = true; </script> <![endif]-->
<!--[if gte IE 7]> <script type="text/javascript"> isIE = true; </script> <![endif]-->
<!--[if lte IE 7]>
<div class="crap-browser-warning">You're using a old and buggy browser. Switch to a <a href="www.mozilla.com/firefox/">normal browser</a> or consider <a href="http://www.microsoft.com/windows/internet-explorer/">upgrading your Internet Explorer</a> to the latest version</div>
<![endif]-->
<!-- 33 queries. 0.190 seconds. -->
</div>
</body>
</html>