Download presentation
Presentation is loading. Please wait.
1
WWW and HTML
2
Annoucement n Many people submitted the.vbp file and lost points n Can resubmit the.frm file to my email, nanzhang@egr.msu.edu and get most points back. n Deadline of Program 4 is extended to 5 PM today. n I will hold office hour until 2:30PM today.
3
Infrastructure of the Internet
4
Internet connection and telephone connection n Traditional telephone connection –Exclusive communication channels. n 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 n Each computer connected to the internet has a unique address. n 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 n IP address is concise, but not for human. n 64.236.16.20 is much harder to remember than www.cnn.com www.cnn.com n Domain names are for “important” servers in the internet, like www.msu.edu. www.msu.edu n Domain names are stored in domain name server, which is a huge database. n Domain name is unique, and can be remaped to different IP addresses.
8
Domain name structure n www.microsoft.com n.com.org.edu are top level domains, which specify the category of the domain name user. n Second level domain gives the entity’s name. This must be unique in the top level domain. n Low level domain gives the server’s name.
9
What is WWW? n WWW – World Wide Web, which is a standard for organizing and deliver information through the internet. n HTML - HyperText Markup Language, which are public files on computers can be read by remote user n HTTP - HyperText Transfer Protocol n 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 www.msu.edu Domain Name - name of remote computer http:// identifies type of transfer /~urquhar5/tour/active.html File Location on Remote Computer This part is CasE SenSiTiVe.
11
Universal Resource Locator: Dynamic http://www.msu.edu/cgi-bin/redirect.cgi?q=LBS&site=Web www.msu.edu Domain Name - name of remote computer http:// identifies type of transfer Folder name /cgi-bin/ Server program name: redirect.cgi Argument of the server program: ?q=LBS&site=Web
12
MSU Web Pages are Files in AFS User SPARTY’s Web Page in AFS: u:\msu\user\s\p\sparty\web\test.html Or p:\web\test.html MSU Web Server www.msu.edu Any person on the Web can browse to: http://www.msu.edu/~sparty/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 n Each opening HTML tag has a closing HTML tag that matches it. – for begin a HTML file – for ending a HTML file – goes at beginning of paragraph – goes at end of paragraph
16
Browsing to Your Web Page n Browse to test.html with Netscape Navigator or Internet Explorer. –The URL to this Web page is: http://www.msu.edu/~msunetid/test.h tml n Note: ~ Tilde before your MSU NetID n Replace msunetid with your MSU NetID n Includes the filename for your Web page
17
Adding Text to Your HTML File <HTML><HEAD> Day 6 Page Day 6 Page </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 n Here is the paragraph about something Here is the second paragraph n Here is the paragraph about something Here is the second paragraph What it will look like: Here is the paragraph about something. Here is the second paragraph.
20
Essential HTML Tags n begins HTML document n begins body of document n Here’s a header in big type n Here’s a header in big type n Here’s a paragraph n Here’s a paragraph n ends body n 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 n Using “View Page Source” allows you to see the HTML behind a page n When we get into advanced HTML pages, this can be really important for learning how someone did something n http://puffin.bird.audubon.org/ http://puffin.bird.audubon.org/
23
Your personal web space n http://www.msu.edu/~nanzhang/index.html n Two steps: –Create a file named index.html –Use FTP to transfer a file named index.html into your web directory n 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 n Hacking the HTML file is difficult, so we would like to use some WYSIWYG (What you see is what you get) authoring tools. n Common tools –Netscape composer –Microsoft Front page –Macromedia Dreamweaver
25
Netscape Composer n Netscape Composer allows WYSIWYG (what-you-see-is-what-you-get) editing of web pages n Controls similar to Microsoft word – font formatting, colors, etc. n Free software.
26
Microsoft Front Page n All-in-One program. n Uses “proprietary tags” that can’t be read by some browsers (Netscape) n Uses non-standard HTML, style sheets, etc n Avoid it at all costs!
27
Macromedia Dreamweaver n Principal program we will use in class n Pros –Best compatibility –Excellent Site Building Tool. –Allows organization of files, ftp, and WYSIWYG editing all-in-one n Cons –Commercial software. Expensive. n Free trial version available at www.macromedia.com. 20 days trial period. www.macromedia.com
Similar presentations
