Start Using the Full Power of HTML

It's an exciting time to create web pages with the combined power of HTML, Cascading Style Sheets (CSS), and JavaScript. But it wasn't always this way. At first it was just HTML. And there wasn't much to it back in 1993. You could create documents with headings, paragraphs, and images. And of course, there were hyperlinks. But that was about it. It didn't even allow for number or bullet lists! Over time, much was added to the language. And with the release of HTML5, there is very little that can't be done in a web page.

 

Media Elements

The most flashy of the new elements involve media. The video and audio tags make it easy to include video and sound in your pages. Perhaps more exciting is the canvas tag, which allows you to draw right on the page.

Structural Elements

A less flashy but arguably more important new element of HTML5 is its inclusion of semantic tags. These days, it is important for search engines to be able to grok pages. Semantic tags help them do that. There is nav, which tells search engines that the content in that section is for navigation. Similarly, article indicates the meat of the page.

Expand Your Coding

If you are still using the same dozen or so HTML tags, maybe it's time to up your game. And it's easy to get up-to-date on all the exciting new tools the language offers.

Check out the HTML Cheat Sheet. It allows you to browse all the HTML tags either alphabetically or categorically. You can even download it in PDF form and print it.

Happy coding!

How To Convert Inline CSS Style To External CSS

CSS (Cascading Style Sheet) is declared to maintain the formatting, layout and appearance of Web page elements. You can include CSS declarations in multiple locations in an HTML file, including inline, internally and optionally in an external file.

Find the below mentioned simple steps to convert an Inline CSS  to External CSS:

1. Open a new file in a text editor and save it with a ".css" extension -- for example, "blogpage.css" or any other name you prefer. Add a link to your style sheet within the head section of your HTML page. Open the page and look for the closing "</head>" .

2. Append the following before it:

<link rel="stylesheet" type="text/css" href="blogpage.css" />

Alter the "href" attribute value if you saved your file with a different name.

3. Search for the CSS declarations you want to move to your external style sheet. If the declarations are inline like the below example where opening tags of elements :

<div style="color:#FH0000; background-color:#333000;">Text in element</div>.

4. Now select the text listed between the quotation marks as the "style" attribute, copy it and paste it into your CSS file. Delete the entire style attribute from the HTML element when you have it copied into your style sheet.

5. Enter ID and class  attributes to your HTML elements to identify them in the CSS file. Alter your opening "div" tag again, this time including an ID attribute:

<div id="content">Text in element</div>
<div class="content">Text in element</div>

6. Now add block for identifying the class or ID you chose. For the ID attribute, use the below syntax:

#content
{ color:#FF0000; background-color:#000000; }
If you used a class attribute, use the following:
.content
{ color:#FH0000; background-color:#333000; }

7. Add any CSS code from an internal style sheet into your external file. It will look like following :

<style type="text/css">
div {font-weight:bold;}
</style>

8. Copy the code between the "style" tags and paste it into your CSS file. Delete the entire "style" area from your HTML when it has been successfully copied. Save your file and you are don with moving inline CSS to external CSS.