How to Create a Simple Web Page with HTML

Two Methods:Sample HTMLUsing HTML

Although you can make a webpage without knowing HTML, you will have inevitable problems no matter what webpage editor you're using and you will need to know HTML to fix it. There are many good websites where you can learn HTML, but this article shows you the basics of creating a website by using HTML. With this basic introduction, you'll soon be able to make a webpage from scratch!

Sample HTML

HTML Cheat Sheet

Sample Webpage with HTML

Using HTML

  1. Image titled Create a Simple Web Page With HTML Step 1
    1
    Understand what HTML is. HTML (Hyper Text Markup Language) is the coding language that makes web-pages, it is the skeleton of every web-page that exists. To see what it looks like, go into Internet Explorer, navigate to any website and right-click on the web-page selecting "View Source". You will see a page of code, and that is HTML. That code is what your browser sees and interprets into a human friendly web-page.
    • In Google Chrome press F12.
    • In Mozilla Firefox, press Ctrl + U to view the page's source code.
    • In Safari, select View→View Source (or Option + Command + U).
    • In Internet Explorer, the VIEW menu option is "source".
  2. Image titled Create a Simple Web Page With HTML Step 2
    2
    Make your initial web page as simple as possible. If you don't, you'll likely get overwhelmed by the syntax and the script languages.
    • It's important to remember that you'll be writing your information between an opening HTML tag and a closing HTML tag. An opening tag looks like this: <___> . A closing tag looks like this: </___> . Eventually, the ___ is replaced with a code.
  3. Image titled Create a Simple Web Page With HTML Step 3
    3
    Go to Start, then "Programs" and then "Accessories." and click "Notepad." It is a lot easier if you use Notepad++ once you choose the HTML language, everything you write will be automatically connected with different colors - that way it will be a lot easier to correct possible mistakes.
  4. Image titled Create a Simple Web Page With HTML Step 4
    4
    Tell the browser what language you are using. On the first line, type <!DOCTYPE>, this should always be the first tag in your code. On the second line add <html>. It is the second tag you write that tells the computer you're starting a web-page. It will also be closed last, so at the end of the document, close it off by typing this: </html>. This ends the web page.
  5. Image titled Create a Simple Web Page With HTML Step 5
    5
    Add the heading of the page as shown.
  6. Image titled Create a Simple Web Page With HTML Step 6
    6
    Give your page a title. A title is important because it gives your users an idea on what the page is all about. Also, when users bookmark your site, that title is all they will see in their bookmark list. The title for HTML code is <title>. Close it off at the end of your title by writing </title> The title is going to show on the tab, don't expect it to be the title of the actual website.
  7. Image titled Create a Simple Web Page With HTML Step 7
    7
    Work on the body of the page. Type <body> to open the body tag. Then close the body tag by typing </body>. The bulk of the information for your web-page goes between <body> and </body>.
    • To give your web-page a background color, you can add a style to the body. To add a background color, add this tag <body style="background-color:silver">. You can try a different color or even a hex code. The words in the quotation marks are known as "attributes." They must be surrounded by quotation marks!
  8. Image titled Create a Simple Web Page With HTML Step 8
    8
    Write some text between the body tags.
    • To make the text go to the next line (like pressing "Enter" on your keyboard), write

    • Want to add a marquee, otherwise known as a word that moves across a screen? Simply type <marquee>TEXT GOES HERE</marquee>.
  9. Image titled Create a Simple Web Page With HTML Step 9
    9
    Add some pictures. If you want to put a picture from the Internet onto your web page, the HTML code for pictures is <img src="../url"> . The closing tag is: . However, the closing tag is optional.
  10. Image titled Create a Simple Web Page With HTML Step 10
    10
    Check to make sure all of your tags are closed. Your webpage should look something like this:




    <title>My Web-page</title>
    <body bgcolor="yellow">
    I love wikiHow because
    <marquee>It's the best website in the world!</marquee>
    <img src="../http://www.wikihow.com/skins/common/images/wikiHow_logo_5.gif"></body>



  11. Image titled Create a Simple Web Page With HTML Step 11
    11
    Save your work. Go to "save as", put a filename with an .html extension (such as "testfile.html") and choose "all files" or "text" under file type. It won't work if both are not done. Go find the page wherever you saved it, double click it, and your default web browser should open up your very own web-page.

Tips

  • Use a template for testing changes you make on personal web sites such as Myspace, prior to making the actual changes.
  • A good application for writing HTML is Espresso: it simplifies writing code by giving you different shortcuts and you can view your webpage with the "Preview" feature, without having to keep changing tags from .html to .txt!
  • To make more advanced web sites, use a web editor like Microsoft Expression Web.
  • You can also try Adobe Dreamweaver. It should help you, when you have some problems, as it shows, what problem you have and how to fix it.
  • You can find many tutorials to help with this around the web. Do a google search for HTML code tutorials.
  • This article tells you how to create a web-page. Consult the related wikiHows below for information on how to publish your web-page.
  • Here is an example of an incorrect placement of tags <tag1><tag2> statements </tag1></tag2>
  • Make sure all errors are corrected so they can search it up easily.
  • Many people make a living designing pages. Work on your skills and you might be able to as well!
  • Closing tags cannot be placed anywhere. The "last" tag "in" must be the "first" tag "out." It should look like this: <tag1><tag2> statements </tag2></tag1>
  • If you want to tweak the code, find the file and rename the ".htm" to ".txt". Alternatively, you could save two copies of the code, one of them being .htm and the other one being .txt . This allows you to edit edit it later on.
  • Being able to whip up a simple web-page in minutes flat can be a useful method of impressing your friends. You could walk up to one of your friends and offer to make one for them. They will probably be impressed and flattered.
  • If your web-page isn't working, copy and paste the sample HTML code from above and save as instructed, then view the page. Play around with the existing code as you learn.
  • When you open a tag, you must close it unless it is one of the special tags that don't need to be closed. These would include <img> or <hr>. However, when in doubt, close the tag.

Warnings

  • Make sure you manually type ".html" or ".htm" at the end of the file name and choose "all files" or "txt" under file type. It won't work if both are not done.
  • The <marquee> tag is not an official html tag as defined by the W3C (World Wide Web Consortium), and may not work in all browsers. This tag was created and first supported by Internet Explorer and now has some legacy support by other browsers.
  • Be sure that you host your own images so you're not stealing bandwidth of the current host. You can host images at websites such as Photobucket, Flickr or ImageShack.
  • The "bgcolor" attribute is outdated. The correct way to change the background color of elements is to use CSS.

Things You'll Need

  • A text editing program such as Notepad (for Windows) or Textedit (for Mac).
  • A browser such as Mozilla Firefox or Safari.
  • Computer with an internet connection
  • File manager of some sort such as Windows Explorer (optional)
  • An image host site such as Photobucket or Flickr

Sources and Citations

Article Info

Categories: HTML