WWW and HTML
Download
Report
Transcript WWW and HTML
WWW and HTML
Annoucement
Many people submitted the .vbp file and lost
points
Can resubmit the .frm file to my email,
[email protected] 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
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.
Infrastructure of Internet
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.
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.
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.
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
Universal Resource Locator: Static
http://www.msu.edu/~urquhar5/tour/active.html
http://
/~urquhar5/tour/active.html
identifies type
of transfer
File Location on Remote Computer
This part is CasE SenSiTiVe.
www.msu.edu
Domain Name name of remote computer
Universal Resource Locator:
Dynamic
http://www.msu.edu/cgi-bin/redirect.cgi?q=LBS&site=Web
http://
identifies type
of transfer
www.msu.edu
Folder name /cgi-bin/
Server program name:
redirect.cgi
Argument of the server
Domain Name program: ?q=LBS&site=Web
name of remote computer
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
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
HTML File Structure
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
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
Browsing to Your Web Page
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
Note:
~
Tilde before your MSU NetID
Replace msunetid with your MSU NetID
Includes the filename for your Web page
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>
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
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.
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
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
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/
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/
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
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.
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!
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.