Web Site Design and Development. CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM

Size: px

Start display at page:

Download "Web Site Design and Development. CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM"

Cecil Blair
5 years ago
Views:

1 Web Site Design and Development CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM

2 By the end of this course you will be able to Design a static website from scratch Use HTML5 and CSS3 to build the site you designed Use JavaScript to give your users a rich user experience Understand the importance of and design for accessibility 2

3 Course website pitt.edu/~ach54/teaching/cs

4 Who am I My name is Adam Hobaugh I am a Part-time Instructor for Computer Science and member of the Technical Staf for the School of Computing and Information. I have a BS in Computer Science I have been writing web sites since I am getting married on Sept 15 th. You will have a substitute on the 18 th and you will have the entire class on the 20 th to work on an exercise. 4

5 How you can get a hold of me - A.C.Hobaugh@pitt.edu Ofce Sennott Square Ofce Hours Wednesday 1:00pm to 2:00pm Friday 11:00am to 12:00pm Available by appointment if needed Mailbox is in the 6 th foor mailroom 5

6 Questions? 6

7 The Internet Figure from the book 7

8 Inside the cloud Figure from the book 8

9 What is a web server A server is a computer that runs software that takes a request and serves a response to that request. A web server is a piece of software that takes an HTTP request and returns an HTTP response. HTTP stands for Hypertext Transfer Protocol 9

10 Static Web Page A static web page is one where the content is an HTML fle stored on the server and passed as is in the HTTP response. Figure from the book 10

11 Dynamic Web Page A dynamic web page is one where the HTML is generated by an application and the result is passed along in the HTTP response. Figure from the book 11

12 Common Web Browsers Mozilla Firefox Google Chrome Microsoft Edge Microsoft Internet Explorer Apple Safari Opera 12

13 Common server-side scripting languages PHP Python Java Perl Ruby 13

14 Questions? 14

15 What is HTML? HTML stands for Hypertext Markup Language. HTML is used to describe the structure of a web page. HTML is made up of a tree of HTML elements. HTML elements can describe text, images, etc. It used to include information about how to format the web page but this has been removed in favor of CSS. 15

16 Example HTML Markup <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>hello World</title> </head> <body> <h1>hello World</h1> </body> </html> 16

17 Rendered HTML 17

18 What is CSS? CSS stands for Cascading Style Sheet CSS is used to describe how a web page should be formatted A CSS fle is made up of a series of rules Each rule contains a selector that tells the browser what html elements the rule applies to as well as a set of declarations. It is best practice to keep your HTML markup in one fle and your CSS rules in another and link them together. 18

19 CSS Link & Markup <link rel="stylesheet" href="style.css"> h1 { color: blue; text-decoration: underline; } 19

20 CSS Added to HTML Example 20

21 Example HTML markup with CSS link <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>hello World</title> </head> <body> <h1>hello World</h1> </body> </html> 21

22 Web Standards There are two groups that govern HTML. Each have their own specifcation. World Wide Web Consortium (W3C) Web Hypertext Application Technology Working Group (WHATWG) CSS is governed by the W3C. 22

23 JavaScript JavaScript is a programming language that was designed to run in your web browser. JavaScript has grown to do most everything you would want to do on a computer. In this course, we will use JavaScript to validate forms as well as manipulate images. 23

24 Questions? 24

25 Tools of a Web Developer Text Editor Visual Studio Code Atom Brackets See book for more examples 25

26 Tools of a Web Developer FTP (File Transfer Protocol) Client Filezilla WinSCP Fetch See book for more examples 26

27 Tools of a Web Developer IDE (Integrated Development Environment) Adobe Dreamweaver CC WebStorm Eclipse See book for more examples 27

28 Questions? 28

29 How to View a Web page Once you upload the web page, you will want to look at it, to do this, you will use a URL. A URL is a Universal Resource Locator 29

30 Anatomy of a URL is the protocol section of the URL. The protocol section tells the browser what protocol to use when talking to the server. If you omit the protocol section within a web browser, it will default to 30

31 Anatomy of a URL pitt.edu is the domain name. The domain name is the server where the resource we want can be found. If you omit the domain name, your browser may assume that the frst thing after the protocol is the domain name or send what you entered to a search engine. 31

32 Anatomy of a URL ~ach54/teaching is the path This is the path to the fle we are looking for on the server. If you omit the path, the server will try to fnd your requested fle at the root of your website. 32

33 Anatomy of a URL index.html is the flename This is the actual html fle we want to view. If you omit the flename, the default flename for the web server be used. This is typically index.html or index.htm. 33

34 Questions? 34

35 How to View a Web Page s Source One of the best things you can do as you work through this course is to look at the HTML and CSS for other web pages. This will let you see how other people have written their web pages. Use caution though, with JavaScript, not everything you see on the page will be in the HTML and CSS source. 35

36 View full source in Firefox and Chrome HTML Right click on the page you want to view Select View Page Source CSS Bring up the HTML source Click on the link to the CSS source fle Remember, the css link element looks like <link rel= stylesheet href= somefleecss > 36

37 View particular element of a web page Right click on element you want to look at Select either Inspect (Chrome) or Inspect Element (Firefox) This brings up the Developer Tools and will let you look at the HTML for that element as well as the CSS rules applied to it. 37

38 Lets try 38

39 Five critical web development issues * Users and Usability Cross-browser compatibility User accessibility Search engine optimization (SEO) Responsive web design * This is the last section of Chapter 1, please read for more detail and examples. 39

Anatomy of an HTML document

Anatomy of an HTML document hello World hello World This is the DOCTYPE declaration.