10/15/04 - Hampden
Download
Report
Transcript 10/15/04 - Hampden
COMS 161
Introduction to Computing
Title: HTTP and HTML
Date: October 15, 2004
Lecture Number: 22
1
Announcements
• Material
– Chapter 5 (Creating Documents) pp 92
• Have a great break
– Keep it safe
– Make sure you come back to us!
2
Review
• World Wide Web
– Client/Server
– URL
– Web Browser
• HTML and HTTP
3
Outline
• HTML and HTTP
4
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
5
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
6
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
7
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
8
HTML
• Plain text with markup tags
– Plain text: standard (ASCII) characters
– Markup tags: embedded commands (still in plain
text) identifying content and structure
9
HTML Tags
• Not case-sensitive
• Textbook uses UPPER case; lower is now more
common
• Many tags are “paired tags”
• Example:
Tags
<p>This is some <b>sample</b> HTML.</p>
Appears as:
This is some sample HTML.
10
Basic Document Structure
<html>
(Signifies an HTML document)
<head>
(Descriptions of the document go here)
</head>
<body>
(Page content goes here)
</body>
</html>
11
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/
12
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 the
plain.
13
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 in
the movie version of
"My Fair Lady"
even though that role was played by Julie
Andrews on stage.
14
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…
15
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.
16
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
17
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 …
18
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:
My Autobiography
Part 1: My Early Years
Chapter 1: I Am Born
19
Lists in HTML
• Three kinds of lists:
– Ordered lists (automatically numbered)
– Unordered lists (bullet points)
– Definition lists (terms and definitions)
20
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. Introduction
2. Body
3. Conclusions
4. Appendices
• Is “list item” (<li>) a paired
or an unpaired tag?
21
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>”
22
Definition Lists
• Terms and definitions
• Example:
• Appears as:
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>
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.
23
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.
24
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 site for the textbook Exploring the
Digital Domain.
25
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
26
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?
27