In this post, we want to explain 10 important tips and tricks for working with HTML for beginners. If you have just started building web pages; These techniques will come in handy.
1. Always close your HTML tags.
When you open an HTML tag by typing it (for example <b>, <p>), always type the command to close that tag at the end of the section so that it does not run in the next section. for example:
- <b> Horses and elephants are my favorite animals. </b>
- <p> Horses and elephants are my favorite animals. </p>
- <h2> Horses and elephants are my favorite animals. </h2>
This will make your HTML pages work properly in all browsers, and help you avoid any strange problems with your pages. This is especially important for tags such as <div>, <span>, <table>, <tr> and <td>.
Some tags do not have a tag closure command – these tags should be used alone, which include:
- Tag <br> to break the line and go to the next line
- <img> tag to insert an image
Using XHTML, you can even close tags like br and img by putting a “/” before closing (“<“). For example, <br/> and <img… /> you can learn more about XHTML in our XHTML tutorials.
2- Change the HTML style by using the style sheet wherever possible.
Style sheets make your HTML coding style much easier. You no longer need to use the <font> tag everywhere. You can also emphasize the style and model of the pages; You have better control and you can change the appearance of your pages just by editing a style sheet file.
3. Use an HTML validator.
It is a good idea to run the pages in HTML before publishing them on your website. These programs have potential problems such as not using the phrase “close tags” in tables and using tags that do not work properly in all browsers; They show. Don’t forget – just because your page looks great in your own browser doesn’t mean it works in other browsers!
HTML validators are also a good way to learn how to use HTML tags correctly and you can learn from your mistakes!
Some free web validators include the W3C Markup validation service and WDG HTML validation. Many modern web page training packages also have built-in HTML checkers.
4. Use HTML comments wisely.
To make the HTML code clearer to you (and others), you can add comments to your code. Comments are small codes that are ignored by web browsers, so they can be useful for adding short notes and reminders within code:
<! – Navigation area: Highlight a menu item with the “hi” class ->
<div id = ”nav”>
<li> <a href=”/”> Home </a> </li>
<li class = ”hi”> <a href=”/about/”> About </a> </li>
5- Putting images in HTML
Proper reference to images using the <img> tag is a common hurdle for beginners. Most of the time your web page looks great on your desktop computer, but when you load the page on your site, all the images are corrupted!
This problem is not solved by some web page editors who mistakenly put “file: //” image URLs instead of using relative URLs.
Follow these simple rules to make sure the HTML images appear correctly each time.
A) Use relative URLs if possible.
Relative URLs are usually the best choice to use because they will work wherever the page and images are, provided they are always in the same place relative to each other. For example, if the image is in the same folder as the webpage, use the following code:
<img src = ”myphoto.jpg”>
If the image in the image folder is at the same level as the webpage; Use the following code:
<img src = ”images / myphoto.jpg”>
B) Alternatively, use URLs related to the root of the document
If all of your images are in an image folder above your site (document document or web), you can access these images using the following code:
<img src = ”/ images / myphoto.jpg”>
It has the advantage that you can move your webpage anywhere on your site, and the images will continue to be displayed, as long as you keep the images in this public image folder.
The disadvantage of this approach is that it only works when your web pages are displayed through a web server (using //: http), not when viewed directly from your hard drive (using / /: file).
c) Do not use definite URLs!
If possible, avoid using definitive URLs on your site. An absolute URL that starts with //: http or //: file. Specifically, if the webpage on your hard drive contains an image URL like this:
<img src = ”file: /// C: | /mywebsite/images/myphoto.jpg”>
<img src = ”../ images / myphoto.jpg”>
As described in Rule A above.
6. You can specify the width and height of HTML images.
It is a good idea to specify the width and height of an image when using the <img> tag. For example:
<img src = ”myphoto.jpg” width = ”234 ″ height =” 123 ″>
The advantage of doing this is that the web browser can download the page faster as soon as it is downloaded; Format because it knows how to play images before downloading. This means that your visitors can browse without having to wait for all the images to be displayed on your page.
Most graphic packages (Photoshop, Paint Shop Pro, etc.) allow you to view the width and height of an image (in pixels) so you can put values in the <img> tag. You can also right-click on the image and select Properties (in Internet Explorer) or view the image in a single window and see the width and height in the title bar (in most other browsers).
7- Space without spaces in HTML
Sometimes you want to keep certain words together so that part of it does not move to the next line. How to do this in HTML is to use spaces for non-spaced spaces, which are as follows:
For example, the following words if placed at the end of a line; They are not separated.
<p> The quick brown fox </p>
Because in this example, it uses a non-separate space, holding the words “fox” and “brown” together, even if they are at the end of a line:
<p> The quick brown & nbsp; fox </p>
8. Use tables for tabular data and CSS for layouts
Tables are traditionally used to insert content on the page. But this alone is not their use. They are actually used to display tabular data (such as slide page data).
With CSS positioning, you can create HTML pages that contain only the content of the page and use a separate style sheet to design the content. Although it has a slower learning curve than table-based designs, CSS positioning is worth learning because your selected sites will be downloaded faster, easier to maintain, and more accessible.
CSS positioning can also do some cool tricks that are very difficult to apply with spreadsheet techniques, and you can also change the look of your site just by changing your style sheet (a good example of this is CSS Zen Garden). Is).
9- Creating empty table cells
Sometimes you prefer to create empty cells in the table (s <td>) that have nothing in them. Especially when a particular row has no data for one of its columns. Usually the best way to create an empty house in a table with unbroken space is as follows:
<td> & nbsp; </td>
Don’t just use <td> </td> as this will make your tables look weird in some browsers!
10 – GIF spacing trick
You can use the old GIF spacing trick to have precise control over the screen, and if you have not yet mastered CSS positioning. This includes using a 1-pixel x 1-pixel GIF that will be invisible on your web pages, and using the width and height attributes for precise control between page elements such as images, text, and cells. Example code:
It will create a 10 pixel horizontal slit between two images, one and two Tweet.
You can use spaced GIFs in the cell to close the table cell and make sure it does not fall below a certain width or height. In this code example:
<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 ″>
A 10-pixel horizontal slit between one.gif and two.gif images. Will create.
You can use spacing GIFs in the cells of a table to close that table cell and make sure that their width or height is not reduced. In this example code:
<td> <img src = ”space.gif” width = ”1 ″ height =” 20 ″ border = ”0 ″> </td>
The table cell will be at least 20 pixels high. Creating a spatial GIF in your graphic packages is easy – create a new 1-pixel x 1-pixel image and then save it as a GIF with an invisible background.