Wt-UNNIT-1 (1).ppt
- 1. Introduction to the Internet
- 2. Internet, Packets and Routing • Internet is a network of computer networks • Data is transmitted by packet switching using the standard Internet Protocol (IP) • Packet – a unit of information carriage • Packet switching – process of moving packets from one node (computer device) to another
- 3. A Visualization of Internet
- 4. A Visualization of Internet
- 5. Internet, Packets and Routing • At the sender, data is broken into packets and sent to the nearest node (router) • At each router, it sends the packet to another router that is closer to the final destination • At the receiver, packets are reassembled to get the original data • A simple analogy: mailing system
- 6. Mailing System A B Pitt MIT Admin Admin
- 7. TCP/IP and Domain Names • Basic task of IP – moving packets as quickly as possible from one router to another • Yet, it doesn’t check whether packets are delivered successfully, thus need TCP • TCP (Transmission Control Protocol) – disassemble/reassemble packets, error checking, ACK packets
- 8. TCP/IP and Domain Names • We need some sort of address in order to identify different nodes, as if every house has a mailing address in order to receive mail from others • The one used by Internet Protocol is called IP address • Every host on the Internet has a unique IP address, made up of four numbers. E.g.. 192.56.215.131, each number is between 0 and 255
- 9. TCP/IP and Domain Names • The numbers in an IP address is hard to remember, while names are easier • Domain Name System – a mapping between the human-readable name (domain name) of a host and its IP address • A domain name consists of two or more parts, e.g. cs.pitt.edu • The rightmost label conveys the top- level domain, e.g. edu
- 10. TCP/IP and Domain Names • Each label to the left specifies a subdomain, in our example, subdomain is pitt (University of Pittsburgh), and sub-subdomain is cs (computer science). • A top-level domain contains of multiple subdomains, each subdomain can contain multiple sub-subdomain, so on. • The database contains the mapping between a domain name and an IP address is stored on a DNS server.
- 11. World Wide Web • The World Wide Web (commonly shortened to the Web) is a system of interlinked, hypertext documents accessed via the Internet. • It is created to share files/documents and overcome the barrier of different file formats • Hypertext refers to text on a computer that will lead the user to other, related information on demand.
- 12. World Wide Web • hypertext documents are created using a special kind of document formatting or “markup” language called HyperText Markup Language (HTML). • HTML is sent or received over the network using HyperText Transfer Protocol (HTTP). • A browser is a software program which interprets the HTML documents and displays it on the user’s screen.
- 13. URLs and Client-Server Model • Each document/resource on the WWW needs to have an identifier in order to be accessed by others. • A Uniform Resource Identifier (URI), is a compact string of characters used to identify or name a resource. • A Uniform Resource Locator (URL) is a URI which provides means of obtaining the resource by describing its network “location”.
- 14. URLs and Client-Server Model • Two things are given by the URL – Exact location of the document – The method or protocol by which to retrieve and display the document • Example, http://www.cs.pitt.edu/~mehmud/cs134/inde x.html • http:// – specifies the protocol • www.cs.pitt.edu – specifies the host name / domain name • /~mehmud/cs134/index.html – specifies the path of the document on the host
- 15. Putting it All Together
- 16. HTML Source Document • When you connect to a web page by entering its URL into the browser – Browser instructs your computer to send a message out over the Internet to the computer specified by that URL requests that it sends back a certain document (HTML source doc) – HTML source doc describes the content and layout of the web page – After your computer receives the html, your browser interprets the html and displays the resulting web page
- 17. HTML Source Document • HTML source document – A text-only document – Consists of (1) actual text, and (2) tags • A tag is an html code that is enclosed in angel brackets <>; used to lay out the web page. • XHTML is a simple, more standardized version of HTML • XHTML/HTML can be created using a simple text editor like notepad • File extension must be .html or .htm
- 18. Sample HTML HTML Source Firefox display of the html source
- 19. HTML, XML, XHTML • XML (eXtensible Markup Language): – is a set of rules that lets web designers classify their data in a way customized to their needs. – Extendable by creating new types of tags. • XHTML (eXtensible HyperText Markup Language): – A new version of HTML based on XML – Inherits strict syntax rules of XML
- 20. HTML vs. XHTML • Some comparisons of HTML vs. XHTML HTML XHTML Tags aren’t extensible Tags are extensible Tags are not case- Only lowercase tags are allowed Possible to leave off and ending tag like </body> Tags should appear in pairs Overlapping tags No overlapping tags • For this course, we use XHTML
- 21. Composition of a XHTML Document • An XHTML document consists of three main parts: – the DOCTYPE – the Head – the Body
- 22. Composition of a XHTML Document <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> ... <title>…</title> </head> <body> … </body> </html>
- 23. Creating XHTML The code inside red rectangle (<!DOCTYPE … dtd”>) is a Document Type Definition (DTD), it specifies what type of document this is – in this case an XHTML document. The code inside green rectangle, xmlns specifies the namespace, it tells the browser that all tags contained within the <html> tag belong to the XHTML namespace as defined by the W3C and located at the given URL.
- 24. XHTML Tags/Elements • Tags are also called elements • An attribute is a special code that can enhance or modify a tag. They are generally located in the starting tag after the tag name. • Basic syntax for xhtml tags and attributes – <tag attribute="value"> </tag> – All tags must be lower case – all values of attributes need to surrounded by quotes
- 25. XHTML Tags/Elements • Example – <strong>This is bold text…</strong> – <p style =“text-align:center">This text will appear aligned to the center…</p>
- 26. <meta> tag • <meta> tag – is used to specify keywords that describe a document’s contents as well as a short description. • Two necessary attributes – "name" & "content" <meta name="keywords" content="baseball, soccer, tennis"/> <meta name="description" content="Sports information page"/>
- 27. <p> paragraph tag • <p> tag – The paragraph tag. Used so separate text within a web page. – Container type – Will provide line breaks • Optional attribute : align (not allowed in XHTML 1.0 Strict though) <p align="center">
- 28. <br/> tag • <br/> tag – Is used for line break • Example <p> Contact<br /> 6150 Sennott Square<br /> University of Pittsburgh<br /> Pittsburgh, PA 15260 </p>
- 29. Headings • <h1> to <h6> – Define headers. <h1> defines the largest header. <h6> defines the smallest header. • Example <h1>This is header 1</h1> <h2>This is header 2</h2> <h3>This is header 3</h3> <h4>This is header 4</h4> <h5>This is header 5</h5> <h6>This is header 6</h6>
- 30. <em> & <strong> tags • <em> tag – Renders text as emphasized text • <strong> tag – Renders text as strong emphasized text • Example <em>Emphasized text</em><br /> <strong>Strong text</strong><br />
- 31. Commenting Source Code • Comments are inclosed in <!-- and --> • Example <!--This comment will not be displayed--> <p>This is a regular paragraph</p>
- 32. <blockquote> tag • <blockquote> tag – tag defines the start of a long quotation. • To validate the page as strict XHTML, you must add a block-level element around the text within the <blockquote> tag, like this: <blockquote> <p>here is a long quotation here is a long quotation</p> </blockquote>
- 33. Block-Level vs. Inline Elements • This works – <h2><em>Bold and italic</em></h2> • How about this – <em><h2>Bold and italic</h2></em> • Block-level element/tag – define a complete section or block of text – Can contain inline element and block-level element • Inline elements – Define the structure of a sequence of characters within a line – may not contain a block-level element
- 34. Block-Level vs. Inline Elements • Partial list of block-level tags – p, blockquote, h1 … h6, div, ul, ol, li, table, tr, td, th • Partial list of inline tags – a (anchor tag), em, strong, img, q (short quotation)
- 35. Attribute • An attribute is a special code that can enhance or modify a tag. They are generally located in the starting tag after the tag name. • Basic syntax for xhtml tags and attributes – <tag attribute="value"> </tag> – All tags must be lower case – all values of attributes need to be surrounded by quotes
- 36. Common Attributes • id – unique identifier for elements • class – the class of the element, used to specify similar attributes for dissimilar elements by putting them in the same class • style – an inline style definition • title – a text to display in a tool tip
- 37. Common Attributes • Examples 1 – <p id=“firstParag” class=“indent” title=“This paragraph introduces html attributes”> – Assuming style sheet contains – .indent { margin-right: 5%; margin-left: 5%;} • Example 2 – <p id=“firstParag” style=“margin- right: 5%; margin-left: 5%;” title=“This paragraph introduces html attributes”>
- 38. Common Attributes • lang – sets the language code; “en”: English, “fr”: French, “es”: Spanish, “de”: German etc. • dir – sets the text direction, left to right or right to left • <p lang=“fr” dir=“ltr”>bonjour!</p> • accesskey – assigns an access key to an element. An access key is a single character from the document character set. • tabindex – Sets the tab order of an element
- 39. Deprecated Attributes • In order to separate structure from presentation – many HTML attributes/tags used for presentation were deprecated, starting from HTML version 4 • Some deprecated attributes – font, <font size=“5” color=“red”>Text</font> – align, <p align=“center”>Centered text</p> – bgcolor, width, height, etc.
- 40. Lists • Ordered lists & Unordered lists – <ol> for ordered – <ul> for unordered – <li> for each item inside the list • Browser inserts a blank line before & after the list (block-level element) • Example – <ol> <li>Item 1</li> <li>Item 2</li> <li>Item3</li> </ol>
- 41. Lists • Nested lists <ul> <li>Top Level, Item 1</li> <li>Top Level, Item 2 <ul> <li>Sublevel 1, Item 1 <ul> <li>Sublevel 2, Item 1</li> <li>Sublevel 2, Item 2</li> </ul> </li> <li>Sublevel 1, Item 2</li> </ul> </li> <li>Top Level, Item 3</li> </ul>
- 42. Customizing List Display • List numbers or marks can be customized • “type” attribute • Example – <ul type=“square”> – <ol type=“A”> – <ol type=“a”> – <ol type=“I”> – <ol type=“i”> • “type” attribute is not allowed in XHTML 1.0 Strict, so use style sheets
- 43. Definition Lists • <dl> for list element; <dt> for “definition terms”; <dd> for “definition data” • Example – <dl> <dt><strong>CPU</strong></dt> <dd>Central Processing Unit</dd> <dt><strong>ALU</strong></dt> <dd>Arithmetic Logic Unit</dd> <dt><strong>GHz</strong></dt> <dd>Gigahertz</dd> </dl>
- 44. Tables <table> • Tables used not only for displaying data in tabular format • A table (<table>) in HTML – Consists of rows (<tr>) – Each row consists of rectangular boxes called cells (<td>) – <table> <tr><td>R1,Cell1</td><td>R1,Cell2</td></tr> <tr><td>R2,Cell1</td><td>R2,Cell2</td></tr> </table>
- 45. Tables • By default – Text in each cell is automatically aligned to the left – All the cells in a column have the same width – Width of the column is determined by the cell with the most text in it • <th> for “table header” <tr> <th>Header1</th> <th>Header2</th> </tr>
- 46. Tables • Other attributes of <table> – align, cellpadding, cellspacing, colspan – Yet XHTML 1.0 Strict don’t allow this attributes, so use stylesheet instead • Other tags – <caption> – <colgroup> – <thead>, <tfoot>, <tbody>
- 47. Links • The true power of WWW comes with hyperlinks • Surfer click on a specially marked word or image on a web page and automatically be jumped to another web page or another place in the same web page. – Another web page – External link – Another place – Internal link • Use <a> (anchor) tag to create a link
- 48. Links • External Links – <a href=“SomeURL”>Text/image</a> • Create a link to CS web page – <a href=“http://www.cs.pitt.edu/”>CS Department at Pitt</a> – Be careful about the quotation mark • Internal Links Create a place/anchor – <a id=“SomeLabel”></a> or <a id=“SomeLabel” name=“SomeLabel”/></a> Link to the anchor <a href=“#SomeLabel”>Go to some place</a>
- 49. Links • Combining External and Internal Links – <a href=“SomeURL#SomeLabel>Link Text</a>
- 50. Images <img> • Insert an image using <img> tag – <img src=“URL of the image file” /> • Image can an image on a remote machine on the Internet, or an image in your local machine. • Examples, – <img src="http://www.cs.pitt.edu/~mehmud/gallery /nature/images/Desert_and_Blue_Sky.jpg"/> – <img src="../images/Lake_Karakul.jpg" />
- 51. Images • Alternative Text for images – <img src=“Image URL” alt=“Alternative Text” /> • Example – <img src="../images/Lake_Karakul.jpg" alt="Lake Karakul"/> • width & height attributes – <img src="../images/Lake_Karakul.jpg" alt="Lake Karakul" width="257" height="161" /> • Use style sheet instead of attributes, even though XHTML 1.0 Strict supports these two attributes