HTML5 Beginner’s Guide

HTML5 Beginner’s Guide

HTML5 Beginner's Guide

The ability to make compelling, beautiful web pages is a useful skill to have. It allows you to present information you care about whilst capturing the attention of those who visit your web page.

If you don’t want to use website platforms (such as WordPress, Drupal and Joomla) to build your website and you want to learn the basics of HTML5, then this is a right guide for you.

And oh, once you have learned the ropes of a HTML5, I highly suggest you to check out my “HTML5 Cheat Sheet” below.

HTML5 Cheat Sheet

HTML5 Cheat Sheet

Introduction

laptop

Historically, websites have been constructed with HTML, CSS and Javascript. These are known as ‘front-end’ technologies, and control the aesthetic of the website. In recent years these tools have seen a drastic refresh and now boast some amazing features, allowing you to do things that previously would have been impossible without using a complicated back-end technology like PHP, Perl or Ruby On Rails.

This refresh is known as HTML5, and has been adopted by companies and developers alike with great enthusiasm. In this article, I’m going to run you through how to use aspects of HTML5 in your own web projects. Whilst prior experience in basic web design is useful, it’s not essential.

Scenario

multimedia

Charlie and the Roundheads is an Indie rock band from Huntingdon Beach, California who were recently signed to a major record label. Their A&R manager is eager for them to have a website, and has hired you to create one for them.

You’ll need to add music streaming facilities, a place for Charlie and the Roundheads to display their music videos, blog posts as well as a way for fans to sign up for email updates about the band. In addition to this, the code has to be clean and representative of modern HTML5 coding styles.

Whilst this may sound daunting at first, it’s really not.

In the next thirty minutes, you’re going to learn how to do all of this, and more.

Text Editor

smashing

Firstly, we’ve got to talk about what we’re going to be using to write our code. You’re probably quite familiar with Microsoft Word or Apple Pages. These are word processors that are quite well suited for writing letters and documents, but are completely inappropriate for writing code.

There are many reasons for this but the main one is that word processors create files that cannot easily be read by web browsers like Internet Explorer, Chrome and Safari and add superfluous formatting and information to web documents. Instead, we need to create files that are as bare-bones as possible. These are called ‘plain text’ files.

To create and edit these files, we use Text Editors. You might be familiar with Notepad on Windows. That’s an example of a text editor, although it is a really basic one. Programmers and web designers tend to use text editors that are best suited to writing code.

There’s a lot of choice here

oss

If you’re on Windows, you can check out Notepad++ or TSW WebCoder. Certain distributions of Linux come with Gedit, which is a remarkably capable text editor for coders. Users of OS X might find that TextMate is best suited to their needs.

For this tutorial, I’m going to be using Sublime Text 2. Available on OS X, Linux and Windows, it is a great all-rounder text editor and whilst it isn’t free, it does come with an unlimited trial period. Please download and install it before continuing with this tutorial.

Markup

html

TML stands for Hypertext MarkUp Language, and it refers to the code that structures all the elements in a web page. It doesn’t style the page, nor does it add any interactivity. That’s left to CSS and Javascript, which are things we’ll look at later on in this article.

First, let’s look at structuring our document and creating a sign-up form. We’ll worry about aesthetics later.

folder

First create a new folder where you’re going to store all your code. Open Sublime Text 2 and create a new file. Save it with the text extension “signup.html”, and make sure it’s stored in the folder that you’ve created. Now, let’s add some code.

html-boilerplate

This might look a bit daunting at first. This is the boilerplate found in virtually all websites. You’ll notice that you’ve got two < html > tags surrounding everything else, as well as a pair of < head > and < body > tags. What do they do?

robot

Well, < head > is where you store things like Meta Tags (these are useful for getting your site noticed in search engines), the title of your page, as well as external CSS and Javascript files.

< body > is where everything else goes, and it’s here where we’re going to put most of our focus. But first, let’s think about how websites are structured.

If you visit the websites of news organizations such as The Guardian, The BBC, CNN and Fox News, you might notice that they share some features in common. They have headers, footers, articles, sidebars and quite often boxes containing information that relates to, but is not an integral part of an article.

As you might expect, there are some tags in HTML that are explicitly for these use cases. Whilst they were only recently introduced in the new HTML5 standard, they’ve received a rapturous response from developers and designers alike. The reason for this is because they make it easy for developers to structure their code in a way that is logical, readable and well organized.

This is called Semantic Markup. What’s awesome about this is that tags do what they sound like. There are a few tags to learn here, but they’re reasonably self explanatory.

Section

tags

In-between section tags, you’ll find the main content in a page. Think of this like a chapter in a book, encompassing everything regardless of whether it’s a diagram, a picture or some words.

Aside

Aside is a useful tag, containing information that relates to the main article, but can be removed without making the main article incoherent.

Footer

Footer is where you should store contact information, copyright information and perhaps a couple of links.

Article

Article is what it sounds like. This tag should contain things like blog posts and news stories. This should be able to be detached from the rest of the page and still remain coherent.

Header

Header is where you’ll likely store the logo for your website.

Nav

Nav is for the navigation bar, and is where you’ll store links to other parts of the site.

Form

form-333x309

Now that we’ve learned about the different kinds of semantic markup that HTML5 has on offer, we’re going to use some of it to add some of the features required for Charlie and the Roundheads’s website. And where better to start with than a form?

Since we’re not adding a blog post or a news story, we’re going to use the Section Tag. It is here where we’ll write the code for our forms. Before we continue, it’s important to add a caveat that in order to do anything really useful with the data from our forms, we’ll have to use a back-end technology. Those are a little bit out of the scope for this article unfortunately. However, if you’re interested in back-end technologies, look into PHP. It’s easy to get started with, and is used by millions of developers worldwide.

mailbox-250x236

But first, let’s talk about the data we’re going to try and record. Charlie and the Roundheads will want to keep in touch with their fans by email. They’ll also want to know where they should go on tour, so it might be a good idea for you to collect ZIP/Post codes. Finally, fans might want to leave a message for the band.

With this in mind, let’s start work on our first form, and bring in concepts from HTML5 as we progress.

Forms consist of labels, inputs and buttons, and are surrounded with < form > tags.

form-first

The first input we’re going to accept is for an email address. To do that, we add a tag of < input > and do not close it. We’re going to preface this with ‘Email : ‘.

form-input

emailsThis isn’t an issue any more. You simply give your ‘input’ tag a type of ‘email’, as seen in the example below.
Before HTML5, you would have just accepted any old input, and then would have written some code to make sure that the information you had received from the user was a genuine, legitimate email address. That was time consuming and tedious.

form-type-email

We also want to make this a required field, so we’re going to give it another attribute of ‘required’. Should a user attempt to submit this form with the email field blank, it will respond with an error message saying “Please enter an email address”. It will also do this if the user tries to submit something that isn’t a valid email. Finally, we should also give it a name to identify the field, should we end up writing some back-end code. This is done by adding an attribute of ‘name’ with a value of ‘email’. This is demonstrated below.

form-input-required-copy

Now, let’s go ahead and add the fields for zip code and for the message. As I’m sure you imagined, you can’t use a type of ‘email’ for these. So, what do we know about Zip codes? Well, they’re always represented by a numerical value. Can you guess the type for that? That’s right. Number.

form-input-number

Finally, let’s look at how we’re going to accept messages. As I’m sure you’d expect, Charlie and the Roundheads have a lot of fans who might want to These break with tradition somewhat and don’t use the input tag, but rather something else.

input

The < textarea > tag is used for when your input is likely to span multiple lines.

Whilst this would be appropriate for a message from fans, it is less so for things like emails, passwords and names.

< textarea > can take a whole bunch of attributes. We’re interested in four of then. Firstly, we want to give it a name. We also want to define some rows and columns; these specify how large the text area is going to be. Finally, we want to define if it is required or not.

form-textarea1

With this in mind, I’ve decided to give it a meaningful name and make it reasonably large. I don’t want to make it required, as I don’t think that every fan will want to leave a message for the band.

What we’re left with is not exactly pretty. Don’t worry about that. We’re going to make it look good later, but first we’re going to look at adding rich media to our website.

Music and Videos

browsers

It used to be that to if you wanted to add music and movies to a web page, you’d have to rely upon a bulky, slow framework such as Flash or Silverlight. HTML5 has effectively thrown these out and replaced them with something much better.

For the next bit of Charlie and the Roundheads’ web page, we’re going to create somewhere for them to publish and share music and videos. This sounds complicated, but it’s actually really easy.

But let’s first talk about dreaded codecs. As I’m sure you know, there are a huge amount of web browsers on the market right now. There’s Internet Explorer by Microsoft, Chrome by Google, Firefox by Mozilla, Safari by Apple and Opera by… er, Opera.

Each of these handle playing music and videos slightly differently. For example, whilst Internet Explorer is capable of playing music and video encoded with the H.264 MOV codec, it cannot use the Theora codec which is favored by Opera and Firefox.

So, how do we get around that? Well, there’s no clever trick really. We just have to encode our music and movies in a whole bunch of different ways.

proov4

So, let’s get started. Create a new file using the same HTML5 boilerplate we used before. Let’s also add a section semantic tag.

video-boilerplate

Now, we’re ready to add some music and videos. But first, would you like to hear what I really love about HTML5? It does what it sounds like. Not sure what I mean?

Okay, would you like to take a guess at the tag for adding videos to a page? Yep. Video.

html5video

So, now we need to add the video files. All we’ve done here is add a container for them. So, given what we know above, we’re going to add H.264 MOV and WebM8 media. As an added bonus, we’re going to have a placeholder so that should someone visit the page with an old web browser, they will see a message informing them that they ought to upgrade to something more modern.

Adding a video is easy. You just type in a < source > tag for each video you wish to embed. Fallback messages don’t need to be in a tag, either.

video-tagadded

We also want to have some music. Unlike video, there are only two codecs you should care about.

music1

As you’d expect, the tag for audio is < audio > and you can add your sources in the same way you did with movies.

audio-tagadded
html5audio-250x311

Now that we’ve got that sorted, we’re going to tackle the last requirement for Charlie and the Roundhead’s website.

Blog

notepad

Let’s quickly recap what we’ve learned so far. We’ve introduced semantic markup, HTML5 forms and embedding rich media. Let’s try something simple and create a few sample blog posts, and then we’ll look at stylizing our site. This won’t take long.

First we’ll create another page called ‘Index.html’ and add the same boilerplate we had before. We’re also going to add an article tag, which is the tag specifically for blog posts and news articles. Using the familiar < p > tag, we’re going to place a few paragraphs of ‘lorem ipsum’.

blog-lorem-ipsum-1024x554

Lorem Ipsum is bunch of Latin that doesn’t actually mean anything, but allows you to fill something with text and stylize it later without having to worry about doing any writing.

blog-lorem-ipsum-example-1024x549

Ugly, isn’t it? Now we’re going to make it look better.

Typography

typography

Typography sounds like an arcane science involving printing presses, but the reality is something entirely different. It’s the art of arranging and stylizing text so that words are readable and look good.

It sounds simple, but it’s anything but. A close look at typography could fill a good many books, but we don’t have time for that. Let’s skip all that and jump straight into making our text look good.

You’ll have some fonts readily available to use with your computer and web browser. These are the ones you might have came across whilst writing something in Word. You might not know that a good many fonts are available online that have been created by designers passionate about typography.

Google Fonts is a great supply of these, and we’re going to use one available for free called Droid Sans.

In each of our HTML files, we’re going to add the following line in-between our < head > tags.

< link href=’http://fonts.googleapis.com/css?family=Droid+Sans’ rel=’stylesheet’ type=’text/css’ >

While we’re at it, we’re going to create a new file called style.css and add this line to each of our HTML files.

< link href=’http://fonts.googleapis.com/css?family=Droid+Sans’ rel=’stylesheet’ type=’text/css’ >

Not sure what CSS is? So, remember how I told you that HTML was the structure of a web page? Well, CSS is what makes that structure look good. it’s the aesthetics of the page.

It works by selecting elements in a page (elements like Body, P, Section), and then adding rules. So, let’s select all content within the Section tags and give it all the font style of Droid Sans.

css-typography-added

This will result in all text within our pages having the style of Droid Sans, and looking much nicer than the default font.

css-typography-result-1024x360

Now we’ve got some housekeeping to do. We need to add links to each page, add some backgrounds and add some borders. The last chapter will look at aesthetics in closer detail.

Tidying Up

Let’s tackle the low hanging fruit first. We’re going to create a navigation bar for users of Charlie and the Roundheads’ site to get around. Above the Section tag on each page, we’re going to create a Nav tag. In between that, we’re going to create an unordered list. This is identified by the < ul > Inside of those, we have < li > tags each with links to each page within the site.

links-added

Now, let’s stylize that. As it is right now, each of those tags are cascading downwards. We’re going to fix that so that they’re all on one line. Edit the CSS file from before and add the following lines.

Now that’s sorted, let’s think about the blog. So, we’ve got a lot of (admittedly pretty looking) text. However, we want to do a bit more. We want to give it a fixed width of 640 pixels, give it a thick, shaded border and give it a background color.

So, let’s edit that CSS file again. We’re going to add the following lines. These are reasonably self explanatory.

article-stylized

Finally, we want to apply a background uniformly across all pages. Back into the CSS file we dive! Since we’re colorizing the background across all pages, we’re going to create a selector of the type ‘body’. Let’s also try something a bit different.

Solid block color backgrounds don’t look too hot. Textured backgrounds do. Let’s go to CSSMatic and generate a texture that we like. Play around with the settings until you’re happy, and then click ‘Download Noise Texture’.

body-background

Now, we’re going to apply this as a background. Let’s dive into our CSS file and add a selector for ‘body’. We’re also going to apply a background from image. Before moving forward, please make sure that your image is in the same directory as your HTML files.

result

Once edited, your page should look like this. As you can tell, there’s a lot more to do from here. This was just a very basic look at editing and designing content with CSS & HTML5.

If you want to build a site using WordPress, head over to my homepage.

 

Conclusion

bulb-250x250

This was a brief foray into web design using HTML5 technologies, as well as some standard HTML and CSS techniques. Whilst I hope I’ve effectively taught you about the basics of web design, I’d be even more pleased if you came away from this article confident with the knowledge that creating beautiful web pages is within your grasp.

And oh, if you wish to download the Roudheads website files, click here.

Update 2016, Feb: People behind www.webucator.com put together an video that explains all the steps listed in this article in this awesome video. You can see it here:

Leave a Reply

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

30 Responses to “HTML5 Beginner’s Guide”

  1. Hey Robert,

    I started to get myself into webpage building. Your tutorials help a lot!
    I managed to install WordPress – and it’s working perfectly fine – props for that.

    About HTML5, I’m having a lot of fun with it. My question regarding it, is how can I make it visitable by people?
    Because now it’s really just a HTML file on my computer isn’t it.

    Thanks and keep up with the good work!

    Best regards,
    Sara

    • Hi Sara,

      Thanks for the kind words. You’ll need to upload the html files you hosting company server. Once that’s done, they’ll be visible for visitors.
      Robert

    • Hi Robert, Thanks for putting together these pages – they are great, and just what I need to get going on my project. I am also trying to decide whether to go for WordPress or HTML. I have coding experience, but not recent. Does WordPress produce an editable form of HTML that you can play with? I have worked with code generators in the past which are “editable in theory” i.e. they produce editable code but it is very difficult to work out what is actually going on :-).
      Many thanks,
      Liz

      • Hi Liz,

        Thanks for your comment. WordPress does have an option to make HTML on single pages and posts… If I were you, I’d play around with WordPress a bit. It’s pretty cusotmizable and cool to edit. Worth trying it out 🙂

        Cheers,
        Robert

        • Hi Robert, Thanks for your tutorials. I’m a serious newbie to HTML5, CSS, Java, but saw an effect the other day on a website I’d love to recreate. There was a background wallpaper, and the text seemed to be on a transparent ground, so you could scroll the text over the top of the wallpaper. How is that done? Would love to use it on a website. Thanks, Dianne

  2. One of the best guides I’ve seen for, thanks for sharing.

    I’m still confused though about what is better: I’m writing HTML at the moment but I’m confused about what is better: a CMS (WordPress) or raw HTML? I believe the answer is “it depends on what you want to do”. If you want to update it everyday you need a CMS. Otherwise you can do whatever you want. But still … I’m a bit confused.

    • Hi Stefanos,

      Thanks for your kind words. Great question too.

      In short, if you want to build a decent site quickly and you don’t have much previous coding/designing experience, hands down – go with WordPress. There’s a full tutorial on my homepage – http://websitesetup.org

      If you want to learn the basics of web development, try messing around with HTML5. At first you obviously won’t be able to create something really awesome – as it takes time to learn HTML5, but eventually you’ll get the hang of it.

      Robert

  3. Hi there! Found this awesome guide, how lucky am I? ;D

    I just have a short question: I made my own website using HTML5 and CSS3 and so now I want to upload it to the internet. I have bought myself a domain-name (bjornsteck.com) and have signed up/uploaded the files to a hosting client. (www.heliohost.com).

    However, is there anything else that I have to do in order for it to work?

    Cheers

    Björn Steck

    • Hi Björn,

      Now you’ll just need to change your domain nameservers to your hosting nameservers. You can ask this information from your hosting support. It should be easy 🙂

      Hope that helps,
      Robert

      • Friend of mine fixed it for me. He did it just like you said. Thanks alot!

        Cheers

  4. Thanks for the awesome guide, I was so lost when I first tried HTML but I’m starting to get the hang of it, the only problem is I cant get the CSS file to change the attributes of the HTML files. I was wondering if you could help?
    Thanks in advance! 🙂

    • This guide has a small little mistake in it. He copied the same css-line two times. So instead of writing two times, write one.

      and then save your css-File to style.css

      David

  5. Wouldn’t you need to call your style sheet with an href=”style.css” ? Otherwise the styles don’t work.

  6. By the way, thank you for taking the time to put this together. I needed to get familiar with sections and articles, and this tutorial was very helpful.

  7. Thank you for this great guide, I was wondering, can you make an advanced html guide? I’m trying to learn everything about html to start a business creating websites. Thank you so much for writing this out.

  8. Hi Robert,

    I’m starting out developing a website using wordpress but ultimately may try and recreate/improve the end result using HTML&CSS in the future (trying to get into development!). If I make a website using wordpress and then create something better with HTML5 will it be possible to use my HTML version with the same host on the same domain? (hope that made sense!)

    • Hi Jonathan,

      That’s doable. Just create two different root folders. One for WordPress and one for HTML version.

  9. Hi Robert,
    Thank you for helping us all learn HTML5 🙂 I had a quick question for you. I want to build a website using WordPress. I’ve found a few themes that work with the design I’ve created, installed them, but all of the source files for them are in php, which I am, unfortunately, not very familiar with. While I realize that I should probably catch up on that, would you say that I should just keep looking for a theme that’s HTML-based? I haven’t been able to find a single theme that has html files in it at all so far.
    Thanks again!

    • Hi Alisa,

      Most WordPress themes can be edited with a little knowledge of HTML & CSS in the back-end. But if you’re starting out, I realise that this can be a pain. What I’m suggesting you is to pick a free or paid theme that is somewhat suitable for you. Then, when you log in to your WordPress site dashboard, you can tweak it a bit under “Appearance -> Customize” 🙂

  10. This guide helped me a lot. Please make an advanced tutorial series for HTML5 too.

    I would prefer learning from you rather than reading boring traditional texts written by old monks.

    Will be waiting for it!

    – Pingal

  11. Rob,

    Great tutorial! I made my first HTML doc with your help. Thanks a ton!

    -Abhinav

  12. Thanks so much for this article. I’ve dabbled with learning HTML/CSS with Code School and Codeacademy, but with these you create code in-browser. I didn’t fully understand how to make my own website using a popular text editor such as Sublime Text.
    I did have a question about the zip code submit on the signup page. Could you use the pattern attribute? Like:

  13. Hey, my index.html doesn’t show the signup.html
    This is showing the box with the text only 🙁

    • Hmm, can you show me your index.html file so I can take a look at it? Feel free to email me: robert(at)websitesetup(dot)org

  14. Hi Robert
    I’m looking for a change in career and am considering web design as a future path and I’d like to ask,as I am an absolute beginner and nearing my 40’s,where would be best to start and is it ever too late to start a career in and make some money doing web design.
    Regards David