Top Banner
UNIVERSITY OF MASSACHUSETTS AMHERST CMPSCI 120 Fall 2010 Lecture 12 CSS Web2.0 Search UNIVERSITY OF MASSACHUSETTS AMHERST CMPSCI 120 Fall 2010 Announcements Exam #1 graded Exam #2 rescheduled now tentatively 11/10 Project #2 due November 9th
23

Lecture 12 - University of Massachusetts Amherst · 2010-10-19 · UNIVERSITY OF MASSACHUSETTS AMHERST • CMPSCI 120 Fall 2010 Lecture 12 CSS Web2.0 Search UNIVERSITY OF MASSACHUSETTS

Jul 14, 2020

Download

Documents

dariahiddleston
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Lecture 12 - University of Massachusetts Amherst · 2010-10-19 · UNIVERSITY OF MASSACHUSETTS AMHERST • CMPSCI 120 Fall 2010 Lecture 12 CSS Web2.0 Search UNIVERSITY OF MASSACHUSETTS

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

Lecture 12

CSSWeb2.0Search

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

Announcements

Exam #1 gradedExam #2 reschedulednow tentatively 11/10

Project #2 due November 9th

Page 2: Lecture 12 - University of Massachusetts Amherst · 2010-10-19 · UNIVERSITY OF MASSACHUSETTS AMHERST • CMPSCI 120 Fall 2010 Lecture 12 CSS Web2.0 Search UNIVERSITY OF MASSACHUSETTS

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

html, CSS, Javascript

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

Styling backgroundsCSS background properties are used todefine the background effects of anelement.CSS properties used for backgroundeffects:background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position

Some Examples

Page 3: Lecture 12 - University of Massachusetts Amherst · 2010-10-19 · UNIVERSITY OF MASSACHUSETTS AMHERST • CMPSCI 120 Fall 2010 Lecture 12 CSS Web2.0 Search UNIVERSITY OF MASSACHUSETTS

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

Block vs inline elements

Examples of block elements:<h1><p><div>

An inline element only takes up asmuch width as necessary, anddoes not force line breaks.<span><a>

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

html <span> and <div> tags

The <span> element is the genericinline element.The <div> element is the genericblock element.Defines a “box” of html

Page 4: Lecture 12 - University of Massachusetts Amherst · 2010-10-19 · UNIVERSITY OF MASSACHUSETTS AMHERST • CMPSCI 120 Fall 2010 Lecture 12 CSS Web2.0 Search UNIVERSITY OF MASSACHUSETTS

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

html <span><p>Suspendisse dapibus posuere ante quis rhoncus. Pellentesquesuscipit mattis commodo. Sed elementum egestas laoreet.Phasellus diam felis, semper at rutrum vitae, pellentesqueeleifend eros.

</p><p class="small">Morbi augue lorem, lobortis dapibus dictum id, laoreet necrisus. Nullam et nisl diam. Quisque tristique placerat mi sitamet condimentum. Nulla sed augue nulla. Proin euismodcondimentum ornare.

</p>Vivamus suscipit lorem ut ipsum vestibulum eu molestie ligulasemper. Curabitur adipiscing blandit augue, et commodo leofacilisis ac. Phasellus vulputate, neque ut lobortis elementum,tellus quam convallis odio, in sollicitudin arcu felis adipiscingmassa.

</p>

p.small {font-variant: small-caps}

Example

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

html <span><p>Suspendisse dapibus posuere ante quis rhoncus. Pellentesquesuscipit mattis commodo. Sed elementum egestas laoreet.Phasellus diam felis, semper at rutrum vitae, pellentesqueeleifend eros.

</p><p class="small">Morbi augue lorem, lobortis dapibus dictum id, laoreet necrisus. Nullam et nisl diam. <span>Quisque tristique placeratmi sit amet condimentum.</span> Nulla sed augue nulla.Proin euismod condimentum ornare.

</p>Vivamus suscipit lorem ut ipsum vestibulum eu molestie ligulasemper. Curabitur adipiscing blandit augue, et commodo leofacilisis ac. Phasellus vulputate, neque ut lobortis elementum,tellus quam convallis odio, in sollicitudin arcu felis adipiscingmassa.

</p>

p.small {font-variant: small-caps}

Example

Page 5: Lecture 12 - University of Massachusetts Amherst · 2010-10-19 · UNIVERSITY OF MASSACHUSETTS AMHERST • CMPSCI 120 Fall 2010 Lecture 12 CSS Web2.0 Search UNIVERSITY OF MASSACHUSETTS

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

html <span><p>Suspendisse dapibus posuere ante quis rhoncus. Pellentesquesuscipit mattis commodo. Sed elementum egestas laoreet.Phasellus diam felis, semper at rutrum vitae, pellentesqueeleifend eros.

</p><p class="small">Morbi augue lorem, lobortis dapibus dictum id, laoreet necrisus. Nullam et nisl diam. <span class=“red”>Quisquetristique placerat mi sit amet condimentum.</span> Nulla sedaugue nulla. Proin euismod condimentum ornare.

</p>Vivamus suscipit lorem ut ipsum vestibulum eu molestie ligulasemper. Curabitur adipiscing blandit augue, et commodo leofacilisis ac. Phasellus vulputate, neque ut lobortis elementum,tellus quam convallis odio, in sollicitudin arcu felis adipiscingmassa.

</p>

p.small {font-variant: small-caps}

Example

span.red {color: #ff0000}

span.bigchange {color: #00ff00;font: italic 900 18px "times new roman";}

Example

Example

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

Added Interest

Change the cursor

Page 6: Lecture 12 - University of Massachusetts Amherst · 2010-10-19 · UNIVERSITY OF MASSACHUSETTS AMHERST • CMPSCI 120 Fall 2010 Lecture 12 CSS Web2.0 Search UNIVERSITY OF MASSACHUSETTS

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

html <div><div class="important"><p>Suspendisse dapibus posuere ante quis rhoncus. Pellentesque suscipit

mattis commodo. Sed elementum egestas laoreet. Phasellus diamfelis, semper at rutrum vitae, pellentesque eleifend eros.

</p></div><div class="centerimportant"><p>Morbi augue lorem, lobortis dapibus dictum id, laoreet nec risus. Nullam

et nisl diam. Quisque tristique placerat mi sit amet condimentum.Nullased augue nulla. Proin euismod condimentum ornare.

</p></div>Vivamus suscipit lorem ut ipsum vestibulum eu molestie ligula semper.

Curabitur adipiscing blandit augue, et commodo leo facilisis ac.Phasellus vulputate, neque ut lobortis elementum, tellus quamconvallis odio, in sollicitudin arcu felis adipiscing massa.

</p>

div.important {color: #ff0000}

div.centerimportant {color: #0000ff;text-align: center;}

Example

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

CSS positioning propertiesallow you to position an element

can also place an element behind another, andspecify what should happen when an element'scontent is too big.

elements can be positioned using the top, bottom, left,and right properties.however, these properties will not work unless theposition property is set first also work differently depending on the positioningmethod.

four different positioning methods.Static PositioningFixed PositioningRelative PositioningAbsolute Positioning

Page 7: Lecture 12 - University of Massachusetts Amherst · 2010-10-19 · UNIVERSITY OF MASSACHUSETTS AMHERST • CMPSCI 120 Fall 2010 Lecture 12 CSS Web2.0 Search UNIVERSITY OF MASSACHUSETTS

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

PositioningStatic Positioningdefaultalways positioned according to thenormal flow of the page and not affectedby the top, bottom, left, and rightproperties.

Fixed Positioningpositioned relative to the browser windowand will not move even if the window isscrolled:Position an element relative to thebrowser window

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

More positioning

Relative Positioningpositioned relative to its normal position.Position an element relative to its normalposition

Absolute Positioningpositioned relative to the first parentelement that has a position other thanstatic. If no such element is found, thecontaining block is <html>:Position an element with an absolutevalue

Page 8: Lecture 12 - University of Massachusetts Amherst · 2010-10-19 · UNIVERSITY OF MASSACHUSETTS AMHERST • CMPSCI 120 Fall 2010 Lecture 12 CSS Web2.0 Search UNIVERSITY OF MASSACHUSETTS

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

Positioning Images

ExamplesSet the top edge of an image usinga pixel valueSet the bottom edge of an imageusing a pixel valueSet the left edge of an image usinga pixel valueSet the right edge of an imageusing a pixel value

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

CSS Floating

an element can only be floated leftor right, not up or down.will move as far to the left or rightas it can.elements after the floating elementwill flow around it, but elementsbefore the floating element will notbe affected.

Page 9: Lecture 12 - University of Massachusetts Amherst · 2010-10-19 · UNIVERSITY OF MASSACHUSETTS AMHERST • CMPSCI 120 Fall 2010 Lecture 12 CSS Web2.0 Search UNIVERSITY OF MASSACHUSETTS

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

CSS Floating Examples:A simple use of the float propertyAn image with border and margins thatfloats to the right in a paragraphAn image with a caption that floats to therightLet the first letter of a paragraph float tothe leftCreate an image gallery with the floatpropertyCreating a horizontal menu

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

<div> positioningAbsolutethe basis for the distance is the sitesbordersif you have it 10 pixels from the top it willbe exactly 10 pixels from the top of thepage.

Relativebased on the bottom of the last thingplaced on your site

Page 10: Lecture 12 - University of Massachusetts Amherst · 2010-10-19 · UNIVERSITY OF MASSACHUSETTS AMHERST • CMPSCI 120 Fall 2010 Lecture 12 CSS Web2.0 Search UNIVERSITY OF MASSACHUSETTS

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

Absolute

div.absoluteposition {position:absolute;bottom:10;left:20;right:20;border:2;border-color:red;border-style:dashed;}

Example

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

Relative

div.relativeposition {position:relative;top:40px;left:50px;width:400px;border:3;border-color:green;border-style:dashed;}

Example

Page 11: Lecture 12 - University of Massachusetts Amherst · 2010-10-19 · UNIVERSITY OF MASSACHUSETTS AMHERST • CMPSCI 120 Fall 2010 Lecture 12 CSS Web2.0 Search UNIVERSITY OF MASSACHUSETTS

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

Floatingdiv.floatingposition {float: right;width:100px;border:3;border-color:blue;border-style:dashed;}

Creating a homepage without tables

Example

Example

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

Styling Text

“Decorating” texttext-decoration:

overlineline-throughunderlineblinknone

Aligning texttext-align:

centerleftright

Setting text casetext-transform:

uppercaselowercasecapitalize

Indenting texttext-indent: 1cm

Some Examples

Page 12: Lecture 12 - University of Massachusetts Amherst · 2010-10-19 · UNIVERSITY OF MASSACHUSETTS AMHERST • CMPSCI 120 Fall 2010 Lecture 12 CSS Web2.0 Search UNIVERSITY OF MASSACHUSETTS

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

All-in-oneThe font shorthand property sets all the fontproperties in one declaration.The propertiesthat can be set, are (in order):

font-style, font-variant, font-weight, font-size/line-height, font-family

normalitalicoblique

normalsmall-caps

normalboldbolderlighter100200300400500600700800900

xx-smallx-smallsmallmediumlargex-largexx-largesmallerlargerlength%

family-namegeneric-familyinherit

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

Styling Lists

The CSS list properties allow youto:Set different list item markers forordered listsSet different list item markers forunordered listsSet an image as the list itemmarker

http://www.w3schools.com/css/css_list.asp

Page 13: Lecture 12 - University of Massachusetts Amherst · 2010-10-19 · UNIVERSITY OF MASSACHUSETTS AMHERST • CMPSCI 120 Fall 2010 Lecture 12 CSS Web2.0 Search UNIVERSITY OF MASSACHUSETTS

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

Styling LinksLinks can be styled with any CSSproperty (e.g. color, font-family,background-color).Special for links are that they can bestyled differently depending on whatstate they are in. The four links statesare:a:link - a normal, unvisited linka:visited - a link the user has visiteda:hover - a link when the user mousesover ita:active - a link the moment it is clicked

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

The CSS Box Model

All HTML elements can beconsidered as boxes.In CSS, the term "box model" isused when talking about designand layout.The CSS box model is essentially abox that wraps around HTMLelements, and it consists of:margins, borders, padding, and theactual content.

Page 14: Lecture 12 - University of Massachusetts Amherst · 2010-10-19 · UNIVERSITY OF MASSACHUSETTS AMHERST • CMPSCI 120 Fall 2010 Lecture 12 CSS Web2.0 Search UNIVERSITY OF MASSACHUSETTS

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

The CSS Box ModelMarginClears an area around the border. The margindoes not have a background color, it iscompletely transparent

BorderA border that goes around the padding andcontent. The border is affected by thebackground color of the box

PaddingClears an area around the content. The paddingis affected by the background color of the box

ContentThe content of the box, where text and imagesappearnd images ap

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

CSS Box Model

width:220px;padding:10px;border:5px solid gray;margin:0px;

do the math:220px (width)+ 20px (left and right padding)+ 10px (left and right border)+ 0px (left and right margin)= 250px Example

Page 15: Lecture 12 - University of Massachusetts Amherst · 2010-10-19 · UNIVERSITY OF MASSACHUSETTS AMHERST • CMPSCI 120 Fall 2010 Lecture 12 CSS Web2.0 Search UNIVERSITY OF MASSACHUSETTS

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

Calculating

The total width of an element shouldalways be calculated like this:Total element width = width + leftpadding + right padding + left border +right border + left margin + right margin

The total height of an element shouldalways be calculated like this:Total element height = height + toppadding + bottom padding + top border+ bottom border + top margin + bottommargin

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

Styling

CSS Border PropertiesCSS OutlinesCSS MarginCSS Padding

Page 16: Lecture 12 - University of Massachusetts Amherst · 2010-10-19 · UNIVERSITY OF MASSACHUSETTS AMHERST • CMPSCI 120 Fall 2010 Lecture 12 CSS Web2.0 Search UNIVERSITY OF MASSACHUSETTS

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

CSS Display

can hide an element can by setting thedisplay property to "none" or thevisibility property to "hidden” these two methods produce differentresults, visibility:hidden hides anelement, but it will still take up thesame space as before.How to hide an element (visibility:hidden)How to not display an element(display:none)How to make a table element collapse

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

Adapted fromWeb 101:Third Edition by Wendy G. Lehnert & Richard L. Kopec Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

Web 2.0 Taking Charge

Human beings are highly socialand are drawn to communicatingmedia. > 53 million American adultshave used the internet to blog,communicate, post images,share files, or contributecontent

Page 17: Lecture 12 - University of Massachusetts Amherst · 2010-10-19 · UNIVERSITY OF MASSACHUSETTS AMHERST • CMPSCI 120 Fall 2010 Lecture 12 CSS Web2.0 Search UNIVERSITY OF MASSACHUSETTS

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

World according to xkcd 2007

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

World according to xkcd 2010

Page 18: Lecture 12 - University of Massachusetts Amherst · 2010-10-19 · UNIVERSITY OF MASSACHUSETTS AMHERST • CMPSCI 120 Fall 2010 Lecture 12 CSS Web2.0 Search UNIVERSITY OF MASSACHUSETTS

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

Web 2.0People are the key component of Web2.0 and contribute content in variouswaysVideo files (YouTube)Audio files (podcasts)Personal commentary (blogs, onlineforums)Scholarly information (wikipedia)Categorizing (del.icio.us)

Email is losing ground as the mostpopular internet application to socialnetworks

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

Social NetworkingBoyd and Ellison (2007) define social networks as “…web-based services that allow individuals to….construct a public or semi-public profile within abounded systemarticulate a list of other users with whom they share aconnectionview and traverse their list of connections and thosemade by others within the system. The nature andnomenclature of these connections may vary from siteto site.”

From Rob Gibson,Ed.D.

Page 19: Lecture 12 - University of Massachusetts Amherst · 2010-10-19 · UNIVERSITY OF MASSACHUSETTS AMHERST • CMPSCI 120 Fall 2010 Lecture 12 CSS Web2.0 Search UNIVERSITY OF MASSACHUSETTS

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

Social Networking in eLearningSocial Networking in eLearningSocial Networking Factoids

Social networks now represent thefastest growing Internet segment –3x the rate of overall Internetgrowth. (2009)

Social networking sites are growingat the rate of 47% annually,reaching 45% of total web users.(2006)

Social networking and blogging arenow the 4th most popular onlineactivities, according to Nielsen’srecently released Global Faces andNetworked Places report. (2009)

From Rob Gibson,Ed.D.

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

What Are Search Engines?

huge databases of web page files (and/orindexes) that have been assembledautomatically by machinetwo types of search engines:individual -- compile their own searchabledatabases on the webmetasearchers -- do not compiledatabasessearch the databases of multiple sets ofindividual engines simultaneously

Bare Bones 101: A Basic Tutorial On Searching The Web http://www.sc.edu/beaufort/library/pages/bones/bones.shtml

Page 20: Lecture 12 - University of Massachusetts Amherst · 2010-10-19 · UNIVERSITY OF MASSACHUSETTS AMHERST • CMPSCI 120 Fall 2010 Lecture 12 CSS Web2.0 Search UNIVERSITY OF MASSACHUSETTS

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

Examples

http://www.ask.com/http://www.bing.com/http://www.google.com/

http://www.kartoo.com/http://www.iboogie.tv/ http://www.dogpile.com/

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010Bare Bones 101: A Basic Tutorial On Searching The Web http://www.sc.edu/beaufort/library/pages/bones/bones.shtml

How Do Search Engines Work?compile their databases by employing"spiders" or "robots" ("bots") to crawlthrough web space from link to link,identifying and perusing pages.sites with no links to other pages may bemissed by spiders altogetheronce the spiders get to a web site, theytypically index most of the words on thepublicly available pages at the siteweb page owners may submit their URLsto search engines for "crawling" andeventual inclusion in their databases.

Page 21: Lecture 12 - University of Massachusetts Amherst · 2010-10-19 · UNIVERSITY OF MASSACHUSETTS AMHERST • CMPSCI 120 Fall 2010 Lecture 12 CSS Web2.0 Search UNIVERSITY OF MASSACHUSETTS

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

How Do Search Engines Work?when you search the web using asearch engine, you're asking theengine to scan its index of sites andmatch your keywords and phraseswith those in the texts of documentswithin the engine's database.you are NOT searching the entireweb as it exists at this moment,but a portion of the web, capturedin a fixed index created at anearlier date(s)

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010Bare Bones 101: A Basic Tutorial On Searching The Web http://www.sc.edu/beaufort/library/pages/bones/bones.shtml

What Are The Pros And Cons? Pros:

provide access to a fairly largeportion of the publicly availablepages on the Web, which itself isgrowing exponentially but "How Big Is the Internet?"

best means devised yet forsearching the web.

Cons: the sheer number of wordsindexed by search enginesincreases the likelihood that theywill return hundreds of thousandsof responses to simple searchrequests. they will return lengthy documents in

which your keyword appears onlyonce!!

many of these responses will beirrelevant to your search.

search engines are best atfinding unique keywords,phrases, quotes, andinformation buried in thefull-text of web pages.

the line between searchengines and subjectdirectories is blurring

Page 22: Lecture 12 - University of Massachusetts Amherst · 2010-10-19 · UNIVERSITY OF MASSACHUSETTS AMHERST • CMPSCI 120 Fall 2010 Lecture 12 CSS Web2.0 Search UNIVERSITY OF MASSACHUSETTS

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010Bare Bones 101: A Basic Tutorial On Searching The Web http://www.sc.edu/beaufort/library/pages/bones/bones.shtml

Are all Search Engines the same?

search engines use custom software programsto search their indexes for matching keywordsand phrases, presenting their findings to youin some kind of relevance rankingsome may be similar, but no two search enginesare exactly the same in terms of size, speed andcontentno two search engines use exactly the sameranking schemesnot every search engine offers you exactly thesame search optionsSearch engines vary substantially on the amountof the internet and the topics crawled, stored andindexed

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

Are all Search Engines the same?your search is going to be different on every engine youuse!!difference may not be a lot, but it could be significantestimates put search engine overlap at approximately60 percent and unique content at around 40 percent.

Page 23: Lecture 12 - University of Massachusetts Amherst · 2010-10-19 · UNIVERSITY OF MASSACHUSETTS AMHERST • CMPSCI 120 Fall 2010 Lecture 12 CSS Web2.0 Search UNIVERSITY OF MASSACHUSETTS

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

How Do Search Engines Rank Web Pages?

the set of rules used to rank pages vary from oneengine to anotherthe goal is to return the most relevant pages at thetop of the list

search engines:look for the location and frequency of keywords andphrases in the web page document and, sometimes, inthe HTML META tagscheck out the title field and scan the headers and textnear the top of the documentsome of them assess popularity by the number oflinks that are pointing to sites; the more links, thegreater the popularity, i.e., value of the page.

Bare Bones 101: A Basic Tutorial On Searching The Web http://www.sc.edu/beaufort/library/pages/bones/bones.shtml

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

When do you use search engines?

best at finding unique keywords, phrases,quotes, and information buried in the full-textof web pagesalso useful in retrieving tons of documents. Ifyou want a wide range of responses to specificqueries, use a search enginesearch engines vs. subject directoriessearch engines no longer limit themselves to asearch mechanism alone.they are partnering with subject directories, orcreating their own directories, and returningresults gathered from a variety of other guidesand services as well.

Bare Bones 101: A Basic Tutorial On Searching The Web http://www.sc.edu/beaufort/library/pages/bones/bones.shtml