|
Making A Web Site from Scratch By: Robert Gillen 04/20/2001 Saturday, May 10, 2008
This tutorial will take you through the process of making a 3 page Website from scratch, without any editors or third party programs. You will learn the basic foundation of a Website and how to use tables to control the layout. All actions will be in green so you know when you should be doing something. This tutorial was developed in Windows 2000 using Internet Explorer 5.5 and is designed for beginners.Getting Started Notes:
OK, let's get started. For this tutorial we will make a basic Web site with no graphics, we'll only use Tables, Text and Colors. You can import your own graphics once finished if you want to. This is the layout for the Web page we'll be creating:
Spot 1: This spot is for the menu and maybe some extra links to your friends. Spot 2: This is the content area. This type of layout is really common and can be made to look very different with a little imagination. You can use this same layout for your complete site, it will help keep the look consistent. STEP 1: Directory creation... 
... Right-Click on your Desktop and choose New Folder, then name it Home. The folder doesn't have to be on your desktop, but for this tutorial it will be.
STEP 2: File creation... ... Double click your new folder so you're inside of it and right-click. Choose New File and name it index.html.
STEP 3: Open file... ... Double click your new index.html file so it's open. You will see a blank screen and that is where your HTML coding will go. STEP 4: The foundation... ... Now let's get into the HTML part of your page. Below is the basic foundation of every Web page. They all start the same and use the same coding, just put together differently, like a puzzle. The foundation of every Web page: Here is where it all starts. Select the code below and Copy (Ctrl+c) and Paste (Ctrl+v) the code below into your index.html file. <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> <!-- Start Site Content --> <!-- End Site Content --> </BODY> </HTML> Now let me explain what each part above is for. <html> This is the start HTML tag. This tag starts your Web page. All HTML tags have a start and ending tag. If you look above you will see <HTML> start the code and </HTML> end the code. <HEAD> - HEAD Tag. This tag starts the header of your Web page. The HEAD tag contains the Title tag and META tags. The HEAD tag also has a starting and ending tag. <TITLE> My First Homepage </TITLE> - TITLE Tag. This tag gives your Web page a Title and always goes within the HEAD tag. With HTML you can place many Tags inside of other Tags. Name your page My First Homepage. </HEAD> - End of the HEAD tag. <BODY> - Start of the BODY tag. Within the BODY tag is where you assign the link and background colors, we will do this later. After the BODY tag is where all the actual content is put. You can place anything within the BODY tag like text, graphics, and movies.
</BODY> - Ends the BODY tag </HTML> - Ends the HTML tag and Web page. Easy enough right? You now have your Webpage built and just need to add content. The first part of content is the layout, Step 5 will get you started on the layout using tables. STEP 5: Adding the BODY atributes... This is how you control the text, link, background, and active link colors. You use HEX color codes for HTML, you can find all the color codes here if you don't know them. Copy and Paste the BODY tag below over your BODY tag. <body BGCOLOR="#FFFFFF" TEXT="#000080" LINK="#0000FF" VLINK="#800000" ALINK="#008000"> Code Explanations: BGCOLOR="#FFFFFF" - This will make your background color white. TEXT="#000080" - This will make your text color Navy Blue. LINK="#0000FF" - This will make your link color bright Blue. VLINK="#800000" - This will make your Visited link dark red. A Visited link is a link that has already been visited. ALINK="#008000" - This will make your Active link green. ALINK is what happens when someone clicks a link. STEP 6: Adding your layout... ... We're going to use one main table to control the content for this page. Copy the code below and Paste it in between your beginning and ending BODY tag. <DIV ALIGN="center"><TABLE WIDTH="590" HEIGHT="0" CELLSPACING="1" CELLPADDING="1" BORDER="0"> <TR> <TD> <!-- Start Side Content --> <!-- End Side Content --> </TD> <TD> <!-- Start Middle Content --> <!-- End Middle Content --> </TD> </TR> </TABLE></DIV> To make sure our new page is very compatible with all browsers and screen resolutions, we will make our Website 590 pixels wide. This guarantees that everyone will be able to view your Web page the same way. You're index.html file should now look like this: <HTML> <HEAD> <TITLE> My First Homepage </TITLE> </HEAD> <body BGCOLOR="#FFFFFF" TEXT="#000080" LINK="#0000FF" VLINK="#800000" ALINK="#008000"> <!-- Start Site Content --> <DIV ALIGN="center"><TABLE WIDTH="590" HEIGHT="0" CELLSPACING="1" CELLPADDING="1" BORDER="0"> <TR> <TD> <!-- Start Side Content --> <!-- End Side Content --> </TD> <TD> <!-- Start Middle Content --> <!-- End Middle Content --> </TD> </TR> </TABLE></DIV> <!-- End Site Content --> </BODY> </HTML> Save your page here and if you want to view it to see how it looks; use your Web browser to open it. I recommend Internet Explorer but use Netscape if you must. To view your page: In your browser go to File and then Open. Click Browse and then locate the index.html file you created above. So, how does your page look? What, it's blank? That's good, It's suppose to be blank 
This is your foundation and layout, we haven't added any actual content yet. So if you have a blank scren everything is fine. Believe it or not we're almost done with your first page. OK, you finished the first part of your page. Go ahead and pat yourself on the back and then put it in low gear we'll get into some bumpy road ahead  |
|
Join Today - Sign-In -
Affiliate Program - About Us - Privacy Statement - Newest Images - Site Map - RSS - Blog
GraphicsFactory.com is Celebrating 11 Years Online!
Copyright © 1997-2008 GraphicsFactory.com. All Rights Reserved.