|
A Work in Continual Progress report errors to "theFixor" on #HTML Undernet or gogden@ptd.net -
More Faq's for Frames & Iframes - Tables.
Links to more FAQ Sites - Check here for the "Top 5 Web Authoring Lies" |
|
w3c.org - Main Page
w3c.org HTML 4.01 Recommendation 24
December 1999
solamente's interface html4.01 
HTML 4 Elements Index
— html4 as downloadable file
w3c.org - CSS Level 1 - Recommendation 17 Dec 1996
— eric meyer's Interface to css1
w3c.org - CSS Level 2 Recommendation 12 May 1998
— eric meyer's Interface to css2
— css2 as downloadable file
w3c.org - CSS Level 2.1 Working draft 28 Jan 2003
|
w3c.org - XML
w3c.org - XHTML 1.0 Reformulation of HTML 4 in XML 1.0 Recommendation 26 January 2000
w3c.org - Document Object Model Level 1 (dom 1)
w3c.org - HTTP Protocols
— Macromedia.com - Server Response Listing
Guide to ISO/IEC 15445:2000 HTML
See the Future support for anything found here is weak
w3c.org Technical Reports
w3c.org - Current CSS Work
w3c.org - CSS3 Module - Selectors
|
|
THE BAD NEWS IS YOU CAN'T if it's on the www - somebody will somehow figure out a way to obtain it. The "NOTORIOUS - NO RIGHT CLICK SCRIPT" available on the javascript page is almost pointless because it's so easy to get around. That is not to say you can't make it harder:
FOR IMAGES use them as backgrounds - or mouseover them to blank.gif - the causual user will think they have saved it only to find out a repeat visit will be necessary, or a cache search. Make sure that you can clearly identify them using a small only visible on zooming in logo etc.
The good folks at Evolt.org have attempted a server side solution.
FOR SOURCE CODE even harder but you can use a simple trick that fools people all the time - try this page - or you can render the code almost useless to the average person by on your upload copy removing all returns which produces one long line of next to impossible to edit code. If using linked scripts - have a bunch of complicated but blind links. Add lots of comments throughout - some thieves are so clueless they don't find them all making the theft obvious.
|
|
Most browsers support the EMBED element for this, provided that the user has a suitable plug-in for the sound file. You can reach a slightly wider audience if you us BGSOUND as well. To avoid problems with browsers that support both, place the BGSOUND in a NOEMBED container.
<EMBED SRC="your_sound_file" HIDDEN="true" AUTOSTART="true">
<NOEMBED><BGSOUND SRC="your_sound_file"></NOEMBED>
For more on the EMBED element check here for more information on BGSOUND check here. NOTE: that these elements are proprietary and not in any HTML standard.
BE AWARE that some users find it annoying for music to automatically start playing. They may not have the volume set properly on their speakers, or they may be listening to something else. As a courtesy to your users, you may prefer to offer the sound file as a link:
<a href="your_sound_file">Listen to my Cool Sound</a> There is more links and sound sites on the here. |
|
<META HTTP-EQUIV=refresh CONTENT="10;URL=http://new.page.com/index.htm">
Replace the 10 with the number of seconds to wait before sending - add a text link in case of failure. Some search engines consider meta refresh especially short ones "spamming" and will ignore or perhaps punish the submission. Meta refresh also pays absolutely no attention to page loading. If you want the page to load first use -
<body onLoad="location.href='http://www.the_other_place.com'"<
Be aware the you might lock someone into a frustrating continuous loop if they try to use the "back" button on a page that you send them to with the meta refresh tag. #html Undernet [cytro]'s Sensible Redirecting - meta and javascript explanation. |
|
Caching Tutorial for Web Authors and Webmasters
"How do I force the browser to reload my page?" ... The answer is, "You can't FORCE anything on the WWW, but you can include these tags in your <HEAD>
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="Tue, 26-Oct-1965 12:00:00">
<META HTTP-EQUIV="Expires" CONTENT="NOW">
<META HTTP-EQUIV="last modified" CONTENT="NOW">
</HEAD>
This asks the browser not to cache the page, but for current session nothing is 100%. Now, if this is a recent addition to your page, and the browser has already cached it, you'll have to ask your viewers to manually reload, or maybe even clear their cache.
For web cams check out WEBCAMRESOURCE.COM
Technically inclined could visit:
CACHING TUTORIAL
IE OVER-CACHING INFORMATION IE 4.5 for Mac (and 5.0 for Windows) holds on to pages too tightly--here's the only known workaround.
HTTP HEADERS FOR HISTORY - CACHE CONTROL |
|
FavIcon.com - FavIcon.co.uk - Microsoft Instructions - WDVL Favicon Instructions
ADVICE Use FavIcon.com. They have a simple, easy to use product, and they put your icon in their database. Nothing like free advertisement.
1. Delete any bookmarks and references to the site you are creating the
icon for.
2. Reboot (not really necessary, but what the hell, you probably haven't
rebooted in awhile)
3. Save your icon in your root directory on your server
4. Insert <LINK REL="SHORTCUT ICON" HREF="http://www.yourplace.com/uniicon.ico"> into the head of your document.
Give the full url, and make sure to change both the name of your icon on
your server and in the link.
Any pages that bookmark your site from now on will have the new icon in their bookmarks. Older viewers that already have your site bookmarked will most likely need to delete their current bookmark, then re-bookmark. By changing the name of the icon, you force explorer to look for the newer icon, taking away the old icon. This may help for old viewers to see the new icon, but doesn't guarantee it. - Remember, NN doesn't display this. It's an IE freebie only.
|
|
BLACK="#000000" WHITE="#FFFFFF RED="#FF0000" GREEEN="#00FF00" BLUE="#0000FF" ( 0=zero ) all the other "web safe" colors are here or check out the entirely php3 scripted version here.
Web safe colours are any combination of: |
HEX |
00 |
33 |
66 |
99 |
CC |
FF |
Multiples of 33 |
RGB |
00 |
51 |
102 |
153 |
204 |
255 |
Multiples of 51 |
PERCENTAGES |
0% |
20% |
40% |
60% |
80% |
100% |
Increments of 20% |
If the RGB notation has characters other than C, F, 3, 6, 9, and 0, then the color is not among those referred to as "Netscape (Web) safe'. Such colors may look very different if viewed with another browser, or on another platform.
TO ADD BACKGROUND IMAGE USE <BODY BACKGROUND="image.gif (or jpg)"> - css backgrounds
CODE FOR A NON SCROLLING - Add this inside the body tag bgproperties="fixed" however it only works in IE4.0+ and N6 browsers - CSS solutions for repeating and fixed are here.
Resize one image to fit browser window - works cross browser - uses dhtml layers so version 4+ browsers only check it out here
ANIMATED BACKGROUNDS? - usually very annoying but check out these web finds |
|
There is no html code for a tab: adds a non-breaking space. Use multiples for indent, also use as space between words you do not want separated ie proper names etc.
<BLOCKQUOTE>Produces indent on both sides of text included<BLOCKQUOTE>
There are some css styles specifically margin-left: value; that will do it also
This paragraph should have a first line indent using <span style="margin-left: 20px"> on the first word of the paragraph, should work in all current browsers. There is also first-line and first-letter css check out the styles page
|
|
Check this script
<a href="http://url" onMouseOver="parent.status='This is your text'; return(true);" onMouseOut="parent.status=' '; return(true);">link</a>
Default page status message use -
<body OnLoad="window.defaultStatus='THIS IS THE DEFAULT MESSAGE'">
|
|
ZERO PAGE MARGINS - NOTE: flush right in netscape 4 requires vertical scroll bar - this is fixed in N6 has appeared in some Explorer6 also
Old Way: <BODY LEFTMARGIN="0" TOPMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0">
That makes '0' margins on NS 4 and IE 2+. Check this demo get a nice web ruler for the trouble -
Page with older default margins listed
Css would be the way to go now margin: 0px; & padding: 0px |
|
<TABLE WIDTH="99%" HEIGHT="99% CELLPADDING="0" BORDER="0">
<TR>
<TD WIDTH="100%" HEIGHT="100%" ALIGN="CENTER" VALIGN="MIDDLE">
<IMG SRC="whatever.gif" WIDTH="123" HEIGHT="123" BORDER="0"></TD>
</TR>
</TABLE>
This will automatically align everything to the absolute center of a page..
Values of 100% will work but occasionally trigger scroll. A demo of a 100% table with content center and in each corner. And one using some css that works in Explorer6 still uses the technically invalid height= |
|
WHY AREN'T MY PICTURES LOADING ? ... After making a change make sure you saved the changes, then use shift-reload to view the site - to make sure your not looking at the cached version ( don't laugh happens often ) The file type must be .gif .jpg or .png - .bmp (ie only) .tiff etc will not work.
STEP ONE Having done that the first thing to verify is "are the pics actually there" ?
Using your browser - load them like this http://www.your.com/path_to/image.type - until you have located and loaded the image there is no point checking code.
If that does indeed load the pic then go on - if it doesn't -
Either the picture isn't there / corrupted etc. Upload it again, and as last resort rename copy of it, and upload that file - repeat step one.
THE IMAGE HAS BEEN LOCATED now to sort out the possible problems
1. The path is wrong - check the site path - use of \ instead of / will cause problems also.
2. The case is wrong - File.gif - file.GIF - FILE.gif etc are NOT the same on lots of servers. Being consistent in naming files will save you lots of time.
Check for both problems
3. The path - once the pic is found and verified to be "there", check the source code to see that the path / name match exactly - <file://c:/myhardrvive/files/images/pic.gif> often inserted by some programs will not work. Some servers are case sensitive and others have been known to change case. Use the server directory path and case of the verified image. Use of relative paths ie <img src="../../../images/pic.gif"> while correct is sometimes part of the problem - eliminate that by using an absolute path to the picture.
If you have a "verified" image that refuses to load after all the rest has been checked - ask the "friendly folks" in the channel, be prepared to give the absolute url to the picture please. |
|
NOTE: The <font> tag is depreciated in html4 - this does not mean that support will end soon - but css is the future here
How to Change Font Face or Size
Type face size and color examples here
Change face <FONT FACE="CHOICE1,CHOICE2,CHOICE3">Text To Be Changed</FONT> will usually work (see note). Remember the specified font MUST be installed on the viewers computer to work (that means using the really cool font you have on yours is very unlikely to do what you want) and is the reason for providing some choices, prefered first.
NOTE - "Take it for what it's worth...If the font names are listed in upper / lower case the browser may try to display the PS font. If the user is running ATM with font 'smoothing' on, the font displays with anti-aliasing, which looks really bad with colored type on a dark background.
If the font names are listed in all uppercase, the problem disappeared. We tested this phenomena on over a dozen machines. Without ATM, no problem - with ATM more than half of the machines displayed poorly with upper/lower - all fine with upper case only. Interesting. (Order made no difference.)
I am under the impression that order does not matter, the browser will display the first that it recognizes, or the default if none exist."
Change font size using <FONT SIZE="?"> using a range of +/- 1 to 7
Change font color including links <FONT COLOR="#??????"> use both quotes. Link color is changed by <a href=" "><FONT COLOR=" ">LINK TEXT</FONT></A> - Multiple link colors you could use this completely invalid way:
<a href="file.html"><FONT COLOR="?"><LINK></FONT> like this RED GREEN BLUE but it MUST be inside the link.
Check the section on css links for the better way to do it.
Old articler on the perils of < FONT > element.
How do I Align or Justify Text - demo of left right center justify again probably better using css now. |
|
MAILTO WITH SUBJECT - NOTE: Not all browsers support this method, and non supported mail will be lost. Use the following
<a href=mailto:whoever@provider.is?subject=this>
Use Image for Form Submission
<INPUT TYPE="image" NAME="Submit Form" SRC="http://url.to/image.gif/jpg" WIDTH="?" HEIGHT="?" BORDER="0" VALUE="submit"> There is no way to do this for the reset button.
USE BUTTON TO GO TO NEW PAGE
<FORM ACTION="http://url.you.want.to.go.to/" METHOD=GET>
<INPUT TYPE=submit VALUE="TEXT ON BUTTON" NAME="somename">
</FORM>
USE TWO BUTTONS ON ONE FORM
You will need to give your Submit buttons a Name attribute, and, optionally, a Value attribute, In order to determine which button was used, you will want to use distinctive Names, or Values, or both. Browsers will display the Value, in addition to sending it to the server, so choose something that's meaningful to the user. Example:-
<INPUT TYPE=SUBMIT NAME=join VALUE="I want to join"> or ,
<INPUT TYPE=SUBMIT NAME=info VALUE="Send Info">
|
|
IE 5 does it automatically, just -
<a href="#" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http
://www.web-building.com');" style="cursor:hand">Click here</a> — to set this site as your homepage Click here or check WebMaster Tools Site
Since this only works in explorer - another version would be: BookMark Page using:
<span style='color:blue;cursor:hand;'
onClick='window.external.AddFavorite(location.href, document.title);'>
|
< PAGE HAS THE NETSCAPE BOUNCE >
If your page seems to load completely then appear to reload in Netscape especially on apache servers, the problem is probably the following line:
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
while it's official from W3 it appears to be the cause - take it out. Read about it here.
|
|
|
Updated 3/30/03 - Link Checked 3/30/03 web-building.com |
