cpsp 229d: web design
Post on 19-Jan-2016
30 Views
Preview:
DESCRIPTION
TRANSCRIPT
ALBERT WAVERINGBOBBY SENG
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 25%Quizzes 25%Homework 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
<p>Hello, world!</p>
That Was Easy
Yes, it was Used <p> element
Defines a paragraph Opening and closing tags
Few exceptions
Other elements?
Some other elements
<p>Paragraph <a>Link (anchor) <table> Table <ul> Unordered list <div> Divider <span> Span <br/> 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>
<p>Hello, world!</p><p>This is a webpage.</p>
</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 sduwebship@gmail.com
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! sduwebship@gmail.com 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/
top related