Building your first web page: Part 1

In this ‘hands-on’ module we will be building our first web page in no time. We just need to quickly cover a couple of points beforehand to help get our feet on the ground.

The three ways you can build a web page

1. Use a pre-made template: WHAT IS A WEB DESIGN TEMPLATE?

A web site design template is a pre-made website design template which can be customized to reflect your company’s branding. Website design templates can be found in various formats like Photoshop and HTML. Many times, these templates are compatible with HTML editors like GoLive, FrontPage, and Dreamweaver.

Web site templates can be very useful; they can be used by experienced web designers to ‘jump-start’ the creation of a website. They are also a way for people to put out great-looking web sites quickly with little or no knowledge of HTML and web design.

2. Use an HTML editor like NetObjects Fusion or Dreamweaver:

HTML editors make building web pages feel like (to a certain extent) creating a document in Microsoft Word … it’s made pretty easy. But the downside is that you lose a certain amount of control of what you’re doing and in some cases become dependent on the program.

3. Hand-code your HTML in a text editor like Notepad:

That means you type in the HTML code yourself. This is the approach we are going to use here, because it’s the quickest way to learn how to build web pages, and it is arguably the best way because you have the most control over what you’re doing.

Ok, now that we know the advantages of hand-coding web pages, let’s jump into just the bare minimum of theory, then we will build our first web page!

What are HTML tags?

HTML tags are specifically formatted text that creates ‘markers’ for web browser to read and interpret. These ‘markers’ tell the web browser what and how to display things on the web page. Tags are placed in and around text and images (text and images are some of the ‘things’) that you want to have appear in your web pages.

HTML has a whole bunch of tags (just like the alphabet has a whole bunch of letters) that the web designer can use to build web pages. As mentioned above, tags have a specific structure so that when the browser is reading an HTML page, it knows the tags from the normal text.

Tags are typically words or abbreviations of words placed between angled brackets. So for example: to make text bold, HTML has the ‘bold’ tag that looks like this:

<b>This text will be bolded</b>

Another commonly used tag is the paragraph tag:

This is a paragraph of text.