MINI CORSO HTML |
| Torna indietro | Sommario "Come si crea un sito" |
ALCUNI "TAG" DA CONOSCERE!Tratto da: www.BRAVENET.orgEach issue, we profile a featured article from our online
archive of past Webmaster Tips and Tricks. To view the full
archives, please visit this page: SUMMARY
++++++++++++++++++++++++ LITTLE KNOWN TAG ATTRIBUTES By now you all know that HTML Tags can carry "attributes" that can alter the effect of the particular tag. For example, the Image tag <img> can carry attributes for alignment, sizing, spacing, etc. Since there are so many tag attributes, we are often astonished to find new ways of using tags by incorporating their various sub-functions. Here are some of the lesser known, but handy, attributes of common HTML tags that you may not be familiar with. There are tons of HTML resources out there where you can brush up on your HTML skills. You may be pleasantly surprised to find new ways of using old tags. For example: IMG Tag: hspace and vspace - these attributes carry values in pixels that offset images from other elements on the page. Try it out for yourself by adding an image with an hspace=10 and vspace=15. See how the image is separated by that space at top and bottom, or on each side? TD Tag: nowrap - This is a terrific way to make sure your table cells don't wrap. Add attributes to your cells to make sure text stays all on one line. DIV Tag: (works with SPAN also) align=justify - This is kind of fun. You can justify text with divs and spans, meaning all text will appear as a solid block. Alternatively, you can specify right, left or center. HREF Tag: Target - All webmasters should know that HREFs can be "targeted" to new windows or parent frames, whatever is called for. This is a good idea when working with advertisements, or if you have links inside frames or smaller windows. Simply use "target="_blank" to send your outgoing clicks to a new browser window. SPAN Tag: contenteditable - This is crazy! Try adding the attribute contenteditable="true" ... you guessed it, now your visitors can type right over your HTML on screen. We're not sure what this is particularly useful for, but it's a lot of fun! SPAN Tag: line-height - We liked this one so much, we thought we'd pass it along. Use line-height inside a span tag, such as: <span style="line-height:150%">. This causes a "leading" or spacing of the text at 150% of normal. Ideal for spacing out text vertically. +++++++++++++++++++++++++++++++++++BACK AND FORWARD Here are a couple of handy little scripts that automatically send your users back or forward to previously visited pages. This is a handy feature for catalogues, archives or photo albums, where hard-coding back and forward motion can be problematic. Here they are: <a href="javascript:history.back(1)">Go
Back</a> +++++++++++++++++ IMAGE TIPS When including images on your Web pages, there are a few rules you should follow to enhance the experience for your visitor. Use the following as a kind of checklist for placing images in your pages. - Define widths and heights: Make sure you specify width and height attributes in your image tags. This gives the browser the sense that it has already loaded an image, even if has not, and will it will prevent any nearby text or other elements from "re-wrapping" after the image has loaded. <img src="myimage.gif" WIDTH="100" HEIGHT="100"> - Use the ALT attribute: This attribute of the image tag shows text on mousing over the image, and also offers a description if browsers have images turned off. If used effectively it can also increase your ranking on the search engines. <img src="myimage.gif" ALT="New York Metropolitan Museum"> - Specify a border: Even if your image has no border, it is a good idea to specify a value of none, just in case your image is used as a hyperlink. By defining a zero border, you eliminate that ugly blue box around hyperlinked images. <img src="myimage.gif" BORDER="0"> - Use alignments: If you place an image next to text, that text defaults to display at the bottom of the image. You can specify an alternative alignment. <img src="myimage.gif" ALIGN="middle"> - Try hspace and vspace: These attributes create a margin of
free space around your image, both horizontally and vertically,
in pixels. This can be helpful in buffering your images from text
or other page elements. ++++++++++++++++++ MINI TIPS FOR WEBMASTERS Highlight the Background of Text: <span style="background-color:ffffcc;">Wow,
that's yellow!</span> Align Images to Absolute Vertical Center of Text: Highlight Background Color of Links (embed in head tag): Timed redirect to another page automatically: Display messages in browser status bar on link hover: Adding a Title attribute to your links creates a mini-popup
description: Mask your published email addresses from collection by
spiders: +++++++++++++++++++++ POPUP WINDOW TRICKS Popup windows can be a very effective tool to help you market your site and its sponsors, if you use them with a little care. Normally, popups do just that, they pop "up" in front of the current window. You can do this in a few ways, but the most practical is to use the "onUnload" parameter of the <body> tag. This means when a user leaves the page, the popup will launch. We can specify exactly where the window will load, how large it will be and what browser features will display. Consider this code: <body bgcolor=#f9f9f9 link=#000080 vlink=#000080 onUnload="window.open('myfile.asp', 'newWindow', 'scrollbars=0, resizable=0, height=500, width=500, left=50, top=50')"> What we are telling the browser here is when people leave the page this tag resides on, a window will launch 50 pixels from the left and 50 pixels from the top of the user's screen. We specify what to load as a URL call, and we have disabled some browser features, such as removing the scrollbars. It should be stressed that this will launch a window every time someone leaves the page. If you want to limit the frequency of such showings, you should use a cookie or some other weighting system to reduce the amount shown. This is really not hard to do, but it requires that you are able to process some form of server scripting language. Your best bet would be to discuss this with your site or server administrator. Generally, a frequency of once every 24 hours will do the trick nicely. NOTE: If you contain links inside the popup window, be sure to target a new browser for the resulting click-thru, unless you really want your visitors to view that page inside the current popup window size. To place a popup window behind the current window (popunder), you can configure the window directly inside that actual html of the page you want to position. For example, if you have a parting offer that you want to present to your visitors, you might want to "blur" the window behind, so when they shut down their browser, your offer is shown in the window that previously loaded behind. To do this, simply add this declaration inside the <head> tag on your page: <script language="JavaScript">window.blur(); </script> For more on this topic, please visit our Popup Tutorial. ++++++++++++++++++++++++ FIGHTING BACK AGAINST EMAIL WORMS We came across a great trick that's as simple as it is effective, and that anyone can use to battle many of the nasty worm viruses flying around the Internet these days. Of course, the best way to ensure the integrity of your system is to install some good anti-virus software, but this little technique can give you and anyone on your email address contact list a bit of added protection. When one of these destructive critters gets into your computer, the first thing it does is go to your email address book and send itself to all of the addresses listed there, thus infecting all your friends and contacts. The trick we're talking about won't keep the virus from getting into your computer - you should invest in some good anti-virus software for that - but it will stop the invader from using your address book to spread further, and will alert you that you have a worm in your system. Here's what to do. Open your email address book and click on "New Contact" or "New Person", just the same as you would to add a new friend to your list. In the window where you would type your New Contact's FIRST name, type !000. (That's an exclamation mark followed by 3 zeroes.). Then, in the window prompting you to enter the new email address, type the word WormAlert. Then complete your entry by clicking "Add", "Enter", "Save", etc. Here is what you've done, and why it will work. The "name" !000 will automatically be placed at the top of your address book as Entry #1. This is entry where the worm virus will start in its effort to work its way down your email contact list. But when it tries to mail itself to !000, it will find itself undeliverable because of the phony email address (i.e. WormAlert) you entered. Thus the worm's first attempt to spread from your computer will fail, and it goes no further. So you've just saved your family, friends and business contacts a possible tragedy - but what about your files and creations? Here's the second great benefit of this simple procedure. When an email cannot be delivered from your computer, you are notified in your Inbox almost immediately. Hence, if you ever get an email telling you that an email addressed to WormAlert could not be delivered, you will know right away that you have the worm in your system. In a scenario where time is often of the essence, you will be informed at the earliest moment, so that you can take the proper measures to deal with the virus. ++++++++++++++++++ AUTOMATIC BOOKMARK SCRIPT Here's a simple JavaScript you can embed in any page on your site to allow your visitors to bookmark your site with just one click: <script language="JavaScript"> <a href="javascript:addbookmark()">Add to Bookmarks</a> +++++++++++++++++++++++++++ AUTO POPUPS ON ENTRY Last issue we told you how you could launch a sound file on entry to your pages. How would you like to launch popup windows on entry? This can be done easily with Javascript. Here is a code example: <script language="Javascript"> How does this all work? The script tag is telling the browser that a script is about to be declared or executed, and window.open is the Javascript function to open a new window. The URL is just the URL in which you want the window to display. The next part you need to be careful with. If you do not name the next part the same as the "pop1=window.open" it will not function correctly. You can replace "pop1" with anything you like. The next set of code is simply giving you options to play with the browser popup settings. Feel free to set any of these to "yes" or "no". The "pop1" and "pop2" text are called "variables". The pop2 variable is telling the browser to open a new window again. The following text is the same as the first. The only difference is the way the last string of code is displayed. We are now showing you a different way to code browser display settings. "0" is NO, or FALSE. "1" is yes, or TRUE. +++++++++++++++++++++++++++ CSS TIPS AND TRICKS Check out these CSS goodies! * Mouse over this link, and see the color change, then change
again. <span onmouseover="style.color='color';" onmouseout="style.color='color';"> Some Text </span> to any text, where 'color' is a named or numeric color value. * Look at this text! This bit of code is quite versatile. You can change the color, size and even the position of it. All you need to do is play with the code a bit. Here it is: <span style="position:relative;width:190;height:10;filter:glow(Color=#009966,Strength=1)"> Some Text </span> There are many filters you can apply to get some cool text
effects. However, they take various attributes. For more info,
WebReference has a good tutorial. * Border in a Box The syntax for this dotted border effect is: <span sytle="border: dotted; border-width: 1px; border-color: #990066;> Some Text </span>. Still not sure how to use Style Sheets? Click here for some more examples. ++++++++++++++++++++++++++++++ FORM VALIDATION Would you like to make sure that your visitors are submitting correct information into your forms? You can do this with JavaScript. First we'll tell the browser to run a script, which will later be called by our Form Tag. To prepare the script, we'll set names for the validation function and form to validate. Once written, we can paste this code into our page, above the actual form. <script> Now that we have our validation routine in place on our page, we make our form call the pre-defined function. As well, we have to name our form to match the document name inside the JavaScript: <FORM action="do_something.php" onSubmit="return checkData()" name="theform" method="post"> Let's now explain what this function is actually doing. See the ("@") part of the code? What is happening is the document is looking for the "@" symbol. If it is not found, or if the input field is empty, it will give the "Incorrect" alert. Also notice the "" empty quotes. The code is now looking for empty fields. So if NOTHING is found, the code will return an error. The || means "or" in Javascript. Of course, you can play with this code to add more
personalized messages or functions. ++++++++++++++++++++++++++++++++++ CSS SPANS AND DIVS If you want to add functionality to your site with little coding, you should consider using Cascading Style Sheets, known by its acronym, CSS. This technology is fully supported by Microsoft browsers, and newer versions of Netscape. In this article, let's look at two CSS functions that you can use that identify a tag and set properties for that tag. We prepare our tag in the HEAD section of our page, then call that function in the actual BODY portion. Now, we should all know about the DIV tag, which can be used to align text or images. Using CSS, we can assign and id to our DIV tag, making it do more than just alignment. Let's say we want to highlight text with a yellow background color. To do this we can choose assign an ID to our TAG. But before we do that, we need to predefine what this id will accomplish. Consider this sample: <head> Now we can assign this id to a DIV or SPAN tag, depending on the desired effect. If we use the DIV tag, the yellow background will appear on the entire line (Remember, this is going right into the Tag itself, in our BODY section): <div id="highlight">Text Here</div> Alternatively, we could use the SPAN tag, which will cause the highlight only to appear across the selected text: <span id="highlight">Text Here</span> Now that you see the possibilities, here is another example. In this code, we will a header font, size and color, using an assigned Tag id: <head> To call that funciton into play, we assign the id to our DIV tag, like this: <div id="header1">Text here</div> ++++++++++++++++++ USE TRAILING BACKSLASHES Here is a very simple trick you should employ when you link to other sites, especially if you have other sites linking to you, and you want your pages to load as fast as they can. It's a very simple trick, but not many people realize the logic behind it. The object is to make sure your links have a trailing "backslash" on your URL, unless you are targetting a specific page. Here's what we mean: http://www.yoursite.com/mypictures/ Note the final backslash on this URL. What this does is tell the server that mypictures is a directory, and not a file. If you don't use that final backslash, the server will run through its directory tree searching for a file named mypictures. When it doesn't find that file, it then assumes you really meant to find the "default" file associated with that directory, commonly index.htm, or default.asp, etc. By using a backslash on directories, you save the server from redundant work, and pages will load faster. This is especially important if you run your own server, and if you have many other sites linking to you. Get into the habit of using final backslashes on directory URLs. ++++++++++++++++++++++++++++++ FORM BASED JUMP NAVIGATION To save space and to provide a nifty way of giving your visitors access to your pages, you could consider using a form-based, drop-down jump navigation system. This is practical especially if you have many sections to your site, with multiple pages in each section. Normally, you would have a series of links for each page, and more links underneath for all of the subpages. Using this Jump script, you could simply name the various sections, and place a form selector below each to show all the sub-pages, without taking all that space to show them. <Script Language="JavaScript"> Here's a sample display, which will not work in email, but it gives you a graphical impression of what we're talking about: HOME PAGE HTML TIPS PROMOTE YOUR SITE Try this out by replacing the coded values with those of your choosing. All you need to change are the entries in the form itself; the script is generic and does not have to be altered. You can add an unlimited number of links without ever taking more space from your page. Note the first option box has the word "SELECTED" inside. This is a way to select which entry should be the default display. +++++++++++++++++++++++++++++ DISPLAYING A RANDOM IMAGE AND HYPERLINK Want to randomly display images and hyperlinks from a list? No problem, you can do it with a simple script like the one shown here. No need to learn server-side scripting, or slow down your pages with full-blown Java applications. The script shown below randomly loads an image from the list you input each time a page is loaded into a browser. This example works with two images. You can add as many as you like. You can even add the same image twice to double its weighting. For example, if you have two images and would like one to be shown twice as much as the other one, simply add the preferred image twice (to total three images in all). Here's the Script Code. All you have to do is replace the variable "imagenumber" with the correct amount of images you're using. Be sure to label each image with its corresponding number in the images array. Then do the same for the corresponding links. You can also control your image attributes in the display portion of this script, which begins with "document.write" ... That's it. Load in your info, place the code where you want the images/links to display, refresh the page and watch what happens! <SCRIPT LANGUAGE="JavaScript"> Naturally, you'll have to do a bit of editing to get your own images and links in place. Be sure to keep the imagenumber in sync with however many images and links you wish to use. |
|
| Torna indietro | Sommario "Come si crea un sito" |