1 john magee 9 november 2012 cs120 lecture 17: the world wide web and html web publishing

11

John MageeJohn Magee9 November 20129 November 2012

CS120 Lecture 17:CS120 Lecture 17:

The World Wide Web and The World Wide Web and HTMLHTML

Web PublishingWeb Publishing

22

Overview/QuestionsOverview/Questions

– Is it the Internet or the World Wide Web. Is it the Internet or the World Wide Web.

What’s the difference? What’s the difference? – How do you visit a web site?How do you visit a web site?– How does your browser know what to do?How does your browser know what to do?– How does the web page show up on the How does the web page show up on the

screen? screen? – Some background about files and file Some background about files and file

systemssystems– Main idea: developing a web pageMain idea: developing a web page

33

Internet or WWW?Internet or WWW?

The Internet is like hardware…The Internet is like hardware…

The World Wide Web is like software…The World Wide Web is like software…

The Internet is a prerequisite for the World Wide The Internet is a prerequisite for the World Wide Web.Web.

44

The World Wide WebThe World Wide Web


A system of A system of interlinked hypertext interlinked hypertext documents and other resources (e.g. documents and other resources (e.g. images) accessed via the Internet. images) accessed via the Internet.

The WWW was conceived of and first The WWW was conceived of and first implemented by Tim Berners-Lee, circa implemented by Tim Berners-Lee, circa 1989-1991. 1989-1991.

55


The World Wide WebThe World Wide Web A system of A system of interlinkedinterlinked hypertexthypertext documents documents and other resources accessed via the Internet. and other resources accessed via the Internet. Uniform Resource Locator (URL)Uniform Resource Locator (URL)A standard way of specifying the location of a A standard way of specifying the location of a resource, it’s name, and how to get it. resource, it’s name, and how to get it.

Example:Example:http://www.clarku.edu.edu/index.htmlhttp://www.clarku.edu.edu/index.htmlhttp://www.facebook.com/login.phphttp://www.facebook.com/login.php

66

Displaying a WWW PageDisplaying a WWW Page

Figure 16.1 A browser retrieving a Web page

How do you “visit a website”?How do you “visit a website”?

77

Displaying a WWW PageDisplaying a WWW Page

– Browser decodes URL to parse out host Browser decodes URL to parse out host name and document location.name and document location.

– Browser makes network connection to Browser makes network connection to server.server.

– Client requests resource, and waits for Client requests resource, and waits for the server to respond (using the the server to respond (using the hypertext transfer protocolhypertext transfer protocol).).

– Browser parses the response, requests Browser parses the response, requests any embedded data, and any embedded data, and formats/displays output.formats/displays output.

88

ProtocolProtocol

A protocol is a standard way of doing A protocol is a standard way of doing something.something.

Hyper Text Transfer Protocol (HTTP)Hyper Text Transfer Protocol (HTTP) specifies how to request and deliver specifies how to request and deliver content (e.g. web pages).content (e.g. web pages).

99

Hyper Text Transfer Hyper Text Transfer ProtocolProtocol

HTTP HTTP is a protocol which specifies requests is a protocol which specifies requests and responses between clients and servers.and responses between clients and servers.It assumes/builds upon:It assumes/builds upon:

– The Internet exists/computer is connectedThe Internet exists/computer is connected– Reliable transport of dataReliable transport of data– Web servers are waiting to service clientsWeb servers are waiting to service clients

HTTP is not limited to web pages -- HTTP is not limited to web pages -- It can be used to transfer any kind of data.It can be used to transfer any kind of data.

1010

Mark UpsMark Ups

Figure 16.2 A marked-up document

1111

HyperText Markup HyperText Markup LanguageLanguage

Markup languageMarkup language A language that uses tags to annotate the A language that uses tags to annotate the information in a document.information in a document.TagsTagsThe syntactic elements in a markup The syntactic elements in a markup language that indicate how information language that indicate how information should be displayed.should be displayed.HyperText Markup Language (HTML)HyperText Markup Language (HTML)The language used to describe how to The language used to describe how to display the content of a Web page.display the content of a Web page.

1212

Hypertext Markup LanguageHypertext Markup Language

The HTML document defining the cheesyStudent Dynamics Web page

1313


The very cheesy versionrendered by the web browser

1414

Many HTML sources are a Many HTML sources are a mess mess

1515

Backgrounder: Backgrounder: Files and DirectoriesFiles and Directories

Pictured: Windows Explorer (left) and Finder (right), showing Pictured: Windows Explorer (left) and Finder (right), showing directories and files stored on a computer.directories and files stored on a computer.

1616

Backgrounder: Backgrounder: Files and DirectoriesFiles and Directories

FileFile A named collection of related data, used for A named collection of related data, used for organizing secondary storage (e.g. on disk) organizing secondary storage (e.g. on disk)

DirectoryDirectory (a.k.a. Folder) (a.k.a. Folder)A named group of files.A named group of files.

PathPath (a.k.a. filename or directory) (a.k.a. filename or directory)A logical name used to identify a location in A logical name used to identify a location in a file system.a file system.

1717

Directory TreesDirectory Trees

Recall that a directory is a Recall that a directory is a named group of filesnamed group of files. .

A directory can also have subdirectories. It’s easy to A directory can also have subdirectories. It’s easy to visualize this as a hierarchical tree:visualize this as a hierarchical tree:

text

alcohol.txt jane.txt …

/

Directory

Files

Directory

1818

Directory TreesDirectory Trees

Directory treeDirectory tree A logical view of the nested directory organization of a A logical view of the nested directory organization of a file system. Each directory is a branch, and each file is a file system. Each directory is a branch, and each file is a leaf. leaf.

Root directory Root directory The directory at the highest level. The directory at the highest level. Every directory descends from the root. Every directory descends from the root.

Parent directoryParent directoryEvery directory has a parent, up to the root. Every directory has a parent, up to the root. SubdirectorySubdirectoryA directory contained within another directory. A directory contained within another directory.

1919

A Windows Directory TreeA Windows Directory Tree

An Example of the Windows directory tree.

2020

A Unix (Mac) Directory TreeA Unix (Mac) Directory Tree

An Example of a UNIX directory tree; Mac OS is based on BSD UNIX.

2121

Path NamesPath Names

Absolute PathAbsolute Path A path that begins at the root and includes A path that begins at the root and includes all successive subdirectories. all successive subdirectories.

Examples:Examples:C:\text\mypoem.txtC:\text\mypoem.txt (Windows)(Windows)/Users/jmagee/mypoem.txt /Users/jmagee/mypoem.txt (Mac)(Mac)/home/grad3/mageejo/mypoem.txt/home/grad3/mageejo/mypoem.txt (Linux)(Linux)

2222

Path NamesPath Names

Present Working DirectoryPresent Working DirectoryThe default/current path used by a program or user.The default/current path used by a program or user.

Relative PathRelative PathA path name that begins at the A path name that begins at the present working present working

directorydirectory..

Example:Example:If present working directory isIf present working directory is

/home/grad3/mageejo/home/grad3/mageejo

Then the relative path Then the relative path mypoem.txt mypoem.txt is sufficient.is sufficient.

2323

File TypesFile Types

File TypeFile TypeDescribes the Describes the kindkind of information of information contained in a file. contained in a file.

File extensionFile extensionPart of a file name that indicates the Part of a file name that indicates the typetypeFile names are often in two parts:File names are often in two parts:

<filename>.<extension><filename>.<extension>

2424

File ExtensionsFile ExtensionsSome common file types and their extensions.

Microsoft pioneered the 8.3 filename standard.

Why give file names different extensions?Why give file names different extensions?What is the benefit to the user?What is the benefit to the user?

For more info, see http://filext.com/faq/file_extension_information.phpFor more info, see http://filext.com/faq/file_extension_information.php

2525

Rendering a Web pageRendering a Web page

After download, the browser renders After download, the browser renders the HTML into a graphical display. the HTML into a graphical display.

– HTML is a free-form languageHTML is a free-form language– Considers width and height of the Considers width and height of the

browser windowbrowser window– Incorporates images, HTML tags, etc.Incorporates images, HTML tags, etc.– Browsers are inconsistent!Browsers are inconsistent!

2626

Review: HTMLReview: HTML

Markup languageMarkup language A language that uses tags to annotate the A language that uses tags to annotate the information in a document.information in a document.TagsTagsThe syntactic elements in a markup The syntactic elements in a markup language that indicate how information language that indicate how information should be displayed.should be displayed.HyperText Markup Language (HTML)HyperText Markup Language (HTML)The language used to describe how to The language used to describe how to display the content of a Web page.display the content of a Web page.

2727


Tags are enclosed in angle brackets Tags are enclosed in angle brackets ((<<. . . . . . >>))

Words such as HEAD, TITLE, and BODY are Words such as HEAD, TITLE, and BODY are called called elements elements and specify the type of the and specify the type of the tag.tag.

Tags are often used in pairs, with a start tag Tags are often used in pairs, with a start tag such as such as <BODY><BODY> and a corresponding end tag and a corresponding end tag with a with a // before the element name, such as before the element name, such as </BODY></BODY>..

2828


Tags/Elements:Tags/Elements:<HTML></HTML><HTML></HTML> -- denotes start/stop of HTML document -- denotes start/stop of HTML document<TITLE><TITLE><TITLE><TITLE> -- denotes start/stop of document title -- denotes start/stop of document title<BODY></BODY><BODY></BODY> -- denotes start/stop of document body -- denotes start/stop of document body -- denotes start/stop of comments -- denotes start/stop of comments

Some tags allow additional properties to be specified, Some tags allow additional properties to be specified, e.g. BGCOLOR, TEXT, etc.e.g. BGCOLOR, TEXT, etc.

2929


Tags/Elements:Tags/Elements:<P><P> -- creates a paragraph space -- creates a paragraph space<BR><BR> -- creates a line break -- creates a line break <H1></H1><H1></H1> -- creates a heading font (also, try <H2>,…) -- creates a heading font (also, try <H2>,…) <B></B><B></B> -- creates bold text -- creates bold text<I></I><I></I> -- creates italicized text -- creates italicized text<CENTER></CENTER><CENTER></CENTER> -- centers the text between the tags -- centers the text between the tags

3030

HyperlinksHyperlinks

Hyperlinks are created using the HTML Hyperlinks are created using the HTML <A><A> tag. tag.

The HREF property gives a URL for the link.The HREF property gives a URL for the link.

Example:Example:This a link to <A HREF="http://www.clarku.edu"> This a link to <A HREF="http://www.clarku.edu">

Clark University’s</A> web site.Clark University’s</A> web site.

Having interlinked pages is what makes it a Having interlinked pages is what makes it a web! web!

3131

Images in HTML DocumentsImages in HTML Documents

Images are stored in separate files.Images are stored in separate files.

The The <img src=“filename.jpg”><img src=“filename.jpg”> tag inserts tag inserts an image into a web page.an image into a web page.

Example:Example:

<img src=“CU_Logo_White_Large.png”><img src=“CU_Logo_White_Large.png”>

3232

Image FilesImage Files

Images are stored in their own files:Images are stored in their own files:– Popular formats include: GIF, JPG, PNG, … Popular formats include: GIF, JPG, PNG, … – Example: Example: CU_Logo_White_Large.pngCU_Logo_White_Large.png

The SRC attribute of the IMG tag gives the The SRC attribute of the IMG tag gives the filenamefilename of the image file. of the image file.– Relative path: filename is relative to the location Relative path: filename is relative to the location

of the HTML document (e.g. in same of the HTML document (e.g. in same directory/folder).directory/folder).

<img src=“CU_Logo_White_Large.png”><img src=“CU_Logo_White_Large.png”>

– Absolute path: filename is an absolute location Absolute path: filename is an absolute location (e.g. URL or file system location).(e.g. URL or file system location).

3333

Images Tag AttributesImages Tag Attributes

IMG tag can customize the appearance of IMG tag can customize the appearance of the image using these attributes:the image using these attributes:– SRCSRC: gives the source location of image file: gives the source location of image file– ALTALT: text to display if image not available: text to display if image not available– BORDERBORDER: how many pixels of border: how many pixels of border– HEIGHTHEIGHT: how many pixels tall: how many pixels tall– WIDTHWIDTH: how many pixels wide: how many pixels wide

3434

Describing List DataDescribing List Data

Describe list items with Describe list items with <LI><LI> tag. tag.

Unordered (Bulleted) ListUnordered (Bulleted) List– Wrap list items in Wrap list items in <UL><UL> and and </UL></UL> tags tags

Ordered ListOrdered List– Wrap list items in Wrap list items in <OL><OL> and and </OL></OL> tags tags

3535

List ExampleList Example

Suppose we want to create a list of Suppose we want to create a list of our favorite sports teams. Two our favorite sports teams. Two examples:examples:

3636

Describing Table DataDescribing Table Data

A table is a set of rows of data. A table is a set of rows of data.

Each row has a number of fields. Each row has a number of fields.

Example: Example:

Let’s take a poll of people’s favorite Let’s take a poll of people’s favorite drinks, and display rows with results.drinks, and display rows with results.

3737

Describing Table DataDescribing Table Data

<TABLE></TABLE><TABLE></TABLE> describe the describe the start/stop of the table data.start/stop of the table data.

<TR></TR><TR></TR> describe start/stop of a row describe start/stop of a row of data witin the tale.of data witin the tale.

<TD></TD><TD></TD> describe the start/stop of describe the start/stop of table data items within a row. table data items within a row.

3838

Table ExampleTable Example

3939

Java AppletsJava Applets

First, Create a Java Archive (.jar) file:First, Create a Java Archive (.jar) file:

4040

Java AppletsJava Applets

Include this tag in your HTMLInclude this tag in your HTML

The archive attribute must match the The archive attribute must match the name of your .jar filename of your .jar file

The code attribute must match the The code attribute must match the name of your .class filename of your .class file

Place both your .jar and the Place both your .jar and the objectdraw .jar in the same folderobjectdraw .jar in the same folder

<applet archive="cs120demo.jar" code="cs120demo.class" width=400height=400></applet>

4141

Take-Away PointsTake-Away Points

– Internet, World Wide WebInternet, World Wide Web– BrowserBrowser– ProtocolProtocol– HTTPHTTP– Files, directories, filenames, file typesFiles, directories, filenames, file types– HTMLHTML

Tags/elementsTags/elements LinksLinks Images in web pagesImages in web pages Describing list dataDescribing list data Describing table dataDescribing table data