|
|
|
A Beginners Guide to Web Page Design
Designing your own successful web page can seem difficult and nearly impossible if you do not do a little research first. The reason you need to know the basics of web page design is because the design of your website will actually influence whether...
Five Common Web Design Mistakes
There are often many mistakes encountered when creating a webpage or website. Learn about the top five website mistakes, and how to avoid them. Mistake #1 Web page size. If your website takes longer than 10-15 seconds to load you should...
Planning a Web Site
Have you ever wondered why some web sites look like the marvels of creativity and some look like specifically created to confound visitors? Ideally, no individuals make a web site to inconvenience their visitor but end up doing so because no serious...
The 3 Musts for Running Your Web Design Business Efficiently and Effectively
There is no shortage of Web sites and books on how to create graphics for Web sites and how to use HTML or programming software. However, in order to run a Web design business efficiently and effectively you need to know a whole lot more than just...
The Secrets to Building a Successful Web Site
If you're doing business on the Internet, one of the most important aspects of your success is your web site. If your web site doesn't look professional, no matter what product you're offering, your chance of success will be minimal. Before you...
|
|
| |
|
|
|
|
YOUR FIRST HTML PAGE - IV
In the preceding sections, you learnt how to come up with an elementary HTML page. You learnt the tags that are the backbone of an average HTML page, namely, , , , ,
and .
Assuming you could assimilate the gushing fountain of wisdom in the previous articles, we move onto the streams of more evolved tags. Let's start with graphics.
Graphics enhance the look of a page, they make it more informative [One picture is worth a thousand words, etc.], and they give your page an identity. But don't go over board - the total size of one page should not, ideally, exceed 25 KB. There are many other issues involved with web-based graphics, but at this moment, we are just covering the HTMLization of graphic files.
== Step 7: ==
To include graphics, we use the ![]() tag in this manner:
Where "picture.gif" is some graphic file that you already have in the same folder. If the graphic file is not present in the same folder as your HTML page, then you have to specify the entire path of the file being used. For example, if your HTML file is in the root directory, and "picture.gif" is in a sub-directory - graphics - of your root-directory, the syntax turns out to be:
"/" (forward slash) is for servers. For your local hard-drive, you should use "" (back slash).
SRC is an attribute of ![]() and it stands for "source".
There are primarily two graphic file formats prevalent on the web, namely, GIF and JPG. GIF files use lesser colors, and hence are smaller in size and load quicker, and further, animated graphics can be created out of GIF files. JPG files are more refined, and we use them to display graphics that require clarity and greater pixel density, for instance, a photograph. More efficacious formats are being developed in the meantime to suit Internet compatibility.
In some tags, you don't have to use the closing tag. We don't use with ![]() .
Let us borrow the HTML code of our existing page, and in that, include the ![]() tag too.
This is my first, hand-coded HTML page
Ah! This is for the first time I'm writing my own
HTML. The world is so different out here. Marvelous!
For more cool content, go to Bytesworth.com .
Save and refresh your page.
You might have observed that on many web pages, they use fancy graphics to show various links, as you can see the fancy gray buttons on this web site. We perform this by
We have inserted the ![]() tag between , so instead of the text link, now we have a graphic link.
Our modified HTML source page, looks like this (repetitive code has been replaced by dots):
..............
..............
..............
..............
..............
You can explore the ![]() tag further on your own, but there is another crucial attribute of this tag that we are going to cover before moving on to the next section - the ALT attribute - alternative.
We use the ALT attribute inside ![]() to insert text that gets displayed or sounded when the cursor is hovered over the image, or while the image is being loaded, or when the graphics display has been disabled in the browser, or when your site is being viewed on a non-graphics browser, or when visually challenged people are browsing on a voice-enabled browser.
..............
..............
..............
..............
..............
This sums up the ![]() tag. It's an important tag, and hence, has taken up an entire chapter. You'll find yourself implementing it again and again, but please don't over-do it.
We move on to tables now.
About the Author
Amrit Hallan is a freelance web designer. For all web site
development and web promotion needs, you can get in touch with
him at http://www.bytesworth.com. For more such articles,
visit http://www.bytesworth.com/articles and
http://www.bytesworth.com/learn You can subscribe to his
newsletter [BYTESWORTH REACHOUT] on Web Designing Tips & Tricks
by sending a blank email at Bytesworth-subscribe@topica.com
|
|
|
|
|
|