• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Web Development / How to Make a Website

How to Make a Website

7 July 2009 / Leave a Comment

So you want to know how to make a website. Where do you begin? This article walks you through the basic steps:

  1. Making your Web pages
  2. Designing your website, and
  3. Getting your website online.

Making your Web pages

Your website will probably contain several Web pages, linked together. A Web page is similar to a printed page, in that it can contain text and images. However there are some important differences between a Web page and a printed page.

For one thing, a Web page can be of any length, from just a few words to several screenfuls of content. To view a long Web page, you simply scroll down in your browser.

A Web page can also contain links to other Web pages and websites. This ability to link to other content really makes the Web useful.

So how do you make Web pages? Read on…

Understanding HTML

Web pages are created using a language called HTML. HTML is easy to learn. An HTML Web page consists of the page’s text surrounded by various tags for structuring and formatting the page. For example, to create a paragraph of text you surround the text with <p> and </p> tags:


<p>Here is a paragraph of text.</p>

You can create your HTML Web pages using any plain text editor, such as the free WordPad on Windows (Start menu > All Programs > Accessories > WordPad) and TextEdit on Mac (Applications > TextEdit). Just open up the editor, type your text and HTML tags, then save the file with a .html extension (for example, mypage.html). You can then double-click the file to view the resulting page in your Web browser.

If you’re new to HTML then start with our basic HTML tutorial.

What if you don’t want to learn HTML?

HTML is fairly simple, and it’s a good idea to learn at least a few basic tags. However if you don’t fancy building your Web pages by typing HTML by hand then there are some good alternatives:

  • You can use a WYSIWYG (What You See Is What You Get) Web page editor. This is software that you run on your computer. It lets you create Web pages by entering or pasting text and inserting images, much like using a word processor. There are many WYSIWYG editors available. At the high end there are applications such as Adobe Dreamweaver and Microsoft Expression Web. RapidWeaver and iWeb are also options if you use a Mac. Good free editors include KompoZer and Amaya.
  • You can use a content management system (CMS). Many Web hosting packages come with a CMS that lets you enter your Web page content via your Web browser. Typically this involves using a browser-based rich text editor (which works like a simple word processor).
  • You can create a blog. Blogs are specialised content management systems that are very easy to use. Find out more in How to Start a Blog.

Designing your website

At some point you’ll probably want to add graphical elements to your website, whether it’s a few holiday snaps, a logo, or a complete page design. To do this, you’ll need a graphics editor to create the graphics, and ideally some knowledge of CSS to style your pages.

To get some general Web design tips, check out our Web Design and Style articles.

Creating Web graphics

To create graphics and manipulate photos you need to use an image editor of some sort. These let you open or create images, adjust them as much as you like, then save them out in a format suitable for including in your website.

Popular image editors include:

  • Adobe Photoshop (and the more affordable Photoshop Elements)
  • Adobe Fireworks
  • GIMP (free — strange name but it does a good job!)
  • Various free browser-based editors such as Splashup and Aviary.
You can read tutorials on working with popular graphics editors in our Web Graphics and Multimedia section.

Once you’ve created your images you can insert them into your Web pages — either using your chosen WYSIWYG editor, or by adding HTML img tags (find out more on working with images and HTML).

Using CSS to style your pages

As well as adding images to your website, you can style your Web pages using CSS (Cascading Style Sheets). Like HTML, CSS is an easy-to-learn language. You can use CSS to lay out pages; style images and text; build navigation menus, and so on.

If you’re coding your HTML by hand then you can easily add CSS to style your pages. Typically you do this by creating a separate .css file to store your styles.

If you’re making a website using a WYSIWYG editor then it will handle much of the CSS styling for you. However, for best results it helps to learn at least a little CSS.

To find out more about using CSS, start with our CSS introduction, then have a look at our other CSS articles.

Getting your website online

Once you’ve made your website, you’ll want to put it on the Web so that others can see it. This involves signing up with a Web hosting company, then uploading your Web pages and other files to the company’s Web server.

Finding a Web hosting service

There are thousands of Web hosting companies out there. How do you choose the right one for you? Try reading our Choosing a Web Hosting Service article to help you decide.

If you want to have a domain name for your website — such as www.example.com — then take a look at How to Set Up Your Own Domain Name.

Uploading your website

Once you’ve signed up for a Web hosting account it’s time to upload your website’s files. Find out how to get going with your hosting service, as well as how to upload files, in Getting Started with Your Web Hosting Service.

Now you’ve made your website, and put it on the Web for all to see. Congratulations!

Filed Under: Web Development Tagged With: beginner, building a website, css, how to make a website, html, intro, making a website, Tutorial, uploading, web hosting, website templates

Reader Interactions

Leave a Reply Cancel reply

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

To include a block of code in your comment, surround it with <pre> ... </pre> tags. You can include smaller code snippets inside some normal text by surrounding them with <code> ... </code> tags.

Allowed tags in comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre> .

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits