Introducing web development
1 / 62

Introducing Web Development - PowerPoint PPT Presentation

  • Uploaded on

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.

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

PowerPoint Slideshow about 'Introducing Web Development' - leilani-davidson

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


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.





How tcp ip works1

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.




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:

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






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


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


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



<title>Head First Lounge</title>



<h1>Welcome to the Head First Lounge</h1>

<img src="images/drinks.gif">


Join us any evening for refreshing exlixirs, conversation and maybe a game or two of





Open the file:

Introducing html1
Introducing HTML

<em>Dance Dance Revolution</em>.

Wireless access is always provided; BYOWS

(Bring your own web server).



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

Webville. Come join us!</p>







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


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


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>


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

    to see our Mission




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=“”>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



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 – 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">



    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



text-align: center;



Comparing 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)

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 …

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




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:

  • 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):

    d rwx r-x r-x





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 rwx r-x r-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

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

Suggested further reading
Suggested Further Reading

  • “Unix is Four-Letter Word”:


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