Creating a website (for beginners)

If you are a beginner to creating a website, this is for you!

First Thing’s first

If you are new to web design and HTML, I want you to read this whole article. It is very handy. But first, follow these steps to see what HTML looks like:

– Right-Click on this web page right here —-> <— (right there).
– Select “View Page Source” (or “View Source” in Internet Explorer).

The “source” is all the HTML code that I have written either by hand, that was generated with Php, or that was created in a WYSIWYG (What You See is What You Get) editor.

What do I call my web pages?

When you are creating a website, you can name your web pages whatever you want. However, you need to use an appropriate extension on your web page so that the web server will recognize it.

Here is a list of some important page names, and some not so important page names:

index.html – This is the name of a page that most webservers recognize as the default page to load when a website is loaded. For example, when you go to www.google.com, you are actually going to www.google.com/index.html – you just don’t actually index.html unless you manually type it in.

index.htm – This is the same as index.html. The only difference is there is no “l” at the end. Why don’t you tell me why if you find out?

index.php – This is the same as index.html or index.htm – EXCEPT you use .php when you are creating pages with Php code. It does not hurt anything to use .php – even if you aren’t programming in Php.

contact.php – If you create a page where users can see your contact information, you can call it contact.php, or you can call it fried_chicken.php. As long as it has a .html, .htm, or .php extension (there are many other extensions out there in the world too), that’s all that matters.

How do I make Windows show me what extension a file is?

If you are using a Windows computer (like XP, Vista, or Windows 7), then chances are that you can create a file on your computer named “file1.txt” and, all you will see for its name is “file1.” You NEED to change this ASAP so that you do not have naming issues for your web pages. I highly recommend that you follow these steps regardless if you are creating a website or not:

  • On Windows XP, open your “My Documents” folder and click on “Tools” > “Folder Options”
  • On Windows Vista or 7, open your “Documents” folder and click on “Organize” > “Folder and Search Options”
  • Next, click on the “View” tab.
  • Uncheck the box next to “Hide Extensions for Known File Types.”

Now you should be able to view file extensions. If you use Windows XP and those steps didn’t quite work for you, please let me know through email so that I can update this tutorial.

How do I put my web pages on the internet?

To put web pages on the server, you use FTP (File Transfer Protocol). The easiest way to use FTP on a Windows machine is to follow these steps:

  • Open up your “Documents” folder (your “My Documents” folder for Windows XP users).
  • In the location bar at the top of the page, type in the following (exactly – don’t add or change anything):
  • ftp.kaslnetwork.com
  • When you are prompted, enter your username and password and sign in.
  • Now you can drag and drop your files from your computer to the FTP server.

Once you are signed in, you will see a directory called public_html. That is the directory that contains your websites home directory (like yourdomain.com). When you are in FTP, everything you see in that window is on a remote server – NOT on your computer.

Where on the server should my web pages go?
Once you are connected to the FTP server (using the step above), follow these steps:

  • Click on public_html (entering the public_html directory).
  • You will see a directory like yourdomain.com
  • Click on yourdomain.com (entering the yourdomain.com directory).

Any files that you put in the yourdomain.com directory will be viewable by anybody who is surfing the internet. Here is a good way to layout your files and directories:

*NOTE1: Never use spaces in your file or directory names. Always use _ or – when you have multiple words, or just run them together.
*NOTE2: On a web server, file names are CASE SENSITIVE. Therefore, File1.html is different than file1.html

yourdomain.com

  • images
  • frog_picture.png
  • dog_smiling.jpg
  • horseJumping.gif
  • includes
  • database_connection_script.php (if you are using Php web pages (like page1.php (instead of page1.html)), you can include pages into other pages)
  • functions.php
  • random_stuff

your_2nd_domain.com (if you have more than one website)

  • images
  • strangeLizard.png
  • FastRabbit.jpg
  • Crazy_Wierd_Lady.gif
  • includes
  • header.php
  • footer.php
  • connect.inc
  • random_stuff
  • What program should I use to create my web pages?

    You can use any program you want. Here are some examples (for more information, visit http://en.wikipedia.org/wiki/List_of_HTML_editors):

    Non-Free:

    • Adobe Dreamweaver
    • Microsoft Expression Web

    Free:

    See Web Tools at the kaslnetwork.com home page for a list

    How do I create a hyperlink to another page?

    A hyperlink is a bit of text that, when you click on it in a web browser, takes you to a different web page. This is a hyperlink. You can use hyperlinks anywhere you want in web pages. You can also turn images into hyperlinks. Say you want to have users taken to your friends website. Here is how you would do it:

     <a href="http://yourfriendswebsite.com">Your Friends Website</a>
     <a href="http://yourfriendswebsite.com/contact_friend.html">Your Friends Website</a>

    You can also send users to a page on your own website using a relative link (without the http://yourfriendswebsite part):

    <a href="contact.html">Contact Us</a>

    How to I put a picture in my web pages?

    In order to show images on the internet, you need to first upload the image to the web server using FTP.

    • Connect to the FTP server using the method above (or any method you know of).
    • Navigate to your images directory (or whatever you called it. It is recommended that you put all images in an images directory for organization).
    • Drag the image file from your computer into the FTP window into the images directory.

    Now the image is on the internet. You can view it at http://yourdomain.com/images/your_image.png. To put the image in a web page, write the following code:

    If you want to modify your image size or add a border, here are some options you can add:

    <img src="/images/image.png" style="border: 1px; height: 200px; width: 300px;">

    If you want your images to link to another web page, you can turn them into hyperlinks like this:

    <a href="url.com"><img src="/images/image.png" style="border: 1px; height: 200px; width: 300px;"></a>

    To force the link to open in a new window or tab, add target=”blank” – see below:

    <a href="url.com" target="blank"><img src="/images/image.png" style="border: 1px; height: 200px; width: 300px;"></a>


    Comments are closed.

    Post Navigation