HTML and CSS
Download
Report
Transcript HTML and CSS
Programming Club
IIT Kanpur
Work environment
Before you begin coding ,always set up your work
environment to your needs
IDE
Notepad++
Sublime Text
2
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
HTML Tags
HTML Program - <html> </html>
Bold - <B> </b> now use <strong> </strong>
Italic - <i> </i> now use <em> </em>
Head - <head> </head>
Body - <body> </body>
Paragraph - <p> </p>
4
How it looks like
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
HTML body
5
Some More Tags
Image tag
<img src=“image-url” alt=“message”
width=“12” height=“13”/>
Hyperlink tag
<a href=“example-url.com” >Click Me</a>
6
Some More Tags
Heading tag
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>
div tag
<div id=“id1” class=“class2”>
Content
</div>
7
Table Tag
<table border=“1”>
<tr>
<th>Name</th><th>Age</th>
</tr>
<tr>
<td>Tom</td> <td>12</td>
</tr>
<tr>
<td>Dick</td> <td>12</td>
</tr>
</table>
8
List Tag
<ul>
<li>
Item1
</li>
<li>
Item2
</li>
<li>
Item3
</li>
</ul>
9
Forms
<form action=“your-url” method=“POST”>
Name: <input name=“username” type=“text”>
Password: <input name=“passwd” type=“password”>
Gender: Male<input name=“gender” value=“m”
type=“radio”>
Female<input name=“gender” value= “f”
type=“radio”>
Agree to terms: Yes<input name=“tos” value=“yes”
type=“checkbox”>
Date:<input type=“date” name=“cur_date”>
<input type=“submit” value=“submit”>
</form>
10
Rest of the Tags
Complete Specs : http://www.w3.org/TR/html401/
11
But looks ugly
CSS(Cascading Style Sheet)
Separation of Style and Structure
Cleaner code
Better designing
Define in <style> or as a separate file
12
Style tag
<style>
body
{
background-color: red;
}
p
{
text-align: center;
font-size: 14px;
}
</style>
13
Selecting HTML elements
by id
#name
{
padding:10px;
}
by class
.pets
{
margin:10px;
}
14
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
Shorthand
For margins/paddings
margin-right/margin-top etc
or
margin: 10 10 10 10;
Top-Right-Bottom-Left
16
Some more useful attributes
border
div
{
border:2px solid;
border-radius:25px;
}
z-index
div
{
z-index:10;
}
17
Some more useful attributes
float
div
{
float: left;
}
transform(rotate)
div
{
transform:rotate(7deg);
}
18
Useful Links
http://css3maker.com
http://css-tricks.com
Frameworks
Bootstrap
Foundation
Skeleton
19
Bootstrap
CSS framework by Twitter
Sleek, intuitive, and powerful front-end framework for
faster and easier web development.
Responsive layouts
Great-looking typography
20
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
Syntax
similar to C and JAVA
include within <script> tags
var for variables of ALL data types
for(var i=1;i<10;i++){
if(i%2==1)
alert(“I is odd”);
else
console.log(“I is even”);
}
22
Syntax
Functions
function sum(num1,num2){
return num1+num2;
};
Functions are variables in JavaScript
var sum=function(num1,num2){
return num1+num2;
};
23
Syntax
Objects and arrays
var obj={name:”Tom”, age:17,
friends:[“Dick”,“Harry”]}
getElementById
getElementById(“name”).onclick(function()
{
alert(‘clicked!’);
});
24
DOM
Document Object Model
Structured way to represent HTML
Helps Javascript to
change all HTML elements
change all HTML attributes
change all CSS styles
react to all events
25
Events in JavaScript
ondblclick
onmousedown
onmouseup
onmouseover
onmouseout
onkeyup
onkeypress
onload
onresize
onscroll
onfocus
26
Example
<html>
<head>
<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>My First JavaScript</h1>
<p id="demo">This is a paragraph.</p>
<button type="button" onclick="displayDate()">Display Date</button>
</body>
</html>
27
Example
<head>
<script>
function FormValidate()
{
if(document.getElementById("email").value.indexOf('@')==-1){
alert('email invalid');
event.preventDefault();
return false;
}
if(document.getElementById("passwd").value!=document.getElementById("cpasswd").value){
alert('passwords dont match');
event.preventDefault();
return false;
}
return true;
}
</script>
</head>
28
Example(contd)
<body>
<h1>My First JavaScript</h1>
<form action="abc.php">
Email: <input type="text" id="email" name="email">
password:<input type="password" id="passwd"
name="passwd">
Confirm password:<input type="password" id="cpasswd"
name="cpasswd">
<input type="submit" onclick="FormValidate()">
</form>
</body>
29
AJAX
Asynchronous requests to server
Asynchronous => Works in background
Example:
Google Instant Search
search.junta.iitk.ac.in
30
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){
alert(‘got data’+response)
});
31
Jquery 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’)
32
Useful functions of Jquery
.css()
.addclass()
.animate()
.append() / .prepend()
.data()
.click()
.setInterval()
.ajax()
33