PAGE LAYOUT - 2

 The div tag equipped with CSS rules produces good looking pages.  With CSS, the div tag can easily be positioned anywhere on the page.  For instance:  …  This will position the tag 150px from browser top and 50px from left.

 CSS offers four types of position for div tags (and other block elements)  Static positioning 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 Eg p.pos_fixed { position: fixed; top: 30px; right: 5px; }

Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist. Fixed positioned elements can overlap other elements

 Relative Positioning A relative positioned element is positioned relative to its normal position as laid out by the browser. Eg. h2.pos_left { position: relative; left: -20px; } The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.

 Absolute Positioning An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is. Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist. Absolutely positioned elements can overlap other elements. Eg. h2 { position: absolute; left: 100px; top: 150px; }

 Overlapping Elements  When elements are positioned outside the normal flow, they can overlap other elements.  The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).  An element can have a positive or negative stack order.

 Overlapping Elements (cont…)  An element with greater stack order is always in front of an element with a lower stack order.  Note: If two positioned elements overlap without a z- index specified, the element positioned last in the HTML code will be shown on top.  Eg.  img { position: absolute; left: 0px; top: 0px; z-index: -1;//set images to be placed behind }

#header { background-color:black; color:white; text-align:center; padding:5px; } #nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; } #section { width:350px; float:left; padding:10px; } #footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; }

City Gallery London Paris Tokyo London London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. Copyright &copy W3Schools.com

 Useful CSS rules with div layout  Float (right, left): specify how the div floats relative to other content. Normally divs starts on left as they are block elements  Position (absolute, fixed, relative): used to position the div where required on the page  Height/width: unless specified, the div will only take as much space as required to display its content.

 Useful CSS rules with div layout  Overflow: useful when width and height are specified. This specify whether scrollbars should be added or not when content exceeds the available space in the div.

INTRODUCTION TO BASIC FORMS

 HTML forms are used to collect user input.  The element defines an HTML form  HTML forms contain form elements.  Form elements are different types of input elements: checkboxes, radio buttons, submit buttons, textboxes etc

 defines a one-line input field for text input:  Example First name: Last name:

 defines a radio button.  Radio buttons let a user select ONE of a limited number of choices:  Example Male Female

 defines a button for submitting a form to a form-handler.  The form-handler is typically a server page with a script for processing input data.  The form-handler is specified in the form's action attribute:

 Example First name: Last name:

 To be submitted correctly, each input field must have a name attribute.  Example First name: Last name:

 The name attribute is important for the processing script as it uses the name of the input control to retrieve its value.

 The action attribute defines the action to be performed when the form is submitted.  The common way to submit a form to a server, is by using a submit button.  Normally, the form is submitted to a web page on a web server.  In the example above, a server-side script is specified to handle the submitted form:

 If the action attribute is omitted, the action is set to the current page as a default handler.

 The method attribute specifies the HTTP method (GET or POST) to be used when submitting the forms:

 When to Use GET?  You can use GET (the default method): If the form submission is passive (like a search engine query), and without sensitive information. When you use GET, the form data will be visible in the page address:  When to Use POST?  You should use POST: If the form is updating data, or includes sensitive information (password). POST offers better security because the submitted data is not visible in the page address.

 An HTML element, with all possible attributes set, will look like this:  Example

 For more insights into attributes of an input element of a form, visit w3Schools on the link:  ributes.asp