Upload
walter-stokes
View
217
Download
0
Embed Size (px)
Citation preview
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();