1. CompSci 001 2.1 Today’s topics Networks & the Internet Basic HTML ä The basis for web pages ä “Almost” programming Upcoming ä Connections ä Algorithms Reading Internet history readings Great Ideas Chapters 1 Computer Science, Chapter 4

2. CompSci 001 2.2 Networks l Need to communicate. How to do it? ä Robustly, efficiently, securely l Classifications ä LAN vs. WAN ä Closed (proprietary) vs. Open l Topologies

3. CompSci 001 2.3 The Internet l Network of networks ä Connect networks through routers and bridges ä I nternet: Started by DARPA in 1973

4. CompSci 001 2.4 The World Wide Web l Servers disseminate hypertext documents ä Hypertext is text with a link or reference ä Uniform resource locator (URL): unique address of data on web l HyperText Markup Language (HTML) is a common formatting language for the web ä Tags are non-printing formatting markers Identified by angle brackets (i.e. ) Example: The Human Tornado Come in delimiting pair l General Goals  Platform independent Text Specification (also called a Markup Language) ä Links to other network resources

5. CompSci 001 2.5 Delimiting with tags l First tag says, “Begin mode” l Second tag (containing “/”) says, “End mode” So The Human Tornado means 1. Begin title mode 2. The text “The Human Tornado” is in title mode 3. End title l Using this construct, we can nest several different modes and have interesting behavior l Good tutorials on HTML http://www.w3.org/MarkUp/Guide/ http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html http://www.w3schools.com/html/ l In lab, you will create a webpage

6. CompSci 001 2.6 HTML l Some General HTML rules  For tags, case doesn’t matter, e.g., = ä In the text, spaces don’t matter: it will decide! (we call that “free format”)  starts a new line l Headings  Use to specify heading where smaller n designates more important heading  For example - - - is largest, boldest heading  - - - designates a fairly minor heading

7. CompSci 001 2.7 HTML l Basic Web Page Structure Ted’s Home Page Ted’s Page Welcome to Duke University! more to come …

8. CompSci 001 2.8 HTML l Want to link things together! l Hypertext (from the Webopedia) ä A special type of database system, invented by Ted Nelson in the 1960s, in which objects (text, pictures, music, programs, and so on) can be creatively linked to each other. l An anchored link: The Duke Web Page http://www.duke.eduThe Duke Web Page  Produces link to URL specified in HREF and display info between tags: The Duke Web Page The Duke Web Page

9. CompSci 001 2.9 HTML l Other useful info ä For italics or emphasis use or  For darker or bold use or ä For text space exactly as typed ( not free format) use

10. CompSci 001 2.10 HTML l Specifying Colors ä Can be specified in different ways  e.g., for standard colors can specify “white” or “red” ä Can specify arbitrary colors by specifying the amount of red, blue, and green involved. (RGB) ä Uses base 16 arithmetic: 0, 1, …, 9, a, b, c, d, e, f Red: “ ff0000 ” Green: “ 00ff00 ” Blue: “ 0000ff ” Black: “ 000000 ” Gray: ”7f7f7f” White:” ffffff ” Yellow: ” ffff00 ” Orange: “ ff7f00 ” Purple: ” c000e0 ” ä Can experiment!

11. CompSci 001 2.11 HTML l More useful HTML ä Bulleted list … – for items - - - ä Ordered list … 1.- - - 2.- - - 3.- - - ä Can nest arbitrarily deep - - lists within lists l Tables Cell 1 Cell 2 Cell 3 Cell 4 produces simple table l Images http://www.cs.duke.edu/~f orbes/construct.gif displays image

12. CompSci 001 2.12 HTML/Web/UNIX practice l In UNIX, your web page folder is found in a standard location: ä ~userID/public_html/ and for OIT Duke files is accessed with a web browser at ä //www.duke.edu/~userID l Many people don’t code in raw HTML ä Write in TextPad ä Save as Web Page in Microsoft Word ä Netscape Composer, Macromedia Dreamweaver, Bluefish l These all generate HTML for you l View other people’s web page source (HTML) from most browsers -- learn from others

13. CompSci 001 2.13 More Hexadecimal from L. Snyder, Fluency with Information Technology

14. CompSci 001 2.14 Cascading Style Sheets (CSS) l Style sheets describe how documents are presented l CSS is a standard for providing formatting (i.e. style) information for web documents ä Specify fonts, colors, spacing, etc. ä Why would we want to separate the style information from the content? l In the CSS file, you specify: ä a selector, that picks out the element you want ä the properties and values that you want to apply to the selected element (or elements) body { font-family: serif; } select everything in the tag and use a serif font for the text from © 2006 DW Johnson & University of Washingtonton

15. CompSci 001 2.15 The element type : body, div, span, h1, h2, img, p, a, … Specific "id" given for the element General "class" given for the element Selectors … div#footer { font-family: sans-serif; } selected with html file css file Introduction h1 { color: green; } selected with html file css file … span.familyMember { font-weight: bold; } selected with html file css file from © 2006 DW Johnson & University of Washingtonton

16. CompSci 001 2.16 Properties l The properties of the element determine how it it styled, including: ä background of the element ä text colors, alignment, spacing ä font selection ä border thickness, color, style ä padding and margins around the element ä list styles l Some properties and their values color: and background-color:and norder-color aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow font-family: serif, sans-serif, cursive, fantasy, monospace font-style: normal, italic font-weight: normal, bold border-width: thin, medium, thick border-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset See Prelab 1 for CSS tutorials