How to start in HTML and web design
Getting started
HTML (hypertext markup language) is the primary building block of creating a website. HTML is a 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.
After installing an HTML editor you're 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 on the site. Below are some 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? We recommend storing pages, files, and pictures in separate directories if you plan to have many different pictures.
- Are the HTML files going to be stored as .htm or .html files? There is no advantage or disadvantage 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 pages? Are all the pages going to have the same overall look and feel?
- How is the navigation going to be handled? Do you feel the navigation menu should be on the left, bottom, or top of each page?
Realize your web page changes over time as you find things that do not work. Over the lifetime 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, begin developing your page 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 https://www.computerhope.com, the server is accessing the https://www.computerhope.com/index.htm address.
Once you've created the index.htm or index.html file and it's open in your HTML editor, we recommend inserting the source code below in your page. Skip this step if your HTML editor automatically places HTML code in your page or if you're using a WYSIWYG (what you see is what you get) editor.
<html> <head> <title>My first web page</title> </head> <body> Your web page content goes here. </body> </html>
The code above is a basic example that helps make up every web page. As shown, the code starts with <html>, which defines everything within <html> is HTML code. Next, you have <head>, which defines the heading of your page. Third, the <title> section within <head> defines the web page title 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 for the <body> section of the code to help familiarize you with commonly used HTML tags.
<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="https://www.computerhope.com">Computer Hope</a></li> <li><a href="http://www.google.com">Google</a></li> </ul> </p>
As shown in the code above, the basic HTML commands are fairly simple. First, we start with <center>, which tells the browser to center the information in 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 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 bolds the text contained in the tag. Next, the <ul> starts a bullet list, and represents each bullet with the <li> tag. Finally, the <a href> tag creates a link to another location. In this example, we create a bulleted list of links to Computer Hope and Google.
Viewing the web page
After creating a basic website, you may want to verify how the website looks. With the files stored locally on your computer, you don't need to connect to the Internet to view your web page.
Open the computer browser and type the location of your web page in the address bar. For example, if you placed the index.htm or index.html file in a "website" folder, type c:\website\index.htm or c:\website\index.html in the address bar on a Microsoft Windows PC (personal computer). Alternatively, if you have Microsoft Windows or Apple, double-click the web page file to open the page in a browser.
Some HTML editors also allow you to preview the page by clicking the preview button in the HTML editor.
Viewing a web page locally lets you experiment and make sure the page works before taking the time to upload the page to the server. Viewing a page this way is also useful if you do not have a place to store your web page.
Displaying images
After creating a basic website, improve the look and feel of the website by adding images, if desired. There are two methods of displaying images on your web page. The first method is linking to another website to display the images using the following code.
<img src="https://www.computerhope.com/logo.gif" alt="logo">
Using the HTML tag above, display images on other websites, 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 following code.
<img src="mypic.gif" alt="My picture">
Or if you have an "images" folder:
<img src="images/mypic.gif" alt="My images 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 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 (e.g., file size larger than 5 MB file) on your page. Large images slow down the loading of the web page dramatically and may cause a visitor to leave. If you want a large picture on your website, we recommend 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 the thumbnail to view the larger image.
Understanding directories
Understand the directory structure when creating other directories (folders) on the computer that contain images or HTML files. Often, 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 in a subdirectory, 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, to access the image file mypic.gif in a parent directory, use the following example.
../mypic.gif
In this example, the two dots (..) tell the server to go back one directory. To go back one directory and then into another directory, do ../ first 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, to go back three directories and then go into the image directory, use the example below.
../../../image/mypic.gif.
A common mistake with PC (Windows) users is when the HTML editor specifies the full path to an image on the 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 can display the image.
Finally, remember when specifying the directory, you're using a forward slash (/) and not a backslash.
Case sensitive
It is important to remember that many Internet servers are utilizing a variant of Linux. With Linux, file names and directories are case-sensitive. If you link to the file "Mypage.htm," and the file on the server is "mypage.htm," the page will not load 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 files must be posted on a server connected to the Internet.
ISPs (Internet service providers) and web hosting companies provide FTP (file transfer protocol) access that allows the users to copy files from their computer to the server. PC users have two possibilities; one is to use the FTP program included with Windows, and the other recommended solution is to download an FTP program. Using one of these tools should enable the user to send their files, provided the server allows FTP access.
Once connected to the server, locate your website's directory. 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 FileZilla, CuteFTP, or the FTP client program you're opening. Once in this folder, send your HTML files to the server to access them over the Internet. For example, Windows FTP command line users could send files by typing send index.htm.
Your web host should have steps for posting your website and sometimes may even use a web-based client to transfer files to their server. If, you cannot post to your website after following the above recommendations, check with your ISP's support department.
Setting up a domain name
See the following page for steps and help setting up a domain name.
Web hosting
Web hosting allows 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 on 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, verify the below information with them before setting up the website.
- Domain Registration - Verify that the company allows your company to have a domain (e.g., www.computerhope.com).
- E-Mail forwarding - See if the company offers e-mail forwarding to forward e-mail from [email protected] to another e-mail address. For instance, have the @yourdomain.com e-mail forwarded to a @yahoo.com or @gmail.com 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 is to change to another company if the time comes.
- Site Statistics - While not necessary, it's nice to see if the company can give you statistics to tell you how well your website is doing. If not available, you could still use Google Analytics.
- Business Account - See if the company charges you additional fees if you begin to sell something on your website.
- Bandwidth Limitations - Verify that the company does not have a strict bandwidth limitation, which may limit the amount of traffic accepted. Realize that all companies have a limit but verify it is something that is not expected to be broken.
- CGI, Perl, and PHP Scripts - While you may not immediately set up a page with CGI, Perl, or PHP (PHP: Hypertext Preprocessor) script, it's important for future use you verify your server supports this. These scripts allow you to set up counters, message boards, guest books, and other scripts.
Search for third-party hosting companies.
Beyond the basics
Designing web pages goes much deeper than this basic introduction. Once you understand of HTML and FTP familiarize yourself with CSS (cascading style sheets) to properly format and layout your web pages. To do more advanced features on your website such as forums, web page counters, or e-mail form, become familiar with CGI (common gateway interface) programming languages such as PHP, Perl, or Python.
If the basics are too overwhelming, several CMS (content management system) services, such as WordPress and blog services make the process easier. However, know that many of these services only offer templates and plugins that allow you to customize your site. If you need more customization, learn more than the basics of HTML.