19
1 Ethics of Computing MONT 113G, Spring 2012 Session 8 The Internet HTML

1 Ethics of Computing MONT 113G, Spring 2012 Session 8 The Internet HTML

Embed Size (px)

Citation preview

Page 1: 1 Ethics of Computing MONT 113G, Spring 2012 Session 8 The Internet HTML

1

Ethics of Computing MONT 113G, Spring 2012

Session 8The Internet

HTML

Page 2: 1 Ethics of Computing MONT 113G, Spring 2012 Session 8 The Internet HTML

2

History of the Internet

The next two slides summarize the information available in the slide show found at: http://www.wellesley.edu/cs100/Internet

1. The internet started as ARPAnet (Advanced Research Projects Agency).

2. Other networks started forming: bitnet, CSnet, NSFnet, etc.

3. These networks became interconnected to form the internet.

4. Several organizations oversee the internet:Internet SocietyInternet Corporation for Assigned Names and Numbers

(ICANN)Network Information Services

Page 3: 1 Ethics of Computing MONT 113G, Spring 2012 Session 8 The Internet HTML

3

TCP/IP

The Internet is a Packet Switched Network--messages are sentas packets.

Messages are sent across the web using the TCP/IP protocols

Transmission Control Protocol (TCP) breaks up the messages and puts on header information regarding the order of packetsand for error checking.

Internet Protocol (IP) addresses the packets and sends themacross the internet. The packets don’t all necessarily follow the same route or arrive in the correct order. IP unpacks the packets at their destination.

TCP puts the packets in their proper order at the end.

Page 4: 1 Ethics of Computing MONT 113G, Spring 2012 Session 8 The Internet HTML

4

The World Wide Web

• WWW is a collection of home pages thatincorporate text, graphics, sound, animation, andinteractive applications.

• Home pages are connected to each other byhypertext.

Page 5: 1 Ethics of Computing MONT 113G, Spring 2012 Session 8 The Internet HTML

5

The Client/Server Model

Page 6: 1 Ethics of Computing MONT 113G, Spring 2012 Session 8 The Internet HTML

6

Universal Resource Locators

• The user specifies a URL either by typing it into thelocation box or by clicking on a link.

http://www.december.com/web/text/index.html

Open:

http://What Internetprotocol to use.

www.december.comIdentifies Web server

/web/text/Directory pathname

index.htmlSpecific filerequested

Page 7: 1 Ethics of Computing MONT 113G, Spring 2012 Session 8 The Internet HTML

7

The request goes out

• The brower sends the URL request using theHypertext Transfer Protocol.

Page 8: 1 Ethics of Computing MONT 113G, Spring 2012 Session 8 The Internet HTML

8

May I Help You?

Page 9: 1 Ethics of Computing MONT 113G, Spring 2012 Session 8 The Internet HTML

9

Browsers

• Web browsers act as clients in the client/serverrelationship.

• In addition, browsers display the information sent tothem on your computer screen.

Page 10: 1 Ethics of Computing MONT 113G, Spring 2012 Session 8 The Internet HTML

10

Hypertext Markup Language

• Web authors use a the hypertext markup language(html) to create their pages.

• This information is sent to your computer as anordinary text file.

Page 11: 1 Ethics of Computing MONT 113G, Spring 2012 Session 8 The Internet HTML

11

Boiler plate

<HTML><HEAD>

<TITLE>My Home Page</TITLE></HEAD><BODY>

<H1>Welcome to my homepage!</H1>

<P>Hi there! This is my very first web page!

</BODY></HTML>

index.html

Page 12: 1 Ethics of Computing MONT 113G, Spring 2012 Session 8 The Internet HTML

12

HTML Blocks

<HTML>

</HTML>

<HEAD>

</HEAD>

<TITLE>

</TITLE>Stanzi's Homepage

<BODY>

</BODY>

Hi there! This is my very firstweb page!

<IMG SRC="moon.gif"><H1>

</H1>Welcome to my Homepage!

Page 13: 1 Ethics of Computing MONT 113G, Spring 2012 Session 8 The Internet HTML

13

Adding Graphics

. . .<BODY>

<CENTER><H1>Welcome to My Web Page</H1></CENTER>

<IMG SRC="moon.gif">

<P> Hi There! This is my very first web page!

</P>

</BODY>. . .

Page 14: 1 Ethics of Computing MONT 113G, Spring 2012 Session 8 The Internet HTML

14

Creating Hyperlinks

. . .<BODY>

<H1>Welcome to My Web Page</H1><IMG SRC="moon.gif"><P>

Hi There! This is my very first web page!</P>

I attend

<A HREF = "http://www.holycross.edu"> Holy Cross College </A>.

Here is my favorite

<A HREF="cookies.html">cookie recipe</A>.

</BODY>. . .

Page 15: 1 Ethics of Computing MONT 113G, Spring 2012 Session 8 The Internet HTML

15

Relative addressingRelative addressing specifies a location relative to the location of the html file. Slashes indicate directory locations:

<IMG SRC = "moon.gif">(moon.gif is in the same directory (folder) as the html file that contains this tag).

<IMG SRC = "pictures/cookie.gif">(cookie.gif is in a directory named pictures that is in the same directory as the html file that contains this tag)

index.html moon.gif cookie.gifpictures

Page 16: 1 Ethics of Computing MONT 113G, Spring 2012 Session 8 The Internet HTML

16

Absolute Addressing

Absolute addressing gives the complete web address of a file:

<IMG SRC = "http://mathcs.holycross.edu/~croyden/croyden.gif">

The browser will download the image from the address given in the img tag.

Page 17: 1 Ethics of Computing MONT 113G, Spring 2012 Session 8 The Internet HTML

17

Some Common Tags

Start a paragraph: <P>Force a new line: <BR>Bold Text: <B>bold text</B>Italics: <I>Italics</I>Centered Text: <CENTER>Centered text</CENTER>Headlines: <H1>Big Headline</H1>

...<H6>Little headline</H6>

Unordered List: <UL><LI> Item 1<LI> Item 2

</UL>

Page 18: 1 Ethics of Computing MONT 113G, Spring 2012 Session 8 The Internet HTML

18

The FONT TagThe <FONT> tag allows you to specify font types, sizes and colors:

Specifying font type:<FONT FACE = "Arial">Arial font</FONT>

Specifying font size:<FONT SIZE = 6>A big font</FONT>

or:<FONT SIZE = +2>Increase the size a little</FONT>

Specifying font color:<FONT COLOR = "red">Red text </FONT>

Page 19: 1 Ethics of Computing MONT 113G, Spring 2012 Session 8 The Internet HTML

19

Dealing with White Space

Browsers ignore white space (spaces, tabs, new lines, etc.)

Text fills in to the right edge of the browser window, and then the browser wraps the text to the next line.

What if you want white space?Option 1:

Use &nbsp; to indicate a space

Option 2:Use <PRE> ...</PRE> (preformatted text)