Showing posts with label HTML/CSS/PHP. Show all posts
Showing posts with label HTML/CSS/PHP. Show all posts

Sunday, 24 June 2012

Publish Your Own Website For Free

I have been planning to write on this topic for quite some time so finally here it comes.

Before actually trying to publish our website lets understand what this whole process takes.By this I mean that lets first understand the pre requisites for publishing the website and also understand what makes them so very much needed for publishing the website.

The pre requisites are :
  1. A domain name.
  2. The hosting service provider.
  3. Host.
  4. Template. 
1. The Domain name: Is basically used to point to a particular IP address . That means it maps or identifies the IP address associated to the name of your website. To understand it better lets take a few examples of the same:

  • gov
  • co
  • co.cc
  • com
  • in
  • net
  • org
what makes it so important ?
Since it is difficult to remember the IP addresses you need alphabetical name to identify our site and also to let the audience find you on the the internet you need a unique IP address.

2.The Hosting Service provider:  Is the service that allows us to publish our web pages online on the internet. To publish the web pages all we need is some space on the server.Don't worry if you want to have this space for free. There are loads of companies which provide you with this server space for free :) .
An example of such a provider can be 000webhost (http://www.000webhost.com/). 

A website cannot exist without a web space and thus without a webhost,  well by this we just answered the question "what makes it so important ?"

3.The host: The application that basically holds the content for our website.Don't worry they are also available for free. An example of this is FileZilla  which can be used on Windows, Linux,Mac OS X . You can easily download , install and upload your file to the your server space of your website. Sites like GoDaddy, 000webhost recommend FileZilla.

4. Template:  This is all about the look and feel of the website we are trying to create and publish. If you have a good knowledge of Html and CSS you can self code it otherwise you can buy it or even download it for free from some free template providing website. 

now lets come to the steps for actually publishing the website that too for free :) .

Step 1: Registering the domain name: Register the domain name.
Step 2:Getting the server space for the website: 


Step 3: Getting the template : Buy it or download for free or Code it or download it and make your own edits .
Step 4: Download and install the host and then uploading the files to the server:






Sunday, 17 June 2012

Frame Set and Frames in HTML webpage

Frames:



Frames are graphical and logical subdivisions of a single web "page" into two or more sections or areas .
Frames make your website less linear but more browse able --- This means that : 
Frames allow one to create web sites which are less "linear" than non-framed sites. But on the other hand 
frames make a site more "browse able"as easy as flipping  through a book. Most

current sites use a two-frame format. The first serves as the site navigation index, while the other is 
the frame holding the selected "content" pages



Good Points of Frames:



  • Making efficient use of frames and maximizing "content" page space .
  • Lets you decide and divide the content on the page . For example you can divide the content on the page from the HTML links on the page .
  • Improves readability for the users as the content is already logically divided into sections.
Frame Set:

The frameset tag in HTML ,<FRAMESET> defines the general layout of a web page that uses frames. <FRAMESET> is used in conjunction with<FRAME> and <NOFRAMES>.

<FRAMESET> creates a table for content in which each rectangle (called a "frame") in the table holds a separate document or a HTML page. In its simplest use, <FRAMESET> states how many columns and/or rows will be in the "table"



Difference between Frames and frameset:

  • The <frame> tag defines one particular window (frame) within a <frameset>.
  • Each <frame> in a <frameset> can have different attributes, such as border, scrolling, the ability to resize, etc.
Frameset attributes:

A. cols  - values can be pixels, %, * -Specifies the number and size of columns in a frameset

B. rows - values can be pixels, %, * -Specifies the number and size of rows in a frameset

Frameset important property:

Frameset can be nested .
In the following example, the outer FRAMESET divides the available space into three columns.
 The inner FRAMESET then divides the second area into two rows of unequal height.
<FRAMESET cols="25%, 25%, 50%">
     ...contents of first frame...
     <FRAMESET rows="40%, 50%">
        ...contents of second frame, first row...
        ...contents of second frame, second row...
     </FRAMESET>
     ...contents of third frame...
</FRAMESET>

NOFRAMES:

This element specifies the content that should be displayed when the frames are not displayed.The user agent that supports frames can only display the content of the this element when it is congirured to not display the frames.

Lets see an example :

<html>
<head>
<title>Demo of NOFRAMES</title>
</head>
<body>
<frameset cols="50%,50%">
<frame src="test1.html"/>
<frame src="test2.html"/>
<noframes>
<p>Hey ! This is the non frame version of the document</p>
</noframes>
</frameset>
</body>
</html>




Vertical use of Frames:


Example.html

<!DOCTYPE html>
<html>
<frameset cols="20%,70%">
<frame src="C:\Users\SunShine\Desktop\New folder\nav.html"/>
<frame src="C:\Users\SunShine\Desktop\New folder\content.html"/>
</frameset>
</html>


nav.html



<html>
<head>
<title>Nav</title>
<body bgcolor=”red”>
<h1>Navigation area</h1>
<ul>
<li><a href=”#”>some</a></li> // # means empty link
<li><a href=”#”>something</a></li>
<li><a href=”#”>something else</a></li>
</ul>
</body>
</head>
</html>



content.html



<html>
<head>
<title>Nav</title>
<body bgcolor=”red”>
<h1>Navigation area</h1>
<ul>
<li><a href=”#”>some</a></li>
<li><a href=”#”>something</a></li>
<li><a href=”#”>something else</a></li>
</ul>
</body>
</head>
</html>




Horizontal use of Frames:



Example.html

<!DOCTYPE html>
<html>
<frameset rows="20%,70%">
<frame src="C:\Users\SunShine\Desktop\New folder\nav.html"/>
<frame src="C:\Users\SunShine\Desktop\New folder\content.html"/>
</frameset>
</html>

nav.html

<html>
<head>
<title>Nav</title>
<body bgcolor=”red”>
<h1>Navigation area</h1>
<ul>
<li><a href=”#”>some</a></li> // # means empty link
<li><a href=”#”>something</a></li>
<li><a href=”#”>something else</a></li>
</ul>
</body>
</head>
</html>

content.html

<html>
<head>
<title>Nav</title>
<body bgcolor=”red”>
<h1>Navigation area</h1>
<ul>
<li><a href=”#”>some</a></li>
<li><a href=”#”>something</a></li>
<li><a href=”#”>something else</a></li>
</ul>
</body>
</head>
</html>

hey guys  i have uploaded a video on the same topic on you tube : http://www.youtube.com/watch?v=0wWMcmJDGfQ

Part 1:


Part 2:



Saturday, 16 June 2012

DHTML - Dynamic Html


• Dynamic HTML is a combination of Hypertext Markup Language (HTML), Cascading Style
Sheets (CSS), and JavaScript.
• HTML provides document structure and context for the information contained in a Web page.
• CSS provides the details on how to present that information.
• JavaScript provides the interactivity and dynamism.


Cascading Style Sheet (CSS)

Cascading refers to a certain set of rules that browsers use, in cascading order, to determine how to use the style information. Such a set of rules is useful in the event of conflicting style information because the rules would give the browser a way to determine which style is given precedence.

• CSS provides a rich selection of presentation effects that can be applied to all HTML elements, such as color, background, margins,and borders.
• With CSS, Web developers can set indents on paragraphs, specify a default font for an entire
Web site with one line of code, use small caps,assign an image as a bullet for a list item, and accomplish many more things that are impossible with HTML alone.


Types of CSS:


  1.  Embedded or Internal Style sheet
  2.  External or Linked Style sheet
  3.   Inline style sheet



Benefits:
•Authors and Web site managers may share style sheets across a number of documents (and sites).
•Authors may change the style sheet without requiring modifications to the document.
•User agents may load style sheets selectively (based on media descriptions).
1.Embedded or Internal Style Sheet:

•You can put style sheet rules in the head of the document by <style>.

example.html
<head>
<style>
p { color: red; font-size:120%; }
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>


2. External or Linked Style Sheet

You can separate style sheets from HTML documents. Style sheet files are imported to HTML documents by <link>.

[example.html]

<head>
<link rel="stylesheet" type="text/css" href="example.css">
</head>
[example.css]
p{ color: red; foto-size: 120%; }


3.Inline Style Sheet

•The start tags can contain style sheet rules directly in HTML documents by the style attribute.

[example.html]

<p style="color: red; font-size:120%; ">
This is a paragraph</p>






CSS syntax

•This syntax has two parts, the selector and the declaration.
Selector: Specifies the target of styling.
Declaration: Specifies the property and value.
•Declaration is contained between {" ... "}.
•Declaration end with a semicolon.

p{ color: red; }


HTML

•Hyper Text Markup Language (HTML) Basics
HTML is a “mark-up language”
You add the mark-up tags to your text document
HTML is a language of mark-up “tags” in angle brackets: <>
each tag has a name and may have one or more quoted attributes
eg. <p class=”thesis” style=”color: red”>
Tags usually come in pairs (with some exceptions)
<html>...</html>, <body>...</body>, <p>...</p>, <hr>, <br>
Web pages are free-form input; line breaks can be used most anywhere and don't affect the appearance of the document
Yes, your entire page could be a single line of text!


JavaScript

JavaScript was designed to add interactivity to HTML pages
JavaScript is a scripting language
A scripting language is a lightweight programming language
JavaScript is usually embedded directly into HTML pages
JavaScript is an interpreted language (means that scripts execute without preliminary compilation)
Everyone can u.se JavaScript without purchasing a license

• JavaScript brings dynamism and interactivity to DHTML.
• Not only can it provide interactivity with event handlers, it can also modify document object properties on the fly, pop up windows, and write content dynamically.
• In the HTML arena, JavaScript is primarily used to modify stylesheet properties on the fly, after a Web page is loaded, to create animations and special effects.

What JavaScript can do?

JavaScript gives HTML designers a programming tool - HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages
JavaScript can react to events - A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element
JavaScript can read and write HTML elements - A JavaScript can read and change the content of an HTML element
JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing
JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser
JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve information on the visitor's computer


DHTML EXAMPLE:

change background color: Develop a DHTML page to display mouse over 2 squares and background color will change according to the color of the square.

<html>
<head>
<script type="text/javascript">
function bgChange(bg) {
document.body.style.background=bg;
}
</script>
</head>
<body>
<b>Mouse over the squares and the background color will change!</b>
<table width="300" height="100">
<tr><td onmouseover="bgChange('red')“ onmouseout="bgChange('transparent')"
bgcolor="red"> </td>
<td onmouseover="bgChange('blue')“ onmouseout="bgChange('transparent')"
bgcolor="blue"> </td>
<td onmouseover="bgChange('green')“ onmouseout="bgChange('transparent')"
bgcolor="green"> </td>
</tr>
</table>
</body>
</html>



Wednesday, 13 June 2012

JavaScript & Simple HTML calculator using javascript


Javascript:
What can a JavaScript Do?
  • JavaScript gives HTML designers a programming tool - HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages
  • JavaScript can put dynamic text into an HTML page - A JavaScript statement like this: document.write("<h1>" + name + "</h1>") can write a variable text into an HTML page
  • JavaScript can react to events - A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element
  • JavaScript can read and write HTML elements - A JavaScript can read and change the content of an HTML element
  • JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing
  • JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser
  • JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve information on the visitor's computer
  •  Imperative and structured
  •  Dynamic
  •  Functional
  • Prototype-based
  •  Miscellaneous
  • Vendor-specific extensions

Description : The user inputs 2 numbers into 2 text boxes selects the operation he/ she wishes to perform and the result is displaced in the third text box.


/**
 *
 * @author ravikiran
 */
function division()
<body>
<input type="button" value="Add" onclick="javascript:add();">

<input type="button" value="Add" onclick="javascript:add();">
<html>
<head>
<title>SIMPLE CALCULATOR USING JAVASCRIPT</title>
<script language="javascript" type="text/javascript">
function multiply()
{
a=Number(document.calculator.number1.value);
b=Number(document.calculator.number2.value);
c=a*b;
document.calculator.total.value=c;
}
function add()
{
a=Number(document.calculator.number1.value);
b=Number(document.calculator.number2.value);
c=a+b;
document.calculator.total.value=c;
}
function subtract()
{
a=Number(document.calculator.number1.value);
b=Number(document.calculator.number2.value);
c=a-b;
document.calculator.total.value=c;
}

{
a=Number(document.calculator.number1.value);
b=Number(document.calculator.number2.value);
c=a/b;
document.calculator.total.value=c;
}
</script>
</head>

<form name="calculator">
Number 1:<input type="text" name="number1"><br/>
Number 2:<input type="text" name="number2"><br/>
Result:<input type="text" name="total"><br/><br/>

<input type="button" value="Multiply" onclick="javascript:multiply();"><br/>
<input type="button" value="divide" onclick="javascript:division();">
<input type="button" value="subtract" onclick="javascript:subtract();">
</form>
</body>
</html>


Securing a web page from unauthorized access ASP.NET & C#

ASP.NET provides with the  feature of Login Control which helps you to easily build a user registration system for your website. This feature , Login control is used to display user registration forms, login forms, change password forms, and password reminder forms.
The Login controls use ASP.NET Membership(ASP.NET version 2.0 introduces a membership feature, which provides a consistent API for user credential storage and management) to authenticate users, create new users, and change user properties. When you use the Login controls, you are not required to write any code when performing these tasks.
We shall now  learn how to password-protect a section of our website and enable users to register and log in to our website.
The Login control supports the following properties:
  • Login Enables you to display a user login form.
  • CreateUserWizard Enables you to display a user registration form.
  • LoginStatus Enables you to display either a log in or log out link, depending on a user’s authentication status.
  • LoginName Enables you to display the current user’s registered username.
  • ChangePassword Enables you to display a form that allows users to change their passwords.
  • PasswordRecovery Enables you to display a form that allows users to receive an email containing their password.
  • LoginView Enables you to display different content to different users depending on the their authentication status or role.

    Steps:

1.To password-protect a page which is stored inside our secured folder , we need to make two configuration settings to our application and is to configure both authentication and authorization for the page's access.

2. Authentication:

This is the step 1 of  mission :)
By default, Windows authentication is enabled. To use the Login controls, you need to enable Forms authentication by adding the web configuration file of the root folder of our application.

3.Authorization:

By default, all users have access to all pages in an application. If you want to restrict access to the pages in a folder, you need to configure authorization for the folder.
we use two symbols to set the restrict the access to our secured page in the folder . they are as follows:
  1. <deny users="?"/>
  2. <deny users="*"/>
?-anonymous users are prevented from accessing any pages in the folder.Now if anyone attempts to request the secured page after adding the web configuration file (for authorization of the user, located inside the folder in which the secured page is stored), he will be redirected to a page for Login automatically. Therefore, the next page that we need to create is the page containing the login control we call it Login.aspx  page. (By default, this page must be located in the root of your application.)

4.Creating Login.aspx


<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Login</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    <asp:Login
        id="Login1"
        CreateUserText="Register"
        CreateUserUrl="~/Register.aspx"
        Runat="server" />

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

5.Creating Register.aspx

The Login control includes a CreateUserText and CreateUserUrl property. Adding these properties to the Logincontrol causes the control to display a link to a page that enables a new user to register for your application. TheLogin control in links to a page named Register.aspx.

The Register.aspx page contains a CreateUserWizard control. This control automatically generates a user registration form. After you submit the form, a new user is created, and you are redirected back to the secured page.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Register</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    <asp:CreateUserWizard
        id="CreateUserWizard1"
        ContinueDestinationPageUrl="~/SecretFiles/Secret.aspx"
        Runat="server" />

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

Now lets do an Exercise:


Create a page with some content .secure this page so that authorized user is able to access your page to check the authorization of the user. Use login control for unregistered user to create a registration form using registration control and send confirmation mail to the user


The structure of  your project should look somewhat similar to image given below:

Note: I named my project EmailConfirmation(to avoid confusion) you can name it some thing else .


Secured.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="secured.aspx.cs" Inherits="secured_secured" %>

<!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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <h1>shhhhhh ! i am a secured form</h1>
    </div>
    </form>
</body>
</html>

//This web.config file come under your projects root folder.
Web.config
<?xml version="1.0"?>
<!--
  For more information on how to configure your ASP.NET application, please visit
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->
<configuration>

<system.net>
    <mailSettings>
      <smtp deliveryMethod="PickupDirectoryFromIis"/>
      </mailSettings>
  </system.net>

       <system.web>
              <compilation debug="true" targetFramework="4.0"/>
              <authentication mode="Forms">
                     <forms>
                           <credentials passwordFormat="Clear">
                                  <user name="ravi" password="kiran"/>
                           </credentials>
                     </forms>
              </authentication>
       </system.web>
</configuration>


Register.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Register.aspx.cs" Inherits="Register" %>

<!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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:CreateUserWizard ID="createRegistration" ContinueDestinationPageUrl="~/secured/secured.aspx" runat="server">
    <MailDefinition BodyFileName="Register.txt" Subject="Registration Confirmation" From="Admin@YourSite.com"></MailDefinition>
    </asp:CreateUserWizard>
    </div>
    </form>
</body>
</html>

Login.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %>

<!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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Login ID="login1" CreateUserText="Register Me" CreateUserUrl="~/Register.aspx" onAuthenticate="login_authenticate" runat="server"></asp:Login>
    </div>
    </form>
</body>
</html>

Login.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Security;

public partial class Login : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void login_authenticate(object sender, AuthenticateEventArgs e)
    {
        string username = login1.UserName;
        string password = login1.Password;
        e.Authenticated = FormsAuthentication.Authenticate(username, password);
    }
}



//This web.config file is a part of the Secured folder.
Web.config

<?xml version="1.0"?>
<configuration>
    <system.web>
      <authorization>
        <deny users="?"/>
      </authorization>
    </system.web>
</configuration>



Register.txt
Thank you for registering !

Hope you have good experience with us !





I hope you find it usefull.:)