Starting with HTML & Web Design

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 a web page. Before writing any HTML code or designing your first web page, you must decide on an HTML editor or text editor, such as Notepad or WordPad.

Once you have obtained an HTML editor and are ready to begin setting up your website, think about how you want the site to look and be set up. Consider even drawing out your ideas, to help visualize the site and pages in the site. Below are some 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, it’s 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 pages? 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 is going to change over time as you find things that do not work. Over the life time of the Computer Hope website, we have 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 as your start page. All servers on the Internet look for an index file if no file is specified. For example, when typing http://www.nakulrajput.com, the server is really accessing the http://www.nakulrajput.com/index.html address.

Once you have created the index.htm or index.html file and it is open in your HTML editor, we recommend inserting the below source code into your page. If your HTML editor automatically places HTML code into your page or you have a WYSIWYG editor, you can skip this step.

<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 code starts 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 defines the web page title that is displayed at the top of the Internet browser window. Finally, the <body> section 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 familiarize 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.nakulrajput.com">Nakul Rajput</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>, which is telling the browser to center the information within these tags. Next, the <h1> or heading one statement tells the browser to display the text in the largest heading style. Next, the <hr> tag tells the browser to display a line straight across the screen. The third line contains <br> that creates a line break on the page. Next, the <p> is short for “paragraph” and helps separate the text on the page. Next, the <b> tag is short for bold and will bold the text contained within the tag. Next, 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 creating a bulleted list of links 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 a “website” folder, you would type in the browser c:\website\index.htm or c:\website\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 look and feel of the website by adding images. 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.nakulrajput.com/images/favicon.ico” alt=”Fevicon”>

Using the above HTML tag, you can display images located on other websites, which is also called a hotlink. However, we advise against using this type of link, as it can cause your web page to load slower and could cause missing images to occur if the other site removes the images. The alternate and recommended method would be to use the below code.

<img src=”mypic.gif” alt=”My picture”>

Or if you have an “images” folder:

<img src=”images/mypic.gif” alt=”My picture”>

If the mypic.gif file 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 carried away by adding several images (especially animated images), as it can look tacky and increase the amount of time it takes to load the web page. Remember, the average time someone looks at a website is 10 seconds, so you want your web pages to load as quickly as possible.

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

Understanding directories

When creating other directories (folders) on the computer that contain images or HTML files, it is important that you understand the directory structure. Many times, users mistakenly create a bad link 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. A local path works 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 Linux or a *nix variant. With Linux and Unix, file names are case sensitive. If you link to the file “Mypage.htm” and the file on the server is “mypage.htm”, the server cannot find the file 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. 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.

Web Host

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.nakulrajput.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.
  • FrontPage Extensions – If you are using FrontPage, verify FrontPage Extensions are supported. Although not all FrontPage 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, it is important for future use that you verify that your server supports this. These scripts allow you to setup counters, message boards, guest books and other various features.

Beyond the basics

Designing web pages goes much deeper than this basic introduction of web pages. Once you have got a good understanding of HTML and FTP familiarize yourself with CSS to properly format and layout your web pages. If you are 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 the basics are too overwhelming there are dozens of CMS services such as WordPress and blog services that can make the process easier. However, keep in mind that many of these services only offer templates and plugins that allow you to customize your site. If you want to truly customize your site you are going to need to know some of the basics.

June 30, 2016 NUKE HTML , Startup Guides , Web Design 6 Comments
6 comments

Add Comment

Required fields are marked *. Your email address will not be published.