Advanced Web Development Instructor: Thomas Bombach.

Advanced Web DevelopmentInstructor: 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

<html><head></head><body></body>

</html>

Other tags:

<p></p>: paragraph <br>: line break <h1></h1>: Level 1 header

<h2></h2>: Level 2 header Etc.

Lists <ol></ol>: Ordered list <ul></ul>: Unordered list <dl></dl>: Definition list

<a></a>: Anchors href=‘www.example.com’

Other tags:

<img /> src=‘path/to/image.jpg’ alt=‘Alternate text’ Self-closing

<div></div> <span></span>

Attributes

•Some tags have extra information associated with them▫<a href=‘example.com’>Link to

example.com</a>▫<img src=‘path/to/image.png’ />

•Can specify CSS style information▫<div style=‘font-size:18px’>Larger

text</div>▫<span

style=‘font-weight:bold’>Text</span>

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 toExamples:

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<script src=‘path/to/javascript.js’ type=‘text/javascript’></script>

•Internal▫ <script type=‘text/javascript’></script>

•JavaScript files have a .js extension•Similar syntax to C++

▫Variables▫Functions▫Statements

Variables

•Dynamically typed•Variables are defined with the keyword varExample:

var foo = “bar”; // Stringvar meaningOfLife = 42; // Integervar phi = 1.61803399; // Double or floatvar firstLetter = ‘a’; // Character

Functions

•Defined using function keywordExample:

function myFunc() {// Code goes here

}•Called using the function name:

Example:myFunc();

Advanced Web Development Instructor: Thomas Bombach.

Documents

Transcript of Advanced Web Development Instructor: Thomas Bombach.