Here are 10 HTML tips and tricks for newbies. If you're just starting out with building your Web pages, these techniques should be very useful to you!
1. Always close your HTML tags
When you type an opening HTML tag (e.g.,
<b> <p>), always place the corresponding closing tag at the end. For example:<b>My favorite animals are horses and elephants.</b><p>My favorite animals are horses and elephants.</p><h2>My favorite animals are horses and elephants.</h2>
This will ensure that your HTML pages work properly on all browsers, and will help to prevent any strange problems occurring in your pages! This is especially important with tags such as
<div>, <span>, <table>, <tr>and.<td>
Some tags don't have a corresponding closing tag - just use these tags on their own. Examples include:
- The
<br>tag, for creating line breaks - The
<img>tag, for inserting images
With XHTML markup, you even have to close tags like
br and img. You can do this in a short-hand way by placing a "/" before the closing angle bracket (">") - for example, <br/> and <img ... />.2. Style HTML using style sheets wherever possible
Style sheets will make your HTML coding life so much easier. No more
<font> tags everywhere! You also get much finer control over the way your pages look, and you can change their appearance just by editing one style sheet file.3. Use an HTML validator
It's a great idea to run your Web pages through an HTML validator before you publish them on your Web site. These programs will pick up potential problems such as missing closing tags on tables, and using tags that won't work properly on all browsers. Don't forget - just because your page looks great in the browser you're viewing it with doesn't mean it will work on other browsers!
HTML validators are also a good way to learn about the correct way to use HTML tags - you can learn from your mistakes!
Some good free validators on the Web include the W3C Markup Validation Service and the WDG HTML Validator. Many modern web authoring packages have built-in HTML checkers too.
4. Use HTML comments wisely
To make your HTML code clearer for you (and for others), you can add comments to your code. These are snippets of code that are ignored by Web browsers, so they're useful for adding short notes and reminders within the code:
<!-- Navigation area: Highlight a menu item with the "hi" class -->
<div id="nav">
<ul>
<li><a href="/">Home</a></li>
<li class="hi"><a href="/about/">About</a></li>
</ul>
</div>5. Embedding images in HTML
Pointing correctly to images using the <img> tag is a common stumbling block for beginners. Often your Web page will look great on your desktop PC, but when you upload the page to your site, all the images are broken!
The problem isn't helped by some web page editors, which incorrectly place "file://" image URLs instead of using relative URLs!
Follow these simple rules to make sure your HTML images appear correctly every time.
A) If possible, use relative URLs
Relative URLs are usually the best to use because they will work wherever the page and images are located, provided they're always in the same place relative to each other. For example, if the image is in the same folder as the Web page, use:
<img src="myphoto.jpg">
If the image is in an
images folder at the same level as the Web page, use:
<img src="images/myphoto.jpg">
If the image is in an
images folder at a level above the Web page, use:
<img src="../images/myphoto.jpg">
B) Alternatively, use URLs relative to the document root
If you have all your images in an
images folder in the top level of your site (the document root or web root), you can reference images like this:
<img src="/images/myphoto.jpg">
This has the advantage that you can move your Web page anywhere within your site, and the images will still display, provided you keep the images in this global
images folder.
The disadvantage of this approach is that it will only work when your Web pages are being displayed via a Web server (using
http://), not when viewed directly from your hard drive (using file://).C) Do not use absolute URLs!
If at all possible, avoid using absolute URLs within your site. An absolute URL is a URL that begins with
http:// or file://. In particular, if the Web page on your hard drive contains an image URL like this:
<img src="file:///C:|/mywebsite/images/myphoto.jpg">
it will not work when you upload it to your Web server, as the
img tag is directly referencing the file on your hard drive! Change the link to a relative link such as:
<img src="myphoto.jpg">
or maybe:
<img src="../images/myphoto.jpg">
as described in Rule A above.
6. Use widths and heights with HTML images
It's a good idea to specify the
width and height of an image when using an <img> tag. For example:
<img src="myphoto.jpg" width="234" height="123">
The advantage of doing this is that the Web browser can format the page more quickly as it is loaded, as it knows how to lay out the images before they've been downloaded. This means that your visitors can start surfing your page without having to wait for all the images to display!
Most graphics packages (Photoshop, Paint Shop Pro, etc) allow you to view the width and height of an image (in pixels) so that you can slot the values into the <img> tag. You can also right-click on the image and select Properties (in Internet Explorer) or view the image in a window on its own and read the width and height in the title bar (in most other browsers).
7. Non-breaking spaces in HTML
Sometimes you want to keep certain words together so that they're not split over two lines. The way to do this is with a non-breaking space. In HTML the markup for a non-breaking space looks like this:
For example, the following words will wrap if they fall at the end of a line:
<p>The quick brown fox</p>
while this example, which uses a non-breaking space, will keep the words "brown" and "fox" together even if they fall at the end of a line:
<p>The quick brown fox</p>
8. Use tables for tabular data, CSS for layout
Tables have traditionally been used to lay out content on the page; however, this was never their intended use. They're really meant to be used for displaying tabular data (such as data from a spreadsheet, for example).
With the positioning capabilities of CSS, you can build HTML pages that just contain the page content, and use a separate style sheet to lay the content out. Although it has a steeper learning curve than tables-based layouts, CSS positioning is well worth learning as your resulting sites will be faster-loading, easier to maintain and more accessible.
CSS positioning can also do a lot of cool tricks that are very hard with tables, and you can also change the entire look of your site just by changing your style sheet (a great example of this is CSS Zen Garden).
9. Creating empty table cells
Sometimes you'll want to create table cells (
<td>s) with nothing in them; for example, when a particular row doesn't have any data for one of its columns. Usually, the best way to create an empty table cell is with a non-breaking space, as follows:
<td> </td>
Don't just use
<td></td> as this will cause your tables to appear rather strange on some browsers!10. The spacer GIF trick
For really precise control over page layout, and if you haven't yet got the hang of CSS positioning, you can't beat the old spacer GIF trick. This involves using a 1-pixel x 1 pixel transparent GIF, which will be invisible in your Web pages, and using the
width and height attributes to control the precise padding between page elements such as images, text and table cells. For example, the code:
<img src="one.gif" width="20" height="20" border="0">
<img src="space.gif" width="10" height="1" border="0">
<img src="two.gif" width="20" height="20" border="0">
will create a 10-pixel horizontal gap between the two images,
one.gif and two.gif.
You can use spacer GIFs in table cells to "pad out" the table cell and make sure it doesn't shrink below a certain width or height. In this code example:
<td><img src="space.gif" width="1" height="20" border="0"></td>
the table cell will always be at least 20 pixels high.
It's easy to make a spacer GIF in your graphics package - create a new 1-pixel x 1-pixel image then save it as a GIF with a transparent background. :)
Hopefully, you've enjoyed these HTML tips and found them useful. Good luck with your website!
No comments:
Post a Comment