the web: concepts and technology - emory universityeugene/teaching/cs190_s09/lectures/jan22-h… ·...

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/


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


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


Internet (cont’d)Internet (cont’d)1960s: First 4 nodes on InternetInternet1970:: thousands of nodes


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


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 ,


1994-1997: Netscape


1995 present: MSFT Explorer1995-present: MSFT Explorer


2003 present: Firefox2003-present: Firefox


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


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.


Comments (ignored by browser)Comments (ignored by browser)The HTML comment syntax is a little odd-looking. 

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

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>


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


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.


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>


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


For next classFor next classRead Web dragons Chapters 1-3 (if have not done so already)


the web: concepts and technology - emory universityeugene/teaching/cs190_s09/lectures/jan22-h… ·...

Documents