How to start in HTML and web design
Quick links
Getting started
Writing basic HTML
Viewing the web page
Displaying images
Understanding directories
Case sensitive
Posting the website
Setting up a domain name
Web Host
Beyond the basics
Promoting your website
Writing basic HTML
Viewing the web page
Displaying images
Understanding directories
Case sensitive
Posting the website
Setting up a domain name
Web Host
Beyond the basics
Promoting your website
Getting Started
HyperText Markup Language (HTML) is the primary building block of creating awebsite. 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 or WordPad. What ever editor you decide on using can change if it is not 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.
- 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.
- 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.
- Do you plan on having a template for the page? Are all the pages going to have the overall same look and feel?
- 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 Computer Hope 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.computerhope.com, the server is accessinghttp://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. 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 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.
- See our HTML and Web design help page for a listing of HTML commands and related content.
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" alt="logo">
Using the above HTML tag you can display images off of 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 pictures to occur if the other site removes the picture. 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 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 athumbnail. 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 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. PCusers 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.
- What FTP programs can I use to send and receive files?
- How do I use FTP from a Windows command line?
Setting up a domain name
See our "How do I register a domain name?" page for steps and help with setting up your own domain name.
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.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.
- 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 Perlare 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.
No comments:
Post a Comment