Web Basics CS 110 Fall 2005
advertisement
Web Basics CS 110 Fall 2005 What Is the Internet? The Internet is: • A publicly available worldwide system of interconnected computer networks thousands of smaller commercial, academic, and government networks The Internet is not the World Wide Web (more later) How did the Internet start? 1957: Advanced Research Projects Association (ARPA, now DARPA) • Established in response to Soviet launch of Sputnik etc. and for coordination in face of nuclear attack 1969: ARPANET born (just 4 hosts) 1972: First email program 1983: Foundation of today’s Internet is established A Truly Public Network 1980s and early 1990s: Mainly universities, government, and some companies • They installed the high-speed network connections called backbones • Connection to the net was costly Mid and Late 1990s: • Commercial on-line services like CompuServe and AOL offered Internet services (email, the web) • Commercial companies installed more backbones (often fiber optics) • Connections for everyone became easier and cheaper Internet vs. Web Internet • Fabric of machines, cables, and wireless antenna • A basic agreement about communication protocols World Wide Web • A subset of devices on the Internet that utilizes a specific communication protocol Protocols The “syntax” and “semantics” of communication • People can communicate through sound This represents an agreement between people, a protocol • Some people speak English This represents a refinement of the “use sound” protocol English uses syntax and semantics to convey meaning What if we could only communicate with post cards? Using the Web The Web is a client/server system: • client: browser app like Inernet Explorer, Firefox, or your cell phone • server: software running on a webserver host Three things make the Web work: • URLs: To whom will I communicate • HTTP: How will I communicate (through speech, body language, writing) • HTML: What language will I speak (English, American Sign Language, cuneiform) Using the Web • Uniform Resource Locators: how to name pages and hosts • Hypertext Transfer Protocol: protocol that lets clients request pages and servers send them back • Hypertext Markup Language: language for defining pages Anatomy of a URL URL – Uniform Resource Locator • The address of your web page. • Example: http://www.cs.virginia.edu/index.html Anatomy of a URL http://www.cs.virginia.edu/index.html • http:// is the protocol used for the transaction Hypertext Transfer Protocol • www.cs.virginia.edu is the server domain name • index.html is the name of the file MUST end in .htm or .html to be recognized as a web page Domain Names The Internet identifies machines using IP addresses • www.virginia.edu has IP address 128.143.22.36 ICANN: Internet Corporation for Assigned Names and Numbers It’s easier to remember names than numbers • Domain Name System (DNS) servers store table of hostnames and IP addresses HTTP What is Packet Switching? • Data sent across network broken into small packets • Packet includes source, destination and some data • Sent from computer to computer (routers) • Packet re-sent if it doesn’t arrive • Assembled at the destination into complete transmission HTTP vs. TCP/IP Transmission Control Protocol / Internet Protocol Default File Names If no file is specified, the server will look for one of the following file names – in this order: 1. 2. 3. 4. home.html index.html home.htm index.htm Referencing Other Files Files in the same directory as your HTML file can be referenced using the filename • resume.html Files on your website, but in a different directory can be referenced using a relative path • work/resume.html Files on another website can be referenced using an absolute URL • http://www.cs.virginia.edu/resume.html HTML Hypertext Markup Language • Hypertext – Text that links to other text • Uses “tags” to “markup” the text so that browsers know how to present a Web Page to the user Example: <html> <head> <TITLE>A Simple HTML Example</TITLE> </head> <body> <H1>HTML is Easy To Learn</H1> <P>Welcome to the world of HTML. This is the first paragraph!</P> <P>And this is the second paragraph.</P> </body> </html> How HTML Files are Created 1. 2. 3. Type in HTML tags directly into a file Use a SW application that works like word-processor to create pages • WYSIWYG • Examples: MS Frontpage, Netscape Composer, Dreamweaver Convert docs from (say) Word • Problems! So you will not do this in CS110 Why Learn Tags At All? In life you’ll use an app most of the time • Easier, more powerful Why learn tags? • HTML defines what’s possible • Many apps don’t always do what you want – you need to tweak the tags • You can study others’ pages • <grin> It’s on the final! <\grin> Online Assistance Check out these tutorials for help 1. (Very brief) http://www.w3.org/MarkUp/Guide/ 2. http://webmonkey.wired.com/webmonkey/t eachingtool/html.html 3. (Longer, but good stuff on Webservers etc.) http://computer.howstuffworks.com/we b-page.htm Tags Tags are enclosed in < and > • For example: <html> is the “html tag” Tags usually come in pairs, one before the text to be formatted, one after • For example: <b>text</b> <b> is the opening tag </b> is the closing tag Closing tags have the format: </tag> Tags Attributes specify details about a tag • Generally formatted as: attribute=“value” • Used in a tag: <tag attribute=“value”> • Many attributes may be used in a single tag: <tag attribute1=“value1” attribute2=“value2”> • Closing tags don’t have attributes Basic Web Page Most web pages have two parts: • <head> … </head> • <body> … </body> The <head> contains the document <title> The <body> contains the content of the document. There should only ever be one <body> and <head> tag per document Skeleton HTML Document <html> <!-- Begin HTML Document --> <head> -> <title>…</title> </head> <!-- Begin Document Heading - <body> … </body> <!-- Begin Document Body --> <!-- Document Body --> <!-- End Document Body --> </html> <!-- End HTML Document --> <!-- Document Title --> <!-- End Document Heading --> HTML The <title> tag is what will appear in • The browser window title bar • A Bookmark or Favorites List The <title> tag DOES NOT appear in the text of the Web page No formatting can be applied to titles Body Tag Body tags are placed around the document body (i.e. the content) Attributes placed in the <body> tag affect the entire document Body Attributes text – Text Color • Color of the document text link – Non-Visited Link Color • Color of non-visited links vlink – Visited Link Color • Color of visited links bgcolor – Background Color • Background color of the document background – Background Image • Image tiled in the background of the document Body Tag Samples <body> (no attributes applied) <body text=“red”> <body background=“back.gif”> <body bgcolor=“white”> Or some combination of these, for example: • <body text=“white” background=“back.gif”> Simple Text Formatting CENTER = <center>, </center> BOLD = <b>, </b> ITALIC = <i>, </i> Headings • <h1>, </h1> • <h2>, </h2> • <h3>, </h3> <h4>, </h4> <h5>, </h5> <h6>, </h6> http://www.cs.virginia.edu/~cs110/slides/html/?c=stf Changing Size of Text Heading tags (pre-formatted percentages of “Normal” text size • <h1> is the largest size • <h6> is the smallest size <font> tag • More precise control • Can change size on the same line (Header tags require a line to themselves) Font Size <font size=“7”>This is a test.</font> The size attribute can range from 1 to 7 <font> tag attributes can be combined to change a font face or color – most efficient if doing multiple formats e.g.: <font face=“arial” color=“#336600” size=“5”> This is a test.</font> http://www.cs.virginia.edu/~cs110/slides/html/?c=fontsize Read Read Chapters 1 and 2 of textbook Bring a notecard with three questions to next class Homework 1 will be assigned on Thursday and due next week
