0 Instructor Continuing Training Advanced Presentation Skills.
Advanced Web Development Instructor: Thomas Bombach.
-
Upload
walter-stokes -
Category
Documents
-
view
217 -
download
0
Transcript of Advanced Web Development Instructor: Thomas Bombach.
![Page 1: Advanced Web Development Instructor: Thomas Bombach.](https://reader035.fdocuments.in/reader035/viewer/2022062517/56649f345503460f94c520da/html5/thumbnails/1.jpg)
Advanced Web DevelopmentInstructor: Thomas Bombach
![Page 2: Advanced Web Development Instructor: Thomas Bombach.](https://reader035.fdocuments.in/reader035/viewer/2022062517/56649f345503460f94c520da/html5/thumbnails/2.jpg)
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
![Page 3: Advanced Web Development Instructor: Thomas Bombach.](https://reader035.fdocuments.in/reader035/viewer/2022062517/56649f345503460f94c520da/html5/thumbnails/3.jpg)
Projects
•The “Holy Grail” Layout•PHP Hello World•PHP: Different Messages at Different
Times•Mad Libs•Guided Project: Building a Guestbook•Final Project
![Page 4: Advanced Web Development Instructor: Thomas Bombach.](https://reader035.fdocuments.in/reader035/viewer/2022062517/56649f345503460f94c520da/html5/thumbnails/4.jpg)
Basic HTML Document Structure
<html><head></head><body></body>
</html>
![Page 5: Advanced Web Development Instructor: Thomas Bombach.](https://reader035.fdocuments.in/reader035/viewer/2022062517/56649f345503460f94c520da/html5/thumbnails/5.jpg)
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’
![Page 6: Advanced Web Development Instructor: Thomas Bombach.](https://reader035.fdocuments.in/reader035/viewer/2022062517/56649f345503460f94c520da/html5/thumbnails/6.jpg)
Other tags:
<img /> src=‘path/to/image.jpg’ alt=‘Alternate text’ Self-closing
<div></div> <span></span>
![Page 7: Advanced Web Development Instructor: Thomas Bombach.](https://reader035.fdocuments.in/reader035/viewer/2022062517/56649f345503460f94c520da/html5/thumbnails/7.jpg)
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>
![Page 8: Advanced Web Development Instructor: Thomas Bombach.](https://reader035.fdocuments.in/reader035/viewer/2022062517/56649f345503460f94c520da/html5/thumbnails/8.jpg)
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.)
![Page 9: Advanced Web Development Instructor: Thomas Bombach.](https://reader035.fdocuments.in/reader035/viewer/2022062517/56649f345503460f94c520da/html5/thumbnails/9.jpg)
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;}
![Page 10: Advanced Web Development Instructor: Thomas Bombach.](https://reader035.fdocuments.in/reader035/viewer/2022062517/56649f345503460f94c520da/html5/thumbnails/10.jpg)
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
![Page 11: Advanced Web Development Instructor: Thomas Bombach.](https://reader035.fdocuments.in/reader035/viewer/2022062517/56649f345503460f94c520da/html5/thumbnails/11.jpg)
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
![Page 12: Advanced Web Development Instructor: Thomas Bombach.](https://reader035.fdocuments.in/reader035/viewer/2022062517/56649f345503460f94c520da/html5/thumbnails/12.jpg)
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
![Page 13: Advanced Web Development Instructor: Thomas Bombach.](https://reader035.fdocuments.in/reader035/viewer/2022062517/56649f345503460f94c520da/html5/thumbnails/13.jpg)
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;
![Page 14: Advanced Web Development Instructor: Thomas Bombach.](https://reader035.fdocuments.in/reader035/viewer/2022062517/56649f345503460f94c520da/html5/thumbnails/14.jpg)
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
![Page 15: Advanced Web Development Instructor: Thomas Bombach.](https://reader035.fdocuments.in/reader035/viewer/2022062517/56649f345503460f94c520da/html5/thumbnails/15.jpg)
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
![Page 16: Advanced Web Development Instructor: Thomas Bombach.](https://reader035.fdocuments.in/reader035/viewer/2022062517/56649f345503460f94c520da/html5/thumbnails/16.jpg)
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
![Page 17: Advanced Web Development Instructor: Thomas Bombach.](https://reader035.fdocuments.in/reader035/viewer/2022062517/56649f345503460f94c520da/html5/thumbnails/17.jpg)
Functions
•Defined using function keywordExample:
function myFunc() {// Code goes here
}•Called using the function name:
Example:myFunc();