Scribd
Upload
35 views24 pages

Web Technology (3-5)

The document discusses HTML tables, frames, and forms. It describes the tags and attributes used to create tables, including <table>, <tr>, <td>, and <th>. It provides examples of using colspan and rowspan. It also covers the <frameset> and <frame> tags used to divide pages into frames. Finally, it discusses HTML forms, including the <form> tag and different input fields like text boxes, checkboxes, radio buttons, and action buttons.

Uploaded by

lekhyareddy29
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
35 views24 pages

Web Technology (3-5)

The document discusses HTML tables, frames, and forms. It describes the tags and attributes used to create tables, including <table>, <tr>, <td>, and <th>. It provides examples of using colspan and rowspan. It also covers the <frameset> and <frame> tags used to divide pages into frames. Finally, it discusses HTML forms, including the <form> tag and different input fields like text boxes, checkboxes, radio buttons, and action buttons.

Uploaded by

lekhyareddy29
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

UNIT-3

TABLES
Tables in HTML pages allow you to organize information in a row and column format. For example, you
might want to display your courses and their corresponding grades in a tabular form on your resume.
In addition to laying out information in a tabular format, HTML tables are used to present any type of
information for which you want a lot of control over the positioning of the material. For Example, HTML tables
could be used to achieve a newspaper – like appearance.
TABLE TAGS :
Table are created using the table tag. <table>, with the ending tag </table>.
The most important tag that goes inside the table tag is the table row tag, <tr> and its corresponding ending tag
</tr>.
The items in a row are specified using the table data tag, <td> and its corresponding closing tag </td>.
The tabular Header tag, <th> is used to include the table header and its corresponding closing tag is </th>
ATTRIBUTES IN TABLE TAG :
ATTRIBUTE DESCRIPTION
The ALIGN attribute of the table tag with a value of
ALIGN Left will position the table at the left edge of the
page;this is default positioning. With a value of Right
for the ALIGN attribute, the table will be positioned
right.
Ex: <table align=”Centre”>
The BORDER attribute is used to set the border for a
BORDER table
Ex: <table border =”1”>
The WIDTH attribute that allows you to control the
WIDTH width of the table measured from the outer perimeter,
including borders.
Ex: <table width=”80%”>
This attribute is used to specify the gap between two
CELLSPACING data cells in a table
Ex: <table cellspacing=”5”>

This attribute is used to specify the gap between the


CELLPADDING data in cell and its cell border
Ex:<table cellpadding=”5”>
This BACKGROUND COLOR attribute is used to
BG COLOR change the background color of a table
Ex:<table bgcolor=”yellow”>

This attribute is used to merge the two or more


COLSPAN columns in a single column of a table
Ex:<td colspan=”2”>
ROWSPAN This atribute is used to merge the two or more rows in
a single row of a table
EX: <td rowspan=”2”>
BACKGROUND IMAGE This atrribute is used to upload the background image
for a table.
Ex:<table background=”/imagestest.jpg”>
Example Program For Table And Its Attributes:
<html>
<head>
<title>Creating Tables</title>
</head>
<body>
<table align=”centre” border=”1” bgcolor=”pink” width=”80%” cellspacing=”5” cellpadding=”5”>
<tr>
<th>Student Name</th>
<th>Group</th>
<th>Marks</th>
</tr>
<tr>
<td>Ramu</td>
<td>MSCS</td>
<td>80</td>
</tr>
<tr>
<td>Sita</td>
<td>BCOM</td>
<td>65</td>
</tr>
<tr>
<td>Swetha</td>
<td>MPCS</td>
<td>75</td>
</tr>
</table>
</body>
</html>

Example Program For COLSPAN AND ROWSPAN:


COLSPAN:

<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>

ROWSPAN:

<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>

HTML FRAMES
The frame set page contains a set of references to HTML files, each of which is display inside a separate frame. All of
the pages with in a frame set are displayed inside the same browser window and can actually made to appear to be a single
page.
Frame based sites display more than one page at the same time they can be complex to set up. Once the layout is
established frame based sites can require less maintenance than alternative approaches.
A frame based page is actually made from a set of documents each displayed in its own frame. Each sub document can
have its own scroll bars and can be loaded, reloaded and printed as if it were occupying the whole screen.
<frameset>
This tag determines how the screen will be divided between the various frames. We can have as many frames either
horizontally or vertically as we want. Each has to be allocated a percentage of the screen. We can also nest framesets so
that individual rows and columns can themselves be broken up into frames.
Syntax:
<frameset cols = "list" rows = "list" border="pixels" border color = "color">
</frameset>
The frame element defines a frame- a rectangular subspace within a frameset document. Each frame must be contained
within a frameset that defines the dimensions of the frame.

EXAMPLE:
<html>
<head>
<title>frames example</title>
</head>
<freameset rows=”50%, 50%”>
<frame name=”top” src=”sample.html”>
<frame name=”bottom” src=”formatting=”html”>
</frameset>
<body>frames are used to created blocks of information</body>
</html>
HTML FORMS
HTML Forms: Forms are a mechanism that allow user to type information into fields on a browser screen and submit the
information to a web server. They allow user to create interactive web pages. That is uploaded to the designated server to
handle the form.
A program on the server processes the information and the returns a new HTML document.
Forms have many functions. They can be used for gathering information about an user, conducting a survey, selecting
something of interest, placing an order on line, submitting a query to a search form, values are uploaded to the receiving
server the server that processes the form.
Form Tags: User can include multiple forms in a single HTML document. Also forms can have a number of different
types of fields such as text input fields, Radio buttons, check boxes, select fields submit and reset button. The beginning
and ending tags for form creation are <form> and </form> the most important attribute of Form are Action and METHOD.
<FORM ACTION="url" Method="get\post">
</FORM>
Form methods: There are two different ways of sending values to a web server. They are GET and POST. The GET
method appends the values of input parameters to the URL Specified, in ACTION attribute the ACTION URL is separated
from the parameter names and Values by question mark symbol. In the post method the server specified in Action attribute
is contacted. After the Communication is made input values are sent to the server.
FORM Input Tags: User may include nearly any type of HTML formatting command inside of a form tag and forms may
be nested. To create most of the form elements, user use the input tag <input>. The program on the server-side must do
type checking and must handle errors.
Text boxes: A rectangular shaped field in which a user can enter text is called text box. A text box is produced using input
tag and specifying the appropriate attributes.
Syntax
<input Type="Text" Name = "name” Size=40 Max length>
Check boxes: A checkbox is represented by an icon that the user can select or deselect by clicking on it. A selected
checkbox is usually shown in dark gray and an unselected Checkbox usually shown in light gray.
Radio Buttons: Radio Buttons are a group of buttons in which only one can be selected at a time. Buttons that have the
same name are the elements of the same set of the radio buttons and only one of them may be selected at any given time.
The default button is the first button, unless the CHECKED attribute is included. A user can deselect the default by
clicking on the other Button.
Action Buttons : There are two types of action buttons. They are submit and reset. When user clicks on the submit button
the value that have been entered into the form are sent to the program that processes the form. The function of the reset
button is to allow the user to clear all of the input they are for entered into the form
Select: The select tag lets you choose any subset of items from a group and it does not take a lot of screen space. The
select tag < SELECT> with its ending tag </SELECT>. The items in a given select tag are usually rendered in the style of
pop- up menu.
Passwords: user can create a password text field. This creates a marked field in which a user can enter their password; the
password is not show on the screen. How ever no security, other than a masking of the pass word is provided in the way
the password is transmitted to the server CGI. Script & security issues.
Example:
<html>
<head>
<title>Example on forms</title>
</head>
<body>
<form name=”registration”>
<p>enter your name</p>
<input type=”text” name=”name”>
<p>enter row number</p>
<input type=”text” name=”roll no”>
<input type=”radio” name=”gender” value=”male”>
<input type=”radio” name=”gender” value=”female”>
<input type=”checkbox” name=”sub1” value=”java”>
<input type=”checkbox” name=”sub2” value=”c”>
<input type=”checkbox” name=”sub3” value=”HTML”>
<input type=”button” value=”submit”>
<input type=”button” value=”reset”>
</form>
</body>
</html>
UNIT-4

JAVASCRIPT:
JavaScript (js) is a light-weight object-oriented programming language which is used by several websites for
scripting the webpages. It is an interpreted, full-fledged programming language that enables dynamic
interactivity on websites when applied to an HTML document.

It was introduced in the year 1995 for adding programs to the webpages in the Netscape Navigator browser.
Since then, it has been adopted by all other graphical web browsers. With JavaScript, users can build modern
web applications to interact directly without reloading the page every time. The traditional website uses js to
provide several forms of interactivity and simplicity.

Although, JavaScript has no connectivity with Java programming language. The name was suggested and
provided in the times when Java was gaining popularity in the market. In addition to web browsers,
databases such as CouchDB and MongoDB uses JavaScript as their scripting and query language.
FEATURES OF JAVASCRIPT
There are following features of JavaScript:
1. All popular web browsers support JavaScript as they provide built-in execution environments.
2. JavaScript follows the syntax and structure of the C programming language. Thus, it is a structured
programming language.
3. JavaScript is a weakly typed language, where certain types are implicitly cast (depending on the
operation).
4. JavaScript is an object-oriented programming language that uses prototypes rather than using classes
for inheritance.
5. It is a light-weighted and interpreted language.
6. It is a case-sensitive language.
7. JavaScript is supportable in several operating systems including, Windows, macOS, etc.
8. It provides good control to the users over the web browsers.
Problems / Demerits / Disadvantages of JavaScript: -
1. If your script doesn‟t work then your page is useless.
2. Because of the problem of broken scripts many web surfers disable JavaScript support in their
browsers.
3. Script can run slowly and complex scripts can take a long time to start up.
JAVASCRIPT VARIABLE
A JavaScript variable is simply a name of storage location. There are two types of variables in JavaScript :
local variable and global variable.
There are some rules while declaring a JavaScript variable (also known as identifiers).
1. Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ ) sign.
2. After first letter we can use digits (0 to 9), for example value1.
3. JavaScript variables are case sensitive, for example x and X are different variables.
EXAMPLE:
<script>
var x = 10;
var y = 20;
var z=x+y;
document.write(z);
</script>
JAVASCRIPT LOCAL VARIABLE
A JavaScript local variable is declared inside block or function. It is accessible within the function or block
only. For example:
<script>
function abc(){
var x=10;//local variable
} </script>
JAVASCRIPT GLOBAL VARIABLE
A JavaScript global variable is accessible from any function. A variable i.e. declared outside the function
or declared with window object is known as global variable.
For example:
<script>
var data=200;//gloabal variable
function a(){
document.writeln(data);
}
function b(){
document.writeln(data);
}
a();//calling JavaScript function
b();
</script>
OPERATORS:
“An Operator is a symbol that tells the computer to perform certain mathematical or logical manipulation or
action”. Operators operate on Operand. Operand may be either variable or data. Operators are used to manipulate
the program‟s data. JavaScript operators can be classified into several numbers of categories as below:
1. Arithmetic Operator ( +, -, *, /)
2. Relational (or) Comparison Operator (==, !=, <, >, <=, >=).
3. Logical Operator (or) Compound (Logical And &&, Logical OR ||, Logical NOT !).
4. Assignment Operator ( = ).
5. Incremental / Detrimental Operator ( ++, -- ).
(I). Arithmetic Operator: -
Arithmetic Operator are use to construct mathematical expressions as in algebra. Using these Operators, the
programmer can build the statements to be performed arithmetic operations like Addition, Subtraction,
Multiplication, Division and Modulo Division.

Operator Meaning Example


+ Addition (or) Unary Plus 3+4
- Subtraction (or) Unary Minus 5–3
* Multiplication 5*5
/ Division 10 / 2
% Modulo Division 20 % 7
(II). Relational Operators (or) Comparison Operators: -

Relational Operators are used for comparison, when we need to compare two quantities with one another. Java has
several expressions for testing equality and magnitude. All of these expressions return a Boolean value (That is
True or False). All these relational operators compare the left operand with the right operand and return the result.
Java supports six relational operators in all. These operators and their meanings are shown in below table.

Operator Meaning
< Is less than
<= Is Less than or equal
> Is greater than
>= Is greater than or equal to
== Is equal to
!= Is not equal

A simple relational expression contains only one relational operator and is of the following form.
Arithmetic Expression 1 and Arithmetic Expression 2, which may be simple constants, variables or combination of
them. Below table shows some examples of simple relational expressions and their values.

Operator Meanings
4.5 < = 10 True
4.5 < - 10 False
-35 > = 0 False
10 < 7 + 5 True

When Arithmetic Expression is used on either side of a relational operator, the Arithmetic Expression will be
evaluated first and then the results compared. That is arithmetic operators have a higher priority over relational
operators

LOGICAL OPERATORS: -
Logical Operators are used to form compound conditions by combining two or more relations. The expression
which is formed as combining of two or more relational expressions is called as Logical Expression or Compound
Relational Expression. In Java all Logical Operators returns Boolean Values that is either True or False as results.
Java has three logical operators, which are given in below table.
• Logical AND (&&)
• Logical OR (||)
• Logical NOT (!)
Logical AND (&&): - This operator return “True”, if both the operands are evaluated to “True”, otherwise it
returns “False”. Observe following Logical AND (&&) Truth Table
Expression 1 Expression 2 Exp 1 && Exp 2
True True True
True False False
False True False
False False False

Logical OR (||): - This operator return “False”, if both the operands are evaluated to “False”, otherwise it
returns “True”. Observe following Logical OR (||) Truth Table.

Expression 1 Expression 2 Exp 1 || Exp 2


True True True
True False True
False True True
False False False
Logical NOT (!): - This operator is used to negate a value of type Boolean. If converts a True value into
False and False value into True. Observe following Logical NOT (!) Truth table.

Expression Result
True False
False True
(IV) ASSIGNMENT OPERATORS: -Assignment Operators are used to assign the value of an
expression to a variable or constant. The Operator „=” is used as Assignment Operator in Java. The right
side of an assignment expression is always evaluated before the assignment takes place. This means that
expressions such as x = x+2 do the right thing; 2 is added to the value of x, and then that new value is
reassignment to x.The usual assignment operator „=‟. In additional Java has a set of
„Shorthand‟ assignment operators which are used in the form.
Example: - x + = y + 1 this is same as the statement as x = x + (y+1). Some of the
Shorthand Assignment Operators: -

Expression Meaning
x+=y x= x + y
x-=y x=x–y
x*=y x=x*y
x/=y x=x/y
x*=y+1 x = x * (y + 1)
x /=y+1 x = x / (y + 1)
x%=y x=x%y
(V). Incremental and Detrimental Operators: -
Java supports two operators Increment and Decrement Operators. Which are used to increase or decrease
the values of variables by one. The Operator ++ adds 1 to the operand, while – subtracts 1. Both these two
operators take only one operand, so they are called as Unary Operators.

Operator Meaning
++ Increment Operator
-- Decrement Operator
STATEMENTS IN JAVASCRIPT:

A javascript statement is a command to a browser. The purpose of the command is to tell thebrowser
what to do.

Statements can be classified into two types

1. Conditional statements
2. Looping statements
Conditional statements control behavior in JavaScript and determine whether or not pieces of code can
run.
There are multiple different types of conditionals in JavaScript :
1. If statement
2. Else statement
3. Elseif statement
4. Switch statement
JavaScript If statement: It evaluates the content only if expression is true. The syntax of
JavaScript if statement is given below.

if(expression){
//content to be evaluated
}
Example Of If Statement In Javascript.
<script> var a=20;
if(a>10){
document.write("value of a is greater than 10");
}
</script>
JavaScript If...else Statement
It evaluates the content whether condition is true of false. The syntax of JavaScript if-elsestatement
is given below.
if(expression){
//content to be evaluated if condition is true
}
else{
//content to be evaluated if condition is false
}
Example of if-else statement in JavaScript:
<script>
var a=20;
if(a%2==0){
document.write("a is even number");
}
else{
document.write("a is odd number"); }</script>
JavaScript If...else if statement
It evaluates the content only if expression is true from several expressions. The syntax ofJavaScript if
else if statement is given below.
if(expression1){
//content to be evaluated if expression1 is true
}
else if(expression2){
//content to be evaluated if expression2 is true
}
else if(expression3){
//content to be evaluated if expression3 is true
}
else{
//content to be evaluated if no expression is true
}
Example of if else if statement in javascript.
<script>
var a=20;
if(a==10)
{
document.write("a is equal to 10");
}
else if(a==15)
{
document.write("a is equal to 15");
}
else if(a==20){
document.write("a is equal to 20");
}
Else
{
document.write("a is not equal to 10, 15 or 20");
}
</script>
JavaScript Switch

The JavaScript switch statement is used to execute one code from multiple expressions. It isjust like
else if statement that we have learned in previous page. But it is convenient
than if..else..if because it can be used with numbers, characters etc.The Syntax

of JavaScript switch statement is given below.


switch(expression){

case value1: code to be executed;break;

case value2: code to be executed;break;

......

default: code to be executed if above values are not matched;

Example of switch statement in javascript.


<script>

var grade='B'; var result;

switch(grade){

case 'A': result="A Grade";break;

case 'B': result="B Grade";break;

case 'C': result="C Grade";break;

default: result="No Grade";

document.write(result);

</script>

JAVASCRIPT LOOPS
The JavaScript loops are used to iterate the piece of code using for, while, do while or for-in loops. It makes
the code compact. It is mostly used in array.Looping Statement also called as “Iteration Statements”. With
the help of iterative statements we can repeated the specific task aslong as the specified condition. The
following comes under these Statements like:

(A). While Looping. (B). Do…While Looping. (C). For Looping


JavaScript For loop

The JavaScript for loop iterates the elements for the fixed number of times. It should be used ifnumber
of iteration is known. The syntax of for loop is given below.
for (initialization; condition; increment)
{
code to be executed
}
The For Loop Statement consists of three parts. That is:

1. Initialization Part.
2. Test Condition Part.
3. Increment / Decrement Part.

Initialization Part: - “Initialization part is used to initialize all the sentinel variables which are to be used
in the loop”. Using the assignment statement such as I = 1 or k = 0 or count = 0.the variables I, K, Count
are known as „Loop-Control Variables‟.

Test Condition Part: - “The Condition / Expression part contains the actual conditional expression which
controls the execution of the Loop”. The Test Condition is a relationalexpression, such as I < 20, or I < n,
that determines when loop will exit. If the condition is“True”, the body of the loop is executed; otherwise the
loop is terminated.

Increment / Decrement Part: - “Increment / Decrement part is used to place increment or decrement
expressions of the variables”. When the body of the loop is executed, the control is transferred back to the
For Statement after evaluating the last statement in the loop. Now the control variable is Incremented /
Decremented by i+ + (Increment I by 1) / i- - (Decrement I by1),and the new value of the control variable is
again tested to see whether it satisfies the loop condition. If the condition is satisfied, the body of the loop is
again executed. This process continueduntil the given condition becomes control variable fails.
Example of for loop in javascript.
<script>
for (i=1; i<=5; i++)
{
document.write(i + "<br/>")
}
</script>
JavaScript while loop
The JavaScript while loop iterates the elements for the infinite number of times. It should be used if
number of iteration is not known. While Loop is an Entry-Controlled Loop statement as ittests the given
condition from the first iteration onwards.

a. The Test condition is evaluated and if the condition is “True”, then the body of the
loop is executed.

b. After execution of the body, the tests condition is once again evaluated and if it is
„True‟, the body is executed once again.

c. This process of repeated execution of the body continues until the test condition
finally becomes “False” and the control is transferred out of the loop on exit.
The Syntax of while loop is given below.
while (condition)
{
code to be executed
}

Example of while loop in javascript.


<script> var i=11;
while (i<=15)
{
document.write(i + "<br/>");i++;
}
</script>
JavaScript do while loop
The Do…While Loop Statement, executed the body of statement at first then evaluates the
condition. If condition is True to allow the body of the loop repeatedly. If it is False, the loop
will be terminated.

Do…While Loop is an Exit-Condition loop statement as it allows the loop body to be executedfor
thefirst time without any condition.

The Body of statement executed at first time without any test condition, then evaluate thecondition,
If condition is “True” to evaluate the loop body will be allowed to execute.

This loop is used to execute a set of statements repeatedly for a finite number of times.

This process will be continued until the given test condition becomes False, The Loop
will beterminated and control goes to the statement that appears immediately after the while
statement.
The syntax of do while loop is given below.do{

code to be executed

}while (condition);

Example of do while loop in javascript.


<script> var
i=21;do{
document.write(i + "<br/>");
i++;
}while (i<=25);
</script>
BREAK AND CONTINUE STATEMENT

The break statement "jumps out" of a loop.

The continue statement "jumps over" one iteration in the loop.

The Break Statement

It was used to "jump out" of a switch() statement.

The break statement can also be used to jump out of a loop:

Example
for (let i = 0; i < 10; i++)

{
if (i === 3)

{ break;

}
text += "The number is " + i + "<br>";
}

In the example above, the break statement ends the loop ("breaks" the loop) when the loop counter (i) is 3.

The Continue Statement

The continue statement breaks one iteration (in the loop), if a specified condition occurs, and continues with the
next iteration in the loop.

This example skips the value of 3:

Example
for (let i = 0; i < 10; i++)

{
if (i === 3)

{ continue;
}
text += "The number is " + i + "<br>";
}

PROMPT() DIALOG BOX

The prompt() method in JavaScript is used to display a prompt box that prompts the user for the input. It is
generally used to take the input from the user before entering the page. It can be written without using
the window prefix. When the prompt box pops up, we have to click "OK" or "Cancel" to proceed.

The box is displayed using the prompt() method, which takes two arguments: The first argument is the label
which displays in the text box, and the second argument is the default string, which displays in the textbox. The
prompt box consists of two buttons, OK and Cancel. It returns null or the string entered by the user. When the
user clicks "OK," the box returns the input value. Otherwise, it returns null on clicking "Cancel".

The prompt box takes the focus and forces the user to read the specified message

EX:
<html>
<head>
<script type = "text/javascript">
function fun() {
prompt ("This is a prompt box", "Hello world");
}
</script>
</head>

<body>
<p> Click the following button to see the effect </p>
<form>
<input type = "button" value = "Click me" onclick = "fun();" />
</form>
</body>
</html>
UNIT-5

JAVASCRIPT FUNCTIONS

JavaScript functions are used to perform operations. We can call JavaScript function many
times to reuse the code.

Advantage of JavaScript function

There are mainly two advantages of JavaScript functions.

Code reusability: We can call a function several times so it save coding.

Less coding: It makes our program compact. We don’t need to write many lines of
code each time to perform a common task.

JavaScript Function Syntax

The syntax of declaring function is given below. function functionName([arg1, arg2,


...argN])

//code to be executed

JavaScript Functions can have 0 or more arguments. Arguments are also known as
Parameters

JavaScript Function Example

Let’s see the simple example of function in JavaScript that does not has arguments.

<script> function msg(){

alert("hello! this is message");

</script>

<input type="button" onclick="msg()" value="call function"/>

JavaScript Function Arguments

We can call function by passing arguments. Let’s see the example of function that has
one argument.

<script>
function getcube(number){ alert(number*number*number);

</script>

<form>

<input type="button" value="click" onclick="getcube(4)"/>

</form>

Function with Return Value

The return statement ends function execution and specifies a value to be returned to
the function caller.

We can call function that returns a value and use it in our program. Let’s see the
example of function that returns value.

<script>

function getInfo()

return "hello javatpoint! How r u?";

</script>

<script> document.write(getInfo());

</script>

CASCADING STYLE SHEETS


CSS is the key presentational technology that is used in website design. Prior to CSS, nearly all of the presentational
attributes of HTML documents were contained within the HTML markup; all font colors, background styles, element
alignments, borders and sizes had to be explicitly described, within the HTML. As a result of, development of large web
sites, where fonts and color information were repeatedly added to every single page, became a long and expensive process.
CSS solve these problems, by allowing web designers to move much of that formatting information to a separate style
sheet resulting in considerably simpler HTML markup.
ADVANTAGES OF CSS:
1. CSS saves time: you can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style
for each HTML element and apply it to as many web pages as we want.
2. Pages, Load Faster: if we are using CSS we do not need to write HTML tag attribute every time. Just write one CSS
rule of a tag and apply it to all the occurrences of that tag. So less code means, faster download times.
3. Easy maintenance: to make a global change, simple change the style and all elements in all the web pages will be
updated automatically
4. Superior styles to HTML: CSS has a much wider array of attributes than HTML, so we can give a better look to our
HTML page in comparison to HTML attributes
5. Global web standards: Now HTML attributes are being deprecated and it is being recommended to use CSS. So it is a
good idea to start using CSS in all the HTML pages to make them comparable to future browsers.
DISADVANTAGES:
1. Browser compatibility: The two main browsers Netscape and internet explorer have varying levels of compliance with
style sheets. This means that some style sheet features are supported or not.
2. Come in different levels: there is CSS, CSSI upto CSS3 which has resulted in confusion among developers and web
browsers. One type of CSS should be enough.
CSS AND ITS TYPES
HTML is poor language for formatting. Cascading style sheets(CSS) is used to improve the page formatting. A style
sheet can be used to define how your document is displayed by the browser. Normally a browser displays the document
using a predefined set of fonts all sizes. A style sheet can be used to control the display of the document. A style is simply
a set of formatting instructions that can be applied to a piece of text.
There are 3 mechanisms by which we can apply styles to our HTML documents.
1. The style can be defined within the basic HTML
2. Styles can be defined in the head section and applied to the whole document,
3. Styles can be defined in external files called style sheets which can be used in any document by including the style
sheets via a URL.
Syntax for CSS: a CSS rule has 2 main parts: a selector, and one or more declarations

H1 {color : red ; font-size: 12px;}


Selector property value
 The selector is normally the HTML element we want to style
 Each declaration consists of a property and a value.
 The property is the style attribute we want to change. Each property has a value.
Example:
<html>
<head>
<title>simple style sheet</title>
<style>
H1 { Color: red;
Border : thin groove;
Text-align: center;
}
</style>
</head>
<body>
<h1>smple style street<mi>
</body>
</html>

TYPES OF CASCADING STYLE SHEETS:


A style simple a set of formatting instructions that can be applied to a piece of text. Cascading style sheets help us to
specify presentation of elements on a web page. In other words, the spacing between the text and margins is allowed using
CSS. Hence using cascading style sheet we can determine the style and layout of the web page.
There are 3 mechanisms by which we can apply 'styles to our HTML documents.
1. Inline style sheets.
2.Internal style sheets.
3. External style sheets.
1. Inline style sheets: This style can be defined within the basic HTML tag. Style information can be added directly in a
single element. Suppose we want to set different properties to a tag we use "style” attribute. It is very easy to use. It is
bound very closely to tag.
Syntax
<tag style="property 1: value; property 2: value; property N: value;">...</tag>
Example:
<head>
<title> Inline style sheets</title>
</head>
<body>
<h1 style=”color=blue; text-align=centre”>Inline style sheet</h1>
<p style=”background-color:yellow; color:red; text-align=”centre” font size:12pt”>
</p>
</body>
</html>
Internal style sheet: For Internal style sheets we write all desired selectors along with the properties and values in the
head section. And in the body section the newly defines selector tags are used with the actual contents. The embedded
style is possible using style tag with in the head section.
Syntax: <style type="text/CSS">
------------------------
-----------------------------
</style>
Example:
<html>
<head>
<title>sample example</title>
<style type=”text/css”>
H1{
Color:red;
Font-size:20px;
Background-color: blue;
}
</style>
</head>
<body>
<h1>SDHR college</h1>
<p>Welcome to HTMLS</p>
</body>
</html>
3. External style sheets: Sometimes we need to apply particular style to more than one web page. In such cases, external
style sheets can be used. The central idea in this type of style sheet is that the desired style is stored in “one.css" file and
the name of that file has to be mentioned in our web page. Then the styles defined in "css" file will be applied to all these
web pages.
Example:
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
</html>
DEFINING YOUR OWN STYLES
Styles are defined by simple rules. A style can contain as many rules as we want and as with processing HTML.
Cascading Styles: Conventionally styles are cascaded. This means that we do not have to use just a single set of
styles inside a document - we can import as many style sheets as we like.
This is useful if we define a set of organizational styles that can be modified by each department. Overriding can
take place in style sheets, this means that the first is overridden by the second, the second by the third and so on.
Overriding can also happen by defining styles within the body of the page.
To create own styles we can use Classes and anonymous Classes
Classes: The declaration method applies the same style to all tags. This can be used if we want every paragraph equally
indented or every level one heading in the same font. (If we only want to apply a style to some paragraphs, for instance,
we have to use classes)
syntax:
selector.classname{ property value, property value)
<selector class=classname>
In this case selector is used with a unique name using a dot. In the HTML document when you want to use a named
style the tag is extended by including class and the unique name.
For Ex:
<html>
<head>
<title>example for class</title>
<style>
h1.sgj
{
color:blue;
background-color:red;
font-family:Arial,;
</style></head><body>
<h1 class="sgj"> A Simple Heading</h1>
</body></html>
Anonymous Classes:
If we want to apply a piece of formatting to many different elements within a page but not necessarily to the entire
page. CSS provides a way of defining styles within reusable classes, by using the concept of anonymous class.
Example:
<html>
<head>
<title>example for anonymous classes</title>
<style>
abc
{
Color: red;
background-color: green;
font-family: Arial;
}
</style>
</head>
<body>
<h1 class="abc"> A Simple Heading</h>
<p class=”abc"> Applying the style abc to a paragraph</p>
</body>
</html>
PROPERTIES AND VALUES IN STYLES:
A number of properties of the text can be altered. These can be grouped together.
Fonts:
font-family:
The font to use is set by the font-family property. Instead of defining a single font, a sequence of fonts should be
listed. The browser will use the first if it is available but try the second and so on. The value can either be a specific
font name or a generic font family.
For Ex: p{font-family: "New Century Schoolbook"}
font-style:
The font-style property has one of two values: normal, italic
Ex: h3 { font-style: italic)
font-weight: normal bold bolder lighter 100 200 300 400 500 600 700 800 900. The font-weight property sets the
weight of the font to values like normal and bold. It also has values bolder and lighter which are relative to any
inherited font weight Values range from 100 to 900 with normal being 400 and bold being 700 approximately
For Ex:
h1{ font-weight: 800 }
font-size: The font-size property sets the size of the displayed characters. The absolute-size values are small,
medium and large.
For Ex:
h1{ font-size: small }
Background and Color:
color: <color> The color property sets the foreground colour of a text element.
For Ex: h1 {color: blue }
Background Color: The background-color property sets the background colour of an clement.
For ex: body { background-color: white}
Text:
text-decoration: The text-decoration property defines how text is decorated.
For ex: h3 { text-decoration: underline}
Text Transformation
text-transform: capitalize uppercase | lowercase
The text-transform property allows text to be transformed by one of four properties:
capitalize capitalizes first character of each word
uppercase capitalizes all characters of each word
lowercase uses small letters for all characters of each word

Text Alignment (set justification):


text-align: left right center justify
The text-align property defines the horizontal alignment of text.
For example h1{ text-align: center }
Margins :
Any of the margins of a box can be changed. We can have a absolute length or we can specify it in percentage
that resized based on window size. We can specify 1,2 or 4 margin values. If we specify 4 they are applied in the
order top, right, bottom and left. Specify just one value and it is applied to all four margins.
For example h1 { margin top: 100px;
margin bottom: 100px;
margin left: 100px;
margin right:100px; }
Border Color: The border-color property sets the colour of the border. The four border parts
(top, right, bottom, left) can be set to different colours.
An example is: P{border-color: black red black red)
Border Style:
The border-style property sets the style of the border and must be specified for the border to be visible (the
default is none). For double, two lines are drawn and the width is between the outer edges of the two lines. Groove,
ridge, inset and outset produce various 3D effects normally associated with buttons on a display.
For example: P{border-style: double border}

Example:
<html>
<head>
<title>properties and styles</title>
<style type=”text/css”>
H1
{
Color:red;
Font-family:”times new roman”;
Font-style: italic;
Font-weight:bold;
Background color; blue;
Text-decoration: underline;
Text-align:centre;
Border:thin groove;
Border color: pink;
}
</style>
</head>
<body>
<h1> Welcome to SDHR</h1>
<h1>Welcome to CSS</h1>
</body>
</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy