1 / 27

WWW and HTML

WWW and HTML. Annoucement. Many people submitted the .vbp file and lost points Can resubmit the .frm file to my email, nanzhang@egr.msu.edu and get most points back. Deadline of Program 4 is extended to 5 PM today. I will hold office hour until 2:30PM today. Infrastructure of the Internet.

brad
Download Presentation

WWW and HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WWW and HTML

  2. Annoucement • Many people submitted the .vbp file and lost points • Can resubmit the .frm file to my email, nanzhang@egr.msu.edu and get most points back. • Deadline of Program 4 is extended to 5 PM today. • I will hold office hour until 2:30PM today.

  3. Infrastructure of the Internet

  4. Internet connection and telephone connection • Traditional telephone connection • Exclusive communication channels. • Internet connection • Sender: Digital data are separated into small packages and sent to the target computer. • Receiver: collect all the packages and assemble into original digital data.

  5. Infrastructure of Internet

  6. IP Address • Each computer connected to the internet has a unique address. • IP address is a 4 byte (32bits) number. • For example: 35.9.2.154 ->msu web server • 24,294,967,296 possible IP addresses. • Static IP: for computers that works all day long. • Dynamic IP: only assigning an IP address when computer is in use.

  7. Domain names • IP address is concise, but not for human. • 64.236.16.20 is much harder to remember than www.cnn.com • Domain names are for “important” servers in the internet, like www.msu.edu. • Domain names are stored in domain name server, which is a huge database. • Domain name is unique, and can be remaped to different IP addresses.

  8. Domain name structure • www.microsoft.com • .com .org .edu are top level domains, which specify the category of the domain name user. • Second level domain gives the entity’s name. This must be unique in the top level domain. • Low level domain gives the server’s name.

  9. What is WWW? • WWW – World Wide Web, which is a standard for organizing and deliver information through the internet. • HTML - HyperText Markup Language, which are public files on computers can be read by remote user • HTTP - HyperText Transfer Protocol • URL - Universal Resource Locator - is name of file on a remote computer

  10. Universal Resource Locator: Static http://www.msu.edu/~urquhar5/tour/active.html http:// identifies type of transfer /~urquhar5/tour/active.html File Location on Remote Computer This part is CasE SenSiTiVe. www.msu.edu Domain Name - name of remote computer

  11. Universal Resource Locator: Dynamic http://www.msu.edu/cgi-bin/redirect.cgi?q=LBS&site=Web http:// identifies type of transfer Folder name /cgi-bin/ Server program name: redirect.cgi Argument of the server program: ?q=LBS&site=Web www.msu.edu Domain Name - name of remote computer

  12. MSU Web Pages are Files in AFS Any person on the Web can browse to: http://www.msu.edu/~sparty/test.html MSU Web Server www.msu.edu User SPARTY’s Web Page in AFS: u:\msu\user\s\p\sparty\web\test.html Or p:\web\test.html

  13. Web Page Development Cycle EDIT and SAVE the file in your AFS p:\web\test.html TEST by BROWSING to the page http://www.msu.edu/~msunetid/test.html

  14. HTML File Structure <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>

  15. HTML Tags • Each opening HTML tag has a closing HTML tag that matches it. • <HTML> for begin a HTML file • </HTML> for ending a HTML file • <P> goes at beginning of paragraph • </P> goes at end of paragraph

  16. Browsing to Your Web Page • Browse to test.htmlwith Netscape Navigator or Internet Explorer. • The URL to this Web page is: http://www.msu.edu/~msunetid/test.html • Note: ~ Tilde before your MSU NetID • Replace msunetid with your MSU NetID • Includes the filename for your Web page

  17. Adding Text to Your HTML File <HTML> <HEAD> <TITLE>Day 6 Page</TITLE> </HEAD> <BODY> My name is your name My major is your major </BODY> </HTML>

  18. Web Page Development Cycle EDIT and SAVE the file in your AFS p:\web\test.html TEST by BROWSING to the page http://www.msu.edu/~msunetid/test.html

  19. Example of Tags • <P>Here is the paragraph about something</P><P>Here is the second paragraph</P> What it will look like: Here is the paragraph about something. Here is the second paragraph.

  20. Essential HTML Tags • <HTML> begins HTML document • <BODY> begins body of document • <H1>Here’s a header in big type</H1> • <P>Here’s a paragraph</P> • </BODY> ends body • </HTML> ends HTML document

  21. Browser Output of Page If you opened that page in Netscape Navigator, it would look like this: Here’s a header in big type Here’s a paragraph

  22. View Page Source • Using “View Page Source” allows you to see the HTML behind a page • When we get into advanced HTML pages, this can be really important for learning how someone did something • http://puffin.bird.audubon.org/

  23. Your personal web space • http://www.msu.edu/~nanzhang/index.html • Two steps: • Create a file named index.html • Use FTP to transfer a file named index.html into your web directory • If you omit the file name, web server will automatically return the index.html file by default. • http://www.msu.edu/~nanzhang/

  24. Web page authoring tools • Hacking the HTML file is difficult, so we would like to use some WYSIWYG (What you see is what you get) authoring tools. • Common tools • Netscape composer • Microsoft Front page • Macromedia Dreamweaver

  25. Netscape Composer • Netscape Composer allows WYSIWYG (what-you-see-is-what-you-get) editing of web pages • Controls similar to Microsoft word – font formatting, colors, etc. • Free software.

  26. Microsoft Front Page • All-in-One program. • Uses “proprietary tags” that can’t be read by some browsers (Netscape) • Uses non-standard HTML, style sheets, etc • Avoid it at all costs!

  27. Macromedia Dreamweaver • Principal program we will use in class • Pros • Best compatibility • Excellent Site Building Tool. • Allows organization of files, ftp, and WYSIWYG editing all-in-one • Cons • Commercial software. Expensive. • Free trial version available at www.macromedia.com. 20 days trial period.

More Related