Transcript Welcome to the NYU Dial Class by the ITS Client Service Center!

Material for midterm 1
Professor Evan Korth
The Internet, 1969 by ARPAnet
The Internet was founded, by a US military network called:
ARPAnet (Advanced Research Projects Agency network.)



The Internet is a worldwide network of networks.
 One computer network 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
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
The most popular of which are Netscape Navigator and
Internet Explorer (I.E.)
Web Browsers
Mosaic, Netscape,
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
Server is software that allows a computer
connected to the Internet to:
1.
store documents (text, images, video, sound
files.. Etc..)
2.
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
Protocols(software /code/set of rules/regulations)
PPP: (Point to Point Protocol) used to connect a Personal computer to
the Internet via modem
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. It’s 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
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
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 department :
 http://cs.nyu.edu/

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 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
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.
(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, AT&T.

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.
 <html>

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" “< tag name> “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 < >
• <p>
• <br>
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
• <img src=“name of image” >
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: <a href=“filename.html”>link</a>

Absolute links: <a href=“http://www.nyu.edu/”>link to NYU
main page</a>
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)
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
•
Home site
•
BBedit
•
Page Mill
Sample HTML Document
<HTML>
<HEAD>
<TITLE> My web page </TITLE>
</HEAD>
<BODY>
Content of the document
</BODY>
</HTML>
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
head
•
BODY: Contains the actual content of the document that will display
in browser window
• It’s the part that will be displayed in the
Browser
• HTML tags will NOT be displayed in the
browser unless you have a mistake
HTML Tags
• All HTML tags are made up of a tag name. You can also
have an optional list of attributes which all appear between
angle brackets.
• <tagname>content</tagname> (end tag)
• Nothing within brackets will be displayed by the browser
• Attributes are proprieties that extend or refine the tags function
• <tagname attribute=“value” attribute2=“value” >text </endtagname>
• If the browser does not recognize the tag name, it will be ignored.
HTML Tags
• Containers
• Most HTML tags have beginning (opener) or (START) tag
• They also have an end
tag
• <HEAD> </HEAD>
• <BODY> </BODY>
• For Some tags, the end tag is optional:
•
<p>
HTML Tags

Standalone tags
 A few HTML tags do not use end tags.
They are used for standalone element on
the page:
<img>
to display an image
<BR>
Line break
Attributes

Attributes
<body bgcolor=“red” text=“#000000” link=“blue” vlink=“brown”>





Attributes are added within a tag to extend a tag’s 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
attribute’s name
Syntax:
Attribute=“value”
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 <p> and
<br>
 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
<P>: Paragraph tag. Creates more space
than a BR tag.
<HR>: Creates a Horizontal Rule
Comments <!-- -->

Browser will NOT display text in between
<!-- This is a comment
-->
<!-- This is another
comment
-->
Headings: <h1> .. <h6>




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 </h1>
 <h1>heading text </h1>
 <h2>heading text </h2>
 ..
 <h6>heading text </h6>
Text format tags



Bold: <b> text</b> or <strong>
Italic <I> text</I> or <em>
Underline: <u>text </u>
Font Tags:
specifies information about font:
font type, size and color
<FONT FACE=ARIAL SIZE=6 color=red>
<B>The Curse of Xanadu</B>
</FONT>
<FONT FACE=ARIAL SIZE=3>
by By Gary Wolf, <I>Wired Magazine</I>
</FONT>
 Font tags:



face: Arial, Courier, etc.
size: e.g. 3, 6 (6 is larger than 3)
color: e.g. “RED”, “GREEN”, or #ffffff etc.
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
Unordered list:

Unordered list: Bulleted list (most
popular), list items with no particular
order
Fruit <UL>
<LI> Banana
<LI>Grape
</UL>
Fruit
• Banana
• Grape
Ordered list:

Numbered list:
Fruit <OL>
<LI> Banana
<LI>Grape
</OL>
Fruit
1. Banana
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.
<A href=“target”>highlighted text</A>

Hyperlinks:

Absolute Link: links to another page outside
your web site. Have to specify entire URL
of the site.
<A HREF=“http://www.nyu.edu/”>NYU Web Site</A>
NYU Web Site
Hyperlinks:

Relative Link: links to another page in your
web Site. Do not have to specify entire
URL.
<A HREF=“index.html”>Go back to main page</A>
back to main page
Email Link:

You can email me at:
<a href=“mailto:[email protected]”>Evan</A>
tables
Tables are used in html pages to layout
content.
 <table>
 <tr>
 <td>


colspan; rowspan; border; cellspacing
cellpadding; width; height
images
The img tag is used to insert images in an
html page
 The src attribute indicates the url of the
iamge to be included

Word





Toolbar icons: function of each icon
Paragraph/ character/Page/document formatting
Styles? How to create new style or modify it
How to Insert hyperlinks and save as html file
How: find/replace, insert picture, columns,
header/footer, footnote,
page/column/section/breaks, paragraph borders,
insert image from file, from clipart, text boxes
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)
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
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 is fugu and WinScp used for?
What is 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.