Edit

How to Create a Simple Web Page With HTML

edits by:Stephen Waines, James Quirk, Tom Viren, Jack Herrick (see all)

Article
Edit Discuss View History

Yes, you can make a webpage without learning HTML. But should you? No. Because, for one thing, you will have problems somewhere down the road, 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 HTMLsuch as HTML Goodies.com. This article shows you the basics of creating a website in HTML. With this basic introduction, you'll soon be able to make a webpage from scratch!

edit Steps

  1. 1
    Understand what HTML is. Technically, it stands for Hypertext Markup Language, but that's not important. It's the coding language that make web-pages. Go into Netscape and choose from the VIEW menu "page source" (earlier versions called this "document source"). Or, in Internet Explorer, the VIEW menu option is "source". In Mozilla Firefox, press [Ctrl]+U to view the page's source code. In Safari, select View - View Source (or Option+Command+U). You will see a page of code, and that is HTML. That code is what your browser sees and then interprets it into that nice web-page you see.
  2. 2
    Remember: not all pages are equally complex! Start with a really simple page, or you'll 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: <___> and a closing tag is like so: </___> where the ___ is replaced with a code.
  3. 3
    Go to Start > Programs > Accessories > Click Notepad.
  4. 4
    Tell the browser what language we are using. Type <html>. It is the first tag we write (tells the computer we're starting a web-page), and it will be closed last, so at the end of the document, close it off by typing this : </html> (ends web-page)
  5. 5
    Add the heading of the page as shown.
  6. 6
    Give your page a title. A title is important because (a.) it gives your users an idea what the page is about, and (b.) when users bookmark your site, that title is all they will see in their bookmark list. The title HTML code is <title>. Close it off at the end of your title by writing </title>.
  7. 7
    Work on the body of the page. Type <body> to open the body tag. Then close the body tag: </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. Instead of writing just <body> write <body style="background-color:red">. 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. 8
    Write some text between the body tags.
    • To make the text go to the next line (like pressing "Enter" on your keyboard) write <div class='nowiki' val="
      "><br>.
    • Want to add a marquee? Simple! <marquee>TEXT GOES HERE</marquee> A marquee is a word that moves across the screen.
  9. 9
    Add some pictures. If you want to put a picture from the Internet onto your web page, this is the HTML code for pictures : <img src="URL"> . The closing tag is: </img> but it is optional.
  10. 10
    Check to make sure all of your tags are closed. Your webpage should look something like this:

    <html>
    <head>
    <title>My Web-page</title>
    </head><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"></img>
    </body>
    </html>
  11. 11
    Save by going to "save as", put a filename with an .html extension (such as "testfile.html")and choose "all files" or "txt" under file type. It won't work if both are not done. Now go find it wherever you saved it, double click it, and your default web browser should open up your very own web-page!

edit Tips

  • 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 those tags that don't need to be closed, like <img> or <hr>. However, when in doubt, close the tag.
  • Closing tags cannot be placed anywhere. The "last" tag "in" must be the "first" tag "out"like this <tag1><tag2> statements </tag2></tag1>
  • Here is an example of an incorrect placement of tags <tag1><tag2> statements </tag1></tag2>
  • This article tells you how to create a web-page. Consult the Related wikiHows below for information on how to publish your web-page.
  • If you want to tweak the code, find the file and rename the ".htm" to ".txt".
  • 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 them and say "You want a web-page?" and then make one for them. They will probably be impressed and flattered!
  • Use as a template for testing changes you make on personal web sites such as Myspace, prior to making the actual changes.
  • To make more advanced web sites, use a web editor, like Microsoft Expression Web
  • if your making a simple page you can do this by using notepad..

edit Warnings

  • Make sure you manually type ".html" or 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.
  • 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 or Imageshack.
  • 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.
  • The "bgcolor" attribute is outdated. The correct way to change the background color of elements is to use CSS.

edit 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)

edit Related wikiHows

Articles for You to Write

Here is a list of suggested articles that have not yet been written. You can help by researching and writing one of these articles. To get started writing one of these articles, click on the red link of a title below.

Article Info

Last edited:
March 1, 2011 by Connor Fleming

Categories:
HTML

Recent edits by: Rejohn flores, Oliver, Shizuma (see all)

Article Tools

Share this Article:

Thanks to all authors for creating a page that has been read 217,329 times.

Was this article accurate?

YesNo