Material for midterm 1 Professor Evan Korth

1
Material for midterm 1Professor Evan Korth
2
ARPANET (1969)

• DoD creates ARPA (Advanced Research Projects
  Agency) in late 1950s
• Packet-switching replaces circuit switching
• Decentralized design

3
The Internet

• What is an internet?
• A set of interconnected networks
• The Internet is the most famous example
• The Internet is a worldwide network of networks.
• One computer network which consists of millions
  of computers that are physically connected
  together using wires, telephone lines and other
  media.
• It is many smaller networks connected together
  forming one large network called the Internet
• TCP/IP (Transmission Control Protocol/Internet
  Protocol) is the software/ protocol that is used
  to connect computers together

4
TCP/IP (1983)

• Kahn conceives of open architecture networking
• Cerf and Kahn design TCP/IP protocol
• Internet network of networks communicating using
  TCP/IP
• Layered architecture

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

• The World Wide Web (now referred to as the web or
  WWW)
• The web is one of the Internet services
• Using the Web, you have access to millions of
  pages of information (video, text, music,
  images).
• The pages on the web are connected together by
  hypertext or links
• Web "surfing or browsing is done with a Web
  browser
• Firefox, Safari and Internet Explorer (IE)

6
Web BrowsersFirefox and Internet Explorer (I.E.)

• A browser is an application program or software
  that provides a way to browse and interact with
  information on the World Wide Web.
• Lynx is the first web browser (only text)
  created in 1989
• Mosaic (1992) is the first graphical Web browser
  which allowed you to view multimedia files
  (music, video, and graphical files) on the Web
• Netscape in 1994
• I.E. in 1995

7
Web Servers and browsers

• Browser (is the client) the browser is a piece
  of software that requests documents from the
  server
• Server is software /hardware that allows a
  computer connected to the Internet to
• store documents (text, images, video, sound
  files.. Etc..)
• delivers or sends back these documents to the
  browser
• Both the browser and the server understand the
  HTTP (Hyper text transfer protocol) protocol and
  use it to communicate together

8
Protocols(software /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 winscp fugu HTTP (Hypertext Transfer
Protocol) A protocol for the web used to
communicate between servers and browsers. Its a
set of rules for exchanging files (text, graphic
images, sound, video, and other files) on the
World Wide Web.
9

Host IP address

• 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

10
URL Uniform Resource Locator)

• A URL is web address
• the address of a file or a web page on the web
• The URL for my departments homepage is
• http//cs.nyu.edu/index.html

11
Domain name is part of a URL or a web address.
Its 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 companys 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 year
• What is the domain name and top level domain
  name for the following web address
• http//cs.nyu.edu/
• Domain name is nyu.edu
• Top level domain name from above is edu
• Top level domain name can be
• .com (company or commercial)
• .gov (government)
• .mil (Military)
• .org (non profit organization)
• .edu.fr (including suffixes identifying
  countries)
• .com.br (company in Brazil

12
DNS Domain Name System

• A centralized database lists domain names and IP
  addresses which are distributed throughout the
  Internet.
• Most likely there is a DNS server within close
  geographic proximity to your access provider that
  maps the domain names in your Internet requests
  or forwards them to other servers in the
  Internet.

13
(ISP) Internet Service Providers

• With an affordable modem, people could connect to
  the Internet and browse the web using commercial
  online services such as
• AOL, Earthlink, Time Warner, Verizon.

14
HTML (Hypertext Markup Language)

• HTML is language used on the web
• It tells the Web browser how to display a Web
  page's text, images and sound for the user.
• lthtmlgt

15
What is HTML?

• HTML (Hypertext Markup Language)
• HTML standards are developed under the authority
  of the World Wide Web Consortium (W3C), headed by
  Tim Lee
• http//www.w3c.org
• HTML is the set of "markup" lt tag namegt or
  symbols or codes inserted in a file intended for
  display in 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 user.
• The individual markup codes are referred to as
  tags lt gt
• ltpgt Paragraph tag will insert a paragraph
  spacing (empty line after end of paragraph)
• ltbrgt Break line tag will cause text to start at
  the next line
• ltimg srcname of image gt image tag will display
  an image in the browser

16
What is a Hyperlink ?

• Hyperlinks
• links within Web documents which connects web
  pages together
• connect one document/file to another on the web
• Without hyperlinks, you can not browse the web!
• Relative link lta hreffilename.htmlgtlinklt/agt
• Absolute links lta hrefhttp//www.nyu.edu/gtlink
  to NYU main pagelt/agt

17
HTML Documents

• HTML documents are text documents
• Simple ASCII text files
• Html file extensions .html or .htm
• You can create html documents using
• WordPad or Notepad on the PC and TextEdit on the
  MAC
• You can also use HTML Editors (WYSIWYG)

18
HTML Editors ( Easy way to create websites)

• HTML editors are called WYSIWYG
• What You See Is What You Get
• Examples of HTML Editors
• Dream Weaver

19
Sample HTML Document

• ltHTMLgt
• ltHEADgt
• ltTITLEgt My web page lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• Content of the document
• lt/BODYgt
• lt/HTMLgt

• Content of the document

20
HTML Document Structure

• HTML document has two major parts
• HEAD contains information about the document but
  will not print content in the browser window
• As Title of the page
• Some JavaScript and Style sheets are part of the
  head
• BODY Contains the actual content of the document
  that will display in browser window
• Its the part that will be displayed in the
  Browser
• HTML tags will NOT be displayed in the browser
  unless you have a mistake

21
HTML Tags

• All HTML tags have a tag name. You can also have
  an optional list of attributes which all appear
  between angle brackets.
• lttagnamegtcontentlt/tagnamegt (end tag)
• Nothing within brackets will be displayed by the
  browser
• Attributes are proprieties that extend or refine
  the tags function
• lttagname attributevalue attribute2value2
  gttext lt/endtagnamegt
• If the browser does not recognize the tag name,
  it will be ignored.

22
HTML Tags

• Containers
• Most HTML tags have beginning (opener) or (START)
  tag
• They also have an end tag
• ltHEADgt lt/HEADgt
• ltBODYgt lt/BODYgt
• For Some tags, the end tag is optional
• ltpgt

Image source wikipedia
23
HTML Tags

• Standalone tags
• A few HTML tags do not use end tags. They are
  used for standalone element on the page
• ltimggt to display an image
• ltBRgt Line break

24
Attributes

• Attributes
• ltbody bgcolorred text000000 linkblue
  vlinkbrowngt
• Attributes are added within a tag to extend a
  tags action
• You can add multiple attributes within a single
  tag
• Attributes belong after the tag name, each
  attribute should be separated by one or more
  spaces
• Most attributes take values, which follow an
  equal sign after attributes name
• Syntax
• Attributevalue
• Color values rrggbb

25
Browser ignores redundant white space

• All Tabs, empty lines multiple spaces
• Will be converted to a single space
• HTML ignores multiples spaces inside the HTML
  documents. To apply spacing, you need to use tags
  such as ltpgt and ltbrgt
• Comments are not displayed by the browser
• Example

Hello, How are
you? lt!-- browser will ignore and convert all
spaces and line return to one space --gt Hello,
How are you?
26
ltPgt v. ltBRgt Tags

• ltBRgt line Break
• ltPgt Paragraph tag. Creates more space than a
  BR tag.
• ltHRgt Creates a Horizontal Rule

27
Comments lt!-- --gt

• Browser will NOT display text inbetween lt!-- and
  --gt
• lt!-- This is a comment --gt
• lt!-- This is another
• comment
• --gt

28
Headings lth1gt .. lth6gt

• You can create Headings of various sizes on your
  page
• Headlines appear as bold letters
• An empty line will also follow the headlines.
• Used for titles
• H1 is the largest font and h6 is the smallest
  heading
• Headings need an end tag lt/h1gt
• lth1gtheading text lt/h1gt
• lth2gtheading text lt/h2gt
• ..
• lth6gtheading text lt/h6gt

29
Text format tags

• Bold ltbgt textlt/bgt or ltstronggt
• Italic ltIgt textlt/Igt or ltemgt
• Underline ltugttext lt/ugt

30
Lists

• There are several lists which are used to
  organize item lists in browser
• Unordered list Bulleted list (most popular),
  list items with no particular order
• Ordered list Numbered list

31
Unordered list

• Unordered list Bulleted list (most popular),
  list items with no particular order
• Fruit ltULgt Fruit
• ltLIgt Banana Banana
• ltLIgtGrape Grape
• lt/ULgt

32
Ordered list

• Numbered list
• Fruit ltOLgt Fruit
• ltLIgt Banana 1. Banana
• ltLIgtGrape 2. Grape
• lt/OLgt

33
Hyperlinks (Anchor Tag)

• Hyperlinks are used for linking
• within the same page (Name tags)
• To another page in your web site (Relative Link
  or local link)
• To another page outside your web site (Absolute
  or remote link)
• Email Link
• Text links
• Image links
• Hyper Links are highlighted and underlined text.
  When clicked on, it takes you to another page on
  the web.
• ltA hreftargetgthighlighted textlt/Agt

34
Hyperlinks

• Absolute Link links to another page outside your
  web site. Have to specify entire URL of the site.
• ltA HREFhttp//www.nyu.edu/gtNYU Web Sitelt/Agt
• NYU Web Site

35
Hyperlinks

• Relative Link links to another page in your file
  structure. Do not have to specify entire URL.
• ltA HREFindex.htmlgtGo back to main pagelt/Agt
• back to main page

36
Named anchors

• To name an anchor
• lta name"nameOfTheAnchor"gtlt/agt
• To link to the named anchor on the same page
• lta href"nameOfTheAnchor"gtlt/agt
• To link to the named anchor on another page
• lta href"urlnameOfTheAnchor"gtlt/agt

37
Email Link

• You can email me at
• lta hrefmailtokorth_at_cs.nyu.edugtEvanlt/Agt

38
tables

• Tables are used in html pages to layout content.
• lttablegt
• lttrgt
• lttdgt
• colspan rowspan border cellspacing
  cellpadding width height align valign

39
images

• The img tag is used to insert images in an html
  page
• The src attribute indicates the url of the image
  to be included

40
Style sheets

• Separate the content from the formatting
• Definitions rule, selector, property, value
• Pseudo classes (alink avisited ahover)
• ltlink rel"stylesheet" href"style.css"
  type"text/css"gt
• Creating and using your own classes

41
Word

• Toolbar icons function of each icon
• Paragraph / character / page / document
  formatting
• Styles How to create a new style or modify an
  existing one
• How to insert hyperlinks and save as html file
• How to find/replace, insert picture, columns,
  header/footer, footnote, page/column/section
  breaks, paragraph borders, insert image from
  file, from clipart, text boxes

42
Photoshop

• File formats
• For web jpg, png, gif
• 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 shades of color less
  than 256 colors (gif)
• When Editing
• We save file as .psd
• we use mode RGB (millions of colors)
• This mode will allow us to save file with layers.
  
• When we save file for the web we loose layers
• Vector vs bitmap graphics
• How to reduce image size, image resolution and
  file size
• Important icons
• Basic Photoshop tools covered in class
• For example Rectangular and Elliptical
  selection, Paintbrush, Pencil tool, Foreground
  background color, Paint Bucket, Eye dropper)

43
Overview of Photoshop tools
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
-Pencil tool free hand drawing (uses foreground
color) - Press on same tool to select a Brush
tool
- 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
44
Photoshop

• Frames
• Tweening
• Delay between frames
• Save optimized ( of colors)
• looping

45
Your NYU internet and web account

• Information about your account. What is the host
  name, login, name of web directory, the address
  of your webpage/URL?
• What is the name of the HTML file that opens to
  your homepage?
• What application to use to log into your remote
  server i5.nyu.edu and use unix?
• What are fugu and WinScp used for?
• What are terminal and Putty used for?
• How do we upload HTML files and where do we
  upload them?

46
Unix Basics

• cd
• chmod and permissions
• ls (plus a and l options)
• mkdir
• cp

47
Principles material

• Review the PowerPoint slides online.