Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
The Web: Concepts and Technology
January 20: Logistics Intro to HTMLJanuary 20: Logistics, Intro to HTML
Fall 2006CS 584: Information Retrieval. Math & Computer Science Department, Emory University1
Today’s PlanToday’s PlanLogisticsgOrigins of the WebHTML and other markup languagesp g gThe web browser
2Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
Logistics re capLogistics re-capLab time: usually on Tuesdays, regular class time (watch schedule/e-mail for announcements/changes), in E308Ag )
Next lab session: 1/27 (next Tuesday).
Make sure all account issues are resolved this week! Account/web problems: contact [email protected]
Your personal web space for the class: http://cs190.mathcs.emory.edu/~your_login/
E.g.: http://cs190.mathcs.emory.edu/~cs190000/
The corresponding files on MathCS system (that you create) are here:/home/your_login/cs190/web/
3Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
The Vision: MemexVanevar Bush: “As we may think”:“Memex”, 1945 proto-hypertext system /desktop search
Fall 2008Eugene Agichtein, Emory University, CS572: Information Retrieval and Web Search
The Implementation: Hypertextp yp
Ted Nelson: HypertextA text on a computer that will lead the user to
other, related information on demand.
Precursor of The Web
5Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
Infrastructure: The Internet
"In the Beginning, ARPA created the ARPANET. And the ARPANET was without form and voidARPANET was without form and void. And darkness was upon the deep. And the spirit of ARPA moved upon the face of the network and p pARPA said, 'Let there be a protocol,' and there was a protocol. And ARPA saw that it was good. And ARPA said, 'Let there be more protocols,' and it was so.AndAnd ARPA said, Let there be more protocols, and it was so. And ARPA saw that it was good. And ARPA said, 'Let there be more networks,' and it was so."
C h-- Danny Cohen , Internet co-inventor
6Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
Internet (cont’d)Internet (cont’d)1960s: First 4 nodes on InternetInternet1970:: thousands of nodes
7Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
The Web: Tim Berners-Lee
1980: TBL builds hypertext prototype ENQUIRE1990 91: Puts hypertext document on Internet and created first1990-91: Puts hypertext document on Internet, and created first web browser in 1991
8Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
Fi t BFirst Browser
Berners-Lee developed and defined the HTML language, which was d d d fi d i SGML d i h d l l fcreated and defined using SGML, during the development cycle for
the first Web browser/editor from October to December 1990.First PARSER for HTML theWorldWideWeb application:
9
First PARSER for HTML, the WorldWideWeb application:
Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
First Real Browser:Browser: Mosaic
Developed by Mark Andresen (NCSA), funded by Al Gore’s High Performance Computing and Communication Act, 1991
10
p g ,
Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
1994-1997: Netscape
11Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
1995 present: MSFT Explorer1995-present: MSFT Explorer
12Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
2003 present: Firefox2003-present: Firefox
13Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
HTML (Review)h f ll h kThe following are HTML tags that you know.:
Structural tags like HTML HEAD TITLE BODY
Header tags are H1–H6 T t t likText tags like
P BR STRONG EM
List tags: UL OL LI
There are two more tags that you have seen, but still need to learn more about. The all-important anchor (hyperlink) tag: A Odd tags like LINK
14
Odd tags like LINK
Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
NestingNestingIn Computer Science, syntactic phrases always nest: one fits inside the other like measuring cups or Russian dolls. <FRED> Region A
<BARNEY> R i B </BARNEY><BARNEY> Region B </BARNEY> Region C
</FRED></FRED> The FRED tag applies to all three regions, region A, region B and region C, while BARNEY applies only to region B region g pp y g git surrounds. The regions A and C only have the FRED tag apply to them.
15Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
Comments (ignored by browser)Comments (ignored by browser)The HTML comment syntax is a little odd-looking. <!-- I can say anything I want in a comment. -->
The syntax starts with a left angle bracket < then an l ti i t d t h h th th texclamation point and two hyphens, then the comment
(anything you want) and ends with two hyphens and a right angle bracket > g
16Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
Tag syntaxTag syntaxLast time, we learned that tags always begin with a left angle bracket < and close with a right angle bracket >and close with a right angle bracket >You can add additional information within the tag to further specify what it does. These are called attributes. Th b t l f thi th t ' i th h t A TThe best example of this that we've seen is the anchor tag, A or a. To use it as a hyperlink, you have to specify where the link takes us. For example, to have a link that says “Yahoo!” and takes us to
hwww.yahoo.com, we say: <a href="http://www.yahoo.com">Yahoo!</a> The href part is the attribute. For this tag, since the attribute is almost l d l h k f A HREFalways required, we can almost think of it as an A HREF tag.<TAG attr1 = "value1" attr2 = "value2" ... attrN = "valueN"> region </TAG>
17Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
Using ImagesUsing ImagesOne thing that we all want to do with our web pages is add pictures. B h i fil i fil h li k i j lik hBecause the picture file is a separate file, we have to link to it, just like the HREF attribute of the anchor (A) tag. Once you have an image file, say y g , y" http://www.emory.edu/home/img/university-logo.gif " you can use it on your web page thus: <img src = http://www.emory.edu/home/img/university-logo.gif " alt = "a small weasel">File can be local or remote (as in example above)File can be local or remote (as in example above)Other attributes: <img src="..." alt="..." height="height-goes-here" width="width-goes-here">
18
g g g g g
Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
URLsURLshttp://www.mathcs.emory.edu/index.html
PROTOCOL://SERVER.DOMAIN/PATH/FILE
h h h l h h l lhttp:// This is the protocol, which is almost always HTTP, the Hyper Text Transport Protocol. You'll also occasionally see FTP, the FileTransfer Protocol; HTTPS, the securesee FTP, the File Transfer Protocol; HTTPS, the secure version of HTTP; and others.
19Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
Relative URLsRelative URLsIf a file is in the same directory as you, just give its name. If we want to put a link in the file buffy.html linking it to willow.html, we can say <a href="willow html">her best friendWillow</a><a href willow.html >her best friend Willow</a>
<a href="../season3.html">the Host returned in season 3</a>
20Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
Additional resources
HTML Markup Guidehttp://www.w3.org/MarkUp/Guide/
d f l lTo edit an HTML file (easily): Open file using seamonkeyType “seamonkey & “ at terminal promptType seamonkey & at terminal promptThen select “Open file” from File menu. After page is opened, select “Edit page” from File menuNote that by default page is opened in graphical editor mode; select “<HTML> Source” tab on bottom to edit the actual HTML source, as you will need to do for most projects.
21
, y p j
Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
For next classFor next classRead Web dragons Chapters 1-3 (if have not done so already)
22Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University