To start off my weekly web development blog I’m going to create a series of tutorials starting off with HTML5. We will go straight from the beginning of creating a website and lead up to more advanced features as the tutorial progresses. This is the first time that I have created something like this before so any feedback and where I can improve would be greatly appreciated!

First of all you are going to have to download a text editor so we can start writing some code. I’m going to recommend Notepad++ it’s FREE and is in my opinion the best one out there for getting started. Once you have got that downloaded and installed open up Notepad++ and create a new file.

From the code above we firstly have to declare our document type and we do that by setting the HTML5 doc type. This tells the browser that we are using HTML5.

The next part of the code is the head and body. The head is for things like the page title, description, CSS, JavaScript and many other things which we will go more into the latter in future tutorials. The body section is for the website’s actual content (what you see when you load the page). We then wrapped both of them tags inside a <html> tag again to tell the browser that we are using HTML.

Now we will add some properties to the head section of our page. We are going to add a title, meta tags (information to tell search engines about our page).

The <title> tag is (you guessed it) the page title. That’s the text you see in a tab or the main heading on a Google search (in blue). This is a really important part of any web page and can have quite an affect on your websites SEO (Search Engine Optimisation). The next tag is meta and then we set the name to description for one and keywords for the other. Hopefully that’s pretty self-explanatory. You set the values for those tags with the content value.

We will now move onto actually adding some content to our body (what the end user see’s when they load the page).

I’ve added some new HTML markup into the body section. The first tag is the <h1> (Heading 1) which is the most prominent tag on your page. If your website was for example about books by a certain author then setting the value to that would be a good idea. The second tag is a paragraph and this is where you would of course place all of the paragraphs. The third new tag the <a> (Anchor) tag. This is how you create links within a web page. The href value is where you set where the user goes when they click on that link. The text between the <a>This text</a> is what the user sees. The last tag is the <img> (Image) tag. This is how you place an image within your website. The src attributeis the path to the image and the alt attribute sets the text when a user hovers their mouse over the image.

To test out your code just type (copy and paste if your lazy) into Notepad++ and save the file as firstpage.html and then open the file with your chosen web browser (Chrome, FireFox etc).

That’s all for today but I will in the next blog post start going into how to make this look much better by using CSS (Cascading Style Sheets).