All You Need is a Computer and Notepad
If you create a static HTML website, you don't actually need any software. You can make the site right from your computer for free using Notepad or TextEdit (Mac).
NOTE: If you're not interested in manual creation, skip here to learn more about WordPress and other website creation options.
Creating a Basic HTML Web Page
Open your text editor and insert the following code. Just copy and paste the info below into your empty file<html>
<head>Search Engine Title Goes Here<title>
</title>
</head>
<body>
<p>
This is the body of your website.
</p>
</body>
</html>
Now Save As and make sure you select All Files under "Save as Type" and save the file with an .HTML extension so it looks like index.html. This is going to be your homepage.
Now open this file with any web browser and you should see a clean white page that says This is the body of your website.
Believe it or not, that is all you need to create a basic web page. Now, of course it's going to be incredibly plain and unattractive, but you get the idea.
Notice the line that reads "Search Engine Title Goes Here." That is the title that the search engine displays when your site is listed and ranked in Google, Bing, etc.
This is where you want to insert the phrase that you are trying to target and get ranked for. Be sure to check the link above for help on search engine optimization.
Adding CSS
Now to jazz up your page, you'll want to use CSS. This stands for Cascading Stylesheets and it's a very good way to make sure you use consistent styles throughout your website.It also makes it easy to update your fonts, colors, etc. across all your pages at once.
Don't worry. I know it sounds complicated but I'm going to give you the code and you'll see how easy it is to tweak it.
To create your stylesheet, just open another blank text file and name it style.css. Be sure to save it in the same location (folder) on your computer as your homepage file.
Now add a line before the </head> in your HTML page that reads...
<link rel="stylesheet" type="text/css" href="style.css">
So the code for your index.html page will now look like this...
<html>
<head>
<title>Search Engine Title Goes Here</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>
This is the body of your website.
</p>
</body>
</html>
This tells the browser to look for the stylesheet when loading the web page.
Creating a 2 Column Web Page
Now, let's create a 2 column page using CSS. Below is the code you will paste into your style.css filebody {background: #ffffff; margin: 0; padding: 0;}
a {color: #2b2bf6;}
#container {width: 900px; margin: 0; padding: 0; background: #dddddd;}
#header {width: 900px; height: 150px; margin: 0; padding: 0; border: 0; background: #f346e1;}
#sidebar {width: 200px; height: 400px; margin: 0; padding: 0; border: 0; float: left; background: #f0e811;}
#content {width: 700px; height: 400px; margin: 0; padding: 0; border: 0; float: left; background: #8be0ef;}
#footer {width: 900px; height: 70px; margin: 0; padding: 0; border: 0; float: left; background: #000000; clear:both;}
Notice there are 5 sections to your website...
1) Container
2) Header
3) Sidebar (left column)
4) Content
5) Footer
Most of the sections are probably self explanatory. The Container is the area that holds your site.
If you want the entire width of your site to be 1000, you would change the 900px to 1000px. Just remember to change the size of the rest of the variables so everything aligns.
And the stylesheet defines the width and other variables for each section. If you want to change the background color of the body, you would change #ffffff to another color.
Take some time to tweak the stylesheet how you want it.
So now you can add the following code to your filename.html (homepage) and replace <p>This is the body of your homepage</p> with this...
<div id="container"></div>
<div id="header"><p> Header Goes Here</p></div>
<div id="sidebar"><p> Left Navigation Goes Here</p></div>
<div id="content"><p> Content Goes Here</p></div>
<div id="footer"></div>
So here is your complete homepage code...
<html>
<head>
<title>Search Engine Title Goes Here</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container"> </div>
<div id="header"> Header Goes Here</div>
<div id="sidebar"> Left Navigation Goes Here</div>
<div id="content"> <p>Content Goes Here</p></div>
<div id="footer"> Footer Goes Here </div>
</body>
</html>
This tells the browser to read the style from your style.css file. So each section of your site will use the styles provided in your stylesheet.
Now when you open your homepage, what can you see?...
0 comments:
Post a Comment