Web

Programming
Revision 2
 Forms:

 Used to pass data to a server.

 Contain input elements like text field, checkboxes

1|Page
 Advantages of css :

 CSS Saves a Lot of Work.

 Style definitions are normally saved in external .css files.
 You can change the look of an entire Web site by changing just one file.
 All browsers support css today
 CSS Syntax:

 CSS Selectors:

 CSS selectors allow you to select and manipulate HTML elements.

Element Selector Id Selector

The element selector selects elements Uses the id attribute of an HTML element
based on the element name. to select a specific element.

class Selector Grouping Selectors

The class selector selects elements You can group the selectors, to minimize
with a specific class attribute. the code.

2|Page
  Select all elements
Child Selector that are children of
a specified element

 Select all elements

Adjacent Sibling that are adjacent
Selector siblings of a
specified element

General Sibling  Select all elements

that are siblings of
Selector
a specified element

 CSS Background:

Background Color Background Image

Background Image - Repeat Horizontally or Vertically

Some images should be repeated only horizontally (x) or vertically (y)

 CSS Formats

Text Alignment Text Decoration

3|Page
 Text Transformation Text Indentation

Font Style Font Size

Border-Style Border-Style

 Styling Links:

 The four links states are:

o a:link  unvisited link
o a:visited  a link the user has visited
o a:hover  a link when the user mouses over it
o a:active  a link the moment it is clicked
 a:hover MUST come after a:link and a:visited
 a:active MUST come after a:hover

4|Page
 Calculate the total width of the element:

 Total element width = width + left padding + right padding + left border + right border + left
margin + right margin

 Converting between pixel and Em:

 Em = pixels/16

 Border and margin - Shorthand property:

Border shorthand Margin shorthand

 CSS Outline:

 An outline is a line that is drawn around elements (outside the borders).

 The outline is not a part of an element's dimensions

CSS Padding CSS Dimension

 CSS Display and Visibility:

visibility: hidden display: none

 Hides an element, but it will still take  Hides an element, and it will not take
up the same space as before. up any space.
 The element will be hidden, but still  The element will be hidden, and the

5|Page
 affect the layout page will be displayed as if the
element is not there

 CSS Positioning:

Static Positioning Fixed Positioning

 Element is always positioned according to the  Element is positioned relative to the

normal flow of the page. browser window, and will not move
 Elements are not affected by the top, bottom, even if the window is scrolled.
left, and right properties.  Fixed positioned elements are removed
from the normal flow.
 Fixed positioned elements can overlap
other elements.

Relative Positioning Absolute Positioning

 Element is positioned relative to its normal  Element is positioned relative to the
position first parent element that has a
position other than static.
 Elements can overlap other elements.

 CSS Image Opacity:

6|Page
 CSS3:

 Some of the most important CSS3 modules are:

o Selectors
o Box Model
o Backgrounds and Borders
o Image Values and Replaced Content
o Text Effects
o 2D/3D Transformations
o Animations
o Multiple Column Layout
o User Interface

 CSS3 Borders

Border-radius - Rounded Corner The box-shadow Property

Resize a background image Multiple Background Images

 CSS3 2D Transforms

 With CSS3 transform, we can move, scale, turn, spin, and stretch elements.

translate()

rotate()

7|Page
 scale()

skew()

matrix()

 CSS3 3D Transforms

rotateX()

rotateY()

 CSS3 Animations

 An animation lets an element gradually change from one style to another.

 You can change as many properties you want.

Change the background color Change the background color

when animation is 25%, and 50%, and when animation is 25%, and 50%,
100% 75% and100%

8|Page
  Bind the "myfirst" animation to the <div> element. Animation duration: 5 seconds.

 CSS3 Multiple Columns

 You can create multiple columns for laying out text.

 1. Create Multiple Columns

 Specify the number of columns an element should be divided into

 Divide the text in a <div> element into three columns:

 2. Gap Between Columns

 Specify the gap between the columns:

 Specify a 40 pixels gap between the columns:

9|Page
 3. Column Rules:

 Sets the width, style, and color of the rule between columns.
 Specify the width, style and color of the rule between columns:

 What is jQuery?

 JavaScript Library.
 Easy to learn.
 "write less, do more".
 Takes a lot of tasks that require many lines of JavaScript code and wraps them into methods that to
call.

 DOM

 Model for representing and interacting with XML, XHTML or HML document.
 The jQuery contains the following features:

 HTML/DOM manipulation
 CSS manipulation
 HTML event methods
 Effects and animations
 AJAX
 Utilities
 Insert jQuery

 jQuery CDN

 You can include it from a CDN (Content Delivery Network).

 jQuery Syntax

10 | P a g e
 $(selector).action();
 The Document Ready Event

 Is to prevent any jQuery code from running before the document is finished loading.

 jQuery Selectors

Element selector The #id Selector

 Selects elements based on the
 Uses the id attribute of an HTML tag
element name.
to find the specific element.

The .class Selector

 Finds elements with a specific class.

 jQuery Events:

 An event represents the precise moment when something happens.

 Example: click, mouseenter, keypress, load.
 To click event to all paragraphs:

 Then define what should happen when the event fires.

 Used jQuery Event Methods

11 | P a g e
 Allows us to execute a
ready() function when the
document is fully loaded
Executed when the user
click() clicks on the HTML element.

Executed when the user

dblclick() double-clicks on the HTML
element.
Executed when the mouse
mouseenter() pointer enters the HTML
element

hover()

12 | P a g e