CPSP 229D: Web design

Transcript CPSP 229D: Web design

ALBERT WAVERING
BOBBY SENG
CPSP 229D: WEB DESIGN
Welcome
 Introductions
 Existing knowledge?
 Laptops?
 Course goals
 Introduction to several topics
 Encourage creativity
 Develop a site for a nonprofit, etc. for capstone
Topics
 HTML
 CSS
 Javascript
 PHP
 MySQL
 Content Management Systems
Course Structure
 14 Classes
 Weekly quizzes (don’t hate us)
 Small homework projects
 Grading:
 Attendance/participation
Quizzes
Homework
25%
25%
50%
 Half for serious, unique attempt, rest for correctness
How The Internet Works
 Series of tubes
How The Internet Works
 When a web page is loaded, what happens?
 Specifically, your PC is a ‘client’
 Client -> DNS lookup (what is ‘google.com’?)
 74.125.39.106
 Client asks server for webpage
 Server returns a static webpage or generates one
to show the client based on any parameters
Organization
 What happens where?!
 Server
 Returns a static HTML file, OR
 Renders and returns a page using PHP or any
other server technology
 Perhaps look up data from an SQL database
 Client
 Decides how the HTML and CSS will appear to the
user
 Runs any Javascript the page includes
Analogy Time!
 Client: hungry man
 HTML: bread
 CSS: peanut butter and jelly
 Javascript: sandwich is now cut in half
 PHP: the sandwich’s maker
 MySQL: kitchen cabinet
 Server: kitchen
HTML
 HyperText Markup Language
 NOT a programming language
 Consists of ‘elements’ denoted in a <tag>
structure
 Document Object Model
 How the browser understands the page in order to
display it
 A browser interprets this to display a
webpage
 Outline-esque
Sample HTML
 Hello, world!
That Was Easy
 Yes, it was
 Used element
 Defines a paragraph
 Opening and closing tags
 Few exceptions
 Other elements?
Some other elements
 







Paragraph
<a>
Link (anchor)
<table> Table
<ul>
Unordered list
<div> Divider
 Span
 
Line break*
Many others
Special elements
 <head>
 Defines header of HTML file
 <body>
 Defines content of HTML file
 <title>
 Defines title of page
HTML Standard
 Standard exists so all browsers show (somewhat)
same page
 Different browsers use different rendering
engines




Firefox: Gecko
Chrome, Safari: WebKit
IE: Trident
Opera: Presto
 Standard is self-defining (XHTML)
 <!doctype html>
Example
<!doctype html>
<html lang=en-us>
<head>
<title>Our First Page</title>
</head>
<body>
Hello, world!
This is a webpage.
</body>
</html>
Attributes
 Help customize an element
 id (unique identification for an element)
 class (category)
 Text field value
 Picture size
Case Study: <img> Tag
 Some attributes:
 Source URL
 Alternate text
 Dimensions
 Source
 Either URL or local image
 Example:

<img src="http://imgs.xkcd.com/comics/orbiter.png"/>
Assignment
 Create a webpage comprised of a single
HTML file
 Requirements:
 Use at least three tags in addition to the standard
required tags: <html>, <head>, <body>, <title>
 Must pass W3C Validation:
http://validator.w3.org/#validate_by_upload
 Due by midnight next Wednesday the 8th
 Email to [email protected]
Tips and Tricks
 View source
 Right click a page, ‘view source’ to see HTML
 Text editors (please do not use a word proc)
 Mac: TextWrangler
 http://www.barebones.com/products/textwrangler/
 PC: Notepad++
 http://notepad-plus-plus.org/
Resources
 Us!
 [email protected]
 We’ll try to answer ASAP, but no guarantees
 Do not wait til the last day to ask us, we’re students too
 Make honest attempt to figure out answer on your own
first
 Office hours TBD
 http://www.w3schools.com/
 http://en.wikipedia.org
 http://htmldog.com/

CPSP 229D: Web design

Transcript CPSP 229D: Web design

Directory