lecture 13 - university of massachusetts amherstthe css box model all html elements can be...

1

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

Lecture 13

CSSWeb2.0Search

Javascript


Announcements

Exam #2 rescheduledTentatively November 10th

Project#2 due November 9thPlease submit on paper!

Homework#5 due October 28thNo office hours October 26th

2


Comments -HTMLcomment tag 

CSSA CSS comment begins with "/*", andends with "*/", like this:/*This is a comment*/


CommentsDocument code --- good practice“Comment out code” for testing,evaluation

/* Comment here */p {margin: 1em;/* Comment here */padding: 2em;/* color: white; */background-color: blue;}/*multi-line

comment here*/

3


Styling Text

“Decorating” texttext-decoration:

overlineline-throughunderlineblinknone

Aligning texttext-align:

centerleftright

Setting text casetext-transform:

uppercaselowercasecapitalize

Indenting texttext-indent: 1cm

Some Examples


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

4


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


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

5


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.


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

6


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


Calculating

The total width of an element should always becalculated like this:Total element width = width + left padding +right padding + left border + right border + leftmargin + right margin

The total height of an element should alwaysbe calculated like this:Total element height = height + top padding +bottom padding + top border + bottom border +top margin + bottom margin

7


Styling

CSS Border PropertiesCSS OutlinesCSS MarginCSS Padding


CSS Displaycan hide an element can by setting the displayproperty to "none" or the visibility property to"hidden” these two methods produce different results,visibility:hidden hides an element, but it willstill take up the same 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

8


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


World according to xkcd 2007

9


World according to xkcd 2010


Web 2.0People are the key component of Web 2.0and contribute content in various waysVideo files (YouTube)Audio files (podcasts)Image files (flickr)Personal commentary (blogs, online forums)Scholarly information (wikipedia)Categorizing (del.icio.us)Search (google, bing, yahoo)

Email is losing ground as the most popularinternet application to social networks

10


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.


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.

11


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


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/

12

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 crawl through web spacefrom link to link, identifying and perusingpages.sites with no links to other pages may bemissed by spiders altogether

once the spiders get to a web site, theytypically index most of the words on thepublicly available pages at the site

web page owners may submit their URLs tosearch engines for "crawling" and eventualinclusion in their databases.


How Do Search Engines Work? when you search the web using a search

engine, you're asking the engine to scanits index of sites and match yourkeywords and phrases with those in thetexts of documents within the engine'sdatabase.you are NOT searching the entire webas it exists at this moment, but aportion of the web, captured in a fixedindex created at an earlier date(s)

13


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.


Creating a search strategyTHINK about your search before you begin.

What do I want to do?Browse?Locate a specific piece of information?Retrieve everything I can on the subject?


Browsing a subject area then

Specific information or

retrieve everythingon a subject, trythe same searchon several searchengines.

directorymeta-

crawler

general specific

14


be specificHurricane Hugo

use nounsfiesta dinnerware plates cups saucers

important terms first, use +sign. - sign unwanted+hybrid +electric +gas +vehicles -Prius

at least 3 keywordsinteraction vitamins drugs

use phrases"search engine tutorial” “bye bye miss american pie”

Avoid common words, e.g., water, but add words you'd expectto find contextanorexia bulimia eating disorder

revise it before you type it into a search engine query box+"south carolina" +"financial aid" +applications +grants

How to structure a query


use adv. search


More Quick Tipsuse lower case to find both lower and upper caseversions. Typing capital letters will usually returnonly an exact match.president retrieves both president and President

use truncation (or stemming) and wildcards (e.g.,*) to look for variations in spelling and word form.librar* returns library, libraries, librarian, etc.colo*r returns color (American spelling) and colour(British spelling)

combine phrases with keywords, using the doublequotes and the plus (+) and/or minus (-) signs.+cowboys +"wild west" -football -dallas

When searching within a document for the locationof your keyword(s), use the "find" command onthat page.


15


AdviceKnow the default (basic) settings your searchengine uses (OR or AND).In Boolean searches, always enclose ORstatements in parentheses.Yosemite (campgrounds OR reservations)Yosemite campgrounds OR reservations meanswhat??

Always use CAPS when typing Booleanoperators in your search statements … sinceyou're on safe ground if you stick to CAPS."immune system" AND homeopathic (medicine ORremedy)

immune system AND homeopathic medicine ORremedy means what??


Stop Wordsthe name given to wordswhich are filtered out prior to,or after, processing of naturallanguage data (text).no definite list of stop wordswhich all NLP tools incorporate

Stop words can causeproblems when using a searchengine to search for phrasesthat include them The Who, The The, or TakeThat

Know whether or not thesearch engine you are usingmaintains a stop word list

16


BOOLEAN searches

Different search engines handleBoolean operators differentlysome accept NOT, while oneaccepts ANDNOT as one word,others AND NOT as two words.Some require the operators to betyped in capital letters while othersdo not


BOOLEAN searchesMost, but not all, have “advanced search” features

17


BOOLEAN searchesBOOLEAN "AND”truth AND justicetruth AND justice AND ethics AND congress

BOOLEAN "OR”college OR universitycollege OR university OR institution OR campus

BOOLEAN "NOT" / "AND NOT”saturn AND NOT carpepsi AND NOT coke

NESTING -- WITH BOOLEAN OPERATORS(hybrid OR electric) AND (Toyota OR Honda)

(For best results, always enclose OR statements inparentheses.)



Implied BOOLEAN OperatorsImplied Boolean operators use the plus (+)and minus (-) symbols in place of the fullBoolean operators+dementia -alzheimers

Similarly, putting double quotation marks (" ")around two or more words will force them tobe searched as a phrase in that exact order."green tea”

While full Boolean operators are usuallyaccepted only in the advanced search option ofsearch engines, implied Boolean operators areaccepted in the basic search options of mostsearch engines.


18


Do a searchSuppose you were asked to write a term paper onsome healthcare topicStart with dmoz.com

Healthcare Industry->Economics -> Health: Public Health and Safety: Policy andRegulation ->Society: Issues: Health: Health Policy

Kaiser Family Foundation

Try dogpile with this infoTry google with this info

Health Care Costs: A Primer -- March 2009This primer on health care costs examines the rapid growth in thenation’s health care costs since 1970, when the average growth inhealth spending exceeded the growth of the economy as a whole by anaverage of 2.5 percentage points. It also examines the impact ofhealth care costs on families, with insurance premiums rising 87%between 2000 and 2006, more than four times the growth in wages.


Gateways and subject-specific databases

library gateways and portalsLibrary gateways are collections ofdatabases and informational sites,arranged by subject, that have beenassembled, reviewed and recommendedby specialists, usually librarians. Thesegateway collections support research andreference needs by identifying andpointing to recommended, academically-oriented pages on the Web.

subject-specific databases, or vortals(i.e., "vertical portals")databases devoted to a single subject,created by professors, researchers,experts, governmental agencies,business interests, and other subjectspecialists and/or individuals who have adeep interest in, and professionalknowledge of, a particular field and haveaccumulated information and data aboutit.

• Academic Information• Digital Librarian• Infomine• Internet Public Library• Librarians' Index to the Internet• PINAKES• WWW Virtual Library

• Educator's Reference Desk(educational information)

• Expedia (travel)• Internet Movie Database

(movies)• Jumbo Software (computer

software)• Kelley Blue Book (car values)• Monster Board (jobs)• Motley Fool (personal

investment)• MySimon (comparison

shopping)• Roller Coaster Database (roller

coasters)• Voice of the Shuttle

(humanities research)• WebMD (health information)lth

information)

19


UMass Library


Comments - an asideHTMLcomment tag 

CSSA CSS comment begins with "/*", and endswith "*/", like this:/*This is a comment*/

JavascriptSingle line comments start with //.<script type="text/javascript">// Write a heading

Multi line comments start with /* and endwith */.<script type="text/javascript">/*The code below will writeone heading and two paragraphs*/

20


JavaScript

used in millions of Web pagesto improve the design, validateforms, detect browsers, createcookies, and much morewas designed to addinteractivity to HTML pagesExamples: ouch welcome


JavaScript

is the most popular scriptinglanguage on the internet, andworks in all major browsers.a scripting language is a lightweightprogramming language

is not Java, or even related to Javaoriginal name was “LiveScript”name was changed when Javabecame popularreal name now is “ECMAScript”

21


JavaScript

often embedded directly intoHTML pagesbut most scripts should be lodedfrom an external file

is an interpreted languagescripts execute withoutpreliminary compilation

is reasonably platform-independent


JavaScript ≠ Java

statements in JavaScript resemblestatements in Java, because bothlanguages borrowed heavily fromthe C languagefairly easy for Java programmers tolearn JavascriptJavascript is a complete, full-featured, complex language

22


About JavaScript

JavaScript is seldom used towrite complete “programs”Instead, small bits ofJavaScript are used to addfunctionality to HTML pages

Some exampleshttp://www.tearoundapp.com/http://www.diegolatorre.com/


Using JavaScript in a browser

JavaScript code is included within<script> tags: <script type="text/javascript"> document.write("<h1>HelloWorld!</h1>");</script>

This simple code does the samething as just putting <h1>HelloWorld!</h1> in the same place inthe HTML document

23


Using JavaScript in a browser <script type="text/javascript"> document.write("<h1>Hello World!</h1>");</script>

The type attribute is to allow you to useother scripting languagesbut JavaScript is the default

The semicolon at the end of the JavaScriptstatement is optionalneed semicolons if you put 2 + statements on thesame line

probably a good idea to keep using semicolons


More examples<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>Java Script Example</title><html><body>

<script type="text/javascript">document.write("<h1>This is a header</h1>");</script>

</body></html>

24


JavaScript CommentsComments can be added to explain theJavaScript, or to make it more readable.Single line comments start with //.This example uses single line commentsto explain the code: <script type="text/javascript">// This will write a header:document.write("<h1>This is a header</h1>");// This will write two paragraphs:document.write("<p>This is a paragraph</p>");document.write("<p>This is anotherparagraph</p>");</script>


Handling old browsersUse html comment that JavaScript will interpret asJavaScript comment<html><body><script type="text/javascript"></script></body></html>

Some users turn off JavaScriptUse the <noscript>message</noscript> to display amessage in place of whatever the JavaScript wouldput there

Rest of line ignored

25


Where to put JavaScript

JavaScript functions can (should)be put in a separate .js filePut this in the <head><script src="myJavaScriptFile.js"></script>

•An external .js file lets you use thesame JavaScript on multiple HTMLpagesThe external .js file cannot itselfcontain a <script> tag


Where to put JavaScriptJavaScript can be put in the <head> orin the <body> of an HTML documentJavaScript functions should be defined inthe <head>This ensures that the function is loadedbefore it is needed

JavaScript in the <body> will beexecuted as the page loads

JavaScript can be put in an HTML formobject, such as a buttonThis JavaScript will be executed when theform object is used

lecture 13 - university of massachusetts amherstthe css box model all html elements can be...

Documents