Showing posts with label Table Tag. Show all posts
Showing posts with label Table Tag. Show all posts

Saturday, July 1, 2017

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>>