Powerpoint intro to web develpment
Download
Report
Transcript Powerpoint intro to web develpment
Introducing Web Development
CSCI N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Goals
By the end of this unit, you should …
• … understand how TCP/IP works.
• … understand how we use HTML to
develop the structure of web pages.
• … understand how we use CSS to modify
the format of web pages.
• … understand some of the basic Unix
commands for basic file management.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
When Computers Communicate
• Computers use protocols
to communicate. A
protocol is an agreement
by which two or more
computers can
communicate.
• Transfer Control
Protocol/Internet
Protocol is the
underlying protocol for
the Internet.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
How TCP/IP Works
1) Transfer Control
Protocol (TCP)
breaks data into
small pieces of no
bigger than 1500
characters each.
These “pieces” are
called packets.
101010101001
101010011010
011010210101
010101011010
111101010111
011101110110
110000101110
110101010101
001110101001
010111101000
101010101
001101010
011010011
101010101
001101010
011010011
101010101
001101010
011010011
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
How TCP/IP Works
101010101
001101010
011010011
101010101
001101010
011010011
101010101
001101010
011010011
2) Each packet is
inserted into
different Internet
Protocol (IP)
“envelopes.” Each
contains the address
of the intended
recipient and has
the exact same
header as all other
envelopes.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
How TCP/IP Works
• A router receives
the packets and then
determines the most
efficient way to
send the packets to
the recipient.
• After traveling along
a series of routers,
the packets arrive
at their destination.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
How TCP/IP Works
• Upon arrival at their
destination, TCP
checks the data for
corruption against
the header included
in each packet. If
TCP finds a bad
packet, it sends a
request that the
packet be retransmitted.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
IP Addresses
• Since computers process numbers more
efficiently and quickly than characters,
each machine directly connected to the
Internet is given an IP Address.
• An IP address is a 32-bit address
comprised of four 8-bit numbers (28)
separated by periods. Each of the four
numbers has a value between 0 and 255.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
IP Addresses
• Example of an IP Address:
http://134.68.140.206/
The IP Address of the
Computer Science Department’s Web Server
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
IP Addresses vs. URLs
• While numeric IP addresses work very
well for computers, most humans find it
difficult to remember long patterns of
numbers.
• Instead, humans identify computers
using Uniform Resource Locators (URLs),
a.k.a. “Web Addresses”.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
IP Addresses vs. URLs
• When a human types a
URL into a browser, the
request is sent to a
Domain Name Server
(DNS), which then
translates the URL to an
IP address understood
by computers.
• The DNS acts like a
phonebook.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Anatomy of a URL
http://www.cs.iupui.edu/index.html
protocol
sub-sub
domain
machine
name
sub
domain
domain
name
file name
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Accessing a Web Page
• We store web pages on a Web
Server, which allows the world
access to those web pages.
• The Web Server uses TCP/IP to
communicate with the computers of
the world.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
The Web Server
“Send me ‘art.html’”
Web Server
‘art.html’
Web Client
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
The Web Browser
• We use HTML to develop web
pages.
• A web browser is a type of
software that interprets the
instructions coded in HTML
elements. Those elements tell the
browser how to display a web page.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Breaking Down HTML
HTML
Hypertext – The “HT” in HTML,
hypertext allows us to create pages
that 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 Development
Copyright ©2006 Department of Computer & Information Science
Introducing HTML
<html>
<head>
<title>Head First Lounge</title> A
</head>
<body>
<h1>Welcome to the Head First Lounge</h1> B
<img src="images/drinks.gif"> C
D <p>
Join us any evening for refreshing exlixirs,
conversation and maybe a game or two of
Open the file:
http://www.cs.iupui.edu/~rmolnar/n241/lectures/
n241IntroducingWebDevelopment_examples/HeadFirstLounge/lounge.html
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Introducing HTML
E <em>Dance Dance Revolution</em>.
Wireless access is always provided; BYOWS
(Bring your own web server).
</p>
<h2>Directions</h2> F
<p>You'll find us right in the center of downtown
G Webville. Come join us!</p>
</body>
</html>
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Elements
• Elements are the
coded instructions
that tell browsers
how to display a web
page.
• Elements consist of
opening & closing
tags, their content
and attributes.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Tags
•
–
–
Tags are words and characters enclosed in
angle brackets that represent an element.
We categorize tags two ways, based on
syntax:
Paired Tags – require an opening tag and a closing tag (we
close a tag using / and the name of the tag):
<p>Some Text Here</p>
Stand-Alone Tags – require no closing tag, but we close
them using a space and an / (strict XHTML):
<br />, <img />
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Block-Level vs. Inline Elements
• We also classify elements by how
they give instructions to a web
browser:
• Block-Level Elements give a web
page its structure.
• Inline Elements describe the text
& images that appear in a page.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Attributes
• Also called properties, attributes
modify the way in which a tag
works. Sometimes elements require
attributes, sometimes attributes
are optional:
<img src = “images/bat.jpg” />
Attribute
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Let’s Try One …
• Create a directory
called starbuzz on
your Desktop.
• Save copies of the
files starbuzz.txt
& cupofjoe.jpg
from Oncourse to
that directory …
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Adding a Link
• Let’s add a link near the bottom of the
page for our mission statement:
<p>
<em>
<a href="mission.html">Click here
to see our Mission
Statement.</a>
</em>
</p>
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
The Anchor Element
• We can use the anchor element to create links to
websites. It consists of an opening and closing tag
and it requires the href attribute.
• We would use relative paths to link to documents
in your own directory structure:
<a href=“fruitfly.html”>Click Here</a>
• We would use URLs to link to external web
resources:
<a href=“http://www.google.com/”>
Search the Web!</a>
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
HTML Comments
• Comments are special tags, which the web
browser ignores, that programmers use to
add notes to their script. The syntax for a
comment, which can span multiple lines, looks
like this:
<!-- This is a comment -->
• Another example:
<!-This is another
example of a comment.
-->
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Documentation Comments
• In addition to commenting your code, it
is a good idea to add Documentation
Comments near the top of your HTML
script.
• In your documentation comment, include
information about the author, creation
date, purpose, modification date &
modification history.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Documentation Comment Example
<!-TITLE: My Biography
AUTHOR: Jane Student
PURPOSE: To publish my
biography to the web.
CREATED: 04.15.2002
LAST MODIFIED: 08.15.2005
LAST MODIFIED BY: JAS
MODIFICATION HISTORY:
04.15.2002 – Created Project (JAS)
05.27.2002 – Updated site using CSS (JAS)
08.15.2005 – Re-wrote site use XHTML (JAS)
-->
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
But the Display Is A Little
Boring, Huh?
• We added HTML
elements to the
text, but the result
was little plain &
boring!
• Remember HTML is
all about structure,
NOT style!
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
The World Wide Web Consortium
• The World Wide Web
Consortium (the W3C –
http://www.w3.org/)
releases
recommendations for
creating web content.
• The current
recommendations for
creating web sites
revolve around the idea
of layers …
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
The Layers of Web Development
• The Structural Layer includes XHTML &
XML; describe how to structure text & media
on a page.
• The Presentation Layer includes Cascading
Style Sheets (CSS); describe how to format
the display of text & media.
• The Behavioral Layer includes the Document
Object Model (DOM) and scripting languages
like JavaScript; describe how to add
interactivity to websites.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Introducing Some Style
• Add the following to starbuzz.html, after the
</title>:
<style type = "text/css">
body
{
background-color: #D2B48C;
color: #000080;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
Continued …
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Introducing Some Style
#coffeeImage
{
text-align: center;
}
</style>
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Comparing HTML & CSS
• HTML
• CSS
– Describes Structure
– Syntax includes
elements (tags &
attributes)
– Case-sensitive (use
lowercase)
– Describes Format
– Syntax includes style
rules (selectors &
declarations)
– Case-sensitive (use
lowercase)
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Good File Management
• A good rule of thumb is to separate
your files by type. For instance, put all
HTML files in the main folder and then
put your image files in a subfolder
called – go figure – images!
• In your starbuzz folder on your
Desktop, create a subfolder called
images. Move the file cupofjoe.jpg
to images.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Uploading Your Pages
• Before the world can
view your
masterpiece, we
need to upload your
page to a server.
• We'll use the CS
Department's
Pegasus server, a
Unix server.
• Let's learn a little
about Unix …
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Unix is NOT that Scary!
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Introducing Unix
• Unix was originally
developed by Bell
Labs in 1969.
• Because of its filesharing and processsharing abilities,
Unix is ideal for web
development.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Unix Commands
• We issue commands from a Unix
Command Prompt:
pegasus{jstudent}/:
• Unix commands are case-sensitive
and use lowercase!
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Command Syntax
• Case sensitive! All commands are
lowercase
• General Format:
command [switches] arg1 arg2
Command
Switch
Arguments
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Let Create Our Web Directory
• Open your Pegasus account and issue
the following command from your
Pegasus prompt:
mkdir public_html
• What does this command do? Well,
we've created a special directory,
public_html, in which you will store all
of your web work.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
More on public_html
• public_html acts as the default
directory for web work. To visit
your own web work using a web
browser, point to:
http://www.cs.iupui.edu/~username/
• But wait! We forgot to upload our
file and give proper permissions!
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Uploading Your File
• Use Secure File Transfer (SSH) to upload your entire
starbuzz folder from your Desktop to
public_html.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Okay, Let's Make it Visible
• First use the change directory
command (cd) at your Pegasus
prompt to change to the
public_html directory:
cd public_html
• Now, let's talk about permissions …
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Viewing Permissions
• At your Pegasus prompt, use the long
list command to view permissions & a
listing for the current directory:
ls –l
• You should see the contents of
public_html and a number of
important details, including the
permission scheme.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Unix Permissions
• We find the permission scheme at
the beginning of a long directory
listing (ls –l):
World’s
Permissions
Group’s
Permissions
Owner’s
Permissions
Directory?
d rwx r-x r-x
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Unix Permissions
• The first character represents
whether the listing is a directory.
If it is a directory, a “d” will appear
in the first character; otherwise,
you should normally see a dash (-).
d rwx
r-x r-x
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Unix Permissions
• The remaining nine characters are
divided into three triplets:
– The first triplet represents the owner’s
permissions.
– The second is the group’s permissions.
– The third triplet represents the world’s
permissions.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Read Permission
• 1st position in a triplet: r stands
for Read; grants permission to view
the contents of a file or directory
(Value is ‘r’ or ‘-’).
rwx
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Write Permission
• 2nd position in a triplet: w stands
for Write; grants permission to
modify a file or the contents of a
directory (Value is ‘w’ or ‘-’).
rwx
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Execute Permission
• 3rd position in a triplet: x stands for
eXecute; grants permission to run
an application or open a directory
(Value is ‘x’ or ‘-’).
rwx
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Unix Permissions
• When we change permissions, we must
first decide what number will represent
the permissions for a triplet. We can do
this by determining whether or not a
the permissions in a triplet are on or
off.
• If turned on, a permission gets a value
of 1; if turned off, it gets a value of 0.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Unix Permissions
• After deciding whether the three
permissions in a triplet are on or
off, we will have a binary number
between 000 and 111.
• We can convert the binary number
to its decimal/octal equivalent
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Unix Permissions
Permissions
- - - - x
- w - w x
Binary
0 0 0
0 0 1
0 1 0
0 1 1
Dec/Oct
0
1
2
3
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Unix Permissions
Permissions
r - r – x
r w r w x
Binary
1 0 0
1 0 1
1 1 0
1 1 1
Dec/Oct
4
5
6
7
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
The chmod Command
• Once you’ve established the octal
number representing the permission
for each triplet, you can then use the
change mode (chmod) command to give
a directory or file proper permissions
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
chmod Syntax & Example
• Syntax:
chmod permissionMask file/dir
• Example:
chmod 755 public_html
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Updating starbuzz Permissions
• What permissions do we want to give
our starbuzz & images directories?
chmod _________ starbuzz
chmod _________ images
• What about the files?
chmod _________ starbuzz.html
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Use the Force, Luke!
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Suggested Further Reading
• “Unix is Four-Letter Word”:
http://unix.t-a-y-l-o-r.com/
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Questions?
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
References
• Freeman, Elisabeth and Eric Freeman.
Head First HTML with CSS & XHTML.
Sebastopol, CA: 2006.
• Niederst Robbins, Jennifer. Web Design in
a Nutshell: A Desktop Quick Reference.
Sebastopol, CA: 2006.
• Gosselin, Dan. XHTML Comprehensive.
Boston: 2003.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science