HTML
PREVIOUS
NEXT
Displaying HTML code inside an HTML document
Displaying HTML code within an HTML document can be confusing. The XML tag makes it easy.The XML tag tells the browser not to render any further tags until it sees the /XML tag.
For example...
<XML>
<a href = "http://www.tech-recipes.com">Tech-Recipes</a>
</XML>
will display...
<a href = "http://www.tech-recipes.com">Tech-Recipes</a>
Enjoy!... Read More
Is your site color-blind friendly?
Service allows you to see your site as if you have a dysfunction in the ability to see colorsBetween 5 and 10% of males have some sort of genetic problem seeing the full spectrum of colors. Is your site usable to this population of users?
Running your site through vischeck will simulate the common forms of color blindness and will allow you to insure your site is usable to those with color vision deficiencies.... Read More
Opening Links In a New Window
Although I usually hate it, this is the standard html code to open a link in a new window.Forcing users to open links in new windows is so wrong. However, there are times when it is useful. Here's how you do it.
Standard Link Code:
<a href="http://www.tech-recipes.com">Tech-Recipes.com</a>
Open Link In New Window Code:
<a href="http://www.tech-recipes.com" target="_blank">Tech-Recipes.com</a>
The addition of the target="_blank" does the dirty deed.... Read More
Re-Enable Right-Click When Web Pages Turn It Off
Several web pages turn off the ability to right-click. This examples how to turn it back on.People are nuts about protecting their web site from unauthorized copying. One of the most frequently used ways to preventing copying is to use javascript to disable the ability to right-click.
Of course, we can use javascript to turn it back on.
When visiting the offending website, type the following into the URL bar of your browser:
javascript:void(document.oncontextmenu=null)
This example works against this page for example:
www.users.totalise.co.uk/~bigoleg/javascript/javascript_disable_right_click.html
If a dialog box opens whenever you right-click, could can often get around it by the following sequence:
Hold the right mouse button, hit enter to close the dialog box, and then release the right mouse button.
This example works against the following web site, for example:
www.cof.orst.edu/net/software/web/html/disable_rtclick.htm
Disclaimer:
Copying websites is not cool... but disabling righ... Read More
Users Cannot Vertically Scroll in Safari, OmniWeb, Konqueror and WebKit Browsers
These browsers will lose the ability to use the vertical scroll bars under certain css/html situations. This code will render well in all other browsers. This is a documented bug confirmed by the webkit team.When we redesigned tech-recipes, many apple and linux users reported that they were not able to vertically scroll on the site. Despite google searching, I could not figure out why this was so. I finally dropped into IRC with the webkit crew who helped me figure out the problem. Mitzpettel confirmed the bug and helped me isolate the issue and figure out the work around.
Demostration of Bug:
http://www.bronch.com/downloads/webkit_bug/index.html
My users have confirmed the bug in safari, omniweb, and konqueror. The rendering error is not seen in firefox, IE 5-7, or opera.
The problem seems to occur when absolute positioned structures are contained within a table. To work-around the problem, remove the surrounding table. The above demostration shows a page with a surrounding table and ... Read More
IE7: Using Conditional Statements to Detect and Display Browser Specific HTML
Using conditional statements you can display certain html to one browser and other html to other browsers. This shows you how to do this for Internet Explorer 7 and Internet Explorer 7 beta.To dodge some of the quirks of the different browsers, one can use conditional statements to cause only certain browsers to see certain code. For example, maybe you want to tell certain users that you do not support their browser.
By using conditional statements, you can do this.
This shows you how to select for IE7 and IE7 beta:
<!--[if IE 7.0b]>
<p>This will only be seen by the beta version of Internet Explorer 7.0.</p>
<![endif]-->
<!--[if IE 7.0]>
<p>This will only be seen by the final version of Internet Explorer 7.0.</p>
&n... Read More
Setting up shortcuts (access keys) to links within web pages
Using accesskeys to setup unique shortcuts within a web page.In certain situations creating shortcuts to help navigate web pages may be helpful. For example if you had a long ordered list, you could set ALT-A to jump to the "A" links, ALT-R to jump to the "R" links, and so on.
Obviously, this is also helpful for those who like to or need to drive a browser without a mouse.
<a href="http://www.tech-recipes.com/" accesskey=t>
The above code shows how to add the accesskey information to a link to allow the establishment of an access key.
Scroll this area off the page... and then press alt-T to see this affect. If the link below is visable on the page, it may not jump.
Pressing ALT-T should jump to this link.... Read More
Copyright and Trademark Symbols in HTML
The ASCII codes can be used to create several useful symbols. Here is a description of how to use ASCII code in your html pages.ASCII codes in html can be identified with the preceding ""
They should be placed into the html just as plain text. The browser should render the ASCII code as the correct symbol.
© can be created with this:
©
® can be created with this:
®
can be created with this:
... Read More
Prevent IE6 Users from Using the Image Toolbar
IE6 users now have access to the image toolbar that allows users to easily print, copy, email, save, and resize pictures. Here's how to disable it.Internet Explorer 6.0 and greater now gives users the image toolbar. This allows users to easily save, resize, and manipulate pictures. In some cases a web designer may not want the users to be able to do this.
Here's how to disable it.
Placing in following code will turn it off for a whole page:
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
Using this code to reference an individual image with the toolbar disabled:
<img src="whateverpicture.jpg" GALLERYIMG="no">... Read More
Running your own shoutcast server / streaming using XP Prof & IIS
This is a quick guide on how to setup your own winamp/shoutcast server on windows xp prof using IIS5.0
Requirements: Windows XP Professional, Winamp 3.0 or higher, Highspeed always-connected internet connection, Basic Networking SkillsThis recipe is for all you music lovers out there.
How to setup your own winamp/shoutcast server using Windows XP Prof
Pre-requisites:
1. Windows XP Professional installed
2. Connected to the internet via Highspeed internet connection
3. IIS Services installed
if not, here is how:
-Go to Control Panel > Add/Remove Programs > Add/Remove Windows Components.
-Go to the Internet Information Services and click Details, Now choose the World Wide Web Service (the required components will be checked automatically, i'd check the documentation option too!)
and Click OK and let XP install IIS.
4. Basic Networking Skills (know how to setup forward ports in router if needed)
To manage IIS / Webserver, Right Click My Computer > Manage
Go to the Bottom, and you'll see t... Read More
Friendly color combinations for Web Pages
Here are some hints for getting a good color combination for your web page.I am a typical guy without fashion or color-sense. I barely can match my clothes. You can imagine that picking out good colors for a website I find very difficult. These are the tools that I typically use.
Input your main colors, and the site will suggest other colors that will blend nicely.
http://www.meyerweb.com/eric/tools/color-blend/
If you want some pre-made suggestions, you can check out these graphics:
http://www.simplygraphix.com/color_combinations1.html
If you want to try out a few combinations in real time, try this java-enabled site:
http://www.digitdesigns.com/colrPick/framePic.htm... Read More
Firefox and IE: Get a Web Developer Toolbar
You will never create web pages the same way. Toolbars are available for firefox and IE that allows the outline of web elements, validation of code, and resizing based on different resolutions. A must download for every web developer.Props to DKirk for showing me this... I decided to return the favor by posting a recipe about it.
Firefox has had a web developer plug-in for quite a while now. Forgive my jedi photoshop skills:
Microsoft has now released their web developer toolbar as well. Once again forgive the photoshopness:
If you are a web developer, you must use one of these toolbars. How many times have you spent hours trying to figure out a table? These toolbars will highlight your tables, divs, frames, or whatever. Wanna try your site with and without cookies... no problem. Wanna see your site at 800X600... 1 click away. Need to validate your html, css, links, xml, or rss? Yeah, there is a menu option for that as well.
Quit driving yourself crazy. If you are a web developer, this... Read More
Firefox and IE: Get a Web Developer Toolbar
You will never create web pages the same way. Toolbars are available for firefox and IE that allows the outline of web elements, validation of code, and resizing based on different resolutions. A must download for every web developer.Props to DKirk for showing me this... I decided to return the favor by posting a recipe about it.
Firefox has had a web developer plug-in for quite a while now. Forgive my jedi photoshop skills:
Microsoft has now released their web developer toolbar as well. Once again forgive the photoshopness:
If you are a web developer, you must use one of these toolbars. How many times have you spent hours trying to figure out a table? These toolbars will highlight your tables, divs, frames, or whatever. Wanna try your site with and without cookies... no problem. Wanna see your site at 800X600... 1 click away. Need to validate your html, css, links, xml, or rss? Yeah, there is a menu option for that as well.
Quit driving yourself crazy. If you are a web developer, this... Read More