How to start in HTML and web design

Computer Hope websiteQuick links

Getting started
Writing basic HTML
Viewing the web page
Displaying images
Understanding directories
Case Sensitive
Posting the website
Setting up a Domain
Web Hosting
Beyond the basics

Getting Started

HyperText Markup Language (HTML) is the primary building block of creating a website. HTML is a very basic markup language and requires memorization of a few dozen HTML commands that structure the look and layout of each of the web pages. Before writing any HTML code or designing your first web page, you must decide on an HTML editor or text editor such as Notepad, WordPad, and even Microsoft Word. What ever editor you decide on using can change if it isn't working for you.

Once you have obtained an HTML editor and are ready to begin setting up your website, think about how you want the page to setup or look, maybe even draw out your ideas. Below, are some early considerations to think about when designing your web page.

  1. How are you going to store all the files? Are all the files going to be in the same folder or directory? If you plan on having lots of different pictures and files its recommended that you store the pages, files, and pictures in separate directories.
  2. Are the HTML files going to be stored as .HTM or .HTML files? There is no advantage or disadvantage of going with .htm or .html; However, it is a good idea to stick with the same extension.
  3. Do you plan on having a template for the page? Are all the pages going to have the overall same look and feel?
  4. How is the navigation going to be handled? Do you feel its better for the navigation menu to be on the left, bottom, or top of each page?

Tip: Realize that your web page will change over time as you find things that don't work. Over the life time of Computer Hope we've changed our complete site several dozen times.

Writing basic HTML

After installing an HTML editor and setting up a folder you are ready to begin creating your page. Begin by creating a file named index.htm or index.html, this will be your start page. All servers on the Internet look for an index file if no file is specified. For example, when typing http://www.computerhope.com, the server is really accessing http://www.computerhope.com/index.htm.

Once you are in the blank index.htm or index.html file, we recommend inserting the below source code into your page. Some HTML editors may automatically place this code in your page for you. If this is the case, or you have a WYSIWYG HTML editor that allows you to design the page and not create the HTML, you can skip to the next section if you're familiar with what this HTML means.

<html>
<head>
<title>My first web page</title>
</head>
<body>
Your web page content goes here
</body>
</html>

The above code is a very basic example of the code that helps make up every web page. As you can see, the section starts of with <html>, which is defining that everything within <html> is HTML code. Next, you have <head>, which is defining the heading of your HTML document. Third, we have the <title> section within <head>, which titles this page being shown. Finally, the <body> section is what contains what is shown on the web page.

Below, is additional code that can be placed in the <body> section of the code to help familiarized you with some of the most commonly used HTML commands.

<center><h1>Welcome to my web page</h1></center>
<hr>
<br>
<p>Hello and welcome to my first website.<br><br>
<b>These are my favorite links:</b><br>
<ul>
<li><a href="http://www.computerhope.com">Computer Hope</a></li>
<li><a href="http://www.google.com">Google</a></li>
</ul>
</p>

As you can see from looking at the above code, you will realize that the basic HTML commands are fairly simple to use. First, we start off with <center>; this is telling the browser to center the information within these tags. Next, the <h1> or heading one statement, which tell the browser to display the text in the largest heading. Next, the <hr> tag tells the browser to display a line straight across the screen. The third line contains <br> that creates a break on the page. Next, the <p> is short for "paragraph" and helps separate the text in the page. Next, the <b> tag is short for bold and will bold the text contained with the tag. In the next section the <ul> starts a bullet list and each bullet is represented by the <li> tag. Finally, the "a href" tag is a method of creating a link to another location, in this example we are created a bulleted link to Computer Hope and Google.

Viewing the website

Now that you have created a basic website you may want to verify how the website looks. Being that you have files locally stored on your computer you will not need to connect to the Internet to view your web page.

Open the computer browser and type the location of your web page. For example, if you have placed the index.htm or index.html file within the webpage folder, you would type in the browser c:\webpage\index.htm or c:\webpage\index.html if you are using an IBM compatible computer. If you have Microsoft Windows or Apple, you can also double-click the web page file so it opens in a browser automatically.

Tip: Some HTML editors also allow you to preview the page by clicking the preview button within the HTML editor.

Viewing a web page locally allows you to experiment and make sure the page works before taking the time to upload the page to the server. This also is useful if you do not have a place to store your web page.

Displaying images

Now that you have created a basic website you can improve the looks and feel of the website by adding images to the web page. There are two methods of displaying images on your web page. The first method is linking to another website to display the images by using the below code.

<img src="http://www.computerhope.com/logo.gif">

Using the above HTML tag you can display images off of other websites, which is also called a hotlink. However, we recommend that you do not do this if possible as it can cause your web page to load slower and could cause missing pictures to occur if the other site removes or moves the location of the picture to an alternate location. The alternate and recommended method would be to use the below code.

<img src="mypic.gif">

or if you have an images folder:

<img src="images/mypic.gif">

If the mypic.gif exists on the computer the picture is shown on your website. Adding pictures is an excellent way to spruce up the website. However, do not get to carried away, adding several images (especially animated images) can look tacky and slow down the time the web page loads. Remember, the average time someone looks at a website is 10 seconds.

Finally, never place large sized images on your home page. Large images will slow down the web page dramatically and may cause the visitor to leave. If you would like a large picture on your website, it is recommended that you create a small image called a 'thumbnail'. If the user is interested they can click the thumbnail to view a larger image.

Understanding directories

When creating other directories (folders) on the computer that contain other images or HTML files, it is important that you understand the directory structure of how the server will access other folders. Many times, users will mistakenly create a bad directory that allows the page to work offline but not on the Internet or from another computer.

When accessing files in other directories that are ahead of the current directory, first specify the directory and then the file name. For example, if you are trying to access or display the image file mypic.gif in the image folder, create the link as shown below.

image/mypic.gif

Notice in the above line that the directory is first specified and then the file.

Next, if you wanted to access the image file mypic.gif that is back one directory, you would want to use the example below.

../mypic.gif

In this example, notice the two dots (..) these tell the browser that you want to go back one directory. If you wanted to go back one directory and then into another directory you would first do ../ and then the directory as shown in the example below.

../other/mypic.gif

This rule can be applied to as many directories back as possible. For example, if you wanted to go back three directories and then go into the images directory, then you would use the example below.

../../../image/mypic.gif.

A common mistake with PC (Windows) users is that the HTML editor may specify the file to be located in the computer hard drive such as c:\mywebpage\image\mypic.gif. This will work fine on the computer hard drive (locally); however, when posted on the Internet, no one but the person with the file locally will be able to display the file.

Finally, remember when specifying the directory that you are using a forward slash (/) and not a backslash.

Case sensitive

It is important to remember that many of the Internet servers are utilizing Unix or a *nix variant. With Unix, file names are case sensitive. This means if you link to a file such as Mypage.htm and the file on the server is mypage.htm, the server will be unable to find it because of the capital M. We always recommend creating all web pages, images, and files in all lowercase.

Posting the website

Posting the website files to the Internet is one of the most complicated steps of setting up a website for most people. In order for the web page to be viewable by other users, the user must post his or her website on a server where it can be viewed by individuals on the Internet.

Because of the wide diversity of methods of posting a website, we will explain one of the most commonly used methods of posting your website.

Internet Service Providers and web hosting companies provide FTP (File Transfer Protocol) access that allows the users to copy files from your computer to the server. PC users have two possibilities; one is to use the FTP program included with Windows and the other recommend solution is to download an FTP program. Using one of these tools should enable the user to send his or her files, providing the server allows FTP access.

Once connected to the server locate the folder or directory that contains your web page. Usually this folder is public_html. If you are using Windows FTP, type cd public_html or type dir to see what the folder is named. Or open the folder through CUTEFTP or the FTP client program your are opening. Once in this folder, you can send your HTML files to the server to access them over the Internet. Windows FTP users to send your files, for example, type send index.htm.

We understand this can be a complicated process; however, your Internet Service Provider or Web Hosting company has instructions for posting your website and sometimes may even have a web based client, which allows the users to transfer their files using a website and not having to follow the above tedious commands. If following the above recommendations you are unable to post your website, we recommend that you review through your Internet Service provider or Web Hosting company documentation.

Setting up a domain

Users who want their own unique domain or URL may want to know who to go through to setup their own personal domain and what is needed. In the below section we have listed additional information about setting up your own domain as well as what is commonly required to setup a domain.

  1. Determining name -- Before attempting to setup a domain, you must first determine what names are available on the Internet. It's very likely that your first choice is already taken. To determine what domain name is available, do a whois lookup on the domain. For example, click here to open the Network Solutions page in a new window. On their page you can find a "WHOIS" link on the page. Using this tool you can search for available names. Although the majority of the Internet users are used to typing .COM as the extension of the domain, if your domain name is already being used, you may want to consider .NET or .ORG as possible alternatives.
  2. Think about the name -- Before registering the name, make sure to think about some important considerations. Are there other companies or copyrights your domain name conflicts with? Is the domain name too long for people to type in? Is the name hard to remember or type in? Are there similar addresses on the Internet users may get confused with? Many of these questions can be answered by using a search engine to search for similar names and asking friends and family about your domain name.
  3. Getting an ISP and Web host -- If you do not already have an ISP or web host that will be storing your files, you should consider first looking at the available ISPs in your area or available web hosts on the Internet. Some companies may assist you in registering your domain for you if you are already hosting your files through them. If you do not already have a web host, do a search for "web host" on any popular search engine and decide what host best meets your needs. Additional information about what to look for in an ISP and web host can be found by clicking here.
  4. Domain Name Server (DNS) -- If your ISP and web host does not setup or register domains for you or you want to register your own name for a cheaper price, you need to know your ISP or Web Host's DNS server address. This is the computer that allows other computers to know what address to point the domain name to. You need a Primary, Secondary or alternate DNS server address. For example, the DNS IP Computer Hope uses is "198.60.22.2"; although your address will be different from this address you should get a similar address from your ISP or web host.
  5. Register -- Once you have thought about and read through all of the above steps and are ready to register, decide who you plan on registering through. There are thousands of different companies that are capable of registering your domain name. We recommend going through Go Daddy or Network Solutions; however, also performing a search on any popular search engine gives you a great list of other available options.

Related domain questions and answers

Why should I setup a domain name?  A domain can be an important part of having a website that you intend to generate revenue from or want people to remember. A domain allows a user and potential customer to remember the name for your website; for example, www.computerhope.com is much easier to remember and type than http://www.webhost.com/user/~computerhope.

What is a domain name alias or domain alias? A domain alias is a cheaper solution that will point a domain name to a web page. For example, a user would type http://www.computerhope.com but be forwarded to http://www.webhost.com/user/~computerhope. Although this is a cheaper solution users should consider if this is the best solution for their site.

Web Hosting

Web hosting allows for users to have another company store and maintain your website for you or your company. A web hosting company may or may not be needed depending upon what is available through your Internet Service Provider. Check with your Internet Service provider to see if they offer a comparable solution to other Web Hosting companies. When setting up with a web hosting company, we recommend that you verify the below information with them before setting the page up.

  • Domain Registration - Verify that the company allows your company to have a domain such as www.computerhope.com and see if they can set it up for you, and if so, how much will it cost.
  • E-Mail forwarding - See if the company offers e-mail forwarding to forward e-mail from username@yourdomain.com to another e-mail address such as your personal e-mail address.
  • Support - Verify the hours of operation for phone support and check to see if the number is a toll-free number.
  • Changing companies - Verify their policy and how easy it will be for changing to another company if the time comes.
  • Site Statistics - While not a necessity, it is a nice feature; see if the company offers site statistics for your web page, allowing you to monitor how well your website is doing.
  • Business Account - See if the company will charge you additional fees if you begin to sell something off of your website.
  • Bandwidth Limitations - Verify that the company does not have a strict bandwidth limitation, which may limit the amount of traffic you are capable of receiving. It is important to realize that all companies have a limit but verify it is something that is not expected to be broken.
  • Front Page Extensions - If you are using Front Page, verify Front Page Extensions are supported. Although not all Front Page users use these features, it is still a good idea to verify this is available.
  • CGI, Perl, and PHP Scripts - While you may not immediately setup a page with CGI, Perl, or PHP script, but it is important for future use that you verify the server supports this. This allows you to setup counters, message boards, guest books and other various features in the future.

Search for third-party hosting companies.

Beyond the basics

Designing web pages goes much deeper than this basic introduction of web pages. Once you've got a good understanding of HTML and FTP you'll want to familiarize yourself with CSS to properly format and layout your web pages. If you're wanting to do more advanced features on your website such as forums, web page counters, guest books, online e-mail, etc. Becoming familiar with or learning CGI programming languages such as PHP or Perl are also a must.

If you find learning more than the basics is too overwhelming there are dozens of CMS services such as WordPress that can make setting up and designing your web page easier and dozens of online blog services to setup a blog without having to worry about the hassles of all the programming.