How to start in HTML and web design

Start Code

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.

Once connected to the server locate the folder or directory that contains your web page. Usually, this folder ispublic_html. If you are using Windows FTP, typecd public_htmlor type dir to see what the folder is named. Or open the folder through CuteFTP or the FTP client program youre 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, typesend index.htm.

html head titleMy first web page/title /head body Your web page content goes here /body /html

Search for third-party hosting companies.

– 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.

Legal Disclaimer – Privacy Statement

Or if you have an images folder:

Finally, never place large sized images on your homepage. 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 athumbnail. If the user is interested in viewing the full-size image, they can click on the thumbnail to view the larger image.

Tip:Realize that your web page is going to change 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.

– See if the company will charge you additional fees if you begin to sell something off of your website.

It is important to remember that many of theare utilizingLinuxor a *nix variant. With Linux and Unix,filenames arecase sensitive. If youlinkto the file Mypage.htm, and the file on the server is mypage.htm, the server will not cannot find the file because of the capital M. We always recommend creating all web pages, images, and files in alllowercase.

– 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.

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

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

– 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.

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.

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 theInternet browserwindow. Finally, the body section contains what is shown on the web page.

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?

Using the above HTML tag, you can display images located on other websites, which is also called ahotlink. 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.

See our How do I register a domain name? page for steps and help with setting up a domain name.

When creating otherdirectories(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.

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.

– While you may not immediately set up 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 set up counters, message boards, guest books and other various features.

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.

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 aserverwhere it can be viewed by individuals on the Internet.

If the basics are too overwhelming, there are dozens ofCMSservices such as WordPress andblogservices 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.

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 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 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 in the tag. Next, the ul starts abullet listand 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.

We understand this can be a complicated process. However, 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 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.

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 a web page. Before writing any HTML code or designing your first web page, you must decide on anHTML editorortext editor, such asNotepadorWordPad.

– Verify the hours of operation for phone support and check to see if the number is a toll-free number.

Once you have created the index.htm or index.htmlfileand it is open in your HTML editor, we recommend inserting the belowsource codeinto your page. If your HTML editor automatically places HTML code into your page or you have aWYSIWYGeditor, you can skip this step.

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.

– Verify that the company allows your company to have a domain such as and see if they can set it up for you, and if so, how much will it cost.

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

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.

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

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.

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.

img src=mypic.gif alt=My picture

Internet Service Providers andweb hostingcompanies provideFTP(File Transfer Protocol) access that allows the users tocopyfiles from your computer to the server.PCusers have two possibilities; one is to use the FTP program included withWindows, and the other recommended solution is todownloadan FTP program. Using one of these tools should enable the user to send his or her files, providing the server allows FTP access.

Do you plan on having a template for the pages? Are all the pages going to have the same overall look and feel?

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 the server is accessing the

– See if the company offers e-mail forwarding to forward e-mail from[emailprotected]to another e-mail address such as your personal e-mail address.

img src=images/mypic.gif alt=My images picture

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.

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 on a Windows PC. If you have Microsoft Windows or Apple, you can also double-click the web page file to open the page in a browser.

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.

Finally, remember when specifying the directory that you are using aforward slash(/) and not abackslash.

centerh1Welcome to my web page/h1/center hr br pHello and welcome to my first website.brbr bThese are my favorite links:/bbr ul lia href= Hope/a/li lia href= /ul /p

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 withCSSto properly format and layout your web pages. If you want to do more advanced features on your website such as forums, web page counters, or e-mail form you need to become familiar withCGIprogramming languages such asPHPorPerl.

– Verify their policy and how easy it will be for changing to another company if the time comes.

img src= alt=logo

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.

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 on the site. Below are some considerations to think about when designing your web page.

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 yourInternet Service Providerto 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.

Leave a Reply