HTML CSS and JavaScript

Download HTML CSS and JavaScript

Post on 22-Feb-2016




5 download


HTML CSS and JavaScript. Programming Club IIT Kanpur. Work environment. Before you begin coding ,always set up your work environment to your needs IDE Notepad++ Sublime Text. Introduction. HTML ( HyperTextMarkupLanguage ) Displays server response to the client - PowerPoint PPT Presentation


HTML and CSSHTML 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 tagHyperlink tagClick Me 6Some More TagsHeading tag Heading 1 Sub heading 2 Sub heading 3div tagContent 7Table TagNameAgeTom 12Dick 128List TagItem1Item2Item39Name: Password: Gender: Male FemaleAgree to terms: YesDate:Forms10Rest of the Tags Complete Specs : looks ugly CSS(Cascading Style Sheet)Separation of Style and StructureCleaner code Better designingDefine in or as a separate file12Style tagbody {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.comhttp://css-tricks.comFrameworksBootstrapFoundationSkeleton19BootstrapCSS framework by Twitter Sleek, intuitive, and powerful front-end framework for faster and easier web development.Responsive layoutsGreat-looking typography20How do you add logic to your page?How do make your page respond to user actionsWe need a programmable interfaceJavaScriptIts NOT JavaIntroduced first by Netscape in 199421Syntaxsimilar to C and JAVAinclude within tagsvar for variables of ALL data typesfor(var i=1;i Works in backgroundExample:Google Instant 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