search engine09 b by Mdfk3H

VIEWS: 1 PAGES: 34

									Using HTML and JavaScript to
     Develop Websites.



   Setting up Your Website




                             1
         What we will look at:

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




                                          2
         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

                                                            3
                         Search Engines
   Search engine – A site that allows you to search the web for
    stuff
   Typically has web a back-end database with indexed key
    words
    » 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
   yahoo.com and msn.com are next most popular sites.

                                                                                        4
           Some things to check
   Has your site been indexed by google?
    » Try search term: site:yourdomain.com
          9 pages have been indexed from   7,790 pages have been indexed
          webwizard.awl.com                from www.depaul.edu




                                                                5
               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?



                                                              6
                                                                                   Competency

                 Using Meta tags . . .
                                                                                     Alert:
                                                                                     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.


                                                                                         7
            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
           content
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.
                                                                                      8
                  Reciprocal Linking
   Some sites will keep a ‘sponsors’ or ‘references’
    page
    » Basically seek to exchange links




Sites they’ve probably already
exchanged with


Seek to exchange links




                                                   9
                     What Help Is there ?
   There are many companies in the search
    engine optimization business
     » One site is http://www.evrsoft.com/




                                                                                         comparison
    http://www.evrsoft.com 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




                                          11
           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.




                                                    12
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
                         image.




                                            13
     Manually creating an image map.
        You could use a photo editing tool
         » Cut image into pieces and display next to
           eachother.
                                               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>
<BR>
</body>
Note: specifying the height and width of image, does help browser to reserve space for image while
                                                                                              14
downloading.
      Disadvantages of manual method . . .

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



                                                  15
                             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

                                                                                   17
     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

                                                                 18
      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">
</MAP>



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

                                                                                  19
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" >



                                                           20
          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




                                                         21
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




                                                                22
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




                                                        23
Getting the coordinates

       Record the coordinates of each box you want clickable




                                                    24
         What we will look at:

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




                                          25
             Linking within a page

We    learned that we can link to a page with
    »<a href=http://www.mypage.com> mypage </a>
    »This opens the browser to the TOP of the page at
     www.mypage.com
   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




                                                                    26
     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>
    OR
    <A HREF=“mysite.com#Bird">Click Here</A>
                      to goto Bird Section. </A>
    If location within another page.




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




                                          28
              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>
    </HEAD><BODY>
    <HR width="100%">
    <A href="page2.html#Sesame">Click here </A>to goto Seaseme Street
    </a>
    </body>
    </html>

                                                               29
                Summary. . .

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




                                          30
Module 1 Hands on Assignment

                                           You can use either of these files




imagemap_paint.gif



                                       plain_map_image.gif

                     plain_image.gif
                                                                31
            One Possible Solution
<html>
<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">
</MAP>
</BODY> </HTML>




                                                                   32
         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




                                               33
    One possible solution

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




                                            34

								
To top