Web Site Design and Development CS 0134 Fall 2018 T ues and Thurs 1:00 – 2:15PM
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
Course website ● pitt.edu/~ach54/teaching/cs0134-219 3
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 1999. ● 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
How you can get a hold of me ● Email - A.C.Hobaugh@pitt.edu ● Ofce - 6211 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
Questions? 6
The Internet Figure from the book 7
Inside the cloud Figure from the book 8
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
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
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
Common Web Browsers ● Mozilla Firefox ● Google Chrome ● Microsoft Edge ● Microsoft Internet Explorer ● Apple Safari ● Opera 12
Common server-side scripting languages ● PHP ● Python ● Java ● Perl ● Ruby 13
Questions? 14
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
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
Rendered HTML 17
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
CSS Link & Markup <link rel="stylesheet" href="style.css"> h1 { color: blue; text-decoration: underline; } 19
CSS Added to HTML Example 20
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
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
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
Questions? 24
Tools of a Web Developer ● Text Editor – Visual Studio Code – Atom – Brackets – See book for more examples 25
Tools of a Web Developer ● FTP (File Transfer Protocol) Client – Filezilla – WinSCP – Fetch – See book for more examples 26
Tools of a Web Developer ● IDE (Integrated Development Environment) – Adobe Dreamweaver CC – WebStorm – Eclipse – See book for more examples 27
Questions? 28
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 http://pitt.edu/~ach54/teaching/index.html 29
Anatomy of a URL http://pitt.edu/~ach54/teaching/index.html ● http:// 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 http:// 30
Anatomy of a URL http://pitt.edu/~ach54/teaching/index.html ● 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
Anatomy of a URL http://pitt.edu/~ach54/teaching/index.html ● ~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
Anatomy of a URL http://pitt.edu/~ach54/teaching/index.html ● 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
Questions? 34
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
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
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
Lets try 38
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
Recommend
More recommend
