search engine09 b by Mdfk3H


									Using HTML and JavaScript to
     Develop Websites.

   Setting up Your Website

         What we will look at:

Optimizingyour site for search engines
Miscellaneous HTML topics
 »Using Image maps
 »Linking within a webpage

         Competency Objectives
1.   Understand how search engines work
2.   Understand how to set up image maps
3.   Learn how to link within a page

               Competency         Common
                 Alert:           Problem
                 You need to
                 know this!        Area!
                               People seem to forget this

                         Search Engines
   Search engine – A site that allows you to search the web for
   Typically has web a back-end database with indexed key
    » Has a special program (called a robot, crawler or spider) that
         – follows links and find popular sites
         – Creates indices or search terms for site and puts into DB
   Google was built at Stanford University
    » Originally had 3-4 parallel ‘spiders’ indexing about 100 pages / second.
   How google Is different
    » Google pushes the most popular site to the top
    » A popularity indicator: The number of popular sites that link back to your site
 and are next most popular sites.

           Some things to check
   Has your site been indexed by google?
    » Try search term:
          9 pages have been indexed from   7,790 pages have been indexed

               What do they index?
   Move search engines fine tune/overhaul their
    algorithms periodically.
   Each search engine has its own index method:
    » Altavista might index all content of your site
    » Others might derive keywords from your content
       – Based on <title>, <img alt=xxx>, <H1> tag content.
    » Other sites might use Meta Tags
       – Engines that appear to use Meta tags:
              AltaVista, Direct Hit, Excite, HotBot
       – Sites that do not appear to use Meta Tags:
              Google?, lycos. Yahoo?


                 Using Meta tags . . .
                                                                                     You need to
                                                                                     know this!

   A meta tag is:
    » An optional HTML tags used to describe your site
    »   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    »   <META NAME="TITLE" CONTENT="Hands-on Web Development Training Courses">
          Perhaps most important meta tag. Include a key specific search string.
    »   <META NAME="DESCRIPTION" CONTENT="Hands-on Training Courses Perl, PHP and
        MySql,and Website development">

         May be used when a search engine shows search results. Put most
         important keywords first and keep less than 40 characters.

    »   <META NAME="KEYWORDS" CONTENT="Web Site Design, Perl Training, Learning Perl,
        PHP course, IT course, Perl course, PHP course, hands-on IT training">

           Put some keywords to try to ‘help’ the search engines. Still they may
           derive the keywords based on site’s content.

            How else can you ‘help’ the
                 search engines?
1.     Make sure your search terms are in the content
       of you home page.
          For example, may want ‘hands-on training’ inside the
2.     Reciprocal linking – You may want to:
          Establish a page that invites people to exchange links
           with your site.
          Search sites in a similar fields that you request a
           reciprocal link (that is, you link to them and they link
           to you.)
Google judges a sites popularity by number of sites that link to it. Therefore many sites
reciprocal linking programs.
                  Reciprocal Linking
   Some sites will keep a ‘sponsors’ or ‘references’
    » Basically seek to exchange links

Sites they’ve probably already
exchanged with

Seek to exchange links

                     What Help Is there ?
   There are many companies in the search
    engine optimization business
     » One site is

                                                                                         comparison has free tools for meta tag generation, ranking tool, traffic 10
    automatic search engine submit tool, and search term checking tool.
         What we will look at:

Optimizingyour site for search engines
Miscellaneous HTML topics
 »Using Image maps
 »Linking within a webpage

           Building Image Maps
    You can divide up any image into regions and
    have each different region link to different places.
   Imagemaps - a webpage image that has more
    than 1 link on it. Depending upon where you click
    you link to different places.

An image map divides the image up

                       Top show image with 2 of the
                       separate pieces

                         Here a couple images are
                         placed together to look like 1

     Manually creating an image map.
        You could use a photo editing tool
         » Cut image into pieces and display next to
                                               Show this image as a hot link, when clicked go here
<body vlink="white">
<A Href=webdeisgn_syllabus.html>
  <img SRC="part1.JPG" height=221 width=176 border="0" ALT="GoTo Syllabus"></A>

<A Href=website_index.html>
<img SRC=part2.JPG height=221 width=116 border="0" ALT="Goto Index"></A>

<A final_project.html>
<img SRC="part3.JPG" height=219 width=143 border="0" ALT="Goto Final Project"></A>

<A HREF="website_index.html">
<img SRC="part4.JPG" height=218 width=258 border="0" Alt="Goto Index"></A>
Note: specifying the height and width of image, does help browser to reserve space for image while
      Disadvantages of manual method . . .

   Couple of disadvantages with manual image
    1. Need to use a paint program to manipulate
    2. Need to make sure they display properly.
    3. Restricted to the types of images you can cut out
       (like rectangles or squares.)

                             Image maps . . .
 You can use image maps to specify clickable
  regions of a regular image.
 Can specify
    » Rectangles – need to know pixel coordinates of
      upper left corner and lower right corner of each
      rectangle                    Upper right corner of each area
    » Circles
    » Polygons.

    The lines here are for
    illustration purposes only.
                                    Lower left corner of each area   16
        How to find pixel coordinates?
1.    Can use a image editing program . . .
      - mspaint, paint-shop pro or Gimp work fine
                      Could move cursor over image to determine pixel location

                     As put cursor here, the pixel location show here in mspaint

     Note: mspaint can be started in XP by going to start->run and entering mspaint
        Record the pixel location

   Record each upper left and lower right
    pixel location
    »   Rectangle   1   "0, 0, 137, 82"
    »   Rectangle   2   “171, 62, 242, 84"
    »   Rectangle   3   "263, 59, 348, 86"
    »   Rectangle   4   “359, 53, 453, 107"
    »   Rectangle   5   “458, 49, 566, 108"

                Upper left coordinate   Lower right coordinate

      Defining the image map . . .
                                                                  Define the name of image
 <html>                                                           map to use
<head> <title>A Manual Image Map</title></head>
<body vlink="white" alink="white" vlink="white" >
                                                                   Define image map called
<img src ="Labselect.jpg" usemap="#navigate" border=0>             navigate. (name is old
                                                                   style tag reqd by some
<map id   =“navigate“>                                             browsers).
  <AREA   SHAPE="rect"   COORDS="0, 0, 137, 82" alt="lab1“ href="Lab1.html">
  <AREA   SHAPE="rect"   COORDS="171, 62, 242, 84" href="Lab2.html">
  <AREA   SHAPE="rect"   COORDS="263, 59, 348, 86" href="Lab3.html">
  <AREA   SHAPE="rect"   COORDS="359, 53, 453, 107" href="Lab4.html">
  <AREA   SHAPE="rect"   COORDS="458, 49, 566, 108" href="Lab5.html">

                     Use the area tag to specify the shape, coordinates, and link for each
                     clickable area

Creating circles and polygons

   Two other shapes you can create:
    » circle – specify the center-x, center-y and the
      circle radius (in pixels).
    <area href=“stuff.html" shape="circle" coords="95,75,65">

    » polygon – specify the x and y coordinate of
      each point in polygon
    <area href=“stuff2.html” shape="poly"

                              coords="300,70,300,200,165,250" >

          Creating Image Maps
   Within XP, can use mspaint to create
    » Start by start->run and enter mspaint
    » Set image size by image -> attributes

                                 Set attributes from image option

Creating boxes on image
   Can fill image with fill tool and select a color at bottom

                Boxes can be drawn using box tool

                         To duplicate box, goto edit->select all, select box,
                         and copy and paste the box. Drag it where you want

Putting Text on Image
   Use the font tool to add text
                 Change the size and style of text

                                   When saving image, make
                                   sure it’s a gif or jpg

Getting the coordinates

       Record the coordinates of each box you want clickable

         What we will look at:

Optimizingyour site for search engines
Miscellaneous HTML topics
 »Using Image maps
 »Linking within a webpage

             Linking within a page

We    learned that we can link to a page with
    »<a href=> mypage </a>
    »This opens the browser to the TOP of the page at
   Sometimes want to open to a specific location in page.
           When click here, link opens up in center of page   Note scroll bars
                                                              about ½ down page

     Creating links within a page
   To create a link within a page
    1. Find the spot inside the page you want to link to:
    2. Define a name for that place:    Defines a label or
         – <A NAME="Bird"></A>               bookmark for that location

    3. Now you can create a link to that spot with:
    <A HREF="#Bird">Click Here</A> to goto Bird Section. </A>
    <A HREF=“">Click Here</A>
                      to goto Bird Section. </A>
    If location within another page.

               For example,
 Suppose have 2 pages, page1.html and
 When click link on page1.html takes you to
  sesame street section of page2.html

              How it will works . . .
   Suppose the body of page2.html contained
       <br><a NAME="Sesame"> </a>
       <font size=+2>Sesame Street Characters</font>
       <br> These three characters are <B> Bert </B>,
       <B>Ernie</B> and the infamous <B>Cookie Monster</B>. <br>

   Then page1.html can link with
    <HTML><HEAD><TITLE>Notes 4</TITLE>
    <HR width="100%">
    <A href="page2.html#Sesame">Click here </A>to goto Seaseme Street

                Summary. . .

Optimizingyour site for search engines
Miscellaneous HTML topics
 »Using Image maps
 »Linking within a webpage

Module 1 Hands on Assignment

                                           You can use either of these files



            One Possible Solution
<head> <title>A Manual Image Map</title></head>
<body vlink="white" alink="white" vlink="white" >
<img src ="imagemap_paint.gif" usemap="#navigate" border=0>
<map id =“navigate" name="navigate">
 <AREA SHAPE="rect" COORDS="0,0, 99,72" alt="Home" href="">
 <AREA SHAPE="rect" COORDS="0,73,99, 146" href="calvin1.gif">
 <AREA SHAPE="rect" COORDS="0, 147, 99, 219" href="dilbert.gif">
 <AREA SHAPE="rect" COORDS="0,220, 99, 288" href="ernie.gif">

         Another lab exercise . . .
   Create a set of meta tags for a web site for
    ‘Happy Harry’s Hardware store
    » He expects to sell hammers, screwdrivers and
      drills online

    One possible solution

<html><head> <title> Happy Harrys Hardware
  Store </title><meta http-equiv="Content-Type"
  content="text/html; charset=iso-8859-1">
  screwdriver sale, drill sale">
<META NAME="KEYWORDS" CONTENT=“hammers, drills,
  hardware, screwdrivers">


To top