CHAPTER 9 CASCADING STYLE SHEETS 9.1. Introduction CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save a lot of work External Style Sheets are stored in CSS files 9.2. Difference between CSS and HTML HTML: HTML stands for Hyper Text Markup Language HTML is for content & web page structure HTML is a markup language so has a set of markup tags HTML documents contain HTML tags and plain text and also called web pages CSS: CSS stands for Cascading Style Sheets CSS is for presentation and design Styles define how to display HTML elements External Style Sheets are stored in CSS files 9.3. Style A style tag is simply a set of formatting instructions that can be applied to a piece of text, there are three ways to implement it: 1. Inline style sheet: style that is defined in basic html tag. The syntax to use it as follows: 46
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
CHAPTER 9CASCADING STYLE SHEETS
9.1. Introduction
CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save a lot of work External Style Sheets are stored in CSS files
9.2. Difference between CSS and HTML
HTML:
HTML stands for Hyper Text Markup Language HTML is for content & web page structure HTML is a markup language so has a set of markup tags HTML documents contain HTML tags and plain text and also called web pages
CSS:
CSS stands for Cascading Style Sheets CSS is for presentation and design Styles define how to display HTML elements External Style Sheets are stored in CSS files
9.3. Style
A style tag is simply a set of formatting instructions that can be applied to a piece of text, there are three ways to implement it:
1. Inline style sheet: style that is defined in basic html tag. The syntax to use it as follows:
<html tag style=”cssproperty1: value; cssproperty2: value;”>….</html tag>
2. Internal style sheet: style sheet that is defined in head section and can be applied to whole web page. The syntax is as follows:
3. External style sheet: style sheet that is defined in external file and can be used by multiple web pages. The syntax is as follows:
In .CSS fileTag1{cssproperty1: value;cssproperty2: value;}.class1{cssproperty1: value;cssproperty2: value;}
In .html file<html><head><link rel=”stylesheet” type=”text/css” href=”XX.css”></head><body><Tag1>…..</Tag1><tag class=”class1”>…</tag><body><html>
Each type of style has its own advantages and disadvantages. If all three of them are used then inline is preferred most then internal and in last external is preferred.
9.4. Properties of Style Sheet
1. Font: This set of properties includes font-family, font-style, font-size, font-weignt and many more.
2. Color and background: This set of properties includes color, background-color, background-image, background-image, background-repeat and many more.
3. Text: this set includes properties like text-align text-transformation, text-decoration, text-shadow and many more.
4. Boxes and borders: this set includes properties such as border-width, border-color, border-style, margin, width, height and many more.
5. Table: this set includes properties like caption-side and many more.
46
ASSIGNMENT 11
<html><head></head><title>inline css</title><body style="border-width:2;background-color:yellow" text-align:center><h1 style="color:red;font-family:times new roman" > this is H1 tag</h1><p style="font-size:large;color:green;text-align:center"> this is in paragraph</p></body></html>
46
ASSIGNMENT 12<html><head><style>.h1{color:red;font-family:times new roman;}.p{font-size:large;color:green;text-align:right;}</style></head><title>internal css</title><body><h1>this is h1 tag</h1><p>this is in paragraph</p></body></html>
<html><head><link rel="stylesheet" type="text/css" href="sheet1.css"><head><body><h1>this is h1 tag</h1><p>this is p tag</p></body></html>
46
CHAPTER-10JAVA SCRIPT
What is Java Script?
JavaScript (JS) is a dynamic computer programming language. It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed. It is also being used in server-side programming, game development and the creation of desktop and mobile applications. It is a programming and interpreted language. It is widely used and supported and accessible to the beginner.
JavaScript is a prototype-based scripting language with dynamic typing and has first-class functions. Its syntax was influenced by C. JavaScript copies many names and naming conventions from Java, but the two languages are otherwise unrelated and have very different semantics. The key design principles within JavaScript are taken from the Self and Scheme programming languages. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles.
Uses of JavaScript
Use it to add multimedia elements. Create pages dynamically. Interact with the user. customizing a page based on the user's browser version. providing visual feedback to user actions. Checking for mistakes in forms before they are submitted.
Advantages
Javascript is executed on the client side. Javascript is a relatively easy language. Javascript is relatively fast to the end user Extended functionality to web pages
We can place an unlimited number of scripts in an HTML document. Scripts can be in the head section or body section or in both. We can define java script in three sections. These three sections are :
1. Head Section2. Body Section3. External Section
Head Section:- In this a JavaScript function is placed in the <head> section of an HTML page.
<!DOCTYPE html><html><head><script>function myFunction(){document.getElementById("demo").innerHTML="My First JavaScript Function";}< /script>< /head><body><h1>My Web Page</h1><p id="demo">A Paragraph</p><button type="button" onclick="myFunction()">Try it</button></body>< /html>
46
Body Section:- In this a JavaScript function is placed in the <body> section of an HTML page.
<!DOCTYPE html><html><body> <h1>My Web Page</h1><p id="demo">A Paragraph</p><button type="button" onclick="myFunction()">Try it</button><script>function myFunction(){document.getElementById("demo").innerHTML="My First JavaScript Function";}< /script></body>< /html>
External Section:- Scripts can also be placed in external files. External files often contain code to be used by several different web pages. External JavaScript files have the file extension .js.To use an external script, put the name of the script file in the source (src) attribute of the <script> tag.
Dialogue Boxes:- JavaScript has three kind of popup boxes.
Alert box,
Confirm box
Prompt box.
Alert Box:-An alert box is often used if you want to make sure information comes through to the user. When an alert box pops up, the user will have to click "OK" to proceed.
Syntax : window.alert("sometext");
Example: alert("I am an alert box!");
46
Confirm Box:-A confirm box is often used if you want the user to verify or accept something. When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed. If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.
Syntax: window.confirm("sometext");
Example: var r=confirm("Press a button");
if (r==true)
{
x="You pressed OK!";
}
else
{
x="You pressed Cancel!";
}
Prompt Box:-A prompt box is often used if you want the user to input a value before entering a page. When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value. If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.
Syntax: window.prompt("sometext","defaultText");
Example: var person=prompt("Please enter your name","Harry Potter");
if (person!=null) { x="Hello " + person + "! How are you today?"; document.getElementById("demo").innerHTML=x; }
46
Assignment-1
Create a HTML webpage to show the use of Confirmation dialog box.
<head>
<script>
var msg=confirm("Do you want to continue");
if (msg==true)
{
alert("User wants to continue!");
}
else
{
alert("User does not want to continue");
}
</script>
</head>
46
46
Assignment-2
Create a HTML webpage to show the use of Prompt dialog box.
<html><head><script language="JavaScript" type="text/javascript">var msg=prompt("enter your name"," ");alert("you have entered: "+msg);</script></head></html>
46
Assignment-3
Create a HTML webpage to show the use of Pop up dialog box.
<html><head><script language="JavaScript" type="text/javascript">var msg=prompt("enter your name"," ");alert("you have entered: "+msg);</script></head></html>
46
Assignment-4
Create a HTML webpage to show the use of Page Redirect.
Create a HTML webpage to show the use of Copy Paste.
<html> <head> <script> function copy(){ var myVal = ""; myVal = window.document.myForm.txtInput.value; window.document.myForm.txtOutput.value = myVal;}</script></head><body> <form name=myForm> <input type = "text" name = "txtInput" value = ""> <input type = "text" name = "txtOutput" value = ""> <input type = "button" value = "Copy" onClick = "copy()"> </form> </body> </html>
46
46
Assignment-8
Create a HTML webpage to show the use of Event Handling.
<html><head></head><body onload="ShowLoaded()"><h2>Handling Events</h2><a href="http://www.google.co.in" OnMouseOver="Mouse()">Hyperlink</a><form><input type="button" value="ClickMe" onclick="Clicked()"></form><script>function ShowLoaded(){alert("The page has loaded");}function Clicked(){alert("You have clicked the button");}function Mouse(){alert("The mouse is over the link");}</script></body></html>