html css and javascript
DESCRIPTION
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 PresentationTRANSCRIPT
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