What can I say?! I love the Internet. I’ve been ‘online’ for a really long time. In 1996, I started my journey as a webdesigner and I’ve been hooked ever since. It’s a great platform to create things for and I love teaching you how to get started. Get inspired and start building! Browse through my articles about HTML and SEO.
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 …
The <canvas>-element also allows you to draw on your website. However, in contradiction to the <svg>-element, the <canvas>-element is not seen as an object, but it’s seen as a container. This means that the browser won’t be remembering the figure, but will therefor rebuilt the graphic each time you change an …
Forms in HTML5 are still created the same way as before, but there are some cool new functions that are so worth mentioning. To show you the possibilities, let’s create a contact form just like in the old HTML course, but we’ll add some of the new features to it. …