web front end development introduction to html css and javascript
TRANSCRIPT
Web Front End Development
Introduction to HTML, CSS, and JavascriptMarc Huang
What is Website? How it works?
Before we start…
Client Readers (Users)Server
Books (Websites)
Hi, I want to read this
Ok, here is the content of it
Hmm, I would like to start
This is the first page
Next page, please
Ok, here you are
Skip to page six
Sure, no problem
Go to Chapter 10
Well, you should pay some fees
Alright…
Making a Website is like
Writing and organising the story and chapters of a Book
Publish a Website is as well as
Publish a Book
Today’s topic• Is not about
• Build or publish a website
• Is about
• How to make a(each) page of a website
• Tools we used for doing this
• HTML, CSS, and Javascript
HTML Body shape
CSS Outfit
Javascript Poses or moves
A small HTML document
How it looks in browsers
How to create it
Elements
Nested HTML Elements
Attributes
104px
142px
Quote Attribute Values
Single or Double Quotes
Common Elements• <p>Paragraphs</p>
• <h1>Heading1</h1>
• <a href=“http://www.w3schools.com”>W3Schools</a>
• <img src=“w3schools.jpg” />
• <div>Block-level</div>
• <span>Inline Block</span>
• <ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
• <table><tr><td>Table Cell</td></tr></table>
Block-level Elements<h1>Heading1</h1> Texts follow h1 element
<a href=“http://www.w3schools.com”>W3Schools</a> Texts follow link element
Inline-level Elements
Entities
Charset
Why Use CSS?
Syntax
How To• External style sheet
• Internal style sheet
• Inline style
Cascading Order
Box Model
Width & Height of an Element
Note for old IE: Internet Explorer 8 and earlier versions, include padding and border in the width property. To fix this
problem, add a <!DOCTYPE html> to the HTML page.
Common Styles• Related to Box
• Backgrounds, Display, Position, Float, Opacity
• Related to Content
• Colors, Fonts, Links, Overflow, Align
• Different formats of Box
• Lists, Tables, Forms, Imgs
Combinators• descendant selector (space)
• div p { background-color: yellow; }
• child selector (>)
• div > p { background-color: yellow; }
• adjacent sibling selector (+)
• div + p { background-color: yellow; }
• general sibling selector (~)
• div ~ p {background-color: yellow; }
http://www.w3schools.com/css/css_combinators.asp
Pseudo-Classes
Dropdowns
http://www.w3schools.com/css/css_dropdowns.asp
Pseudo-Element
Pseudo-Element Cont.
Attribute Selectors
Javascriptis nothing to do with Java!
Ref: http://www.w3schools.com/js/
Javascript Can…• Change HTML Content
• Change HTML Attributes
• Change HTML Styles (CSS)
• Hide/Show HTML Elements
• and more…
Where To
Syntax
Data Type
Null & Undefined
Functions
Objects
Objects Cont.
Objects Cont.
Scope
Events
Strings• var answer = “It’s alright”;
• var answer = “He is called ‘Johnny’”;
• var answer = ‘He is called “Johnny”’;
• var answer = “He is called \”Johnny\””;
• var answer = “He is called” + “Johnny”;
String Methods• var str =“This is an example of string example”;
• var sln = str.length;
• var pos = str.indexOf(“is”);
• var lpos = str.lastIndexOf(“example”);
• var spos = str.search(“is”); //accept regular expressions
• var res = str.slice(“22,28”); //=“string”
• var res = str.substring(“22,28”); //=“string”
• var res = str.substr(“22,6”); //=“string”
• var n = str.replace(“string”,”integer”);
• var n = str.replace(/example/g, “sample”); // g = global match
Numbers
Dates
Arrays
Comparisons
Conditions
Switch
Loop For
Loop While
Break & Continue
Errors
JSON
One more thing…
Id and Class
Q & A
Thanks