Transcript

HTML and CSS

HTML CSS and JavaScriptProgramming ClubIIT KanpurWork environmentBefore you begin coding ,always set up your work environment to your needsIDENotepad++Sublime Text2IntroductionHTML (HyperTextMarkupLanguage)Displays server response to the clientmarkup=>No logical evaluations, just structuringBrowser reads it and displays the contentOpen your favorite text editor and start coding3HTML Tags HTML Program - Bold - now use Italic - now use Head - Body - Paragraph - 4How it looks like

My First HTML Page This is some text...

5HTML bodySome More TagsImage tag

Hyperlink tag

Click Me

6Some More TagsHeading tag

Heading 1 Sub heading 2 Sub heading 3

div tag

Content

7Table Tag

NameAge

Tom 12

Dick 12

8List Tag

  • Item1
  • Item2
  • Item3

9

Name: Password: Gender: Male FemaleAgree to terms: YesDate:

Forms10Rest of the Tags Complete Specs : http://www.w3.org/TR/html401/11But looks ugly CSS(Cascading Style Sheet)

Separation of Style and Structure

Cleaner code

Better designing

Define in or as a separate file

12Style tag

body {background-color: red;}p{text-align: center;font-size: 14px;}

13Selecting HTML elementsby id#name {padding:10px;}by class.pets{margin:10px;}14Type of PositionsRelativeThe element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position FixedThe element is positioned relative to the browser window AbsoluteThe element is positioned relative to its first positioned (not static) ancestor element.15ShorthandFor margins/paddingsmargin-right/margin-top etc ormargin: 10 10 10 10;

Top-Right-Bottom-Left16Some more useful attributesborderdiv{ border:2px solid; border-radius:25px;}z-index div { z-index:10; }17Some more useful attributesfloatdiv{ float: left;}transform(rotate) div { transform:rotate(7deg); }18Useful Linkshttp://css3maker.com

http://css-tricks.com

FrameworksBootstrapFoundationSkeleton

19BootstrapCSS framework by Twitter

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

Responsive layouts

Great-looking typography20How do you add logic to your page?How do make your page respond to user actions

We need a programmable interface

JavaScript

Its NOT JavaIntroduced first by Netscape in 1994

21Syntaxsimilar to C and JAVAinclude within tagsvar for variables of ALL data typesfor(var i=1;i Works in backgroundExample:Google Instant Searchsearch.junta.iitk.ac.in30JQueryEasier to manipulate DOMLess effort More workExamplegetElementById(abc) reduces to $(#abc)AJAX queries $.ajax({url:your-url,data:{param1:dummy,param2:dummy} }) .success(function(response){ alert(got data+response) });

31Jquery Selectors#id$(#your-id).class$(.your-class)element$(p)//all p elements:first-child$(p:first-child):parent$(#abc:parent)[attribute=value]$([href=abc.php]):even$(tr:even):odd$(tr:odd)32Useful functions of Jquery.css().addclass().animate().append() / .prepend().data().click().setInterval().ajax()33


Top Related