Tag Archives: Areas

PHP Assignment Operator

Assignment Operators

Assignment operators are use to assign a specific value to variable. They are also use to change the existing value of a variable by adding or subtracting from the variable ‘s current value. A few examples are =, +=, -= and .=.
In PHP you can use more than one assignment operator in a single statement, as shown below:

 $a = ($b=4) + ($c=5);

The variable $a, $b and $c are now integer types and will hold the values 9, 4 and 5, respectively.

Operator Usage Output
= (equal to) $a = 9; Assign value 9 to variable $a;
+= (plus equal to) $a += 9; Adds the original value assign to the variable $a to 9. Now the value of $a will be 9.
-= (minus equal to) $a += 3; Subtract the number specified from the original value of $a. Now the value of $a will be 6.
.= (dot equal to) $a .=” new numbers.”; (add) the new value specified with the original value of the variable. Now the value of $a will be 9 new numbers.

HTML Special Characters

The table display the list of HTML Special Characters with Number and Name. Though in different character set the special characters looks like box or different shapes it is a best practices to use number or name in place of special characters.

Character Entity Number Entity Name
" "
' '
& & &
< &#60; &lt;
> &#62; &gt;
¡ &#161; &iexcl;
© &#169; &copy;
® &#174; &reg;
&trade; &#153;
« &#171; &laquo;
» &#187; &raquo;
° &#176; &deg;
± &#177; &plusmn;
&#182; &para;
¼ &#188; &frac14;
½ &#189; &frac12;
¾ &#190; &frac34;
× &#215; &times;
÷ &#247; &divide;
¢ &#162; &cent;
£ &#163; &pound;
¤ &#164; &curren;
¥ &#165; &yen;

HTML Tables

Tables are defined with the <table> tag. A table is divided into rows (<tr>), and each row is divided into cells (<td>). The cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

Example:

<table>
<tr>
<td>&nbsp;</td>
</tr>
</table>

Tables and the Attribute:

Border: If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.
To display a table with borders, you will have to use the border attribute:

<table border="1">
 <tr>
   <td>&nbsp;</td>
 </tr>
</table>

Width: You can specify the width of the table either in percentage or pixel.

<table border="1" width="100%" >
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

Cellspacing/ Cellpadding:

<table border="1" width="100%" 
cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

HTML Attributes

Many HTML tags have a unique set of their own attributes. These attributes are divided into core attributesinternationalization attributes, and scripting events. Attributes are always specified in the start tag and come in name/value pairs like: name=”value”

Example

<a href="http://www.a2zwebhelp.com">Link to my website.</a>
<p id="firstp">This is my first paragraph.</p>
<h2 align="center" title="center text">Centered Heading</h2>

HTML Attributes with category

Category Attributes Name
Core Attributes id <p id=”myid”>My Text.</p>
class <div clsss=”newclass”> Text </div>
name <form name=”arup”></form>
style <span style=”font-family: arial”> Arial</span>
title <h1 title=”Heading”> Heading </h1>
alt <img src=”” alt=”my image”>
align <p align=”left”></p>
valign <td valign=”top”>&nbsp;</td>
bgcolor <td bgcolor=”#808080″>&nbsp;</td>
background <td background=”filepath”>&nbsp;</td>
width <img width=”100px”>
height <img width=”100px” height=”100px”>
Internationalization Attributes LANG <span lang=en>Welcome</span>
DIR
Common Scripting Events ONCLICK mouse button is clicked on an element.
ONDBLCLICK mouse button is double-clicked on an element
ONMOUSEDOWN mouse button is pressed over an element
ONMOUSEUP mouse button is released over an element
ONMOUSEOVER mouse is moved onto an element
ONMOUSEMOVE mouse is moved while over an element
ONMOUSEOUT mouse is moved away from an element
ONKEYPRESS a key is pressed and released over an element
ONKEYDOWN a key is pressed down over an element
ONKEYUP a key is released over an element

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