Chapter 1. Introduction to web development

Size: px

Start display at page:

Download "Chapter 1. Introduction to web development"

Kathryn Heath
8 years ago
Views:

1 Chapter 1 Introduction to web development HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 1

2 Objectives Applied 1. Load a web page from the Internet or an intranet into a web browser. 2. View the source code for a web page in a web browser. HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 2

3 Objectives (continued) Knowledge 1. Describe the components of a web application. 2. Distinguish between the Internet and an intranet. 3. Describe HTTP requests and responses. 4. Distinguish between the way a web server processes static web pages and dynamic web pages. 5. Describe the use of JavaScript. 6. Name the two major web browsers for Windows systems. 7. Distinguish between HTML and CSS. 8. Distinguish between HTML and XHTML. 9. Explain how you deploy a web site on the Internet. 10. Describe the components of an HTTP URL. HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 3

Describe the use of JavaScript. 6. Name the two major web browsers for Windows systems. 7. Distinguish between HTML and CSS. 8.

4 The components of a web application HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 4

5 The architecture of the Internet LAN LAN LAN LAN LAN WAN IXP WAN LAN LAN WAN IXP IXP WAN LAN LAN LAN LAN LAN HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 5

6 A static web page HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 6

7 How a web server processes a static web page HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 7

8 A dynamic web page HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 8

9 How a web server processes a dynamic web page HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 9

10 A web page with image swaps and rollovers HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 10

11 How JavaScript fits into this architecture HTTP request HTTP response Web Browser Web Server Application Server Database Server JavaScript Application script HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 11

Database Server JavaScript Application script HTML,

12 Three of the common uses of JavaScript Data validation Image swaps and rollovers Slide shows HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 12

13 Web browsers Internet Explorer Firefox Safari Opera Chrome Web servers Apache IIS HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 13

14 Server-side scripting languages ASP.NET JSP PHP ColdFusion Ruby Perl Python HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 14

15 The code for an HTML file named book.html <head> <title>javascript book</title> </head> <body> <div id="page"> <h1>javascript and DOM Scripting</h1> <img src="javascriptbook.jpg" alt="javascriptbook" /> <p>today, web users expect web sites to provide advanced features, dynamic user interfaces, and fast response times. To deliver that, web developers need to know the JavaScript language. Beyond that, though, they need to know how to use JavaScript to script the Document Object Model (or DOM).</p> <p>now, at last, your trainees can learn both JavaScript and DOM scripting in this one great book. To find out how this book does it, <a href="">read more...</a></p><br /><br /> </div> </body> HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 15

To deliver that, web developers need to know the JavaScript language. Beyond that, though, they need to know how to use JavaScript to script the Document Object Model (or DOM).

16 The HTML in a web browser HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 16

17 The HTML element that links it to a CSS file <link rel="stylesheet" type="text/css" href="book.css" /> HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 17

18 The code for the CSS file named book.css body { margin: 0 0; font-family: Arial, Helvetica, sans-serif; font-size: 82.5%; } #page { width: 500px; margin: 0 auto; padding: 1em; border: 1px solid navy; } h1 { margin: 0; padding:.25em; font-size: 250%; color: navy; } HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 18

5%; } #page { width: 500px; margin: 0 auto; padding: 1em; border: 1px solid navy; }

19 The code for book.css (continued) img { float: left; margin: 0 1em; } p { margin: 0; padding-bottom:.5em; } HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 19

20 The web page in a web browser HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 20

21 HTML vs. XHTML By default, all pages are sent to the browser, or served, as HTML. Because the syntax of XHTML is stricter than the syntax of HTML, XHTML encourages good coding practices. What version of HTML we use in this book In this book, we use a form of XHTML 1.0 that is compatible with HTML This works for all browsers including Internet Explorer because XHTML 1.0 is backward-compatible with HTML HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 21

22 Notepad++ with open HTML and CSS files HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 22

23 Popular text editors that are free Editor Notepad++ TextWrangler Komodo Edit Runs on Windows Macintosh Windows, Macintosh, and Linux/UNIX HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 23

24 Adobe DreamWeaver HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 24

25 Popular IDEs for web development IDE Adobe DreamWeaver Komodo IDE Microsoft Expression Web Runs on Windows and Macintosh Windows, Macintosh, and Linux/UNIX Windows Popular suites for web development IDE Runs on Adobe Creative Suite Windows and Macintosh Microsoft Expression Studio Windows HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 25

26 FTP program that uploads files to the web server HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 26

27 Popular FTP programs FileZilla FTP Voyager CuteFTP Fetch HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 27

28 The components of an HTTP URL HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 28

29 HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 29

30 What happens if you omit parts of a URL If you omit the protocol, the default of will be used. If you omit the filename, the default document name for the web server will be used. If you omit the path, you must also omit the filename. Then, the home page for the site will be requested. HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 30

31 Two ways to access a web page on the Internet Enter the URL of a web page into the browser s address bar. Click on a link in the current web page to load the next web page. How to access a web page on your own computer With IE, use File Open. With Firefox, use File File Open. HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 31

32 The HTML source code for a page HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 32

33 How to view the HTML source code for a page In Firefox, use the View Page Source command. In Internet Explorer, use the View Source command. How to view the CSS code in an external CSS file In Firefox, click on the link in the link element that refers to it. In Internet Explorer, enter the URL for the CSS file in your web browser. HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 33

Introduction to web development and JavaScript

Objectives Chapter 1 Introduction to web development and JavaScript Applied Load a web page from the Internet or an intranet into a web browser. View the source code for a web page in a web browser. Knowledge