Web Development & Design Resources

HTML markup has changed a lot especially when the WHATWG introduced semantic tags.   Semantic Tags? What do they mean. The Semantic Markup helps Humans and Machines to Interpret the HTML markup in a more meaningful way. Which helps the HTML markup to be structured in a more meaningful way. remember adding semantic tags to your HTML5 markup wont change the apperance of your page, but it Gives more meaning to your Markup.   Here is a list of few HTML5 semantic tags. <section>  </section> <article>  </article> <header>    </header> <nav>          </nav> <aside>      </aside> <footer>    </footer> As you see above the above tags wont make our web pages pretty but it gives more meaning to the markup.

To add a button in a HTML page use <input> tags and specify the type as button like so <input type=”button” value=”submit” action=”submit.php”> this code will be rendered in browser like in Figure 1.1 Add caption Further more if you wish to style this button we can apply a set of CSS rules to make the buttons look pretty here are a few examples: Download code for these buttons here

Here is a few simple looking html buttons styled using CSS3 . See Demo | Download HTML buttons

Adding Scripts in HTML (i.e. JavaScript, Action script and others) requires the use of opening and closing <script> tags. The script is entered between theses tags. Here is an example: <script> //this is just an example for adding scripts $(document).ready(function(){ $(‘h1’).click(function(){ $(this).addclass(‘.animate’) }); }); </script> To included external script files we have to included the ‘src’ attribute in the script tags like so <script src=http:/faqwebdevelopmenet.js type=”text/javascript”></script> In the above HTML code the ‘src’ attribute specifies the source location of the script file and type attribute specifies the type of script being used. (Note: in HTML5 you don’t need to specify the type attribute the browsers will automatically understand the type of script).   

Adding a link in HTML is fairly simple all we need to do is add the file location and link title in between the opening and closing <a> tags. like this: <a href="http://fawwebdevelopment.blogspot.com">Link to my Blog</a> The above code will be rendered in a browser like this: After adding the above code the browser will change appearance of the link, the text color will be changed to blue and text will be also underlined this is the default behavior by browsers to indicate links. To style this links to appear the way you want please read the tutorial on “how to style links”. In the HTML Code “ <a href="http://faqwebdevelopment.blogspot.com">Link to my Blog</a> ” <a> stands for Anchor text , “href” attribute specifies the file path .

LineBreak : <br/> provides a single line break Horizontal line: <hr> inserts a Horizontal line Paragraphs: <p></p> inserts paragraph element (note: if you forget to add the closing </P> tag browsers will still render the paragraph but it is a good practice to add the closing </P >tag). Headings :< h1></h1> headings range from <h1 > to <h6> where h1 is the most important heading and h6 is the least important heading you can use the heading s as per your purpose like so: <h1>My Heading</h1> <h2>my other Heading</h2> <h3>My Final Heading</h3>