Introducing web development
This presentation is the property of its rightful owner.
Sponsored Links
1 / 62

Introducing Web Development PowerPoint PPT Presentation


  • 51 Views
  • Uploaded on
  • Presentation posted in: General

Introducing Web Development. 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.

Download Presentation

Introducing Web Development

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


Introducing web development

Introducing Web Development


Goals

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.


When computers communicate

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.


How tcp ip works

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.

101010101001101010011010011010210101010101011010111101010111011101110110110000101110110101010101001110101001010111101000

101010101001101010011010011

101010101001101010011010011

101010101001101010011010011


How tcp ip works1

134.68.140.247

134.68.140.247

134.68.140.247

How TCP/IP Works

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.

101010101001101010011010011

101010101001101010011010011

101010101001101010011010011


How tcp ip works2

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.


How tcp ip works3

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 re-transmitted.


Ip addresses

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.


Ip addresses1

IP Addresses

  • Example of an IP Address:

http://134.68.140.206/

The IP Address of the Computer Science Department’s Web Server


Ip addresses vs urls

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


Ip addresses vs urls1

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.


Anatomy of a url

Anatomy of a URL

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

protocol

sub-subdomain

domainname

subdomain

machinename

file name


Accessing a web page

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.


The web server

“Send me ‘art.html’”

‘art.html’

The Web Server

Web Server

Web Client


The web browser

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.


Breaking down html

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.


Introducing html

Introducing 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

C

D

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


Introducing html1

Introducing 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>

E

F

G


Elements

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.


Introducing web development

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 />


Block level vs inline elements

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.


Attributes

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


Let s try one

Let’s Try One …

  • Create a directory called starbuzzon your Desktop.

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


Adding a link

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>


The anchor element

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 relativepaths 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>


Html comments

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


Documentation comments

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.


Documentation comment example

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)

-->


But the display is a little boring huh

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!


The world wide web consortium

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 …


The layers of web development

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.


Introducing some style

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 …


Introducing some style1

Introducing Some Style

#coffeeImage

{

text-align: center;

}

</style>


Comparing html css

HTML

Describes Structure

Syntax includes elements (tags & attributes)

Case-sensitive (use lowercase)

CSS

Describes Format

Syntax includes style rules (selectors & declarations)

Case-sensitive (use lowercase)

Comparing HTML & CSS


Good file management

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.


Uploading your pages

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 …


Unix is not that scary

Unix is NOT that Scary!


Introducing unix

Introducing Unix

  • Unix was originally developed by Bell Labs in 1969.

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


Unix commands

Unix Commands

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

  • Unix commands are case-sensitive and use lowercase!


Command syntax

Command Syntax

  • Case sensitive! All commands are lowercase

  • General Format:command [switches] arg1 arg2

Switch

Command

Arguments


Let create our web directory

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.


More on public html

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!


Uploading your file

Uploading Your File

  • Use Secure File Transfer (SSH) to upload your entire starbuzz folder from your Desktop to public_html.


Okay let s make it visible

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 …


Viewing permissions

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.


Unix permissions

Unix Permissions

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

    drwxr-xr-x

Owner’sPermissions

Group’sPermissions

World’sPermissions

Directory?


Unix permissions1

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 rwxr-xr-x


Unix permissions2

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.


Read permission

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 ‘-’).

r w x


Write permission

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 ‘-’).

r w x


Execute permission

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 ‘-’).

r w x


Unix permissions3

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.


Unix permissions4

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


Unix permissions5

Unix Permissions


Unix permissions6

Unix Permissions


The chmod command

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


Chmod syntax example

chmod Syntax & Example

  • Syntax:chmod permissionMask file/dir

  • Example:chmod 755 public_html


Updating starbuzz permissions

Updating starbuzz Permissions

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

  • What about the files?chmod _________ starbuzz.html


Use the force luke

Use the Force, Luke!


Suggested further reading

Suggested Further Reading

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


Questions

Questions?


References

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.


  • Login