Quick OverviewQuick Overview

Models of computer communicationModels of computer communication NetworksNetworks Networking terminologyNetworking terminology Internet history in a nutshellInternet history in a nutshell World Wide Web design basicsWorld Wide Web design basics HTML, browsers, protocols make it workHTML, browsers, protocols make it work Coding in HTML for the InternetCoding in HTML for the Internet Extensions to HTML and future trendsExtensions to HTML and future trends

General Hardware Diagram for NetworksGeneral Hardware Diagram for Networks

Data transfer requires specific Data transfer requires specific mediummedium: copper wire, fiber : copper wire, fiber optic cable, radio signals (wireless)optic cable, radio signals (wireless)

Each computer must have an appropriate Each computer must have an appropriate network interface network interface devicedevice or card (NIC): serial, Ethernet, wireless, etc or card (NIC): serial, Ethernet, wireless, etc

General Software Diagram for NetworkingGeneral Software Diagram for Networking

Data exchange requires protocols (agreed upon rules of communication) Data exchange requires protocols (agreed upon rules of communication) between programs that control hardware.between programs that control hardware.

Protocols involve signaling, response, data content, timing, etc.Protocols involve signaling, response, data content, timing, etc.

Layers are used to handle the complexity/changes inherent in hardware. Layers are used to handle the complexity/changes inherent in hardware. Recall using subroutines to handle hardware access in BOE-BOT. Recall using subroutines to handle hardware access in BOE-BOT.

Network Topologies (Shapes)Network Topologies (Shapes)

Various connection styles were explored: Various connection styles were explored: backbone, Token ring, star topology, etcbackbone, Token ring, star topology, etc

This creates a Local Area Network (LAN)This creates a Local Area Network (LAN)

ARPANET in early 1970’sARPANET in early 1970’s

ARPANET in mid-1980’sARPANET in mid-1980’s

The Internet RecentlyThe Internet Recently

Networking ProtocolsNetworking Protocols LANs and Wide Area Networks (WANs) require LANs and Wide Area Networks (WANs) require

some addressing method to route messages to some addressing method to route messages to specific computersspecific computers

Transmission Control Protocol/Internetworking Transmission Control Protocol/Internetworking Protocol (TCP/IP) has been the most successfulProtocol (TCP/IP) has been the most successful

Addresses are given in a dot notation: Addresses are given in a dot notation: 172.21.7.11 is a typical IP address172.21.7.11 is a typical IP address

Some arithmetic: Addresses range from 0.0.0.0 Some arithmetic: Addresses range from 0.0.0.0 to 255.255.255.255 giving us 32 bits of addressto 255.255.255.255 giving us 32 bits of address

This means about 2This means about 23232 or about 4 billion addresses or about 4 billion addresses are possible. These are filled! IPv6 now in effect.are possible. These are filled! IPv6 now in effect.

Routers use Routers use lookup tableslookup tables to send to send packetspackets of of data across network boundaries for delivery.data across network boundaries for delivery.

The Internet: LAN Point of ViewThe Internet: LAN Point of View

Names Instead of NumbersNames Instead of Numbers It is hard to remember and type IP addresses It is hard to remember and type IP addresses

like 172.21.7.11 instead of natural names.like 172.21.7.11 instead of natural names. Enter Enter Domain Name ServiceDomain Name Service or DNS. This or DNS. This

allows computer addresses to be arranged in allows computer addresses to be arranged in clusters, or clusters, or domainsdomains, and addressed using , and addressed using names instead of IP numbers.names instead of IP numbers.

Example: Example: math.hws.edumath.hws.edu indicates some indicates some computer found in the domain hws.edu. This computer found in the domain hws.edu. This domain namedomain name is attached to is attached to routing tablesrouting tables so so routers know to send packets of data to our routers know to send packets of data to our campus firewall which forwards it to the server in campus firewall which forwards it to the server in our campus LAN named math.our campus LAN named math.

Looks promising but there are still problems!Looks promising but there are still problems!

Documents Have StructureDocuments Have Structure

By the 1980s, many vendors offered competing By the 1980s, many vendors offered competing document formats, file systems, operating systems, etc.document formats, file systems, operating systems, etc.

You needed to have technical skills and persistence in You needed to have technical skills and persistence in locating, downloading or uploading a file, and locating, downloading or uploading a file, and determining which application could view or print it!determining which application could view or print it!

Also, hypertext authors were experimenting with links to Also, hypertext authors were experimenting with links to allow readers to move between documents using allow readers to move between documents using graphical links. Example: Apple Computer’s graphical links. Example: Apple Computer’s HypercardHypercard..

No single system was in place to tie all this together and No single system was in place to tie all this together and allow non-specialists to post and/or have access to the allow non-specialists to post and/or have access to the hundreds of Internet documents beginning to appear.hundreds of Internet documents beginning to appear.

Consequently, Internet commerce and novice user Consequently, Internet commerce and novice user participation was minimal due to these constraints.participation was minimal due to these constraints.

The World Wide Web (WWW) ArrivesThe World Wide Web (WWW) Arrives

Tim Berners-Lee, computer scientist at CERN, made a Tim Berners-Lee, computer scientist at CERN, made a number of important number of important contributionscontributions which address these which address these problems.problems.

HTTPHTTP: Hypertext Transfer Protocol: How to name, : Hypertext Transfer Protocol: How to name, request, and transfer documents over the Internet.request, and transfer documents over the Internet.

HTTPDHTTPD: HTTP Daemon. Non-proprietary, : HTTP Daemon. Non-proprietary, client-serverclient-server oriented open source software to actually carry out the oriented open source software to actually carry out the HTTP protocol on many different operating systems.HTTP protocol on many different operating systems.

HTMLHTML: Hypertext Markup Language. A common : Hypertext Markup Language. A common formatting language to allow consistent document formatting language to allow consistent document display on all computers. HTML documents also may display on all computers. HTML documents also may contain contain hypertext linkshypertext links to allow users to easily move from to allow users to easily move from one HTML file to another or browse the Web. one HTML file to another or browse the Web.

HTML documents are typically named with HTML documents are typically named with extensions .htm or .html and contain plain ASCII text. extensions .htm or .html and contain plain ASCII text. Coding!!!!Coding!!!!

HTTP and Browser BasicsHTTP and Browser Basics

An address or An address or Uniform Resource LocatorUniform Resource Locator (URL) such as (URL) such as http://math.hws.edu/vaughn/index.htmlhttp://math.hws.edu/vaughn/index.html indicates we are indicates we are referencing a document using the HTTP protocol from referencing a document using the HTTP protocol from the server math in domain hws.edu. The document itself the server math in domain hws.edu. The document itself is found inside directory vaughn with its individual file is found inside directory vaughn with its individual file name index.html.name index.html.

To send this request, we use a To send this request, we use a Web browserWeb browser, a , a local local applicationapplication which interacts with the Internet, and can which interacts with the Internet, and can form HTTP requests, display HTML documents, etc.form HTTP requests, display HTML documents, etc.

Common browsers: Internet Explorer, FireFox, Opera, Common browsers: Internet Explorer, FireFox, Opera, Chrome, etc.Chrome, etc.

Other protocols and documents work with WWW. Other protocols and documents work with WWW. ftp://math.hws.edu/vaughn/myFile.docftp://math.hws.edu/vaughn/myFile.doc or (File Transfer or (File Transfer Protocol)Protocol)

https://math.hws.edu/vaughn/secrets.pdfhttps://math.hws.edu/vaughn/secrets.pdf (Secure HTTP (Secure HTTP uses encryption)uses encryption)

HTML BasicsHTML Basics

HTML documents are plain ASCII text created by users, HTML documents are plain ASCII text created by users, like you, using a simple ASCII text editor.like you, using a simple ASCII text editor.

HTML documents are HTML documents are renderedrendered by Web browsers to by Web browsers to appear with colors, fonts, images, formatting, tables, etc. appear with colors, fonts, images, formatting, tables, etc.

Control over the document display is done with HTML Control over the document display is done with HTML tagstags such as <b>This text is bold</b>. such as <b>This text is bold</b>.

In order to have Web site content, most beginners learn In order to have Web site content, most beginners learn how to code in basic HTML then move on to using a how to code in basic HTML then move on to using a WYSIWYG HTML editor such as Dreamweaver, GoLive, WYSIWYG HTML editor such as Dreamweaver, GoLive, Aptana Studio, etc. You documents must be made Aptana Studio, etc. You documents must be made available on a available on a Web ServerWeb Server which handles retrieval which handles retrieval requests.requests.

Just like spreadsheets, HTML documents can be Just like spreadsheets, HTML documents can be enhanced with active, executing programs (VBScript, enhanced with active, executing programs (VBScript, Javascript, Flash, etc) to create DHTML or XHTML Javascript, Flash, etc) to create DHTML or XHTML pages.pages.

Our First HTML DocumentOur First HTML Document

<html>

<head>

<title>My First Page </title>

</head>

<body>

This is my first web page!

<hr>

</body>

</html>

Rendering the HTMLRendering the HTML

via a Web browservia a Web browser

Where We are GoingWhere We are Going

Learn the basic HTML tags to compose Web Learn the basic HTML tags to compose Web pages.pages.

Learn how to post pages on a campus server so Learn how to post pages on a campus server so anyone on the Internet can access and see your anyone on the Internet can access and see your pages.pages.

Learn more complex page design, composition Learn more complex page design, composition techniques, and the corresponding HTML tags.techniques, and the corresponding HTML tags.

Add Javascript code to HTML web pages to Add Javascript code to HTML web pages to make them active, not just static.make them active, not just static.

Introduction to an industrial-quality HTML editor.Introduction to an industrial-quality HTML editor.