Your Ad Here

Working with HTML


This section contains articles covering basic aspects of editing the HTML portion of your website template.

Opening an HTML file

To open an HTML file with HTML editor you should select "File/Open" from top menu and browse to the location of your HTML file. Another and more simple way to open file is just drag and drop it from file browser to your HTML editor window.

image 1

Other ways of file opening, such as copy and paste, may cause HTML structure damage and are not recommended.

Changing text in HTML editor

Web design template is useless without content, so first of all you should add own text there. Changing text in "html" file using "Html" editor is so easy. When you will open "html" file from your web design template for the first time you will see that all text blocks are filled with dummy text. All you have to do is to substitute it with your own text.

image 2
Dreamweaver Design Mode

image 3
FrontPage Normal Tab

All professional "Html"editors have design view, so you don't have to worry about all that "html" tags - you can edit your text and see how site will look after publishing at the same time. To turn this view on you should select "View/Design" from the top menu for Macromedia Dreamweaver or click "Normal" tab at the bottom for Microsoft FrontPage. You can type your text directly in "Html" editor or copy and paste it from your documents or previous design web site.

Adding images using HTML editor

To make your web site based on our web design template unique you can substitute included images with your own or add additional images there. To substitute existent image with a new one you should do following. Copy your image file to the images folder of your web design template.

If you are using Microsoft FrontPage double click image you want to change. In dialog that will appear after that select "General" tab. There will be input box with image name and "Browse..." button to the right of it. Click it to browse to your image file.

image 4
FrontPage Picture Properties

For Macromedia Dreamweaver users that routine is quite easy. Just double click image you want to change and browse to your new image file location. If you want change image directly from html code your have to substitute value of src image attribute:

Before: <img src="/img_articles/10890/images/logo.jpg">
After: <img src="/img_articles/10890/images/new_logo.jpg">

Setting links in HTML editor

A hyper reference is the main advantage of HTML documents. So it's very important to know how to add links in your web design template. This procedure is very simple if you're using HTML editor. If you're using Macromedia Dreamweaver select text or image that you want to be linked to some url. Then go to Properties panel (press "CTRL+F3" if you can't see it for any reasons). In this panel you will see Link input box. Fill it with appropriate url.

image 5
Link Input Box

For Microsoft FrontPage user link adding procedure is following. Right click on selected text or image and select "Hyperlink..." from context menu. Fill Address input box with appropriate url.

image 6
Address Input Box

If you have some skills in HTML coding you can put hyper link directly into HTML code. You have to put opening reference tag before content you want to be linked and closing tag after that:

<a href="/img_articles/10890/your_url_here">Content goes here</a>

Note: If double clicking on image doesn't works it means that this is not a content image but background image.

Adding images to your web design template. Copy your image file to the images folder of your web design template. If you are using Macromedia Dreamweaver for managing out web design template you should choose "Insert/Image..." from top menu and browse to your image file. If you are Microsoft FrontPage user choose "Insert/Picture/From File..." and browse to the location of your image file.



About the Author:

Click to Visit Author's Website

Igor Lognikov is an editor at Web Design Library, the author of many pamphlets related to the web design industry and a fully accredited card-carrying journalist since 1999.

Author's URL: Igor Lognikov, Editor
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Learn web design basics about usability, layout, colors, design principles and more. Take an in-depth look at what attracts a visitor to your site. More Web Design Basics: Most Popular Materials | Fresh Materials

Add comments to "Working with HTML"

Only registered users can write comment

No comments yet...