Using HTML and JavaScript to Develop Websites. - PowerPoint PPT Presentation

Using html and javascript to develop websites l.jpg
Download
1 / 34

  • 293 Views
  • Updated On :
  • Presentation posted in: Internet / Web

Using HTML and JavaScript to Develop Websites. Setting up Your Website. What we will look at: . Optimizing your site for search engines Miscellaneous HTML topics Using Image maps Linking within a webpage. Competency Objectives . Understand how search engines work

Related searches for Using HTML and JavaScript to Develop Websites.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.

Download Presentation

Using HTML and JavaScript to Develop Websites.

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Using html and javascript to develop websites l.jpg

Using HTML and JavaScript to Develop Websites.

Setting up Your Website


What we will look at l.jpg

What we will look at:

  • Optimizing your site for search engines

  • Miscellaneous HTML topics

    • Using Image maps

    • Linking within a webpage


Competency objectives l.jpg

Competency Objectives

  • Understand how search engines work

  • Understand how to set up image maps

  • Learn how to link within a page

Competency

Alert:

You need to

know this!

Common

Problem

Area!

People seem to forget this


Search engines l.jpg

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.


Some things to check l.jpg

Some things to check

  • Has your site been indexed by google?

    • Try search term: site:yourdomain.com

9 pages have been indexed from webwizard.awl.com

7,790 pages have been indexed from www.depaul.edu


What do they index l.jpg

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 l.jpg

Using Meta tags . . .

Competency

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

    • <META NAME="DESCRIPTION" CONTENT="Hands-on Training Courses Perl, PHP and MySql,and Website development">

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

Perhaps most important meta tag. Include a key specific search string.

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

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 l.jpg

How else can you ‘help’ the search engines?

  • Make sure your search terms are in the content of you home page.

    • For example, may want ‘hands-on training’ inside the content

  • 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 l.jpg

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


What help is there l.jpg

What Help Is there ?

  • There are many companies in the search engine optimization business

    • One site is http://www.evrsoft.com/

http://www.evrsoft.com has free tools for meta tag generation, ranking tool, traffic comparison

automatic search engine submit tool, and search term checking tool.


What we will look at11 l.jpg

What we will look at:

  • Optimizing your site for search engines

  • Miscellaneous HTML topics

    • Using Image maps

    • Linking within a webpage


Building image maps l.jpg

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 l.jpg

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.


Manually creating an image map l.jpg

Manually creating an image map.

  • You could use a photo editing tool

    • Cut image into pieces and display next to eachother.

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

Show this image as a hot link, when clicked go here

Note: specifying the height and width of image, does help browser to reserve space for image while downloading.


Disadvantages of manual method l.jpg

Disadvantages of manual method . . .

  • Couple of disadvantages with manual image map:

    • Need to use a paint program to manipulate image

    • Need to make sure they display properly.

    • Restricted to the types of images you can cut out (like rectangles or squares.)


Image maps l.jpg

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

    • Circles

    • Polygons.

Upper right corner of each area

The lines here are for illustration purposes only.

Lower left corner of each area


How to find pixel coordinates l.jpg

How to find pixel coordinates?

  • 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 l.jpg

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 l.jpg

Defining the image map . . .

Define the name of image

map to use

 <html>

<head> <title>A Manual Image Map</title></head>

<body vlink="white" alink="white" vlink="white" >

<img src ="Labselect.jpg" usemap="#navigate" border=0>

<map id =“navigate“>

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

Define image map called navigate. (name is old style tag reqd by some browsers).

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

clickable area


Creating circles and polygons l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

Getting the coordinates

Record the coordinates of each box you want clickable


What we will look at25 l.jpg

What we will look at:

  • Optimizing your site for search engines

  • Miscellaneous HTML topics

    • Using Image maps

    • Linking within a webpage


Linking within a page l.jpg

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


Creating links within a page l.jpg

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:

    • <A NAME="Bird"></A>

      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.

Defines a label or bookmark for that location


For example l.jpg

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


How it will works l.jpg

How it will works . . .

  • Suppose the body of page2.html contained

  • Then page1.html can link with

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

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


Summary l.jpg

Summary. . .

  • Optimizing your site for search engines

  • Miscellaneous HTML topics

    • Using Image maps

    • Linking within a webpage


Module 1 hands on assignment l.jpg

Module 1 Hands on Assignment

You can use either of these files

imagemap_paint.gif

plain_map_image.gif

plain_image.gif


One possible solution l.jpg

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>


Another lab exercise l.jpg

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 solution34 l.jpg

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>


  • Login