001 – Hello World! – HTML/CSS Tutorial
Welcome to my new series of tutorials designed to teach you everything you need to know about HTML and CSS. I want to provide a path to go from being a complete noob to a professional website developer.
We are going to start off by getting a web page to display the words “Hello world!”. This is a common first step for anyone learning any new programming language.
So to get started we need 2 things, an editor and a web server. In order to keep this simple and to ensure that everyone can follow along, regardless of their operating system, we are going to use cloud9 to provide both.
Setting up Cloud9
Cloud9 is a fantastic environment to work in and I personally use it for everything I do on the web because it allows me to work in the same environment, regardless of where I am and what computer I am using.
So to get started head on over to https://c9.io and sign up for a free account. Once you are signed up and logged in click the “Create a new workspace” box. Then you can fill in the workspace name to be whatever you like. I just called mines “tutorial_workspace”. Then just make sure that the HTML template has been chosen as you can see in the image below.
Creating your first web page
After creating your workspace you should be presented with your editor interface. You have the files for your website on the left. A terminal down below and your editor in the main workspace.
What we now need to do is delete the existing “hello-world.html” and “README.md” files so we are starting with a clean directory. Once you have those deleted we are going to create an index file. For those who don’t know, an index file is the default file that is loaded by your web server. So if you go to www.yourdomain.com then the first file it will look for is the index file. In order to create the index file we simply right click on the file browser on the left and click “New File”. We then just call it “index.html” and hit enter and double-click to open the file.
In order to run your new website, you just need to hit the “Run” button at the top of the page and it will start up your server and open your new website.
At the moment you haven’t written any code so the page should be completely blank, so let’s look at writing some basic HTML to get “Hello world!” printed out to the screen.
Writing our first code
The first thing on every page that you have to declare is the “doctype”. The doctype is just a way to tell the browser what type/version of code will be run. So just add the tag seen below to the top of your file.
Next up is the “HTML” tags, which have opening and closing tags. The reason we have both an opening and closing tag here is because it acts as a container for everything inside those tags. The “HTML” tags are tags that are used on every website to contain the whole site. The closing tag is just a carbon copy of the opening tag except it contains a “/” after the opening “<” as seen below.
Inside of the “HTML” tags, we need to define two more standard tags. The “head” tag which holds everything that you generally don’t see on the page. Such as links to CSS files and meta information like the page title etc… Then there is the “body” tag which is used to contain all of the content you do see rendered on the screen.
As you can see I have indented these tags to keep things tidy. The general rule for this is if you are inside a parent tag such as the “HTML” tag here, then you indent your code so that you can easily identify opening and closing tags.
The first thing every web page needs is a title. In order to do this, we need to use another tag. Because this is a title for the browser tab it will go inside the “head” tags as seen below.
Now if you were to refresh your web page you will see the tab now says “Hello World!”.
Next up we will want to render something out to the page. In order to do that we can just type whatever we like inside the “body” tags and it will show.
If you refresh your page now then you should see the words “Hello World!” printed on the screen.
And there you have it… your first website. That wasn’t so hard now was it!.