Advanced Web Development Instructor: Thomas Bombach

Class Goals Become comfortable using PHP & MySQL Learn to make server-side scripts that are the foundations for advanced web sites Learn about AJAX & its applications in a modern web site Learn advanced web design techniques for the modern web Provide the next steps for advancing web skills

Projects The “Holy Grail” Layout PHP Hello World PHP: Different Messages at Different Times Mad Libs Guided Project: Building a Guestbook Final Project

Basic HTML Document Structure

Other tags: : paragraph : line break : Level 1 header : Level 2 header Etc. Lists : Ordered list : Unordered list : Definition list : Anchors href=‘

Other tags: src=‘path/to/image.jpg’ alt=‘Alternate text’ Self-closing

Attributes Some tags have extra information associated with them ▫ Link to example.com ▫ Can specify CSS style information ▫ Larger text ▫ Text

CSS CSS: Cascading Style Sheets Defines how to display HTML elements Designed to solve the problem of updating the styles of many different elements Allows developer to define style rules once for many elements, and change them as needed Uses all the same properties that the style attribute uses (color, background-color, etc.)

CSS Syntax Three parts to a CSS declaration Selector { property: value } ▫The selector defines which HTML elements the developer wants to style ▫The property defines which CSS property will be set ▫The value defines what the property will be set to Examples: body { background-color: blue} p { font-size: large } ▫If you are defining multiple properties for a single selector, separate each property/value pair with a semicolon (and preferably a new line) h5 { background-color: green; color: greenyellow; }

Other CSS Properties - Font font-size ▫Sets the size of the text ▫Values: xx-small, x-small, small, medium, large, x-large, xx- large font-weight ▫Sets the boldness of the text ▫Values: normal, bold, bolder, lighter font-family ▫Sets the font style of the text ▫Values: Arial, “Courier New”, Georgia, “Times New Roman”, Verdana, “Trebuchet MS”, “Lucida Sans” ▫Note that if the name of the font-family value has multiple words (such as Courier New) you must include the quotation marks

Other CSS Properties - Border border-style ▫Sets the type of border to display ▫Values: none, dotted, dashed, solid, outset, inset, ridge, groove, double border-color ▫Sets the color of the border ▫Values: color names (same as the color or background- color properties) border-width ▫The size of the border ▫Values: thin, medium, thick

Margin & Padding Margin ▫Empty area outside border. Does not use the background color Border ▫Between margin and padding Padding ▫Empty area inside border. Does use background color Content ▫Where an element’s content appears

Other CSS Properties – Margin & Padding margin: ▫Sets the size of the margin ▫Values: number, followed by “px” Example: margin: 20px; padding: ▫Sets the size of the padding ▫Values: number, followed by “px” (same as margin) Example: padding: 10px;

JavaScript Interpreted programming language Allows developer to make dynamic, interactive pages Not related to Java (except in name) Can interact with HTML elements and their CSS styling

Syntax External Internal ▫ JavaScript files have a.js extension Similar syntax to C++ ▫Variables ▫Functions ▫Statements

Variables Dynamically typed Variables are defined with the keyword var Example: var foo = “bar”; // String var meaningOfLife = 42; // Integer var phi = ; // Double or float var firstLetter = ‘a’; // Character

Functions Defined using function keyword Example: function myFunc() { // Code goes here } Called using the function name: Example: myFunc();