:::::Students Aid:::::: 2014

Student Name	Total	Rank
BASIT HUSSAIN QADRI	94.25	1
MUHAMMAD HUSSAIN	91.6667	2
SHAFAQ ALI MAZHAR	89.375	3
DANISH MANSOOR ALAM	89.125	4
IRMA BAIG	88	5
SYED ANAS QAMAR	86.25	6
MUHAMMAD WAQAR HASHMI	81.5833	7
SYED SAAD ALI	80.5417	8
UNAIZA SHAKEEL	79.625	9
DANISH AHMED FAROOQUE	78.875	10
MUHAMMAD MUEEZ SIDDIQUI	78.25	11
SYED MOIZ ALI	76.625	12
HASAN MUHAMMAD YOUSUF	74.3333	13
HAFIZ AFFAN BAIG	72.0417	14
HAFIZ M. JIBRAN NASEEM	71.7917	15
MUHAMMAD MUBEEN SHAHZAD	70.9167	16
SYED MUHAMMAD SHAHEER NAQVI	60.6667	17
SYED MUHAMMAD ALI	4.58333	18

Lecture # 12

Following Topics were covered in Twelfth Lecture:

prompt, confirm, alert
Click on button for text

Example 1:

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript">

prompt("What is your name?");
confirm("It will be closed now.");
alert("Its goona be closed now.");

</script>

</head>
</html>

Example 2:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function papu() 
{
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</head>
<style>
p
{
 background-color:yellow;
 color:red;
}
</style>
<body>
<button onclick="papu()">Click me</button>
<p id="demo"> </p>
</body>

</html>

Lecture # 11

Following Topics were covered in Eleventh Lecture:

for loop
while loop
do-while loop

Example of for loop:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var num=prompt("Enter a number");

for (var i=1;i<11;i++)
{
 pro=num*i;
 document.write(num + " x " + i + " = " + pro);
 document.write("<br/>");
}
</script>

</head>
</html>

Example of while loop:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var num=prompt("Enter a number");
var i=1;
while(i<11)
{
 pro=num*i;
 document.write(num + " x " + i + " = " + pro);
 document.write("<br/>");
 i++;
}
</script>

</head>
</html>

Example of do-while loop:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var num=prompt("Enter a number");
var i=1;
do
{
 pro=num*i;
 document.write(num + " x " + i + " = " + pro);
 document.write("<br/>");
 i++;
}
while(i<11)
</script>

</head>
</html>

Lecture # 10

Following Topics were covered in Tenth Lecture:

JavaScript (Nested if)

Example 1:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

var name=prompt("Enter your name : ");

if (name=="talha")
 {
  prompt("Yes, he is the student of this class.");
 }
 else if (name=="umeir")
 {
  prompt("Yes, he is the student of this class.");
 }
 else if (name=="ammad")
 {
  prompt("Yes, he is the student of this class.");
 }
 else if (name=="owais")
 {
  prompt("Yes, he is the student of this class.");
 }
 else if (name=="irma")
 {
  prompt("Yes, she is the student of this class.");
 }
 else if (name=="shafaq")
 {
  prompt("Yes, she is the student of this class.");
 }
 else
 {
  prompt("he is not the student of my class.");
 }
</script>
</head>
</html>

Lecture # 09

Following Topics were covered in Ninth Lecture:

JavaScript (Add, Subtract, Multiply, Divide)
JavaScript (if-else-Grade Calculator)
HTML5 Form with Table

Example 1:

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript">
var num1=prompt("Enter first number : ");
var num2=prompt("Enter second number : ");

var pro=num1*num2;
var dif=num1-num2;
var div=num1/num2;
var sum=parseInt(num1) + parseInt(num2);

document.write("num1 is " + num1);
document.write("<br/>num2 is " + num2);

document.write("<br/>The product is " + pro);
document.write("<br/>The difference is " + dif);
document.write("<br/>The quotient is " + div);
document.write("<br/>The sum is " + sum);

</script>

</head>

<body>
</body>
</html>

Example 2:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

var per=prompt("Enter your percentage : ");

if (per>80)
{
 document.write("A+ grade");
}
else if (per>70)
{
 document.write("A Grade");
}
else if (per>60)
{
 document.write("B grade");
}
else
{
 document.write("You are papu bacha.");
}
</script>
</head>
</html>

Example 3:

<!DOCTYPE html>
<html>
<body>
<table>
<form autocomplete="on">
<tr>
<td>First name : </td>
<td><input type="text" name="fname" > </td>
</tr>

<tr>
<td> Last name : </td>
<td> <input type="text" name="lname" autofocus> </td>
</tr>

<tr>
<td>Enter a number between 18 and 100 : </td>
<td> <input type="number" min="18" max="100"> </td>
</tr>

<tr>
<td>Select files to upload :</td> 
<td> <input type="file" multiple> </td>
</tr>

<tr>
<td>Enter your email Id : </td>
<td> <input type="email" placeholder="abc@papu.com"> </td>
</tr>

<tr>
<td>Username : </td> 
<td><input type="text" required> </td>
</tr>

<tr>
<td>Enter a number multiple of 5 : </td>
<td> <input type="number" step="5"> </td>
</tr>

<tr>
<td> <input type="submit" value="Papu"> </td>
</tr>

</form>
</table>
</body>
</html>

Lecture # 08

Following Topics were covered in Eighth Lecture:

Transition
Animation

Example of Transition:

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background-color:red;
transition:height 2s;
-webkit-transition:height 2s;
}
div:hover
{
height:300px;
}

</style>
</head>
<body>

<div> </div>

</body>
</html>

Example of Animation:

<!DOCTYPE html>
<html>
<head>
<style>
div
{
height:100px;
width:200px;
background-color:green;
-webkit-animation:papu 15s;
animation: papu 15s;
}
@-webkit-keyframes papu
{
from {background-color:black;}
to {background-color:yellow;}
}
</style>
</head>
<body>

<div> yeh papu papu kia ha </div>

</body>
</html>

Saturday, 21 June 2014

HTML5 - Session # 09

OBJECTIVES

Describe how to create and format tables
Explain the table size and the width of a column
Explain the process of merging table cells
Explain the page layout for tables

To download the slides of HTML5-Session # 09, Click Here.

HTML5 - Session # 08

OBJECTIVES

Explain HTML5 semantic tags
Explain HTML5 semantic tag layouts
Explain the usage of navigation bar
Describe a text-based and graphic navigation bar
Explain image mapping
Explain divisions in HTML5

To download the slides of HTML5-Session # 08, Click Here.

HTML5 - Session # 07

OBJECTIVES

Explain graphic formatting in Web pages
Explain graphic insertion, sizing, and padding
Explain CSS3 Animation
Describe the use of CSS3 on mobile devices

To download the slides of HTML5-Session # 07, Click Here.

Thursday, 19 June 2014

Lecture # 07

Following Topics were covered in Sixth Lecture:

<div> tag
id (#para1)
Class(.)
margin
Photo Gallery

Example of <div> tag:

<!DOCTYPE html>
<html>
<body>

<div style="width:500px;">
<div style="background-color:yellow; text-align:center;">
This is Header
</div>

<div style="background-color:pink; width:100px; height:200px; float:left; text-align:center;">
<b>Menu</b> </br>
Option 1 </br>
Option 2 </br>
Option 3 </br>
Option 4 </br>
</div>

<div style="background-color:orange; width:400px; height:200px; float:right;text-align:center;">
This is content elemet.
</div>

<div style="background-color:red; width: 500px;text-align:center;">
This is footer
</div>

</div>
</body>
</html>

Example of ID:

<!DOCTYPE html>
<html>
<head>
<style>
#para1
{
text-align:center;
color:red;
}
#para2
{
text-align:right;
color:green;
}

</style>
</head>

<body>
<p> This is a simple paragraph. </p>
<p id="para1"> This is a Formatted paragraph (Para1). </p>
<p id="para2"> This is a Formatted paragraph (Para2). </p>
</body>
</html>

Example of class:

<!DOCTYPE html>
<html>
<head>
<style>
.center
{
text-align:center;
color:red;
}
.right
{
text-align:right;
color:green;
}

</style>
</head>

<body>
<p> This is a simple paragraph. </p>
<p class="center"> This is a Formatted paragraph (Para1). </p>
<p class="right"> This is a Formatted paragraph (Para2). </p>
<h1 class="center"> This is a heading </h1>
</body>
</html>

Example of margin:

<!DOCTYPE html>
<html>
<head>
<style>
p
{
background: yellow;
color:red;
}
p.margin
{
margin-top:100px;
margin-bottom:100px;
margin-left:100px;
margin-right:200px;
}
</style>
</head>

<body>
<p> This is a paragraph </p>
<p class="margin"> This is formatted text </p>
</body>
</html>

Example of Photo Gallery:

<!DOCTYPE html>
<html>
<head>
<style>
div.img
{
 margin:5px;
 padding:5px;
 border:2px solid black;
 float:left;
 text-align:center;
}
div.img img
{
 margin:5px;
 border:2px solid black;
}
div.img a:hover img
{
 border:2px solid blue;
}
div.desc
{
 text-align:center;
 width:120px;
 margin:5px;
}

</style>
</head>

<body>
<div class="img">
<a target="_blank" href="http://wordlesstech.com/wp-content/uploads/2013/11/Qatar-2022-FIFA-World-Cup-Stadium-by-Zaha-Hadid-2.jpg">
<img src="http://wordlesstech.com/wp-content/uploads/2013/11/Qatar-2022-FIFA-World-Cup-Stadium-by-Zaha-Hadid-2.jpg" width="110px" height="90px"/>
</div>
<div class="desc">
Add a description of the image
</div>

<div class="img">
<a target="_blank" href="http://d.ibtimes.co.uk/en/full/1382212/fifa-world-cup-2014.jpg">
<img src="http://d.ibtimes.co.uk/en/full/1382212/fifa-world-cup-2014.jpg" width="110px" height="90px"/>
</div>
<div class="desc">
Add a description of the image
</div>


<div class="img">
<a target="_blank" href="http://d1mxyp5ceukbya.cloudfront.net/images/2014-world-cup-logo.jpg">
<img src="http://d1mxyp5ceukbya.cloudfront.net/images/2014-world-cup-logo.jpg" width="110px" height="90px"/>
</div>
<div class="desc">
Add a description of the image
</div>


<div class="img">
<a target="_blank" href="http://www.bobswatches.com/rolex-blog/wp-content/uploads/2014/06/World-Cup-2014-Stadiums.jpg">
<img src="http://www.bobswatches.com/rolex-blog/wp-content/uploads/2014/06/World-Cup-2014-Stadiums.jpg" width="110px" height="90px"/>
</div>
<div class="desc">
Add a description of the image
</div>


</body>
</html>

Lecture # 06

Following Topics were covered in Sixth Lecture:

CSS on link

Example:

<!DOCTYPE html>
<html>
<head>
<title> Learning CSS 3 </title>
<style>

a:link
{
color:purple;
}

a:visited
{
color:green;
}

a:hover
{
color:red
}

h1, h2
{
color:red;
text-align:center;
}
p
{
font-family:elephant;
color:green;
font-size:50px;
}
</style>
</head>
<body>
<h1 > This is Heading 1 </h1>
<h2> This is Heading 2 </h2>
<p> This is a paragraph </p>
<a href="https://www.google.com.pk/"> This is a link </a> </br>
<a href="http://www.aptech.com"> This is a link </a>

</body>
</html>

Saturday, 14 June 2014

HTML5- Session # 06

OBJECTIVES

List and explain text and font styles
Describe inline spans
Explain paragraph indentation and application of border
Explain horizontal paragraph alignment
Explain vertical spacing within a paragraph

To download the slides of HTML5-Session # 06, Click Here.

HTML5- Session # 05

OBJECTIVES

Identify the new functions of CSS3
Explain the different types of selectors
Explain nested tags
Define Classes and IDs for applying styles
Explain the process to apply styles to hyperlink

To download the slides of HTML5-Session # 05, Click Here.

HTML5- Session # 04

OBJECTIVES

Describe hyperlinks
Explain absolute and relative paths
Explain how to hyperlink to a Web page and e-mail address
Explain how to hyperlink to anchors and other content

To download the slides of HTML5-Session # 04, Click Here.

Lecture # 05

Following Topics were covered in Fifth Lecture:

Form Attributes
input types
New Media Elements (audio/video)

Example of Form Attributes:

<!DOCTYPE html>
<html>
<body>
<form autocomplete="on">
First name : <input type="text" name="fname" ></br>
Last name : <input type="text" name="lname" autofocus> </br>

Enter a number between 18 and 100 : 
<input type="number" min="18" max="100"> </br>

Select files to upload : 
<input type="file" multiple> </br>

Enter your email Id :
<input type="email" placeholder="abc@papu.com"> </br>

Username : 
<input type="text" required> </br>

Enter a number multiple of 5 :
<input type="number" step="5"> </br>

<input type="submit" value="Papu">

</form>
</body>
</html>

Example of Input types:

<!DOCTYPE html>
<html>
<body>
<form>
Choose your favourite color:
<input type="color">
</br>

Enter date:
<input type="date">
</br>

Enter month:
<input type="month">
</br>

Enter Mobile #
<input type="tel">
</br>

</form>
</body>
</html>

Example of New Media Elements:

<!DOCTYPE html>
<html>
<body>
<form>
<audio controls autoplay loop muted 
src="http://media.djmazadownload.com/music/indian_movies/Ek%20Villain%20(2014)/02%20-%20Ek%20Villain%20-%20Banjaara%20[DJMaza.Info].mp3
">
</audio>
</br>

<video src="http://www.w3schools.com/html/movie.mp4" height="240" width="100" autoplay>

</video>


</form>
</body>
</html>

Thursday, 12 June 2014

Student of the Month (May)-Danish Mansoor Alam of Batch 1405B1

By the grace of Almighty Allah, My student Danish Mansoor Alam of Batch:1405B1 is selected as the "Student of The Month (May)". Congratulation to all the Batch mates specially Danish Mansoor Alam. Keep working hard. Best of Luck.

Tuesday, 10 June 2014

Lecture # 04

Following Topics were covered in Fourth Lecture:

Forms

Example:

<!DOCTYPE html>
<html>
<form>
First Name : <input type="text" name="fname"> </br>
Last Name : <input type="text" name="lname"> </br>

Password : <input type="password" name="pwd"> </br>

Gender : 
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female </br>

Hobbies :
<input type="checkbox" name="hoby" value="cricket">Cricket
<input type="checkbox" name="hoby" value="cooking">Cooking
<input type="checkbox" name="hoby" value="chitchat">Chatting
<input type="checkbox" name="hoby" value="swimming">Swimming
<input type="checkbox" name="hoby" value="hacking">Hacking </br>

Where do u live? <select name="city">
<option name="karachi"> Karachi </option>
<option name="lahore"> Lahore </option>
<option name="islamabad"> Islamabad </option>
<option name="rawalpindi" selected> Rawalpindi </option>
</select> </br>

<textarea rows="10" cols="30">
This is text area.
</textarea> </br>

<fieldset>
<legend> Personal Information </legend>
Name : <input type="text"> </br>
School/College : <input type="text"> </br>
Address : <input type="text"> </br>
Cell # <input type="text"> </br>
</fieldset>

<fieldset>
<legend> Friend's Information </legend>
Name : <input type="text"> </br>
School/College : <input type="text"> </br>
Address : <input type="text"> </br>
Cell # <input type="text"> </br>
</fieldset>

<select>
<optgroup label="Pakistan">
<option> Karachi </option>
<option> Lahore </option>
</optgroup>
<optgroup label="USA">
<option> New York </option>
<option> Washington </option>
</optgroup>
<optgroup label="Autralia">
<option> Sydney </option>
<option> Livepool </option>
</optgroup>
</select> </br>


<input list="country" name="country">
<datalist id="country">
<option> Pakistan </option>
<option> Austrlia </option>
<option> India </option>
<option> China </option>
<option> Japan </option>
<option> Russia </option>
<option> Iran </option>
</datalist></br>

<input type="button" Value="Papu">
<input type="submit" value="Submit">

</form>
</html>

Lecture # 03

Following Topics were covered in Third Lecture:

Table

Example:

<!DOCTYPE html>
<html>
<head>
<style>
thead{color:red;}
tbody{color:green;}
tfoot{color:blue;}
table, tr, td, th
{
border:2px solid black;
background:pink;
}
</style>
</head>
<body>
<table>

<thead>
<th> Name </th>
<th> Roll # </th>
<th> Marks </th>
</thead>

<tbody>
<tr>
<td> Mubeen </td>
<td> 1 </td>
<td> 95 </td>
</tr>

<tr>
<td> Waqar </td>
<td> 2 </td>
<td> 93 </td>
</tr>

<tr>
<td> Basit </td>
<td> 3 </td>
<td> 96 </td>
</tr>

<tr>
<td> Hussain </td>
<td> 4 </td>
<td> 92 </td>
</tr>

<tr>
<td> Unaiza </td>
<td> 5 </td>
<td> 93 </td>
</tr>

<tr>
<td> Hasan </td>
<td> 6 </td>
<td> 98 </td>
</tr>

<tr>
<td> Irma </td>
<td> 7 </td>
<td> 91 </td>
</tr>

<tr>
<td> Danish </td>
<td> 8 </td>
<td> 99 </td>
</tr>

<tr>
<td> Anas </td>
<td> 9 </td>
<td> 100 </td>
</tr>

<tr>
<td> Danish Mansoor </td>
<td> 10 </td>
<td> 92 </td>
</tr>
</tbody>

<tfoot>
<tr>
<td> Total </td>
<td> ----- </td>
<td> 956 </td>
</tr>
</tfoot>

</table>
</body>
</html>

Saturday, 7 June 2014

Lecture # 02

Following Topics were covered in Second Lecture:

Image
Bold
Italic
Underline
Emphasized
Small
Deleted
Inserted
Strong
Code
Subscript
Superscript
Anchor tag

Example:

<!DOCTYPE html>
<html>
<body>

<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" width="400" height="200">
<p> This is <b> Bold </b> text </p>
<p> This is <i> Italic </i> Text </p>
<p> This is <em> emphasized </em> Text </p>
<p> This is <strong> Strong </strong> Text </p>
<p> This is <code> coded </code> Text </p>
<p> This is <small> SMALL </small> Text </p>
<p> This is <u> underlined </u> Text </p>
<p> This is <del> deleted </del> Text </p>
<p> This is <ins> inserted </ins> Text </p>
<p> The is an example of <sub>subscript</sub>text.</p>
<p> H<sub>2</sub> + O<sub>2</sub> ------>H<sub>2</sub>O
<p> The is an example of <sup>superscript</sup> text.</p>
<p> (a+b)<sup>2</sup>=a<sup>2</sup>+2ab+b<sup>2</sup> </p>
<a href="https://www.google.com.pk"> Click Here to go to Google </a>

</body>
</html>

Lecture # 01

Following Topics were covered in First Lecture:

Paragraph
Heading
Ordered List
Unordered list

Example:

<!DOCTYPE html>
<html>
<body>

<p> This is a paragraph </p>

<h1> This is Heading 1 </h1>
<h2> This is Heading 2 </h2>
<h3> This is Heading 3 </h3>
<h4> This is Heading 4 </h4>
<h5> This is Heading 5 </h5>
<h6> This is Heading 6 </h6>

<ul type="square">
<li> Karachi </li>
<li> Lahore </li>
<li> Peshawar </li>
<li> Islamabad </li>
</ul>

<ol type="a">
<li> Pakistan </li>
<li> India </li>
<li> Australia </li>
<li> South Africa </li>
</ol>

</body>
</html>

Thursday, 5 June 2014

HTML5 - Session # 03

OBJECTIVES

· Explain the Heading tag

· Explain the different tags related to formatting

· Explain monospaced font, preformatted text, and block quotation

· Describe the different types of lists

· Explain the procedure to change the background color and image

To download the slides of HTML5-Session # 03, Click Here.

HTML5 - Session # 02

OBJECTIVES

· Explain the elements constituting an HTML tag

· Describe DOCTYPE declarations

· Explain the basic tags in HTML

· List the different data types, attributes, and entities of HTML5

· Describe container and standalone tags

· Explain the role of HTML5 in Mobile devices

To download the slides of HTML5-Session # 02, Click Here.

HTML5 - Session # 01

OBJECTIVES

· Explain the evolution of HTML

· Explain the page structure used by HTML

· List the drawbacks in HTML 4 XHTML

· List the new features of HTML 5

· Explain CSS

· Explain JavaScript

· Explain jQuery

· Explain browser support for HTML 5

To download the slides of HTML5-Session # 01, Click Here.

Wednesday, 4 June 2014

HTML "meta" tag

Function:

The HTML <meta> tag is used for declaring metadata for the HTML document.

Difference between HTML and XHTML:

In HTML the <meta> tag has no end tag.

In XHTML the <meta> tag must be properly closed.

Example:

<html>
<head>
<title>HTML meta tag</title>
<meta name="keywords" content="HTML, meta tag, metadata" />
<meta name="description" content="Brief description of the document" />
<meta http-equiv="refresh" content="10" />
</head>
<body style="background-color:orange">
Document content goes here
</body>
</html>

Function:

The HTML <style> tag is used for declaring a script (such as JavaScript) within your HTML document.

Difference between HTML and XHTML:

NONE

Example:

<script type="text/javascript">

      document.write("Hello Javascript!")

</script>

This will produce following result:

Hello Javascript!

Function:

The HTML <style> tag is used for declaring style sheets within the head of your HTML document.

Difference between HTML and XHTML:

NONE

Example:

<head>
<style type="text/css">
  h1 { color:#F1F1F1 }
</style>
</head>

Attributes:

Attribute	Value	Description
type	text/css	Specifies the style sheet language as a content-type (MIME type).
media	screen tty tv projection handheld print braille aural all	Specifies the device the document will be displayed on.

Standard Attributes:

Attribute	Description
dir	Specifies the direction of the text
id	Document wide identifier
lang	Sets the language code.
xml:space	Sets the language code.