How to Make Your Own Website

Guide Note

If you want to make your own website but do not want to spend money on an expensive program, have no clue what HTML and CSS means and don't know the basics of web design, then this page is perfect for you. It will guide you step by step on the basic elements of a web page using only a text editor, a web browser and your computer.

Table of Contents

Making a Website Tips

  1. A web page can be created using only a text editor.
  2. Cascading style sheets are the best way to change font style and color.
  3. Sans-serif fonts are the easiest to read on monitors.
  4. You can use the image tag to change the size of your images.
  5. Once your website is created, you will need to upload it to your web host's server.

Newest How To Guides

Tips on dealing with difficult people

Great ideas for mixed drinks

Beat the cold of winter by making the perfect cup of hot chocolate

Need to save money? Learn how to spend less on food

All the information you need to make the digital TV switch

Introduction

  • Feeling like everyone has their own website except you, and that you have no idea where to start? Well, don't despair. This page will take you through the basics of how to create a website. This page was written to conform as much as possible with HTML 4 Specifications created by the World Wide Web Consortium (W3C).
  • Since the purpose of this page is to teach you how to make your own website, even if you're not particularly net-savvy, it is going to guide you through the basics of HTML and CSS programing. By the time you're finished with this page, you will master all of the fundamental skills necessary to build your own website from scratch.

Creating Your Home Page

  • Now that you've created the files you need, it's time to start creating your home page. For the purposes of this exercise, we will be creating a very bare bones webpage. The HTML for a very basic web page looks like this:
  • <html>
  • <head>
  • <title>Page Title</title>
  • </head>
  • <body>
  • </body>
  • </html>
  • The letters between the <> are called tags. Tags come in pairs that begin with the basic code and end with the basic code preceded by a backslash (/). So what do all these mean?
  1. <html> tells the browser that the page is written in html. Always start and end your page with this tag. The </html> indicates the end of the page.
  2. <head> indicates where the header begins and </head> signals where it ends. Information in this section will not be visible on the page.
  3. <title> is the title of the document that is located at the top of the browser. Again, the </title> is placed at the end of the page. Many beginners forget this tag and the page ends up being titled "untitled." The title of this page is "How to Make Your Own Website - Mahalo".
  4. <body> indicates where the body begins and </body> where it ends. This is where the majority of your information will be put.
  • That's it. That's all you need to have an html page. Of course, what you end up is a blank page, but the rest is coming. Your home page is the only page that has a predetermined title. For future pages, you can choose your own names for them.

Formatting Text

  • Text is the most important aspect of a webpage. Formatting text is relatively simple.
  1. Paragraphs: Paragraphs begin with the

    element and end with

    .
  2. Bold: You can make text bold by surrounding it with <b></b>. A similar tag is <strong>. Strong is used to indicate that text should have a stronger emphasis, which most browsers display as bold.1
  3. Italics: You can add italics by surrounding text with <i></i>. A similar tag is the <em><-- </em> --> or emphasis tag. Emphasis is generally displayed as italics.1
  4. Breaks: The <p> tag will automatically create breaks in between paragraphs, to create line breaks elsewhere, you can use the <br> tag. This tag is different because it stands alone and does not require a closing tag such as </br>
  • Now that you have the basics, let's put it together. If you type in the following into your webpage:
    • <p><!-- </p> -->Putting text together so that it looks nice can be challenging, so take frequent breaks.<br><!-- </br> -->You want to add the right <em>emphasis</em> without coming on too <strong>strong</strong>. Use <b>bold</b> and <i>italic</i> only when necessary.</p>
  • It should look like this:
(Photo by Mahalo)
(Photo by Mahalo)
  • You may see other tutorials talk about fancy tags such as tt, strike or small. These tags have been deprecated in favor of style sheets, which is covered in the next section.

Headings

  • Header tags are a great way of breaking up text on a page. They come in six predefined sizes with <h1> being the largest and <h6> being the smallest. An extra blank line is automatically added before and after a heading.2 Again, you need both an opening (<h1>) and a closing (</h1>) tag.
(Photo by Mahalo)
(Photo by Mahalo)

Character Entities

  • Computers come with all sorts of neat characters that are not easily understood by web browsers. They require character entity references. For example, if you want to display the & sign you need to type in &#38; or it may not show up correctly. Some of the more common characters you will need to know include:
(Photo by Mahalo)
(Photo by Mahalo)

Adding a Cascading Style Sheet

  • Changing the alignment, color, style and other features in your webpage is done though cascading style sheets. These can be embedded or linked. For the purposes of this page, we are going to create an embedded style sheet.
    1. Start by going up to the top of your html document.
    2. After the </title> tag but before the </head> tag add in the following information:
      • <style type="text/css">
      • </style>
  • Every style change made on the web page will be inserted between those two tags.3 Here is how you add style:
    1. On a new line, in between the two style tags, type in the tag you want to change. For the purposes of this exercise we will be working with the h1 tag.
    2. Then type a space followed by {
    3. Type in the style code followed by }
  • So, let's say you wanted to change header 1 to make it centered. This is what you would type h1 {text-align: center} between the style tags. The entire code should look like this:
    • <style type="text/css">
    • h1 {text-align: center}
    • </style>

Making Temporary Style Changes

  • Now that you understand the basics of style sheets, lets take it one step further. Let's pretend you want to have one paragraph on your web page centered, but the rest of your paragraphs aligned left. This is done by adding classes. You can choose your own names for classes.
  • To add a class to a style sheet:
    1. Add a period (.) after the tag.
    2. Type in a name.
    3. For example, you could type p.middle {text-align: center}
  • You also need to make a minor adjustment to the body of your document when you want to use that class. Instead of simply typing <p> you type <p class="middle">.

Popular Style Changes

  • Here are some of the more common changes you may want to make. Color and font changes are discussed in the next sections. Examples are marked in olive. To review the basic format is Tag.class {attribute: value}
  • Align text center:
  • Align text right:
  • Align text left:
  • Bold:
  • Normal font:
  • Italic:
  • Underline:
  • Strike through:
  • text-align: center
  • text-align: right
  • text-align: left
  • font-weight: bold
  • font-weight: normal
  • font-style: italic
  • text-decoration: underline
  • text-decoration: line-through
  • h1 {text-align: center}
  • p.right {text-align: right}
  • p {text-align: left}
  • h2 {font-weight: bold}
  • p {font-weight: normal}
  • h3 {font-style: italic}
  • h4 {text-decoration: underline}
  • p.cross {text-decoration: line-through}

More Information about Cascading Style Sheets

Changing Fonts

  • Changing fonts and font size is not more difficult than other style changes, but it can be trickier. It is trickier because the changes will affect the readability of your website. Using a fancy font may be pretty, but can also make your site unreadable to visitors. The same goes for making fonts smaller and fixing font sizes.4
  • Double font size:
  • Reduce font size in half:
  • Normal font size:
  • font-size: 200%
  • font-size: 50%
  • font-size: 100%
  • h1 {font-size: 200%}
  • p.small {font-size: 50%}
  • p {font-size: 100%}

More Information on Fonts

Changing Color

  • White #FFFFFF
  • Black #000000
  • Silver #C0C0C0
  • Gray #808080
  • Maroon #800000
  • Red #FF0000
  • Purple #800080
  • Fuchsia #FF00FF
  • Green #008000
  • Lime #00FF00
  • Olive #808000
  • Yellow #FFFF00
  • Navy #000080
  • Blue #0000FF
  • Teal #008080
  • Aqua #00FFFF
  • Note: White was not displayed in its color because it would not have appeared against the background.
  • Again, color is changed using a style sheet. Some examples are listed below. The attribute and value includes everything that is not bold.
    • Make background black: background-color: black
    • Make background green: background-color: #008000
    • Make the text red: color: #FF0000
    • Make the text navy: color: Navy
  • To change the background of an entire page, you simply insert the attribute and value into the style sheet with body as the tag. If you want to change text inside of another element (such as paragraph) you can use span as the tag. Here is an example of how these can be used.
    (Photo by Mahalo)
    (Photo by Mahalo)

More Information on Color

Adding Images

  • Adding images is done by using the <img> tag.14 Then, you tell the browser what image you want to illustrate by typing src="imagename". For example:
    • <img src="image.jpg">
  • Because the link is on your server, you don't have to include your website's address when linking. Simply include everything after your website address. For example, if you had saved a file named "image.jpg" in the "images" folder on Mahalo's server. You could link to it by typing:
    • <img src="images/image2.gif">
  • You will also want to add a bit more of information into the html code:
    1. The alt attribute allows you to give a short short description of the image.
      • <img src="image.jpg" alt="This is an image">
    2. The height and width attributes help set the text around the image and allow you to resize it if desired.
      • <img src="image.jpg" height="125px" width="60px">
      • <img src="image.jpg" height="75%" width="75%">

More Information on Using Images

Sources for Free Images

Creating Links

  • There are two types of links you need to know how to create: internal and external. Internal links are links parts of your page. External links are links to pages on other sites or pages on your site.
  • An external link has three parts:
    1. Opening tag (which includes a web address)
    2. Link text (the words you want the browser to show)
    3. Closing tag
  • It looks like this <a href="http://www.mahalo.com">Mahalo's Home Page</a> but would show up looking like this: Mahalo's Home Page.
  • If you are linking to a page in your own site (which you'll want to do as you expand your website), you are not required to (but can) use the entire web address. For example, if I wanted to link to a page on this site named webpage.html all I would need to type is:
    • <a href="webpage.html">Web Page</a>.
  • If you want to display an image instead of text for a link (for example, the Mahalo logo in the upper left is a link to Mahalo's home page, you replace the link text with an image tag. For example:
    • <a href="http://www.mahalo.com"><img src="mahalo_logo.gif" alt="Mahalo's Home Page"></a>.

Changing Link Style

Creating Lists

  • There are three types of lists you can create in HTML:
  1. Ordered (numbered) <ol></ol>
    • Each item in the list is surrounded by <li></li> tags.
      (Photo by Mahalo)
      (Photo by Mahalo)
  2. Unordered (bulleted) <ul></ul>
    • Each item in the list is surrounded by <li></li> tags.
      (Photo by Mahalo)
      (Photo by Mahalo)
  3. Definition <dl></dl>
    • Each term is surrounded by <dt></dt> tags.
    • Each definition is surrounded by <dd></dd> tags.
      (Photo by Mahalo)
      (Photo by Mahalo)

Uploading the Files to the Web

Conclusion

Subscribe to Mahalo's Weekly How To Email Newsletter

  • Get our best How To tips and ideas in your inbox each week

References for How to Make Your Own Website

  1. ↑ 1.0 1.1 W3C HTML 4.01 Specification: Text
  2. ↑ W3 Schools: Basic HTML Tags
  3. ↑ 3.0 3.1 W3C: Dave Raggett's Introduction to CSS
  4. ↑ useit.com: Let Users Control Font Size
  5. ↑ BCE 61 Resources: Font for Web Pages
  6. ↑ 6.0 6.1 W3 Schools: CSS font-family Property
  7. ↑ Code Style: Serif Font Sampler and Survey Results
  8. ↑ Code Style: Sans Serif Font Sampler and Survey Results
  9. ↑ Code Style: Monospace Font Sampler and Survey Results
  10. ↑ Code Style: Cursive Font Sampler and Survey Results
  11. ↑ Code Style: Fantasy Font Sampler and Survey Results
  12. ↑ The University of Texas at Austin: Generating Colors in HTML
  13. ↑ W3C: Basic HTML Data Types: Colors
  14. ↑ 14.0 14.1 14.2 W3C: Getting started with HTML
  15. ↑ JoeSchmidt.com: Leeching Images and the Leechers Who Leech Them(June 29, 2005)
  16. ↑ 16.0 16.1 EchoEcho.com: CSS Tutorial: CSS Links


Didn't find what you were looking for?

Ask a question about How to Make Your Own Website


110 characters left.