We accept safe and secure Credit Card and PayPal Payments.
 
Perl Scripts

All Count
Attachment Mailer
Perl Scripts Build A FAQ Plus
Perl Scripts Clock In Center
eBackup Automated
Easy Poll
eSurvey
Fetch a File
Form Maker
Mailing List Server
MySQL Mate
PDF Creation
QCart
Quick Fix
Quote of the day
Speed Search
Task Manager
Traffic Pack
Upload Plus
Upload Gold
Upload Pro
Website Manager

 
Free Perl Downloads

Free Perl Scripts Main Page
Free Perl Scripts 404 Alerter
AccessLog Viewer
Build A FAQ
PHP Scripts eBackup
Free PHP Scripts ErrorLog Viewer
eVars - Server Info
HT Pass Creator
Upload Lite
Website Manager

 
JavaScripts

Free Java Scripts Alert Boxes
Free JavaScripts Browser Sniffer
Check email
Generators
Slide Show
Sudoku
Window Maker
More...

 
Extra Utilities

ASP Scripts Ascii Codes
Free ASP Scripts Color Picker
Font Finder
HT Pass Creator
Meta Cloak
Meta Magic
Pano Zooms
SlideShow
Server Size

 
Online Tutorials

Free HTML Scripts Glossary
Free HTML Scripts HTML
JavaScript
MySQL
SSI
Build Traffic
Other

 
Miscellaneous

About Us
Graphics
Testimonials
Installations
Latest versions

 
Hawk Eye in Tennis

Should Hawk Eye replace linesmen and lineswomen at all tennis tournaments?







 
View all Polls

Run Polls on your site

Run your own Surveys

 
Store Download FAQs Contact Us Support Programming Policies  
Contents Intro Your first page Text Images Links Lists Tables
Frames Forms Sounds Styles Symbols Colors Tags Publish Index

Chapter 3

Images

Insert an image on your home page. Easy. Just type :

<IMG src="image.gif" >

image.gif , is the name of your image file. The src="" attribute is used to specify the exact location of your file on your server's or your hard drive. FILE NAMES ARE CASE SENSITIVE. So it might look like this..

<IMG src="../images/image.GIF" >

To help ensure your files are found by the server , its a good idea to never use Capital letters in your file names. Most servers use UNIX as an operating system which is case sensitive.
To ensure a smooth page load you must use the width and height attributes like this..

<IMG src="image.gif" width="130" height="30" >

.. otherwise the browser does not know how much room to allocate for each image and bounces elements around until the image dimensions have been determined. The values 130 and 30 represent the width and height of the image in pixels. HTML editors automatically assign the images actual width and height. Easy. You can use the attribute border="0" to eliminate the automatically assigned border when used within "A" tags. Most tags can also be assigned a name, which does not alter the tags output at all. It becomes useful when using JavaScript and other languages, letting you call a specific image by name and then replacing it. JavaScript is like and extension of html that can make your pages more dynamic and user interactive. Use it like this inside the <img> tag name="pic1". You can place attributes in any order. For browsers that haven't been designed to view images you can use the alt="write text here" attribute to have text displayed in place of an image.

Text around images

Image placement is a major issue for web designers. To aid in accuracy we can use the <TABLE> tag which we will get to in chapter 6 . For precision placement you can use the <STYLE> tag which we will also cover later on in chapter 10 . Ok back to more attributes. To align an image with text we use align="value" in the <IMG> tag, where value is one of left , right, texttop, top , middle , absmiddle , bottom or absbottom . Below are some visual examples.

align with top

align with bottom

align with absolute middle

Just to be really clear , to align text with the top of an image we would type

<IMG src="arrow.gif" width="32" height="27" border="0" align="top">

To wrap text around an image use the left and right attributes. Take a look.

<IMG src="arrow.gif" width="32" height="27" border="0" align="left"> The image is to the <br> left of this text

The effect

The image is to the
left of this text.

To have clear space on either side of images , use the <br clear="x">tag like this , where x = all , left or right :

<IMG src="arrow.gif" width="32" height="27" border="0" align="top"><brclear=all> This text will be under the image.

The effect


This text will be under the image.

To add clear space around an image so that the text is not banked right up against the image we need to use the hspace="x" and the vspace="x" attributes. Where "x" = the number of pixels we want on either the horizontal or vertical sides of the image. For space on the left and right of the image type :

<IMG src="arrow.gif" width="32" height="27" border="0" align="left" hspace="20"> This text starts 20 pixels from the image

The effect

This text starts 20 pixels from the image.

Remember it places space on both the left and right sides. Use vspace="x" to add space to the top and bottom of the image.

Background Images

To use a background image, inside the body tag you would use the background="file.gif" attribute. You can also add the bgproperties="fixed" or bgproperties="scroll" attributes to have the image fixed or have it repeat. Here is an example:

<body background="mypic.gif" bgproperties="fixed" bgcolor="white">

Horizontal rules

Finally , introducing the <HR> tag. It adds a horizontal rule or line across the page.



Inside the <HR> tag we can use the size="" width="" and noshade attributes. Size is number of pixels high we want the line to be. Width can be either pixels or percentage of page width="75%" and noshade has no value and fills in the line. Easy. Most tags have default values. The <HR> tag has a default width of 75% and a size of 2.


Contents Intro Your first page Text Images Links Lists Tables
Frames Forms Sounds Styles Symbols Colors Tags Publish Index
Speed Search our site
Linux Hosting Plans from $9.12 per month, includes Plesk Control Panel, MySQL databases, cgi-bin, crontab manager and 50 email accounts.

Mailing list management made easy

Discounted Scripts
Subscribe to our periodial newsletter to receive special offers.

Bathroom Hygiene
How often do you thoroughly clean your bathroom?








View all Polls

Run Polls just like this one on your website!


About us | Contact us | Script FAQs | Script Support | Website Hosting | Our Policies | Store | Testimonials
Subscribers log in here. Subscribe to our periodical newsletter for special offers on commercial scripts, hosting, exciting business opportunities, and industry news and events. Our Mailing List Software is powered by Consolidator    
HTML Plain text
©1999 - 2015 All content Copyright PerlScriptsJavaScripts.com Proudly hosted by LinuxHostingPlans.com