LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » CSS Codes / Guest Post / HTML Codes / HTML-CSS-PHP-JavaScript » Use CSS3/HTML5 Outlines To Upgrade Your Website

Use CSS3/HTML5 Outlines To Upgrade Your Website

Use CSS3/HTML5 Outlines To Upgrade Your Website

You definitely want your website to standout from the countless boring sites out there. After all, you spent time and money on the thing so you want it to be great. One very effective way to make your website shine is by using CSS3/HTML5 outlines to upgrade your website. To do that, follow the guidelines below:

Introduction:
Advancing to HTML5 is as simple as:
Altering your doctype to:

<!DOCTYPE HTML>
Reorganize your CSS stylesheets by browsing through this link: 
http://html5doctor.com/html-5-reset-stylesheet/
The most important idea of HTML5 is the option of moving away from senseless <div> tags to tags that are more specific such as <header> and <footer>. The impressive word for this is semantic.
The most important result of this is that it works better for search engines to read the code.

Practical and Handy Content Examples:

<article> 
<header>
<h1>This is my header</h1>
<p>By Richard Clark</p>
</header>
<p>Main text of my article</p>
</article>

There are also <section> tags that are labeled:

<article> 
<header>
<h1>This is my header</h1>
<p>George Washington</p>
</header>
<section id="what-are-outline">
<h2>What are document outlines?</h2>
<p>Main text</p>
</section>
<section id="outlines-in-html5">
<h2>Outlines in HTML5</h2>
<p>Main text</p>
</section>
</article>

A Practical Image Example:

We can also display images with more useful information:

<figure> 
<img src="http://www.ostraining.com/cdn/yay.jpg">
<fig caption> yay!!! </figcaption>
</figure>

It may look a bit complicate at first; bit once you get started using CSS3/HTML5 outlines to upgrade your website will get much easier.

Microdata:
Microdata enabled the accurate definition of the sort of content on a page. For Instance, this could label an entire area of the page as an event:

{copdecitation}<div itemscope itemtype="http://data-vocabulary.org/Event">{/copdecitation}

MicroFormats:
Microformats are much like Microdata. However, Microformats cut through to specific segments of the page. For instance:

<span class="street-address">265 Main Street</span> 
<span class="locality">Kenwood</span>
<span class="region">Sonoma</span>

HTML5 Modules:          

          Video: uploading and playing in any required format.
          HTML5 Tools: support for various different HTML plugins plus support for Views.
          Aloha Editor: Providing an HTML5-friendly WYSIWYG Editor.

SVG (Scalable Vector Graphics):
New graphics file based formats along with languages, based on the XML. It is worth scrutiny out. Abode Illustrator permits export to SVG.

Dealing With Internet Explorer:
PIE (Progressive Internet Explorer) makes Internet Explorer 6 to 9 recognize a lot of CSS3 tags.

Media Queries:
Automatically calculates how wide the reach of the browser is. It also tells how large the media segment on the screen requires to be. Sample code:

<link rel="stylesheet" media="screen and (max-width: 700px)" href="http://www.ostraining.com/cdn/css/narrow.css"> 
<link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="http://www.ostraining.com/cdn/css/medium.css">
<link rel="stylesheet" media="screen and (min-width: 901px)" href="http://www.ostraining.com/cdn/css/wide.css">

CSS3 Fonts:
It is possible to directly import fonts via CSS. Google’s font library is also obtainable with live previews and achievement options. This will likely cause your website to run a bit more slowly. The good news it that these newer options are a lot easier and more practical than the older offerings.
So there you go. Some great tools for helping you produce a website of which you are proud. With a little help using CSS3/HTML5 outlines to upgrade your website, your site is sure to be a hit.

About the Author:
I am Susan Hannan from F5 Networks Certifications Looking for Exams key exam assistance? Let’s take benefit of Exams key self-paced FileMaker Certifications training material and clear your IT certification on first try.

You Like It, Please Share This Recipe With Your Friends Using...

Be the first to write a comment.

Leave a Reply

Your email address will not be published. Required fields are marked *