albert wavering bobby seng. welcome introductions existing knowledge? laptops? course goals ...
TRANSCRIPT
![Page 1: ALBERT WAVERING BOBBY SENG. Welcome Introductions Existing knowledge? Laptops? Course goals Introduction to several topics Encourage creativity](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697bf791a28abf838c82406/html5/thumbnails/1.jpg)
ALBERT WAVERINGBOBBY SENG
![Page 2: ALBERT WAVERING BOBBY SENG. Welcome Introductions Existing knowledge? Laptops? Course goals Introduction to several topics Encourage creativity](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697bf791a28abf838c82406/html5/thumbnails/2.jpg)
Welcome
Introductions Existing knowledge? Laptops? Course goals
Introduction to several topics Encourage creativity Develop a site for a nonprofit, etc. for
capstone
![Page 3: ALBERT WAVERING BOBBY SENG. Welcome Introductions Existing knowledge? Laptops? Course goals Introduction to several topics Encourage creativity](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697bf791a28abf838c82406/html5/thumbnails/3.jpg)
Topics
HTML CSS Javascript PHP MySQL Content Management Systems
![Page 4: ALBERT WAVERING BOBBY SENG. Welcome Introductions Existing knowledge? Laptops? Course goals Introduction to several topics Encourage creativity](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697bf791a28abf838c82406/html5/thumbnails/4.jpg)
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
![Page 5: ALBERT WAVERING BOBBY SENG. Welcome Introductions Existing knowledge? Laptops? Course goals Introduction to several topics Encourage creativity](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697bf791a28abf838c82406/html5/thumbnails/5.jpg)
How The Internet Works
Series of tubes
![Page 6: ALBERT WAVERING BOBBY SENG. Welcome Introductions Existing knowledge? Laptops? Course goals Introduction to several topics Encourage creativity](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697bf791a28abf838c82406/html5/thumbnails/6.jpg)
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
![Page 7: ALBERT WAVERING BOBBY SENG. Welcome Introductions Existing knowledge? Laptops? Course goals Introduction to several topics Encourage creativity](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697bf791a28abf838c82406/html5/thumbnails/7.jpg)
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
![Page 8: ALBERT WAVERING BOBBY SENG. Welcome Introductions Existing knowledge? Laptops? Course goals Introduction to several topics Encourage creativity](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697bf791a28abf838c82406/html5/thumbnails/8.jpg)
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
![Page 9: ALBERT WAVERING BOBBY SENG. Welcome Introductions Existing knowledge? Laptops? Course goals Introduction to several topics Encourage creativity](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697bf791a28abf838c82406/html5/thumbnails/9.jpg)
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
![Page 10: ALBERT WAVERING BOBBY SENG. Welcome Introductions Existing knowledge? Laptops? Course goals Introduction to several topics Encourage creativity](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697bf791a28abf838c82406/html5/thumbnails/10.jpg)
Sample HTML
<p>Hello, world!</p>
![Page 11: ALBERT WAVERING BOBBY SENG. Welcome Introductions Existing knowledge? Laptops? Course goals Introduction to several topics Encourage creativity](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697bf791a28abf838c82406/html5/thumbnails/11.jpg)
That Was Easy
Yes, it was Used <p> element
Defines a paragraph Opening and closing tags
Few exceptions
Other elements?
![Page 12: ALBERT WAVERING BOBBY SENG. Welcome Introductions Existing knowledge? Laptops? Course goals Introduction to several topics Encourage creativity](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697bf791a28abf838c82406/html5/thumbnails/12.jpg)
Some other elements
<p>Paragraph <a>Link (anchor) <table> Table <ul> Unordered list <div> Divider <span> Span <br/> Line break* Many others
![Page 13: ALBERT WAVERING BOBBY SENG. Welcome Introductions Existing knowledge? Laptops? Course goals Introduction to several topics Encourage creativity](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697bf791a28abf838c82406/html5/thumbnails/13.jpg)
Special elements
<head> Defines header of HTML file
<body> Defines content of HTML file
<title> Defines title of page
![Page 14: ALBERT WAVERING BOBBY SENG. Welcome Introductions Existing knowledge? Laptops? Course goals Introduction to several topics Encourage creativity](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697bf791a28abf838c82406/html5/thumbnails/14.jpg)
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>
![Page 15: ALBERT WAVERING BOBBY SENG. Welcome Introductions Existing knowledge? Laptops? Course goals Introduction to several topics Encourage creativity](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697bf791a28abf838c82406/html5/thumbnails/15.jpg)
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>
![Page 16: ALBERT WAVERING BOBBY SENG. Welcome Introductions Existing knowledge? Laptops? Course goals Introduction to several topics Encourage creativity](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697bf791a28abf838c82406/html5/thumbnails/16.jpg)
Attributes
Help customize an element id (unique identification for an element) class (category) Text field value Picture size
![Page 17: ALBERT WAVERING BOBBY SENG. Welcome Introductions Existing knowledge? Laptops? Course goals Introduction to several topics Encourage creativity](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697bf791a28abf838c82406/html5/thumbnails/17.jpg)
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"/>
![Page 18: ALBERT WAVERING BOBBY SENG. Welcome Introductions Existing knowledge? Laptops? Course goals Introduction to several topics Encourage creativity](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697bf791a28abf838c82406/html5/thumbnails/18.jpg)
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]
![Page 19: ALBERT WAVERING BOBBY SENG. Welcome Introductions Existing knowledge? Laptops? Course goals Introduction to several topics Encourage creativity](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697bf791a28abf838c82406/html5/thumbnails/19.jpg)
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/
![Page 20: ALBERT WAVERING BOBBY SENG. Welcome Introductions Existing knowledge? Laptops? Course goals Introduction to several topics Encourage creativity](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697bf791a28abf838c82406/html5/thumbnails/20.jpg)
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/