270 likes | 377 Views
COMS 161 Introduction to Computing. Title: HTTP and HTML Date: October 15, 2004 Lecture Number: 22. Announcements. Material Chapter 5 (Creating Documents) pp 92 Have a great break Keep it safe Make sure you come back to us!. Review. World Wide Web Client/Server URL Web Browser
E N D
COMS 161Introduction to Computing Title: HTTP and HTML Date: October 15, 2004 Lecture Number: 22
Announcements • Material • Chapter 5 (Creating Documents) pp 92 • Have a great break • Keep it safe • Make sure you come back to us!
Review • World Wide Web • Client/Server • URL • Web Browser • HTML and HTTP
Outline • HTML and HTTP
Web Browsers and Servers • Web browsers are clients • Request, receive, and display Web documents • Web sites are servers • Store Web information • Process browser requests • Send information back to the browser • The protocol used is called “HTTP” • Hypertext Transfer Protocol • Method by which browsers and servers communicate
Web Publishing • HTTP defines how browsers and servers communicate • “HTML” is the language they use • Hypertext Markup Language • HTML signifies both content (elements) and structure (presentation) • Content and structure are specified separately
Web Publishing • HTML -- Hypertext Markup Language • Hypertext • Links to a variety of information, local or remote • Markup • Originally from print publishing: handwritten marks on text to indicate presentation instructions to the typesetter • Text size, bold or italic, headlines vs. body text, column layout, etc. • Language • Standardized set of instructions for a computer
Web Publishing • HTML is designed to be: • Platform independent • Any computer, any browser • Resolution independent • Any screen or printer size • Multimedia • Text, images, video, sound, interactive tools, etc. • Hyperlinked • Immediate links to other content, local or remote
HTML • Plain text with markup tags • Plain text: standard (ASCII) characters • Markup tags: embedded commands (still in plain text) identifying content and structure
Tags This is some sample HTML. HTML Tags • Not case-sensitive • Textbook uses UPPER case; lower is now more common • Many tags are “paired tags” • Example: <p>This is some <b>sample</b> HTML.</p> Appears as:
Basic Document Structure <html> (Signifies an HTML document) <head> (Descriptions of the document go here) </head> <body> (Page content goes here) </body> </html>
Setting a Page Title • Titles help give the user a frame of reference • Titles appear in taskbar and browser’s title bar • Example:<title>Hampden-Sydney College, Virginia</title> • Appears as: http://www.hsc.edu/
The rain in Spain stays mainly on the plain. Text in HTML • Simple text is in enclosed in paragraph tags • Automatically wraps to fit • Example: <p> The rain in Spain stays mainly on the plain. </p> • Appears as:
Audrey Hepburn played Eliza Doolittle in the movie version of "My Fair Lady" even though that role was played by Julie Andrews on stage. Text in HTML • Break tags help to format lines • Example:<p> Audrey Hepburn played Eliza Doolittle in the movie version of<br>"My Fair Lady“<br>even though that role was played by Julie Andrews on stage. </p> • Appears as:
Roses are red, violets are blue… Text in HTML • Font face, color, style, etc. may be specified • Example:<p>Roses are<font color="red">red</font>,<br><font face="Arial,Helvetica">violets are blue…</font></p> • Appears as:
Some other kinds of text formatting: Italics This is<i>italic</i>text. This is italic text. Bold This text is<b>bold</b>. This text is bold. Underline And this is<u>underlined</u>. And this is underlined. Superscript Here is a<sup>super</sup>script. Here is a superscript. Subscript And, here’s a<sub>sub</sub>script. And, here’s a subscript. Text in HTML
Text in HTML • Font sizes • Absolute font size: a number between 1 and 7 • Example: A <font size=7>B </font>C Appears as: ABC • Relative font size: use a number like –n or +n(where n is some digit) • Example: X <font size=+2>Y </font>Z Appears as: XYZ • “basefont” size is 3
My Autobiography Part 1: My Early Years Chapter 1: I Am Born It was a dark and stormy night … Headings in HTML • Headings of different weights are used to introduce sections • Example:<h1>My Autobiography</h1><h2>Part 1: My Early Years</h2><h3>Chapter 1: I Am Born</h3><p>It was a dark and stormy night…</p> • Appears as:
My Autobiography Part 1: My Early Years Chapter 1: I Am Born It was a dark and stormy night … Comments • Comments may be added to an HTML file • Information for someone reading the HTML file • Comments do not appear in the browser • Example:<h1>My Autobiography</H1><!-- I hand coded this HTML! I hope there aren’t any errors! --><h2>Part 1: My Early Years</h2><h3>Chapter 1: I Am Born</h3><p>It was a dark and stormy night…</p> • Appears as:
Lists in HTML • Three kinds of lists: • Ordered lists (automatically numbered) • Unordered lists (bullet points) • Definition lists (terms and definitions)
Automatically numbered Example:Outline:<br><ol><li>Introduction</li><li>Body</li><li>Conclusions</li><li>Appendices</li></ol> Appears as: • Outline: • Introduction • Body • Conclusions • Appendices Ordered Lists • Is “list item” (<li>) a paired or an unpaired tag?
Bullet points Example:HTML has three types of lists:<br><ul><li>Ordered</li><li>Unordered</li><li>Definition</li></ul> Appears as: • HTML has three types of lists: • Ordered • Unordered • Definition Unordered Lists • Exactly the same syntax as ordered lists, except “<ul>” instead of “<ol>”
Terms and definitions Example:Glossary:<br><dl><dt>HTTP</dt><dd>A protocol: the mechanism that computers use to exchange web documents.</dd><dt>HTML</dt><dd>A language: the terms and symbols used in web documents to define the content and layout of a web page.</dd></dl> Appears as: Glossary: HTTP A protocol: the mechanism that computers use to exchange web documents. HTML A language: the terms and symbols used in web documents to define the content and layout of a web page. Definition Lists
Audrey Hepburn played "Eliza Doolittle" in My Fair Lady. Inline Graphics • Images may be placed on the page along with text and other elements • Only standard image formats: .gif, .jpg, a few others • Example:<img src="audrey.jpg"> <br>Audrey Hepburn played "Eliza Doolittle" in <i>My Fair Lady.</i> • Appears as:
Web site for the textbook Exploring the Digital Domain. Hyperlinks • The key to the Web • Cross references to other elements: pages, images, multimedia, etc. • Clicking on a hyperlink causes an automatic request for the linked element • Example:<a href="http://cs.furman.edu/digitaldomain/">Web site</a> for the textbook <i>Exploring the Digital Domain.</i> • Appears as:
Web Publishing Tools • Text editors (e.g. Notepad) • Create and edit plain text files with HTML tags • Tag editors (e.g. Dreamweaver’s “code view”) • Tools that make it easier to place tags in text files • HTML generators (e.g. Dreamweaver’s “design view”) • Tools that automatically create HTML codes much like a word processor • Site Managers (e.g. Dreamweaver’s “Site” menu) • Help organize and keep track of all files that make up a site • HTML files, images, databases, programs, etc. • Assist with keeping files on the server in synch with local files
Censorship • Why would someone want to censor the Web? • Is censorship right? Who decides? • How, technically, would one actually control Web content? • Blocking software • PICS ratings • Communications Decency Act (1996–1999) • Other ideas? • How does this relate to Spam filters?