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
Introduction
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
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
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
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
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.
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.
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?
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
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
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.
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.
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 : ‘.
This 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.
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.
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.
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.
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.
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
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.
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.
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.
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.
We also want to have some music. Unlike video, there are only two codecs you should care about.
As you’d expect, the tag for audio is < audio > and you can add your sources in the same way you did with movies.
Now that we’ve got that sorted, we’re going to tackle the last requirement for Charlie and the Roundhead’s website.
Blog
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’.
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.
Ugly, isn’t it? Now we’re going to make it look better.
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.
This will result in all text within our pages having the style of Droid Sans, and looking much nicer than the default font.
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.
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.
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 toCSSMatic and generate a texture that we like. Play around with the settings until you’re happy, and then click ‘Download Noise Texture’.
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.
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
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 below.
Update 2016, June: HTML5 support can differ significantly from one browser to another. There is even a site that helps web developers to find out which feature is supported. It’s aptly called “Can I Use“. A big “thank you” for the addition goes out to HTML5 veteran Ted Goas – http://www.tedgoas.com/
Read more:
Building Apps for Office with AngularJS and Html5
Building Apps for Office with AngularJS and Html5
C++ DirectX Game Development: Fun with Sounds and Shaders
Introduction and Deploying to WebGL 3D with HTML5 and Babylon.JS
