Computer And It: December 2016

Css Color

Colors in CSS are most often specified by:

a valid color name - like "red"
an RGB value - like "rgb(255, 0, 0)"
a HEX value - like "#ff0000"

Note: Color names are case-insensitive: "Red" is the same as "red" or "RED".

RGB (Red, Green, Blue)

RGB color values can be specified using this formula: rgb(red, green, blue).

Each parameter (red, green, blue) defines the intensity of the color between 0 and 255.

For example, rgb(255,0,0) is displayed as red, because red is set to its highest value (255) and the others are set to 0. Experiment by mixing the RGB values

Hexadecimal Colors

RGB values can also be specified using hexadecimal color values in the form: #RRGGBB, where RR (red), GG (green) and BB (blue) are hexadecimal values between 00 and FF

(same as decimal 0-255).

For example, #FF0000 is displayed as red, because red is set to its highest value (FF) and the others are set to the lowest value (00).

Note: HEX values are case-insensitive: "#ff0000" is the same as "FF0000".

CSS Syntax

A CSS rule-set consists of a selector and a declaration block:

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

In the following example all <p> elements will be center-aligned, with a red text color:Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
text-align: center;
}
</style>
</head>
<body>

<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>

</body>
</html>

CSS Selectors

CSS selectors are used to "find" (or select) HTML elements based on their element name, id, class, attribute, and more.

The element Selector

The element selector selects elements based on the element name.

You can select all <p> elements on a page like this (in this case, all <p> elements will be center-aligned, with a red text color):

The id Selector

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element should be unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

The style rule below will be applied to the HTML element with id="para1":

Example:

<!DOCTYPE html>

<html>

<head>

<style>

#para1 {

text-align: center;

color: red;

}

</style>

</head>

<body>

<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the style.</p>

</body>

</html>

The class Selector

The class selector selects elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the name of the class.

In the example below, all HTML elements with class="center" will be red and center-aligned: Example:

<!DOCTYPE html>

<html>

<head>

<style>

.center {

text-align: center;

color: red;

}

</style>

</head>

<body>

<h1 class="center">Red and center-aligned heading</h1>

<p class="center">Red and center-aligned paragraph.</p>

</body>

</html>

The HTML <script> Tag

The <script> tag is used to define a client-side script (JavaScript).

The <script> element either contains scripting statements, or it points to an external script file through the src attribute.

Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.

To select an HTML element, JavaScript very often use the document.getElementById(id) method.

This JavaScript example writes "Hello JavaScript!" into an HTML element with id="demo":Example:

<!DOCTYPE html>

<html>

<body>

document.getElementById("demo").innerHTML = "Hello JavaScript!";

</script>

</body>

</html>

The HTML <noscript> Tag

The <noscript> tag is used to provide an alternate content for users that have disabled scripts in their browser or have a browser that doesn't support client-side scripts:Example:

<!DOCTYPE html>

<html>

<body>

document.getElementById("demo").innerHTML = "Hello JavaScript!";

</script>

<p>A browser without support for JavaScript will show the text written inside the noscript element.</p>

</body>

</html>

Also Example:

<!DOCTYPE html>

<html>

<body>

function light(sw) {

var pic;

if (sw == 0) {

pic = "pic_bulboff.gif"

} else {

pic = "pic_bulbon.gif"

}

document.getElementById('myImage').src = pic;

}

</script>

<p>

<button type="button" onclick="light(1)">Light On</button>

<button type="button" onclick="light(0)">Light Off</button>

</p>

</body>

</html>

Styling HTML with CSS

CSS stands for Cascading Style Sheets.

CSS describes how HTML elements are to be displayed on screen, paper, or in other media.

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

CSS can be added to HTML elements in 3 ways:

Inline - by using the style attribute in HTML elements
Internal - by using a <style> element in the <head> section
External - by using an external CSS file

The most common way to add CSS, is to keep the styles in separate CSS files. However, here we will use inline and internal styling, because this is easier to demonstrate, and easier for you to try it yourself.

Inline CSS

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

This example sets the text color of the <h1> element to blue.Example:

<!DOCTYPE html>

<html>

<body>

<h1 style="color:blue;">This is a Blue Heading</h1>

</body>

</html>

Internal CSS

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within a <style> element:

<!DOCTYPE html>

<html>

<head>

<style>

body {background-color: powderblue;}

h1 {color: blue;}

p {color: red;}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

External CSS

An external style sheet is used to define the style for many HTML pages.

With an external style sheet, you can change the look of an entire web site, by changing one file!

To use an external style sheet, add a link to it in the <head> section of the HTML page:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

CREATING FORM

Form use to creating text , number ,email and password boxes in html page.

For creating boxes we use input tag .

Input tag is also use creating buttons in page of website.

Attribute of input tags

Type="Text" For using text box.
Type="Password" For using password box.
Type="Email" For using Email box.
Type="Radio" For using radio buttons.
Type="submit" For using submit buttons.

Spacial Attribute

Placeholder is very spacial attribute.

FOR Example:

<!DOCTYPE html>

<html>

<body>

First name:<br>

<br>

Last name:<br>

</form>

</body>

</html>

HTML Table

An HTML table is defined with the <table> tag.The table attributes are height , width and border .

Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.

<tr> mean table rows

<th> mean table heading

<td> mean table coloum

List

There are two types of list. Explain following:

Ordered HTML List

An unordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers (1,2,3) by default.Example:

we also change list type for example:

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default.Example:

we also change list type for example:

Formatting Elements

Formatting elements were designed to display special types of text:

<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Small text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text

These are simple uses in HTML.

HTML text TAGS

HTML TAGS EXAMPLES

Heading tags
Heading tags is use for creating heading in pages. There are six heading tags. For example.
<H1> Head 1 </H1>
<H2> Head 1 </H2>
<H3> Head 1 </H3>
<H4> Head 1 </H4>
<H5> Head 1 </H5>
<H6> Head 1 </H6>

2. Paragrah

Paragraph tag is use for writing paragraph.

For example.

<p> There is a paragraph </p>

3. Link tag

Link tag use for link one page to another page. In link tag we use a attribute (href). For example.

<a href="http://www.google.com"> Google </a>

4. Image tag

Image tag is use for show image in web page. In image tag we us attribute of src. For image tag we know the name and extantion of image.img tag we also use height and width attributes. For example.

<img src="Google.png" height="100" width="100

Computer And It

Hexadecimal Colors

Css Color

RGB (Red, Green, Blue)

Hexadecimal Colors

CSS Syntax

CSS Syntax

CSS Selectors

The element Selector

The id Selector

The class Selector

The HTML script Tag

The HTML <script> Tag

The HTML <noscript> Tag

Styling HTML with CSS

Styling HTML with CSS

Inline CSS

Internal CSS

External CSS

CREATING FORM