Computer Science 101 Introduction to Web Pages

Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay ( WIMP, 1972) ARPANET (the first internet, 1970s)

Origins of the Web Bill Atkinson (Hypercard, 1989) Tim Berners-Lee (the WWW, 1994)

Useful References Tim-Berners-Lee, Weaving the Web: The Original Design and Ultimate Destiny of the World Wide Web by Its Inventor David Weinberger, Small Pieces Loosely Joined: A Unified Theory of the Web Alan Levine, Online HTML Programming LessonsOnline HTML Programming Lessons

What We Need A way of finding a computer or “server” on the Internet A way of locating a Web page on that computer A way of displaying that Web page on my computer or “client”

Locating Computers on the Internet TCP/IP (Transmission Control Protocol/Internet Protocol) – a set of protocols for making transactions IP address – standard for identifying a computer TCP – describes how packets are sent and received

IP Format Example: sets of 3 digits Range from 0 to 255 Total of or over 4 billion computers

The Internet and the Web The Web sits on top of the Internet and uses its protocols (HTTP, FTP, MAILTO, etc.) URL (Uniform Resource Locator) – allows different computers to use the same protocols for Web-based transactions

Form of a URL with HTTP http – Hypertext transfer protocol

Named Address (Domain Name) It’s hard to remember 16 digits Provide a name and get the computer to translate it to the IP address 

Two Standards for Web Pages Standard protocols (URLs) Standard language for describing Web pages (HTML – Hypertext Markup Language) HTML is a standard set of commands for formatting Web pages

How HTML Works Server’s disk Network connection Client’s browser The client sends a request for a page to the server HTML code is sent as text to the client HTML code is stored in the client’s cache (temporary memory) The client’s browser interprets the HTML code and formats the page

Markup Tags Codes that are not displayed but tell the browser what to do Tags have the form

An HTML File and Its Two parts The head – usually contains the page’s title The body – contains the rest of the text and commands

The Title Tag

Format of HTML Code Fairly free-format Tags are not case sensitive

Container Elements The sequence stuff is a container element Container elements can and should be nested, such as stuff

Plain Old Elements Not containers, just simple commands The break element,, is an example Inserts one line break in the text No ending tag

Formatting Text Bold, italic, etc.

Vertical Space Paragraph element - begins a new paragraph on a new line, wrapping until the next horizontal space command Horizontal rule element - inserts a horizontal line as a line break

Header Elements Provide headers of different font sizes,, …,

Comment Symbols We want to document our code with information that the browser will ignore and not display For the benefit of the readers of our HTML code, not our Web pages

Comment Symbols

Tags and Attributes Tags tell the browser what to do Attributes tell the browser how to do it When the programmer does not specify attributes, defaults are used Example: background color is white or gray

HR Attributes WIDTH - extent of horizontal size (default 100%) SIZE - thickness (default 2) ALIGN - left, middle, right (default left)

Examples (uses defaults) (40 pixels, or picture elements)

Rules and Conventions attribute is usually uppercase value can always be quoted, sometimes must be quoted, is usually lowercase

Different Horizontal Rulers

Paragraph Alignment Not very useful justify works on some browsers

Paragraph Alignment