Margins using CSS
9:59 PM Posted by BlogTechno
margin-top: length percentage or auto;
margin-left: length percentage or auto;
margin-right: length percentage or auto;
margin-bottom: length percentage or auto;As you can also see in the above example you have 3 choices of values for the margin propert
- length
- percentage
- auto
You can also declare all the margins of an element in a single property as follows:
margin: 10px 10px 10px 10px;If you declare all 4 values as I have above, the order is as follows:
- top
- right
- bottom
- left
If only one value is declared, it sets the margin on all sides. (see below)
margin: 10px;If you only declare two or three values, the undeclared values are taken from the opposing side. (see below)
margin: 10px 10px; /* 2 values */
margin: 10px 10px 10px; /* 3 values */You can set the margin property to negative values. If you do not declare the margin value of an element, the margin is 0 (zero).
margin: -10px; Elements like paragraphs have default margins in some browsers, to combat this set the margin to 0 (zero).
p {margin: 0;}Note: You do not have to add px (pixels) or whatever units you use, if the value is 0 (zero).
You can see in the example below, the elements for this site are set to be 20px (pixels) from the body
body{
margin: 20px;
background: #eeeeee;
font-size: small;
font-family: Tahoma, Arial, "Trebuchet MS", Helvetica, sans-serif;
text-align: left;
}
CSS Spans
9:54 PM Posted by BlogTechno
Spans are very similar to divisions except they are an inline element versus a block level element. No linebreak is created when a span is declared.
You can use the span tag to style certain areas of text, as shown in the following:
<span class="italic">This text is italic</span>Then in my CSS file:
.italic{
font-style: italic;
}The final result is: This text is italic.
CSS Divisions
9:53 PM Posted by BlogTechno
Divisions are a block level (X)HTML element used to define sections of an (X)HTML file. A division can contain all the parts that make up your website. Including additional divisions, spans, images, text and so on.
You define a division within an (X)HTML file by placing the following between the <body></body> tags:
<div>
Site contents go here
</div>Though most likely you will want to add some style to it. You can do that in the following fashion:
<div id="container">
Site contents go here
</div>The CSS file contains this:
#container{
width: 70%;
margin: auto;
padding: 20px;
border: 1px solid #666;
background: #ffffff;
}Now everything within that division will be styled by the "container" style rule, I defined within my CSS file. A division creates a linebreak by default. You can use both classes and IDs with a division tag to style sections of your website.
IDs in CSS
9:44 PM Posted by BlogTechno
IDs are similar to classes, except once a specific id has been declared it cannot be used again within the same (X)HTML file.
I generally use IDs to style the layout elements of a page that will only be needed once, whereas I use classes to style text and such that may be declared multiple times.
The main container for this page is defined by the following.
<div="" id="container" everything="" within="" my="" document="" is="" inside="" this=""></div>
I have chosen the id selector for the "container" division over a class, because I only need to use it one time within this file.
Then in my CSS file I have the following:
#container{
width: 80%;
margin: auto;
padding: 20px;
border: 1px solid #666;
background: #ffffff;
}You will notice that the id selector begins with a (#) number sign instead of a (.) period, as the class selector does.
Classes in CSS
9:36 PM Posted by BlogTechno
The class selector allows you to style items within the same (X)HTML element differently. Similiar to what I mentioned in the introduction about inline styles. Except with classes the style can be overwritten by changing out stylesheets. You can use the same class selector again and again within an (X)HTML file.
To put it more simply, this sentence you are reading is defined in my CSS file with the following.
p {
font-size: small;
color: #333333
}
font-size: small;
color: #333333
}
Pretty simple, but lets say that I wanted to change the word "sentence" to green bold text, while leaving the rest of the sentence untouched. I would do the following to my (X)HTML file.
p {
font-size: small;
color: #333333
}
font-size: small;
color: #333333
}
Then in my CSS file I would add this style selector:
.greenboldtext{
font-size: small;
color: #008080;
font-weight: bold;
}
font-size: small;
color: #008080;
font-weight: bold;
}
The final result would look like the following:
To put it more simply, this sentence you are reading is styled in my CSS file by the following.
Please note that a class selector begins with a (.) period. The reason I named it "greenboldtext" is for example purposes, you can name it whatever you want. Though I do encourage you to use selector names that are descriptive. You can reuse the "greenboldtext" class as many times as you want.
Website Navigation Tips
9:15 PM Posted by BlogTechno
Effective Navigation Guidelines
While designing the navigation for your site keep the following points in mind:
* Organized Links
Make sure your links are well organized according to the order of importance. Visitors should be easily able to find what they are looking for under different categories.
E.g. All our main links are found on the top i.e. our services, products,portfolio, resources etc.Other interesting links are found on the right of the page. These are common and consistent throughout the site.
Finally if the web page belongs to a guide E.g web design guide you will find the related links below the right menu and also at the bottom of the page.
Note: Related links are very important as visitors coming to a particular page will probably be interested in more information you have under the same topic.
* Clear and Prominent
Once you have decided on your navigation links, you need to think of the best place to put them. Navigation should be clear and consistent. Try to design your navigation on the top or on the left as these are the first places our eyes go to. Also locate the primary links high enough on the page so that they are visible without scrolling. Navigation images should be seamlessly integrated into the site design. Avoid putting navigation links at the bottom of the page as visitors will need to scroll right down to see the links. If you like you could put the important links at the top AND bottom of the page just to make sure your visitors don't miss the link.
* Consistent
Navigation should be clear and consistent. The important links of your website should be on every page, in the same location, and in the same sequence. Don't confuse your visitors by putting your navigation links in different places in different pages.
* Easy to understand
Make your links easy to understand and to the point. Usually you won't have enough place to have long links so make use of the space wisely. Visitors need to know where they will go on clicking on a particular link, so make sure your links are understandable or nobody is going to click on your links, which will defeat the purpose of designing a good navigation system.
* DHTML Menus
If you have a large number of links under categories and sub-categories you could use navigation menus to organize your links. There are many cut 'n' paste scripts available on the Net that you could use to create great navigation systems. A favorite resource center is SimplyTheBest.net, you'll find tons of useful navigation menus that are very easy to install on your site.
Keeping these basic points in mind you can go ahead and design an effective navigation system for your site. Take a look at other sites to get some ideas on good navigation techniques! Another good idea would be to use eye-catching visuals and small chunks of information to draw visitors to click on a link.
Default values in CSS for browser compatibility
2:38 PM Posted by BlogTechno
* {margin:0; padding:0; border:0}
to the top of their CSS file to reset everything. But do you really thing that it is enough to reset everything? Use following code block on the top of your CSS file and see what else you’ve missed to reset.
a:link, a, a.visited
{ text-decoration:none; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form, fieldset,input,textarea,blockquote,th,td,p
{ margin:0; padding:0;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { text-decoration:none; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var
{ font-style:normal; font-weight:normal; }
ul,ol { list-style:none; }
caption,th { text-align:left; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }
{ text-decoration:none; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form, fieldset,input,textarea,blockquote,th,td,p
{ margin:0; padding:0;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { text-decoration:none; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var
{ font-style:normal; font-weight:normal; }
ul,ol { list-style:none; }
caption,th { text-align:left; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }
CSS to load hover buttons faster
10:38 AM Posted by BlogTechno
Example
.nav a:link, .nav a:visited {
width: 160px ; height: 30px ; display: block; overflow:hidden;
background: url(’images/nav1.gif’) 0px 0px no-repeat;
}
.nav a:hover, .nav a:active{
background-position: 0px -30px;
}
The Image itself contains both the normal and hover state. This is called a sprite, using this technique the image needs only be loaded once.
Changing Link Colors with CSS
10:29 AM Posted by BlogTechno
This guide shows how to specify link colours with CSS whether you want the same colours for all links or different colours for certain links. Also includes how to change the colour “onmouseover” (hover colour).
Specifying the default colour
If you want to specify the default colours which will be used in a web page you should use the following code. These colours will be applied to all links in the document.
<style type="text/css">
a:link {color: #000000; text-decoration: underline; }
a:active {color: #0000ff; text-decoration: underline; }
a:visited {color: #008000; text-decoration: underline; }
a:hover {color: #ff0000; text-decoration: none; }
</style>
This code specifies that all links should be black (#000000), active links should be blue (#0000ff), links which have been visited should be green (#008000) and the hover colour, when you mouseover the link, should be red (#ff0000).
The text decoration has been specified as “underline” which disappears on mouseover. Text-decoration can be “none” “underline” “overline” “line-through” “blink” or “inherit”. You can also add many other styles such as borders, font-family etc.
Note: If you specify the “color” you should also specify the “background-color”.
Specifying different colours for different links
If you want to have different colours or styles for certain links you need to assign those links a class and write the styles for each class.
Assuming we have two links “Blue Bold Link” and “Red Italic Link” we assign each a suitable class link this:
<a href="blue.htm" class="blue">Blue Bold Link</a>
<a href="red.htm" class="red">Red Italic Links</a>
Our css for these links would be in this form: (note: blue=#0000ff, red=#ff0000)
<style type="text/css">
a.blue:link {color: #0000ff; background: #ffffff; font-weight: bold;}
a.blue:active {color: #0000ff; background: #ffffff; font-weight: bold;}
a.blue:visited {color: #0000ff; background: #ffffff; font-weight: bold;}
a.blue:hover {color: #0000ff; background: #ffffff; font-weight: bolder;}
a.red:link {color: #ff0000; background: #ffffff; font-style: italic;}
a.red:active {color: #ff0000; background: #ffffff; font-style: italic;}
a.red:visited {color: #ff0000; background: #ffffff; font-style: italic;}
a.red:hover {color: #ff0000; background: #ffffff; font-style: normal;}
</style>
You can have any number of link styles on a page once you assign each one a class and specify the styles for each class. Effective use of “hover” can add a lot to a web page. Experiment!
Email Links using Dreamweaver
6:27 PM Posted by BlogTechno
A mailto link will only work if the browser supports e-mail and is setup to work with a local e-mail system.
Step 1 : In the document window position the insertion point where you want the email link to appear, choose Insert>Email Link, the Email link window opens.
Step 2 : In the first input box enter the text you want to appear in the document as an email link and in the next box type in the email address. Next click on OK.
Step 3 : Now you'll see the text as an email link in your document. In the property inspector the Link input box will contain the text ' mailto:mail@tutorailsforweb.com’
To create an e-mail link using the Property inspector:
Step 1 : Select the text or an image in the Document window's Design view.
Step 2 : In the Link text box of the Property inspector, type mailto: followed by an e-mail address. (Do not type any spaces between the colon and the e-mail address) eg. mailto: mail@tutorailsforweb.com
Creating anchors in Dreamweaver
6:24 PM Posted by BlogTechno
Creating anchors and linking to them
Step 1 : Place the cursor in the section of the page you want to link to.
Step 2 : Select Insert>Named Anchor and type a short descriptive name for that section and click on OK. A yellow anchor icon will appear. If you want to edit it double click on this icon.
Step 3 : At the top of the same page type a link which is going to link to this anchor. With this link selected go to the link box of the property inspector type a # sign followed by the anchor name. If the link is given from another page then the file name has to be given before the anchor name, eg. book.html#para8
Get organized with layers in Photoshop
9:47 PM Posted by BlogTechno
- Name your layers descriptively: Double-click the name of the layer to rename it from “Layer 3” to something more helpful, such as “left column background.”
- Group layers together: Photoshop allows you to group layers together into “folders.” If you’re making a web site comp, you may find it helpful to group together the layers that hold objects related to the top header area, for example. You can also name the groups descriptively. You can even group groups together into subfolders. Click the folder icon in the bottom of the Layers palette to create a new group. (And a keyboard shortcut: Select your layers first, hold Shift, then click the folder icon. This will automatically create a new group with those selected layers so that you don’t have to drag them into the folder later.)
Integrating these skills and tips into your Photoshop workflow will save you time – and we always need more of that!
Non-destructive editing techniques in Photoshop
9:44 PM Posted by BlogTechno
Let me give you an example of the difference between “destructive” and non-destructive editing. One common modification for pumping up the contrast on a photo is to use the Image > Levels command and dragging the outer sliders towards the center:
his permanently changes the photo (i.e., once you save and close it, there’s no going back), so it’s an example of destructive editing.
To change the levels non-destructively, you can add an Image Adjustment layer in the Layers palette. Click the Create new adjustment layer icon in the bottom of the Layers palette and choose Levels.
The same Levels dialog box will come up and you can make the same changes, but instead of permanently changing the photo layer, you’ll see an additional layer come up in the Layers palette.
The beauty of adding the adjustment layer is that you can always go back and change the adjustment by double-clicking on the Levels 1 thumbnail. Or, you can turn it off by clicking the eye icon to hide the layer. Or, you can remove it completely by deleting the layer! You can add more adjustment layers on top of this one to continue to make “changes” to the photo – all without touching the original photo. In contrast, using the Levels command directly on an image means that if you change your mind and want to redo your adjustments, you’d have to start over with a fresh copy of the original photo.
Other tips for non-destructive editing:
- Use adjustment layers for photo-type adjustments. Most of the adjustment-type changes you would make to an image layer can be done using adjustment layers for non-destructive editing, as I’ve shown in the Levels example above.
- Use vector shapes with layer style effects. Using the marquee tool to create a rectangle selection, filling it with the paint bucket tool, and adding a gradient using the gradient tool, results in a pixel- or raster-based layer where you’d pretty much have to recreate the layer if you wanted to make significant shape or color changes. In contrast, creating a vector rectangle and applying a gradient layer effect allows you to change the shape of the rectangle or change the gradient effect at any point very easily.
- Use layer masks to hide portions of layers. Using the eraser tool will permanently remove information from a layer. Instead, add a layer mask and use it to hide the parts of the layer that you don’t want to show. You can then always go back and edit the layer mask to hide or show more of the original picture or remove the layer mask altogether.
Creating Actions in Photoshop
9:33 PM Posted by BlogTechno
1. Opening the photo.
2. Going to File > Image Size and entering in a new width or height, then clicking OK.
3. Saving the photo for the web in a different folder.
4. Closing the photo without saving.
Instead of going stir-crazy by doing this for all of your 257 photos, let Photoshop do the work by creating an Action! Here are the basic steps for making your own custom Action:
1. Open the Actions palette by going to Window > Actions.
2. Click the “Create new action” icon in the bottom of the Actions palette.
3. Name your action – for example, “Resizing photos.”
4. Notice that the recording button is immediately active, so any commands that you do in Photoshop will be recorded. If you’re not ready to record, hit the Stop button. When you’re ready, click the Record button to begin recording again.
5. I would start with the photo already open before recording (you’ll see why later on). Then, you can proceed with your normal steps and perform your tasks on the photo, including saving the photo for web and closing the photo without saving. As you perform your tasks, you’ll see a list of Photoshop commands building under the Actions palette. When you’re done, hit the Stop button.
6. For this particular example, however, I’m going to deviate slightly from what I would normally do. Let’s say you have a mixture of landscape and portrait photos. When resizing the image, you would pick the larger dimension and change that size. Creating an action this way, however, would force you to make two separate actions – one for portrait photos, one for landscape photos. Luckily, Photoshop has a built-in command for “fitting” the resized photo into a certain area. So when recording my action, instead of going to Image > Image Size, I’ll go to File > Automate > Fit Image and type the width and height that I want the image to be resized within.
7. So, my Action would really look more like this, with the Fit Image instead of Image Size command:
With your action complete, let’s test the action. Open up another photo, click on the name of the action in the Actions palette, and hit the Play button. Photoshop will go through the steps of your action. Check to make sure that the photo was resized and saved for web properly.
If all looks well, you’re ready to batch and automate! Go to File > Automate > Batch. Most likely your new action will already be selected, but if not, select it from the dropdown list. Change the Source to Folder and click the Choose button to set the folder to your collection of high-res photos that need to be resized. Also set the Destination to Folder and set this location to where you want the web-ready photos to be saved. Finally, you can set the other options for renaming the saved file or overriding commands as necessary. One important option to set is to change the Errors dropdown to Log Errors to File, click the Save As button, and select the filename and location for your error log file – this way, if Photoshop runs into a problem, it will log the issue and keep going instead of stopping the process completely.
Then click OK, sit back (or go take a lunch break), and watch Photoshop perform its magic!
More keyboard commands for photoshop
9:24 PM Posted by BlogTechno
But there are many, many other “hidden” keyboard commands for performing a variety of actions. Here are some that I’ve found to be indispensible in my daily Photoshop workflow:
- Holding the Shift key generally constrains movements to straight horizontal, vertical, or 45-degree angles. For example, if you’re using the Move tool to move a layer, holding the Shift key will allow you to move it perfectly horizontally (or vertically, or at a 45-degree angle) so that you don’t have to guesstimate your placement.
- The Alt key will often allow you to copy things, depending on the context. When you have the Move tool selected, holding the Alt key and then using the Move tool will allow you to copy the selected layer to a new layer. Or, if you’re working in the Layers palette, holding the Alt key down, clicking on a layer, and dragging it to another spot in the Layers palette will create a copy of that layer. The same thing works with the Path Selection tool when you’re working with paths.
- Holding the Ctrl key and then clicking on a thumbnail in the Layers palette makes a selection based on the pixels in that layer.
- Ctrl-D will clear all selections, such as selections you’ve made with the Marquee or Lasso tools.
- Holding the space bar temporarily switches you to the Hand tool so that you can easily move your canvas around.
- Change the layer opacity by simply typing in a number.
There are also more obscure keyboard shortcuts that you may or may not find useful. For example, here is a very small sampling of commands that you can use just for navigating around the Layers palette:
- Alt-[ and Alt-] allow you to select different layers in the Layers palette by moving up and down the layers
- Ctrl-[ and Ctrl-] allow you to move the selected layer up and down the Layers palette, thus changing the layer order
- Shift-Ctrl-[ and Shift-Ctrl-] move the selected layer to the very bottom or the very top of the layer order, respectively.
- Holding Shift-Alt and then using the [ or ] keys allow you to select multiple adjacent layers
Keyboard shortcuts for tools in Photoshop
8:49 PM Posted by BlogTechno
Keyboard shortcuts for the tools are displayed in a tooltip along with the name of the tool when you hover over the tool. In the diagram below, I’ve hovered over the Move tool. The keyboard short cut shows up in parentheses – in this case, if you’re in Photoshop and simply hit “v” on your keyboard, you’ll automatically switch to the Move tool.
Some tools have flyout menu options for selecting from similar tools. Often, these tools share the same shortcut. In the example below, you can see that the Brush tool, Pencil tool, and Color Replacement tool share “b” as the keyboard shortcut. Simply hitting “b” on your keyboard will switch to whichever tool was previously selected (in this case, the Brush tool). To switch to the Pencil or Color Replacement tools, you’ll have to type Shift-B to cycle through the other tools.
The easiest way to begin learning keyboard shortcuts is to focus on a couple of the tools that you use most often and practice using the keyboard shortcuts for them. As you commit them to memory and instinct, you can add on other tool shortcuts as you go! Here are the ones that I personally use most often:
* M – Marquee tools
* V – Move tool
* C – Crop tool
* B – Brush, Pencil tools
* U – Vector shape tools (rectangle, ellipse, etc.)
* P – Pen tools
* A – Direct Selection and Path Selection tools
* D – Changes the foreground color to black and the background color to white
* X – Switches the foreground and background colors
* Q – Changes between Quick Mask and Standard modes
Intro to Flash toolbar
8:40 PM Posted by BlogTechno
Arrow:
This is used for when ever you are not using any of the other tools. It selects individual objects or frames or a marquee for selecting multiple objects. It operates the tool bar and menu systems. etc.
Brush:
The Brush tool is not unlike the pencil but it allows you to create thicker objects and if you're in the mood it can also do calligraphy but I'll let you figure that one out.
Dropper:
Use the eyedropper tool to copy fill and stroke attributes from one shape or line and immediately apply them to another shape or line. The eyedropper tool also lets you sample the image in a bitmap to use as paint.
Eraser:
Pretty self explainatory really.
Hand:This tool moves your whole movie around the stage and saves you from having to select everything or move individual frames.
Tip:
To quickly use the hand tool without selecting it from the tool bar hold the space bar down. You will notice your mouse pointer will change into the hand tool. Now drag the stage and when you're finished let to of the space bar.
Ink Bottle:
This tool creates lines around objects. For example, after selecting the tool and clicking on a circle object it will create a circular line around it. This can then be turn into a separate object.
Lasso:
This is used for selecting single or multiple objects in hard to reach places by allowing you to draw a line which then becomes the selection.
Line:
This tool does what the title suggests. It draws lines. Useful for drawing polygons and other weird shapes the Oval and Rectangle tools can't deal with.
Magnifier:
You will be able to zoom in on your stage and objects with this tool. Holding down the "Alt" key will change the pointer to a "minus" sign. This will enable you to zoom out.
Oval:
A very useful tool which allows the designer to create circles and ovals of any size. Remember: When you draw a oval, Flash creates a border around it if you have a border colour selected. So if you don't want it there either turn the border colour off or click on the border of the object, this will highlight the border, and delete it. (these borders can be useful in your design)
Paint Bucket:
This will fill objects with a colour of your choosing. In a more advanced tutorial we'll teach you how to also create gradients. The paint bucket can then be used to fill objects with gradients.
Pencil:
This tool draws freehand lines. Useful for strange Motion paths etc. In addition some bright sparks at Macromedia have granted you the ability to straighten and smooth the ravages of your unsteady hand. Have a play with this by choosing Modify> Curves> ...
Rectangle:
Another useful tool and you guessed it! It draw squares. When you draw one it will create a border too if you have to border colour selected. Clicking on the border once and it will only highlight one side. A double click will highlight all four sides.
Text:
This tool allows the designer to create text in a movie or to create text fields.
How to buy domain names for your web site
11:21 AM Posted by BlogTechno
Step1:First you need to know what you're planning to do with your website. It's important to know what type of service you're going to be providing with your website.
Step2:Next, you should jot down some words or phrases for a possible domain name. Write down as many as possible because depending on what type of website you're planning to build the domain name you have in mind may not be available.
Step3:Next, you should go to a website that sells domain names. Godaddy.com is one of the best places to purchase cheap domain names. Go Daddy discounts domain names when you purchase other products from them like their web hosting packages. You can pretty much use them for a one stop shop. They are simply the best resource to get your domain names cheap.
Step4:Finally, enter the possible domain names you collected and check their availability with Go Daddy's domain name look up tool.
Step5:Once you've found the domain name that fits your needs you simply go to check out and purchase it. Congratulations, you have your domain name. The next step is to build that website.
Building a Flash Animated Website
11:14 AM Posted by BlogTechno
Step2:Visit FlashKit.com. Click on "Movies." You'll see many different categories. All of the movies are Open Source, which means that the creator is offering to share their creations with you and you are free to use them and manipulate them however you like.
Step3:Now click on "Interfaces" and from there, go to "Sites." As you look through the different developers' work you'll have many to choose from when designing your site. When you find one you like, you will have the option to "Download.fla" which will save a file to your computer that includes ALL of the files for that particular example. The download will be ZIPPED (which means it's compressed and bundled for ease in downloading). All Windows machines come with a program that will "unzip" a zipped file. Find the file you downloaded, double click on it and your computer will automatically decompress it.
Step4:Open your Flash program. Go to File and find the file you just download. One of the files will end in FLA. That's the one that Flash needs. Once you've opened it in Flash you can change things like text and artwork to make it meet your needs.
Step5:If you run into a snag, or your changes so completely mess up the original file that you can't repair it, just go back to FlashKit and download it again.
Step6:Save your file often! When the movie is done to your satisfaction, choose "File" and then "Export Movie."
Step7:Start Dreamweaver. On a new HTML page, click on the Flash symbol. It will prompt you to find the Flash movie you just created. Click on the name and Dreamweaver will automatically add all the coding you need. Save the webpage you just created.
Step8:Upload the webpage and the Flash movie file to your server. Surf to the URL and check to make sure it works right. Double check in Internet Explorer, Firefox and Netscape.
Adding images to web pages
11:08 AM Posted by BlogTechno
Step1:The simple HTML code to do this can be seen in this screenshot. Look at the screenshot and write down the code exactly as it appears.
Step2:In the code above where I have denoted URL between quotes, you will insert the URL or Uniform Resource Locator to your own images. These images are typically stored at a hosting website where a direct link can be obtained. Here is a picture example showing what the code should look like now.
Step3:Paste this whole string into the section of your web page that allows HTML code.
Step4:Make sure when using this code that you include all slashes, quotes and other special characters exactly as they appear in the screenshots. Otherwise, this code will not work.