Deciding to create a website is exciting, but the process can be scary if you you've never made a site before and aren't a "computer geek." This tutorial teaches anyone how to create a website, without any expensive software or pre-existing technical knowledge. I'll walk you through the whole process, one small easy-to-follow step at a time with plenty of illustrations.
You'll need the following things to create your first website:
Ready to get started? Great! Let's go to Lesson 1 — The Basics!
Let's dig right in! The first part of creating a new website is figuring out what to create a site about. For the purposes of this tutorial we are going to create a site to rent out a vacation home located in New Hampshire's Lakes Region.
Create a folder named "lakehouse" in your choice of locations. This is where we will be storing the files for our website. Open Notepad and type the following. It's OK if it doesn't make sense to you yet, I'll explain it below.
Carefully check your work to ensure that it matches the above exactly. The placement of all the symbols is very important! Now save it in the lakehouse folder you just created with the filename "index.html".
Now open a new browser window and navigate to the file location. For example, if you created the lakehouse folder right on your c:\ drive, you should go to c:\lakehouse\index.html. You should see something very similar to this:
If you had any trouble, go back and check to make sure that you typed exactly what was shown above. If you need to, copy and paste each line under what you typed for comparison purposes.
Let's move on to Lesson 2 — Some Essential Vocabulary.
There are some terms that are important for you to know because we'll be using them throughout the tutorial. Here are a few to start:
index.html. You created the beginnings of your index page in Lesson 1.< and >, are also known as diamond brackets, cone brackets, wickets, chevrons, and funnels. However, most of us know them from school as less than and greater than signs. Every tag in HTML starts and ends with these symbols. On most keyboards they can be found on the period and comma keys.The above are important terms, so it is a good idea to try to commit them to memory.
One last essential vocabulary word is doctype. A doctype declaration tells the browser how to interpret your code. There are many doctypes that do all sorts of different things, but only a few that are used regularly. For our purposes we are only going to use a single doctype, so you can just copy and paste it into your index file in the appropriate location:
Just copy the above at the very top of your document, replacing the line. If you are writing your website in English, don't worry about what it means or what all the parts are—that is a topic for a more advanced tutorial.
If you are writing your website in another language, you should replace the instances of "en" with the code for that language. For example, the code for Spanish is "es", Japanese is "jp", and German is "de".
Let's move on to Lesson 3 — Adding Text & Links.
If we're going to entice someone to rent our lake house, we better describe it! Let's add the following to our file, right after the
New England Lake House For Rent
Picture yourself on your next vacation in a spacious 3-bedroom home on beautiful href="http://en.wikipedia.org/wiki/Lake_Winnisquam">Winnisquam Lake in central New Hampshire's Lakes Region.
Whether your favorite season is Winter, Spring, Summer, or Fall, you'll be both right in the middle of the action and blissfully secluded on a private, wooded four-acre piece of paradise!
Call 603-555-5555 today to reserve heaven on earth!
Save your file and load it up in your browser and let's see what we have!
Well, that was perhaps a bit anti-climactic... We've got a website, but it's a little boring—more like a slightly dressed-up newspaper classified ad than a beautiful website showing off our rental property. But first things first, let's talk about what we did here.
The header level 1 tag is a tag that, like most tags, consists of an opening tag, , and a closing tag, . Header tags both affect the way text is displayed as well as signal to search engines that important text has been displayed. There are six levels of header tags, from H1 through H6, but you'll probably never use anything beyond H3. H4 through H6 actually produce text that is as small as—or smaller than—regular paragraph text! H1 is the most important tag and you should use it only once on your page. If you use it more often than that, search engines may decide you are "crying wolf" and penalize your ranking.
The paragraph tag also consists of an opening and closing tag. Each paragraph in your text should be surrounded by paragraph tags. These tags help set off each paragraph by placing extra white space before and after the paragraph, like hitting an extra enter after the paragraph.
Link tags are the most important part of the web—without them, we wouldn't have a web at all, just millions of individual web pages with no connections between them.
Link tags are constructed like this: LINK TEXT OR IMAGE
All links start with Wikipedia article on Winnisquam Lake. The opening link tag then ends with "> and your link content follows. Your link can be either text or an image. To get started we're just linking with text. All link tags must end with .
Let's add some life to this site with Lesson 4 — Adding Images.
So far our website is pretty boring, it's just plain text with a big title and a single link. Let's liven it up with some images.
Right click on this image, choose "Save Image As" and save it in your lakehouse folder as house-from-lake.jpg. It looks small here, but it will save on your computer as a much larger image. This particular image is 604 pixels (px) wide by 453 pixels high. We'll need this information in a moment.
Find the line New England Lake House For Rent
Reload your website and you should see something like this:
Our visitor has to scroll down to see the text, but at least we have an image.
The code to add an image is pretty simple. As a base, it's only /> at the end of the tag.
There are two more important parts to an image. The first is the style. This tells the browser how to display an image. In our example we gave only the most basic instructions—width and height. Later on we'll learn how to add borders and wrap text around our images. Although images will display without any styles specified, to be "valid" HTML, an image must have its height and width declared, so you should always do this.
You can change the size of an image by specifying a different height and width in pixels. For example, at the top of the page I instructed the browser to display the 604 pixel wide image at only 150px wide.
If you resize a particularly large image (like those produced by modern digital cameras) using only the browser, it could take a long time for your page to load. A better idea is to use an image-editing application to resize your image to the size you want to display on your page. Most digital cameras come with software that will allow you to do this. There are also many sites online where you can do this for free, including:
You've created your first website complete with an image and a link! If you were desperate, you could stop here and upload it. But it's not particularly attractive—we should add some formatting.
Let's move on to Lesson 5 — Basic Formatting.
Back in the early 1990s we could get away with a simple website like the one we've created so far. But today web surfers expect a little pizzazz... but we have to be careful not to give them too much or we risk hiding the forest in the trees!
Since this is a Notepad-only tutorial and we're not using an image-editing application like Photoshop (that's an entirely separate tutorial!), we will focus on what you can do to make your site look attractive without needing an advanced degree in graphic design or web development.
Good-looking websites generally have a nice color theme consisting of two or three colors that work well together. Here are some colors that you should generally avoid:
So what can we use? I am partial to blue themes, and since our sample site is for a house located on a lake in the woods, I've decided to go with a blue/green theme I found on Kuler, an Adobe.com website. This particular theme is called "forest and sky." Here's what it looks like:
You can use Kuler to get ideas for a color theme for your own site. Other sites that offer assistance in selecting color themes include:
Another idea is to take a trip down to your local home improvement warehouse and browse through the paint chip samples. If you find one or two you like, take them home and, using some of the sites above, figure out what the color codes are for the most similar web colors.
If you happen to know for a fact that a large number of your visitors may be less tech-savvy and may have older computer equipment, you may wish to design for an 800 pixel-wide monitor.
We are going to design our site so that it fits on a 1024 pixel-wide monitor, which is a fairly standard minimum these days. Studies have shown that people don't like to scroll much and that they wander away from long pages of text, so try to keep your page length for each page to less than two "pages," or screens of information unless it is absolutely necessary to have a longer page. This is not a set-in-stone law, just a guideline, so don't panic if one of your pages is three screens long and you just can't move any information off of it to another page.
Since this is a beginner tutorial, I've designed the tutorial itself only in Notepad to demonstrate that it can be used for a fully-functional site. We are going to use a similar design for our sample site, but with different colors. When you design your own site you can draw it out on paper to get an idea of what it will look like. Here's a what our site will look like:
I'm going to stick to the two screen guideline for this lesson—Let's go on to a new page for Lesson 6 — Using Cascading Style Sheets.
Cascading Style Sheets, or CSS, are a big part of what makes the web look the way it does today. They are files that HTML developers create to help keep the look and feel of a site consistent across the whole site. They also make site-wide changes much easier than opening every file and changing it individually!
For example, if you wanted to change the background color of your website, you would open your style sheet file and change only six characters and that would change the whole site. Pretty convenient if you have a site with dozens of pages!
There are three types of CSS styles: External, Internal, and Inline. They are processed in that order. So you can over-ride an external style with an internal style and both external and internal styles can be over-ridden by inline styles.
We need to tell the browser where to look for the external style sheet. To do this, we add a link meta tag to our HTML file. Open up your index.html file and add the following right above the tag.
This tells the browser that we are referencing a style sheet and that it is named styles.css and is located in the same folder as our HTML file (if it were located somewhere else we'd use a different path).
This should have made no visible changes—yet—to your web page, but refresh it just to make sure.
Now open another copy of Notepad (you can have multiple copies open at the same time) and type this:
Save the file as styles.css in the same folder as your index.html file and refresh. The page should have changed to look like this:
Did it work? Let's move on to Lesson 7 — More CSS Formatting.
Our drawn sample for the concept site has the content of the page inside a centered white box with a dark green background. The color code for the dark green in our theme is 5a7302. To create a centered white box we need to create something called a div. We do this with the tags.
Go to your styles.css file and add a blank line at the bottom of the file and, below that, the following:
While we're at it, we're going to make the image 60% smaller, so open the index.html file and change this line:
To this:
362px;height:272px;margin:8px;" alt="View of House From Lake" />Load or refresh your site and you should see something like this:
Here is what we did with the new code:
border: 3px solid #5a7302, but for beginners it is easier to just write out all three instead of remembering what order in which to put the commands.We're getting there, but we still need to add links and format a little more text. Let's move on to Lesson 8 — Lists & Floats.
To match our drawn sample we need to add some links next to the image. In order to accomplish this we are going to utilize an unordered list and we'll float the content image and the list so they appear next to each other.
Go to your styles.css file and add a blank line at the bottom of the file and, below that, the following:
Now open your index.html file and add the following after the image line:
And change the image line so it looks like this:
float:left;" alt="View of House From Lake" />Load or refresh your site and you should see something like this:
Here is what we did with the new code:
An unordered list is a typical list with each item preceded by a bullet, like the one in our sample site. You create a list by starting with and ends with . The list finishes up with a closing tag. Our list inherits the styles we specified in the lists div in our styles.css file.
You can also make a numbered list, though we won't need that for this site. To create a numbered, or ordered list, use instead of . By default an ordered list uses regular Arabic numbers: 1, 2, 3, 4 for each item, but if you need to use a different numbering (or lettering) system, that is also an option.
You probably noticed that the link for the Contact Us item in our list looked a little bit different from the other links. Because this tutorial does not cover creating forms, we're just going to have a link for interested people to email us. An email link requires the text mailto: inside of the link. So an email link looks like this:
We're just about done! Let's move on to Lesson 9 — Finishing Touches.
We have three more things to do to finish up this site: Move the text down under the image and format it, change the color of the Winnisquam Lake link, and format the "Call Today" call to action.
When you create a floated item, text just wraps around it—or sometimes disappears completely underneath it! There are several ways to work around this, but we're going to use the simplest. Open your index.html file and make the following change:
Refresh the page and you'll note that the paragraph we changed now appears where it belongs, below the photo. There are three options for the clear property: left, right, and both. If you select both, as we did, the item you are modifying will appear below all other items that come before it in the code (unless you have some fancy code in there to circumvent this). If you select left or right, it will only clear items on the left or right, respectively.
Our paragraphs bump up against the edges of our 800px wide content div. In order to resolve this, add the following to the bottom of your styles.css file:
That added a margin of 8 pixels on either side of all of our paragraphs. I chose 8 pixels to match the margin we added previously to the photo. After looking at what the text looked like, I decided to also increase the font size by 25%, since there was so little of it on the page.
Now add the following to the bottom of the styles.css file (there is a dot between the p and the "call to action" in the first line, make sure not to forget it!):
Let's add the code first. Open your styles.css file and add the following to the bottom:
In the last lesson we formatted the big links next to the photo. Because they are obviously links, we were able to eliminate the underscore without risking visitor confusion. However, we don't want to do that with the link that is in the paragraph text because we would like it to stand out from the rest of the paragraph.
Right now the link in our regular paragraphs (the one to Winnisquam Lake on Wikipedia) just has the default link styles. We're going to dress it up a little bit. We'll leave the underscore so that it is easily identifiable as a link, but change the color. For the "hover" state, we'll change the text color, background color, and remove the underscore.
Now the site looks like this:
If you move your mouse over the link to the Wikipedia article, you'll see that it changes according to our specifications.
The first page of the site is finished! Let's skip ahead and assume we've finished the other pages as well (the photo gallery, a page listing available rental times, and a page describing local attractions). Now all we need to do is upload it, so let's move on to Lesson 10 — Uploading!.
Now that our site is completed and ready to go, we need to upload it. I'm going to assume that you have alread established a web hosting account. Make sure you have the following information ready:
We will be using FileZilla version 3.3.1 for this tutorial. You can obtain it for free from http://filezilla-project.org/ - just select the right version for your operating system, download it, and install it.
Start up FileZilla and at the top of the window you'll see something that looks like this:
Enter your FTP Server address in the first box, your username in the second, and your password in the third. Unless you have been given a special port number, just ignore the fourth box. Now click the "Quickconnect" button and you will be connected to your server.
Once you are connected, the lower panes of the FileZilla window will change to show the files on the server. On the screen capture below, note the areas marked with the numbers "1" and "2". The pane marked with a 1 is your local computer. The pane marked with a 2 is your web server. In the first pane navigate to the location where you have saved your files. In the second pane, navigate to the folder where you will store your files. Your web host will give you the name of this folder. If they have not given you a folder name, check to see if there is a folder named public_html, wwwroot, or httpdocs.
The rest is simple, just click on the files in the first pane and drag them over to the second pane. You can shift-click and drag multiple files at once, if you'd like. Once each filename appears in the second pane, your website is online!
Now open your browser, navigate to your web address, and behold your first website!
