HTML Basics-Workspace Setup

Now before we get started the first thing I want to do is to set up our workspace. I’ll be working here on a windows but will be using very basic tools to build our sites. So, you should be able to set your system up and follow along with me, no matter what operating system you are using.

Now first of all I have got the working files right here on my desktop. You can put them wherever you like, just make sure they are convenient and you can find them and inside this folder you can see that I have a folder for each one of the chapters and they contain the files that we will be using as we go through the lessons.

I’ll just let you know whenever I’m going to be opening up a file from here. Down at the bottom of the chapters I have a completed site sample folder and this folder contains a copy of the finished website that we are going to be building.

Now to build webpages we really only need two applications, we need a program to write and edit text files and we need a browser to preview them. Here I’ll be using the notepad for writing my files, now if you are using a mac you could chose to use text edit which is a very similar program and both of these programs actually come free with the operating system. For my preview browser I’ll be using firefox, you can chose whatever browser you want but firefox is also free for both the mac and pc platforms. Now we are ready to start our first web page. 

Let me add a little bit of text so that we have something to see on our page. 

I just put up here “my first web page…..!” and now let’s save our new html document.

Now in general we can use whatever name we want so, I’m gonna name this file first page, and we need to pay attention to the extension at the end of this file name, instead of using a txt extension I’m gonna either use htm or html extension. Now it doesn’t really matter which extension you choose. So we just save it in my chapter 1 folder so that I can find it. And now we have our first basic web page created. Let’s go see how it looks.

..........And there we see how our page looks !