Active Classes
Student Resources
Past Classes
Office: BE3175c, no phone
Mailbox: BE3176
Hours: Appointment only



  • flags
  • Translate This Page To:

    Powered by: ALS & Google

  • Website Extras - Tips, Tricks, & Hacks

    Note: Some of these items will not validate properly, so if you do use them, make sure to add a comment before the inserted code that doesn't validate so that you can point out the issue.


    How do I:


    Show the W3C Validator without the icon?

    Place the Validator Icon code inside your page footer section, remove this code (<img src="" alt="Valid XHTML 1.0 Transitional" height="31" width="88" />), and replace it with the word Validate.


    Make sure my site is ready for indexing?

    • Use Google Webmaster Tools - you must have an existing Google/Gmail account to log in before you can add the web site you want to check.
    • You can also try the free tools on - meta tag generator, keyword density, broken link check.
    • Will only work on a remotely loaded web site (not your local computer or pen drive).
    • Make sure to validate your live site too!


    Make sure my site is indexed by Google and other search engines?


    Automatically redirect a page on my website to another page?

    • You just add another META tag to your page's head Section code: <meta http-equiv="refresh" content="10;url=" />


    Offer plug-ins on my site?

    By plug-ins, I mean adding the option for a visitor to download a program that will allow them to access something on your website. Just provide these links (as needed) on your web site to send the visitor to the download area, where s/he can download the program to install in his/her compter to view the related material you are publishing on your web site.


    Embed a Google Map?

    • It's easy, there are short simple samples of how to embed the map of your choice. You can either choose a map that you can manipulate (just like on the web page) or choose to use the Static Map.


    Embed a Google Calendar?

    • Another easy item - you can embed a Google calendar once you (or your client) has a Gmail account and a Google calendar set up. There's an events publisher too.


    Embed a Google-based external RSS feed?

    • It's easy too, and you can choose more than one feed source and from 3 different layouts.
    • Make sure to add the Google AJAX API Key in your head section (a meta tag) for later troubleshooting.


    Add a Google Search engine to my web site?

    • "With Google Site Search, you can create a search engine for your organization's websites in just a few minutes."
    • It is not free.
    • You can check with your web host (like DreamHost) to see if the host provides it free.
    • For this to be useful, you should have very clear language in your website so that visitors will get to the information they need to find.
    • Go to Google Site Search to see plans.


    Add some other Search Engine to my web site?

    • Free, but may be add-sponsored, so double check this first.
    • Check out JRank


    Add a social networking toolbar so folks can bookmark and share my site?

    • Just go to Add This and choose your service (web site) and format, then embed the code into your web page as needed. "Help your users share your content everywhere. Generate traffic back to your site and increase your site's search engine ranking."


    Embed a video/media?

    • YouTube has code on each video's page that you can use to either link to the video on YouTube or to embed the video itself into your page. Example
    • There's also a cool HTML generator for embedding different media.
    • You can also check out DigitalInspiration for instructions for a variety of embeds.


    Use a specific font on my website that visitors don't have on their computers?

    You can in your CS code use a special @font-face style rule that links to a font (a .ttf .otf .eot file) the same way you link to codes and images. Your font file is hosted on your web server and @font-face loads it from there to render html text where you specify it in your code. NOT supported by all browsers yet.

    • Check out Web Font Info article
    • Find web fonts in TrueType/OpenType TT (.ttf), OpenType PS (.otf), or SVG (.svg) formats. There are many free ones.
    • Make sure you have the Open Source font file uploaded with your website files, like Delicious-Bold.otf
    • Use CS code like this:
      @font-face {font-family: Delicious; src: url('Delicious-Bold.otf'); }
      Then call it using font-family: h3 { font-family: Delicious, sans-serif; }

    Add a simple photo gallery?


    Create a FavIcon to show up in the tab of my web site on the Internet?

    • Go to to create a graphic
    • Download when you are finished
    • Put the favicon.ico file into your webserver directory - main directory where your index page is


    Create tool tips for text blocks??


    Explore other widgets to add to my website?

    • Note: Many of these may not be suited for beginning skills, so don't push yourself just yet.
    • Visit Widgipedia for a variety of free open source widgets to embed/use.


    Sell items on my web site?

    • If you really, really must have a basic purchase option on a website, you can use PayPal. Learn more.
    • Your client will have to set up a PayPal Account and do the financial heavy lifting before you can add any PayPal links/process to the website. DO NOT let yourself get pushed into doing the account yourself!!
    • Make sure you have ample time to do this - at least 3-4 weeks for your first time (including dealing with your client, your client setting up the account, setting up and testing the shopping cart and buttons, etc.).
    • Go to PayPal for all the information on the database driven PayPal Shopping Cart.
    • Check out the Website Payments Standard too. It is not a shopping cart.


    Get Internet Explorer 8 to work properly in earlier versions?

    • Add a meta tag with the IE version you want your website to emulate - like this: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

    Do Conditional Formatting for different IE and Firefox CSS stylesheet files?



    Title, metatags, AND then:

    <!-- STYLESHEET IN APP_THEMES activating based on browser sniffed-->
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <!--[if IE]> <link href="iestyles.css" rel="stylesheet" type="text/css">
    <!--[if !IE]>--> <link href="styles.css" rel="stylesheet" type="text/css">



    Find simple things to add to my sites?



    Oh, you want more?


    I want Javascript info!

    Go take WEB150, already! Here's what I have for this quarter: 2 simple pieces. Geez!


    Add a protected email address



    Title, metatags, style tags, AND then:

    <script type="text/javascript">
    function getEmailAddy(displayName, emailName, emailHostName, ext)
    return "<a href='" + "mail" + "to:" + emailName + "@" + emailHostName + "." + ext + "'>" + displayName + "</a>";



    <body> (like in the footer of your web page)

    <p><script type="text/javascript">document.write( getEmailAddy("Email Lisa", "lbothe01", "seattlecentral", "edu") );</script></p>



    Add a changing copyright date


    Also good in the footer of your web pages



    Title, metatags, style tags, AND then:

    <script language="JavaScript" type="text/javascript">
    var myDate = new Date();
    var myYear = myDate.getFullYear();





    &copy;startyear - <? print date("Y") ?>




    Y'all have fun now, ya hear?