Material for midterm 1 Professor Evan Korth

1. Material for midterm 1Professor Evan Korth

2. 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

3. 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.)

4. Web BrowsersMosaic, 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

5. Web Servers and browsers • Browser (is the client): the browser is a piece of software thatrequests documents from the server • Server is software 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

6. 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.

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

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

9. 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

10. 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.

11. (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.

12. 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>

13. 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> Paragraph tag will insert a paragraph spacing (empty line after end of paragraph) • <br> 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

14. 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>

15. 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)

16. 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

17. <HTML> <HEAD> <TITLE> My web page </TITLE> </HEAD> <BODY> Content of the document </BODY> </HTML> Content of the document Sample HTML Document

18. 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

19. 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.

20. HTML Tags • Containers • Most HTML tags have beginning (opener) or (START) tag • They also have anend tag • <HEAD> </HEAD> • <BODY> </BODY> • For Some tags, the end tag is optional: • <p>

21. 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

22. Attributes • Attributes <bodybgcolor=“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”

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

24. <P> v. <BR> Tags • <BR>: line Break • <P>: Paragraph tag. Creates more space than a BR tag. • <HR>: Creates a Horizontal Rule

25. Comments <!-- --> • Browser will NOT display text in between <!-- This is a comment --> <!-- This is another comment -->

26. 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>

27. Text format tags • Bold: <b> text</b> or <strong> • Italic <I> text</I> or <em> • Underline: <u>text </u>

28. 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.

29. 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

30. Unordered list: • Unordered list: Bulleted list (most popular), list items with no particular order Fruit <UL>Fruit <LI> Banana • Banana <LI>Grape • Grape </UL>

31. Ordered list: • Numbered list: Fruit <OL> Fruit <LI> Banana 1. Banana <LI>Grape 2. Grape </OL>

32. 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>

33. 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

34. 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

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

36. tables • Tables are used in html pages to layout content. • <table> • <tr> • <td> • colspan; rowspan; border; cellspacing cellpadding; width; height

37. 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

38. 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

39. 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)

40. 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

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

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

43. Principles material • Review the PowerPoint slides online.