Web Site Design and Development CS 0134 Fall 2018 T ues and Thurs - - PowerPoint PPT Presentation

▶
web site design and development
SMART_READER_LITE
LIVE PREVIEW

Web Site Design and Development CS 0134 Fall 2018 T ues and Thurs - - PowerPoint PPT Presentation

Feb 08, 2024 260 likes •656 views

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

slide-1
SLIDE 1

Web Site Design and Development

CS 0134 Fall 2018 T ues and Thurs 1:00 – 2:15PM

slide-2
SLIDE 2

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

slide-3
SLIDE 3

3

Course website

  • pitt.edu/~ach54/teaching/cs0134-219
slide-4
SLIDE 4

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 1999.
  • I am getting married on Sept 15th. You will

have a substitute on the 18th and you will have the entire class on the 20th to work on an exercise.

slide-5
SLIDE 5

5

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 6th foor mailroom
slide-6
SLIDE 6

6

Questions?

slide-7
SLIDE 7

7

The Internet

Figure from the book

slide-8
SLIDE 8

8

Inside the cloud

Figure from the book

slide-9
SLIDE 9

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

slide-10
SLIDE 10

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

slide-11
SLIDE 11

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

slide-12
SLIDE 12

12

Common Web Browsers

  • Mozilla Firefox
  • Google Chrome
  • Microsoft Edge
  • Microsoft Internet Explorer
  • Apple Safari
  • Opera
slide-13
SLIDE 13

13

Common server-side scripting languages

  • PHP
  • Python
  • Java
  • Perl
  • Ruby
slide-14
SLIDE 14

14

Questions?

slide-15
SLIDE 15

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.

slide-16
SLIDE 16

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>

slide-17
SLIDE 17

17

Rendered HTML

slide-18
SLIDE 18

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.

slide-19
SLIDE 19

19

CSS Link & Markup

<link rel="stylesheet" href="style.css">

h1 { color: blue; text-decoration: underline; }

slide-20
SLIDE 20

20

CSS Added to HTML Example

slide-21
SLIDE 21

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>

slide-22
SLIDE 22

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.
slide-23
SLIDE 23

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.

slide-24
SLIDE 24

24

Questions?

slide-25
SLIDE 25

25

Tools of a Web Developer

  • Text Editor

– Visual Studio Code – Atom – Brackets – See book for more examples

slide-26
SLIDE 26

26

Tools of a Web Developer

  • FTP (File Transfer Protocol) Client

– Filezilla – WinSCP – Fetch – See book for more examples

slide-27
SLIDE 27

27

Tools of a Web Developer

  • IDE (Integrated Development

Environment)

– Adobe Dreamweaver CC – WebStorm – Eclipse – See book for more examples

slide-28
SLIDE 28

28

Questions?

slide-29
SLIDE 29

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

http://pitt.edu/~ach54/teaching/index.html

slide-30
SLIDE 30

30

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://

slide-31
SLIDE 31

31

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.

slide-32
SLIDE 32

32

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.

slide-33
SLIDE 33

33

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.

slide-34
SLIDE 34

34

Questions?

slide-35
SLIDE 35

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.

slide-36
SLIDE 36

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

slide-37
SLIDE 37

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.

slide-38
SLIDE 38

38

Lets try

slide-39
SLIDE 39

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.