ALBERT WAVERING BOBBY 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/participation25% Quizzes25% Homework50%  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’?)   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 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  Link (anchor)  Table  Unordered list  Divider  Span  Line break*  Many others

Special elements   Defines header of HTML file   Defines content of HTML file   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) 

Example Our First Page Hello, world! This is a webpage.

Attributes  Help customize an element  id (unique identification for an element)  class (category)  Text field value  Picture size

Case Study: Tag  Some attributes:  Source URL  Alternate text  Dimensions  Source  Either URL or local image  Example: 

Assignment  Create a webpage comprised of a single HTML file  Requirements:  Use at least three tags in addition to the standard required tags:,,,  Must pass W3C Validation:  Due by midnight next Wednesday the 8 th  to

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   PC: Notepad++ 

Resources  Us!   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   