This is an eclectic collection of weird web HTML and Javascript code snippets and stuff. You can get the standard HTML books
and tutorials. This is not one of those.
Printing: Microsoft Internet Explorer does not scale
web pages to fit the printer. Use a table with a width of 800px to
print the width of a US size of paper.
Forwarding: This will forward to a different site.
File: index.html
This line placed anywhere in a web page will forward the web surfer
to a different site. Typically it is placed in the "HEAD" section
of an HTML document.
This can also be the entire contents of the file.
Change the zero to a differnt value to pause for a given number of
seconds before forwarding.
For an alternate method using Javascript see method to open a new
window below in Javascript section.
Do not allow page to be pulled from browser cache. Force load of new page:
This is important for a page which is changed frequently or for
dynamic content.
Redirect Status Code: <!--#echo var="REDIRECT_STATUS" -->
E-mail form data with no CGI:
Display:
HTML source:
<form name="application" method="post" action="mailto:user@isp-abc.net?SUBJECT=formtest" enctype="text/plain"> Please enter your full name: <input type="text" size="20" maxlength="30" name="Your_name"> <BR> Please enter your phone number: <input type="text" size="12" maxlength="12" name="Your_phone"> <BR> <input type="submit" name="submit" value=" Submit By E-Mail "> <input type="reset" name="reset" value=" Clear Form "> </form>
This will e-mail the following:
Your_name=Jenny Your_phone=867-5309
If you wish to use CGI there a PERL script available (FormMail.pl) from
Matt's Script Archives at
http://www.worldwidemart.com/scripts/.
By default it uses "sendmail" as an MTA. To use another, edit te script
to reference another mail program.
Use nested tables with an all black table as the outer table.
Extra "TD" data cells in the inner table will result in black lines of separation between the data cells.
Obfuscated URL's:
URLs are generally given as a domain name which is resolved int an IP
address by a DNS name server.
http://www.megawebhost.com
Spammers often try to hide their source by using decimal form:
http://1078386566/
The "%" followed by a hex value converts to the ascii character.
The URL itself cannot use hex values.
http://yolinux.com/%48%4F%57%54%4F/ is the same as http://yolinux.com/HOWTO/
Using a different port: Web servers typically use port 80. Many IPS's
block people from putting up a web server by scanning for computers
using port 80 and if found they are blocked.
You can set up Apache to run on any port. If using
port 8080 one would access it by referencing that port:
http://208.188.34.109:8080/mywebpage.html
Password Protected Web Sites:
Here is a trick to encorporate a login and password into a URL. Typicall
one would attempt to enter the password protected area of the web site
and the user
would be confronted with a login dialog box into which one would enter
the user id and password.
Another option is to enter a URL with the login and password embedded.
FTP with a URL:
ftp://login-id:password@your-domain.com/file-name
This will login and download file. If using anonymous ftp(login name is "anonymous", the login/password is not needed.
Use a URL service to shorten and forward URL's: TinyURL.com
Linkchecker - Available in RPM form from the Red Hat powertools collection. (I use this tool: linkchecker file-to-check.html)
LinkScan - Commercial product to find/detects broken links.
Web page design for the color blind:
At least 10% of the male population is color blind or suffers from some form of color deficiency.
Color blind individuals confuse red and green and some blue and yellow.
Check your web page using the site Visicheck which will show how your page will appear to a color blind individual.
Web page checklist:
Avoid using red and green or blue and yellow color combinations for combinations of text and background colors.
Label colored elements so you do not rely soley on color keys.
If using red, green or blue font colors, also use an underline or bold text
attribute for an additional visual cue.
Use text to describe images and their purpose next to the image.
Mozilla SeaMonkey
Best known as a browser but select "File" + "Edit Page" or "File" +
"New" + "Composer Page" to enter the "Composer" component. This is a
WYSIWYG editor which requires no training. Anyone can use it. (Not
available in Firefox.)
(Legacy: Mozilla suite 1.x)
HTML text editor:
Bluefish: HTML text editor with support for WebDAV, FTP, SFTP, HTTP, HTTPS, unicode, language translation, syntax highlighting, ...
RSS is a method to refer to web content using XML. It is most
usefull for content which is being updated regularly and for which
there will return traffic.
Using RSS, your updated content is delivered to subscribers of the
feed.
Client "feed readers" or "aggregators" can check a list of feeds and
display
updated articles.
The RSS feed is written in XML. Example: http://MountainYahoos.com/rssfeed.xml
<?xml version="1.0" encoding="ISO-8859-1" ?> <rss version="0.91"> This RSS feed should be viewed using an RSS Reader or RSS Aggregator. Firefox users clíck the Subscribe to feed icon.
Feeds are typically linked with the word "Subscribe", an orange rectangle ,
or with the letters RSS or XML . Use any one of these symbols to link to the XML feed file.
<HEAD>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
function note_init( ) {
note = window.open( 'sample_pop_page.html','WindowB','width=450,height=400,scrollbars=yes')
}
// end script -->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript:note_init()">Text of link</A> </BODY>
Pop-up a simple message box:
<FORM> <INPUT name=but1 onclick="alert('Place pop-up message here!! Great for simple help or error message.');" type=button value="Click this button to produce pop-up message"> </FORM>
Javascript to Scroll message at bottom of browser:
Place in "HEAD" section of HTML page.
<script> <!-- var scrmsg = " YoLinux.com: Web Tips and Tricks "; var scrspacer = " "; var scrpos = 0; function ScrollMessage() { window.status = scrmsg.substring(scrpos, scrmsg.length) + scrspacer + scrmsg.substring(0,scrpos); scrpos++; if (scrpos > scrmsg.length) scrpos = 0; window.setTimeout("ScrollMessage()", 150); }
ScrollMessage(); //--> </script>
Javascript to Scroll message title at top of browser window:
Place in "HEAD" section of HTML page.
<script> <!-- var msg = " YoLinux.com: Web Tips and Tricks. -- Top of Page -- "; var speed=200;
function ScrollTitle() { document.title=msg; msg=msg.substring(1,msg.length)+msg.charAt(0); setTimeout("ScrollTitle()",speed); } ScrollTitle(); //--> </script>
Javascript functions pulled from server: (not embeded in page)
The portion of the javascript code which is emebeded in the "body" of
the page which calls the javascript function must still be present.
This is just one method of reducing duplication among pages.
jsMath: Javascript for the printing of mathematics symbols on a web page:
This is the holy grail for the publishing of mathematics formulas.
See the jsMath home page.
Also look at:
Sound can enhance the user experience of your web page. Browsers do not
natively support sound and require helper applications.
(See the YoLinux tutorial on configuring the Mozilla/Firefox browser.)
Not all browsers support sound equally as JavaScript and player support
vary from platform to platform. Midi files with complex arrangements of
many different types of instruments will vary based on the sound card
support of the instruments referenced and arrangement support. Sound
loops are measured in beats per minute (bpm). Flash often uses 120 bpm
to syncronize with the frame rates of the flash presentation.
The "referenceNameOfSoundFile" is optional and allows reference by JavaScript.
Set hidden="false" to allow user to view sound controls.
Set loop="false" to play the sound file once only.
Set autostart="false" halts playback of the sound file
until told otherwise.
<embed src=sound-file.swf quality=high
pluginspage=http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash
type=application/x-shockwave-flash 5>
(Used on this page)
AJAX:
AJAX (Asynchronous JavaScript and XML) is a web technique which uses XML/HTML
http requests to exchange data with the web server and dynamically insert it
into a loaded web page in an IFRAME.
Javascript code running in the browser communicates with the server by passing XML formatted data.
The result is a seemingly dynamic application running within your web browser.
AJAX is only supported by modern browsers (Mozilla/Firefox 1.0+, IE 5.0+, ...)
The connection/transfer protocol the web browser uses with the web server is HTTP.
This protocol is a plain text set of instructions issued to a web server using
a regular sockets TCP/IP connection typically using port 80.
Telnet connection tricks:
One can make this connection using a telnet session.
telnet www.web-site-domain.com 80
Once connected issue the HTTP commands.
Command to retrieve the default home page:
GET / HTTP/1.1
Then press carraige return twice.
Sometimes it may be necessary to enter the host name when virtual hosting is enabled:
Why would we ever do such a thing??
When you "View" + "Page Source" in the Netscape browser, you will see the page
source after the Javascript is processed.
In order to see the original Javascript, connect with a telnet session to
download the full source of the web page.
LWP: perl-libwww-perl:
The Linux RPM package perl-libwww-perl provides a set of perl command
scripts which acts as a WWW user agent.
The above telnet interactions to issue http requests are available by issuing
a single command:
Command
Description
/usr/bin/GET
Send http "GET" request to web server. user/password is requested if the document is password protected.
example: GET http://www.yolinux.com/TUTORIALS/index.html
Also see the command wget
/usr/bin/HEAD
Send http "HEAD" request to web server. Display response header.
example: HEAD http://www.yolinux.com
Also: curl -I url
/usr/bin/POST
Send http "POST content" request to web server. Use command option "-c application/x-www-form-urlencoded" (default) or "-c text/plain" to specify mime type of the content.
Attachement image: Photo will be an attachement. (2 images)
Subject: Talya and Sigal Update Date: Sat, 6 Jan 2001 11:09:50 -0600 MIME-Version: 1.0 Content-Type: multipart/mixed; boundary="----=_NextPart_000_0042_01C077D1.2FD60800" X-Priority: 3 X-MSMail-Priority: Normal X-Mailer: Microsoft Outlook Express 5.00.2014.211 X-MimeOLE: Produced By Microsoft MimeOLE V5.00.2014.211 X-Mozilla-Status: 8001 X-Mozilla-Status2: 00000000 X-UIDL: e54355e3ad7b0700
,
or with the letters RSS 
or XML 
. Use any one of these symbols to link to the XML feed file.
Example link
