Upload
ann-singleton
View
216
Download
1
Tags:
Embed Size (px)
Citation preview
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.
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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.
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
How TCP/IP WorksHow TCP/IP Works
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
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
How TCP/IP WorksHow TCP/IP Works
• 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.
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
How TCP/IP WorksHow TCP/IP Works
• 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.
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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.
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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”.
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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.
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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.
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
The Web ServerThe Web Server
Web ServerWeb Client
“Send me ‘art.html’”
‘art.html’
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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.
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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.
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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..
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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 />
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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.
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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 …
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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>
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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>
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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:<!-- This is a comment --><!-- This is a comment -->
• Another example:Another example:<!--<!-- This is another This is another example of a comment. example of a comment.-->-->
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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.
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
Documentation Comment Documentation Comment ExampleExample
<!--<!-- TITLE: My BiographyTITLE: My Biography AUTHOR: Jane StudentAUTHOR: Jane Student PURPOSE: To publish my PURPOSE: To publish my biography to the web.biography to the web. CREATED: 04.15.2002CREATED: 04.15.2002 LAST MODIFIED: 08.15.2005LAST MODIFIED: 08.15.2005 LAST MODIFIED BY: JASLAST MODIFIED BY: JAS MODIFICATION HISTORY:MODIFICATION HISTORY: 04.15.2002 – Created Project (JAS)04.15.2002 – Created Project (JAS) 05.27.2002 – Updated site using CSS (JAS)05.27.2002 – Updated site using CSS (JAS) 08.15.2005 – Re-wrote site use XHTML (JAS)08.15.2005 – Re-wrote site use XHTML (JAS)-->-->
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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!
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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 … …
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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.
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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 …
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
Introducing Some StyleIntroducing Some Style
#coffeeImage#coffeeImage
{{
text-align: center;text-align: center;
}}
</style></style>
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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)
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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..
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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 …
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
Unix is NOT that Scary!Unix is NOT that Scary!
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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.
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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!
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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..
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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!
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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..
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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 …
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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..
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
• 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
Unix PermissionsUnix Permissions
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
Unix PermissionsUnix Permissions
• 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..
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
Unix PermissionsUnix Permissions
• 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.
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
Unix PermissionsUnix Permissions
• 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
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
Unix PermissionsUnix Permissions
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
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
Unix PermissionsUnix Permissions
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
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
chmodchmod Syntax & Example Syntax & Example
• Syntax:Syntax:chmod permissionMask file/dirchmod permissionMask file/dir
• Example:Example:chmod 755 public_htmlchmod 755 public_html
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
Use the Force, Luke!Use the Force, Luke!
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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//
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
Questions?Questions?
N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science
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.