Material for midterm 1Professor Evan Korth

ARPANET (1969)

DoD creates ARPA (DoD creates ARPA (Advanced Research Projects Advanced Research Projects

AgencyAgency) in late 1950s) in late 1950s Packet-switching replaces circuit switchingPacket-switching replaces circuit switching Decentralized designDecentralized design

The Internet

What is an internet?What is an internet? A set of interconnected networksA set of interconnected networks The The IInternet is the most famous examplenternet is the most famous example

The Internet is a worldwide network of networks.The Internet is a worldwide network of networks. One One computer networkcomputer network which consists of millions of computers which consists of millions of computers

that are physically connected together using wires, telephone lines that are physically connected together using wires, telephone lines and other media.and other media.

It is many smaller networks connected together forming one large It is many smaller networks connected together forming one large network called the network called the InternetInternet

TCP/IPTCP/IP (Transmission Control Protocol/Internet Protocol)(Transmission Control Protocol/Internet Protocol) is the is the software/ protocol that is used to connect computers togethersoftware/ protocol that is used to connect computers together

TCP/IP (1983)

Kahn conceives of open architecture Kahn conceives of open architecture networkingnetworking

Cerf and Kahn design TCP/IP protocolCerf and Kahn design TCP/IP protocol Internet: network of networks Internet: network of networks

communicating using TCP/IPcommunicating using TCP/IP Layered architecture Layered architecture

World Wide Web (WWW) http by Tim Berners-Lee CERN, 1989

The The World Wide WebWorld Wide Web (now referred to as the (now referred to as the webweb or or WWWWWW) ) The web is one of the The web is one of the Internet servicesInternet services Using the Web, you have access to millions of pages of Using the Web, you have access to millions of pages of

information information (video, text, music, images)(video, text, music, images). .

The pages on the web are connected together by The pages on the web are connected together by hypertext hypertext or linksor links

Web Web "surfing”"surfing” or “ or “browsingbrowsing” is done with a ” is done with a Web browserWeb browser The most popular of which are The most popular of which are Firefox Firefox and and Internet ExplorerInternet Explorer

((IEIE))

Web Browsers

Firefox and Internet Explorer (I.E.)

A A browserbrowser is an is an application program or software application program or software that that provides a way to browse and interact with information on provides a way to browse and interact with information on the World Wide Web.the World Wide Web.

Lynx: Lynx: is the first web browser (only text) created in 1989is the first web browser (only text) created in 1989 Mosaic (1992) Mosaic (1992) is the first is the first graphical Web browsergraphical Web browser which which

allowed you to view allowed you to view multimedia files (music, video, and multimedia files (music, video, and graphical files)graphical files) on the Web on the Web

NetscapeNetscape in 1994 in 1994 I.EI.E. in 1995. in 1995

Web Servers and browsers

Browser (is the client)Browser (is the client): : the browser is a piece of the browser is a piece of software thatsoftware that requests requests documents from the server documents from the server

ServerServer is software that allows a computer is software that allows a computer connected to the Internet to:connected to the Internet to:

1.1. store documents store documents ((text, images, video, sound text, images, video, sound files.. Etc..)files.. Etc..)

2.2. delivers or sends back these documents to the delivers or sends back these documents to the browserbrowser

Both the browser and the server understand the Both the browser and the server understand the HTTPHTTP ( (Hyper text transfer protocolHyper text transfer protocol) protocol and ) protocol and use it to communicate togetheruse it to communicate together

Protocols(Protocols(software /code/set of rules/regulationssoftware /code/set of rules/regulations))

TCP and UDP: (Transmission Control Protocol and User Datagram Protocol) are the main transport layer protocols.

IP: (Internet Protocol) is the main network layer protocol.

SMTP: (Simple Mail Transfer Protocol) used to send (route) e-mail over the Internet

FTP: (File transfer protocol) used when transferring files on the Internet

winscpfugu

HTTP: (Hypertext Transfer Protocol) A protocol for the web used to communicate between servers and browsers. It’s a set of rules for exchanging files (text, graphic images, sound, video, and other files) on the World Wide Web.

Host: On the Internet, the term "host" means any computer that has full two-way access to other computers on the Internet. A host has a specific "local or host number" that, together with the network number, forms its unique IP(Internet Protocol) address. www.nyu.edu is the host which should correspond to 128.122.108.74 ip address

Host & IP addressHost & IP address

URL: Uniform Resource Locator)

A URL is web addressA URL is web address the address of a the address of a filefile or a or a web pageweb page on the web on the web

The URL for my department’s homepage is:The URL for my department’s homepage is: http://cs.nyu.edu/index.htmlhttp://cs.nyu.edu/index.html

Domain name: is part of a URL or a web address. It’s the part that identifies the institution or

A domain name locates an organization or other entity on the Internet. It is usually the organization or company’s trademark.

Every company or organization has to apply for its unique domain name and it has to be approved by ICANN (International NON-Profit group that administers the domain-name system) or other private companies such as register.com. The cost can range from $7 to $35 per yearThe cost can range from $7 to $35 per year

What is the domain name and top level domain name for the following web address:What is the domain name and top level domain name for the following web address: http://cs.nyu.edu/http://cs.nyu.edu/ Domain nameDomain name is: “ is: “nyu.edunyu.edu”” Top Top level domainlevel domain name from above is “ name from above is “eduedu”” Top level domain name can be:Top level domain name can be:

..comcom (company or commercial)(company or commercial) ..govgov (government)(government) ..milmil (Military)(Military) ..orgorg (non profit organization)(non profit organization) ..edu.fredu.fr (including suffixes identifying countries)(including suffixes identifying countries) ..com.brcom.br (company in Brazil(company in Brazil

DNS: Domain Name System

A centralized database lists domain names and IP A centralized database lists domain names and IP addresses which are distributed throughout the addresses which are distributed throughout the Internet.Internet.

Most likely there is a DNS server within close Most likely there is a DNS server within close geographic proximity to your access provider geographic proximity to your access provider that maps the domain names in your Internet that maps the domain names in your Internet requests or forwards them to other servers in the requests or forwards them to other servers in the Internet. Internet.

(ISP) Internet Service Providers

With an affordable modem, people could With an affordable modem, people could connect to the Internet and browse the web connect to the Internet and browse the web using commercial online services such as:using commercial online services such as:

AOL, Earthlink, Time Warner, Verizon.AOL, Earthlink, Time Warner, Verizon.

HTML (Hypertext Markup Language)

HTML is language used on the web HTML is language used on the web It tells the Web browser how to display a It tells the Web browser how to display a

Web page's text, images and sound for the Web page's text, images and sound for the user.user.

<html><html>

What is HTML?

• HTML (Hypertext Markup Language)HTML (Hypertext Markup Language)

• HTML standards are developed under the authority of the World Wide Web Consortium (W3C), headed by HTML standards are developed under the authority of the World Wide Web Consortium (W3C), headed by Tim LeeTim Lee

• http://www.w3c.orghttp://www.w3c.org• HTML is the set of "markup" HTML is the set of "markup" “< tag name>“< tag name> “or symbols or codes inserted in a file intended for display in “or symbols or codes inserted in a file intended for display in

World Wide Web browser. World Wide Web browser.

• The markup tells the Web browser how to display a Web page's text, images, sound and video files for the The markup tells the Web browser how to display a Web page's text, images, sound and video files for the user.user.

• The individual markup codes are referred to as tags < >The individual markup codes are referred to as tags < >

• <p> <p> Paragraph tag will insert a paragraph spacing (empty Paragraph tag will insert a paragraph spacing (empty line after end of paragraph)line after end of paragraph)

• <br><br> Break line tag will cause text to start at the next lineBreak line tag will cause text to start at the next line

• <img src=“name of image” ><img src=“name of image” > image tag will display an image in the browserimage tag will display an image in the browser

What is a “Hyperlink” ?

Hyperlinks: Hyperlinks: links within Web documents which connects web pages togetherlinks within Web documents which connects web pages together connect one document/file to another on the webconnect one document/file to another on the web

Without Without hyperlinkshyperlinks, you can not browse the web!, you can not browse the web!

Relative link: Relative link: <a href=“filename.html”>link</a><a href=“filename.html”>link</a> Absolute links: Absolute links: <a href=“http://www.nyu.edu/”>link to NYU main <a href=“http://www.nyu.edu/”>link to NYU main

page</a>page</a>

HTML Documents

• HTML documents are text documentsHTML documents are text documents

• Simple ASCII text filesSimple ASCII text files

• Html file extensions: Html file extensions: .html or .htm.html or .htm

• You can create html documents using:You can create html documents using:

• WordPadWordPad or or NotepadNotepad on the PC and on the PC and TextEdit TextEdit on on the MACthe MAC

• You can also use HTML Editors (WYSIWYG)You can also use HTML Editors (WYSIWYG)

HTML Editors ( Easy way to create websites)

• HTML editors are called “WYSIWYG”HTML editors are called “WYSIWYG”

• What You See Is What You GetWhat You See Is What You Get

• Examples of HTML Editors:Examples of HTML Editors:

• Dream WeaverDream Weaver

• Front PageFront Page

• Mozilla ComposerMozilla Composer

• HomeSiteHomeSite

Sample HTML Document

<<HTML>HTML>

<HEAD><HEAD><TITLE> My web page </TITLE><TITLE> My web page </TITLE>

</HEAD></HEAD>

<BODY><BODY>Content of the documentContent of the document</BODY></BODY>

</HTML></HTML>

Content of the documentContent of the document

HTML Document Structure

• HTML document has two major parts:HTML document has two major parts:

• HEAD: HEAD: contains information about the document but will not print contains information about the document but will not print content in the browser window:content in the browser window:

• As As TitleTitle of the page of the page

• Some Some JavaScript and StyleJavaScript and Style sheets are part of the sheets are part of the head head

• BODY: BODY: Contains the actual content of the document that will Contains the actual content of the document that will display in browser window display in browser window

• It’s the part that will be displayed in the It’s the part that will be displayed in the BrowserBrowser

• HTML tags will NOT be displayed in the HTML tags will NOT be displayed in the browser unless you have a mistakebrowser unless you have a mistake

HTML Tags

• All All HTML tagsHTML tags are made up of a tag name. You can also have an are made up of a tag name. You can also have an optional list of attributes which all appear between angle brackets.optional list of attributes which all appear between angle brackets.

• <tagname>content</tagname> <tagname>content</tagname> (end tag)(end tag)• Nothing within brackets will be displayed by the browserNothing within brackets will be displayed by the browser

• Attributes are proprieties that extend or refine the tags functionAttributes are proprieties that extend or refine the tags function

• <tagname attribute=“value” attribute2=“value” >text </endtagname><tagname attribute=“value” attribute2=“value” >text </endtagname>

• If the browser does not recognize the tag name, it will be ignored.If the browser does not recognize the tag name, it will be ignored.

HTML Tags

• ContainersContainers• Most HTML tags have Most HTML tags have beginning (opener) or (START) tagbeginning (opener) or (START) tag

• They also have anThey also have an end tagend tag• <HEAD> </HEAD><HEAD> </HEAD>

• <BODY> </BODY><BODY> </BODY>

• For Some tags, the end tag isFor Some tags, the end tag is optional: optional:

• <p><p>

HTML Tags

Standalone tagsStandalone tags A few HTML tags do not use end tags. A few HTML tags do not use end tags.

They are used for standalone element on They are used for standalone element on the page:the page:<img><img> to display an imageto display an image<BR><BR> Line breakLine break

Attributes

AttributesAttributes<<bodybody bgcolor=“red” text=“#000000” link=“blue” vlink=“brown”bgcolor=“red” text=“#000000” link=“blue” vlink=“brown”>>

Attributes are added within a tag to extend a tag’s actionAttributes are added within a tag to extend a tag’s action You can add multiple attributes within a single tagYou can add multiple attributes within a single tag Attributes belong after the tag name, each attribute should be Attributes belong after the tag name, each attribute should be

separated by one or more spacesseparated by one or more spaces Most attributes take values, which follow an equal sign “=“ after Most attributes take values, which follow an equal sign “=“ after

attribute’s nameattribute’s name Syntax:Syntax:

Attribute=“value”Attribute=“value” Color values: #rrggbbColor values: #rrggbb

Browser ignores redundant white space

All Tabs, empty lines & multiple spacesAll Tabs, empty lines & multiple spaces Will be converted to a single spaceWill be converted to a single space HTML ignores multiples spaces inside the HTML ignores multiples spaces inside the

HTML documents. To apply spacing, you need HTML documents. To apply spacing, you need to use tags such as <p> and <br>to use tags such as <p> and <br>

Comments are not displayed by the browserComments are not displayed by the browser Example:Example:

“Hello, How are you?” <!-- browser will ignore and convert all spaces and line return to one space -->Hello, How are you?

<P> v. <BR> Tags <BR>: line Break<BR>: line Break <P>: Paragraph tag. Creates more space <P>: Paragraph tag. Creates more space

than a BR tag.than a BR tag. <HR>: Creates a Horizontal Rule<HR>: Creates a Horizontal Rule

Comments <!-- -->

Browser will NOT display text inbetween Browser will NOT display text inbetween <!-- and --><!-- and -->

<!-- This is a comment --><!-- This is a comment -->

<!-- This is another<!-- This is anothercomment comment -->-->

Headings: <h1> .. <h6>

You can create Headings of various sizes on your pageYou can create Headings of various sizes on your page Headlines appear as bold letters Headlines appear as bold letters An empty line will also follow the headlines. An empty line will also follow the headlines. Used for titlesUsed for titles

H1H1 is the largest font and h6 is the smallest heading is the largest font and h6 is the smallest heading Headings need an end tag </h1>Headings need an end tag </h1> <h1>heading text </h1><h1>heading text </h1> <h2>heading text </h2><h2>heading text </h2> .... <h6>heading text </h6><h6>heading text </h6>

Text format tags

Bold: Bold: <b> text</b><b> text</b> or <strong> or <strong> Italic Italic <I> text</I><I> text</I> or <em> or <em> Underline: Underline: <u>text </u><u>text </u>

Font Tags: specifies information about font:font type, size and color<FONT FACE=“ARIAL” SIZE=“6” color=“red”><FONT FACE=“ARIAL” SIZE=“6” color=“red”>

<B>The Curse of Xanadu</B><B>The Curse of Xanadu</B></FONT></FONT>

<FONT FACE=“ARIAL” SIZE=“3”><FONT FACE=“ARIAL” SIZE=“3”>by By Gary Wolf, <I>Wired Magazine</I>by By Gary Wolf, <I>Wired Magazine</I>

</FONT></FONT>

Font tags:Font tags: face: Arial, Courier, etc.face: Arial, Courier, etc. size: e.g. 3, 6 (6 is larger than 3)size: e.g. 3, 6 (6 is larger than 3) color: e.g. “RED”, “GREEN”, or #ffffff etc.color: e.g. “RED”, “GREEN”, or #ffffff etc.

Lists

There are There are several listsseveral lists which are used to which are used to organize item lists in browserorganize item lists in browser Unordered listUnordered list: Bulleted list (most : Bulleted list (most

popular), list items with no particular popular), list items with no particular orderorder

Ordered listOrdered list: Numbered list : Numbered list

Unordered list:

Unordered listUnordered list: Bulleted list (most : Bulleted list (most popular), list items with no particular popular), list items with no particular orderorder

FruitFruit <UL><UL> FruitFruit<LI> Banana<LI> Banana • Banana• Banana<LI>Grape<LI>Grape • Grape• Grape</UL></UL>

Ordered list:

Numbered list:Numbered list:

FruitFruit <OL><OL> FruitFruit<LI> Banana<LI> Banana 1. Banana1. Banana<LI>Grape<LI>Grape 2. Grape2. Grape</OL></OL>

Hyperlinks (Anchor Tag):

Hyperlinks are used for linking:Hyperlinks are used for linking: within the same page (Name tags)within the same page (Name tags) To another page in your web site (Relative Link or To another page in your web site (Relative Link or

local link)local link) To another page outside your web site (Absolute or To another page outside your web site (Absolute or

remote link)remote link) Email LinkEmail Link Text linksText links Image linksImage links

Hyper Links: are highlighted and underlined text. When Hyper Links: are highlighted and underlined text. When clicked on, it takes you to another page on the web.clicked on, it takes you to another page on the web.

<A href=“target”>highlighted text</A><A href=“target”>highlighted text</A>

Hyperlinks:

Absolute Link: links to another page Absolute Link: links to another page outside your web site. Have to specify outside your web site. Have to specify entire URL of the site.entire URL of the site.

<A HREF=“<A HREF=“http://www.nyu.edu/”>http://www.nyu.edu/”>NYU Web Site</A>NYU Web Site</A>

NYU Web SiteNYU Web Site

Hyperlinks:

Relative LinkRelative Link: links to another page in your : links to another page in your file structure. Do not have to specify entire file structure. Do not have to specify entire URL.URL.

<A HREF=“<A HREF=“index.htmlindex.html”>Go back to main page</A>”>Go back to main page</A>

back to main pageback to main page

Named anchors

To name an anchor:To name an anchor: <a name="nameOfTheAnchor"></a><a name="nameOfTheAnchor"></a>

To link to the named anchor on the same page:To link to the named anchor on the same page: <a href="#nameOfTheAnchor"></a> <a href="#nameOfTheAnchor"></a>

To link to the named anchor on another page:To link to the named anchor on another page: <a href="url#nameOfTheAnchor"></a> <a href="url#nameOfTheAnchor"></a>

Email Link:

You can email me at: You can email me at: <a href=“mailto:korth@cs.nyu.edu”>Evan</A><a href=“mailto:korth@cs.nyu.edu”>Evan</A>

tables

Tables are used in html pages to layout Tables are used in html pages to layout content.content.

<table><table> <tr><tr> <td><td>

colspan; rowspan; border; cellspacing colspan; rowspan; border; cellspacing cellpadding; width; heightcellpadding; width; height

images

The img tag is used to insert images in an The img tag is used to insert images in an html pagehtml page

The src attribute indicates the url of the The src attribute indicates the url of the image to be includedimage to be included

Style sheets Separate the content from the formattingSeparate the content from the formatting Definitions: rule, selector, property, valueDefinitions: rule, selector, property, value

Pseudo classes (a:link; a:visited; a:hover)Pseudo classes (a:link; a:visited; a:hover) <link rel="stylesheet" href="style.css" <link rel="stylesheet" href="style.css"

type="text/css">type="text/css"> Creating and using your own classesCreating and using your own classes

Word

Toolbar icons: function of each iconToolbar icons: function of each icon Paragraph / character / Page / document formattingParagraph / character / Page / document formatting Styles? How to create new style or modify itStyles? How to create new style or modify it How to Insert hyperlinks and save as html fileHow to Insert hyperlinks and save as html file How to: find/replace, insert picture, columns, How to: find/replace, insert picture, columns,

header/footer, footnote, page/column/section header/footer, footnote, page/column/section breaks, paragraph borders, insert image from file, breaks, paragraph borders, insert image from file, from clipart, text boxes from clipart, text boxes

Photoshop

File formats : File formats : For web: jpg, png, gifFor web: jpg, png, gif

Which file type do we save a picture (jpg)Which file type do we save a picture (jpg) Which file type we save a simple art line image such as a banner with no Which file type we save a simple art line image such as a banner with no

shades of color – less than 256 colors (gif)shades of color – less than 256 colors (gif) When Editing: When Editing:

We save file as .psd We save file as .psd we use mode RGB (millions of colors)we use mode RGB (millions of colors) This mode will allow us to save file with layers. This mode will allow us to save file with layers. When we save file for the web we loose layersWhen we save file for the web we loose layers

Vector vs bitmap graphicsVector vs bitmap graphics How to reduce image size, image resolution and file sizeHow to reduce image size, image resolution and file size Important iconsImportant icons Basic Photoshop tools covered in class:Basic Photoshop tools covered in class:

For example: Rectangular and Elliptical selection, Paintbrush, Pencil tool, Foreground & background For example: Rectangular and Elliptical selection, Paintbrush, Pencil tool, Foreground & background color, Paint Bucket, Eye dropper)color, Paint Bucket, Eye dropper)

Move object tool- Rectangular marquee tool- press to select Elliptical Marquee tool

- Crop tool- used to Shrink image. You can also use to enlarge image

- Paint bucket tool- used to paint large area of canvas. It uses colors in the foreground

-Type tool

- Eye dropper tool-to select a color from image

-Foreground color- used when using type, paint bucket, pecil, paint brush

-Background color- used when “cut” from edit menu

-Pencil tool: free hand drawing (uses foreground color)- Press on same tool to select a “Brush” tool

Overview of Photoshop tools

ImageReady

FramesFrames TweeningTweening Delay between framesDelay between frames Save optimized (# of colors)Save optimized (# of colors) loopinglooping

Your NYU internet and web account

Information about your account. What is the host Information about your account. What is the host name, login, name of web directory, the address of name, login, name of web directory, the address of your webpage/URL? your webpage/URL?

What is the name of the HTML file that opens to What is the name of the HTML file that opens to your homepage?your homepage?

What application to use to log into your remote What application to use to log into your remote server i5.nyu.edu and use unix?server i5.nyu.edu and use unix?

What are fugu and WinScp used for?What are fugu and WinScp used for? What are terminal and Putty used for?What are terminal and Putty used for? How do we upload HTML files and where do we How do we upload HTML files and where do we

upload them?upload them?

Unix Basics

cdcdchmod and permissionschmod and permissions ls (plus –a and –l options)ls (plus –a and –l options)mkdirmkdircpcp

Principles material

Review the PowerPoint slides online.Review the PowerPoint slides online.