How to Edit an HTML Source

You don't need an HTML editor to edit HTML source.

One of the best ways to learn Web development is to study the work of other developers. You can learn HTML tricks, such as image rollovers and animated menus, by copying a website's source code and experimenting with it. Alter the look of an existing HTML page by moving elements, adding new ones and changing attributes in the page's Style Sheet section. If you don't have HTML editing software, use Notepad to make your changes.

Things You'll Need

• HTML Editor or Notepad

Instructions

1. Visit a website that has visual or interactive features that you like.

2. Click "View" at the top of your browser and select "View Source." The browser will open a window containing the HTML source code for the webpage.

3. Right-click any area on the page and select "Copy."

4. Open an HTML editor or Notepad and create a new document. Press "CTRL+V." Windows will paste the HTML code into the document.

5. Press "CTRL+V." Windows will paste the HTML code into the document.

6. Examine the code. You will see the standard HTML tags such as html, body and head. If the webpage uses JavaScript, you will see script tags as well.

7. Find one of the elements in the body section of the document. For example, if the page has a button, input box or heading, find one of these and change the element's text property by typing in a new value.

8. Add additional elements to the page as needed. For example, to add a new image, add the following code to the body section:

   <img src="xyz.gif" alt="my image" />

   Replace xyz.gif with the name of an image on your hard drive.

9. Save the document and view it in your browser. You will see the changes you made.

10. Return to the document and find the style section near the top of the page. This is where developers usually define the colors, fonts, dimensions and other visual properties of elements on a page. For example, you may see a style section similar to this:

    <style>

    .class1 {color:red; font-weight:bold; height:100px; width:200px; }

    </style>

    This CSS class, "class1", will apply these attributes to any page element that references the class. Alter some of these values, save the page and see how your changes affected the page.

11. Continue to study the HTML source, modify it and view your changes in the browser. If you see an interesting page element such as a transparent menu with gold text, find that element in the source code and figure out how the developer created the effect.

Tips & Warnings

• Many HTML editors have a "View Design" button. These buttons simplify the task of viewing your HTML changes. Click the button and you can see how the page will look in a browser without having to save the page and open a browser.

References

• Indiana University: About HTML -- Knowledge Base
• W3: W3C XHTML2 Working Group Home Page

Resources

• CNET: Web Site Tools -- Free Software Downloads and Software Reviews