Web Info for Project Presentations

1. Web Info for Project Presentations Matt Georgescu matt1@cep.rutgers.edu ENR Building 201 February 20, 2006 • Introduction • HTML • Making a Webpage • SSH Client (transferring files) • Editing the page(s) • Links/Previous Class Presentations

2. Introduction Tim Berners-Lee invented the World Wide Web (1989), an internet-based initiative for global information sharing. WWW -- (World Wide Web) World Wide Web (or Web, for short) is a term frequently used (incorrectly) when referring to “The Internet”. WWW denotes the entire collection of resources that can be accessed using any of the following protocols Gopher, FTP, HTTP, telnet …

3. Introduction • The key to Tim Berners-Lee’s WWW invention was: • All web servers people use to view the web work the same way on the Internet -- one way to view a document. They all use HTTP. • HTTP • Hyper Text Transfer Protocol (HTTP) is the communications protocol that enables WWW browsing (other protocols are ftp, telnet, etc.) • What is HTML? • Hyper Text Markup Language -- universally understood language giving authors the ability to publish tables, lists, photos, retrieve information via hypertext links, etc.

4. 2. HTML • Like in The Matrix, you can view HTML pages in two ways: • Their appearance on a Web browser -- colors, different text sizes, graphics. • "HTML Code" -- this is an example of the code that tells the browser what to do. <ul id="nav"> <li class="current"><div><a href="/">Home Page</a></div></li> <li><div><a href="/WORLD/">World</a></div></li> <li><div><a href="/US/">U.S.</a></div></li> <li><div><a href="/WEATHER/">Weather</a></div></li>

5. 2. HTML In HTML, a tag tells the browser what to do -- to change the appearance of text, to show a graphic, or to make a link to another page. The tags you write are not visible on the browser, but their effects are. Tags begin with the symbol "<" and end with ">". Tags usually come in pairs, one that begins an action and one that ends it. This tag: <I> starts printing italicized text. This tag: </I> stops the effect of a previous <I> tag. Note the "/". To italicize a word, you simply put <I> before the word and </I> after it: HTML Code Browser Display I want to <I>italicize</I> this! I want to italicize this!

6. 2. HTML Do I have to memorize a bunch of tags? Not really …

7. 2. HTML A Very Simple HTML page.

8. 3. Making a Webpage • What is an HTML document? • Just a text file (written in the language named HTML) • What do I need to create an HTML document? • Any Text Editor (e.g., notepad, wordpad, vi, etc.) • WYSIWYG Editor [What You See Is What You Get] (e.g., Microsoft FrontPage, Netscape Composer, Macromedia DreamWeaver, etc.) • Access to the Internet

9. 3. Making a Webpage How can my website be accessed via the Internet? For any site to be accessed via the Internet that site needs a URL (Uniform Resource Locator) basically the address for that specific site on the World Wide Web. What is my URL? Every Eden and RCI user has their own URL. If your NetID is jqdoe then your URL for Eden or RCI is: http://www.eden.rutgers.edu/~jqdoe http://www.rci.rutgers.edu/~jqdoe

10. 3a. SSH Client SSH (Secure Shell) is a protocol that can be used as a replacement for Telnet on UNIX and GNU/Linux systems. Unlike Telnet, which communicates to remote systems using plain text, SSH encrypts all communication going on between the client and the remote system creating a more secure environment on both the client and the remote system. Connect to eden/rci account

11. 3a. SSH Client New File Transfer Window Remote system directories/files To upload/download files, simply click and drag from desktop to window and vice versa … Local machine directories/files

12. 3a. SSH Client How do you know if your public_html directory exists? You need to “ls -al” (lists contents & files in working directory) and look for it. Creating the public_html directory: mkdir public_html Once created, proper directory permissions need to be set (all on the Internet can read, execute, but not edit your files): chmod 755 public_html

13. 3b. Editing the page(s) 2. Change directory to public_html cd public_html and create a file called index.html (it is this file that must be edited, with your favorite editor, to customize your Home Page) touch index.html 3. We will create and Edit the index.html file <HTML> <HEAD> <TITLE>My Home Page</TITLE> </HEAD> <BODY> </BODY> </HTML>

14. 3b. Editing the page(s) Using a Text Editor a. b. testing.html c.

15. 3b. Editing the page(s) Online result

16. 3b. Editing the page(s) Further edits <H3 ALIGN=CENTER>Personal Hot List</H3> <UL> <LI><A HREF="http://www.whitehouse.gov/">The White House</A> <LI><A HREF="http://www.rutgers.edu/">Rutgers</A> <LI><A HREF="Put another URL Here">Put the link description here</a> </UL> <ADDRESS> Matt (<A HREF="MAILTO:matt1@cep.rutgers.edu">matt1@cep.rutgers.edu</A>) </ADDRESS>

17. 3b. Editing the page(s) Online result

18. 3b. Editing the page(s) Using a WYSIWYG

19. Links/Previous Class Presentations • 2005 Class Presentations ( • http://marine.rutgers.edu/dmcs/ms552/2005/presentation.htm) • http://cep.rutgers.edu/~krasting/snowcover/ • 2000 Class Presentation ( • http://marine.rutgers.edu/cool/education/spring2000/classmain.html) • http://marine.rutgers.edu/cool/education/spring2000/lorit/projmain.html