Let’s Create Our First Website

First of all, I would like to take this opportunity to say HAPPY NEW YEAR! I am ready for 2014 and hope its an amazing year for us all. This year, I aim to post more frequently and I hope I can share my knowledge and help some people out with programming. I also hope to increase my own skills so I will have more to share.  But enough of the “Resolutions”, let’s get to work.

This blog post is to show you all how easy it is to make a website. With time, more detail can be added to make the website look fancy and professional but we will start small. There are many languages in which websites can be written in – such as HTML, CSS, XML, PHP, etc. But we will write our first website today in HTML.

Websites are written in plain text so open up a text editor such as Notepad or TextEdit to get started. Programming is very case sensitive and some languages are even sensitive to white spacing – so type what is below character for character in your text editor. It is as simple as:

<!DOCTYPE html>
< html>
< body>
< h1>This is my Heading</h1>
< p>This is my paragraph.</p>
< /body>
< /html>

The words in the angle brackets are called tags. The <!DOCTYPE> declaration must be the very first thing in your HTML  document, before the <html> tag. It is not an HTML tag; it is an instruction to the web browser about what version of  HTML the page is written in. It specifies the rules for the markup language, so that  the browsers render the content correctly. You should add the <!DOCTYPE> declaration to your HTML documents, so  that the browser knows what type of document to expect.

The HTML tags must follow syntax with a start and end tag which may have attributes or have an empty content. The <html> tag defines the root of an HTML document, with </html> as the end tag. <body> and </body> tags start and end the body of the HTML file. The heading tag run from <h1> to <h6> which vary the size of the heading font. The paragraph tag is indicated by <p> and again it must be closed with </p> to indicate the end of the paragraph

Now save this as “First.html” – or any other file name, it just needs to have the “.html” or “.htm” file extension in order for it to be opened as a website. Go to where this file is saved and double click. It should open up in your web browser as a website showing a heading and a paragraph – like below:

My First Heading

My first paragraph.

Perfect!! With time, we can add colours, change the font and styles, and even add our own personalities to the websites. If you have any questions or are unclear about anything regarding this post, feel free to contact me via Facebook or Email – the information can be found in the About section of this page. I hope you enjoyed reading this and hope I see you soon.

For a full reference on all HTML tags: Visit: http://www.w3schools.com/tags/default.asp

Thanks for reading,

Funmi Adewole