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
Introduction Tim Berners-Lee invented the World Wide Web (1989), an internet-based initiative for global information sharing. Internet (Upper case I) -- collection of inter-connected networks (actual cables and their common way of behavior) that connects tens of thousands of independent networks (picture a fishing net, where each strand in the net is an additional connection). 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 …
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.
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>
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!
Do I have to memorize a bunch of tags? Not really … 2. HTML Do I have to memorize a bunch of tags? Not really … Tag HTML Code Example Browser Display Example <B> (Bold) I want to <B>emphasize</B> this! I want to emphasize this! <I> (Italic) I want to <I>italicize</I> this! I want to italicize this! <U> (Underline) I want to <U>underline</U> this! I want to underline this!
This is my message to the world! </BODY> </HTML> A Very Simple HTML page. HTML Code Browser Display <HTML> <HEAD> <TITLE>This is my page title!</TITLE> </HEAD> <BODY> This is my message to the world! </BODY> </HTML>
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
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
Connect to eden/rci account 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
New File Transfer Window 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
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
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>
3b. Editing the page(s) Using a Text Editor a. b. testing.html c.
3b. Editing the page(s) Online result
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>
3b. Editing the page(s) Online result
3b. Editing the page(s) Using a WYSIWYG
Links/Previous 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