CLASS #5 tip: When designing your web pages… Always ask yourself these questions: Where am I? Where have I been? Where can I go?
Layout Out Your Master Web Page
Continuing Beyond the Banner
So far in our tutorial we have built a banner, added some embellishments and added our menus. This is the page
http://uofgts.com//BasicWD/ClassTest-Site/index.html
If you look at the source of the "index.html" page we are building… you'll notice I kept the html simple, one element following the other…
If you have a Mac use Safari to see the source… it's the Menu: Develop > Show Page Source. For Firefox it is View > View Source Chart
You will also find the files in your class week 5 folder!
Read the source files… there are some useful tips like
<!-- Note the copyright meta statement… for now it looks like this -->
<meta name="dcterms.rightsholder" content="Copyright (c) 2013 Stasiuk Enterprises, all rights reserved.">
<!-- We Switched our stylesheet from embedded to an external text file with the extension .css --><link rel="stylesheet" type="text/css" href="css/main.css">
When you have done the layout of your main web page you can make copies of your index page and re-name them, to match your menu items… Your website Master folder should now look something like this… verify that the links work!
Making Contact!
Using the Mailto: mail client popup
here's the markup… click on the links below… if you use an email program (client) you'll see the different possibilities…
A simple mailto link: <a href="mailto:info@example.com">mail link</a> mail link mailto link with subject: <a href="mailto:info@example.com?subject=email%20subject">mail link</a> mail link mailto link with multiple recipients: <a href="mailto:info@example.com,email@example.com">mail link</a> mail link mailto link with a CC: <a href="mailto:info@example.com?cc=email2@example.com">mail link</a> mail link A mailto link with message body already started: <a href="mailto:info@example.com?body=these%20mailto%20links%20are%20cool"> e-mail link</a> e-mail link A mailto link with 3 lines of message body: <a href="mailto:info@example.com?body=these%20mailto%0Alinks%20are%0Acool"> mail links</a> mail links
Warning!
If you do NOT encode your e-mail address you'll get a lot of spam!
Contact Us! how to setup the mailto Link…
<a href="mailto:someone@microsoft.com"> Contact Us</a>
But this method exposes your e-mail address to "spam robots" that search web pages looking for bare e-mail address. They "harvest" the e-mail address and sell them to spammers... To protect yourself you need to hide your e-mail address with encoding.
Spam bots by the way can read the source, but they cannot read a rendered web page the way you see it in a browser!
Time to get out your secret decoder ring!
Here's an example of an encoded e-mail address:
eg:
user@somedomainname.com
is replaced in the markup with something like:
<script type="text/javascript">
//<![CDATA[
eval(unescape('%76%61%72%20%73%3D%27%61%6D%6C%69%6F%74%75%3A
%65%73%40%72%6F%73%65%6D%6F%64%61%6D%6E%69%61%6E%65%6D%63%2E%6D%6F%27%3B
%76%61%72%20%72%3D%27%27%3B%66%6F%72%28%76%61%72%20%69%3D
%30%3B%69%3C%73%2E%6C%65%6E%67%74%68%3B%69%2B%2B%2C%69%2B%2B%29%7B%72%3D
%72%2B%73%2E%73%75%62%73%74%72%69%6E%67%28%69%2B%31%2C%69%2B
%32%29%2B%73%2E%73%75%62%73%74%72%69%6E%67%28%69%2C%69%2B
%31%29%7D%64%6F%63%75%6D%65%6E%74%2E%77%72%69%74%65%28%27%3C
%61%20%68%72%65%66%3D%22%27%2B%72%2B%27%22%3E%75%73%65%72%40%73%6F%6D
%65%64%6F%6D%61%69%6E%6E%61%6D%65%2E%63%6F%6D%3C%2F%61%3E%27%29%3B'))
//]]>
</script>
The above is an example using a plugin in the Mac web editor: Coda, it's called "Emcoda"
Here are some links to web sites that can do the encoding for you. You save the result as a "snippet" and use it later, any and every time you need to add your e-mail address to a web page. You really don't want spam!
All you need to do is "Cut" and "Paste"
Some sites use simple character encoding and others offer javascripts like Emcoda
http://www.iconico.com/emailProtector/
http://www.wbwip.com/wbw/emailencoder.html
http://www.dynamicdrive.com/emailriddler/
A better "Contact Us" solution is to use "Form Mail" and/or Social Media
That's coming up next!
No comments:
Post a Comment