WWW and HTML
Annoucement n Many people submitted the.vbp file and lost points n Can resubmit the.frm file to my , 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.
Infrastructure of the Internet
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.
Infrastructure of Internet
IP Address n Each computer connected to the internet has a unique address. n IP address is a 4 byte (32bits) number. –For example: >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.
Domain names n IP address is concise, but not for human. n is much harder to remember than n Domain names are for “important” servers in the internet, like 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.
Domain name structure n 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.
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
Universal Resource Locator: Static Domain Name - name of remote computer identifies type of transfer /~urquhar5/tour/active.html File Location on Remote Computer This part is CasE SenSiTiVe.
Universal Resource Locator: Dynamic Domain Name - name of remote computer identifies type of transfer Folder name /cgi-bin/ Server program name: redirect.cgi Argument of the server program: ?q=LBS&site=Web
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 Any person on the Web can browse to:
Web Page Development Cycle EDIT and SAVE the file in your AFS p:\web\test.html TEST by BROWSING to the page
HTML File Structure <HTML><HEAD></HEAD><BODY></BODY></HTML>
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
Browsing to Your Web Page n Browse to test.html with Netscape Navigator or Internet Explorer. –The URL to this Web page is: tml n Note: ~ Tilde before your MSU NetID n Replace msunetid with your MSU NetID n Includes the filename for your Web page
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>
Web Page Development Cycle EDIT and SAVE the file in your AFS p:\web\test.html TEST by BROWSING to the page
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.
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
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
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
Your personal web space n 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. –
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
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.
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!
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 20 days trial period.