csci n241: fundamentals of web development copyright ©2006 department of computer &...

CSCI N241:CSCI N241: Fundamentals of Web Fundamentals of Web DevelopmentDevelopment

Copyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science

Introducing Web Introducing Web DevelopmentDevelopment

N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science

GoalsGoals

By the end of this unit, you should …By the end of this unit, you should …• … … understand how TCP/IP works.understand how TCP/IP works.• … … understand how we use HTML to understand how we use HTML to

develop the structure of web pages.develop the structure of web pages.• … … understand how we use CSS to understand how we use CSS to

modify the format of web pages.modify the format of web pages.• … … understand some of the basic Unix understand some of the basic Unix

commands for basic file management.commands for basic file management.


When Computers When Computers CommunicateCommunicate

• Computers use Computers use protocols protocols to to communicate. communicate. A A protocol is an protocol is an agreement by which agreement by which two or more two or more computers can computers can communicatecommunicate..

• Transfer Control Transfer Control Protocol/Internet Protocol/Internet ProtocolProtocol is the is the underlying protocol for underlying protocol for the Internet.the Internet.


How TCP/IP WorksHow TCP/IP Works

1) Transfer Control 1) Transfer Control Protocol (TCP) Protocol (TCP) breaks data into breaks data into small pieces of no small pieces of no bigger than 1500 bigger than 1500 characters each. characters each. These “pieces” are These “pieces” are called packets. called packets.

101010101001101010011010011010210101010101011010111101010111011101110110110000101110110101010101001110101001010111101000

101010101001101010011010011010210101010101011010111101010111011101110110110000101110110101010101001110101001010111101000

101010101001101010011010011

101010101001101010011010011

101010101001101010011010011

101010101001101010011010011

101010101001101010011010011

101010101001101010011010011



2) Each packet is 2) Each packet is inserted into inserted into different Internet different Internet Protocol (IP) Protocol (IP) “envelopes.” Each “envelopes.” Each contains the contains the address of the address of the intended recipient intended recipient and has the exact and has the exact same header as all same header as all other envelopes.other envelopes.

101010101001101010011010011

101010101001101010011010011

101010101001101010011010011

101010101001101010011010011

101010101001101010011010011

101010101001101010011010011



• A router receives A router receives the packets and the packets and then determines then determines the most efficient the most efficient way to send the way to send the packets to the packets to the recipient.recipient.

• After traveling After traveling along a series of along a series of routers, the routers, the packets arrive at packets arrive at their destination.their destination.



• Upon arrival at Upon arrival at their destination, their destination, TCP checks the TCP checks the data for corruption data for corruption against the header against the header included in each included in each packet. If TCP packet. If TCP finds a bad packet, finds a bad packet, it sends a request it sends a request that the packet be that the packet be re-transmitted. re-transmitted.


IP AddressesIP Addresses

• Since computers process numbers more Since computers process numbers more efficiently and quickly than characters, efficiently and quickly than characters, each machine directly connected to the each machine directly connected to the Internet is given an IP Address.Internet is given an IP Address.

• An IP address is a 32-bit address An IP address is a 32-bit address comprised of four 8-bit numbers (2comprised of four 8-bit numbers (288) ) separated by periods. Each of the four separated by periods. Each of the four numbers has a value between 0 and 255.numbers has a value between 0 and 255.


IP AddressesIP Addresses

• Example of an IP Address:Example of an IP Address:

http://134.68.140.206/http://134.68.140.206/The IP Address of the

Computer Science Department’s Web Server


IP Addresses vs. URLsIP Addresses vs. URLs

• While numeric IP addresses work very While numeric IP addresses work very well for computers, most humans find well for computers, most humans find it difficult to remember long patterns it difficult to remember long patterns of numbers.of numbers.

• Instead, humans identify computers Instead, humans identify computers using Uniform Resource Locators using Uniform Resource Locators (URLs), a.k.a. “Web Addresses”.(URLs), a.k.a. “Web Addresses”.


IP Addresses vs. URLsIP Addresses vs. URLs

• When a human types When a human types a URL into a browser, a URL into a browser, the request is sent to the request is sent to a a Domain Name Domain Name ServerServer (DNS), which (DNS), which then translates the then translates the URL to an IP address URL to an IP address understood by understood by computers.computers.

• The DNS acts like a The DNS acts like a phonebook.phonebook.


Anatomy of a URLAnatomy of a URL

http://www.cs.iupui.edu/index.htmlhttp://www.cs.iupui.edu/index.html

file name

domainname

sub-subdomain

machinename

subdomain

protocol


Accessing a Web PageAccessing a Web Page

• We store web pages on a We store web pages on a Web Web ServerServer, which allows the world , which allows the world access to those web pages.access to those web pages.

• The Web Server uses The Web Server uses TCP/IPTCP/IP to to communicate with the communicate with the computers of the world.computers of the world.


The Web ServerThe Web Server

Web ServerWeb Client

“Send me ‘art.html’”

‘art.html’


The Web BrowserThe Web Browser

• We use We use HTMLHTML to develop web to develop web pages. pages.

• A A web browserweb browser is a type of is a type of software that interprets the software that interprets the instructions coded in HTML instructions coded in HTML elements. Those elements tell the elements. Those elements tell the browser how to display a web page.browser how to display a web page.


Breaking Down HTMLBreaking Down HTML

HTMLHTML

Hypertext – The “HT” in HTML,hypertext allows us to create pagesthat link to other web resources (more on that later …)

Markup Language – The “ML” in HTML, markup language comprises the instructions a browser uses to display a web page.


Introducing HTMLIntroducing HTML

<html> <head> <title>Head First Lounge</title> </head> <body>

<h1>Welcome to the Head First Lounge</h1><img src="images/drinks.gif"><p> Join us any evening for refreshing exlixirs, conversation and maybe a game or two of

A

B

CD

Open the file:http://www.cs.iupui.edu/~rmolnar/n241/lectures/n241IntroducingWebDevelopment_examples/HeadFirstLounge/lounge.html


Introducing HTMLIntroducing HTML

<em>Dance Dance Revolution</em>. Wireless access is always provided; BYOWS

(Bring your own web server).</p>

<h2>Directions</h2><p>You'll find us right in the center of downtown

Webville. Come join us!</p> </body></html>

F

G

E


ElementsElements

• ElementsElements are the are the coded instructions coded instructions that tell browsers that tell browsers how to display a how to display a web page.web page.

• Elements consist of Elements consist of opening & closing opening & closing tagstags, their , their contentcontent and and attributesattributes..


TagsTags

• Tags are words and characters enclosed Tags are words and characters enclosed in angle brackets that represent an in angle brackets that represent an element. We categorize tags two ways, element. We categorize tags two ways, based on syntax:based on syntax:

– Paired Tags Paired Tags – require an opening tag and a closing – require an opening tag and a closing tag (we close a tag using tag (we close a tag using // and the name of the tag): and the name of the tag):<p>Some Text Here</p><p>Some Text Here</p>

– Stand-Alone TagsStand-Alone Tags – require no closing tag, but we – require no closing tag, but we close them using a space and an close them using a space and an / / (strict XHTML):(strict XHTML):<br />, <img /><br />, <img />


Block-Level vs. Inline Block-Level vs. Inline ElementsElements

• We also classify elements by how We also classify elements by how they give instructions to a web they give instructions to a web browser:browser:

• Block-Level ElementsBlock-Level Elements give a give a web page its structure.web page its structure.

• Inline ElementsInline Elements describe the describe the text & images that appear in a text & images that appear in a page.page.


AttributesAttributes

• Also called properties, Also called properties, attributesattributes modify the way in modify the way in which a tag works. Sometimes which a tag works. Sometimes elements require attributes, elements require attributes, sometimes attributes are sometimes attributes are optional:optional:<img src = “images/bat.jpg” /><img src = “images/bat.jpg” />

Attribute


Let’s Try One …Let’s Try One …

• Create a directory Create a directory called called starbuzzstarbuzz on your Desktop.on your Desktop.

• Save copies of the Save copies of the files files starbuzz.txtstarbuzz.txt & & cupofjoe.jpgcupofjoe.jpg from Oncourse to from Oncourse to that directory …that directory …


Adding a LinkAdding a Link

• Let’s add a link near the bottom of Let’s add a link near the bottom of the page for our mission statement:the page for our mission statement:<p><p>

<em><em><a href="mission.html">Click <a href="mission.html">Click

here here to see our Mission to see our Mission Statement.</a>Statement.</a>

</em></em></p></p>


The Anchor ElementThe Anchor Element• We can use the anchor element to create We can use the anchor element to create

links to websites. It consists of an opening links to websites. It consists of an opening and closing tag and it requires the and closing tag and it requires the hrefhref attribute.attribute.

• We would use We would use relativerelative paths to link to paths to link to documents in your own directory structure:documents in your own directory structure:<a href=“fruitfly.html”>Click Here</a><a href=“fruitfly.html”>Click Here</a>

• We would use We would use URLs URLs to link to external web to link to external web resources:resources:<a href=“http://www.google.com/”><a href=“http://www.google.com/”>Search the Web!</a>Search the Web!</a>

HTML CommentsHTML Comments

• Comments are special tags, which the web Comments are special tags, which the web browser ignores, that programmers use to browser ignores, that programmers use to add notes to their script. The syntax for a add notes to their script. The syntax for a comment, which can span multiple lines, comment, which can span multiple lines, looks like this:looks like this:

• Another example:Another example:-->


Documentation CommentsDocumentation Comments

• In addition to commenting your code, In addition to commenting your code, it is a good idea to add it is a good idea to add Documentation Comments Documentation Comments near near the top of your HTML script.the top of your HTML script.

• In your documentation comment, In your documentation comment, include information about the author, include information about the author, creation date, purpose, modification creation date, purpose, modification date & modification history.date & modification history.

Documentation Comment Documentation Comment ExampleExample

-->


But the Display Is A Little But the Display Is A Little Boring, Huh?Boring, Huh?

• We added HTML We added HTML elements to the elements to the text, but the result text, but the result was little plain & was little plain & boring! boring!

• Remember Remember HTML HTML is all about is all about structure, NOT structure, NOT style!style!


The World Wide Web The World Wide Web ConsortiumConsortium

• The World Wide Web The World Wide Web Consortium (the W3C Consortium (the W3C – – http://www.w3.org/http://www.w3.org/) ) releases releases recommendations for recommendations for creating web content. creating web content.

• The current The current recommendations for recommendations for creating web sites creating web sites revolve around the revolve around the idea of idea of layerslayers … …


The Layers of Web The Layers of Web DevelopmentDevelopment

• The Structural LayerThe Structural Layer includes XHTML & includes XHTML & XML; describe how to structure text & XML; describe how to structure text & media on a page.media on a page.

• The Presentation LayerThe Presentation Layer includes includes Cascading Style Sheets (CSS); describe how Cascading Style Sheets (CSS); describe how to format the display of text & media.to format the display of text & media.

• The Behavioral LayerThe Behavioral Layer includes the includes the Document Object Model (DOM) and Document Object Model (DOM) and scripting languages like JavaScript; describe scripting languages like JavaScript; describe how to add interactivity to websites.how to add interactivity to websites.


Introducing Some StyleIntroducing Some Style• Add the following to Add the following to starbuzz.htmlstarbuzz.html, after the , after the </title></title>::<style type = "text/css"><style type = "text/css">bodybody{{

background-color: #D2B48C;background-color: #D2B48C;color: #000080;color: #000080;margin-left: 20%;margin-left: 20%;margin-right: 20%;margin-right: 20%;border: 1px dotted gray;border: 1px dotted gray;padding: 10px 10px 10px 10px;padding: 10px 10px 10px 10px;font-family: sans-serif;font-family: sans-serif;

}} Continued …Continued …


Introducing Some StyleIntroducing Some Style

#coffeeImage#coffeeImage

{{

text-align: center;text-align: center;

}}

</style></style>


Comparing HTML & CSSComparing HTML & CSS

• HTMLHTML– Describes Describes

StructureStructure– Syntax includes Syntax includes

elements (tags & elements (tags & attributes)attributes)

– Case-sensitive (use Case-sensitive (use lowercase)lowercase)

• CSSCSS– Describes Describes FormatFormat– Syntax includes Syntax includes

style rules style rules (selectors & (selectors & declarations)declarations)

– Case-sensitive (use Case-sensitive (use lowercase)lowercase)


Good File ManagementGood File Management

• A good rule of thumb is to separate A good rule of thumb is to separate your files by type. For instance, put your files by type. For instance, put all HTML files in the main folder and all HTML files in the main folder and then put your image files in a then put your image files in a subfolder called – go figure – images! subfolder called – go figure – images!

• In your In your starbuzzstarbuzz folder on your folder on your Desktop, create a subfolder called Desktop, create a subfolder called imagesimages. Move the file . Move the file cupofjoe.jpgcupofjoe.jpg to to imagesimages..


Uploading Your PagesUploading Your Pages

• Before the world Before the world can view your can view your masterpiece, we masterpiece, we need to upload your need to upload your page to a server. page to a server.

• We'll use the CS We'll use the CS Department's Department's Pegasus Pegasus server, a server, a Unix server.Unix server.

• Let's learn a little Let's learn a little about Unix …about Unix …


Unix is NOT that Scary!Unix is NOT that Scary!


Introducing UnixIntroducing Unix

• Unix was originally Unix was originally developed by Bell developed by Bell Labs in 1969. Labs in 1969.

• Because of its file-Because of its file-sharing and sharing and process-sharing process-sharing abilities, Unix is abilities, Unix is ideal for web ideal for web development.development.


Unix CommandsUnix Commands

• We issue commands from a Unix We issue commands from a Unix Command Prompt:Command Prompt:pegasus{jstudent}/:pegasus{jstudent}/:

• Unix commands are case-Unix commands are case-sensitive and use lowercase!sensitive and use lowercase!


Command SyntaxCommand Syntax

• Case sensitive! All commands Case sensitive! All commands are lowercaseare lowercase

• General Format:General Format:command [switches] arg1 arg2command [switches] arg1 arg2

Command

Switch

Arguments


Let Create Our Web DirectoryLet Create Our Web Directory

• Open your Pegasus account and Open your Pegasus account and issue the following command from issue the following command from your Pegasus prompt:your Pegasus prompt:mkdir public_htmlmkdir public_html

• What does this command do? Well, What does this command do? Well, we've created a special directory, we've created a special directory, public_htmlpublic_html, in which you will store , in which you will store all of your web workall of your web work..


More on More on public_htmlpublic_html

• public_html public_html acts as the default acts as the default directory for web work. To visit directory for web work. To visit your own web work using a web your own web work using a web browser, point to:browser, point to:http://www.cs.iupui.edu/~username/http://www.cs.iupui.edu/~username/

• But wait! We forgot to upload our But wait! We forgot to upload our file and give proper permissions!file and give proper permissions!


Uploading Your FileUploading Your File• Use Secure File Transfer (SSH) to upload your Use Secure File Transfer (SSH) to upload your

entire entire starbuzzstarbuzz folder from your Desktop to folder from your Desktop to public_htmlpublic_html..


Okay, Let's Make it VisibleOkay, Let's Make it Visible

• First use the change directory First use the change directory command (command (cdcd) at your Pegasus ) at your Pegasus prompt to change to the prompt to change to the public_htmlpublic_html directory: directory:cd public_htmlcd public_html

• Now, let's talk about Now, let's talk about permissions …permissions …


Viewing PermissionsViewing Permissions

• At your Pegasus prompt, use the long At your Pegasus prompt, use the long list command to view permissions & list command to view permissions & a listing for the current directory:a listing for the current directory:ls –lls –l

• You should see the contents of You should see the contents of public_htmlpublic_html and a number of and a number of important details, including the important details, including the permission schemepermission scheme..


Unix PermissionsUnix Permissions

• We find the permission scheme We find the permission scheme at the beginning of a long at the beginning of a long directory listing (directory listing (ls –lls –l):):

dd rwxrwx r-xr-x r-xr-x

Dir

ecto

ryD

irecto

ry?? O

wn

er’

sO

wn

er’

s

Perm

issio

nP

erm

issio

nss G

rou

p’s

Gro

up

’s

Perm

issio

nP

erm

issio

nss W

orl

d’s

Worl

d’s

P

erm

issio

nP

erm

issio

nss


• The first character represents The first character represents whether the listing is a directory. If whether the listing is a directory. If it is a directory, a “d” will appear it is a directory, a “d” will appear in the first character; otherwise, in the first character; otherwise, you should normally see a dash (-).you should normally see a dash (-).

dd rwx rwx r-xr-x r-xr-x




• The remaining nine characters The remaining nine characters are divided into three triplets:are divided into three triplets:– The first triplet represents the The first triplet represents the owner’s owner’s

permissionspermissions..– The second is the The second is the group’s group’s

permissionspermissions..– The third triplet represents the The third triplet represents the world’s world’s

permissionspermissions..


Read PermissionRead Permission

• 11stst position in a triplet: position in a triplet: rr stands stands for for RRead; grants permission to ead; grants permission to view the contents of a file or view the contents of a file or directory (Value is ‘r’ or ‘-’).directory (Value is ‘r’ or ‘-’).

rr w x w x


Write PermissionWrite Permission

• 22ndnd position in a triplet: position in a triplet: ww stands stands for for WWrite; grants permission to rite; grants permission to modify a file or the contents of a modify a file or the contents of a directory (Value is ‘w’ or ‘-’).directory (Value is ‘w’ or ‘-’).

r r ww x x


Execute PermissionExecute Permission

• 33rd rd position in a triplet: position in a triplet: xx stands stands for efor eXXecute; grants permission to ecute; grants permission to run an application or open a run an application or open a directory (Value is ‘x’ or ‘-’).directory (Value is ‘x’ or ‘-’).

r w r w xx



• When we change permissions, we When we change permissions, we must first decide what number will must first decide what number will represent the permissions for a represent the permissions for a triplet. We can do this by triplet. We can do this by determining whether or not a the determining whether or not a the permissions in a triplet are on or off.permissions in a triplet are on or off.

• If turned on, a permission gets a If turned on, a permission gets a value of 1; if turned off, it gets a value of 1; if turned off, it gets a value of 0.value of 0.



• After deciding whether the three After deciding whether the three permissions in a triplet are on or permissions in a triplet are on or off, we will have a binary number off, we will have a binary number between between 000000 and and 111111..

• We can convert the binary We can convert the binary number to its decimal/octal number to its decimal/octal equivalentequivalent



PermissionPermissionss

BinaryBinary Dec/OctDec/Oct

- - -- - - 0 0 00 0 0 00

- - x- - x 0 0 10 0 1 11

- w -- w - 0 1 00 1 0 22

- w x- w x 0 1 10 1 1 33



PermissionPermissionss

BinaryBinary Dec/OctDec/Oct

r - -r - - 1 0 01 0 0 44

r – xr – x 1 0 11 0 1 55

r w -r w - 1 1 01 1 0 66

r w xr w x 1 1 11 1 1 77


The chmod CommandThe chmod Command

• Once you’ve established the octal Once you’ve established the octal number representing the permission number representing the permission for each triplet, you can then use for each triplet, you can then use the change mode (the change mode (chmodchmod) command ) command to give a directory or file proper to give a directory or file proper permissionspermissions


chmodchmod Syntax & Example Syntax & Example

• Syntax:Syntax:chmod permissionMask file/dirchmod permissionMask file/dir

• Example:Example:chmod 755 public_htmlchmod 755 public_html


Updating Updating starbuzz starbuzz PermissionsPermissions

• What permissions do we want to give What permissions do we want to give our starbuzz & images directories?our starbuzz & images directories?chmod _________ starbuzzchmod _________ starbuzzchmod _________ imageschmod _________ images

• What about the files?What about the files?chmod _________ starbuzz.htmlchmod _________ starbuzz.html


Use the Force, Luke!Use the Force, Luke!


Suggested Further ReadingSuggested Further Reading

• ““Unix is Four-Letter Word”:Unix is Four-Letter Word”:http://unix.t-a-y-l-o-r.comhttp://unix.t-a-y-l-o-r.com//


Questions?Questions?


ReferencesReferences

• Freeman, Elisabeth and Eric Freeman, Elisabeth and Eric Freeman. Freeman. Head First HTML with CSS Head First HTML with CSS & XHTML& XHTML. Sebastopol, CA: 2006. . Sebastopol, CA: 2006.

• Niederst Robbins, Jennifer. Niederst Robbins, Jennifer. Web Web Design in a Nutshell: A Desktop Design in a Nutshell: A Desktop Quick ReferenceQuick Reference. Sebastopol, CA: . Sebastopol, CA: 2006. 2006.

• Gosselin, Dan. Gosselin, Dan. XHTML XHTML ComprehensiveComprehensive. Boston: 2003.. Boston: 2003.

csci n241: fundamentals of web development copyright ©2006 department of computer &...

Documents

web development slide

structure of web pages

format of web pages

tcpip works

underlying protocol

csci n241

bad packet

basic unix commands