How to Build a Web Page

Charlie R. Claywell
Web page coding

You don't have to be a computer expert to build a web page. You just need to understand a few basic skills, and you are well on your way. Today's web tools and technology will help you with the rest.

Constructing a Web Page

In order to build a decent web page, you need a few basic tools and an outline that shows everything you need to launch a successful site. You don't need to worry about the design or style just yet. There are a few other things you need to work out first.

Registering and Hosting Your Domain

Once you decide on your site's topic, you need to make sure you register the domain name and find a host for your site. You should always come up with at least two or three domain names, in case your first (and sometimes second) choice is already taken.

Domain Tips

A reputable domain registration company will have:

  • Good 24/7 customer service via telephone, e-mail, or live chat
  • No underlying or hidden fees
  • Low-cost private registration
  • An allowance for a DNS transfer
  • Domain name cost waived with purchase of hosting services

Host Tips

When choosing a host for your web pages, keep in mind:

  • Amount of bandwidth allowed
  • Which security measures are offered to deter intrusions
  • The page's loading speed
  • The server's operating system
  • Whether there's a control panel in a central location

Choosing an Editor

HTML Editors

The content editor you ultimately decide to use depends on your experience level in building websites. If you are familiar with HTML or other coding, using an HTML editor is your best bet. HTML editors include:

  • CoffeeCup HTML Editor
    CoffeeCup HTML Editor
    Notepad: Branded as "one of the simplest user interfaces of any Internet Web authoring tools," Notepad is bare-boned and clean-looking, but it will not catch any HTML errors for you.
  • CoffeeCup: This relatively inexpensive HTML editor is quite powerful and has a nice interface for novices and experts alike. It also includes FTP which simplifies 'going live' with your page.
  • Adobe Dreamweaver CC: Probably the best known of all editors, this program has plenty of advanced features for an expert level designer, but it's simple enough for a novice to master.

WYSIWYG Editors

If you want to build your page with as little effort as possible, a free web page builder may be more your speed since all of the work is done with just a few keystrokes. You can choose from free WYSIWYG (What You See is What You Get) web editors and website builders such as:

  • KompoZer: With this simple program, you concentrate on the design and layout while the program creates the coding. The program is similar in look and feel to Dreamweaver.
  • Microsoft Expression Web 4: Another powerful program, this one was once a paid product. The free version has all of the features of the paid one, and while a novice can easily use it, an expert will appreciate the powerful features it has.
  • BlueGriffon: With a well-designed and intuitive workspace, this program is extremely useful for a beginner who is unfamiliar with HTML tags. The software is known for its excellence and was named the best free software of 2012, by PCMag.com.

Using a Content Management System

Content management systems (CMS) are an alternative to web editors and WYSIWYG programs. These systems are becoming an increasingly popular method used to launch, build, and maintain a website. This is due in large part to three popular systems, Wordpress, Drupal and Joomla, which have greatly reduced the complexity of ongoing website maintenance. If you expect your site to grow significantly over the years, building it inside a CMS is probably a good way to go since all the site's elements, including content, images and multimedia, can be managed from one place.

Wordpress CMS
Wordpress CMS

These systems provide you with:

  • A wide variety of templates
  • Simpler ways to install more "bells and whistles" via plug ins.
  • Free tutorials
  • A community of developers improving the product

Hosting Your Images

You can add images to your site in one of two ways: Either upload the pictures directly to your host's file server, or host your images on a third-party site.

Benefits of using a third-party site include:

  • Cost: Most photo hosting sites are free.
  • Bandwidth: You will use less of your own site's bandwidth.
  • Easy to use: No HTML experience is necessary.

However, the downside is:

  • Resolution: Photo resolution may not be as good as with a paid subscription.
  • Privacy: You may have to pay to keep your images private.
  • Downloading: Most sites don't allow direct downloads of pictures; you may have to use links instead.

Putting It All Together

Now that you have all of the logistics in place, you can put it all together with the style you want. The difficult part is figuring out how a web page is built; the fun part is designing it. Take your time and experiment with everything the Internet has to offer.

Using a Template

Since the goal of a web-hosting service is to sell you a hosting account, many of these services offer additional tools and templates (usually for an additional fee) that enable you to launch your site quickly. If your goal is to create a relatively simple website, these products are often worth the money. Just make sure you're only paying a one-time fee and not signing up for an ongoing subscription-based service.

Parts of the Page

To build a page that performs well in search engine results, styles correctly, and displays as desired in multiple browsers, you need to format the page correctly. HTML is a markup language created to layout a page in the form of an outline. When building a HTML page, the bare minimum coding it can have is:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Title of the document</title>

</head>

<body>

Content of the document......

</body>

</html>

Most of the formatting for a page occurs between the open and close <body> tag. You will place text, images, graphics, forms, a footer, and maybe more inside this tag, depending on the complexity of your site.

Formatting Your Content

HTML tags are designed to create the page's hierarchy of importance and ensure web browsers understand the content on your page so it renders correctly. Even though there are a significant number of HTML tags, you will probably only use a handful of common ones initially.

  • An <H1> should be used only once on a page and it should be reserved as the headline over the page's most important content. Remaining <H> tags should be used in descending order; <H2> is more important than <H3>, and so on. It is rare to use all six <H> tags on a page.
  • The <p></p> open/close paragraph tag is used around each paragraph of text. You can use the <br/> if you want a non-breaking space between paragraphs.
  • If a word or a few words need to be emphasized, you can use the <b></b> tag to bold the word or the <em></em> tag to italicize it.
  • When quoting information from another source, designate it by placing content between open/close <blockquote> tags.

Since HTML is used to format a page, rely on CSS to control the look.

Dealing with Images

Image Coding

If you want to add an image to your page, you will insert the <img> tag on the page where you want the image to appear.

<img src="myPhoto.jpg" alt="My Family Picnic" width="100" height="200" hspace="3" vspace="3" border=1">

Here is what each of the attributes control.

  • Height/Width: Measured in pixels, this attribute controls the exact size of your image. All images should include the height and width attribute because it tells the browser the amount of space to reserve for the image. When this attribute is not included, it slows down the page's load time.
  • Hspace/vspace: Although this attribute provides an acceptable way to control the horizontal and vertical space around an image, this spacing is more often controlled by a stylesheet.
  • Border: This is another detail normally controlled by a style sheet. In the coding example above, the image would have a 1 pixel border around it.
  • Alt: This is a bit of text that describes the image; the alt tag should always be included for accessibility.

Using the Correct Extension

Each image format is designed for a specific purpose, so it's helpful to understand what each one does. Regardless of your file type, always optimize for the web so your image loads quickly.

  • JPG: These format is best suited for photographs and complex graphics, and it does not work well for line drawings, lettering or simple graphics.
  • GIF: Use this format for images with only a few distinct colors, such as line drawings, black and white images, and small text. If you want an animated graphic or an image with a transparent background, use this method.
  • PNG: This file type builds on the concept of a GIF. One of its additional features is the ability to control the degree of transparency, also called opacity. Just be aware that some older browsers do not support the extension.

Adding Interactivity

Adding interesting content is important if you want your visitors to keep coming back for more. There are a few basic elements that anyone creating his or her first web page should know how to add. These features allow your Internet visitors to contact you via email or communicate with each other using social networking tools.

Email

Email is one of the simplest pieces of interaction you can place on your site. To allow a person to email you, use this code:

Send me an <a href=mailto:someone@example.com?Subject="Hello">email</a>

When a user clicks on the link, it will open his or her email program and place the word "Hello" in the subject line. If you do not want anything in the subject line, remove ?Subject="Hello" from the tag.

Chatango chat room editor
Chatango Chat Room Editor

Forums, Blogs, and Chat Rooms

If you want a forum, blog, or a chat room on your website, make sure your web host offers these services before you sign up. Since social networking and collaborative tools do vastly improve the visitor's experience, they are certainly nice features to include. However, it is a little more complicated to retrofit these services once your site has been created. If you need to retrofit, there are ways to add blogs and chat rooms to an existing website. There are also a few companies that still offer free forum hosting with limited ads.

Launching the Site

Once the page is built, you need to make it live. This is accomplished by placing the page, any images used on the page, and the stylesheet (if you used one) onto a server connected to the web. Although it may sound complicated, it's really just a drag and drop function.

If you used an editor program with FTP built in, you will simply go to the menu and click on 'Publish' or 'Upload.' This will load all the files you selected on the remote server.

If your program does not have FTP, you need to:

  1. Download a FTP program; FileZilla is commonly used.
  2. Input login and password information for the remote server; the hosting company will supply these.
  3. Once you are connected to the remote server, slide your folders and files into the area designated by the hosting company.

Getting Your Site Noticed

Once your site is up and running, you want to make sure people can find it. One of the first things you can do is email the page's link to family, friends, and other contacts. You can use social media or social bookmarking sites to announce your page is live. More importantly, for the long run, submit your site to Google, Bing, and Yahoo. Once submitted, you can boost visibility in search engine results by updating your site often with quality content.

How to Build a Web Page