Slide 1

Programming Club IIT Kanpur Slide 2 Work environment Before you begin coding,always set up your work environment to your needs IDE Notepad++ Sublime Text 2 Slide 3 Introduction HTML (HyperTextMarkupLanguage) Displays server response to the client markup=>No logical evaluations, just structuring Browser reads it and displays the content Open your favorite text editor and start coding 3 Slide 4 HTML Tags HTML Program - Bold - now use Italic - now use Head - Body - Paragraph - 4 Slide 5 How it looks likeMy First HTML Page My First HTML Page This is some text... This is some text...5 HTML body Slide 6 Some More Tags Image tagHyperlink tag Click Me Click Me 6 Slide 7 Some More Tags Heading tag Heading 1 Heading 1 Sub heading 2 Sub heading 2 Sub heading 3 Sub heading 3 div tag Content 7 Slide 8 Table Tag NameAge Tom 12 Tom 12 Dick 12 Dick 12 8 Slide 9 List Tag

Item1

Item2Item3 9 Slide 10 Name: Name: Password: Password: Gender: Male Gender: Male Female Female Agree to terms: Yes Agree to terms: Yes Date: Date:Forms 10 Slide 11 Rest of the Tags Complete Specs : http://www.w3.org/TR/html401/http://www.w3.org/TR/html401/ 11 Slide 12 But looks ugly CSS(Cascading Style Sheet) Separation of Style and Structure Cleaner code Better designing Define in or as a separate file 12 Slide 13 Style tag body{ background-color: red; }p{ text-align: center; font-size: 14px; } 13 Slide 14 Selecting HTML elements by id#name{padding:10px;} by class.pets{margin:10px;} 14 Slide 15 Type of Positions Relative The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position Fixed The element is positioned relative to the browser window Absolute The element is positioned relative to its first positioned (not static) ancestor element. 15 Slide 16 Shorthand For margins/paddings margin-right/margin-top etc or margin: 10 10 10 10; Top-Right-Bottom-Left 16 Slide 17 Some more useful attributes border div { border:2px solid; border-radius:25px; } z-index div div { z-index:10; z-index:10; } 17 Slide 18 Some more useful attributes float div { float: left; } transform(rotate) div { transform:rotate(7deg); } div { transform:rotate(7deg); } 18 Slide 19 Useful Links http://css3maker.com http://css-tricks.com Frameworks Bootstrap Foundation Skeleton 19 Slide 20 Bootstrap CSS framework by Twitter Sleek, intuitive, and powerful front-end framework for faster and easier web development. Responsive layouts Great-looking typography 20 Slide 21 How do you add logic to your page? How do make your page respond to user actions We need a programmable interface JavaScript Its NOT Java Introduced first by Netscape in 1994 21 Slide 22 Syntax similar to C and JAVA include within tags var for variables of ALL data types for(var i=1;i Slide 29 Example(contd)My First JavaScript My First JavaScript Email: Email: password: password: Confirm password: Confirm password:29 Slide 30 AJAX Asynchronous requests to server Asynchronous => Works in background Example: Google Instant Search search.junta.iitk.ac.in 30 Slide 31 JQuery Easier to manipulate DOM Less effort More work Example getElementById(abc) reduces to $(#abc) AJAX queries $.ajax({url:your-url,data:{param1:dummy,param2:dummy} }) }).success(function(response){.success(function(response){ alert(got data+response) alert(got data+response) }); }); 31