After posting my first code tutorial I realized that maybe I needed to start from the beginning. I know a lot of people that are interested in learning how to build web sites and learn to write code but there isn’t anything that is beginner enough to make them feel like they CAN do it.
So I’m telling everyone right now that you can and if you have a little patience you will be surprised how fast you can learn. This time I’m starting from the very beginning. Normally I would tell you to have a project to build, but until you get started this may not be easy, so let’s start at the very beginning.
Step One
Open up a text editor. On Windows you should use Notepad. On a Mac you can use TextEdit or Text Wrangler. All of these text editors are free and they won’t add any invisible formatting that will break your work.
If instead you tried to use something like Microsoft Word what you would actually get is a bunch of invisible formatting characters in your file that your browser would have no idea what to do with. Trust me when I say that using a pure text editor with no formatting options is the only way to go. I will introduce you to some of my favorite editing tools in the future, but for now just go with the free stuff that is easy to use.
Step Two
Open up your web browser. If you are reading this you have done that already and are ahead of the class. Gold star for you!
Step Three
Save the empty file from your text editor to your desktop and call it “MyPage.html”
Step Four
Open a new tab in your web browser. Click ‘File’ then ‘Open File’ and pick “MyPage.html” from your desktop.
You should see an empty white screen.
Hurray! You made your first page, you have zero errors and the page displays exactly what you told it to… nothing. As you will learn over time, it’s always good to start with a situation exactly like this one. You didn’t do anything and nothing happened. This would be much better than doing nothing and having something break, a problem that you would then have to solve!
Ok, so let’s get down to the next step. You have the tools, you know where your files are and you know how to test them.
Next we are going to make our page unique. … wait, let’s actually make it a page!
The first thing you need to do is tell your browser what this file is so let’s add our first tag! At the top of the file in your text editor type:
<html>
The language we are going to start with is HTML or Hyper Text Markup Language. It’s not the most powerful language but like I said, we are starting from the beginning.
HTML uses tags to tell the browser software what to do. Most tags have an opening tag and a closing tag with stuff in the middle, much like an Oreo cookie. In this case the <html> tag is one cookie, we will add some extra stuff in the middle and the other cookie which goes on the next line is:
</html>
Can you see the difference? The closing tag has the slash in it indicating that it is a match for the preceding tag with the same name. So right now your file should look something like this:
<html>
</html>
You can go ahead and refresh your browser to see the changes but there won’t be any yet. All we’ve done is told it what to expect in our file, we haven’t given it the good stuff… the icing in the middle, to continue the Oreo analogy.
The next thing you need to know about a web page is that it only has two parts. The ‘head’ and the ‘body’. The head section contains things like the title, formatting information, metadata and other things that won’t display in the browser but are used by search engines and the browser to help understand more about the page itself. Think of this as the first few pages of a book, the ones with the Publisher’s name, the ISBN number and the other stuff that you have never looked at before diving in at page one.
So let’s add these new tags to our file! Add a ‘head’ tag and also a ‘body’ tag between the ‘html’ tags. It should look something like this:
<html>
<head>
</head>
<body>
</body>
</html>
To be honest this is a little ugly, let’s clean it up by indenting our code a little. Typically you intent things that are inside of a tag, and it’s very ok to also add some empty lines to make things easier to read. Maybe something like this:
<html>
<head>
</head>
<body>
</body>
</html>
Much better, now we can see that the ‘html’ tags match and that they surround the ‘head’ and ‘body’ tags. Keeping your code organized will make it easier to work with in the future. So be sure to clean it up as you go because cleaning it up later is really, really hard!
Alright, still no changes in the browser because we haven’t done anything special, so let’s do that now. The first visible thing we are going to add to our page is a bunch of text. So just write a sentence or two inside of your body tag.
<body>
This is some test text that I am adding to my first page!!
</body>
NOW, go ahead and refresh your browser window. You should see your text on the screen! How’s that for simple, you just programmed your browser’s display!
Ok, but let’s make that a little more impressive. Let’s add a title above it! To do this we are going to use another tag called a ‘heading’ and there are a bunch of them. We are going to go with the biggest one, the ‘h1′ tag! Add an ‘h1′ tag to the body of your page just above your sentence and put some text between the ‘h1′ and it’s closing tag.
<body>
<h1>This page is mine!</h1>
This is some test text that I am adding to my first page!!
</body>
Now test your changes. Simple isn’t it? Now I want you to add a few things on your own. The tags are really easy: *don’t forget your closing tags
1. <i> – make text italic
2. <b> – make text bold
3. <u> – underline something
If you want to see what other tags there are here is where you can find the entire list:
Http://www.w3schools.com/tags/
This is a really good place to learn about each tag. If you click on the tags in the list it will take you to a page that gives an example of how the tag is used, tells you what it does and which browsers support the tag.
Take some time to get comfortable with how these tags are explained, you will be using this site often to learn how to use new tags and to see if they do what you think they do.
Keep playing with your page and don’t worry about what it looks like for now, we will make it prettier in the next tutorial. For now just get some stuff on the screen. We will pick up next time by adding some images and moving things around the screen!