Saturday, 22 June 2013

SENDING HTML AND PLAIN TEXT MAILS IN PHP

How to Send HTML and Plain Text Emails in PHP

We can send HTML emails through PHP, But the major issue we need to take care is some of the mail clients doesn't support HTML mails, some times they display our HTML message as HTML coding instead of design, to solve from the issue we need to add a text version of the message along with our email.

In the below code, I added both HTML and plain text message formats, if the client's Mail client is not supported HTML Emails, it automatically displays the plain text version, Normally major mail clients supports HTML message, but some others not.

-->

HTML Code (FORM) - contact.html

<form method="post" name="frmCheckout" action="post.php">

<div>Name</div>
<div class="quotecontact2">
<input name="nname" class="cform" id="nname" size="37">
</div>

<div >Email Address</div>

<div>
<input name="email" class="cform" id="email" size="37">
</div>

<div>Phone</div>
<div >
<input name="mphone" class="cform" id="mphone" size="37">
</div>

<div>Country</div>
<div>
<input name="nationality" class="cform" id="nationality" size="37">
</div>

<div>Intrested Services</div>
<div>

<input name="webdesign" id="webdesign" type="checkbox" class="fpr" value="Web Design" />

<span class="cform0" >Web designing</span>

<input name="webhost" id="webhost" type="checkbox" class="fpr" value="Web Hosting" />

<span class="cform0">Webhosting</span></div>

<input name="seo" id="seo" type="checkbox" class="fpr" value="SEO" />

<span class="cform0">SEO</span>

<input name="blog" id="blog" type="checkbox" class="fpr" value="Blog" />

<span class="cform0">Blog</span>

</div>

<div>Message</div>
<div>
<textarea name="msg" cols="40" rows="6" class="cform1" id="msg"></textarea>
</div>

<div>

<input name="submit" type="submit" value="Submit">

<input name="RESET" type="reset" id="RESET">

</div>

</form>

PHP Code - Post.php

<?PHP
//Posting Input values
$nname=$_POST['nname'];
$email=$_POST['email'];
$mphone=$_POST['mphone'];
$nationality=$_POST['nationality'];

//Posting Check box values
$webdesign = $_POST[webdesign];
$webhost = $_POST[webhost];
$seo = $_POST[seo];
$blog = $_POST[blog];

//Posting Messagebox values
$msg=$_POST['msg'];

# -=-=-=- MIME BOUNDARY
$mime_boundary = "Tom's Cyber Explorations | http://cyberexploration.blogspot.in |".md5(time());
# -=-=-=- MAIL HEADERS
$to = "me@mymailid.com"; // Your email address must be added here
$subject = "Enquiry";
$headers = "From: ".$HTTP_POST_VARS['name'];
$headers .= "Reply-To".$_POST['email'];
$headers .= "MIME-Version: 1.0\n";
$headers .= "Content-Type: multipart/alternative; boundary=\"$mime_boundary\"\r\n";
$headers .= "Content-Transfer-Encoding: 8bit\n\n";

// Starting Plain text message
$message .= "--{$mime_boundary}\r\n";
$message .= "Content-Type: text/plain; charset=UTF-8\n";
$message .= "Content-Transfer-Encoding: 8bit\n\n";

$message .="Name = $nname | Email Address - $email | My Phone number - $mphone | Country - $nationality | Interested Services - $webdesign , $webhost , $seo, $blog | Message - $msg "; // Message Body

$message .= "--{$mime_boundary}--\r\n";
// Ending Plain text message

// Starting HTML message
$message .= "--{$mime_boundary}\r\n";
$message .= "Content-Type: text/html; charset=UTF-8\n";
$message .= "Content-Transfer-Encoding: 8bit\n\n";

$message .= "<html>\n";
$message .= "<body style=\"font-family:Verdana, Geneva, sans-serif; font-size:14px; color:#006393;\">\n";

$message .= "<table width=\"800\" height=\"159\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" >";
$message .="<tr>";
$message .="<td height=\"66\" colspan=\"4\" bgcolor=\"#002953\"></td>";
$message .="</tr>";
$message .="<tr>";
$message .="<td width=\"1%\"></td>";
$message .="<td colspan=\"3\"> </td>";
$message .="</tr>";

$message .="<tr>";
$message .="<td> </td>";
$message .="<td></td>";
$message .="<td>:</td>";
$message .="<td></td>";
$message .="</tr>";

$message .="<tr>";
$message .="<td> </td>";
$message .="<td width=\"200\"><b>Name</b></td>";
$message .="<td align=\"left\" >:</td>";
$message .="<td>$nname</td>";
$message .="</tr>";

$message .="<tr>";
$message .="<td> </td>";
$message .="<td></td>";
$message .="<td>:</td>";
$message .="<td></td>";
$message .="</tr>";

$message .="<tr>";
$message .="<td> </td>";
$message .="<td><b>Email</b></td>";
$message .="<td>:</td>";
$message .="<td>$email</td>";
$message .="</tr>";

$message .="<tr>";
$message .="<td> </td>";
$message .="<td></td>";
$message .="<td>:</td>";
$message .="<td></td>";
$message .="</tr>";

$message .="<tr>";
$message .="<td> </td>";
$message .="<td><b>Phone</b></td>";
$message .="<td>:</td>";
$message .="<td>$mphone</td>";
$message .="</tr>";

$message .="<tr>";
$message .="<td> </td>";
$message .="<td></td>";
$message .="<td>:</td>";
$message .="<td></td>";
$message .="</tr>";

$message .="<tr>";
$message .="<td> </td>";
$message .="<td><b>Country</b></td>";
$message .="<td>:</td>";
$message .="<td>$nationality</td>";
$message .="</tr>";

$message .="<tr>";
$message .="<td> </td>";
$message .="<td></td>";
$message .="<td>:</td>";
$message .="<td></td>";
$message .="</tr>";

$message .="<tr>";
$message .="<td> </td>";
$message .="<td><b>Interested Services</b></td>";
$message .="<td>:</td>";
$message .="<td>$webdesign</td>";
$message .="</tr>";

$message .="<tr>";
$message .="<td> </td>";
$message .="<td><b></b></td>";
$message .="<td></td>";
$message .="<td>$webhost</td>";
$message .="</tr>";

$message .="<tr>";
$message .="<td> </td>";
$message .="<td><b></b></td>";
$message .="<td></td>";
$message .="<td>$seo</td>";
$message .="</tr>";

$message .="<tr>";
$message .="<td> </td>";
$message .="<td><b></b></td>";
$message .="<td></td>";
$message .="<td>$blog</td>";
$message .="</tr>";

$message .="<tr>";
$message .="<td> </td>";
$message .="<td></td>";
$message .="<td>:</td>";
$message .="<td></td>";
$message .="</tr>";

$message .="<tr>";
$message .="<td> </td>";
$message .="<td><b>Message</b></td>";
$message .="<td>:</td>";
$message .="<td>$msg</td>";
$message .="</tr>";

$message .="<tr>";
$message .="<td> </td>";
$message .="<td></td>";
$message .="<td>:</td>";
$message .="<td></td>";
$message .="</tr>";

$message .="<tr>";
$message .="<td height=\"21\" colspan=\"4\" bgcolor=\"#CCCCCC\"></td>";
$message .="</tr>";
$message .="</table>";
$message .= "</body>\n";
$message .= "</html>";
# -=-=-=- FINAL BOUNDARY
$message .= "--{$mime_boundary}--\r\n";
// Ending HTML message
$message .= preg_replace("/(\r\n|\r)/", "\n", $message);
# -=-=-=- SEND MAIL
$mail_sent = @mail( $to, $subject, $message, $headers );
//echo $mail_sent ? "Mail sent" : "Mail failed";
if($mail_sent)
{
echo "√ Hi<strong>".' '.$HTTP_POST_VARS['nname'].' '."</strong> your message has been sent<BR><button onclick='history.go(-1);'>Back </button>

";
}
else
{
echo "Opps your message has been not sent";
}
?>

Thursday, 6 June 2013

HOW TO BE SECURE IN CYBER WORLD

Protect Yourself from Vulnerable Threats

-->

If we are driving a car we should know and strictly follow the traffic rules of that driving environment. Likewise i would like to recommend you that, understand the cyber laws before start surfing the internet, you can use the search term "cyber law" in Google will give you the fine results about it.

Cyber world is a complex network consists of fine and nasty things, its our choice to go with good or bad. If we are going with fine and good things we have better opportunity to develop ourselves by using internet. While you are surfing internet you think nobody is seeing the actions you are doing in internet, yes in your room may be you are the only person there and nobody is surrounded there for watching you, but when you connected to internet there a lot of eyes watching your movements (not watching every time, but they can watch). If you are a continues user in internet keep in mind that the ISP can get all the details of website we are surfing and ISP can identify who we are, but ISP will not point the movements of a particular user you or me, with out any legal issues. These all facilities are not forbidding our freedom to surf webpages, but in common sense, we can say internet is not for cheating, and threatening others, but for research, trade, education and establishing good relation ships among the outside world. Otherwise doing nasty things like hacking , sending malicious codes, unauthorized access of data, posting contents supporting terrorism and pornography, IPR(intellectual property infringement) violations, Credit card Fraud and more will treat as a serious offense.

"My computer is attacked by virus". It is a statement some what related to "My House is attacked by robbers" . Think , if our home is attacked by thieves, it is because of our irresponsibility to certain extent. Like wise, if our computer is attacked by viruses it is due to the negligence of its administrator to a certain level. Following are the steps we consider to protect our system from malicious threats.

Use only the licensed version of application software, if we are using licensed version of software, the particular software vendor have the responsibility to protect our system from threats happening from their application.
Use a good antivirus software. (updating anti virus is a good idea, but in certain cases some updates may break data libraries of our operating system will leads to software crash.
Next we need to consider an important thing that is ,use only a good search engine to find our needs, some of the websites available in search engines have dangerous malicious codes not only attack and harm our computer , but also capture our authorization details stored in our computer, frankly speaking the username and password of our email accounts, ftp accounts, even bank accounts also. Be safe, In my point of view using a well known search engine as our search provider will reduce the weight of issue, because they provide a facility of warning message for the websites having malicious codes that hacks our system, we can see a warning message in search result some thing like "This site may harm your computer" or something like that, clicking on that link may affect viruses on our system and the accurate solution to resolve from that dangerous risk is replacing the operating system(formatting) and scan other hard drives with a good anti virus software.
Another agent for transferring virus between computers are pen drives (flash drives), Flash drive is not a subject related to cyber world or internet, but for the information of readers iam explaining it. Viruses from pen drives doesn't catch directly, but when we connect pen drive in our system, if auto play option in our operating system is turned on, it might be a higher risk that the system must be attacked by viruses, because if connected pen drive have viruses it will create a auto play text file in pen drive will run the viruses instantly when we connect the flash drive in our system. We can turn off auto play option of our system by
Start -> programs -> Accessories -> command prompt and type gpedit.msc will display a small window, Select Administrative Templates ->system -> turnoff auto play -> enabled ->Turnoff Auto play on -> All drives -> click apply -> ok. It will turn off the auto play option of pen drive but risk for affecting viruses are still there. Scanning the USB drive using a good anti-virus application will kill the infected files and it is secure to open.

Protect our Email From unauthorized access

Here in this subject we don't want to do anything additionally, because email providers are providing their own security levels, but we must consider certain factors,

First thing we must consider is before entering the user name and password in the input box, check the URL you entered is correct or not in address bar( address bar is the area where you put the domain name, on top of browser), hackers may do phishing by designing a same webpage like our email service provider and host it in different domain name, sometimes some people may put their user name and password their and clicking submit button will receive our username and password to the hacker.

Another issue is hackers can access our email by using cookies stored in our computer, as these cookie will stole from the victims computer(cache memory of browser) and access email accounts through that cookies, once we login to our email, we started a new session, the part of that session is stored in the cache memory of our browser, hijacking or stealing that session from our browser and accessing our email accounts is some what related to session hijacking. To protect our email from session hijacking, the user must logout or signout their email account after the use, signout and logout option closes the session we opened.

It is an important step but some times we forget to LOGOUT or SIGNOUT our email account, instead of doing logout or signout, we may click the close button in browser, it is one of the worst idea and it will not close your session opened for accessing the mail, and your email can be accessed by next user of same computer by typing the same domain, some times it will automatically redirect to previous visited email account.

Additionally beware of fraud mails, which is commonly received in the SPAM box , in my point of view opening and reading spam messages will not cause any problem, but accessing or clicking links available there and downloading attachments will affect malicious threats to your computer and clicking links available on spam messages will catch passwords directly or indirectly

Another thing we need to consider is we must change the password of our email account at least once in a month , because there are lot of applications available for generation passwords through mixed characters.

Moreover it would be nice if we clear the cache memory of our browser once in a week, but clearing cache memory in daily will increases the bandwidth usage of our internet service data pack, because browser caching is the process of storing some part of a website we visiting , while we again visit the same website the browser will not reload the website fully, it will load the partial content only from the remote server because some part of website is already cached in our browser while we visited the same website before, that how caching produces the results faster and reduces the bandwidth usage of Internet data pack.

Monday, 20 May 2013

BEGINNERS WEBSITE DESIGN

Web Design Tutorial for Beginners | Learn Website Designing

All adults are become in such manner from the stage of Kid, likewise all expert computer programmers are become in such manner from a beginner.

First of all I would like to appreciate you, for take a time to look into by Website Designing Tutorial. I am writing this blog from my few years of experience in cyber world especially in the field of website designing. If you are a beginner in web development, you will be the next expert/web programmer. All experts programmers are come from the situation where your are now, but he/she is become an expert now, because they are submitted thyself for their dreams. We should have a aim before start anything, that aim brings us into higher positions, That why we say "AIM AT STARS THEN WE CAN REACH AT THE TOP OF A TREE". But i recommend you that, If you Aim at stars and believe in God, God will take you into higher positions, Then you will reach not in the top of a tree you will reach at the point where you are expected, over the stars. We will become and expert through experience. We say he is an expert Pilot, means he have years of experience in flying flights, So if you want to be an expert in website designing/web programming, you need to spend your time for that also. in one words when you interact with it, you will get more experience, then you will become more expert.

Before all you need to understand who are you ?

Now no shrub had yet appeared on the earth and no plant had yet sprung up, for the Lord God had not sent rain on the earth and there was no one to work the ground, but streams came up from the earth and watered the whole surface of the ground. Then the Lord God formed a man from the dust of the ground and breathed into his nostrils the breath of life, and the man became a living being.(Genesis 2:5).

Did you understand the life in you was the GIFT OF GOD and you are the creature of God ?. If you are the creature of God, you are person having great abilities, don't think what others say about you good or bad, but God have a good plan about you, that you are. We have great abilities but, it should be known only , when we start to believe in the our Heavenly father Jesus Christ.

How to begin? Where to start ?

First of all we need to pray before starting our every work. Then God will give the wisdom to do the things more successfully, moreover we will get the opportunity to study the new things when we do something. God will make our losses are our success and success as our victory.

Now its the time to go and look into our real subject how become a good web designer. First we need a tool or application to develop our website, There are lot of applications available in market, but i would like to recommend Macromedia Dreamweaver for beginners, it provides a lot facilities to study new things in web design.Dream weaver provides some additional theme support which help the beginners to build website easily an can understand the things more frequently.

First we need understand what is a web page and it consists of what/ in which logic it is developed. A webpage is a HTML page, which is processed by server side scripting languages like PHP ASP.NET etc.. OR it is statically developed as same as in HTML. It is the part of an intermediate or expert programmer to look the server side scripting languages like PHP, ASP.net and more. So we can go through basic HTML page. According to my principle i am classifying an HTML pages as 3. Which is

Header - Header is defined using head tag called (opening tag) </head> (closing tag). Header consist of Title, Meta Data, External style sheet files, External JavaScript files and more. In header we includes the contents that should be loaded or cached first, when the web page loads. Suppose if we call a style sheet (css file) in footer, it loads only after loading all other contents of web page, In style sheet we define the structure and layout of website, then the webpage will fix the layout and alignment of content only after loading the whole webpage, it will provide a bad look on the website if the content is not loaded fully in slow internet connections.

Body - We define a body section of webpage by using body tag called (opening tag)</body> (closing tag). This the section where, real design and coding must adopted by a developer/designer. We can put the width of our body in either pixel or percentage., but i will recommend pixel, because it stays same in all screen resolutions. It is more complicated if we use percentage as width, because we can't assure that is there any overflow of layers occur in different screen resolutions. But i strongly insist one important thing that is, millions of users are now surfing internet through their handsets, you should keep a mobile version of your website also, that we will discuss later. The minimum width of a website (or body wrapper) is normally taken as 970px- 974px, which is the recommended standard. Taking beyond more or less than that is not at all a good idea,and in such circumstances we need to keep different designs for different screen resolutions, that subject will be understand when you are a intermediate.

Footer- There is nothing with footer in a webpage with defining tags like head or body, but if it is web page we must design a footer inside the body by giving some navigational links, contact details, and copyright notice.

Header of a webpage

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Website Designing Tutorial | Learn Website Designing</title>

<meta name="description" content="A Good website designing tutorial to learn basic of web development"/>    
<meta name="keywords" content="Web designing Tutorials, Tutorials for Web development, Learn Website Designing"/>   
<meta name="keyphrases" content=""/>  <meta name="robots" content="index,follow"/>   
<meta name="copyright" content="youdomainname.ed"/>    
<meta name="document-distribution" content="Global"/>    
<meta name = "author" content="Your company Name"/>

<link rel="SHORTCUT ICON" href="http://youdomainname.ed/iamges/favicon.ico" />

<link href="http://youdomainname.ed/css/mystyle.css"type="text/css" rel="stylesheet"/>

<script type="text/javascript" src="http://youdomainname.ed/js/myjavascript.js"></script>

</head>

This is a header of a webpage. Which refers all major parts required in a website. For detailed explanations, please refer the following.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>
Website Designing Tutorial | Learn Website Designing
</title>

Title is important on your webpage, it is displayed in search result with blue colored and with big font size.

<meta name="description" content="A Good website designing tutorial to learn basic of web development"/>

Meta Description Should be related to your Title, which is displayed as description text in search results.

<meta name="keywords" content="Web designing Tutorials, Tutorials for Web development, Learn Website Designing"/>

Meta Key words should also be related to your Title. and description, which merely defines in which keywords your site should appear.

<meta name="keyphrases" content=""/>

Meta Key phrases is not important in my point of view, it doesn't give any priority in my experience, if you want you can add it by combining Keywords, Description and Title.

<meta name="robots" content="index,follow"/>

We have three options -

"index,follow" If you set index,follow the crawler of search engines will crawl and follow all the links in the current page and put it in search results.

"index,nofollow" The crawler will only look at this page and will NOT crawl or access the links or sub pages in this page.

"noindex, nofollow" The crawler will NOT crawl this page and will NOT crawl or access the links or sub pages in this page.

<meta name="copyright" content="youdomainname.ed"/>

You can put your the name of your domain in this part.

There are three forms of distributions 1. Global - accessible to all (everyone) 2. Local - distribution of document 3. IU - for internal use not for public distribution

.

<meta name= "author" content="Your company Name"/>

You can put name of the author who written the meta content, your name/company name.

<link rel="SHORTCUT ICON" href="http://youdomainname.ed/iamges/favicon.ico" />

The above code refers an icon for your webpage, you can save your icon file using the extension .ICO

<link href="http://youdomainname.ed/css/mystyle.css"type="text/css" rel="stylesheet"/>

The above code refers calling a external cascade style sheet called "mystyle.css" you must give the correct location or path of your style sheet document correctly in domain name.

<script type="text/javascript" src="http://youdomainname.ed/js/myjavascript.js"></script>

The above code refers calling an external java script file myjavscript.js.

</head>

Body of a webpage -

We define a body section of webpage by using body tag called <body>(opening tag)</body> (closing tag). This the section where, real design and coding must adopted by a developer/designer. First of all we must create layer wrapping all our contents, there is only wrapper layer in a webpage, so we can give it as ID instead of CLASS. following are the examples for giving id and class in a layer .

<div id="wrapper"></div> Giving ID for layer
<div class = "wrapper"></div> Giving Class for layer.

The important thing you should consider is you can use only one id wrapper one time in a webpage, but if you are defined it in class you can use class my-class in different parts of webpage.

Following refers true
For ID
<div id="wrapper1"></div>
<div id ="wrapper2"></div>

For class
<div class="my-class"></div>
<div class ="my-class"></div>

Following refers False
For ID
<div id="wrapper1"></div>
<div id ="wrapper1"></div>

Hope this will understand how to use id and class in a webpage, there is no limit for adding classes and ids in webpage, but you should keep the above rule in mind. Then we called the id "wrapper" and class "my-class' in our webpage. Then where the id wrapper is and class my-class in coded. For that we must create a cascade style sheet document called (CSS) in webpage.

For creating a style sheet you can read the post CSS styling techniques.

First we need to create a folder in our hard drive for our webpage

Open the your E drive of your system and create a new folder by right clicking New ->folder and rename it as My site.

Open the dream weaver and click File -> New -> Basic page -> HTML. Again click File -> New -> Basic page -> CSS.

Click File -> Save Us -> mystyle as (File name) & Save as type as Style Sheets (CSS)

Now save your style sheet file in the folder we created "my site"

Now we need to go our webpage on tab Untitled-1.html then click View -> code.

Next step is we need to call our style sheet file on our webpage by using following code in our header in between <head></head> (if any doubt look above coding of header).
<link href="mystyle.css"type="text/css rel="stylesheet"/>

Up to this we are created a style sheet and a webpage (HTML page) and we called the style sheet on our webpage by using above command

Next we create a root layer in between <body> </body> tags with an ID name wrapper.as HTML coding <div id="wrapper"> </div> Remember we only called the ID wrapper in the layer(div), but the properties of id is not yet defined in style sheet, if its property is not defined in style sheet it displays nothing.

Then our next step is to define the properties of id wrapper in our style sheet. As we studied already an id is created by using # as #wrapper. Our id wrapper is the root id support all sub layers. We can create an id as follows. (CSS coding). along with the wrapper we are creating a layer #header for our site with its content is in h1 tag.

CSS Coding for Wrapper, Header and H1

#container { clear:both; overflow:auto;}

#menu {float:left;width:300px; border-right: 1px solid #D2D2D2;background:#F4F4F4;min-height:400px;}

#wrapper { width:970px; overflow:auto; border:1px solid #EAEAEA; margin:0px auto; background-color:#FFFFFF }

#header { border-bottom:1px solid #EAEAEA;; }

h1 { font-family: Arial, Helvetica, sans-serif; font-size:21px; padding-left:18px; color:orange; }

We created the properties of our id wrapper, header and h1 as above in our mystyle.css file.
Now we want to create the root layer called wrapper in HTML page as follows.Additonally we want a header in our web page. we need to create a sub layer for header inside the wrapper layer as follows(#header). Header of our website should be defined in h1(heading 1 tags), it gives more priority in search result for the keyword we added in between <h1> </h1> in our tutorial the word "My site".

HTML Coding for Wrapper, Header and H1

following is the structure of the wrapper and header of webpage, #wrapper refers the black border, #header refers the pink border

Now its time to create the parent layer for our menu and description of website called #container as follows.

#container { clear:both; overflow:auto;}

#menu {float:left;width:300px; border-right: 1px solid #D2D2D2;background:#F4F4F4;min-height:400px;}

#description {float:left;width:620px; min-height:400px;font-family:Arial, Helvetica, sans-serif;font-size:12px; color:#555555; line-height:20px;padding:20px; text-align:justify;}

h2{font-family:Arial, Helvetica, sans-serif;color: #737373;font-size:18px; border-bottom: 1px solid red;padding-bottom:8px;}

HTML Coding for Container, menu, description and heading 2

following is the structure of our webpage when #container refers the red border , #menu refers the green border and #decrption refers the blue border.

<h2> My Website </h2>

Header is defined using head tag called <head>(opening tag) </head>(closing tag). Header consist of Title, Meta Data, External style sheet files, External JavaScript files and more. In header we includes the contents that should be loaded or cached first, when the web page loads. Suppose if we call a style sheet (css file) in footer, it loads only after loading all other contents of web page, In style sheet we define the structure and layout of website, then the webpage will fix the layout and alignment of content only after loading the whole webpage, it will provide a bad look on the website if the content is not loaded fully in slow internet connections.

Body - We define a body section of webpage by using body tag called <body>(opening tag)< (closing tag). This the section where, real design and coding must adopted by a developer/designer. We can put the width of our body in either pixel or percentage., but i will recommend pixel, because it stays same in all screen resolutions. It is more complicated if we use percentage as width, because we can't assure that is there any overflow of layers occur in different screen resolutions. But i strongly insist one important thing that is, millions of users are now surfing internet through their handsets, you should keep a mobile version of your website also, that we will discuss later. The minimum width of a website (or body wrapper) is normally taken as 970px- 974px, which is the recommended standard. Taking beyond more or less than that is not at all a good idea,and in such circumstances we need to keep different designs for different screen resolutions, that subject will be understand when you are a intermediate.

</div>

</div>

Please note the above HTML code must put inside the layer wrapper(As wrapper is the root layer), which is put after the closing tag #header. For more information check the HTML coding of wrapper.

Footer of a webpage -
Footer is created as the part of body and there is not tag defintions for footer.as head and body have. Designing a Footer provides the facility to add contact details, important links, Copyright information and more about the website under every page.

CSS Coding for Footer

#footer{border-top :1px solid #EAEAEA;; min-height:50px; background-color:#F2F2F2; font-family:Arial, Helvetica, sans-serif; font-size:11px; padding-left:10px; padding-top:10px;}

HTML Coding for Footer

following is the structure of the footer of webpage, #footer refers the yellow border

Our final output for HTML and CSS, while we integrate this whole coding, we get the following output . Additionally we applied a background-color for our body of webpage in bold

Final Coding of Stylesheet(CSS)mystyle.css

body{background-color:#0A5989;}

#wrapper { width:970px; overflow:auto; border:1px solid #EAEAEA; margin:0px auto; background-color:#FFFFFF }

#header { border-bottom:1px solid #EAEAEA; }

h1 { font-family: Arial, Helvetica, sans-serif; font-size:21px; padding-left:18px; color:orange; }

#container { clear:both; overflow:auto;}

#menu {float:left;width:300px; border-right: 1px solid #D2D2D2;background:#F4F4F4;min-height:400px;}

#description {float:left;width:620px; min-height:400px;font-family:Arial, Helvetica, sans-serif;font-size:12px; color:#555555; line-height:20px;padding:20px; text-align:justify;}

#footer{border-top :1px solid #EAEAEA;; min-height:50px; background-color:#F2F2F2; font-family:Arial, Helvetica, sans-serif; font-size:11px; padding-left:10px; padding-top:10px;}

Final Coding of our HTML page

<h2> My Website </h2>

</div>

</div>

</div>

Save your webpage

After copying the above code to the body section of your webpage and save it as file name index.htm OR html
We save the landing page or Home page of our webpage as index.html because when we type a URL www.yourwebsite.ed it automatically redirects to the index.htm file as first page.
Next step is to copy the Final Coding of Stylesheet(CSS)mystyle.css on your file mystyle.css and save it as mystyle.css.
Back to your webpage(index.html) on dreamweaver and press F12 button on your keyboard to see the preview of your webpage.

Screen Shot of our webpage

Sunday, 19 May 2013

CSS STYLING TECHNIQUES

TECHNIQUES FOR CREATING STYLE SHEETS (MYSTYLE.CSS)

What is a style sheet?

We call CSS called Cascade Style Sheet is an important part of webpage, what will be the effect if we wear some dirty clothes and moves in front of public, the same effect will bring if we are not added style sheet to our webpage. It fixes the width, height, alignment , color, border, background etc of our webpage.as well texts, There are two types of style sheets external and internal style sheets.

Internal style sheets are written inside the webpage in between <head></head> or <body></body>. We can prepare an internal style sheet by using following code inside your HTML page.

<style>

#wrapper {

width:970px;

overflow:auto;

border: 1px solid #EAEAEA;

background-color: #F2F2F2;

}

.my-class{

font-family:Arial, Helvetica, sans-serif;

font-size:12px; color:#5E5E5E;

line-height:21px;

padding:5px;

}

</style>

External style sheets are written outside the webpage by creating a file called mystyle.css/or anything else with extension .css and calling it in the header part of webpage using following HTML code.

  <link href="http://youdomainname.ed/css/mystyle.css"

  type="text/css" rel="stylesheet"/>

We can create an external style sheet as follows. Open Dreamweaver click File -> NEW and click on css, it will open an empty css file , there you can write the following code.

   

   #wrapper {

width:970px;

overflow:auto;

border: 1px solid #EAEAEA;

background-color: #F2F2F2;

}

.my-class{

font-family:Arial, Helvetica, sans-serif;

font-size:12px; color:#5E5E5E;

line-height:21px;

padding:5px;

}

An ID is created using putting # before the name.

A Class is created using putting . before the name.

FYI All webpages using external style sheet and call it in webpage using above code. Internal style sheets are written in certain circumstances only.

We can call a ID or class in a tags <DIV> , <SPAN> , <P>, <TABLE> <BODY> and more. The important thing we should consider is we can use only one id wrapper one time in a webpage, but if we are defined it in class we can use class my-class in different parts of webpage.

Following refers true

For ID

<div id="wrapper1">True/different id are used in same page
</div>

<div id="wrapper2">True/different id are used in same page
</div>

For class

<div class="my-class"> My Content </div>

<div class ="my-class">My Content </div>

Following refers False

Wrong content/same id used more than once in same page

</div>

Wrong content/same id used more than once in same page

</div>

There are lot of properties available with style sheets commonly used and important properties are listed below.

background-color - set background color

background-image -set background image

background position - set starting position of background image

background-repeat - sets how a background image will be repeated.

border - set border of layer - Eg - border : 1px solid #EAEAEA;

border-(top,left,right) - setting border on left only Eg - border-left: 1px solid #EAEAEA

color- color of fonts (letters or write ups)

display -it defines how an element is displayed .

float - float a layer

font-size - defines the size of font

font-family - defines which font family

font-style - specify the font-style ofa text

font-weight - defines the font weight, bold or not

height - defines height of a layer

letter spacing - defines spacing between letters

line height - this property refers the line-height of text in a paragraph

list style - type of list item marker in a list

margin - margin refers how much margin we must keep between layers

margin-(top,bottom,left,right)

max -width - refers maximum width of a layer

min-width - refers minimum width of layer

max-height - refers maximum height of layer.

min-height - refers minimum height of a layer

overflow - overflow adjust the height of a layer according to the content

width - refers width of a layer

padding - padding property refers the spaces between element border and content.

padding-(left,right,top, bottom)

text-align - text-align refers alignment of a text

text-transform- text transform adjust and text into upper case ,lower case.

A class or ID can be created with any of the above properties. Suppose we want to create a class with yellow background color, red foreground, with font-family Arial, we create as following

.myclass { background-color :yellow; color ; red;font-family : Arial, Helvetica, sans-serif; width:200px; height:200px; }

Calling the class in layer by using following HTML code

Pages

Saturday, 22 June 2013

SENDING HTML AND PLAIN TEXT MAILS IN PHP

How to Send HTML and Plain Text Emails in PHP

Thursday, 6 June 2013

HOW TO BE SECURE IN CYBER WORLD

Protect Yourself from Vulnerable Threats

Protect our Email From unauthorized access

Monday, 20 May 2013

BEGINNERS WEBSITE DESIGN

Web Design Tutorial for Beginners | Learn Website Designing

All adults are become in such manner from the stage of Kid, likewise all expert computer programmers are become in such manner from a beginner.

Before all you need to understand who are you ?

How to begin? Where to start ?

CSS Coding for Wrapper, Header and H1

HTML Coding for Wrapper, Header and H1

HTML Coding for Container, menu, description and heading 2

CSS Coding for Footer

HTML Coding for Footer

Final Coding of Stylesheet(CSS)mystyle.css

Final Coding of our HTML page

Save your webpage

Screen Shot of our webpage

Sunday, 19 May 2013

CSS STYLING TECHNIQUES

TECHNIQUES FOR CREATING STYLE SHEETS (MYSTYLE.CSS)

Following refers true