How to build a basic web page

Building a basic web page. It’s easy, you’ve just got to know the basic HTML code to start with. Rather than have you look it up, we’ve provided you the code here. There are no special tools or software required. Simply follow these instructions to create a basic web page and display it in your browser.

Cartoon by Marty Bucella - all rights reserved.
Figure 1: Better Get Cracking

There are many different tools out there to help you design a website. They range from structured content management systems that allow you to post your own material such as Facebook, Wix, LinkedIn, Twitter, Weebly, Square-space, WordPress and other easy tools. The more difficult tools go all the way to complex software such as Adobe Creative Cloud and others. Some of these can and do have quite a bit of complexity to them. If you have ever tried Adobe Photoshop or Illustrator on a whim, then you will know that you don’t just pick it up in a few minutes.  Web design integrates many different skills and can be lucrative, if this is something you decide you want to do. How much money you ask? Well don’t drop out of school yet, there is a lot to learn, but I can give you little background.

Website creation costs range from $0.00 up to millions of dollars depending the on the complexity of the site. The average expense for a 6-10-page website (small business) ranges from between $1,000 – $5,000 in costs. The designers vary greatly, from formally trained professionals with degrees, to students like you just hacking around (some of these students are talented and age generally does not always equate to skill in my opinion).

Typically, simple site builders such as Wix.com or Squarespace.com do not require software coding or programming and derive their revenue from hosting and other advertisements. Other software includes software content management systems, such as WordPress which can be configured to run as a full-blown website and they are easy to work with. Hosting is also critical and is where you will where you will store your web-page and graphics. You can see examples from www.lunarpages.com, www.hostgator.com and www.godaddy.com to name a few. There are 1,000’s of hosts and many of them are fantastic.  Okay, that’s enough background let’s get coding. I am just kidding. Heavy programming is beyond the scope of this article.

The first thing I want you to think about is a name for your website. This portion is just for fun so do not sign up or pay anything but go to: https://www.networksolutions.com. It should look similar to figure # 2 below. This part is just for fun, so don’t purchase anything unless you want a domain name.

domain name look up
Figure 2: looking up a domain name

Look up a domain name you would use to compliment your business and website like howdydudy.com and see if it is available. We call these domain names and they become your website address. Make sure you look at the differences of a .com, .edu, .mil and .net extensions. Many folks in the business simply buy domain names and then look to resale them. It is an entire cottage industry and something fun for you to be aware of and play with. Figure 3 is an example image of a domain name being available.

Figure 3: Domain name is available

Now, onto building the page. Using figure #4, open Notepad, write in the characters just like these to include <html> angled brackets. Put your name in the body portion and save this file as a .html file somewhere easy to find it like your desktop. Double click on the file and your browser should open the page. For example, Thomas.html or Stewart.html. The specific tag meanings are defined in figure 5.

Figure 4: Sample Notepad entry
Figure 5: Basic HTML code to put into your text pad

Open Notepad and type in the text similar to figure 4 above, but change the text in the body and the title to reflect you, and save it. Then open it in Chrome or another browser using ctrl+O. Don’t forget to save one copy as a .txt and one copy with a .html extension. I like to save it to my desktop, so I can find it. Double click on the file with .html extension and it will open in your browser similar to figure 6.  Then right click your mouse and select view page source to see your code. Now this is important! Congratulate yourself, you are practically a webmaster.

Figure 6: Viewing your page. Right click to view page source.

Source notes:  

Figure 1 cartoon – All rights reserved Marty Bucella

Figure 4 image from Scripting Master.com

Leave a Reply

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