`
`A
`<html>
`Page Title
`chead>
`<titlesHow TheInternet Morke<//ti©1->
`<meta http-equiv="Content-Typa” carter
`</head>
`Background Color
`odyRCERRSanake” Link="#§6650°"
`édiv
`id="Layeri" style="position:abse lus
`<div i ear2" style="positioniabsat
`<div
`id=" Auer
`' style="posi tionzabscli
`<div culeyenal style="position tabs!
`<div id="LayerS" style="position iabsciu
`<div id="Layer6" style="position tabsct:.
`<p><font siza="3" face="VYardana, Aria
`what's happening behind the screara
`<po<font size="3" face="Verdana, Ari
`about creating your own Hab site, bu
`<po<font size="2" face="Verdana, fri
`all magic and madness to you?<?
`<p><font size="3" face="Verdana, Aric
`have come to the right place! This |
`out of the Internet and explaining
`<p>@nbsp3 </p>
`<p><font face="Verdana, Arial, Halve
`about $< /b3</fant></p>
`<pecbeetone elbarpal Trriat,
`fiat
`Anatomy of a Web Site</o></fant><
`Spesb¥<font face="Verdana, Arial, Hai
`Architecture of the Heb</fonts</
`<po<b><font face="Verdana, Arial, Hel
`Tachnologies on the Web? /forts<
`<p>Enbsp} </p>
`<p><font face="Verdana, Arial, Helvet:
`<pe<font face="Verdana, Arial, Helwet
`site you will also find lots of ae:
`Nide Web. </font></p>
`</div>
`<div id="Layer?" style="position iabsal
`<p><font color="#999999" ><bo<far
`si
`“po<font color="#9999CC" ><a href=" i:
`<po<font color="#999990"><b><fant si
`| <br>
`<a href="pt@istart html *shhak is
`<p><font color="#999099" >ibo<fon!
`{i<br> Hyperlink
`<q href="partazetart. html "2The trter
`<p><font color="#999090"><b><fon
`ei
`[ii <br>
`<a hrefe"parte@3start.html*>Connecti
`<p><font color="#999999" ><h><fon!
`si
`U<br>
`<a href="parté4start html" sCommurri
`<p><font color="#999990" >Ab>< fr
`gi
`¥<br>
`<font color="*#6666CC"><a href="par
`<p><font calor="#999909"><be<fm si
`¥i<br>
`<font color="S6666CC"><o href="par
`<pe<font color="#9999G0G"><b><forn!
`zi
`¥} i <br>
`(font color="*#6666CC"><q href=" par
`4p><font color="#9g9990">4b><for:
`si
`¥ili<br>
`<font colors"#66860C"><a href=" par
`
`the internet</a></fonte</fonts.
` Bt
`<po<font color="#999900"><b>< for
`{(X<br>
`Sfont color="*#566BC0"><a ee
`<p>sfont color="#990999">ibo<fon
`zi
`to <br>
`;
`.
`Table of Contents<//font></aré
`<p>Snbep; </p>
`<p>Snbspj </p>
`Cédiv>
`<div id="Layers® style="position tabsal:
`<img erce"bot.gif" width="151" height=":
`édiv ide"Layer9" style="position sabso
`div id="“Layert@” style="position iabss
`fdiv id="Layarl|" style="posi tioniabse
`</body>
`<AntmL>
`
`Manytypesoffiles exist on the Internet that Web browsers can’t display.
`In particular, this pertains to many kinds of multimedia files, such as
`sound, video, and animation files. Still, there are often references to
`these typesof files on Web pages. To view or play thesefiles, you need
`whatare called helper applications and plug-ins. You must configure
`your Web browser or operating system to launch these helper applica-
`tions and plug-ins whenever you click an object that needs them in order
`to be viewed. Helper applications and plug-ins also can be used for dis-
`playingvirtual reality pages, forchatting on the Internet, andiforperform-|
`ing otherpepieroettasks.=
`:
`
`ai
`
`tsi
`
`Ei The coding in the HTML files tells your browser how todis-
`play the text, graphics, links, and multimedia files on the
`home page. The HTML file your browser loadsto display the
`home page doesn’t actually have the graphics, sound, multi-
`media files, and other resources on it. Instead, it contains
`HTML references to those graphics and files. Your browser
`uses those referencesto find the files on the server and then
`display them on the home page.
`
`ry The Webbrowseralso interprets HTMLtagsaslinks to other
`Web siles, ur Lu ulher Web resources, such as graphics, mul-
`timedia files, newsgroups,or files to download. Depending
`on the link, it performs different actions. For example,if the
`HTML code specifies the link as another home page, the
`browser retrieves the URL specified in the HTML file when
`the user clicks the underlined link on the page. If the HTML
`code specifies a file to be downloaded, the browser down-
`loads the file to your computer.
`
`_1me not
`
`
`
`The meanings of tags are easily decipherable. Every HTML tag, or
`instruction, is surrounded by a less-than and a greater-than sign—<P>.
`
`Often tags appear in pairs, the beginning tag and the ending tag. They
`
`
`
`
`are identical except for a simple slash in the end tag. So, a paragraph of
`text frequently is surrounded by tags such asthis: <P> Paragraph of
`text.</P>. Also, tags arenot case sensitive. <P> equals<p>.
` le
`
`151
`
`151
`
`
`
`
`
`What CommonBrowser
`Error Messages Mean
`
` DNS Server
`
`Server Does Not Have aDNS Entry When
`you type a URL in your browser to visit a
`site, your computer contacts a server called
`a Domain Name System (DNS) server. The
`DNS servertranslates the URL into the IP
`number that computers can understand—
`and after it does that, your browser can go
`to the site. (For more information about
`DNS servers, see Chapter 5, “How Internet
`Addresses and Domains Work.") if you get
`an error message telling you the server
`doesn’t have a DNS entry, it means that the
`server doesn’t havea listing for the URL you
`typed. This usually means either you typed
`the URL incorrectly or something is wrong
`with the DNS server. Check the URL and
`retypeit.
`
`503 Service Unavailable This is a catch-all error
`message for a variety of problems, but all of them
`mean that the Web site has been incapable of being
`contacted by your browser. The problem might be
`that the site’s server has crashed because of too
`
`|
`
`much traffic or that there’s network congestion.
`come in, and it might be you.
`
`403.9 Access Forbidden. Too Many Users Are
`Connected. Some Websites recognize thatif
`they get too much traffic al once, the entire site
`can be brought down and no one will be able to
`visit. Those sites put a limit on the number of
`people who can come tothe site at once—that
`way, the site is always available, even if every-
`one who wantsto visit can’t get in. If you get this
`“Too Many Users Are Connected” message, it
`usually means that the Web site is up and run-
`ning, but you can’t get in because the maximum
`number of people are already on the site. Keep
`trying—when one person leaves, another can
`
`152
`
`152
`
`
`
`CHAPTER 22 HOW WEB BROWSERS WORK
`
`139
`
`
`
`Web Server
`
`.
`= >
`
`.
`
`If
`
`401 Unauthorized and 403 Forbidden
`you geteither of these error messages,
`you're trying to enter a Web site that
`allows only certain people in—and it’s not
`allowing you to enter. Typically, these
`types of Web sites are password pro-
`tected and also mightallow only visitors
`who are from certain domains, such as
`zd.com., If you've entered a password,
`you might have entered it improperly, or
`you might not be in a domain that’s
`allowed to enter the Web site.
`
`Spinning hourglass This isn’t an error
`message your browser displays—instead,
`your Windowscursor turns into a spinning
`hourglass. The spinning hourglasstells
`you that your browser is trying to make a
`connection to a Website. If it keeps spin-
`ning and a connection is never made,it
`can mean that an Internet router some-
`place between where you are and where
`you're trying to visit has crashed and you
`can’t make the connection. It can also
`mean that you've lost your focal Internet
`connection for.same reason.
`
`Web Server
`
`
`
` Firewall
`
`404 Not Found When you getthis
`message, you've arrived at the correct
`Web site, but the specific page you're
`looking for can’t be found. That spe-
`cific page might have been deleted
`from the site or moved—or you might
`have typed the location incorrectly.
`
`Router
`
`%—
`
`Web Server
`
`ar,
`
`
`
`153
`
`153
`
`
`
`
`
`CHAPTER
`
`23
`
`How Markup
`Languages
`Work
`
`> How
`DHTML
`Works
`
`HOW
`DHTML
`Works
`
`154
`
`
`
`She
`
`
`4/P languagesare the road signs of a Web page. Theyare sets of directions thattell the browser
`MARK
`
`software how to display and manage a Web document, muchlike written music scores are instructions that
`tell a musician how to play a particular song. These instructions (called tags or markups) are embedded in
`the source documentthat creates the Web page.
`
`Tags reference graphic images located in separatefiles, and they instruct the browser to retrieve and
`display these images within the page. Tags can alsotell a browser to connect a user to anotherfile or URL
`whenheclicks an active hyperlink. So each Web page has everything it needs to be displayed on any
`computer with a browser that can interpret the markup language.
`
`Youroriginal text will probably have headings, multiple paragraphs, and some simple formatting. A
`Web browser will not understand all these layout instructions because the original text isn’t formutted
`with HTML,the language of the Web (discussed later in this chapter). Paragraplis, carriage returns,
`indents, and multiple spaces will be shown instead as a single space if no HTML markupis added.
`
`Markup languages should not be confused with programming languages, such as C+ or Pascal.
`Programming languages are used to write complex applications, such as word processors or spreadsheets.
`Markup languages, in contrast, are much simpler and describe the way information should be displayed—
`for example, by defining when text should be boldface. In markup languages, tags are embedded within
`documents to describe how the documents should be formatted and displayed.
`
`Hypertext Markup Language (HTML)is the markup language of the Web.It defines the formatof a
`Web documentand enables hypertext links to be embedded in the document. You can use any text editor
`or word processor to add HTMLtags to an ASCII text document, although a numberof shareware and
`commercially available HTML editors can assist Web page authors as well.
`
`The Web evolves daily, and HTMLalso expands and changes along with it. The newest changes to
`HTMLare a group of technologies that together are termed Dynamic HTML (DHTML). These technolo-
`gies allow HTMLto be more thana static language, and they enable HTMLto perform animations and
`become more interactive and flexible.
`
`The eXtended Markup Language (XML) promises to bring even moresignificant changes to the Web.
`It’s dramatically different from other markup languages because it separates the content of a page from its
`presentation. Rather than doing things such as giving instructions ontextsize, it tags different types of
`content and then has other technologies such as templates and style sheets determine how that content
`should look. For example,if a hook were to be presented on the Web, it would tag chaptertitles, chapter
`numbers, chapter text, and so on. It could then use style sheets to define how chaptertitles, chapter num-
`bers, and chapter text should look. Doing this means you can build the content of a page once and present
`it to many different devices, and in manydifferent ways, without doing much extra work.
`
`155
`
`155
`
`
`
`
`
`How HTML Works
`
`& To display Web pagesin any browser,
`fom
`i
`, You must add HTML
`lays Lo your original text. This processis called tagging.
`
`PageTitle
`
`Back Far“Sd
`
`=
`=
`Home
`Refrezh
`Stop
`y
`x
`Address
`ite file:
`i
`IF
`ile:4/itohyAHIWéweb_pageshowitworkshtml
`©& Apple Comput
`By;
`puter @® Appice Support
`(©) Apple Store @ ms Mactopia @rw @
`
`
`alll
`
`“Autar
`oF HE
`
`
`Ly
`
`exploder
`
`(@)Google @cost mst ® ing Syreicupt
`etaT
`
`por
`
`
`
`
`
`
`
`
`
`
`
`lappyabd
`
`the Internet
`ORK
`
`but
`
`website
`
`der what's happening behind tha
`Do you ever war
`dive into the web?
`screen when you
`your own Websits,
`Have you thoughtaboutwaa
`,
`just aren't sure where
`| magic and maciness yal
`15 the intemet al
`me to the rightOEretand
`wellthenreateatratheeoThntametrwort
`u hay
`ou
`vid
`}
`
`is¢ dedica
`n clea
`
`
`HuetillLj] HTML Links
`
`
`
`
`Display Image "hoecit"
`
`Display Image ink “mapa
`
`
`
`
`
`~ zone
`
`156
`
`156
`
`
`
`
`
`Bb Use HTMLto give yourtext structure. All HTML
`files begin and end with the HTML tags. Headings
`are marked as such, as are paragraphs, line
`breaks, block quotes, and special character
`emphasis. Any carriage returns or indentations
`within the source text do not affect the browser's
`display of the page. HTML tags needto be putin
`if they are to be displayed in a browser.
`
`3 The finished HTML documentwill be the
`source page for any browser on any com-
`puter. This simplicity of HTML makes
`cross-platform compatibility easy and reli-
`able. The more complex and specialized
`the HTML tagging, the longerit will take
`to download and display the document.
`
`Title
`el
`
`Graphic
`
`Graphic
`
`Text
`
`
`
`Hyperlinks
`
`he
`
`Graphic
`Hyperlink
`
`a
`fpx none #&
`ipx none
`#0a
`
`<html>
`<head>
`4titledHow Tha Internet Horks</title>
`<meta http-equiv="Content-Typa" contant="text/htmls charset=iso-8859-1">
`</head>
`<body bgcolor="*FFFFFF" Link="®6666CC" vl ink="#666666">
`topi-G6px; width:t8@px; height:320px; z—~index:1"><img src="rack.gif” width="217" height="372"></div>
`4div id="Layer1" style="pogitiontabsolute;
`left:6@!px;
`<div id="Layer2” style="position:absolute;
`left:G;
`tops; widthiz@apx; haight:352px; z-index:2"><img sre="rtside.gif” width="1Z5" height="450"></div>d
`<div ide"Layer3" style="pogitiontabsolute} left:1@6px;
`topidpx; widthi494px; height!162px; z-index!3"><img src="title.gif" width="545" height="173"></div>
`iv ide
`="
`DO:
`IN :abso
`3
`ou
`.
`3
`top:
`5
`wi
`:
`$
`:
`3
`27]
`+53
`=
`a a
`*
`qj
`=
`7m
`iF
`:
`ae id="Layard? stylerbes Clerirabeo uae laftiGipx;
`topi13apxs when eee iNeaa z~index:4; background-color? *CCCCCC; Layer-background-color: ®CCCCCC; border:
`at ‘asiieegnat EyerareleneebeeLee ierelisee topiaaton Bhanceaeeachevehteeabnn
`laseeeaonng color?
`“FFCC99; Loyer~background-color:
`8FFCC99; border:
`<p><font size="3" face="Verdana, Arial, Helvetica, sans-ser! ft" SBa
`jou ever wonder
`what's happening behind the screan wbhen wou ddive iivite tthasweby2¢fbettydpp>
`<p><font size="3" face="Verdana, Arial, Halvetica, sans-serif" >Have you thought
`about creating your own HéB gite, but Just urwni'L sure where to stara?<ffontraips
`<p><font size="3" face="Verdana, Arial, Helvetica, sans~serif">Is the Internet
`all magic and madness ta you?</font></p>
`<p><font sizes"3" face="Verdana, Arial, Halvetiea, sana-serif">Well
`then you
`hava come to the right placal This Web site is dedicated te taking the mystery
`out of the Internet and explaining in clear terms How the Internet Works! </font></p>
`<p> j</p>
`<p><font face="Verdana, Arial, Helvetica, sans-serif" sizea"3"><b>You will
`learn
`about:</b></font></p>
`<p><b><font face="Verdana, Arial, Halvatica, sans-serif" size="3"><a hrefs"pt85_ch2192 html ">The
`Anatomy of @ Web Si te</a></font></b></p>
`<p><b><font faca="Verdana, Arial, Halvetica, sana~serif"><a href="ptel_chdiat .htmi"><font size="3">Tha
`Architecture of the Heb</font></a></font></b></p>
`<p><b><font face="Vardana, Arial, Halvetica, sang~serif"><a hraf="pt@7_ch3205 -html"><font size="3">Emarging
`Technologies on the Wab</font></a></font></b></p>
`<p> } </p>
`<p><font facas"Verdana, Arial, Helvetica, sans-serif" >Get raady to SURF! </font></p>
`<p><font face="Verdana, Arial, Helvetica, gans~serif">As you cruise around this
`site you will algo find lots of hyparlinks to other sitas all across the World
`Wide Web.<//font></p>
`<idiv>
`top:198px; width:!39px; haight:631px; z-indexs7">
`leftiSt?px;
`<div id="Layer?” style="positioniabsolute;
`<p><font color="#geg9CC"><a href="intro html" ><b><font sizaz"2" face="Verdana, Arial, Helvetica, sans~ser!f">INTRODUCTION</font></b></a>< /font></p>
`<p><font colareaseskeen size="2" face="Verdana, Arial, Helvatica, sans-serif"><a hraf#"index -htmi"><font oaCgHEfatUgXtoriRSHCanEHE?
`<p><font color="#999999"><b><font size="2" face="Verdana, Arial, Halvatica, sans-serif" >PART
`Vbr>
`<a href="pt@istort html" shat is the Intarnat?</a></font></b></font></p>
`<p><font calor="#999999"><b><font size="2" face="Verdana, Arial, Helvetica, sans-serif” >PAAT
`tt<br>
`<a hraf="partOZstart.htmi">The Internet's Underlying Structure</a></font></b></font></p>
`<p><font color=“9999999"><b><font size="2" face="Verdana, Ariat, Helvetica, sans-ser! f">PART
`Sti <pr>
`<a href="part@3start -html">Connecting to the Internet</a></font></o></font></p>
`<p><font color="#999999"><b><font size="2" face="Verdana, Arial, Helvetica, sans-serif" >PART
`I¥<or>
`<a hraf="partOdstart html" >Communicating on tha Internet</a></font></b></Tont></p>
`<p><font color="#999999"><b><font size="2" face="Verdana, Arial, Helwatica, sans-serif" >PAAT
`¥<br>
`<font colors""6666CC"><a hrafe"partaistart.htmi" >How the Wortd Wide Web Horks</a></font></font></b></font></p>
`<p><font colore"#99G990"><b><Tont size="2" face="Verdana, Artal, Helvetica, sans-serif" >PART
`Vi <br>
`<font eolors"#6666CC"><a hraf="partabstart html">Common Internet Toals</a></font></font></b></font></p>
`<p><font colors"#999000"><b><font size#"2" face="Verdana, Arial, Helvetica, sans-serif" >PART
`¥I1 <br>
`<font color="*8668CC"><a href="parta7start html" >Hultimedia on the Internat</a></font></font></b></font></p>
`<p><font color="#999999"><b><font size="2" face="Verdana, Arial, Halvatica, sans-serif" PRAT
`¥EL{ <br>
`<font eolor="86B656C0"><a hraf="portabstort .btml">intranets and Shopping on
`the Intarnet</a></font></font></b></font>< /p>
`<p><font eolor="8999900"><b><font sizas"2" face="Verdana, Arial, Halvatica, sans~seri f">PART
`(X<br>
`<font color="*6666CC"><a hraf="par tadstart .tmi">safaguarding tha Internet</a></font></font></b></tont><./p>
`<p><font cotor=""999999"><b><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="index html"><font color="#G84G00">Return
`to <br>
`Tohle nf fantenbad/font></ar¢/font><sb>¢font></p>
`<poSnbsps <ép>
`<po </p>
`<fdiv>
`top:368px; widthi{20px; haighti1S2px; z-index:8"><img grc="bot.gif" width="151" height="154"></div>
`<div fde"Layeré" style="poxltiontabselutes left:251pxj
`
`<div id="Layer9" style="positiontabsolute;
`left:i2@px} top:622px; widtht??px} heightt68px; z~index:9"><a hrefs"map.-htmi"><img src="map.gif" width="83" height="983" border="6"></a></di
`<div ide"Layer1@" style="positiontabsolutes left:21Spx;
`top:623px; width:65px; height:?6px; z~index:18"><a href="searchHIW.html"><img src="seorch.gif" width="83" height="83" border='
`
`</body>
`pane id="Layert?" style="poattiontabsolute;
`laft:3i2px;
`top:622px} widthi67px; heighti1G@1pxs z-indextl1"><a href="helpme.htmi"><img sro="help.gif" width="83" height="83" border="6">:
`<fntml>
`
`B Most Web browsers enable your documentto retain its structural integrity when you display, or parse,
`it. Headings will appear in a larger font size than text within paragraphs, for example, and block quotes
`will be uniformly indented. However, the look might vary from browser to browser. Note that browsers
`determine the exact font, size, and color. Also be aware that the relative importance of the elementsis
`always keptintact.
`
`157
`
`157
`
`
`
`
`
`
`How Dynamic HTML Works
`
`
`——— a a
`
`Rocket
`Science!
`
`Dynamic HTML (DHTML)differs trom traditional HTML in that it enables Web pagesto be
`changed on-the-fly, after they’ve been downloaded. In plain HTML, after a page is down-
`loaded, it is static and can be changedonly whena user takes an action of some kind. But
`DHTML,for example, could cause an animation of a rocket to fly across your browser win-
`dow several secondsafter the page has been downloaded—without your doing anything.
`
`
`
`a
`
`VOCtuTn ay
`aleeCCH
`Cmts
`club!
`
`a DHTMLdoesits work without having
`to contact the server after the page
`downloads, so it can perform some
`interactive functions more quickly
`than other technologies that have to
`contact the server. The instructions
`for performing the commands are in
`the HTML commands thatare in the
`page itself.
`
`= R
`
`OCKET SCIENCE
`
`Welcome to the international home rocketry club!
`
`CLICK HERE TO LEARN MORE}
`
`™a VY
`
`
`
`158
`
`158
`
`
`
`CHAPTER 23 HOW MARKUP LANGUAGES WORK
`
`145
`
`6 Although DHTMLis often referred to asif it were a single technology,it is, in fact, a general term used
`for a group of technologies that can work together or by themselves to change a Web page after the
`page has been downloaded to your computer. These technologies are the Document Object Model
`(DOM), Cascading Style Sheets (CSS), and client-side scripting languages, such as JavaScript.
`
`Elements of DHTML
`
`Plain HTML
`
`Dynamic HTML
`
`Document Object Model (DOM)
`
`.
`
`>
`
`How
`
`DHTML
`
`orks
`
` -
`
`Wintke
`
`4 The DOM defines every object and element on a Web page and enables those objects to be manipulated
`or accessed. This includesfonts, graphics, tables, and visual elements, as well as elements you can’t
`necessarily see, such as the browser's version number and the current date and time. Without DOM, all
`the elements on a page arestatic. So on the simplest level, DHTML could use the DOM to change the
`font of every fetter, individually, on a Web page.
`
`Cascading Style Sheet
`
`>
`
`Plain HTML
`
`Dynamic HTML
`
`DATML
`
`Works
`
`5 Cascading Style Sheets are, in essence, templates that apply formatting and style information to the
`elements of a Web page. They're called cascading because any single page can have more than one
`style sheet associated with it. Additionally, Cascading Style Sheets enable imagesto overlap one
`another. This enables animations to be created easily on a page.
`
`Plain HTML
`
`Dynamic HTML
`
`e
`e
`e
`e
`Client-Side Scripting
`
`dow
`|
`: How
`DRTML | pene
`
`Gj Client-side scripting languages perform much of the work of DHTML. These languages access the DOM
`and manipulate its elements, and they do the sameto Cascading Style Sheets. They perform the actions
`of DHTML. Soa script, for example, could turn a word a different color when a mouse movesacrossit,
`or it could create easy-to-use collapsible navigation on every page on a Website.
`
`159
`
`159
`
`
`
`
`
`How XML Works
`
`XML solves several a major
`problems for Weh develop-
`ers. Withoutit, to deliver
`Web pagesto different
`devices such as computers,
`cell phones, and wireless
`Palm devices, a developer
`must create and maintain
`three separate Web sites,
`with special coding for each
`device—HTML for the com-
`puter, WAPfor the cell
`phone, and what's called
`Web clipping for the wireless
`Palm devices. It’s an expen-
`sive, difficult, and time-
`consuming proposition. And
`evenif a developeris build-
`ing a site only for computers,
`every time the design
`changes,all the pages must
`be recoded—again, an
`expensive and time-
`consuming proposition.
`
`<Sale Flyer>
`<Offer>Get It While It's Hott</Offer>
`<Promotional Copy>
`You can’t miss this one!
`One-time offer only ~
`gaming systems at prices
`you won't believe! </Promotional Copy>
`<Product>Sony PlayStations</Product>
`
`<ale Flyer>
`
`<Price> $159.95</Price>
`
`Sale ends <End Date> May 15
`</énd Date>
`
`HTML
`
`Web Clipping
`
`a
`WAP
`
`Handheld
`
`Cellular
`Telephone
`
`b With XML, a developer can create the Website just once.
`Then it can be automatically formatted to several types of
`devices, such as Internet-connected computers, wireless
`Palm devices, and cell phones using WAP. And even if
`the site is being built for only
`computers, when there is a
`redesign, with XML,all the
`pages need not berebuilt.
`
`4
`
`\
`1
`
`az
`
`wW
`
`ry SLT
`
`XML
`
`3|The most important concept to understand about XMLis that the languageis used only to convey informa-
`tion about content, not about the presentation of the content. So, for example, it doesn’t give instructions
`on whatsize text should be. But it uses tags to define the type of content on the page. Then it uses other
`techniques, as you'll see in the next steps, to display those pages. In that way, a single page can be dis-
`played many different ways, without having to go back and alter the original page—only the designs, which
`are separate from the content, need to be changed.
`
`160
`
`160
`
`
`
`takes the XML, and using XSLT, changesit into the
`proper format—for example, a WAP documentthat
`the cell phone can view with its WAP microbrowser
`
`
` Gg After the site knows what kind of deviceis visiting,it
`or an HTML documentfor a computer.
`
` Whoare you?
` ?
`
`G Whena device visits a site built with XML, there
`needs to be some way for site to know what type of
`device it is— a computer, for example, or a cell
`phone. Common GatewayInterface (CGI) scripts can
`detect which device is contacting the site.
`
`‘VmaHandheld.
`
`I’m a cellular phone.
`
`Here is your clipped Web page.
`
`Who'arenyaul
`
`Here is your WAP.
`
`ameRha tou
`
`You can’t miss this ane!
`One-time offer only —
`gaming systems at
`prices you won't believe!
`
`|i
`
`When XML content is posted on a Web
`site, different designs need to be applied
`to that content so that it can be viewable
`/
`Sale ends May15by devices connecting to it—for example,
`
`HTML
`
`Transformations (XSLT) can be applied to
`the XML. XSLI can take XML and apply
`different designs to it or change it to
`other forms of XML—for example,it can
`take the XML and turnit into a WAP page
`that can be viewed by a cell phone and
`take the same XML and turn it into a
`
` cell phones. eXtensible Style Language
`HTML documentwith a different design.
`
`161
`
`161
`
`
`
`
`
`CHAPTER
`
`How Hypertext
`Works
`
`
`‘Yea well Logonhn:
`
`oa Breywe
`
`{tF
`i
`
`162
`
`—S
`
`eeneem itdsears stedanaw
`Steentaateslandonepermeenst
`see matedSis pesbatiegfeaneoon
`“le oe. gahorkosnear
`
`Soaatesed
`tenonscoroppete
`BSLToomercota
`miconeson
`
`
`tower
`
`SmI Wrpeaedtatctaseeeraedepee
`seeSotaaes
`
`Searseenieconc ee:
`Sr eecseee
`pak
`Seokees
`Epes eee m=)
`"Seaioerobes
`pegsmete
`phd
`avant 1serge
`‘50-700ove‘serdarwnartshapgeeingbabi
`Socomsignabots wt enetothetplseston
`‘emreagewhen youtheintochewk?
`owerocthoughtabancoastYouronytiedct,but
`Sakaeeaahamae?
`“|
`Hateterna3etewor!mkcreaeteprt
`‘enthenrouharescomatotheiPscat Pha ereso
`
`1Gndlcater! LotabingeymoytinryOutOF Khmerancl
`explaningatcitartermeHwtha Intereetfeeds}
`
`
`
`162
`
`
`
`IN the late 1960s, a computerscientist named Ted Nelson introduced hypertext, a conceptthat lays the
`foundation for the World Wide Web and its connections between documents, or pages.
`
`Nelson wanted to create a new wayof exploring information. He wanted to provide the reader with a
`spontaneous meansof accessing more and more in-depth information about somethingthat sparked the
`reader’s interest when reading text on the page. Rather than reading a documentfrom beginningto end,
`digesting the material in a sequential order, the reader could highlight a word and receive more information
`on the meaningof that word, for example.
`
`Nelson imagined that you could read the United States Constitution, come across the term “electoral
`college,” and then open another documentthat explains how theelectoral college works. From that docu-
`ment, you might open another ducument that lists the votes of the electoral college from its founding to the
`present. From there, you might choose to open a document about William Jefferson Clinton, then another
`about the First Cat, Socks, then another about the care and feedingoffelines, and so forth. Ultimately, you
`could find a subject that wasn’t even remotely connected to the Constitution, but which you wouldfind
`interesting or entertaining.
`
`This hypertext concept was obviously on Tim Berners-Lee’s mind when he began thinking about how
`researchers could share their work across the Internet. He envisioned a system in which a documentcould
`be linked to other documents, enabling researchers to easily find more and related information simply by
`following a link from one documenton the network to another.
`
`Typically, hypertext consists of a hyperlink that appears onscreen as a highlighted word,icon, or graphic.
`By moving a mouse cursorover the item, or object, and clickingit, you easily navigate to additional infor-
`mation. On the Web,that information can be located at any other place on the Web,be it on the same host
`server or one across the globe. A linked object can be various media, such as text (linking from one charac-
`ter to a whole document, for example), a graphical button (such as direction arrows that move from page to
`page), or still images (photos, icons, or a comicstrip), for example. The documents and objects that are
`being linked to can be on the samesite as the original documentor on an entirely differentsite.
`
`Hypertext links are embedded into a Web documentusing Hypertext Markup Language (HTML). A
`text link usually appears onscreen as an underlined word or phrase and is sometimes rendered in a different
`color from other text, depending on how your Web browserinterprets the HTML codes. When youplace
`the mousecursor on this underlined text and click the mouse button, youinitiate a request by the browser
`for anew Web page or—if the text references an internal link to information in the same document—direct
`your browserto scroll to another, specific point within the same document.
`
`Images or icons can also act as hyperlinks. When you move the mouse cursor over the icon or graphic
`and click the mouse button, you launch the request to retrieve the linked information.
`
`163
`
`163
`
`
`
`
`
`wha's hapgening bah
`‘soreene when pou diveitothe web?
`Have you Ceught shout cheatingyour cwmied site, but
`jut arensareetrety start
`
`3the Intemetafmagicand maciness t you?
`
`ellthen rou have cometothe mghtplace! This webse
`is decicatedto tatngthe mystery outoftheinternat:are
`snplainingindeerbare Hine the InternetWorks!
`
`The “hyperlinking” begins when you
`first retrieve a Web page from a remote
`Web server. Target links within the page
`move you quickly from one part of the
`page to the next.
`
`
`
`thothteince
`WORKS)
`
`
`
`\
`oy
`
`iaeeewteerie
`SaSecienehc nodenroerBe
`Kerangapetsae sarkteOOmg
`
`*
`
`Lae
`pray aaa a
`P
`Niceeoset rae =
`s
`istheInternetafmagaandmacioasstoyon?
`cwhtRn
`‘oes
`See
`SSeres
`
`wwplsningindear i aod sendiog2pcx ta Whe
`
`webpoger,ond
`Eire emery otewale geen cueegerar
`= ‘Whanevat go ueorintone Fur
`
`seomecieats rarnercompet
`he cee ofthat
`Savers
`apter5
`so
`seerrtamtng
`Rpecnrgue, hesereneeaeiguantope ae
`i ‘natandto things techsuecpharign covedoeMagloyWed“a
`
`
`‘When s9seeeneentha irteeruk
`Getready to BURL
`hc
`*
`Sn tdeane, aad v2 wo
`fs youmise
`you
`:
`fictueactorexarnota, ws vim» Web chee orthe ealSpyin
`‘aofind batsoF
`‘
`Caste
`Gay vses
`“bares
`“totee Oe 2debra
`preanecaeane stsve
`Sakbodaatempsbompertiyaero
`fon Rewters Send!Ootn&
`timation
`cones
`Reuters. oe thatrafitr appa
`Intent, They encure alt
`Seenie ston steceedee greatermasta
`
`
`
`
`
`
`
`
`
`
`
`Give ot nationsoftotaneSherontthatshew you erearatecitsoeNe
`
`chapter
`‘rwDeteotFleTypeto
`
`cin
`ef="Htarget™>Part
`Scere
`rette met nara te
`See eregeerae
`
`chapter1
`Boor seeeremnnecee
`Ratmancomecg mbecomecon Futeg eytate
`etrantagn of tharichwaghlcs owe available. The itnerat
`
`ofqraghics, wire, vind, thas atrvndis Blac think.eesees
`
`a
`
`cae
`
`—_
`
`164
`
`164
`
`
`
`bi A relative link is used to initiate a request by your
`Web browser to retrieve a page located on the same
`Web server as the page from which you arelinking. Web
`developersuserelative links when they’re pointing to a page under
`their control because this enables the to more easily maintain their
`HTML codingif their server locations change.
`
`How intemet FilesTypes Work.
`
`<a href="/oursite/relative/chapter_4.html">Chapter 4</a>
`'
`
`thelteeenet
`SOLS
`re
`® Unis
`
`<a href="/oursite/relative/chapter_7.htm]">Chapter 7</a>
`
`
`
`
`EI A hyperlink that leads to a
`completely different Web
`server uses an absolute link.
`Becausetheselinks might not
`be under the control of the
`Web developer who created
`the page, there is a chancethat
`this will be a “dead link”—the
`page will have been moved
`without the Web developer
`knowing aboutit.
`
`
`
`
`
`
` SEantes.
`
`Yehso! Avrtions « hid nowel - Pokemon, AustaPowers, models,StarWars, Briney Spear
`
`
`‘thenping-Asctieae-YellowPagan-PanplaSuareh-Maps-Tasya!-Clastifiads-Personsle-Camet-Chat
`
`Emad-Coleodss-Maretager«byYahoo!-Taday'aNews-Sorte-Westher-TY-StockQuotes-mare.
`Arts & Humanities
`News & Media
`fn the Kawa
`
`
` FulCoreugs,Newspanne,TZ.Ciera,Photngranh.. “JuzenteessakaBusiness & EconomyetaadanteRecreation & Sports ~Dyctalmmasgic
`
`
`
`“WinbiedenWowesty
`
`Computers & Internet—-Reference Wasicw
`Mickatplace
`cation
`ion
`ChanteAvetons~baseball
`SowniiarRegionsUSSiatee..
`uy Kel2...
`-Cuplommarigegequotesat
`-
`_
`<a href=www.yahoo.oneiatig |src="searchyahoo.gif"></a>
`
`165
`
`165
`
`
`
`
`
`CHAPTER How URLs
`25 Work
`
`
`
`Prints
`
`1B
`
`166
`
`166
`
`
`
`THEE Web pages andthe hosts that make up the World Wide Web must have unique locations so that your
`computer can locate and retrieve the pages. The unique identifier for a host is called the Internet Protocol
`(IP) address, and the unique identifier for a page is called the uniform resource locator (URL). A URL
`functions muchlike a postal or e-mail address. Just as postal and e-mail addresseslist a name andspecific
`location, a URL, or Web address, indicates where the host computeris located, the location of the Website
`on the host, and the name of the Web page andthe file type of each document, amongother information.
`
`A typical URLlookslike this:
`http://www. zdpress.com/internetworks/index.htm1/
`
`If you were to interpret the instructions in this URLfrom left to right, it would translate to: “Go to the
`host computer called zdpress (