HTML has evolved over the years. As demands of site users changed HTML had to reinvent itself to support all the new developments. HTML5 takes HTML to a new level. Find out how different it is and how you can put HTML5 to work with my online HTML5 course. Step by step ofcourse, so no stress!
It’s been like a lifetime ago since wrote my first Step By Step HTML course and yes it has had a few revisions since. A few tweaks here and there were made to make sure you don’t get to far removed from what’s going on now. But now, there’s HTML5. …
Nothing has changed in the way that HTML files are built up, so the file still consists of two main sections: a head and a body. Add a <head>-element Change your file to look like this and save it. <!DOCTYPE html> <html> <head> <meta charset=“UTF-8”> <title>Whatever title of your file</title> …
It’s time to really start building the website. <body>-element Add the following bold printed section to your sample file: <!DOCTYPE html> <html> <head> <meta charset=“UTF-8”> <title>Whatever title of your file</title> </head> <body> </body> </html> Compared to the old HTML course, this is where you begin to really notice a difference in …
What’s a website without content, right?! Our next step, is to be adding some text to the sample file, which sounds easy enough, but you have many options available to you now. Adding text to your website Because you have various ways of adding content to your site now, I’ll start …
HTML5 also has some new elements that you can use for specific content or even specifying parts of your web site. They are intended for sectioning content within your <body>-element. This could come in handy when you are coding in another scripting language, like PHP . <address>-element The address element is …
Nothing has changed in comparison to the old HTML version to add images. You still use the <img>-element. Make sure you know the exact name of your photo file, including caps, spaces, dashes etc. The name in your HTML code should match exactly with the file name and location on …
The cool thing about HTML5 is that it allows you to add audio and video to your site without needing much ado about anything. It’s really made easy with the new <audio> and <video>-elements. <audio>-element Suppose we have a soundfile called “Nora-Tol-mega-mix.mp3”. Change your HTML sample file to look like this: …
In HTML5 you can still use all the options you’ve always had available to create lists, but there are a few new functions. <ol>-element The <ol>-element now allows you to reverse the order of the list, so let’s add a nice little pop chart to our sample file and reveal our number one …
Creating links in HTML5 is still done the exact same way as before, but a lot of attributes have been added over the years, so I thought I’d show you all the options you can still use in HTML5. Add links <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>Whatever title of your …
<svg>-element: Scalable Vector Graphics New to HTML5 is the <svg>-element. This cool element allows you to create scalable vector graphics. So what are they? Well, an image like a .jpg file is always based on a bitmap. When you scale this to a larger size, you will lose quality. It …