1 coms 161 introduction to computing title: http and html date: october 13, 2004 lecture number: 21

1

COMS 161Introduction to Computing

Title: HTTP and HTML

Date: October 13, 2004

Lecture Number: 21

2

Announcements

• Material – Chapter 18 (The Internet)

– Chapter 5 (Creating Documents) pp 92

• Homework 6– Due (Friday) 10/15/2004

3

Review

• Internet Protocols

• World Wide Web– Client/Server– URL– Web Browser

4

Outline

• HTML and HTTP

5

URL Example

• Protocol

• Domain Name

• Resource location

• URL for the book

6

Web Browser (Client)Title bar

Menu barTool bar

7

Researching on the Web

• Search service--generates lists of other Web sites containing information about supplied topics

• Web directory--a search service organized as a topical hierarchy and compiled by (human) editors

• Search engine--search services whose databases are compiled by automated Web crawlers

8

Keyword Searching

• A form of (automated) text matching• Keyword--a word or phrase used as a

text pattern for matching• Hits--matches with text patterns• Misses--fails to match some or all of the

text pattern• False positives--hits that are not related

to the desired topic

9

Boolean Expressions

• Search engines interpret multiple keywords as Boolean expressions

• AND--intersection, i.e., references that contain both keywords

10

Boolean Expressions

• OR--union, i.e., references that contain either keyword

11

Boolean Expressions

• NOT--negation, i.e., references that do not contain the keyword

12

Mathematical Operators

Boolean Expression Mathematical Operator

Labrador AND retrievers +Labrador +retrievers

Labrador AND NOT

retrievers

+Labrador -retrievers

Mathematical operators may be used to signify Boolean expressions

13

Hybrid Search Services

• Metasearch engines--consult other search engines and directories and summarize query data

• Niche services--commercial services targeted at a specific audience or topic

• Portals--gateway Web site with searching capabilities

14

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

15

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

16

Web Publishing

• HTML -- Hypertext Markup Language– Hypertext

• Links to 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

17

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

18

HTML

• Plain text with markup tags– Plain text: standard (ASCII) characters– Markup tags: embedded commands (still in plain

text) identifying content and structure

19

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>

This is some sample HTML.

Appears as:

TagsTags

20

Basic Document Structure

<html> (Signifies an HTML document)

<head>

(Descriptions of the document go here)

</head>

<body>

(Page content goes here)

</body>

</html>

21

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/

22

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:

The rain in Spain stays mainly on theplain.

23

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:

Audrey Hepburn played Eliza Doolittle inthe movie version of"My Fair Lady"even though that role was played by JulieAndrews on stage.

24

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:

Roses are red,violets are blue…

25

Text in HTML

• 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.

26

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

27

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 AutobiographyPart 1: My Early YearsChapter 1: I Am BornIt was a dark and stormy night …

28

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><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 AutobiographyPart 1: My Early YearsChapter 1: I Am BornIt was a dark and stormy night …

29

Lists in HTML

• Three kinds of lists:– Ordered lists (automatically numbered)– Unordered lists (bullet points)– Definition lists (terms and definitions)

30

Ordered Lists

• Automatically numbered• Example:

Outline:<br><ol><li>Introduction</li><li>Body</li><li>Conclusions</li><li>Appendices</li></ol>

• Appears as:

Outline:1. Introduction2. Body3. Conclusions4. Appendices

• Is “list item” (<li>) a paired or an unpaired tag?

31

Unordered Lists

• 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

• Exactly the same syntax as ordered lists, except “<ul>” instead of “<ol>”

32

Definition Lists

• 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:

HTTPA protocol: the mechanism that computers

use to exchange web documents.

HTMLA language: the terms and symbols used in web documents to define the content and layout of a web page.

33

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:

Audrey Hepburn played "Eliza Doolittle" in My Fair Lady.

34

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://s9000.furman.edu/DD/">Web site</a> for the textbook <i>Exploring the Digital Domain.</i>

• Appears as:

Web site for the textbook Exploring the Digital Domain.

35

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

36

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?

1 coms 161 introduction to computing title: http and html date: october 13, 2004 lecture number: 21

Documents

body text

remotehtmlplain text

text patternsmisses

markup tagsplain text

text patternfalse positives

capabilitiesweb browsers

serversweb browsers

gateway web site