Www and html
Download
1 / 27

WWW and HTML - PowerPoint PPT Presentation


  • 129 Views
  • Updated On :

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'WWW and HTML' - brad


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

Annoucement
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.



Internet connection and telephone connection
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.



Ip address
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
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
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
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
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


Universal resource locator dynamic
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


Msu web pages are files in afs
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
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 File Structure

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>


Html tags
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
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


Adding text to your html file
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 cycle1
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
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
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
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
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
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
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

  • 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
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
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.


ad