|
Related YoLinux Tutorials:
°Web Site Configuration
°Internet Security
°XHTML in 2 min
°Web page counter
°Server side scripting
°C++ CGI
°Tomcat and Java servlets
°Disc Quotas
°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.
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.
<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
dynamic content.
<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:
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 the script
to reference another mail program.
- The HTML "mailto" tag: Link Text
-
<a
href="mailto:person@isp.com?subject=Email subject line goes
here&body=Text for the body of the email goes here">Link
Text</a>
- 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: |
| Column 1 |
Column 2 |
| one |
two |
| three |
|
|
| Column 1 |
Column 2 |
| one |
two |
| three |
|
|
HTML:
<TR><TD>three</TD><TD></TD></TR> |
Corrected HTML:
<TR><TD>three</TD><TD><BR></TD></TR> |
To make a blank entry more appealing place a "<BR>" (line break)
in the table cell instead of blank or nothing.
- Table outlines:
HTML source:
-
<TABLE bgcolor="#000000" border="0" cellpadding="4" cellspacing="1" width="100%"> <TR bgcolor="#f0f0f0"><TD> <H3>Text to print:</H3> </TD></TR> </TABLE>
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.
- Display of Mathematical Formulas using HTML: (example)
r-1
Tu,v = ∑ cv1m,vWCum for u = 0 to r-1, for v = 0 to c-1
m=0
(c/2)-1 c-1
rvou,v = ∑ Tu,mWRvm + NuWRvc/2 + ∑ T*u,c-mWRvm
m=0 m=(c/2)+1
where: r = nr
c = nc
WR = ej2π/c
WC = ej2π/r
j = √-1
|
<sub> r-1</sub>
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
<sup> m=0</sup>
<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:
-
<head>
<link rel="canonical" href="http://www.yolinux.com/TUTORIALS/LinuxTutorialWebTricks.html" />
...
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.
- Obfuscated URL's:
Helpful links:
- 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: |
CSS Frameworks:
- 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 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.
References:
WYSIWYG HTML 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)
HTML text editor:
- Bluefish: HTML text editor with support for WebDAV, FTP, SFTP, HTTP, HTTPS, unicode, language translation, syntax highlighting, ...
- Gnome: Screem - HTML text editor
Commercial editors:
Linux text and HTML editors
| 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
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.
Feed URL: http://www.mountainyahoos.com/
<channel>
<title>Snow Report</title>
<link>http://www.mountainyahoos.com/index.html</link>
<description>Various ski resorts and snow reports</description>
<language>en-us</language>
<copyright>MountainYahoos.com</copyright>
<item>
<title>Mammoth Mountain information</title>
<link>http://www.mountainyahoos.com/SkiResorts/MammothMountain.html</link>
<description>Information and links for Mammoth Mountain ski resort.</description>
</item>
</channel>
</rss>
|
Notes:
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:
Links:
Linux News Aggregators:
Javascript resources:
Interesting/Cool use of Javascript:
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.
- 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" />
- 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 (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+, ...)
Developer Toolkits: (Commercial)
Links:
Javascript Frameworks: (dynamic, interactive, Ajax web pages)
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 Host: www.web-site-domain.com
- 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
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.
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. |
Command format: LWP-COMMAND -t 1m -p proxy.megacorp.com -C user1:super-secret-password -s http://url/content-requested
-
| Command line options |
Description |
| -t time |
Set timeout period. Default period is seeconds. m: minutes, h: hours |
| -c content-type |
Set mime type. Default for POST: application/x-www-form-urlencoded, GET: -c text/plain |
| -p proxy |
Set the proxy to be used for the requests. |
| -P |
Disable proxy set by environment. |
| -H |
Set http header. i.e. -H 'Referer: http://url-specified/' |
| -C user-name:password |
Set login/password to access protected page. |
| -s |
Print response status code. |
| -h |
Print usage message and quit. |
| -x |
Extra debugging output. |
| -o format |
Specify format type: text, ps, links, html, dump |
| -h |
code. |
Links:
Google has a Javascript map API which anyone can use on their web site to embed maps and geographic information in a web page.
YoLinux list of e-Commerce Payment Services and credit card processors.
Browser plug-in detection:
Web Professional Associations:
|
|