MENU
Home » 2013 » October » 29 » How Web Pages Work Images
11:26 PM
How Web Pages Work Images
3:09 PM
How Web Pages Work Images
Images Once you start creating pages, one of the first things you will want to add is graphics. Humans are visual animals, and graphics can totally change the character of a page. Once you start creating pages, one of the first things you will want to add is graphics. Humans are visual animals, and graphics can totally change the character of a page. You can use tiny graphics, long thin graphics, larger images or even animations. Turn a graphic into a bullet by simply inserting the image tag where you want the bullet to display; you needn't use the
    tag. Long, thin graphics can be used as separators. Larger graphics can be used for logos or illustrations -- pretty much anything you can think of. There are two ways you can obtain graphical images: Either you can download them from various "free clip art" sites on the Web, or you can create them yourself. Some sites offering free graphics and animations include Page Works, A-1 All Free Clip Art, and The Free Graphics Store. You can also visit The Free Site, Web Places and Free Graphics for directories of free image sites. Let's say you go to a free graphics site and you see an image you like. If you right-click on the image, a menu will pop up and one of the options will be "Save image as...." You should save the image in the directory that your Web page is in. If you want to create your own images, you will need a program that can edit GIF and JPG files. One very popular image-editing program available on the Web is called Paint Shop Pro. You can obtain a copy by clicking here. With a little practice, and only minor artistic ability, you will soon be creating images like a pro! As described in Basic HTML Formatting Tags, images are inserted into a Web page with the tag:  You can also use an image as a link to another page or element. To do so, simply insert the "img src" tag after the anchor tag. Be sure to include "border=0" or else an ugly border will appear around your image. Example:  In this example, if users clicked on the image "hswlogo.jpg," they would be transported to the HowStuffWorks homepage at "http://www.howstuffworks.com." Any digital image can also be used as a background for your page. To do so, add background="image file name" within the tag. Example: If Your Images Don't Work... We get a fair amount of e-mail from people having trouble adding images to their pages. When GIFs and JPGs don't work, they usually show up as a small red X. When you see this problem on your pages, it means one thing: you have not typed in the correct file name for the image. Here are some steps you can take to correct the problem: Start by simplifying the process. Put the HTML file and the image file in the same directory. Rename the image file to xyz.gif (or xyz.jpg). Create a tag that says in your HTML page. Display the page in your browser. If you still see the red X instead of the image, then... Check to make sure the renamed file is really named xyz.gif. On a UNIX machine, case matters, so make sure everything that should be uppercase is uppercase, and everything that should be lowercase is lowercase. The name Xyz.gif is entirely different from xyz.gif to a UNIX machine. On a Windows machine, the operating system will sometimes add a suffix to the file name without telling you. For example, you might see xyz.gif in the Explorer, but Windows may have named the file xyz.gif.gif. The easiest way to see if this has happened is to use the dir command in the MS-DOS prompt, so that you are seeing the real file names. If Windows is in fact adding suffixes, you can simply turn off that behavior using the options dialog in the explorer. We'll find out how to align your images in the next section. LEARN MORE How HTML5 Works How Mobile Web Pages Work Aligning Images The horizontal alignment of images on your page is formatted using the tags and techniques described in the justification section. Here's a quick review: Use the
    tag before the image tag to center or justify right or left. Use the
    tag after the image tag to end the justification. Use the tag within the "img src" tag to have text wrap around the image. Insert these tags within the "img src" tag for the vertical alignment of images in relation to text: align="bottom" The text lines up with the bottom of the image. HowStuffWorks align="top" The text lines up with the top of the image. HowStuffWorks align="middle" The text lines up alongside the middle of the image. HowStuffWorks In each of the above examples, the image is justified left by default, so the text appears on its right side. If you want the text on the left and the image on the right, you can add the
  • image alignment tag discussed above. Creating Animated GIFs Animated GIFs add movement and flash to your pages. A good tool for creating animated GIFs is The GIF Construction Set. Using this tool, or another tool like it, you can create different frames in an animated sequence and then roll them up into a single image. LEARN MORE How HTML5 Works How Mobile Web Pages Work Getting Your Page Online Once you create a stellar Web page, you will want to put it on a Web server for all the world to see. Many services and institutions with Web servers offer free space to post your pages. AOL offers free space to their members, and many colleges offer space to their students. There are also many commercial sites that offer free space. The only drawback to these options is that you will most likely have to display the site's advertisement banner on top of or within your page. Here are a few of these free commercial sources: Geocities Tripod Homestead You also have the option of paying a hosting service for Web space. Most professional sites go this route. Hosting services can provide their clients with large amounts of space, special options and reliability. Using a hosting service also gives you the ability to use a domain name, your own unique URL. If you are interested in obtaining your own domain name, visit the Accredited Registrars page at ICANN.org, the agency that maintains IP addresses and domain registry. At any of the listed Web sites, you can check on the availability of domain names you are considering and purchase one that appeals to you. The cost for an annual contract is usually less if you have a hosting service in place, so when you become serious about purchasing a domain name, contact a hosting service first. Most hosting services will also register your domain name for you, providing Network Solutions with IP numbers and other information they will need. There are a wide variety of hosting services available at a wide range of costs. Be wary of the many "too good to be true" offers. You could be faced with slow servers, down-time, no support and flash-in-the-pan businesses. Great Tools Once you get your page on a server, you will want to know what kind of traffic you are getting. A place like Show Stat, Hit Box, or Site Meter provides that service for free and gives you very complete statistics. If you just want a simple counter on your page, FastCounter is a good tool to use. There are a number of tools you can use to help make your site better. For example, this free tool will check your site for spelling errors, load time over the network, meta tags, browser compatibility, etc. We'll learn about meta tags in the next section. RESOURCES! The HowStuffWorks Big List of HTML Tags - A printable, one-page reference guide that contains all of the common HTML tags on one easy sheet! LEARN MORE How HTML5 Works How Mobile Web Pages Work Meta Tags If you are planning to enter your pages into search engines (addressed in the next section) so that other people can find them, you will want to add Meta tags to your page. The two most common Meta tags let you specify a description and a set of keywords for the page, respectively, and you can also declare all sorts of other things. Meta tags always appear between the and tags of the HTML source. Here are the Meta tags that appear at the top of the main index page for HowStuffWorks: The first tag is a description for the page. Search engines use this text directly in their listings. If you don't have a description meta tag, then the search engine either leaves your description blank or uses the first sentence or two from your page. The second tag indicates a set of extra keywords for the page. Search engines normally index every word on a page, but in many cases you will not use a certain word, in your actual text, that might be used by someone searching for your page. If you know that people frequently misspell a given word, then you might also put the misspelling in the keyword list. The third tag is an RSAC rating tag. Here is a description of what the RSAC rating system does, taken from the RSAC Web site at www.rsac.org: "The Recreational Software Advisory Council is an independent, non-profit organization based in Washington, D.C, that empowers the public, especially parents, to make informed decisions about electronic media by means of an open, objective, content advisory system. The RSACi system provides consumers with information about the level of sex, nudity, violence, offensive language (vulgar or hate-motivated) in software games and Web sites. To date, RSACi has been integrated into Microsoft's browser, Internet Explorer and MicroSystem's Cyber Patrol Software. CompuServe (US and Europe) has also committed to rate all its content with the RSACi system." Some browsers are configured to block pages that are not rated, so by rating your site you avoid problems with those browsers. By rating your site with RSAC you also let people know exactly what kind of content you are providing. There are a number of other tags you will commonly see if you look at the HTML source of other pages on the Web. Many HTML tools put in tags automatically. For example, here are two tags that Microsoft Word automatically applies to a page if you use Microsoft Word to create HTML: In all cases, meta tags do not affect the way your page displays in a browser. The description and keywords tags are the most commonly used. LEARN MORE How HTML5 Works How Mobile Web Pages Work Promoting Your Site After you have spent hours creating your site, and have posted it on a server, you really want people to come look at it. But in order to get people to visit your site, you have to promote it. Very few people will find your site by accident -- something has to lead them there. There are many different techniques you can use to draw people to your site. This chapter will teach you many of the angles you can use to increase site traffic. Registering With Search Engines Search engines read a Web page and index all of the words from the page. Users of the search engines can find your page by searching for keywords. The good thing about search engines is that they let you find everything that contains a certain word, or set of words. The bad thing about search engines is that they generally return a lot of chaff with the wheat. From a Web promotion standpoint, the nice thing about search engines is that it is easy to get your site listed on them. Each search engine includes somewhere on its page a "submit a site" link, or something along those lines. Using this link, you will be able to complete a form (some lengthier than others) which requests to have your site listed with them. Your site will not be added immediately, and sometimes it will take several submissions over a period of time before your site is listed. Each search engine is different. Also, be sure to submit each one of your pages individually to make sure that the keywords from each separate page are incorporated. Here is a list of the URLs to some of the major search engines' "submit-a-site" pages: Alta Vista AOL Search Google HotBot Lycos WebCrawler Registering With Link Sites A link site lists various sites in some sort of hierarchical structure. Each site is placed in a category and given a short description. Yahoo is the best example of this sort of site, but there are now many others trying to do the same sort of thing in different ways. Most of these sites are very slow to pick up new sites, because people must review each submitted site before it can be added to the collection of links. The following links point to the home pages of each of these link sites, because you have to review the site to figure out the category for your submission before you can add your URL. Once you find the proper category, look for an "Add URL" button to add your site. Jayde Online Directory LookSmart Nerd World Northern Light Open Directory Yahoo! We'll look at the different kinds of listing services in the next section. RESOURCES The HowStuffWorks Big List of HTML Tags - A printable, one-page reference guide that contains all of the common HTML tags on one easy sheet LEARN MORE How HTML5 Works How Mobile Web Pages Work Listing Services If your site is business-related, you should submit it to all of the following sites. These sites will list your business in their directories, some for free and some for a fee: AllSearchEngines b2bFreeNet SuperPages Biz Land Business Search Engines EZDirectory SmallBiz Registering for Awards Sites Award sites either present your site to the world (typically for an hour or a day as a unique or "Cool" site), or they give your site some sort of award that you can display in the form of a logo pasted on your site. In all cases, you must register with these sites in order to be considered for recognition. The following sites are some of the most popular award sites available: Cool Site of the Day Seven Wonders of the Web Web 100 Webby Awards Wow! Web Wonders Registration Services The companies listed below will register your site on hundreds of search engines, sometimes for a fee. Most of them also offer other Web promotion services as well. Several of these sites offer information on promoting your site yourself, so you might want to visit them to see if you can pick up ideas. The key thing to recognize, especially when considering whether or not to use these services for search engine registration, is that they are doing nothing that you can't do yourself. You can register your site just as well as they can, and all you need to know is in this series. It is simply a question of how best to use your time. Add Me! SiteAdd URL Submitter 123 Add URL Register Submit It We'll look at reciprocal linking in the next section. Example banner ad LEARN MORE How HTML5 Works How Mobile Web Pages Work Reciprocal Linking Reciprocal linking is an "I'll scratch your back if you'll scratch mine" activity. The idea is to locate sites related to yours and send them e-mail asking them to link to you. In return, you generally offer to link back to them. The best way to set up reciprocal links is to simply browse the Web looking for related sites and send e-mail to them. You will find that the response rate is perhaps 25 percent. But it can't hurt to try, and the more links you have on the Web the more traffic you will get. One link in exactly the right place can make a BIG difference in the traffic that a new site receives. The following are a couple of resources for creating reciprocal links: Link Exchange Index Paid Advertising If you need traffic fast, one of the best ways to get it is to pay high-traffic sites to advertise your service. Paid advertisements typically appear as long, thin, blinking ads at the top of Web pages, and they are called banner ads (there are lots of other types of ads, though -- check out How Web Advertising Works for details). Here are three examples of banner ads: Most larger sites, with traffic in the range of 10,000 or more visitors a day, have standard advertising programs. A typical rate is something in the area of $15 to $70 per 1,000 presentations of your ad. The key is to find a site that will let you target your advertisements specifically to people who will be interested in your message. For lots of information about banner ads, see How Banner Ads Work. The following links offer information on the advertising programs of some of the larger search engines. Most search engines offer some form of advertising -- look around on the home page and you will generally find a link to information about advertising on the site:
Category: Education | Views: 1649 | Added by: farrel | Tags: How Web Pages Work Images | Rating: 0.0/0
Total comments: 0
Name *:
Email *:
Code *: