Material for midterm 1 Professor Evan Korth - PowerPoint PPT Presentation

1 / 47
About This Presentation

Material for midterm 1 Professor Evan Korth


Pencil tool: free hand drawing (uses foreground color) ... Delay between frames. Save optimized (# of colors) looping. Your NYU internet and web account ... – PowerPoint PPT presentation

Number of Views:112
Avg rating:3.0/5.0
Slides: 48
Provided by: Elizabe3
Learn more at:


Transcript and Presenter's Notes

Title: Material for midterm 1 Professor Evan Korth

Material for midterm 1Professor Evan Korth
ARPANET (1969)
  • DoD creates ARPA (Advanced Research Projects
    Agency) in late 1950s
  • Packet-switching replaces circuit switching
  • Decentralized design

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
  • 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

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

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

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

Web Servers and browsers
  • Browser (is the client) the browser is a piece
    of software that requests documents from the
  • 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
  • Both the browser and the server understand the
    HTTP (Hyper text transfer protocol) protocol and
    use it to communicate together

Protocols(software /code/set of
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.

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 unique IP(Internet Protocol)
  • is the host which should correspond
    to the ip address

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//

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 can be the
    organization or companys trademark.
  • ICANN (International NON-Profit group that
    administers the domain-name system) is the
    organization which overseas the domain name
    industry. Anyone can purchase a domain name from
    a registrar like 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//
  • Domain name is
  • Top level domain (TLD) from above is edu
  • Top level domain name can be
  • .com (company or commercial)
  • .gov (government)
  • .mil (Military)
  • .org (non profit organization)
  • (including suffixes identifying
  • (company in Brazil

DNS Domain Name System
  • A centralized database lists domain names and IP
    addresses which are distributed throughout the
  • 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

(ISP) Internet Service Providers
  • AOL, Earthlink, Time Warner, Verizon.

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.

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//
  • HTML is the set of "markup" 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
  • Paragraph tag will insert a paragraph
    spacing (empty line after end of paragraph)

  • Break line tag will cause text to start at
    the next line
  • image tag will display
    an image in the browser

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 link
  • Absolute links link
    to NYU main page

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
  • You can also use HTML Editors (WYSIWYG)

HTML Editors ( Easy way to create websites)
  • HTML editors are called WYSIWYG
  • What You See Is What You Get
  • Examples of HTML Editors
  • Dreamweaver

Sample HTML Document
  • My web page
  • Content of the document
  • Content of the document

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
  • BODY Contains the actual content of the document
    that will display in browser window
  • Its the part that will be displayed in the
  • HTML tags will NOT be displayed in the browser
    unless you have a mistake

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

  • Containers
  • HTML tags have beginning (opener) or (START) tag
  • Most also have an end tag
  • For Some tags, the end tag is optional

Image source wikipedia
  • Standalone tags
  • A few HTML tags do not use end tags. They are
    used for standalone element on the page
  • to display an image

  • Line break
  • Link tag

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

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 and
  • Comments are not displayed by the browser
  • Example

Hello, How are
you? Hello,
How are you?

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

  • Browser will NOT display text inbetween

Headings ..
  • You can create Headings of various sizes on your
  • 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
  • Headings need an end tag
  • heading text
  • heading text
  • ..
  • heading text

Text format tags
  • Bold text or
  • Italic text or
  • Underline text

  • 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

Unordered list
  • Unordered list Bulleted list (most popular),
    list items with no particular order
  • Fruit
    • Banana Banana
    • Grape Grape

Ordered list
  • Numbered list
  • Fruit
    1. Banana 1. Banana
    2. Grape 2. Grape

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.
  • highlighted text

  • Absolute Link links to another page outside your
    web site. Have to specify entire URL of the site.
  • NYU Web Site
  • NYU Web Site

  • Relative Link links to another page in your file
    structure. Do not have to specify entire URL.
  • Go back to main page
  • back to main page

Named anchors
  • To name an anchor
  • To link to the named anchor on the same page
  • To link to the named anchor on another page

Email Link
  • You can email me at
  • Evan

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

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

Style sheets
  • Separate the content from the formatting
  • Definitions rule, selector, property, value
  • Pseudo classes (alink avisited ahover)
  • type"text/css"
  • Creating and using your own classes

  • Toolbar icons function of each icon
  • Paragraph / character / page / document
  • 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 breaks, paragraph
    borders, insert image from file, from clipart,
    text boxes

  • 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)

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
- 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
Photoshop you do not need to know this page
  • Frames
  • Tweening
  • Delay between frames
  • Save optimized ( of colors)
  • looping

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 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?

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

Principles material
  • Review the PowerPoint slides online.
  • Four digit binary numbers
Write a Comment
User Comments (0)