Let's learn the mathematics of the World Wide Web. Mathametics of WWW, huh? I'm sure it has taken many of you out there by surprise. Relax ... it's not a difficult equation. As simple as 123 ...; just memorize the following two equations, and you're done with learning the basics of the WWW mathematics.
An extension to Lesson 8 – HTML Graphics, this particular lesson has been solely written to guide you on ways of dealing with inline images and setting picture indentations.
Welcome to Lesson 8(a) – Inline Images
Ever thought of the magic wand behind the web world being so popular? Well ... it's the superb capability to embed graphics and other multimedia objects into web pages. And creating that snazzy kind of a web page takes an experienced eye for graphic designing.
Over the net you must have come across loads of web pages wherein pictures and graphics are displayed in the same page as the rest of the content. This is what is known as inline images. Inline images are typically different files, either in GIF or JPG format, and are introduced in your web pages within the <img src> tag. The HTML code that is used for the inline image is:
<img src="yourimage.gif"> - yourimage.gif is the name of a GIF file that is placed in the same folder as your HTML document.
Inline images are always context sensitive and are displayed by your browser in the text segments of the web page. And if you want to have the image on a separate line all together, then simply put in the <p> tag i.e. the paragraph tags followed by <img src...>.
With the image tags inserted in your HTML document, now you may want to go ahead with the indentation part. Courtesy the <img...> tags, web authors can easily gain control over the image alliance flanking the content. Indentations can be of three different types:
- Top – image header in line with the top of the text
- Middle –image mid-portion in line with the middle of the text
- Bottom –image base in line with the bottom of the text.
Following is an example:
An image top aligned with the top of the text 
and then comes the middle alignment
and finally the bottom alignment
Finally, the alt=" " element of HTML. You may have site viewers out there who may be using a text-only browser to access the pages on your website. And text-only browsers, as you can understand, will never display images. So what to do in those cases? None of your HTML tagging for inline images will work! Under such circumstances, web authors generally take the help of a vivid string of text acting as the substitute of the <img ...> tags. The alt="..." element reinstates the image space with that eloquent text string, and this is how the page appears:
[IMAGE]
|
HTML Lessons
Follows the rest of the text-----follows the rest of the text |
|
The [IMAGE] displayed at the top of the page clearly indicates that there is a graphic insertion. In fact, in these cases the <img> tag can even be modified to display something like this: <img alt="Tutorial on:" src="html.gif">:
[Tutorial on]
|
HTML Lessons
Follows the rest of the text-----follows the rest of the text |
|
The height and width of HTML images are an indispensable factor. These are the key elements lending the graphic files a proper facet in pixels. The code used to include the height and the width of your image is:
<img src="yourimage.gif" width=X height=Y >, ‘X’ being the width and ‘Y’ being the height of the image. Both measured in pixels.
Applying images to your HTML is not at all difficult a task. Follow the steps given below, and make your web pages appear with a stunning look:
- Open your working HTML document.
- Above the <h1> </h1> tags, enter the following:
<img src="html.gif" width=2 height=3.5>
This HTML format will insert, at the very top of your page.
- Once you’re done, save and reload in your web browser, to view the changes made.
Irrespective of the original size of the image, it can always be altered, but the domino effect can never be bet upon. For example, if you use a large image, and want to make it appear even larger, the resulting image may be a grainy one. On the other hand using a lower number to decrease the size of the image may make it fuzzy! But once again as innovative authors, experiments can always be made! So go ahead with your quotient of creativity!
Original Authors: Rajat
Edit Update Authors: M.A.Harris
Updated On: 28/05/2009
