Christian Web Design Blog

Tutorials, tips, tools and free resources!

Archive for the ‘Your First Site’ Category

Basics of making a web site

Posted by admin On September - 2 - 2008 1 COMMENT

While somethings are common to developers, those who are still learning may find the basics to be very unfamiliar. I’ve designated a series of simple tutorials to guide you through the basics of web design, and what you need to know before you can publish your web site.

Here’s a quick glossary of terms you will want to be familiar with:

  • Server: The computer that a server program runs in is also frequently referred to as a server.
  • Serving Software: A computer program that provides services to other computer program, commonly feeding that computer web content.
  • Default page: The first page the serving software will read.
  • Document Root: The directory in the Web server’s file system which is the beginning of the file tree of available files and documents.
  • Local view: Any time your web file is viewed on your machine, without reading from a web server.
  • Publishing: After your web files are loaded to the document root of your web server, they are published.
  • FTP: File Transfer Protocol. The program and protocol which allows files to be transferred across the Internet.

Here’s how to create your first HTML page and link to a contact page. I’ve provided simple step by step instructions and an illustration.

Structure and naming conventions

Or - How the heck does the internet show my page?

Servers are what “serves” your pages to the web. They commonly use an operating system like, Apache, RedHat, or Windows (but not like the one you have on your computer).

So how then does this computer show my page?

I’m glad you asked. First, make sure you refer to the glossary of terms above as you read this post.

The web serving software will automatically look for the default file in the document root. The default file is commonly named something like: index.html or default.html.

This illustration may help explain it to you better:

Example of server request

Example of server request

Creating the Default Page

Now that you know how a server works, you can create your first page!

For more information on Tag basics, see this post.

Open any text editor, like Word Pad, and type in these tags:

<html>
<body>

</body>
</html>

Great! Now save this file in a folder named something like web site. It’s important to get in the habbit of saving often early, in case of system crashes.

Now in between the body tags Type this:

<h2>My great web page</h2>
<p>This is my information here!</p>

Now save the file and open it from your web browser.

You should see this:

My great web page

This is my information here!

What about links?

Ahh yes, Links! Links are what makes the web, well, the web! Most common links are are known as navigation links.  We’ll be covering them here, but there are also external links, which will be covered later, after you master the basics.

Create a new HTML page. Now save it as: contact.html. Now insert this:

<html>
<body>
<h2>Contact us</h2>
<p>123 Happy St.</p>
<p>Happy, Indiana</p>
<p>Phone: 555 555-555</p>
<p>Back to <a href ="index.html">Home Page</a></p>
</body>
</html>

Now double check that the file is saved in the same folder your index file is. Go ahead and open it in your web browser and click on your link.

Impressive isn’t it!

Here’s the link explained:

  • The ‘a‘ tag is an anchor. Use this any time you want to make a link to anywhere on the web.
  • The href attribute is an http reference. That means it will direct your browser to an “http” location. In this case is is going to be something like: http://yourharddrive/documents/web site/index.html. You may be more familiar with: http://www.domainname.com/index.html when you are browsing the web. Either way in our example, the browser is calling the http equivalent to where the document or file is stored in the root, unless the href specifies somewhere else.
  • =”index.html” Everything needs to be in quotations after the equals sign. Otherwise the browser doesn’t read the code right.
  • Finally, </a> every tag needs to be closed. It’s just one of those things. Close your tags by adding a ‘/’ before the tag definition.

You can take this one step higher and link from your index file top your contact file, or create more files like about, or services. At any rate, have fun and relax, because if you’re not having fun it’s not worth it!

Basics of HTML, Your First Site