Html tutorial beginner's guide for 2017 websitesetup org

HTML Beginner's Tutorial Step-by-step Introduction to HTML and creating a simple page.

Robert Mening (https://websitesetup.org /author/robert/) Last updated: May 8, 2017.

40 Comments (https://websitesetup.org/html-beginnersguide/#comments)

d a

46 (https://www.facebook.com/sharer/sharer.php?u=https://websitesetup.org/html-beginners-guide/&

t=HTML+Tutorial%3A+Beginner%27s+%28101%29&redirect_uri=https://websitesetup.org?sharing-thankyou=yes)

48

(https://websitesetup.org/wp-content/uploads/2014/09 /pc-250x255.png)These days, if you want to build a website, you have several di�erent ways of doing so. DIY website builders (https://websitesetup.org/website-builders/) can help you quickly throw something basic together in a few hours while fully-�edged content management systems (https://websitesetup.org/cms-comparisonwordpress-vs-joomla-drupal/) like WordPress, Drupal (https://websitesetup.org/build-website-drupal/) or Joomla (https://websitesetup.org/build-website-with-joomla/) give you

sophisticated features to build complex websites without the need for technical knowledge (for the most part).

However, there is also still the old-school way: writing websites in pure HTML, which is actually how the Internet started out. However, still today there are very good reasons to acquire at least basic coding skills and in this HTML beginner’s guide we will help you acquire them.

In the following, you will learn what exactly is HTML and the bene�ts of using the markup language to build websites from scratch. After that, we will show you how to do so with a concrete example. You will learn how to create an HTML document, �ll it with content, make design changes, add navigation, web forms and rich media like videos and audio �les.

Before you start developing a HTML website, keep this handy HTML5 Cheat Sheet (https://websitesetup.org/html5-cheat-sheet/) next to you..

Let’s Start With the Basics: What is HTML? HTML stands for Hypertext MarkUp Language. If that doesn’t really tell you much, don’t worry. All you need to know is that it is one of the main ingredients of any website and one of the so-called frontend languages.

The frontend is the part of the website that you see in your browser when visiting any website. In modern websites, it is mostly made up of HTML, CSS (https://websitesetup.org/css3-cheat-sheet/) and JavaScript. These three markup/programming languages control the appearance, structure and function of an website.

The classic role of HTML is to provide the basic skeleton of the website, it’s structural elements and building block. CSS, on the other hand, adds styling in form of colors, shapes, fonts and other design elements while JavaScript can be used to make things more interactive and in�uence how elements behave.

With the ascent of HTML5 (https://en.wikipedia.org/wiki/HTML5) (which came out in 2014), things are not as clear cut anymore. HTML has become more powerful and the three languages more integrated with one another.

As a consequence, you can do more complex things with HTML alone that used to require backend technologies like PHP, Perl or Ruby on Rails.

Another bene�t of HTML5 is that many things have been simpli�ed. A number of HTML tags have been removed or merged into a single, more obvious versions (like <video> ) that make them easier to use and remember. You will see examples of that in the tutorial below.

The Benefits of Writing HTML Websites Yet, with great technology like WordPress, Drupal and other content management systems around, why would anyone go back to writing websites from scratch? Isn’t that redundant knowledge in today’s web?

Far from it. Being able to build a web page from the ground up remains a useful skill, even if you have no plans of ever becoming a professional developer.

First of all, it’ll allow you to quickly (in minutes as opposed to hours) throw up a page to present basic information and capture visitor information. That’s a great skill if you need to build a page with basic contact information, a placeholder, presentation or something similarly simple.

Secondly, basic coding knowledge transfers to other areas. If you have a WordPress website, knowing how an HTML document is structured and which tags do what allows you to quickly make tweaks or changes without hiring a developer. Or, at the very least, you’ll be able to speak to others intelligently about what’s going on and what you’re looking for instead of a lot of vague back-and-forth communication.

Apart from that, a pure HTML website makes you less vulnerable to security concerns and independent from outside updates or support. In addition, HTML is one of the basics of the modern web and knowing it can never be a bad thing. Being able to understand it lets you look into the source code of other websites and �gure out how they work so you can use this knowledge for your own web presence.

Sounds convincing? Then let me tell you a little more about the website we will be building in this tutorial.

Our Example: A California Rock Band Needs a Simple Web Page

In order to have something concrete to work with, we will use a concrete example: The �ctional indie rock band Charlie and the Roundheads from Huntington Beach, California was recently signed to a record label and needs a website up ASAP. You just so happen to be the lucky individual tasked with this assignment.

Here’s what the site needs: Blog posts for tour information Some method to catch fan email addresses Music streaming abilities A place to display music videos Oh, and your code needs to use the latest version of HTML5 so it’s modern and current.

No pressure.

While this might sound daunting at �rst, you don’t have to fret too much over it. In the next thirty minutes, you’re going to learn how to do all of this and more.

And oh, If you haven’t registered a domain (https://websitesetup.org /register-domain-name/) yet, do it now.

Tools You Will Need Before even discussing a single HTML tag, you’re going to need a way to write them. For that, your best option is a quality text editor.

We are not talking about Microsoft Word or Apple’s Pages here. While these are good for writing letters and documents, they are not suitable for HTML. That’s because they add a lot of invisible formatting that will screw up your page when viewed in a browser.

Instead, we need to work with bare-bones (or ‘plain text’) �les. These are created with Text Editors (http://en.wikipedia.org/wiki/Text_editor) like Notepad on Windows. In fact, it’s completely possible to write a web page with Microsoft’s standard tool. However, we wouldn’t recommended it since there are better alternatives out there that come with extra functionality to make coding easier.

For example, good editors o�er code highlighting. That means coloring code elements in di�erent colors so they are easier to read and distinguish. Another common feature is automatic indentations and other advanced formatting options.

If you’re on Windows, you can check out Notepad++ (https://notepadplus-plus.org/) or TSW WebCoder (http://www.tswwebcoder.com/) while Mac users might want to try TextMate (https://macromates.com/). Some distributions of Linux come with Gedit, which is also an excellent text editor choice. Plus, there are text editors that work across all three platforms like Atom (https://atom.io/), Brackets (http://brackets.io/) and Sublime Text (https://www.sublimetext.com/), which is what we will be using in this tutorial.

So, before you move on, make sure you have downloaded and installed one of the options above.

The second thing we need is a web browser to view the fruit of our labor.

Since you are reading this article, I will go ahead and assume that you already have one of those at hand. If you don’t (which would be miraculous), make sure you install one of your choosing (it’s up to you, no need to open up the browser debate right here).

Once you are done gathering your tools, we are ready to get started for real.

Step #1: Create a Basic HTML Template As a �rst step, we will create a basic HTML template. So let’s go over how to do that.

Create the File First, we need to create an HTML �le. That is quite easy. Just set up a folder on your hard drive in which you will place all �les for the website.

After that, open up your your freshly installed text editor and create a new �le. Save it as index.html inside the folder you’ve set up. The .html extension automatically turns it into an HTML �le. See, wasn’t so hard now, was it?

Add Basic Code Structure Once we are done with that, we are ready to add this piece of code: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>

Say what?! Ok, did I lose you already? Don’t worry, I’ll explain what all this means right away.

What you’re looking at here is a boilerplate starting point for virtually all websites (which also means you get to copy and paste, hooray!). The <html> and </html> tags surrounding everything else are HTML brackets

that open and close the document.

Everything inside <head> is the head of the document. Here we store things like meta tags, the title of your page, any external CSS and Javascript �les to reference as well as additional information to help get your site noticed in search engines.

(If you’re familiar with older versions of HTML, you’ll notice some elements like ‘charset’ have now been simpli�ed and are included in meta tags too.)

Finally, <body> is where the main content of your page goes and most of this guide is dedicated to explain how to get it there.

The HTML tags that dictate all of these common page elements give you a way to logically organize your code and make it easy to understand and follow. The structure you see above is very typical for web pages and you see it all around the Internet, including on the websites of news organisation like The Guardian, The BBC, CNN or Fox News.

The diagram below explains how the HTML elements correspond to what you see on the �nished website. This should make things even clearer. [add HTML layout structure image]

Besides the ones mentioned above, there are a couple more.

Other Structural HTML Tags When looking at HTML tags, you will notice that their names also describe their function: <header> – The top part of a website. It’s typically where you would

place a logo and it usually precedes the website navigation. <nav> – Stands for navigation. This mostly describes the primary

website menu where you’ll place links to the main pages of your website. <article> – Contains standalone pieces of content, like individual

blog posts, news items, videos, or images. <section> – The main content on a page is typically located

between <section> tags. Think of these like a chapter in a book, where each contains a group of information like multiple articles, diagrams, images, etc. <aside> – A useful tag for including related information that helps

explain (but isn’t required for) the context around your page topic.

It’s typically used to create a sidebar for related text or links. <footer> – Bottom part of the website. The footer is where you

store contact information, copyright claims and sometimes additional links like Terms of Service or Privacy Policy.

Still with us? Cool. As you can see, these are pretty easy to remember. For more info, check the HTML5 cheat sheet (https://websitesetup.org /html5-cheat-sheet/). Also, now that we have our basic HTML document we can start adding content to our page.

Step #2: Fill in Some Content The most basic element of any web page is content. This can mean anything from simple text-based information over images to multimedia �les like audio and video.

For our example, the Charlie and the Roundheads website needs to display their latest tour information so that their fans know exactly where to �nd them. You can easily create this in the form of a simple blog post, so let’s

do that now.

(Btw, if you want to create a blog without messing around with HTML, check this step-by-step guide to creating a blog (https://websitesetup.org /create-blog/).)

In our index.html �le, we will now add a new <section> and <article> element nested inside one another within the <body> tags.

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <section> <article> </article> </section> </body> </html>

As we’ve just learned, <article> is created speci�cally for blog posts and news items. Inside of that, we’ll create several separate paragraphs using the <p> tag. (Get it? ‘P’ stands for paragraph.)

Since we don’t have any real content to add yet, we will use Lorem Ipsum (http://www.lipsum.com/), which is a bunch of pseudo-Latin that is used as a placeholder in web development. It ends up looking like this:

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel= <link rel="stylesheet" type="text/css" href=style.css> </head> <body> <section> <article> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur </article> </section> </body> </html>

Now, if you save that �le and then view it in your favorite browser, you will already be able to see something. To do so, right click the �le, choose

Open with and then pick the browser of your choice.

(https://websitesetup.org/wp-content/uploads/2017/02/paragraphswithout-css.jpg) Functional but not very pretty yet. For that reason, our next step is to make it look better with some styling.

Step #3. Add Typography to Your Website Content To make the text look better, we �rst want to change the font. Right now, it looks the way it does because our computer and web browser come stocked with their own fonts. You’ve probably already seen and used many of them when creating a document in Word or Pages and there are a number of standard web fonts that are present on pretty much any computer.

However, it’s also possible to use custom fonts. The good news: Many of them are available for free from places like Google Fonts (https://fonts.google.com/). This service o�ers a ton of free, elegant font styles for your website.

In this case, we want to use one of my favourite fonts, Droid Sans (http://www.google.com/fonts/specimen/Droid+Sans), to give our �rst blog post some personality. This happens via CSS, which, as mentioned earlier, is responsible for adding styling to websites. Here’s how to do it.

Load the Font To change the font, we �rst need to load it. Otherwise, we can tell the browser a million times to use it, if it’s not present, there’s nothing it can do.

We mentioned earlier that additional resource are loaded inside the <head> section. That is also true for fonts. So, as the �rst step, copy and

paste the following line of code in between the two <head> brackets (in case you are wondering, we got this piece of code from the Google Fonts website):

<link href=’http://fonts.googleapis.com/css?family=Droid+Sans’ rel=’sty

This will tell the browser to load the font from Google’s website. After that, we need to assign it to our content for it to change.

Add CSS to Apply the Font To add CSS to our document, you will now create a new �le (inside your text editor) and name it style.css. This is the so-called stylesheet where all of our page’s styling is saved. Save it in the same folder as the rest of the documents.

Before we can use the stylesheet, we �rst need to tell the browser to load it for our document. This happens by adding this line of code to the <head> section of index.html:

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

From now on, everything that is added in style.css will be applied to our

document. Time to truy it out. We will now tell the browser to use the font we loaded earlier for our paragraphs like this: section { font-family: 'Droid Sans', sans-serif; }

That’s it. This piece of code basically tells the browser to apply the font family Droid Sans to all text inside <section> tags. The sans-serif part is the fallback font. If the browser can not �nd the �rst font (maybe because we forgot to load it in the header) it will use the second one instead, which is one of the standard fonts mentioned earlier.

Now save the �le and go back to your browser. If you reload the newly created web page, it should now look a little something like this:

(https://websitesetup.org/wp-content/uploads/2017/02/htmlparagraphs-aftr-applying-font.jpg) Somewhat better, isn’t it? However, still pretty bland, so let’s add some more things.

Step #4: Create a Linked Navigation Bar By now, the website is slowly starting to come together. However, beyond the �rst blog post, we will want to add a few more pages in the future. In order for our visitors to reach those, we need a navigation bar.

If you have ever used a website before, I probably don’t have to explain to you what that is. Creating a navigation bar might seem a bit complicated at �rst but if you have followed along so far, I am sure you can get your head around it.

Here’s how to do it step by step:

1. Create a <nav> tag between the <body> and <section> tag (don’t forget to close it with </nav> ) 2. Inside of that, create an unordered list. Unordered lists show up as bullet points (as opposed to ordered or numbered lists, which is what you are looking at right now). The tag for them lists is <ul>.

3. Inside the new <ul></ul> tags, we have to place <li> tags for each line item or bullet point (in this case, signifying new pages). For our website, we will need three.

4. Inside of that, we will place the links to the other pages. The format for that is: <a href=”yourpageurl.html”>Your Page Name</a> . The <a> tag signi�es a link. Everything after href= is the address the

link is pointing to. “Your Page Name” is the text that appears on the website.

When all is said and done, the markup for your navigation bar should look like this: <nav> <ul> <li><a href="media.html">Media</a></li> <li><a href="index.html">Homepage</a></li> <li><a href="signup.html">Signup</a></li> </ul> </nav>

As you will notice, the menu items are aligned vertically in the HTML document (as are all elements) and without additional styling, they will merely appear like this:

(https://websitesetup.org/wp-content/uploads/2017/02/unformattedhtml-menu.jpg) However, on websites the navigation is most often aligned horizontally.

This, again, is achieved with some CSS. In your style.css �le, add the following:

li { display: inline; list-style-type: none; padding: 5px; }

The display: inline property makes the links appear next to one another instead of on top of each other. The rest is to make the menu look a little better. For example, list-style-type is to remove the dots that are usually in front of bullet points and we have also added some space around each item.

(https://websitesetup.org/wp-content/uploads/2017/02/formattedhtml-menu.jpg) Looks much better, doesn’t it? Now let’s add some more styling to the rest of the page.

PS: Right now we only have one page. To use the navigation on all pages, we would have to copy its code to all other pages as well.

Step #5. Apply Colors, Borders and Other CSS Basics While we’re already in the CSS �le, let’s make the rest of the page look better as well. Speci�cally, we want to give the text area a �xed width of 640 pixels, a thick, shaded border, and some background color.

We can achieve this by adding the following lines to our style sheet: article { border-style: solid; border-width: medium; background-color: #CCFFFF; width: 640px; }

Most of these should be relatively self-explanatory. If you are confused about #CCFFFF, that’s a hex color code (http://www.color-hex.com/) that tells the browser which shade of color to use.

Last but not least, we want to add a uniform background color to all of our pages. Because we want this to appear on all pages, we’re going to create a CSS selector for the <body> section.

In addition to that, instead of just assigning a color, let’s add a textured backgrounds. We can get one of those at CSSMatic (http://www.cssmatic.com/noise-texture). Play around with the settings until you’re happy and then click Download Noise Texture to get the �le.

Place it in the same folder as the rest of the website �les.

After that, to apply it as the page background, we use the following CSS: body { background-image:url('texture.png'); }

This applies the �le as a background. Here is the result:

(https://websitesetup.org/wp-content/uploads/2017/02/formattedhtml-paragraphs.jpg)

While it won’t win any beauty pageants at the moment, it’s more important that you understand the principles behind the design process.

If you do that, there is very little you can’t do with some research. (If you want to build a site using WordPress, head over to my homepage (https://websitesetup.org).)

Step #6: Create a Form Next up, we will add a form to our sample website. That way, Charlie and the Roundheads can start collecting email addresses from their fans.

Be aware that in this tutorial we are only dealing with the frontend part of the form. To do anything useful with the data submitted, we would also have to set up some backend technology. Unfortunately this is outside the scope of this article. If you want to look further into this, I recommend starting with PHP. It’s relatively easy to get into and is used by millions of developers worldwide.

What data do we want to collect from the fans who come to the website?

Email, of course.

However, it also makes sense to collect zip codes to �gure out where to go on tour next. Finally, fans might want to leave a message for the band, so we will take this into account as well.

With this in mind, let’s start work on our �rst HTML5 form.

Set up the Email Field First, we will open a new section as we did before. This is where the form goes. Forms themselves consist of labels, inputs and buttons that are surrounded by <form> tags so that’s the �rst thing we will add to our new section.

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel= <link rel="stylesheet" type="text/css" href=style.css> </head> <body> <section> <form action=""> </form> </section> </body> </html>

After that, it’s time to create the �rst input. Inputs are �elds where others can �ll in their data (like an email address) that then gets submitted via the form.

The �rst 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 also going to preface it with Email :. Then we give the input tag a type, which is also email. That way, it will only accept email addresses in the right format.

Email <input type="email" >

Before HTML5, this �eld you would have accepted any old input and you would have had to write some extra code to make sure that the information you received from the user was a legitimate email address.

With HTML5 that is no longer necessary.

Aside from that, we also want to make this a required �eld. To do so we’re going to give it another attribute, that of required. Should a user attempt to submit this form with the email �eld blank, it will respond with an error message saying “Please enter an email address”. The same will happen if the user tries to submit something that isn’t a valid email.

Finally, we also provide a name to identify the �eld, should we end up writing some back-end code. We do this by adding an attribute of name with a value of email. Here’s what it ends up looking like: Email <input type="email" name="email" required>

Add Other Fields Now, let’s go ahead and add �elds for the zip code and the message. It basically works the same, except that the type of �eld is di�erent. After all, it doesn’t make sense to use an email �eld for a zip code, does it? So, for the zip code we use a ‘number’ �eld instead, give it a name and make it required.

Zip Code <input type="number" name="number" required>

Finally, the �eld to accept messages somewhat breaks with the tradition since it doesn’t use the <input> tag, but rather <textarea> . This tag is used for inputs that are likely to span multiple lines, which is appropriate for fan messages yet less so for things like emails, passwords and names. <textarea> can take a whole bunch of attributes. We’re interested in four

of them. Firstly, we want to give it a name. We also want to de�ne some rows and columns to specify how large the text area is going to be.

Finally, we will de�ne whether it is a required �eld or not. All of this happens like this: <textarea rows="4" columns="50"> </textarea>

Now all that’s left is to add a submit button. This is as simple as creating another input type, this time of the type submit and the same value. The value de�nes the text on the button. <input type="submit" value="submit">

All put together in our document, it comes out like this:

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel= <link rel="stylesheet" type="text/css" href=style.css> </head> <body> <section> <form action=""> Email <input type="email" name="email" required> Zip Code <input type="number" name="number" required> <textarea rows="4" columns="50"> </textarea> <input type="submit" value="Submit"> </form> </section> </body> </html>

And here is what it looks like inside the browser:

(https://websitesetup.org/wp-content/uploads/2017/02/unformattedhtml-form.jpg) Not exactly pretty, is it? However, donâ&#x20AC;&#x2122;t worry. We can spruce it up with additional CSS: input { display: block; margin-bottom: 20px; margin-top: 10px; padding: 10px 5px; }

Now it appears like this:

(https://websitesetup.org/wp-content/uploads/2017/02/formattedhtml-form.jpg) Much better, right? Cool, then let’s move on to the �nal chapter: How to add rich media to our website.

Step #7: Include Music and Videos In former days, if you wanted to add music or movies to a web page, you’d have to rely upon slow, bulky frameworks like Flash (https://en.wikipedia.org/wiki/Adobe_Flash) or Silverlight (https://en.wikipedia.org/wiki/Microsoft_Silverlight). HTML5 has e�ectively thrown these out and replaced them with something much better.

For the next bit, we’re going to create a place to publish and share music and videos. Might sound complicated, but it’s actually really easy (as everything else).

But First, Let’s Talk About Codecs To deal with media, we �rst need to deal with codecs. Codecs are compression/decompression algorithms that help make large �les smaller for storage and transfer and then larger again when someone wants to view it.

As I’m sure you know, there are a huge number of web browsers on the market right now and each of these handle playing music and videos slightly di�erently. Therefore, codec support among web browsers is far

from universal as you can see below.

(https://websitesetup.org/wp-content/uploads/2017/02/available-videocodecs.png) For that reason we have to encode our music and movies in a whole bunch of di�erent ways for the best possible result.

Start With Video To get started we create a new �le with the same HTML5 boilerplate we used before and also add a section tag.

At this point we are already ready to add some music and videos.

Fortunately the HTML5 tag for adding videos is exactly what you would expect, which is <video>.

But before we can use it, we �rst need to add our video �les. So far, all we’ve done is add a container for them. Given what we learned about codecs, we’re going to add both H.264 MOV and WebM8 media to our folder named video.mp4 and video.webm.

After that, adding a video is easy. You just include a <source> tag for each video you wish to embed. As an added bonus, we will add a placeholder that tells visitors with old web browsers that they ought to upgrade to something more contemporary. This goes outside the tag. Here’s what it looks like:

<video> <source src="video.mp4"></source> <source src="video.webm"></source> Sorry, your browser doesn't seem to support HTML5 video </video>

Add Audio Now we move on to audio �les. Unlike videos, there are only two codecs to care about:

(https://websitesetup.org/wp-content/uploads/2017/02/available-audiocodecs.png) As youâ&#x20AC;&#x2122;d expect, the tag for audio is <audio> and you can add your sources in the same way as videos. <audio> <source src="song.mp3"></source> <source src="song.ogg"></source> Sorry, your browser doesn't seem to support HTML5 audio </audio>

After that, the entire document comes out like this:

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Media</title> <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel= <link rel="stylesheet" type="text/css" href=style.css> </head> <body> <nav> <ul> <li><a href="media.html">Media</a></li> <li><a href="index.html">Homepage</a></li> <li><a href="signup.html">Signup</a></li> </ul> </nav> <section> <video> <source src="video.mp4"></source> <source src="video.webm"></source> Sorry, your browser doesn't seem to support HTML5 video </video> <audio> <source src="song.mp3"></source> <source src="song.ogg"></source> Sorry, your browser doesn't seem to support HTML5 audio </audio> </section> </body> </html>

And that’s it. The basic requirements of the site have been ful�lled. All it took was a text editor, a handful of �les and a few lines of code. Pretty cool, right? Told you you would be able to follow along.

Summing Up In this article, you have learned the basics of writing web pages in pure HTML. We have talked about what HTML is exactly and why it makes sense to learn to use it in the real world.

Besides that, you have learned how to create a basic HTML template, �ll it with content and enhance that with CSS. We have also dipped our toes in adding linked navigation, forms and rich media.

With the basics covered, you are now ready to start exploring further on your own. By adding more HTML and CSS knowledge to your repertoire

you will be able to do more complex maneuvers in the future and build more powerful websites.

If you’d like to download the entire website we created above, you can do so here (https://websitesetup.org/wp-content/uploads/2014/07 /roudheads-website.zip). For more information on HTML5 support in di�erent browsers use this website (http://caniuse.com/) (thanks to Ted Goas (http://www.tedgoas.com/)) There’s also an animated video below on the topics of this tutorial.

However, �rst we want to hear from you. What did you �nd most useful in this tutorial? How are you going to use it? Any other thoughts? Let us know in the comment section below!

Update 2016, Feb: People behind www.webucator.com (http://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 di�er signi�cantly from one browser to another. There is even a site that helps web developers to �nd out which feature is supported. It’s aptly called “Can I Use (http://caniuse.com/)“. A big “thank you” for the addition goes out to HTML5 veteran Ted Goas – http://www.tedgoas.com/ (http://www.tedgoas.com/)

HTML5 Beginner's Guide

Become a Web Developer in 7 Days (FREE COURSE) Email Address

johndoe@example.com First Name

John

Register Over the next 7 days, Iâ&#x20AC;&#x2122;ll start sending you straightforward & actionable advice on how to set up a good looking website with minimal costs. Only 1 email per day. No Spam. I promise

+

40 comments

Leave a Reply Your email address will not be published. Required ďŹ elds are marked *

Start typing...

You may use these HTML (HyperText Markup Language) tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b>

<blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Name * E m ail * We b site

Post Comment

Sara Szabo March 11, 2015 at 7:14 am (https://websitesetup.org/html-beginnersguide/#comment-20471)

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

Reply

Robert Mening March 23, 2015 at 12:47 pm (https://websitesetup.org/htmlbeginners-guide/#comment-21077)

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

Reply

Daniel Faulkerson November 28, 2015 at 6:13 am (https://websitesetup.org /html-beginners-guide/#comment-44243)

Hi Robert, how to upload? Even I have all that tutorial and all I need is to upload. But I don’t know how.

Reply

Robert Mening December 30, 2015 at 10:50 am (https://websitesetup.org/html-beginnersguide/#comment-47621)

Hi Daniel, You can do that via FTP. If you’re using Bluehost, here’s some guides (should be similar to all web hosting providers): https://my.bluehost.com /cgi/help/2237 (https://my.bluehost.com /cgi/help/2237) https://my.bluehost.com /cgi/help/upload-site (https://my.bluehost.com /cgi/help/upload-site) https://my.bluehost.com /cgi/help/264 (https://my.bluehost.com /cgi/help/264)

Reply

Liz Long March 26, 2015 at 2:19 pm (https://websitesetup.org/html-beginnersguide/#comment-21274)

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

Reply

Robert Mening March 26, 2015 at 2:25 pm (https://websitesetup.org/htmlbeginners-guide/#comment-21275)

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

Reply

Dianne Millius October 16, 2015 at 10:43 pm (https://websitesetup.org/html-beginnersguide/#comment-39603)

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

Reply

Stefanos March 25, 2015 at 2:04 pm (https://websitesetup.org/html-beginnersguide/#comment-21206)

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.

Reply

Robert Mening March 26, 2015 at 11:20 am (https://websitesetup.org/htmlbeginners-guide/#comment-21269)

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 – https://websitesetup.org (https://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

Reply

Björn Steck (http://www.bjornsteck.com) April 10, 2015 at 1:59 pm (https://websitesetup.org/html-beginnersguide/#comment-22138)

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

Reply

Robert Mening April 10, 2015 at 10:07 pm (https://websitesetup.org/html-beginnersguide/#comment-22160)

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

Reply

Björn Steck April 19, 2015 at 12:11 pm (https://websitesetup.org/htmlbeginners-guide/#comment-22707)

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

Cheers

Reply

Zac April 17, 2015 at 2:08 pm (https://websitesetup.org/html-beginnersguide/#comment-22588)

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!

Reply

David August 31, 2015 at 12:08 pm (https://websitesetup.org/htmlbeginners-guide/#comment-34747)

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

Reply

Dee July 10, 2015 at 4:40 pm (https://websitesetup.org/html-beginnersguide/#comment-30386)

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

Reply

Robert Mening December 30, 2015 at 10:51 am (https://websitesetup.org/htmlbeginners-guide/#comment-47622)

Yup, my bad

Reply

Dee July 10, 2015 at 4:41 pm (https://websitesetup.org/html-beginnersguide/#comment-30387)

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.

Reply

Megan August 13, 2015 at 10:04 pm (https://websitesetup.org/html-beginnersguide/#comment-33181)

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.

Reply

Nathan December 1, 2015 at 8:47 pm (https://websitesetup.org/html-beginnersguide/#comment-44578)

Thank you so much for this

Reply

Jonathan Flynn December 21, 2015 at 4:08 am (https://websitesetup.org/html-beginnersguide/#comment-46696)

Hi Robert, Iâ&#x20AC;&#x2122;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!)

Reply

Robert Mening December 30, 2015 at 10:48 am (https://websitesetup.org/htmlbeginners-guide/#comment-47620)

Hi Jonathan, Thatâ&#x20AC;&#x2122;s doable. Just create two different root folders. One for WordPress and one for HTML version.

Reply

Alisa January 4, 2016 at 4:21 pm (https://websitesetup.org/html-beginnersguide/#comment-48194)

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!

Reply

Robert Mening February 13, 2016 at 11:54 am (https://websitesetup.org/htmlbeginners-guide/#comment-52374)

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”

Reply

Pingal Pratyush January 8, 2016 at 6:09 am (https://websitesetup.org/html-beginnersguide/#comment-48621)

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

Reply

Robert Mening February 11, 2016 at 11:42 am (https://websitesetup.org/htmlbeginners-guide/#comment-52197)

Ha Pingal Love your comment, will do so!

Reply

Abhinav Kshitij January 19, 2016 at 6:07 am (https://websitesetup.org/html-beginnersguide/#comment-49918)

Rob, Great tutorial! I made my first HTML doc with your help.

Thanks a ton!

-Abhinav

Reply

Andrea April 2, 2016 at 6:53 pm (https://websitesetup.org/html-beginnersguide/#comment-56229)

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:

Reply

Jacque May 11, 2016 at 9:17 pm (https://websitesetup.org/html-beginnersguide/#comment-59076)

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

Reply

Robert Mening May 14, 2016 at 12:19 pm (https://websitesetup.org/html-beginnersguide/#comment-59268)

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

Reply

sara August 18, 2016 at 12:05 pm (https://websitesetup.org /html-beginners-guide/#comment-66363)

I have the same problem too. Help me please

Reply

David Lecount May 15, 2016 at 7:40 am (https://websitesetup.org/html-beginnersguide/#comment-59327)

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

Reply

Jenifer @ Bharat Travel (http://www.travelbharat.in) July 15, 2016 at 9:44 am (https://websitesetup.org/html-beginnersguide/#comment-64235)

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

Reply

Tom Wins September 24, 2016 at 10:59 am (https://websitesetup.org/html-beginnersguide/#comment-68568)

You know you won’t be a coder when stuck on step 3. I hate my brain.

Reply

Cheryl Folly September 25, 2016 at 8:46 pm (https://websitesetup.org/htmlbeginners-guide/#comment-68636)

Dont worry Tom, there was a mistake in step 4 but I did have someone to help me through that. I am a complete novice()and blonde) and if I did not have someone to help me though this I would be in your shoes. However, once you start understanding what you need to do it becomes clearer. Do not give up!!! All will be revealed eventually.

Reply

seran the coder October 25, 2016 at 10:17 am (https://websitesetup.org/html-

beginners-guide/#comment-70485)

lol…….

Reply

Tyler Duff November 12, 2016 at 7:01 am (https://websitesetup.org/html-beginnersguide/#comment-72120)

I am finishing up with a degree in web development next semester and was contemplating creating websites for small companies. In your opinion what is a better route for creating modern websites for companies. Should I use raw HTML, CSS and so on or should I use WordPress to create them. Would love to hear your opinion on the topic.

Thanks, Tyler

Reply

Robert Mening November 24, 2016 at 1:04 pm (https://websitesetup.org/htmlbeginners-guide/#comment-73088)

Hi Tyler, While I’m a big fan of *raw* HTML & CSS, I’d still use WordPress to create sites for clients.

Why? Because it’s a content management system = your clients can add/remove/change content without your help. It’s way more convenient from a client perspective, too.

Reply

Timothy February 19, 2017 at 7:40 am (https://websitesetup.org/html-beginnersguide/#comment-76642)

Hello Robert What can I do so that my html form can send me an email each time a visitor fills in the form?

Reply

melissa April 2, 2017 at 4:44 pm (https://websitesetup.org/html-beginnersguide/#comment-78491)

Great tutorial. Really easy to follow and engaging text instruction. I’ve tried learning this previously and they overcomplicated it, but you got it just right!

Reply

Teodoro April 25, 2017 at 5:21 am (https://websitesetup.org/html-beginnersguide/#comment-79072)

Hello, This article is well explained. I didn’t know HTML5 has this many functions. Thank you for your teaching.

-TQ

Reply

125,000+ WEBSITES AND COUNTING… WebsiteSetup.org tutorials have helped to launch more than 125000 websites with the support of

Want to create your own website? The easiest way is to start it with WordPress. Just go to my homepage and start from "Step 1". #1. Join my Facebook page (https://facebook.com/websitesetup.org/)

#2. Follow me on Twitter (https://twitter.com/robmening) #3. Email me: rob(at)websitesetup(dot)org

- Robert Mening

WHO HAVE I HELPED SO FAR? With the help of WebsiteSetup.org, thousands of people have managed to start a blog (https://websitesetup.org/create-blog/) or build a website (https://websitesetup.org/). Some of them include: Freelancers Small business owners Start-ups Bloggers & Creative persons (writers, photographers, artists) and many, many more

I can help you too!

© Author: Robert Mening (http://twitter.com/robmening). Copyright: How to Make a Website, 2017.

P.S. I don’t offer web development services; this site is put together for informative and educative purposes only. Earnings disclosure: I’m affiliated with Bluehost and some website builders (that’s how I keep this site up & running).