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

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.

HTML "link" tag

Function:

The HTML <link> tag is used for defining a link to an external document. It is placed in the <head> section of the document.

Difference between HTML and XHTML:

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

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

Example:

<link rel="stylesheet" type="text/css" href="/style.css" />

Attributes:

Attribute	Value	Description
charset	charset	Defines the character encoding of the linked document.
href	URL	Specifies the URL of the resource document.
hreflang	language	Language code of the destination URL
type	mimetype	The MIMEtype of content at the link destination
rel	alternate appendix bookmark chapter contents copyright glossary help home index next prev section start stylesheet subsection	Describes the relationship between the current document and the destination URL.
rev	alternate appendix bookmark chapter contents copyright glossary help home index next prev section start stylesheet subsection	Describes a reverse between the destination URI and the current document.
target	blank _self _top _parent	Specifies the target frame to load the page into.
media	screen tty tv projection handheld print braille aural all	Specifies the device the document will be displayed on

Function:

The HTML <base> tag is used to specify a base URI, or URL, for relative links. For example, you can set the base URL once at the top of your page in header section, then all subsequent relative links will use that URL as a starting point.

Difference between HTML and XHTML:

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

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

Example:

Assume that the absolute address for an image is:

<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" />

Now we insert the <base> tag, which specifies a base URL for all of the links in a page as follows:

This will produce following result:

<head>
    <base href="http://stuaid.blogspot.com/" />
</head>

Now you do not need to use complete path of the image. You can insert above image as follows:

Function:

The HTML <object> tag is used to embed multimedia in an HTML document. The <param> tag is also used along with this tag to define various parameters.

Difference between HTML and XHTML:

NONE

Example:

<object title="Test Object." classid="java.class">
  <param name="audio" value="music.wav" />
  <param name="width" value="600" />
  <param name="height" value="400" />
</object>

Attributes:

Attribute Value Description

align left
right
top
bottom Defines visual alignment of the object

archive URL A space separated list of URL's to archives.

border pixels Specifies border width around the object

classid Class ID Defines a class ID value as set in the Windows Registry or a URL.

codebase URL Specifies tha path where object code is located.

codetype mime type The internet media type of the code referred to by the classid attribute.

data URL Specifies the URL for Object data.

declare declare Defines that the object should only be declared, not created or instantiated until needed.

height pixels Specifies the hight of the object.

hspace pixels Specifies the horizontal space around the object.

name object name Specifies a unique name for the object

standby text Defines a text to display while the object is loading.

type mime type Defines the MIME type of data specified in the data attribute.

usemap URL Specifies a URL of a client-side image map to be used with the object

vspace pixels Specifies the vertical space around the object.

width pixels Specifies the width of the object.

Attribute	Value	Description
align	left right top bottom	Defines visual alignment of the object
archive	URL	A space separated list of URL's to archives.
border	pixels	Specifies border width around the object
classid	Class ID	Defines a class ID value as set in the Windows Registry or a URL.
codebase	URL	Specifies tha path where object code is located.
codetype	mime type	The internet media type of the code referred to by the classid attribute.
data	URL	Specifies the URL for Object data.
declare	declare	Defines that the object should only be declared, not created or instantiated until needed.
height	pixels	Specifies the hight of the object.
hspace	pixels	Specifies the horizontal space around the object.
name	object name	Specifies a unique name for the object
standby	text	Defines a text to display while the object is loading.
type	mime type	Defines the MIME type of data specified in the data attribute.
usemap	URL	Specifies a URL of a client-side image map to be used with the object
vspace	pixels	Specifies the vertical space around the object.
width	pixels	Specifies the width of the object.

HTML Basic Tags

The basic structure for all HTML documents is simple and should include the following minimum elements or tags:

<html> - The main container for HTML pages
<head> - The container for page header information
<title> - The title of the page
<body> - The main body of the page

Remember that before an opening <html> tag, an XHTML document can contain the optional XML declaration, and it should always contain a DOCTYPE declaration indicating which version of XHTML it uses.

Now we will explain each of these tags one by one. In this tutorial you will find the terms element and tag are used interchangeably.

The <html> Element:

The <html> element is the containing element for the whole HTML document. Each HTML document should have one <html> and each document should end with a closing </html> tag.

Before your begin:

Before you begin, it's important that you know Windows or Unix. A working knowledge of Windows or Unix makes it much easier to learn HTML.

You should be familiar with:

Basic word processing using any text editor.
How to create directories and files.
How to navigate through different directories.
Basic understaning on internet browsing using a browser like Internet Explorer or Firefox etc.

Introducing HTML:

HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages. As its name suggests, HTML is a markup language.

Saturday, 21 June 2014

Thursday, 19 June 2014

Example of <div> tag:

Example of ID:

Example of class:

Example of margin:

Example of Photo Gallery:

Example:

Saturday, 14 June 2014

Example of Form Attributes:

Example of Input types:

Example of New Media Elements:

Thursday, 12 June 2014

Tuesday, 10 June 2014

Example:

Example:

Saturday, 7 June 2014

Example:

Example:

Thursday, 5 June 2014

Wednesday, 4 June 2014

Function:

Difference between HTML and XHTML:

Example:

Function:

Difference between HTML and XHTML:

Example:

Function:

Difference between HTML and XHTML:

Example:

Attributes:

Standard Attributes:

Function:

Difference between HTML and XHTML:

Example:

Attributes:

Function:

Difference between HTML and XHTML:

Example:

Function:

The HTML <object> tag is used to embed multimedia in an HTML document. The <param> tag is also used along with this tag to define various parameters.

Difference between HTML and XHTML:

NONE

Example:

<object title="Test Object." classid="java.class"> <param name="audio" value="music.wav" /> <param name="width" value="600" /> <param name="height" value="400" /> </object> Attributes:

The <html> Element:

Before your begin:

Introducing HTML:

<object title="Test Object." classid="java.class"> <param name="audio" value="music.wav" /> <param name="width" value="600" /> <param name="height" value="400" /> </object>

Attributes: