Syllabus - July to Sept

Size: px

Start display at page:

Download "Syllabus - July to Sept"

Adela Harrington
6 years ago
Views:

1 Class IX Sub: Computer Syllabus - July to Sept What is www: The World Wide Web (www, W3) is an information space where documents and other web resources are identified by URIs, interlinked by hypertext links, and can be accessed via the Internet. It has become known simply as the Web. Header The <header> element represents a container for introductory content or a set of navigational links. A <header> element typically contains: one or more heading elements (<h1> - <h6>) logo or icon You can have several <header> elements in one document.

2 HTML Headings Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading. Example <h1>heading 1</h1> <h2>heading 2</h2> <h3>heading 3</h3> <h4>heading 4</h4> <h5>heading 5</h5> <h6>heading 6</h6> Result of Above Example Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 HTML Tag The tag defines the document's body. The element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc The HTML <title> Element The <title> tag defines the title of the document. A simplified HTML document:

3 <head> <title>title of the document</title> </head> The content of the document... HTML Paragraphs The HTML <p> element defines a paragraph Example : <p>this is a paragraph.</p> <p>this is a paragraph.</p> <p>this is a paragraph.</p> Result of Above Program: This is a paragraph. This is a paragraph. This is a paragraph. HTML Tables Tables are defined with the <table> tag. A table is divided into rows with the <tr> tag. (tr stands for table row) A row is divided into data cells with the <td> tag. (td stands for table data) A row can also be divided into headings with the <th> tag. (th stands for table heading)

4 <head> Sample Table </head> <table border="1"> <tr> <th>state</th> <th>capital</th> </tr> <tr> <td>maharashtra</td> <td>mumbai</td> </tr> <tr> <td>gujrat</td> <td>gandhinagar</td> </tr> </table> Result of Above Program Sample Table State Maharashtra Gujrat Mumbai Capital Gandhinagar HTML Lists The most common HTML lists are ordered and unordered lists: HTML Lists An ordered list: 1. The first list item 2. The second list item 3. The third list item An unordered list: List item List item List item HTML Unordered Lists An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items are marked with bullets (typically small black circles).

5 <ul> <li>coffee</li> <li>milk</li> </ul> How the HTML code above looks in a browser: Coffee Milk HTML Ordered Lists An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items are marked with numbers. <ol> <li>coffee</li> <li>milk</li> </ol> How the HTML code above looks in a browser: 1. Coffee 2. Milk Styling HTML Elements CSS (Cascading Style Sheets) was introduced in December 1996 by the W3C, to provide a better way to style HTML elements. With CSS, it becomes easy to specify the colors used for the text and the backgrounds, the size and the style for the fonts, the amount of space between elements, adding border and outlines to the elements and a host of other styling. Adding Styles to HTML Elements Style information can be either attached as a separate document or embedded in the HTML document. These are the three methods of implementing styling information to the HTML document (from highest to lowest priority). Inline styles Using the style attribute in the HTML start tag. Embedded style Using the <style> element in the head section of the document. External style sheet Using the <link> element, pointing to an external CSS files.

6 Inline Styles Inline styles are used to apply the unique style rules to an element by putting the CSS rules directly into the start tag. It can be attached to an element using the style attribute. The style attribute includes a series of CSS property and value pairs. Each property: value pair is separated by a semicolon (;), just as you would write into an embedded or external style sheet. But it needs to be all in one line i.e. no line break after the semicolon. The following example will show you how to change the color and fontsize of the text: <head> <title>example of HTML Inline Styles</title> </head> <h1 style="color:red;font-size:30px;"> This is a heading </h1> <p style="color:green;font-size:18px;"> This is a paragraph. </p> <hr style="border-color:blue;"> Output of Above Program: This is a heading This is a paragraph. Embedded Style Sheets Embedded or internal style sheets only affect the document they are embedded in. Embedded style sheets are defined in the <head> section of an HTML document using the <style> tag. You can define any number of <style> elements inside the <head> section of an HTML document. See the example below:

7 <head> <title>example of HTML Embedded Style Sheet</title> <style type="text/css"> body { background-color: YellowGreen; h1 { color: red; p { color: green; </style> </head> <h1>this is a heading</h1> <p>this is a paragraph.</p> External Style Sheets An external style sheet is ideal when the style is applied to many pages. An external style sheet holds all the style rules in a separate document that you can link from any HTML file on your site. External style sheets are the most flexible because with an external style sheet, you can change the look of an entire website by changing just one file. You can attach external style sheets in two ways linking and importing: Linking External Style Sheets An external style sheet can be linked to an HTML document using the <link> tag. The <link> tag goes inside the <head> section: <head> <title>example of HTML External Style Sheet</title> <link rel="stylesheet" type="text/css" href="/examples/css/style.css"> </head> <h1>linking External Style Sheet</h1> <p>the styles of this HTML document are defined in linked style sheet.</p>

8 Output of Above Program: Linking External Style Sheet The styles of this HTML document are defined in linked style sheet. 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: <h1 style="color:blue;">this is a Blue Heading</h1>

9 OutPut: This is a Blue Heading 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: <head> <style> body {background-color: powderblue; h1 {color: blue; p {color: red; </style> </head> <h1>this is a heading</h1> <p>this is a paragraph.</p> OutPut External CSS: An external style sheet is used to define the style for many HTML pages.

10 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: <head> <link rel="stylesheet" href="styles.css"> </head> <h1>this is a heading</h1> <p>this is a paragraph.</p> Output This is a heading This is a paragraph. An external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a.css extension. Here is how the "styles.css" looks: body { background-color: powderblue; h1 { color: blue; p { color: red; CSS Fonts The CSS color property defines the text color to be used. The CSS font-family property defines the font to be used. The CSS font-size property defines the text size to be used.

11 <head> <style> h1 { color: blue; font-family: verdana; font-size: 300%; p { color: red; font-family: courier; font-size: 160%; </style> </head> <h1>this is a heading</h1> <p>this is a paragraph.</p> CSS Border The CSS border property defines a border around an HTML element: Example p { border: 1px solid powderblue; CSS Margin The CSS margin property defines a margin (space) outside the border: Example p { border: 1px solid powderblue; margin: 50px;

12 The Id Attribute To define a specific style for one special element, add an id attribute to the element: <p id="p01">i am different</p> then define a style for the element with the specific id: Example #p01 { color: blue; The class Attribute To define a style for a special type of elements, add a class attribute to the element: <p class="error">i am different</p> then define a style for the elements with the specific class: Example p.error { color: red; Syllabus Oct-Dec JavaScript Introduction JavaScript is the most popular programming language in the world.

13 It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more. Why Study JavaScript? JavaScript is one of 3 languages all web developers MUST learn: 1. HTML to define the content of web pages 2. CSS to specify the layout of web pages 3. JavaScript to program the behavior of web pages. A brief history of JavaScript JavaScript was created by Brendan Eich in 1995 during his time at Netscape Communications. Where JavaScript is used JavaScript is used to create interactive websites. It is mainly used for: o o o o o Client-side validation Dynamic drop-down menus Displaying data and time Displaying popup windows and dialog boxes (like alert dialog box, confirm dialog box and prompt dialog box) Displaying clocks etc. JavaScript Syntax JavaScript can be implemented using JavaScript statements that are placed within the <script>.... You can place the <script> tags, containing your JavaScript, anywhere within your web page, but it is normally recommended that you should keep it within the <head> tags. Your First JavaScript Program <script language="javascript" type="text/javascript"> document.write("hello World!")

14 Output: Hello World Enabling JavaScript in Browsers JavaScript in Internet Explorer Here are simple steps to turn on or turn off JavaScript in your Internet Explorer Follow Tools Internet Options from the menu. Select Security tab from the dialog box. Click the Custom Level button. Scroll down till you find Scripting option. Select Enable radio button under Active scripting. Finally click OK and come out To disable JavaScript support in your Internet Explorer, you need to select Disable radio button under Active scripting. JavaScript - Variables Like many other programming languages, JavaScript has variables. Variables can be thought of as named containers. You can place data into these containers and then refer to the data simply by naming the container. Before you use a variable in a JavaScript program, you must declare it. Variables are declared with the var keyword as follows. <script type="text/javascript">  You can also declare multiple variables with the same var keyword as follows <script type="text/javascript">

15 Storing a value in a variable is called variable initialization. You can do variable initialization at the time of variable creation or at a later point in time when you need that variable. JavaScript Variable Scope The scope of a variable is the region of your program in which it is defined. JavaScript variables have only two scopes. Global Variables A global variable has global scope which means it can be defined anywhere in your JavaScript code. Local Variables A local variable will be visible only within a function where it is defined. Function parameters are always local to that function. What is an operator? Let us take a simple expression is equal to 9. Here 4 and 5 are called operands and + is called the operator. JavaScript supports the following types of operators. Types of Operators 1. Logical Operators 2. Arithmetic Operators 3. Relational Operators JavaScript Logical Operators Operator Description && logical and logical or! logical not JavaScript Arithmetic Operators Arithmetic operators are used to perform arithmetic on numbers: Operator Description + Addition - Subtraction * Multiplication / Division % Modulus (Remainder) ++ Increment -- Decrement

16 JavaScript Comparison Operators Operator Description == equal to === equal value and equal type!= not equal!== not equal value or not equal type > greater than < less than >= greater than or equal to <= less than or equal to? ternary operator JavaScript - if...else Statement While writing a program, there may be a situation when you need to adopt one out of a given set of paths. In such cases, you need to use conditional statements that allow your program to make correct decisions and perform right actions. if statement The if statement is the fundamental control statement that allows JavaScript to make decisions and execute statements conditionally. Syntax The syntax for a basic if statement is as follows if (expression){ Statement(s) to be executed if expression is true Example Try the following example to understand how the if statement works. <script type="text/javascript">  <p>set the variable to different value and then try...</p>

17 Output Qualifies for driving Set the variable to different value and then try... if...else statement: The 'if...else' statement is the next form of control statement that allows JavaScript to execute statements in a more controlled way. Syntax if (expression){ Statement(s) to be executed if expression is true else{ Statement(s) to be executed if expression is false Here JavaScript expression is evaluated. If the resulting value is true, the given statement(s) in the if block, are executed. If the expression is false, then the given statement(s) in the else block are executed. Example Try the following code to learn how to implement an if-else statement in JavaScript. <script type="text/javascript">  <p>set the variable to different value and then try...</p> Output Does not qualify for driving Set the variable to different value and then try...

18 JavaScript - Switch Case Syntax The objective of a switch statement is to give an expression to evaluate and several different statements to execute based on the value of the expression. The interpreter checks each case against the value of the expression until a match is found. If nothing matches, a default condition will be used. switch (expression) { case condition 1: statement(s) break; case condition 2: statement(s) break;... case condition n: statement(s) break; default: statement(s) The break statements indicate the end of a particular case. If they were omitted, the interpreter would continue executing each statement in each of the following cases. We will explain break statement in Loop Control chapter. Example Try the following example to implement switch-case statement. <script type="text/javascript"> <!-- var grade='a'; document.write("entering switch block<br />"); switch (grade) { case 'A': document.write("good job<br />"); break; case 'B': document.write("pretty good<br />"); break; case 'C': document.write("passed<br />"); break; case 'D': document.write("not so good<br />");

19 break; case 'F': document.write("failed<br />"); break; default: document.write("unknown grade<br />") document.write("exiting switch block"); //--> <p>set the variable to different value and then try...</p> Output Entering switch block Good job Exiting switch block Set the variable to different value and then try... Break statements play a major role in switch-case statements. Try the following code that uses switch-case statement without any break statement. <script type="text/javascript">  <p>set the variable to different value and then try...</p> Output Entering switch block Good job Pretty good Passed Not so good Failed Unknown grade Exiting switch block

20 Set the variable to different value and then try... JavaScript For Loop Loops can execute a block of code a number of times. JavaScript Loops Loops are handy, if you want to run the same code over and over again, each time with a different value. Often this is the case when working with arrays: Instead of writing: text += cars[0] + "<br>"; text += cars[1] + "<br>"; text += cars[2] + "<br>"; text += cars[3] + "<br>"; text += cars[4] + "<br>"; text += cars[5] + "<br>"; You can write: <h2>javascript Loops</h2> <p id="demo"></p> <script> var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"]; var text = ""; var i; for (i = 0; i < cars.length; i++) { text += cars[i] + "<br>"; document.getelementbyid("demo").innerhtml = text; Different Kinds of Loops JavaScript supports different kinds of loops: for - loops through a block of code a number of times

21 for/in - loops through the properties of an object while - loops through a block of code while a specified condition is true do/while - also loops through a block of code while a specified condition is true Window Object Methods & POP UP Boxes Some object Methods with examples are as follows: Method alert() confirm() open() print() Description Displays an alert box with a message and an OK button Displays a dialog box with a message and an OK and a Cancel button Opens a new browser window Prints the content of the current window Example of alert() <p>click the button to display an alert box.</p> <button onclick="myfunction()">try it</button> <script> function myfunction() { alert("hello! I am an alert box!"); Example of Confirm() <p>click the button to display a confirm box.</p> <button onclick="myfunction()">try it</button> <script> function myfunction() { confirm("press a button!");

22 Example of open() <p>click the button to open a new browser window.</p> <button onclick="myfunction()">try it</button> <script> function myfunction() { window.open(" Example of print() <p>click the button to print the current page.</p> <button onclick="myfunction()">print this page</button> <script> function myfunction() { window.print();

Web Programming HTML CSS JavaScript Step by step Exercises Hans-Petter Halvorsen

https://www.halvorsen.blog Web Programming HTML CSS JavaScript Step by step Exercises Hans-Petter Halvorsen History of the Web Internet (1960s) World Wide Web - WWW (1991) First Web Browser - Netscape,