Lawrence Snyder University of Washington, Seattle © Lawrence Snyder 2004.

Slides:



Advertisements
Similar presentations
Introduction to Web Design Lecture number:. Todays Aim: Introduction to Web-designing and how its done. Modelling websites in HTML.
Advertisements

HTML Basics Customizing your site using the basics of HTML.
HTML popo.
Hyper Text Markup Language.  HTML is a language for describing web pages.  HTML stands for Hyper Text Markup Language  HTML is not a programming language,
WeB application development
Project 1A—Bogus Web site Misinformation abounds on the Web 5/3/ Copyright 2009, D.A. Clements, MLIS, UW Information School.
Chapter 4 Marking Up With Html: A Hypertext Markup Language Primer.
Hypertext Markup Language. Platform: - Independent  This means it can be interpreted on any computer regardless of the hardware or operating system.
HTML for Beginners An IEEE/ACM Presentation given by Hamilton Turner.
Chapter 5 Searching for Truth: Locating Information on the WWW.
Marking Up With Html: A Hypertext Markup Language Primer
Search Engine Optimization March 23, 2011 Google Search Engine Optimization Starter Guide.
Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
Computer Science 101 HTML. World Wide Web Invented by Tim Berners-Lee at CERN, the European Laboratory for Particle Physics in Geneva, Switzerland (roughly.
Basics of HTML.
Slide 1 Today you will: think about criteria for judging a website understand that an effective website will match the needs and interests of users use.
Creating a Simple Page: HTML Overview
Chapter 4 Fluency with Information Technology L. Snyder Marking Up With HTML: A Hypertext Markup Language Primer.
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Fluency with Information Technology Third Edition by Lawrence Snyder Chapter.
Chapter 5 Searching for Truth: Locating Information on the WWW.
HTML HTML stands for "Hyper Text Mark-up Language“. Technically, HTML is not a programming language, but rather a markup language. Used to create web pages.
4 HTML Basics Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and.
.  Entertain  Inform  Educate  Blogs  Sell  Date  Gamble  Religion.
Placing Relative Links A link in file page.html refers to a referenced file ref.html by relative link: link page.htmlref.html "ref.html" "folder/ref.html"
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
Chapter 4: Hypertext Markup Language Primer TECH Prof. Jeff Cheng.
Understanding HTML Code
Learning Web Design: Chapter 4. HTML  Hypertext Markup Language (HTML)  Uses tags to tell the browser the start and end of a certain kind of formatting.
Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and attributes Create.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
Web Programming Basics of HTML. HTML stands for Hyper Text Mark-up Language A mark-up language is different than those that you have learned before in.
Web Searching Basics Dr. Dania Bilal IS 530 Fall 2009.
Just Enough HTML How to Create Basic HTML Documents.
Unit 2, cont. September 12 More HTML. Attributes Some tags are modifiable with attributes This changes the way a tag behaves Modifying a tag requires.
1 Creating Web Pages Part 1. 2 OVERVIEW: HTML-What is it? HyperText Markup Language, the authoring language used to create documents on the World Wide.
INTRODUCTORY Tutorial 1 Using HTML Tags to Create Web Pages.
HTML: Hyptertext Markup Language Doman’s Sections.
CPSC 203 Introduction to Computers Lab 33 By Jie Gao.
HTML Basic. What is HTML HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it.
4 HTML Basics Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and.
2.1 XHTML. Motto High thoughts must have high language. –Aristophanes.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
HyperText Markup Language. Web Hosting Creating a web site (on a site like iPage) –Buy domain name ( –iPage has registrar (e.g., FastDomain.
The World Wide Web. What is the worldwide web? The content of the worldwide web is held on individual pages which are gathered together to form websites.
Introduction to HTML UWWD. Agenda What do you need? What do you need? What are HTML, CSS, and tags? What are HTML, CSS, and tags? html, head, and body.
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley What did we learn so far? 1.Computer hardware and software 2.Computer experience.
HTML HYPER TEXT MARKUP LANGUAGE. INTRODUCTION Normal text” surrounded by bracketed tags that tell browsers how to display web pages Pages end with “.htm”
1 HTML: HyperText Markup Language Representation and Management of Data on the Internet.
CompSci 1 Lecture 2 HTML Webpages. Today’s Topics Basic HTML The basis for web pages “Almost” programming Upcoming Programming Java Reading Great Ideas.
Web Design – Week 2 Introduction to website basics Website basics: How the Web Works Client / server architecture Packet switching URL components.
Tutorial #1 Using HTML to Create Web Pages. HTML, XHTML, and CSS HTML – HyperText Markup Language The tags the browser uses to define the content of the.
Web Design Terminology Unit 2 STEM. 1. Accessibility – a web page or site that address the users limitations or disabilities 2. Active server page (ASP)
Introduction to HTML Dave Edsall IAGenWeb County Coordinator’s Conference June 30, 2007.
1 Chapter 5 (3 rd ed) Your library is an excellent resource tool. Your library is an excellent resource tool.
Basic Web Design UVI CELL Dave Gilliss Dave Gilliss
HTML Structure & syntax
HTML Basics.
Section 4.1 Section 4.2 Format HTML tags Identify HTML guidelines
Uppingham Community College
Locating the right information on the WWW requires effort
Placing Relative Links
A guide to HTML.
Searching for Information
Searching for Truth: Locating Information on the WWW
Searching for Truth: Locating Information on the WWW
Announcements Final Course Survey Thursday: Quiz-11 Today:
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
Searching for Truth: Locating Information on the WWW
5.00 Apply procedures to organize content by using Dreamweaver. (22%)
Presentation transcript:

Lawrence Snyder University of Washington, Seattle © Lawrence Snyder 2004

Google is not necessarily the first place to look! ▪ Go directly to a Web site -- ▪ Go to your bookmarks -- dictionary.cambridge.orgdictionary.cambridge.org ▪ Go to the library -- ▪ Go to the place with the information you want Ask, “What site provides this information?” Guessing a site’s URL is often very easy, making it a fast way to find information 12/26/20152Copyright 2010, Larry Snyder, Computer Science and Engineering

12/26/20153Copyright 2010, Larry Snyder, Computer Science and Engineering

Search for  Mona Lisa 12/26/20154Copyright 2010, Larry Snyder, Computer Science and Engineering Search Engine words are independent  Words don’t have to occur together  Use Boolean queries and quotes  Logical Operators: AND, OR, NOT monet AND water AND lilies “van gogh” OR gauguin vermeer AND girl AND NOT pearl

Searching strategies …  Limit by top level domains or format ….edu  Find terms most specific to topic … ibuprofen  Look elsewhere for candidate words, e.g. bio  Use exact phrase only if universal, … “Play it again”  If too many hits, re-query … let the computer work  “Search within results” using “-” … to get rid of junk 12/26/20155Copyright 2010, Larry Snyder, Computer Science and Engineering

12/26/20156Copyright 2010, Larry Snyder, Computer Science and Engineering

 Once found, ask if site is reliable source  How authoritative is it? Can you believe it?  How crucial is it that the information be true? ▪ Cancer cure for Grandma ▪ Hikes around Seattle ▪ Party game 12/26/20157Copyright 2010, Larry Snyder, Computer Science and Engineering

12/26/2015© 2011 Larry Snyder, CSE8

12/26/2015© 2011 Larry Snyder, CSE9

 As you know, the Web uses protocol  It’s asking for a Web page, which usually means a page expressed in hyper-text markup language, or HTML  Hyper-text refers to text containing links that allow you to leave the linear stream of text, see something else, and return to the place you left  Markup language is a notation to describe how a published document is supposed to look: fonts, text color, headings, images, etc. etc. etc. 12/26/2015© 2011 Larry Snyder, CSE10

 Rule 0: Content is given directly; anything that is not content is given inside tags, like  Rule 1: Tags made of and used this way: Attribute&Value This is paragraph. Start Content End Tag Tag It produces: This is paragraph.  Rule 2: Tags must be paired or “self terminated” 12/26/2015© 2011 Larry Snyder, CSE11

 Write HTML in text editor: notepad++ or TextWrangler  The file extension is.html ; show it in Firefox or your browser 12/26/2015© 2011 Larry Snyder, CSE12

 Rule 3: An HTML file has this structure: Name of Page Actual HTML page description goes here  Rule 4: Tags must be properly nested  Rule 5: White space is mostly ignored  Rule 6: Attributes ( style="color:red" ) preceded by space, name not quoted, value quoted 12/26/2015© 2011 Larry Snyder, CSE13

 To put in an image (.gif,.jpg,.png), use 1 tag Tag Image Source Alt Description End  To put in a link, use 2 tags Pilot Hyper-text reference – the link Anchor  Styling is specified with Cascading Style Sheets  More on HTML & CSS (incl. good tutorials) at 12/26/2015© 2011 Larry Snyder, CSE14

12/26/2015© 2011 Larry Snyder, CSE15

12/26/2015© 2011 Larry Snyder, CSE16

12/26/2015© 2011 Larry Snyder, CSE17

No one controls what’s published on the it is totally decentralized To find out, search engines crawl Web  Two parts ▪ Crawler visits Web pages building an index of the content (stored in a database) ▪ Query processor checks user requests against the index, reports on known pages [You use this!]  We’ll see how these work momentarily 12/26/201518Copyright 2010, Larry Snyder, Computer Science and Engineering Only a fraction of the Web’s content is crawled

 How to crawl the Web:  Begin with some Web sites, entered “manually”  Select page not yet crawled; look at its HTML ▪ For each keyword, associate it with this page’s URL ▪ Harvest words from URL and inside tags … ▪ For every link tag on the page, associate the URL with the words inside of the anchor text, that is,  Save all links and add to list to be crawled 12/26/2015© 2011 Larry Snyder, CSE19

12/26/2015© 2011 Larry Snyder, CSE20

 Build an index  Terms on a page are not all equally useful:  Anchors from other pages  Terms in URL, esp. path items  Title  H1  H2  Meta description  Alt helps with images 12/26/2015© 2011 Larry Snyder, CSE21

 When crawling’s “done” (it’s never done), the result is an index, a special data structure a query processor uses to look up queries: 12/26/2015© 2011 Larry Snyder, CSE22

 Google has never revealed all details of the ranking algorithm, but we know …  URL’s are ranked higher for words that occur in the URL and in anchors  URL’s get ranked higher if more pages point to them, it’s like: A links to B is a vote by A for B  URL’s get ranked higher if the pages that point to them are ranked higher 12/26/2015© 2011 Larry Snyder, CSE23

 Virtual Folders are a “crawling/querying” technology that helps you  Mac: Smart Folders  PC: Saved Folders  In both cases your files are “indexed”, that is, crawled, and the query you make results in a smart folder of the files that “hit”  It’s like Googling the stuff on your own computer 12/26/2015© 2011 Larry Snyder, CSE24

 The folder doesn’t exist … it just contains links to the files shown  Very convenient! 12/26/2015© 2011 Larry Snyder, CSE25

 A search engine has two parts  Crawler, to index the data  Query Processor, to answer queries based on index  In the case of many hits, a query processor must rank the results; page rank does that by  “using data differentially ” … not all associations are equivalent; anchors and file names count more  “noting relationship of pages” … a page is more important if important pages link to it 12/26/2015© 2011 Larry Snyder, CSE26 Google, Bing, Yahoo and other Search Engines Use All of These Ideas