Web front end development introduction to html css and javascript
-
Upload
marc-huang -
Category
Technology
-
view
229 -
download
1
Transcript of Web front end development introduction to html css and javascript
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…
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
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>
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
Dropdowns
http://www.w3schools.com/css/css_dropdowns.asp
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…
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