Related YoLinux Tutorials:
°Web Site Configuration
°XHTML in 2 min
°Web page counter
°Server side scripting
°Tomcat and Java servlets
°YoLinux Tutorials Index
Free Information Technology Magazines and Document Downloads
Free Information Technology Software and Development Magazine Subscriptions and Document Downloads
- 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.
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.
<META HTTP-EQUIV="Refresh" Content="0; URL=http://www.company.com/dir1/">
For more on redirecting web pages and domains see the
YoLinux Apache redirect Tutorial.
- 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
<meta http-equiv="Cache-Control" content="no-cache">
- Prevent Microsoft XP from adding "Smart Tags" to your page when displayed:
<meta name="MSSmartTagsPreventParsing" content="TRUE">
- Open new browser window for next link:
<A HREF="..." TARGET="_TOP">...</A>
- Send web server environment variable information in a web page: file.shtml
- Referring URL: <!--#echo var="HTTP_REFERER" -->
- Visitor's IP address: <!--#echo var="REMOTE_ADDR" -->
- Requested URL: <!--#echo var="REQUEST_URI" -->
- Server name: <!--#echo var="HTTP_HOST" -->
- Visitor's Browser: <!--#echo var="HTTP_USER_AGENT" -->
- Redirect Status Code: <!--#echo var="REDIRECT_STATUS" -->
- E-mail form data with no CGI:
This will e-mail the following:
<form name="application" method="post"
Please enter your full name:
<input type="text" size="20" maxlength="30" name="Your_name">
Please enter your phone number:
<input type="text" size="12" maxlength="12" name="Your_phone">
<input type="submit" name="submit" value=" Submit By E-Mail ">
<input type="reset" name="reset" value=" Clear Form ">
If you wish to use CGI there a PERL script available (FormMail.pl) from
Matt's Script Archives at
By default it uses "sendmail" as an MTA. To use another, edit the script
to reference another mail program.
- The HTML "mailto" tag: Link Text
href="mailto:firstname.lastname@example.org?subject=Email subject line goes
here&body=Text for the body of the email goes here">Link
- Other web page email tricks:
- EScrambler - Tricks to hide your email address from spammers
- Tooltip annotation tags:
Annotate an acronym, abreviation or word with the full meaning by hovering over the tagged acronym as follows.
Example - hover the mouse over the following: DNS
<abbr title="Domain Name Service">DNS</abbr>
- Blank table entries:
|Table with a blank entry:
||More pleasing table:
To make a blank entry more appealing place a "<BR>" (line break)
in the table cell instead of blank or nothing.
- Table outlines:
<TABLE bgcolor="#000000" border="0" cellpadding="4" cellspacing="1" width="100%">
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.
<H3>Text to print:</H3>
- Display of Mathematical Formulas using HTML: (example)
Tu,v = ∑ cv1m,vWCum for u = 0 to r-1, for v = 0 to c-1
rvou,v = ∑ Tu,mWRvm + NuWRvc/2 + ∑ T*u,c-mWRvm
where: r = nr
c = nc
WR = ej2π/c
WC = ej2π/r
j = √-1
T<sub>u,v</sub> = ∑ cv1<sub>m,v</sub>W<sub>C</sub><sup>um</sup> for u = 0 to r-1, for v = 0 to c-1
<sub> (c/2)-1 c-1</sub>
rvo<sub>u,v</sub> = ∑ T<sub>u,m</sub>W<sub>R</sub><sup>vm</sup> + N<sub>u</sub>W<sub>R</sub><sup>vc/2</sup> + ∑ T*<sub>u,c-m</sub>W<sub>R</sub><sup>vm</sup>
<sup> m=0 m=(c/2)+1</sup>
where: r = nr
c = nc
W<sub>R</sub> = e<sup>j2π/c</sup>
W<sub>C</sub> = e<sup>j2π/r</sup>
j = √-1
- Preferred "Canonical" URL's:
Tell the search engines (Google, Yahoo, MSN, etc ...) your preferred
URL for that page. This also nullifies any importance given to another web site if they copy your content. Explicitly state the Canonical URL for the page with the "canonical" tag in the page <head> section.
For example, for this page:
This will also distinguish this page from http://yolinux.com and other possible references to the same domain.
This preference can also be enforced through an Apache redirect configuration.
<link rel="canonical" href="http://www.yolinux.com/TUTORIALS/LinuxTutorialWebTricks.html" />
- Obfuscated URL's:
- Shortened URL's:
Comparative list of URL shortening services
Note: You want a service which will employ a 301 redirect (not a 302 as some do). This is to maintain SEO benefits of a URL which points to your page.
- Login URL's:
- Use a URL service to shorten and forward URL's: TinyURL.com
- HTML Links and resources:
- Web site tools and resources:
- 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.
|CSS: Cascading Style Sheets:|
- BluePrint - browser discrepancies, layouts, form styles, tools
- 960 Grid - based on 960 pixel width. Supports layouts
- Elastic - collumn layout framework
- YUI 2: Grids CSS - Yahoo developer network - layouts at 750px, 950px, and 974px. Order content source for best SEO
|Web page frameworks for responsive design:|
Responsive design refers to the design of a web page using CSS and an HTML layout to respond to various screen sizes so that one page can scale for use on a mobile device to a full sized desktop with the same web page.
These frameworks read the browser size to determine which layout to choose.
|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.
WYSIWYG HTML editor:
HTML text editor:
- Kompozer: WYSIWYG Editor, FTP integration, HTML text interface. (Legacy: Nvu)
- Amaya: W3C WYSIWYG Editor/Browser: XHTML/HTML, MathML, SVG, DTD, CSS and XPointer/RDF collaborative annotation support.
- 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)
Linux text and HTML editors
- Bluefish: HTML text editor with support for WebDAV, FTP, SFTP, HTTP, HTTPS, unicode, language translation, syntax highlighting, ...
- Gnome: Screem - HTML text editor
JPEG, GIF and PNG images can be optimized for a small file size for quicker browser loading by removing metadata, reduced image map (fewer colors), optimizing compression parameters, ...
- Trimage - GUI and command line
- pngquant - command-line utility for lossy compression of PNG images
- Posterizer - Median Cut quantization to reduce number of unique colors in the image with minimal visual distortion
- TinyPNG.com - online service for lossy compression of PNG images
|RSS: Really Simple Syndication|
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
Client "feed readers" or "aggregators" can check a list of feeds and
The RSS feed is written in XML. Example: http://MountainYahoos.com/rssfeed.xml
<?xml version="1.0" encoding="ISO-8859-1" ?>
<rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:media="http://search.yahoo.com/mrss/">
This RSS feed should be viewed using an RSS Reader or RSS
Aggregator. Firefox users clíck the Subscribe to feed icon.
Feed URL: http://www.mountainyahoos.com/
<description>Various ski resorts and snow reports</description>
<copyright>Copyright (C) MountainYahoos.com</copyright>
<title>Mammoth Mountain information</title>
<pubDate>Wed, 2 Oct 2013 00:00:00 CDT</pubDate>
<description>Information and links for Mammoth Mountain ski resort.</description>
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.
The RSS feeds can be promoted through sites like:
Linux News Aggregators:
- JQuery - HTML DOM access, use and traversal for manipulation, event handling, AJAX and animation. Very popular on the web
- D3js - data and geo related display
- AngularJS - for generation of dynamic interactive web pages
- Intense Images - image viewing
- Page and site tour:
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.)
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.
- Add sound/music to a page:
- <embed src="sound-file.mp3" width="0" height="0" autostart=true>
- <embed src="sound-file.mid" width=2 height=0 autostart=true loop=true>
- Set loop="true" to play the sound over and over continuously.
- Set autostart="true" to begin playback of the sound file.
- <embed src="sound-file.wav" hidden="true" autostart="false" loop="false" name="referenceNameOfSoundFile" />
- 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
(Used on this page)
http requests to exchange data with the web server and dynamically insert it
into a loaded web page or in an IFRAME.
The result is a seemingly dynamic application running within your web browser.
AJAX is supported by most modern browsers (Mozilla/Firefox 1.0+, IE 5.0+, ...)
Developer Toolkits: (Commercial)
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:
GET / HTTP/1.1
- To recieve a specific page:
GET /web-page2.html HTTP/1.1
See RFC 2068 for Hypertext Transfer Protocol -- HTTP/1.1
for a full list of commands and details about the protocol.
Why would we ever do such a thing??
When you "View" + "Page Source" in the Netscape browser, you will see the page
download the full source of the web page.
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:
||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
||Send http "HEAD" request to web server. Display response header.
example: HEAD http://www.yolinux.com
Also: curl -I url
||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.
Command format: LWP-COMMAND -t 1m -p proxy.megacorp.com -C user1:super-secret-password -s http://url/content-requested
|Command line options
||Set timeout period. Default period is seeconds. m: minutes, h: hours
||Set mime type. Default for POST: application/x-www-form-urlencoded, GET: -c text/plain
||Set the proxy to be used for the requests.
||Disable proxy set by environment.
||Set http header. i.e. -H 'Referer: http://url-specified/'
||Set login/password to access protected page.
||Print response status code.
||Print usage message and quit.
||Extra debugging output.
||Specify format type: text, ps, links, html, dump
Dynamic content: (code)
- PhpJabbers - PHP/MySQL based comments script (commercial service)
- Gentlesource.com - PHP based. Commercial service for any PHP or HTML based page.
- Cubescript - commercially sold script
- JsWidget.com - BSD license PHP, jQuery plugin, XML but no database. Bubble graphics and discussion threads.
- Commentics.org - FOSS, PHP/MySQL based
- Pnyxe.com: DiscussIt - Free (their ad goes on page) as well as hosted commercial version. Comment ranking and author statistics.
- ScriptsMill - SSI or PHP. Supports voting
Features include CAPTCHA, IP blocking and other anti-comment spam techniques, support for emoticons, social links, bad word filters, comment moderation and administration, email notifications, pagination (long discussions), comment threads, statistics, ...
YoLinux list of e-Commerce Payment Services and credit card processors.
Browser plug-in detection:
Web Professional Associations: