1 / 62

Introducing Web Development

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.

leilani-davidson
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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introducing Web Development

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

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

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

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

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

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

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

  9. IP Addresses • Example of an IP Address: http://134.68.140.206/ The IP Address of the Computer Science Department’s Web Server

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

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

  12. Anatomy of a URL http://www.cs.iupui.edu/index.html protocol sub-subdomain domainname subdomain machinename file name

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

  14. “Send me ‘art.html’” ‘art.html’ The Web Server Web Server Web Client

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  33. Introducing Some Style #coffeeImage { text-align: center; } </style>

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

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

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

  37. Unix is NOT that Scary!

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

  39. Unix Commands • We issue commands from a Unix Command Prompt:pegasus{jstudent}/: • Unix commands are case-sensitive and use lowercase!

  40. Command Syntax • Case sensitive! All commands are lowercase • General Format:command [switches] arg1 arg2 Switch Command Arguments

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

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

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

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

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

  46. Unix Permissions • We find the permission scheme at the beginning of a long directory listing (ls –l): d rwx r-x r-x Owner’sPermissions Group’sPermissions World’sPermissions Directory?

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

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

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

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

More Related