Tag Archives: Flash And Flex Website Design

PHP String Operator

String Operator

When you start writing PHP code, you will realize the importance of string operators. PHP uses twokinds of string operators, concatenation (.) the dot sign and concatenating assignment (.=) the dot and equal to sign.The concatenation operator is used when you want to combine the left and right argument between which the operator is placed. The concatenating assignment operator is a combination of the concatenation operators and the assignment operator.

Concatenation Operator
<?php
   $a = "My name is ";
   $b .= "Rishi";
   echo $b;

The output of the code is: My name is Rishi.

Concatenating Assignment operator
<?php
  $a = "My name is";r/>  $a.= "Rishi";
  echo $a;
?>

The output of the code is: My name is Rishi.

PHP Increment/decrement Operator

Incrementing and Decrementing Operators

There are two types of incrementing and decrementing operators, post incrementing/decrementing operators and pre incrementing /decrementing operators. Post incrementing operators are placed after a variable name, and pre incrementing /decrementing operators are placed before the name.

Operator Usage Output
Post incrementing $a++; Returns the value of $a and then adds 1 to the value
Post decrementing $a–; (2 minus signs) Returns the value of $a and then subtract 1 from the value
Pre incrementing ++$a; Adds 1 to the value of $a and then returns the new value
Pre decrementing –$a; (2 minus signs) Subtract 1 from the value of $a and returns the new value

Consider the fallowing code for a better understanding of incrementing and decrementing operators. This code shows how the post incrementing operators works.

Post Incrementing Operator
<?php
$a = 8;
$b = $a++;
echo $b; //Returns the value 8.
echo $a; //Returns the value 9.
?>
Post Decrementing Operator
<?php
$a = 10;
$b = $a--;
echo $b; // Returns the value 5.
echo $a; // Returns the value 4.
?>
Pre Incrementing Operator
<?php
$a = 8;
$b = ++$a;
echo $b; // Returns the value 9.
echo $a; // Returns the value 9.
?>
Pre Decrementing Operator
<?php
$a = 10;
$b = --$a;
echo $b; // Returns the value 9.
echo $a; // returns the value 9.
?>

String Operator

When you start writing PHP code, you will realize the importance of string operators. PHP uses twokinds of string operators, concatenation (.) the dot sign and concatenating assignment (.=) the dot and equal to sign.The concatenation operator is used when you want to combine the left and right argument between which the operator is placed. The concatenating assignment operator is a combination of the concatenation operators and the assignment operator.

Concatenation Operator
<?php
   $a = "My name is ";
   $b .= "Rishi";
   echo $b;

The output of the code is: My name is Rishi.

Concatenating Assignment operator
<?php
  $a = "My name is";r/>  $a.= "Rishi";
  echo $a;
?>

The output of the code is: My name is Rishi.

Logical Operators

The Logical operators are used in PHP to determine the status of condition . When you use if…else or while statements, logical operator execute code based on the status of a condition .In this section, we will discuss only two logical operators:

The and operate (&&) is used when a statement has two condition to be checked. If both the condition are true , the statement is true,.

The or operator ( || ) is also used when a statement has two condition is true, the statement is true.

<?php
  $a = 10;
  $b = 15;
  $c = $a + $b;
  if( ($a > 5) && $c < 20 ){
    echo "Value of c is less than 20";
  }else {
    echo "Value of c is more than 20"; 
  }
?>

The Output of the above code is: Value of c is more than 20

HTML Elements

What is HTML Elements?

Elements are the basic structure for HTML markup. Elements have two basic properties: attributes and content. Each attribute and each element’s content has certain restrictions that must be followed for an HTML document to be considered valid. An element usually has a start tag (e.g. <element-name>) and an end tag (e.g. </element-name>). The element’s attributes are contained in the start tag and content is located between the tags (e.g. <element-name attribute=”value”> Content </element-name>). Some elements, such as <br>, do not have any content and have no closing tag.

Example

<span id="myId" style="color:blue;" 
title="a2zwebhelp">A2ZWebHelp </span>

Head elements

<title>…</title>: Define a document title. This element is required in every HTML document. Web browsers usually display the title in a window’s title bar when the window is open, and in the task bar when the window is minimized.

<title> My Home Page </title>

<link>: Specifies links to other documents. To Link an external stylesheets you can write:

<link rel="stylesheet" type="text/css" href="path to file">

<script>…</script>: Used to add JavaScript or other scripts to the document.

<script language="javascript" >…</script>

<style>…</style>: Specifies a style for the document.

<style type="text/css">…</style>

<meta>: Can be used to specify additional metadata about a document, such as author, publication date, expiration date, page description, keywords, or other information not provided through the other header elements and attributes. Because of their generic nature, meta elements specify associative key-value pairs. Meta elements can specify HTTP headers which should be sent before the actual content when the HTML page is served from Web server to client: for example,

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

HTML Elements with category

Category Element Name
Top-level Elements HTML
HEAD
BODY
FRAMESET
Head Elements BASE
ISINDEX Removed in HTML 5
LINK
META
SCRIPT
STYLE
TITLE
Generic Block-level Elements ADDRESS
BLOCKQUOTE
CENTER Removed in HTML 5
DELDIV
H1
H2
H3
H4
H5
H6
HR
INS
ISINDEX
NOSCRIPT * Removed in HTML 5
P
PRE
Lists DIR Removed in HTML 5
DL
DT
DD
LI
Tables TABLE
CAPTION
COLGROUP
COL
THEAD
TFOOT
TBODY
TR
TD
TH
Forms FORM
BUTTON
FIELDSET
— LEGEND
INPUT
LABEL
SELECT
— OPTGROUP
— OPTION
 
TEXTAREA
Special Inline Elements A
APPLET Removed in HTML 5
BASEFONT Removed in HTML 5
BDO
BR
FONT Removed in HTML 5
IFRAME Removed in HTML 5
IMG
MAP
— AREA
OBJECT
PARAM
Q
SCRIPT
SPAN
SUB
SUP
Phrase Elements ABBR
ACRONYM Removed in HTML 5
CITE
CODE
DEL
DFN
EM
INS
KBD
SAMP
STRONG
VAR
Font Style Elements B
BIG Removed in HTML 5
I
S
SMALL
STRIKE Removed in HTML 5
TT Removed in HTML 5
U
Frames FRAMESET – Frameset Removed in HTML 5
FRAME – Frame Removed in HTML 5
NOFRAMES – Frames alternate content Removed in HTML 5

 

Responsive Webpage Layout

Responsive Webpage Layout Design

Lets create our first responsive web page. As we discuss before our layout should auto resize in different screen resolution and should work fine in different device like computers, iPads and phones.

Click here to view list of devise and screen resolution in pixels.

HTML Code:

<body>
<div>
<!-- Heasder Starts Here --> 
<header>
<div> <!-- Head section goes here --> </div>
</header>
<!-- menu -->
<nav>
<div> <!-- Top menu goes here --></div>
</nav>
<div>
<!-- Sidebar -->
<aside>
<!-- Left side bar goes here -->
</aside>
<!-- content -->
<section>
<div>
<!-- Text Content Goes here -->
</div>
</section>
</div>
<!-- footer -->
<footer>
<!-- Footer content goes here -->
</footer>
</div> <!-- End of Wrapper -->
</body>

Output:

CSS Code:

body {
font-size: 12px;
line-height: 22px;
font-family: arial, sans-serif;
color: #828282;
background-color:#F1F1F1;
max-width: 980px;
margin: 0 auto;
}
.wrapper{ 
min-height: 100%; 
height: auto !important; 
height: 100%; 
margin: 0 auto;
}

.header{
float: left;
width: 100%;
height: 120px;
border: 5px solid #FFFFFF;
border-radius: 10px;
margin: 5px 0 0 0;
background-color: #e9f7fd;
}
.menu{
float: left;
width: 100%;
height: 40px;
border: 5px solid #007aad; 
border-radius: 10px;
margin: 5px 0 0 0;
background-color:#009bdb;
}
.content{
float: left;
width: 100%;
border: 5px solid #FFFFFF; 
border-radius: 10px;
margin: 5px 0 0 0;
background-color:#FFFFFF; 
}

.left-side{
float: left;
width: 220px; 
margin: 5px;
border-radius: 10px;
background-color:#009bdb;
min-height: 600px; 
height: auto !important; 
height: 600px; 
}
.container{
float: left;
width: 740px; 
min-height: 600px; 
height: auto !important; 
height: 600px; 
margin: 5px;
border-radius: 10px;
background-color:#F5F5F5; 
}
.footer{
float: left;
width: 100%;
height: 60px;
border: 5px solid #FFFFFF;
border-radius: 10px;
margin: 5px 0 10px 0;
background-color: #bdc8cd;
}

/* Lets make the Design Responsive */

@media (min-width: 960px) and (max-width: 1023px) { 
/* CSS for browsers less than 1024px*/
body { max-width: 920px; }
.left-side{ width: 200px; }
.container{ width: 700px; }
}

@media (min-width: 768px) and (max-width: 959px) { 
/* CSS for browsers less than 960px*/
body { max-width: 720px; }
.left-side{ width: 200px; }
.container{ width: 500px; } 
}

@media (min-width: 600px) and (max-width: 767px) { 
/* CSS for browsers less than 768px*/
body { max-width: 580px; }
.left-side{ width: 200px; }
.container{ width: 360px; }
}

@media (min-width: 480px) and (max-width: 599px) { 
/* CSS for browsers less than 600px*/
body { max-width: 460px; }
.header{ width: 450px; border: 3px solid #FFFFFF; border-radius: 5px; }
.menu{ width: 450px; border: 3px solid #007aad; border-radius: 5px; }
.content{ width: 450px; border: 3px solid #FFFFFF; border-radius: 5px; }
.left-side{ width: 445px; margin: 5px 2px 5px 2px;}
.container{ width: 445px; margin: 5px 2px 5px 2px; } 
.footer{ width: 450px;border: 3px solid #FFFFFF; border-radius: 5px; }
}

@media (min-width: 320px) and (max-width: 479px) { 
/* CSS for browsers less than 480px*/
body { max-width: 310px; }
.header{ width: 300px; border: 3px solid #FFFFFF; border-radius: 5px; }
.menu{ width: 300px; border: 3px solid #007aad; border-radius: 5px; }
.content{ width: 300px; border: 3px solid #FFFFFF; border-radius: 5px; }
.left-side{ width: 294px; margin: 5px 2px 5px 2px;}
.container{ width: 294px; margin: 5px 2px 5px 2px; } 
.footer{ width: 300px;border: 3px solid #FFFFFF; border-radius: 5px; }
}

@media (max-width: 319px) { /* CSS For 320px or less browsers */
body { max-width: 100%; }
.left-side{ width: 96%; }
.container{ width: 96%; }
}

Download File from here

Flash Design & Presentations

“IWCn has the mastery over Flash Animation tools and given it a new identity..”

BREAKTHROUGH TECHNOLOGY

IWCn has the ability to actively engage your browsers by capturing their attention in a unique and interactive way that standard HTML sites cannot. We employ techniques that allow search engines to crawl your Flash website, helping you improve your ranking so browsers will find you and discover rich entertaining content that will help convert browsers into customers.

Continue reading