Coding a Website and it's Home Page
We will be coding this
webpage. I will involve basic html, CSS, and possibly FTP.
Coding a Home Page
1. First off, we're going to code your home page. Take
this
layout, OR, if you want you can, read/follow
this
tutorial on how to make that layout.
2. Open up a new notepad document and name it index.html - This is your home page.
Now copy the code below in your index.html
Where it says Insert title here insert the title that you want to appear at the
top of the internet browser. (E.g. Internet Explorer, Firefox, etc.)
I decided to title mine '' * deep inside...''
3. Now we are going to place the layout onto your home page. (index.html)
Now, upload the layout (provided in step 1) onto your own server,
(photobucket, imageshack etc) then copy the code below in your index.html and paste
the url of the layout where it says LAYOUT URL HERE in the code.
In the code above, it means that you have positioned the layout in the top left hand corner of
your home page. Feel free to position the layout wherever you want. The code I gave you is just a
guideline to help you.
4. Now, we're going to set the index.html aside and finish it off later.
So now open up a brand new notepad document and name it style.css This is your CSS.
(cascading styling sheet)
You can read a tutorial on CSS
here.
To help you, here are some of the main colours used in the layout. I recommend using
these colours to match your CSS.
Light blue (layout background colour)- #ABC8CE
Darker blue - #4F90AC
Pinky red - #AB375C
Dark Purple - #4D006D
After you have coded your CSS upload it to your FTP server. You can read a tutorial on
using Smart FTP Client
here.
5. Now go back to your index.html and paste this code below:
Where it says CSS URL HERE paste the url of your css. E.g. yoursite.org/style.css
For this code, not only will you need to paste it on your index.html but you will need to
paste it on EVERY SINGLE PAGE you make or the pages where you want to have the
css settings.
(e.g colour of text, backgrounds, etc) matching your layout.
So everytime you change your style.css, your pages with the css url code will automatically
change into those new settings.
6. This is optional. But if you want, you can have a sidebar. Copy and paste the code
below, and fill out the information.
The code i've given you above is positioned underneath the layout on the left hand side. Feel
free to change the positioning, width, etc of the side bar. The one i've given you is just
a guideline to help you. It would be very nice of you to leave the credits on the sidebar, as
you're using/reading my tutorial on coding a website/home page.
7. Nearly done - now we just need to insert an iframe! You can read a tutorial on
using/inserting iframes
here!
Here is the iframe code including it's positioning, don't worry about putting in the url yet.
I'll teach you that later on in this tutorial.
The code i've given you is positioned next the side bar. Feel free to change the
positioning, width, height, etc.
8. Now open a brand new notepad document and name it blog.html this is going
to be your blog! It doesn't entirely matter what you name it. You can name it journal.html, diary.html,
updates.html, whatever suits you. But i'll be naming mine blog.html
In step 5 I gave you a code to paste in your index.html where it would have the css
settings. (e.g. colour of text, bold, etc.) Use that code and paste it in your blog.html
9. Now use this template below, and paste it in your blog.html
You can use that template, over and over again, for each blog entry. Feel free to change and
customise the blog template I gave you. Or even create your own. :)
Upload your blog entry to your FTP. You can read a tutorial on using
Smart FTP Client here!
After you've uploaded your blog.html, in step 7, you inserted an iframe. In the iframe code
I gave you it should say ''PAGE URL HERE'' I now want you to replace that with your
blog url. E.g. yoursite.org/blog.html
10. Now just upload your index.html! You should already have your blog.html, and
style.css uploaded.
Coding a Web Page
11. Now i'll teach you how to make other pages. Like a page about you for instance. I think
that it's actually much easier than making a home page. It's pretty much like the blog template I
gave you. Here's an example:
<![CDATA[
<link rel="stylesheet" type="text/css" href="CSS URL HERE">
<h1>about me</h1>
<h2>
Hi there! I'm Tiffany, 14, and my favourite bands are
Taking Back Sunday, Paramore, Silverstein, The Rocket Summer, and Slipknot.
</h2>
]]>
You may want to add extra html codes to your pages. E.g. Image codes, link codes, etc.
12. Now, all we need to do is upload your webpage. To access it, you would use a link
like this:
http://yoursite.com/webpagename.html
Click here to see my coded website/home page!
I hope this tutorial helped! It took me quite a while to write up this tutorial, and
i'd really appreciate it if you gave me some credit! :)