CSS Position Properties

CSS Position Properties

Content

* Position Properties
* Static Positioning
* Fixed Positioning
* Relative Positioning
* Absolute Positioning
* Design page layout
* Other Common Properties
* Creating icon on Title

Position Properties

* The CSS positioning properties allow you to position an element
* Static positioning
* Fixed positioning
* Relative positioning
* Absolute positioning

Static Positioning

* HTML elements are positioned static by default
* A static positioned element is always positioned according to the normal flow of the page
* Static positioned elements are not affected by the top, bottom, left, and right properties

Fixed Positioning

* An element with fixed position is positioned relative to the browser window
* It will not move even if the window is scrolled

Example

<html>
 <head>
  <title> Fixed Position</title>
  <style type="text/css">
   div { width:300px; height:300px;}
   #d1 {background-color:lightgreen;}
   #d2 {background-color:lightblue;}
   #d3 {background-color:orange;}
   #d4 {background-color:pink;}
   #d5 {background-color:gray;}
   #d6
   {
    background-color:red;
    position:fixed;
    top:100px;
    left:50%;
   }
  </style>
 </head>
 <body>
  <div id="d1">
    1st DIVISION
  </div>
  <div id="d2">
    2nd DIVISION
  </div>
  <div id="d3">
    3rd DIVISION
  </div>
  <div id="d4">
    4th DIVISION
  </div>
  <div id="d5">
    5th DIVISION
  </div>
  <div id="d6">
    6th DIVISION<br/>
    This is fixed
  </div>
 </body>
</html>

Relative Positioning

* A relative positioned element is positioned relative to its normal position

Example
<html>
 <head>
  <title> Relative Position</title>
  <style type="text/css">
   div { width:300px; height:300px;}
   #d1 {background-color:lightgreen;}
   #d2
   {
    background-color:lightblue;
    position:relative;
    left:50px;
    top:100px;
   }
   #d3 {background-color:orange;}
   #d4 {background-color:pink;}
   #d5 {background-color:gray;}
   #d6
   {
    background-color:red;
    position:fixed;
    top:100px;
    left:50%;
   }
  </style>
 </head>
 <body>
  <div id="d1">
    1st DIVISION
  </div>
  <div id="d2">
    2nd DIVISION<br/>
    This is positioned 50px from left and <br/>
    100px from top relative to its normal position
  </div>
  <div id="d3">
    3rd DIVISION
  </div>
  <div id="d4">
    4th DIVISION
  </div>
  <div id="d5">
    5th DIVISION
  </div>
  <div id="d6">
    6th DIVISION<br/>
    This is fixed
  </div>
 </body>
</html>

Absolute Positioning

* An absolute position element is positioned relative to the first parent element that has a position other than static.

Example

<html>
 <head>
  <title> Absolute Position</title>
  <style type="text/css">
   div { width:300px; height:300px;}
   #d1 {background-color:lightgreen;}
   #d2
   {
    background-color:lightblue;
    position:relative;
    left:50px;
    top:100px;
   }
   #d3 {background-color:orange;}
   #d4 {background-color:pink;}
   #d5
   {
    background-color:gray;
    width:800px;
    position:relative;
    top:10px;
    left:10px;
   }
   #d5 #d51
   {
    background-color:khaki;
    width:750px;
    height:200px;
    position:absolute;
    top:50px;
    left:25px;
   }
   #d5 #d51 #d511
   {
    background-color:maroon;
    width:700px;
    height:50px;
    position:absolute;
    top:20px;
    left:25px;
    color:white;
   }
   #d6
   {
    background-color:red;
    position:fixed;
    top:100px;
    left:50%;
   }
  </style>
 </head>
 <body>
  <div id="d1">
    1st DIVISION
  </div>
  <div id="d2">
    2nd DIVISION<br/>
    This is positioned 50px from left and <br/>
    100px from top relative to its normal position
  </div>
  <div id="d3">
    3rd DIVISION
  </div>
  <div id="d4">
    4th DIVISION
  </div>
  <div id="d5">
    5th DIVISION
      <div id="d51">
        5.1 DIVISION
          <div id="d511">
            5.1.1 DIVISION
          </div>
      </div>
  </div>
  <div id="d6">
    6th DIVISION<br/>
    This is fixed
  </div>
 </body>
</html>

Define Page Layout

* Page layout is the part of graphic design that deals in the arrangement of visual elements on a page
* For a web page, page layout is important to design so that
* Contents should appear at the right places
* Content should be organized and doesn’t look messy
* Generally website pages follow the same layout.
* Here is one example of layout

Example

<html>
 <head>
  <title> Layout 1</title>
  <style type="text/css">
   body
   {
    background-color:lightcyan; 
   }
   #main_container
   {
    width:90%;
    height:100%;
    margin:auto;
    padding:0px;
    margin-top:0px;
    background-color:lightgreen;
    position:relative;
    top:0px;
   }
   #top_container
   {
    background-color:olive;
    width:100%;
    height:50px;
    position:absolute;
    top:0px;
   }
   #second_top_container
   {
    background-color:purple;
    width:80%;
    height:200px;
    position:absolute;
    top:50px;
    left:100px;
   }
   #mid_container
   {
    position:absolute;
    top:250px;
    width:100%;
    min-height:400px;
    background-color:green;
   }
   #mid_left_container
   {
    position:absolute;
    top:0px;
    width:20%;
    min-height:400px;
    background-color:khaki;
   }
   #mid_right_container
   {
    position:absolute;
    left:20%;
    top:0px;
    width:80%;
    min-height:400px;
    background-color:maroon;
   }
  </style>
 </head>
 <body>
  <div id="main_container">
   main_container
       <div id="top_container">
    top_container
    Place for site title, menu and welcome message
       </div>
       <div id="second_top_container">
    Second_top_container
    Place for Banner
       </div>
       <div id="mid_container">
           <div id="mid_left_container">
        Place for links
           </div>
           <div id="mid_right_container">
        Primary content
           </div>
       </div>
  </div>
   </body>
</html>

Other common properties

Width : It specifies the width of the element.
Height:  It specifies the height of the element
Display: display property allows to make an element block, inline, as a table cell etc
Padding: padding value is gap between inner boundary and content
Margin: it is a space leaving outside the element boundary
Opacity: it sets the transparency level of an HTML element. Minimum value is 0 and maximum value is 1.

Creating icon on title

Small icon near the title in the title bar can be added with the following code:

* <link rel="shortcut icon" type="image/x-icon" href="scaicon.jpg" />

Here scaicon.jpg is an image file, you can replace it with any of your image. Image size should be edited to 32x32 or 16 x 16 pixels.

<<Prev     Home     Next>>

CSS Properties

CSS Properties
Content
* Text Properties
* Background-properties
* Border- Properties
* Anchor Properties
* List Style Properties
* Box Model
* Other Common Properties

Text Properties
* CSS provides many properties related to text for formatting and decoration. Some of them are:

 - Color
 - Text-alignment
 - Text-decoration
 - Text-transformation
 - Font-style
 - Font-size
 - Font-weight
 - Font-family
 - Text-shadow

Color

Color property is used to set the color of the text.

* The color property is used to set the color of the text.
* Example:

 - body {color:blue;}
 - h1 {color:#00ff00;}
 - h2 {color:rgb(255,0,0);}

Text-alignment

* The text-align property is used to set the horizontal alignment of a text.
* Text can be centered, or aligned to the left or right, or justified.
*  h1 {text-align:center;}

Text-decoration

* The text-decoration property is used to set or remove decorations from text.
* The text-decoration property is mostly used to remove underlines from links for design purposes
* a {text-decoration:none;}
* h1 {text-decoration:overline;}
* h2 {text-decoration:line-through;}
* h3 {text-decoration:underline;}
* h4 {text-decoration:blink;}

Text-transformation

* The text-transform property is used to specify uppercase and lowercase letters in a text.
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

Font-style

* The font-style property is mostly used to specify italic text.
* This property has following values:
* normal - The text is shown normally
* italic - The text is shown in italics

Font-size

* The font-size property sets the size of the text.
* p{font-size:24px;}

Font-weight

* The font-weight property sets the boldness of the text
* p{font-weight:bold;}

Font-family

* The font family of a text is set with the font-family property.
* Example
* p{font-family:”Georgia”;}

Text-shadow

* The text-shadow property applies shadow to text.
* text-shadow:h-shadow v-shadow blur color;

p
{
 text-shadow:20px 20px 5px gray;
}

CSS Background Properties

* CSS background properties are used to define the background effects of an element.
* CSS properties used for background effects:
 - background-color
 - background-image
 - background-repeat
 - background-attachment

background-color

* The background-color property specifies the background color of an element.
* The background color of a page is defined in the body selector:
* Colors can be specified by a hex value, RGB value or by color name

body
{
    background-color:aqua;
}

background-image

* The background-image property specifies an image to use as the background of an element
* By default, the image is repeated so it covers the entire element.
* body {background-image:url('paper.gif');}

background-repeat

* By default, the background-image property repeats an image both horizontally and vertically
* Some images should be repeated only horizontally or vertically, or they will look strange

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

body
{
background-image:url('gradient2.png');
background-repeat:repeat-y;
}

body
{
background-image:url('gradient2.png');
background-repeat:no-repeat;
}

background-attachment
* When the background attachment is fixed image will not scroll and it is fixed though you are moving scroll bar

body
{
background-image:url('gradient2.png');
background-repeat:no-repeat;
background-attachment:fixed;
}

CSS Border Properties

HTML elements can have borders and with the help of CSS properties we can decorate html element border. Here are the properties:

* Border-color
* Border-style
* Border-radius
* Border-spacing
* Border-width
* Border-collapse
* Border-color

This property is used to set color of border of an HTML element.

Colors can be specified by a hex value, RGB value or by color name
a
{ border-color:blue;}
border-style

CSS provides a variety of style properties to change the style of border of an HTML element.

Some of the possible values of border-style property are:

 - Dotted
 - Dashed
 - Solid
 - Groove
 - Double
 - Rigid
 - Inset
 - Outset
a
{
border-color:blue;
border-style:dotted;
}

* In CSS it is possible to specify different borders for different sides:
* Border-left-style
* Border-right-style
* Border-top-style
* Border-bottom-style

border-radius
* Border-radius property specify radius of corner of the border
a
{
border-color:blue;
border-style:dotted;
border-radius:10px;
}

border-spacing
* It Specify space between table cells.

border-width

* It Specify thickness of the border
a
{
border-color:blue;
border-style:dotted;
border-width:2px;
}

border-collapse
* The border-collapse property sets whether the table borders are collapsed into a single border or separated. The value of this property could be collapse

Anchor properties

* Properties on anchor
 - a:link - a normal, unvisited link
 - a:visited - a link the user has visited
 - a:hover - a link when the user mouses over it
 - a:active - a link the moment it is clicked

Example
a:link {color: darkgray;}
a:visited {color: silver;}
a:hover {color: orange;}
a:active {color: red;}

List Style Properties

* Following are the common properties to style lists
 - List-style-image
 - list-style-image:url('sqpurple.gif');
 - List-style-position
 - ul { list-style-position:inside; }
 - List-style-type
 - ul.circle {list-style-type:circle}
 - ul.square {list-style-type:square}
 - ol.upper-roman {list-style-type:upper-roman}
 - ol.lower-alpha {list-style-type:lower-alpha}

Box Model

 - All HTML elements can be considered as boxes


Other common properties

Width : It specifies the width of the element.
Height:  It specifies the height of the element
Display: display property allows to make an element block, inline, as a table cell etc
Padding: padding value is gap between inner boundary and content
Margin: it is a space leaving outside the element boundary
Opacity: it sets the transparency level of an HTML element. Minimum value is 0 and maximum value is 1.

<<Prev     Home     Next>>

Introduction to CSS

Introduction to CSS

* CSS is Cascading Style Sheet
* HTML defines what all elements to be displayed on the web page
* CSS defines how to display HTML elements
* The World Wide Web Consortium (W3C) created CSS
* Currently we are using CSS 3
* We can write CSS in a separate file and link it to our HTML file or embed CSS in HTML file itself

CSS Syntax

* A CSS syntax consist of only three parts
selector { property: value }
* The selector is normally the HTML element you want to style.
* A property is a type of attribute of HTML tag.
* Values are assigned to properties.

Example
p
{
    color:red;
    text-align:center;
}

CSS Comments

* You can put CSS comments in C style using /* and */ to depict the start and end of the comment respectively

Example

p
{
    color:red;  /* this sets color red */
    text-align:center;  /* this sets text at the center */
}

Selection of HTML elements

In CSS we can select an HTML element via following three ways

* Through tag Name
* Through id
* Through Class

Through Tag Name
You can choose HTML element by using its tag name.
Example: To select all paragraphs.

p
{
    color:red;
    text-align:center;
}

Through Id
* id is a standard attribute for HTML elements.
* we need to style a particular HTML element, we can use id of that element in selector to distinguish it from other similar elements.
* The id selector uses the id attribute of the HTML element, and is defined with a "#".

Example: para1 is value of id attribute of some HTML element

#para1
{
     text-align:center;
     color:red;
}

Through Class

* The class selector is used to specify a style for a group of elements
* Unlike the id selector, the class selector is most often used on several elements.
* The class selector uses the HTML class attribute, and is defined with a "."

Example: centre is value of class attribute of a group of HTML elements

.centre
{
  text-align:centre;
}

Ways to insert CSS

* There are three ways of inserting a style sheet:
External CSS
Internal CSS
Inline CSS

External CSS

* In this we place CSS code within a separate file and save it with .css extension.
* An external style sheet is ideal when the style is applied to many pages.
* With an external style sheet, you can change the look of an entire Web site by changing one file.
* The <link> tag goes inside the head section
* <head>
<link rel="stylesheet" type="text/css" href="style.css" /></head>
* Your style sheet should be saved with a .css extension.

<head>
<title><title>
<link rel="stylesheet" type="text/css" href="Path To css file" />
</head>
<body>

Internal CSS

* An internal style sheet should be used when a single document has a unique style
* You define internal styles in the head section of an HTML page, by using the <style> tag

Example:
<head>
<style type="text/css">
     h1 {color:sienna;}
     p {margin-left:20px;}
     body {
     background-image: url("images/back40.gif");
     }
</style>
</head>

Inline CSS

* To use inline styles you use the style attribute in the relevant tag.
* The style attribute can contain any CSS property
* With this method each HTML file contains the CSS code needed to style the page.
* Meaning that any changes we want to make to one page, will have to be made to all.

Example:

<p style="color:red;margin-left:10px;">
 This is a paragraph.
</p>


<<Prev     Home     Next>>

More HTML Tags

Table Tag

* <table> defines a table
* <th> Defines a table header
* <tr> Defines a row in a table
* <td> Defines table data

Attributes of Table Tag

* border  (It specifies the width of the border around a table)
* cellpadding  (Specifies the space between the cell wall and the cell content)
* cellspacing   (Specifies the space between cells)
* align (values can be left, center or right)
* width (specifies the width of a table)
* bgcolor  (specifies a background color of a table)

Color name (“pink”)
Hex code of color name (“#ffA000”)
rgb number ( “rgb(255,0,0)”)

Attributes of <th> and <td> Tag

* align  =left, right, center, justify
* bgcolor    =color name, rgb(), hex code
* colspan    =number
* rowspan    =number
* height =pixel or percentage
* valign =top, middle, bottom
* width  =pixel or percentage

Example

<html>
<head>
 <title> Table Example </title>
 </head>
 <body>
   <table border=”5px” cellspacing=”0px”>
    <tr bgcolor=”khaki”>
        <th> S. No. </th>
        <th> Name </th>
        <th> Age </th>
    </tr>
    <tr>
        <td> 1 </td>
        <td> Rahul </td>
        <td> 19 </td>
    </tr>
    <tr>
        <td> 2 </td>
        <td> Anmol </td>
        <td> 18 </td>

    </tr>
    <tr>
        <td> 3 </td>
        <td> Swati </td>
        <td> 17 </td>
    </tr>
   </table>
 </body>
</html>

Block and Inline Element

* In visual browsers, displayable elements can be rendered as either block or inline.
* Block elements have automatic break line feature.
* Inline elements do not have automatic line change feature.

Example

Block Elements: Paragraph, heading, list etc

Inline elements: image, anchor etc

Div and Span Tag

* <div> defines a section in a document
* <span> defines a section in a document
* The difference between span and div is that a span element is in-line and usually used for a small chunk of in-line HTML whereas a div (division) element is block-line (which is basically equivalent to having a line-break before and after it) and used to group larger chunks of code.

Form Tag

* HTML forms are used to pass data to a server.
* A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more.
* A form can also contain select lists, textarea, fieldset, legend, and label elements.
* The most important form element is the input element.
* To create an HTML form we use the <form> tag.

Syntax :
<form>

input controls

</form>

Attributes of form tag

* Action

The required action attribute specifies where to send the form-data when a form is submitted.

* Method

Specifies how to send form-data

The form-data can be sent as URL variables (with method="get") or as HTTP post (with method="post").

Example

<html>
  <head>
     <title> Form example </title>
  </head>
  <body>
     <form action=“sum.php” method=“get”>
         </form>
  </body>
</html>

Tags within form tag

* <input>
* <button>
* <option>
* <select>
* <textarea>

Input tag

* The input element is used to select user information
* An input element can vary in many ways, depending on the type attribute

    <input type=“text” />
    <input type=“radio” />
    <input type=“password” />
    <input type=“submit” />
    <input type=“checkbox” />
    <input type=”file” />
    <input type=“date” />
    <input type=“month” />
    <input type=”time” />
    <input type=“hidden” />
    <input type=”search” />
    <input type=”color” />
    <input type=“image” />
    <input type=”number” />

Textarea tag

* The <textarea> tag defines a multi-line text input control.
* A text area can hold an unlimited number of characters.
* The size of a textarea can be specified by the cols and rows attributes, or even better; through CSS height and width properties

Select and option tags

* The <select> tag is used to create a select list (drop-down list).
* The <option> tags inside the select element define the available options in the list.

Button tag

* The <button> tag defines a push button

Example (For better alignment elements related to form resides inside the table tag)

<html>
<head>
<title> Form example </title>
</head>
<body>
   <form action=“registration.php” method=“post”>
      <form action="registration.php" method="post">
   <table>
    <tr>
     <td>Name</td>
     <td><input onkeyup="fun1()" type="text" name="user"/></td>
     <td id="msg1"></td>
    </tr>
    <tr>
     <td>Password</td>
     <td><input type="password" name="pwd"/></td>
    </tr>
    <tr>
     <td>Gender</td>
     <td><input type="radio" name="gender"/>M
         <input type="radio" name="gender"/>F</td>
    </tr>
    <tr>
     <td>Course</td>
     <td><input type="checkbox" name="C"/>C
     <input type="checkbox" name="CPP"/>C++</td>
    </tr>
    <tr>
     <td></td>
     <td><input type="submit" onclick="return validate()" value="Register"/>
     <input type="reset" /> </td>
    </tr>
   </table>
         </form>
</body>
</html>

In the above HTML code, as soon as user presses the submit button, form data will be send to the server. Data will be send to a server so that it can get processed there. The php script that will use the data is mentioned in action attribute of form tag

<<Prev     Home     Next>>

Introduction to HTML

Introduction to HTML

* HTML is a markup language that web browsers use to interpret and compose text, images and other material into visual or audible web pages
* HTML is Hyper Text Markup Language.
* HTML is easy to learn.
* It is a language to create web pages.
* HTML is not a programming language, which means it has no decision control. HTML has markup tags to define elements of page and structure of the page.
* HTML markup tags are usually called HTML tags
* You can design a static web page with the help of HTML
* You need to install any text editor (like note pad) to write HTML code and any web browser (like chrome) to run the code.
* HTML files are saved with the extension .html
* HTML is case insensitive language
* HTML is developed by World Wide Web Consortium
* Currently using HTML 5
* To learn HTML you need no programming background.
* You need to open note pad, open a new file and write HTML code in it

Save it with html extension

Execute it with some browser

You can reopen HTML file with notepad to make any edition

HTML Elements

* An HTML element is an individual component of an HTML document
* It starts with a start tag / opening tag and ends with an end tag / closing tag
* The element content is everything between the start and the end tag
* Most HTML elements can have attributes

For example

* <p> This is a paragraph </p>
* Here, <p> is starting tag and </p> is closing tag. Everything between them is paragraph content to be displayed on browser

Document Structure Elements

* <html>
* <head>
* <body>

<html>

* The Root element of an HTML document; all other elements are contained in this
* The HTML element delimits the beginning and the end of an HTML document.

<head>

* Container for processing information and metadata for an HTML document

<body>

* Container for the displayable content of an HTML document.

HTML document format

<html>
<head>
Place processing information and metadata here
</head>
<body>
Place displayable content here
</body>
</html>

Comments
<!--
Write your comment here
-->

Title Tag

* It is written in <head> tag
* The <title> tag defines the title of the document
* It defines a title in the browser toolbar
* It provides a title for the page when it is added to favorites
* It displays a title for the page in search-engine results

Example

<html>
<head>
 <title> Welcome </title>
</head>
<body>
</body>
</html>

Heading Tags

Headings are defined with the <h1> to <h6> tags

<h1> defines the most important heading.

<h6> defines the least important heading

Search engines use your headings to index the structure and content of your web pages

Example

<html>
<head>
 <title> Welcome </title>
</head>
<body>
 <h1> Heading 1 </h1>
 <h2> Heading 2 </h2>
 <h3> Heading 3 </h3>
 <h4> Heading 4 </h4>
 <h5> Heading 5 </h5>
 <h6> Heading 6 </h6>
</body>
</html>

Paragraph Tag

Paragraphs are defined with the <p> tag

Browsers automatically add an empty line before and after a paragraph.

Example

<html>
<head>
 <title> Welcome </title>
</head>
<body>
 <h1> Paragraphs </h1>
 <p> This is the first paragraph of your web page</p>
 <p> This is the second paragraph of your web page</p>
 <p> This is the third paragraph of your web page </p>
</body>
</html>

Formatting Tags

* Use the <br /> tag if you want a line break (a new line) without starting a new paragraph:
* The <br /> element is an empty HTML element.
* It has no end tag.
* The <hr /> tag creates a horizontal line in an HTML page.
* The <hr/> element can be used to separate content.

Image Tag

* Images are defined with the <img> tag.

General Syntax:

<img src=“path to the image”>

Example:

<img src=“nature.jpg”>

* The <img> tag is empty, which means that it contains attributes only, and has no closing tag.
* To display an image on a page, you need to use the src attribute. src stands for "source". The value of the src attribute is the URL of the image you want to display.

Attributes of image tag

* Src        = some url for image
* Alt        = alternative text
* Width  = pixel or percentage
* Height = pixel or percentage
* Align  = top, bottom, middle, left, right

The default alignment is bottom i.e. the text surrounding the image will appear at bottom of the image.

* Border     = The border attribute places a border around the image. Value is in pixel

Examples:

<img src="image1.jpg" width="200" height="150">
<img src="image2.jpg" alt="demo">
<img src="image3.jpg" border="1">

List Tag:

Lists are used to group related pieces of information together, so they are clearly associated with each other and easy to read.

There are two types of List

Unordered List—used to group a set of related items, in no particular order.

Ordered List—used to group a set of related items, in a specific order.

* An unordered list starts with the <ul> tag.
* Each list item starts with the <li> tag.
* The list items are marked with bullets (typically small black circles).

Example

<html>
<head>
</head>
<body>
<ul>
 <li>C </li>
 <li>C++</li>
 <li>PHP</li>
</ul>
</body>
</html>

Attribute type

By default Unordered lists appear with bullets.

But if required then we can change this symbol to "square" or "circle".

Attribute type has following values

square

disc

circle

Example

<html>
<head>
</head>
<body>
<ul type=”square”>
 <li>C </li>
 <li>C++</li>
 <li>PHP</li>
</ul>
</body>
</html>

Ordered List

Ordered lists, or numbered lists, are used to display a list of items that need to be placed in a specific order.

The <ol> tag is used to create an ordered list.

The list can be numerical or alphabetical.

Example

<html>
<head>
</head>
<body>
<ol>
 <li>C </li>
 <li>C++</li>
 <li>PHP</li>
</ol>
</body>
</html>

Attribute type

By default Ordered lists appear with numbers.

But if required then we can change numbers to letters or roman numerals

To do this we need to handle “type” attribute of <ol> tag.

Attribute type has following values

1
A
I
a
i

Example

<html>
<head>
</head>
<body>
<ol type=”a”>
 <li>C </li>
 <li>C++</li>
 <li>PHP</li>
</ol>
</body>
</html>

Anchor Tag

A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document.

Links are specified in HTML using the <a> tag.

<a href="url">Link text</a>

Example

<html>
<head>
 <title>anchor example</title>
</head>
<body>
 <a href="example1.html">Click Here</a>
</body>
</html>

<<Prev     Home     Next>>

Introduction to PHP-MySQL

Introduction

PHP is a server side scripting language, and is a powerful tool for making dynamic and interactive Web pages quickly. PHP is a widely-used, free, and efficient alternative to competitors such as Microsoft's ASP. PHP is basically used for developing web based software applications.

PHP is easy to learn and implement. As per W3tech (Web Technology Surveys) PHP is used by 82.0% of all the websites whose server-side programming language we know. Current version number of PHP is 5. Version 5 is used by 97.8% of all the websites who use PHP.

Some of the popular sites developed using PHP are Facebook.com, Baidu.com, Wikipedia.org, Wordpress.com, Tmall.com, Taobao.com etc

PHP is an acronym for "PHP: Hypertext Preprocessor", it is free to download and use.

If PHP is your first server side scripting language to learn, you might be unaware with the web architecture, its terminologies and related needful languages and technologies. Not to worry, this course is designed to give you in depth knowledge of web application development. You will learn all the languages and terminologies that are needful to execute a web application.

We will start with the basic terminologies. Next we will learn HTML, CSS, Javascript, Jquery, PHP and MySQL. Later we will learn how to implement popular and common tasks of any web applications such as login page, session tracking, Ajax, hit counter, form validation, interacting with database etc.

Reader must have exposure to at least one programming language preferably C language. It will help you to understand programming concepts.

What is Client-Server Architecture?

The client–server model of computing is a distributed application structure that partitions tasks or workloads between the providers of a resource or service, called servers, and service requesters, called clients.

When we access any website via internet, a software called web browser (chrome, firefox etc) can be used to make request to the computer where desired resource (web page) resides. A software running on destination computer called web server (Apache, IIS etc) extract needful page return back to us as a response to our request. In such scenario, your machine is called client machine and destination machine is known as Server machine. Web browser is client and web server is server.

The job of client is to make request for some resource stored on some other machine which must be connected to our machine via internet or with the help of simple networking. On the other side web server’s job is to receive client’s request, process the request and respond with returning desired page or any error message.

Website

* Web site is a collection of related web pages containing images, videos or other digital assets.

* A web site is hosted at least on one web server accessible via network such as the internet or local area network (LAN) through an internet address known as a uniform resource locator.

* All the publicly accessible websites collectively constitute the World Wide Web 

Web Page

* A web page is a plain text document with formatting instructions of Hyper Text Markup Language (HTML), which is interpreted by Web browser.

* Web pages are transported and accessed by HyperText Transfer Protocol (HTTP)

Web Hosting

* Web hosting is the storage of your website pages on some server machine.

Web Browser

* A web browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web

* Each resource on World Wide Web is identified by uniform resource locator (url).

* Examples of browsers are Mozilla Firefox, Google Chrome, Internet explorer, Opera, Safari, etc. 

Web Server

* Web server can refer to either the hardware (the computer) or the software (the computer application) that helps to deliver content that can be accessed through the internet.

* Use of web server is to host web sites, data storage and enterprise applications.

* The primary function of web servers is to deliver web pages on the request to client.

* This means delivery of HTML documents and any additional content that may be included by a document such as images, style sheets and java scripts.

* Apache is the most commonly used web server software (according to Netcraft statistics) and Microsoft's Internet Information Services (IIS) is also commonly used.

Conversation

* A client, commonly a web browser, initiates communication by making a request for a specific resource using HTTP and the server responds with the content of that resource or an error message if unable to do so.

* A website is hosted on a computer system known as a web server, also called an HTTP server, and these terms can also refer to the software that runs on these systems and that retrieves and delivers the web pages in response to requests from the website users.

One conversation means HTTP request from browser and HTTP response back from server 

World Wide Web

* In 1994 Tim Berners-Lee decided to constitute the World Wide Web Consortium (W3C) to regulate the development of the many technologies involved (HTTP, HTML, etc.) through a standardization process.

* www is an application runs on internet

* www was first browser developed by Tim Berners-Lee in 1990

Static Web Page

* A static web page is a web page that is delivered to the user exactly as stored.

* Static web page displays the same information for all users, from all contexts.

* Static web pages are often HTML documents stored as files in the file system and made available by the web server over http.

Dynamic Web Page

* A dynamic web page is generated by some web application.

* Dynamic web page displays user specific content.

* They are generated by program which could be written in PHP.

Application Server

* An application server is a software framework that provides an environment in which applications can run.

* In this course, we will use application server to run php script.

Database Server

* A database server is a computer program that provides database services to other computer programs or computers, as defined by the client server model.

* The term may also refer to a computer dedicated to running such a program.

* Some examples of database servers are Oracle, DB2, SQL server, MySQL 

* The SQL query language is more or less same in all the database servers.

Where does PHP fits in

When the web server receives the request for a dynamic page , it looks up the file extension of the requested web page to determine which server or program should process the request.

For a PHP page, the web server forwards the request to the PHP interpreter, which is running on the web server

The PHP interpreter gets the appropriate PHP script from the hard drive. It also loads any form data that the user submitted. Then, it executes the script. 

As the script executes, it generates a web page as its output. The script may also request data from a database server and use that data as part of the web page it is generating.

When the script is finished, the PHP interpreter passes the dynamically generated web page back to the web server. 

Then, the web server sends the page back to the browser in an HTTP response that includes the HTML for the page.

When the web browser receives the HTTP response, it formats and displays the web page.

Then, the web server sends the page back to the browser in an HTTP response that includes the HTML for the page.

When the web browser receives the HTTP response, it formats and displays the web page.

Home     Next>>