Nested HTML Elementsdavkusmunda.org/File/67a4edda-e4b1-4dcf-b0dd... · Web viewMerits and Demerits...

Index for Practical –Computer Application

S No Aim, Concept and practical Description Date Sign

1. Prepare a brief report on Internet Terminology, Domains and history of Internet.

2. Discuss different Internet Services and Mobile technologies.

3. Submit detailed note on HTML Elements

4. Create a webpage using Basic HTML Tags

5. Create a webpage using HTML Formatting Tags

6. Create a webpage using Lists in HTML

7. Create a webpage having Images and videos.

8. Create a webpage using Table tags for designing a web page

9. Create a Home page having index linked with all webpage.

10. Use DHTML and Write a (CSS) file for your website project.

11. Submit a report on cyber ethics

12. Submit a report on Scratch.

13. Create a story in scratch and Create a Video game in Scratch

14. Calculate profit or Loss percent in Scratch.

15. Submit a report on python programming

16. Write a python program that accepts different datatypes values and print them.

Pg No :1Practical File : Computer Application

17. Write a program using all arithmetic operators.

18. Write a program to calculate Simple interest.

19. Write a program to calculate grade using elif.

20. Write a program to print different series

21.Create a website having at least 5 webpage incorporating most of the concepts of the class X syllabus.

1. Prepare a brief report on Internet Terminology, Domains and history of Internet.

Theory:- To learn basic terms is very important. Here are some terms related to Internet.

1) Internet- Internet is a computer based world wide communication network, which is composed of large number of smaller interconnected networks.

2) World Wide Web- The World Wide Web(WWW) is a set of programs, standards and protocols that allows the multimedia and hyper text files to be created, displayed and linked on the Internet.

3) Client- any computer on the internet that requests services from another computer (Server) on the internet.

4) Server- Any computer that receives requests from client computers and sends the output. Web server respond to web related requests.

5) Webpage- Any digital page/document hosted on Internet.6) Website- A collection of interconnected webpages, designed with certain goal in

mind.7) Web portal- A web site or service that offers a broad array of resources such as e-

mail, forums, search-engines among others. Like msn, yahoo, google etc.8) Web Browser- A program or software on a client computer, that retrieves

information from the web. Examples- Internet Explorer, Google chrome, Mozilla Fire fox, Netscape, Mosaic, Opera, Safari, Lynx etc.

9) Web Client- Aweb client is a program or a component on client side that requests and uses services provided by web server.

10) URL- Uniform Resource Locator It is the unique address of a web page on Internet.Structure of a URL: Type/protocol://web address/ path

Example: http://cbse.nic.in/circulars/examnoti.pdf


11) Blog- Short for weB LOG, a blog is a web page that serves as a publicly accessible personal jornal for an individual. A blog is a frequently updated online personl journal or diary.

12) Blogger- the author of a blog is called blogger. A blogger is the one who regularly writes and updates entries in his/her blog.

13) Types of Blogs- i) Personal Blog, ii) News and views, iii) Company Blog, iv) Micro blog

14) Home page- Every website has a home page. It is the first web page that appears when viewers go to a website. Home page of a website is very important as it sets the look and feel of the websites and directs viewers to the rest of the pages in a web site.

15) NewsGroup- A news group or forum is like a community bulletin board. You can post a message, reply to a message or just read a message. Group of related messages are known as threads.

16) Some most common domains.

S No Domain ID Affiliation

1. Com

2. Edu

3. Gov

4. Mil

5. Net

6. Org

7. Co

8. Tv

9. In

10. Uk

11. Au

12. Ca


13. Jp

14. Fr

15. Nz

16. Us

17. Dk

18. Ac

19. nic

20. Eu

2. Discuss different Internet Services and Mobile technologies.

The types of services available on Internet are as diverse as the people interested in it.

1) E-mail:The most widely used tool on the Internet is electronic mail. It is used to send-receive mails and files attached.Email Account/Id and Password:- To access the service we have to sign up any e-mail service provider. It will provide us an e-mail ID and Password for authentication.

E-mail Id is one of the important id so at the time of creating id we should well aware that it should be a precise one. We should not have many Ids as it is free.

Password is very important we should keep the password complex as well as easy to remember.

Some e-mail service providers and – Attach Screen Shots

i.

ii.

iii.

iv.


v.

Structure and function of an e-mail:

From

To

CC

BCC

Subject

Body

Attachments

Date

Message ID

Buttons


Folders

2) Search Engines: A search engine is web based application that searches the content from different websites and shows relevant list of website with small description.It is used to find the content and we don’t know a particular website. Some tips for searching:i. In spite of typing whole question, Use only related words.

ii. Use – or; between the search term.iii. Use wildcard * for pattern matching.

3) Chat: Chatting is one of most popular service of Internet. It is an online real time textual, audio, video conversation among peoples. Chat Room:- Chat room is a web service where we can chat on some specific topic called chat room. Here it is not necessary that the person know each other.Commonly Used Types of chat

i. Instant Messaging (IMs)ii. ICQ (I Seek You)

iii. IRC (Internet Relay Chat)iv. Web Based Chat

4) Video Conferencing: A two way videophone conversation among multiple participants is called Video Conferencing.It has many applications-

i. Businessii. Distance Learning

iii. Legal environmentiv. Telemedicine v. Media.


5) E-Commerce: Commercial utilization of electronic media is known as e-commerce. E-commerce comes in different format in front of us. Write 3 advantages and disadvantages of the following e-commerce

E-commerce Advantages Disadvantage

E-Learning

E-Banking

E- Shopping

E- Reservation


E-Governance

E-Group

6) E-groups: E-Group is becoming popular service of Internet. It is an online and offline discussion platform. We can discuss the things in textual, audio, video formats. An e-group is another name online clubbing where you meet people of your taste and likes discuss things.

7) Social Networking Sites: Social Networking sites, also called social media, are Internet sites where people interact freely, sharing and discussing information about each other and the their lives, using a multimedia mix of personal words, pictures, videos and audio.i. Major features or terms used in Social Media

ii. Merits and Demeritsiii. Ethics in Social Media

8) SMS:SMS stands for Short Messaging Service and is also commonly referred as a “Text Message”. With message you can send message up to 160 characters. If it is longer than it, it will automatically be split into several parts.

9) MMS: MMS is the abbreviation for Multimedia Messaging Service. It is a standard way to send message that that can include various types of media in it, such as picture, audio, video etc.

10) 3G: 3G stands for “Third Generation” and originally enables wireless devices to operate at speed which made web browsing a more enjoyable experience in mobile devices. 3G speed can produce download data rates of typically from 384 kb/s to 2 MB/s.


11) 4G: 4G is the next generation with enhanced speed and better connectivity. Thus video conferencing and watching video became possible in this generation. 3G speed can produce download data rates of typically from 100 Mb/s to 1 GB/s.

The performance also depends on the device, coverage, traffic mainly.

3. Submit detailed note on HTML Elements

What is HTML?HTML is the standard markup language for creating Web pages.

HTML stands for Hyper Text Markup Language HTML describes the structure of a Web page HTML consists of a series of elements HTML elements tell the browser how to display the content HTML elements are represented by tags HTML tags label pieces of content such as "heading", "paragraph", "table", and

so on Browsers do not display the HTML tags, but use them to render the content of

the pageHTML Tags: There are three types of HTML tags:i) Container Tag:HTML tags are element names surrounded by angle brackets:<tagname>content goes here...</tagname>

HTML tags normally come in pairs like <p> and </p> The first tag in a pair is the start tag, the second tag is the end tag The end tag is written like the start tag, but with a forward slash inserted before

the tag nameNested HTML Elements

HTML elements can be nested (elements can contain elements).All HTML documents consist of nested HTML elements.

Do Not Forget the End Tag


Some HTML elements will display correctly, even if you forget the end tag:ii) Empty HTML Elements

HTML elements with no content are called empty elements.<br> is an empty element without a closing tag Empty elements can be "closed" in the opening tag like this: <br />.HTML5 does not require empty elements to be closed. But if you want stricter validation, or if you need to make your document readable by XML parsers, you must close all HTML elements properly.

HTML Is Not Case SensitiveHTML tags are not case sensitive: <P> means the same as <p>.The HTML5 standard does not require lowercase tags, but W3C recommends lowercase in HTML, and demandslowercase for stricter document types like XHTML.

iii) HTML Comment Tags: Comments are the program neutral code that is not executed or displayed. Comments are not displayed by the browser, but they can help document your HTML source code

You can add comments to your HTML source by using the following syntax:

Notice that there is an exclamation point (!) in the opening tag, but not in the closing tag.

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

Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors:

Example

HTML Attributes All HTML elements can have attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes usually come in name/value pairs like: name="value"

Web BrowsersThe purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them.The browser does not display the HTML tags, but uses them to determine how to display the document:

HTML VersionsSince the early days of the web, there have been many versions of HTML:

Version Year

HTML 1991

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 2000

HTML5 2014

Windows 8 or later:

Open Notepad > Write HTML Code > Save the file with .html or .htm extension. >Open file in any web browser.

<!DOCTYPE html>

<html>

<head><title></title></head><body><h1>My First Heading</h1>

<p>My first paragraph.</p></body></html>

Example Explained

The <!DOCTYPE html> declaration defines this document to be HTML5

The <html> element is the root element of an HTML page

The <head> element contains meta information about the document

The <title> element specifies a title for the document

The <body> element contains the visible page content

The <h1> element defines a large heading The <p> element defines a paragraph


4. Create a webpage using Basic HTML Tags and Formatting Tags

Theory: Before using any tag we should know the type of tag, its function, attributes, contents, and used place.

Some Basic tags are:

TAG Type Function Attributes Contains Used inside

BODY

H1 TO H6

BR

P


HR

CENTER

BASEFONT

Formatting Tags

FONT

B

I

U

SUP

SUB

LOGICAL TEXT STYLES

DFN


EM

CITE

ADDRESS

CODE

KBD

SAMP

STRONG

VAR

DEL

Q

TT

Practical Work:


Attach Code and Screen shot

5. Create a webpage using Lists in HTML

HTML Lists

i) 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

<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul>

ii) Ordered HTML List

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

The list items will be marked with numbers by default:Pg No :15

Practical File : Computer Application

Example

<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>

iii) HTML Description Lists

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:

Example

<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd></dl>


OL

LI

UL

DL


DT

DD

Practical Work:


6. Create a webpage having Images and videos.

HTML Images Syntax

In HTML, images are defined with the <img> tag.The <img> tag is empty, it contains attributes only, and does not have a closing tag.The src attribute specifies the URL (web address) of the image:

<img src="url">

Example

<img src="img_chania.jpg" alt="Flowers in Chania">

The HTML <picture> Element

HTML5 introduced the <picture> element to add more flexibility when specifying image resources.

The <picture> element contains a number of <source> elements, each referring to different image sources. This way the browser can choose the image that best fits the current view and/or device.

Each <source> element have attributes describing when their image is the most suitable.


The browser will use the first <source> element with matching attribute values, and ignore any following <source>elements.

Example

Show one picture if the browser window (viewport) is a minimum of 650 pixels, and another image if not, but larger than 465 pixels.

<picture> <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg"> <source media="(min-width: 465px)" srcset="img_white_flower.jpg"> <img src="img_orange_flowers.jpg" alt="Flowers" "></picture>

Playing Videos in HTMLBefore HTML5, a video could only be played in a browser with a plug-in (like flash).The HTML5 <video> element specifies a standard way to embed a video in a web page.The HTML <video> ElementTo show a video in HTML, use the <video> element:

Example<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg">Your browser does not support the video tag.</video>

The HTML <audio> ElementTo play an audio file in HTML, use the <audio> element:

Example<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg">Your browser does not support the audio element.</audio>



Img

Picture

Source

Video

Audio

Practical Work:


7. Create a webpage using Table tags for designing a web page

HTML Table

An HTML table is defined with the <table> tag.

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.

Example<table style="width:100%"> <tr> <th>Firstname</th><th>Lastname</th><th>Age</th></tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td></tr></table>


Table

TR


Th

Thead

Tbody

Tfoot

Td

Caption

Practical Work:


8. Create a Home page having index linked with all webpage.

HTML Links – Hyperlinks (Anchor Tag)HTML links are hyperlinks.You can click on a link and jump to another document.When you move the mouse over a link, the mouse arrow will turn into a little hand.Note: A link does not have to be text. It can be an image or any other HTML element.HTML Link ColorsBy default, a link will appear like this (in all browsers):

An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and redYou can change the default colors, by using CSS:Example<style>a:link { color: green; background-color: transparent; text-decoration: none;}a:visited { color: pink;background-color: transparent; text-decoration: none;}a:hover {color: red; background-color: transparent;text-decoration: underline;}


a:active {color: cyan; background-color: transparent;text-decoration: underline;}</style>

HTML Links - The target AttributeThe target attribute specifies where to open the linked document.The target attribute can have one of the following values:

_blank - Opens the linked document in a new window or tab _self - Opens the linked document in the same window/tab as it was clicked

(this is default) _parent - Opens the linked document in the parent frame _top - Opens the linked document in the full body of the window framename - Opens the linked document in a named frame

Link TitlesThe title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.

HTML Links - SyntaxHyperlinks are defined with the HTML <a> tag:<a href="url">link text</a>

Example

Types of Links: i) Local Links

A local link (link to the same web site) is specified with a relative URL (without https://www....).Example

<a href="html_images.asp">HTML Images</a>

HTML Links - Create a BookmarkHTML bookmarks are used to allow readers to jump to specific parts of a Web page.Bookmarks can be useful if your webpage is very long.To make a bookmark, you must first create the bookmark, and then add a link to it.When the link is clicked, the page will scroll to the location with the bookmark.ExampleFirst, create a bookmark with the id/name attribute:<h2 id="C4">Chapter 4</h2>Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:<a href="#C4">Jump to Chapter 4</a>


ii) External PathsExternal pages can be referenced with a full URL or with a path relative to the current web page.This example uses a full URL to link to a web page:Example<a href="https://www.davkusmunda.org/">DAV PS Kusmunda </a>

iii) Link to an e-mailFor link to any e-mail we use the “mailto:email address” in href value. This help us to take help of a native machine application to mail quickly.

Example<a href="mailto:[email protected]">mail me</a>


A

Practical Work:


9. Create a Admission form to take admission in a hobby class.

The <form> ElementThe HTML <form> element defines a form that is used to collect user input:

<form>.form elements.</form>

An HTML form contains form elements.Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.

The Action AttributeThe action attribute defines the action to be performed when the form is submitted. Normally, the form data is sent to a web page on the server when the user clicks on the submit button.


In the example above, the form data is sent to a page on the server called "/action_page.php". This page contains a server-side script that handles the form data:<form action="/action_page.php">If the action attribute is omitted, the action is set to the current page.

The Target AttributeThe target attribute specifies if the submitted result will open in a new browser tab, a frame, or in the current window. The default value is "_self" which means the form will be submitted in the current window. To make the form result open in a new browser tab, use the value "_blank":

Example<form action="/action_page.php" target="_blank">

The Method AttributeThe method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data:Example<form action="/action_page.php" method="get">

When to Use GET?The default method when submitting form data is GET.However, when GET is used, the submitted form data will be visible in the page address field:/action_page.php?firstname=Mickey&lastname=Mouse

Notes on GET: Appends form-data into the URL in name/value pairs The length of a URL is limited (about 3000 characters) Never use GET to send sensitive data! (will be visible in the URL) Useful for form submissions where a user wants to bookmark the

result GET is better for non-secure data, like query strings in Google

When to Use POST?Always use POST if the form data contains sensitive or personal information. The POST method does not display the submitted form data in the page address field.Notes on POST:

POST has no size limitations, and can be used to send large amounts of data.

Form submissions with POST cannot be bookmarked


The <input> ElementThe <input> element is the most important form element.The <input> element can be displayed in several ways, depending on the type attribute.

Here are some examples:<form> Container Creates a form<input type="text">

Empty Defines a one-line text input field

Type, size, value, id, name

<form>.. </form>

<input type="password">

Empty Defines a one-line text input field


<form>.. </form>

<input type="Checkbox">

Defines a check box button (for selecting many choices)


<form>.. </form>

<input type="radio">

Defines a radio button (for selecting one of many choices)


<form>.. </form>

<input type="submit">

Defines a submit button (for submitting the form)


<form>.. </form>

<input type="reset">

Defines a reset button (for clearing the form)


<form>.. </form>

<input type="button">

Defines a clickable button


<form>.. </form>

<textarea> Defines a multiline input control (text area)

Type, rows, cols, value, id, name

<form>.. </form>

<select> Defines a drop-down list

multiple, size <form>.. </form>

<option> Value, selected <select></select>

Practical Work:



10. Use DHTML and Write a (CSS) file for your website project.

DHTML- Dynamic HTML.

DHTML is Not a Language. DHTML stands for Dynamic HTML.DHTML is NOT a language or a web standard. DHTML is a TERM used to describe the technologies used to make web pages dynamic and interactive. DHTML means the combination of HTML, JavaScript, DOM, and CSS.JavaScript

JavaScript is the scripting standard for HTML.DHTML is about using JavaScript to control, access and manipulate HTML elements.

HTML DOMThe HTML DOM is the W3C standard Document Object Model for HTML.The HTML DOM defines a standard set of objects for HTML, and a standard way to access and manipulate them.DHTML is about using the DOM to access and manipulate HTML elements.


HTML EventsThe W3C HTML Event Model is a part of the HTML DOM.It defines a standard way to handle HTML events.DHTML is about creating web pages that reacts to (user)events.

CSSCSS is the W3C standard style and layout model for HTML.CSS allows web developers to control the style and layout of web pages.HTML 4 allows dynamic changes to CSS.

What is CSS?CSS stands for Cascading Style SheetsCSS describes how HTML elements are to be displayed on screen, paper, or in other mediaCSS saves a lot of work. It can control the layout of multiple web pages all at onceExternal stylesheets are stored in CSS files

CSS SyntaxA 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.

The id SelectorThe 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.ExampleThe style rule below will be applied to the HTML element with id="para1":

#para1 { text-align: center; color: red;}


Grouping SelectorsIf you have elements with the same style definitions, like this:h1 { text-align: center; color: red;}h2 { text-align: center; color: red;}p { text-align: center; color: red;}It will be better to group the selectors, to minimize the code.To group selectors, separate each selector with a comma.Example

h1, h2, p { text-align: center; color: red;}CSS CommentsComments are used to explain the code, and may help when you edit the source code at a later date.Comments are ignored by browsers.Example

A CSS comment starts with /* and ends with */. Comments can also span multiple lines:

p { color: red; /* This is a single-line comment */ text-align: center;}

How to Insert a Style Sheet: there are three ways to apply css in HTMLi. External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:

Example <head><link rel="stylesheet" type="text/css"href="mystyle.css" /></head>

ii. Internal Style SheetAn internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the <style> tag, like this:Example

<head><style type="text/css">hr {color: sienna}p {margin-left: 20px}body {background-image: url("images/back40.gif")}</style></head>

iii. Inline Styles


An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when a style is to be applied to a single occurrence of an element.Example:<p style="color: sienna; margin-left: 20px">This is a paragraph</p>

Applied to Attribute Value and usageText color Color name, rgb(x,x,x), hsla(x,x,x), #ffa500

Text-align Left, right, center, justifyVertical-align Top, middle, bottomText-decoration None, overline, line-through, underlineText-transform Uppercase, lowercase, capitalizeText-indent InpxLetter-spacing InpxLine-height InpxDirection Rtl, ltr, Word-spacing Inpx

Background Background-color Color name, rgb(x,x,x), hsla(x,x,x), #ffa500Background-image url(“Path”)Background-repeat No-repeatBackground-position Right top

Border Border 2px solid violet (thickness, style, color)

Border-width InpxBorder-style Dotted, dashed, solid, double, none, ridgeBoredr-color Color name, rgb(x,x,x), hsla(x,x,x), #ffa500

Margin Margin-top Inpx, autoMargin-right Inpx, autoMargin-bottom Inpx, autoMargin-left Inpx, auto

Font Font-family Name of the fontFont-style Normal, italic, oblique, Font-size InpxFont-weight Normal, boldFont-variant Normal, small-cap

Practical Work:

Preapare a 3 css file and use it for your website and change the appearance.


11. Submit a report on cyber ethics

Cyber ethics:

The current era is known as information age. Everything is available on the Internet with ease. For every matter of payment, buying/selling, announcements, government policies, comments we are using the internet. Now people are living in a virtual world called cyber world. As in real world we have some ethics we also need cyber ethics to be part of cyber world.

Why Cyber Ethics:

i. In cyber world it is easy to befool others by fake things.ii. It has spread all over the world. Making a small mistake may work as a

spark in heap of straw.iii. It is among all age group.iv. It is managing our money matters. A fraud can cheat all our hard earned

money in a fraction of seconds.Pg No :29

Practical File : Computer Application

v. A small miscommunication can imprison you for doing crime of misusing the cyber world.

vi. A big money can be penalty for any cyber crime done by you either willingly/knowing or unwillingly/ unknowing the things.

vii. Now cyber world is facing the problem of data mining. Means a lot of information has been stored and finding the right one has become a tedious job. Having similar IDs, domains, contents we can get wrong or irrelevant information.

viii. In cyber world it is very easy to plagiarism( Stealing someone else intellectual property).

ix. In cyber someone can easily steal your identity.x. Maintaining the privacy is very difficult.

When we see the above list we may be disappointed and discouraged to be a part of cyber, but by following some ethics we can enjoy the cyber world and may take advantage from it.

Cyber ethics:

i. We should not send spam mailsii. Use appropriate language.

iii. Use complete sentence, observe good grammar and spellingsiv. Don’t steal photographs, and textual contents.v. We should not create many IDs, we should not signup each and every

website.vi. We should keep our password complex and easy to remember. Also we

should write it and keep it in safe place.vii. Before any money transaction we should check it’s security certificate.

https://sbi.co.in viii. We should never tell our password or One Time Password if anybody asks for

it. If anybody is asking for this means he is a fraud.ix. Don’t chat with strangers.x. Don’t publish anything without complete proof. If we are using some content

we should give proper reference and credit to it.xi. We should promote using of Open Source Software in spite of using pirated

and cracked softwares.xii. If your age is below 18. Parental guide line and presence is required during

the use of Internet.

Practical Work:

Prepare a presentation on the subject on open office impress .


12. Submit a report on Scratch.


Scratch Window Components:

i) The Stage is where you see your stories, games, and animations come to life. Sprites move and interact with one another on the Stage. The Stage is 480 units wide and 360 units tall. It is divided into an x-y grid. The middle of the Stage has an x-coordinate of 0 and a y-coordinate of 0.

ii) Presentation Mode and View Mode Click the Presentation Mode button when you want to present your project. To exit Presentation Mode, press the Esc key. Click the View Mode buttons to switch between small and large stage view. You can use small stage view to display Scratch on small screens or to expand the Scripts Area.

iii) Current Sprite Info shows a sprite’s name, x-y position, direction, lock state, and pen state.

iv) Rotation Style Click the Rotation Style buttons to control how the costume appears as the sprite changes its direction. Rotate: The costume rotates as the sprite changes direction. Left-right flip: The costume faces either left or right. No-rotate: The costume never rotates (even as the sprite changes direction).

v) TOOLBAR: Click on the Toolbar to select a tool, then click on other objects to perform an action. Duplicate: Duplicate sprites, costumes, sounds, blocks, or scripts. (Shift+click for multiple.) Delete: Delete sprites, costumes, sounds, blocks, and scripts. (Shift+click for multiple.) Grow: Make sprites bigger. (Shift+click for larger size steps.) Shrink: Make sprites smaller. (Shift+click for larger size steps.) To return to the arrow cursor , click on any blank area of the screen.


vi)

Types of blocks:

Hat Block: These blocks have only bumps on the bottom. It is used to start a script.

Cap Block: These blocks have notches on the top. It is used to close a script.

Stack Block: These blocks have bumps on the bottom and/or notches on the top The blocks can be arranged one over another.

C Block: The C block can contain other blocks.

Reporter Block: It can store values.

Boolean Block: It return true or false.

Motion Button

Moves sprite forward or backward.

Rotates sprite clockwise

Rotates sprite counterclockwise

Points sprite in the specified direction. (0=up, 90=right, 180=down, -90=left)

Points sprite toward mouse-pointer or another sprite.

Moves sprite to specified x and y position on Stage.

Moves sprite to the location of the mouse-pointer or another sprite

Moves sprite smoothly to a specified position over specified length of time

Changes sprite’s x-position by specified amount.


Sets sprite’s x-position to specified value

Changes sprite’s y-position by specified amount

Sets sprite’s y-position to specified value

Turns sprite in opposite direction when sprite touches edge of Stage.

Reports sprite’s x-position. (Ranges from -240 to 240)

Reports sprite’s y-position. (Ranges from -180 to 180)

Reports sprite’s direction. (0=up, 90=right, 180=down, -90=left)

Looks Button

Changes sprite’s appearance by switching to different costume.

Changes sprite’s costume to next costume in the costume list. (If at end of the costume list, jumps back to first costume.)

Reports sprite’s current costume number.

Changes Stage’s appearance by switching to a different background.

Changes Stage’s background to next background in the background list.

Reports Stage’s current background number

Displays sprite’s speech bubble for specified amount of time.


Displays sprite’s speech bubble. (You can remove speech bubble by running this block without any text.)

Displays sprite’s thought bubble for specified amount of time.

Displays sprite’s thought bubble

Changes a visual effect on a sprite by specified amount. (Use pull-down menu to choose effect.)

Sets a visual effect to a given number. (Most visual effects range from 0 to 100.)

Clears all graphic effects for a sprite.

Changes sprite’s size by specified amount

Sets sprite’s size to specified % of original size

Reports sprite’s size, as % of original size

Makes sprite appear on the Stage

Makes sprite disappear from the Stage. (When sprite is hidden, other sprites cannot detect it with touching? block.)

Moves sprite in front of all other sprites.

Moves sprite back a specified number of layers, so that it can be hidden behind other sprites.

Sound Button

Starts playing a sound, selected from pull-down menu, and immediately goes on to the next block even as sound is still playing.


Plays a sound and waits until the sound is finished playing before continuing with next block.

Stops playing all sounds.

Pen Button

Clears all pen marks and stamps from the Stage.

Puts down sprite’s pen, so it will draw as it moves.

Pulls up sprite’s pen, so it won’t draw as it moves.

Sets pen’s color, based on choice from color picker. Picking the color also changes the pen shade.

Changes pen’s color by specified amount.

Sets pen’s color to specified value. (pen_color=0 at red end of rainbow, pen_color=100 at blue end of rainbow. Ranges from 0 to 200 to go around the color wheel.)

Changes pen’s shade by specified amount.

Sets pen’s shade to specified amount. (pen_shade=0 is very dark, pen_shade=100 is very light. Default is 50, unless set with color picker.)

Changes pen’s thickness.

Sets pen’s thickness

Stamps sprite’s image onto the Stage.

Control Button

Runs script below when green flag is clicked.


Runs script below when specified key is pressed.

Runs script below when sprite is clicked.

Waits specified number of seconds, then continues with next block.

Runs the blocks inside over and over

Runs the blocks inside a specified number of times.

Sends a message to all sprites, then continues with the next block without waiting for the triggered scripts.

Sends a message to all sprites, triggering them to do something, and waits until they all finish before continuing with next block.

Runs script below when it receives specified broadcast message

Continually checks whether condition is true; whenever it is, runs the blocks inside.

If condition is true, runs the blocks inside.

If condition is true, runs the blocks inside the if portion; if not, runs the blocks inside the else portion.

Waits until condition is true, then runs the blocks below.

Checks to see if condition is false; if so, runs blocks inside and checks condition again. If condition is true, goes on to the blocks that follow.


Stops the script.

Stops all scripts in all sprites

Sensing Button

Reports true if sprite is touching specified sprite, edge, or mouse-pointer. (Select from pull-down menu.)

Reports true if sprite is touching specified color. (Click on color patch, then use eyedropper to select color.)

Reports true if first color (within sprite) is touching second color (in background or another sprite). (Click on color patch, then use eyedropper to select color.)

Asks a question on the screen and stores keyboard input in

the . Causes the program to wait until the Enter key is pressed or check mark is clicked.

Reports keyboard input from the most recent use of . Shared by all sprites (global).

Reports the x-position of mouse-pointer.

Reports the y-position of mouse-pointer.

Reports true if mouse button is pressed.

Reports true if specified key is pressed.

Reports distance from the specified sprite or mouse-pointer.

Sets the timer to zero.

Reports the value of the timer in seconds. (The timer is always running.)

Reports a property or variable of another sprite.

Reports the volume (from 1 to 100) of sounds detected by the computer microphone.


Reports true if computer microphone detects a sound volume greater than 30 (on scale of 1 to 100).

Reports the value of specified sensor. To use this block, you need a sensor connected to your computer. You can use this with a Scratch sensor board (http://www.playfulinvention.com/picoboard.html) or with LEGO® WeDo™ (http://www.legoeducation.com).

Reports true if specified sensor is pressed. To use this block, you need to have a Scratch sensor board connected to your computer. (See http:// www.playfulinvention.com/picoboard.html)

Operator Button

Adds two numbers.

Subtracts second number from first number.

Multiplies two numbers.

Divides first number by second number.

Picks a random integer within the specified range.

Reports true if first value is less than second.

Reports true if two values are equal.

Reports true if first value is greater than second.

Reports true if both conditions are true.

Reports true if either condition is true

Reports true if condition is false; reports false if condition is true.

Concatenates (combines) strings.

Reports the number of letters in a string.


Reports the letter at the specified position in a string.

Reports result of selected function (abs, sqrt, sin, cos, tan, asin, acos, atan, ln, log, e^, 10^) applied to specified number.

Reports remainder from division of first number by second number.

Reports closest integer to a number.

Variable Button

Reports value of the variable.

Changes the variable by specified amount. If you have more than one variable, use the pull-down menu to select the variable name.

Sets the variable to specified value.

Shows the variable monitor on the stage.

Hides the variable monitor so it is not visible on the stage.

Reports all the items in the list. (The items are separated by spaces. However, if the items are individual letters or digits, spaces are omitted.)

Adds the specified item to the end of the list. The item can be a number or a string of letters and other characters.

Deletes one or all items from a list. You can specify which item to delete by choosing from the pull-down menu or typing in a number. Choosing “last” deletes the last item in the list. Choosing “all” deletes everything from the list. Deleting decreases the length of the list.

Inserts an item at the specified position in the list. You can specify where to insert the item by choosing from the pull-down menu or typing in a number. Choosing “any” inserts at a random place in the list. Choosing “last” adds the item to the end of the list. The length of the list increases by 1.

Replaces an item in the list with the specified value. You can specify which item to replace by choosing from the pull-down menu or typing in a number. Choosing “any” replaces


a random item in the list. The length of the list does not change.

Reports the item at the specifed position in the list. You can specify which item to report by choosing from the pull-down menu or typing in a number. Choosing “any” reports a random item in the list.

Reports how many items are in the list.

Reports true if the list contains the specified item. The item must match exactly to report true.

13. Create a story in scratch and Create a Video game in Scratch


Practical Work:

Attach screen shot of stage and script

14. Calculate profit or Loss percent in Scratch.

Practical Work:

Attach screen shot of stage and script


15. Submit a report on python programming

Developed by: Guido Van Rossum

Released on : February 1991

Some pluses of python:

a) Easy to Useb) Object Orientedc) Expressive languaged) Interpreted languagee) Its completenessf) Cross platform languageg) Free and open sourceh) Variety of usage/ application

Minuses of python:

a) Not the fastest languageb) Lesser libraries than C, Java, Perlc) Not strong on type bondingd) Not easy convertible

Working in python

i. In interactive modeii. In script mode

Tokens:

i. Keyword: The words reserved in Java which have their specific use called keywords. Keywords can’t be used as identifiers.false, assert, del, for, in, or, while, none, break, elif, from, is, pass, with, true, class, else, global, lambda, raise, yield, and, continue, except, if, nonlocal, return, as, def, finally, imprt, not, try.

ii. Identifiers: Identifiers are the names given to any class, method, objects and variables. Some naming conventions are there –

Keywords cannot be used. Space is not allowed. Digits cannot start. _ and $ are the only allowed special characters. Class name should start with capital and rest should small. The names should relevant and can be abbreviated, the second words first

letter should be capitalized. Objects should be abbreviation and should be indexed.

iii. Variables: Variables are the named memory locations to hold data of a specific type. Some terms we use for variables are-Global Variable, Local Variable, Initialization, Dynamic Declaration.


iv. Data type

Primitive data types: int, long, float, complex, bool, str

Derived Data types: list [a,b,c], tuple (a,b,c), set {a,b,c}, dictionary {a:1 ,b:1,c:1}

v. Literals: Literals are the constants or fixed data values. Java supports six type of literals.

Numeric String Boolean None Literal Collection:

vi. Operators: Operators are the symbols used to manipulate some specific tasks. In java we can categorize operators in following way-

vii. Separators/ Punctuators: The symbols used to separate similar type of elements.

, To separate variables, objects; Separates statements() Method from its arguments{} Separates blocks. If single line statement is

there then no need of {}. Object from its class property


OperatorsArithmatical (+,-,*,/,%,//, **)Relational (<,<=,>,>=,==,!=,<>)Logical ( and, or, not)Assignment Operator (+=, -=, *=, /= ,%= ,//= , **=)bitwise operatorn &,|,̂Shift Operator >>,<<Identity operator- isMembership operatoe- in, not in

“ # \ ‘ : @ =

viii. Escape sequences: Escape Sequence are the characters followed by slash (/) to print non printable characters. Some of them are:

\n New line\t Feeds a tab =8 spaces\” Feeds “\’ Feeds ‘\\ Feeds \\b Feeds back space

ix. Python Statements1) Variable declaration:

a. Dynamic Typing: variable declared without specifying its data type.X=10

b. Static Typing : variable declared specifying its data type.int XX=10

2) Taking input from userThe program requires user interface on which basis program will generate output.In python we have two ways to take input.raw_input() : It can read a single line of text as a string. If we want a numeric value we need to cast it.input() : It can read a single number. It need not to be casted.

3) Printing output: to generate output we use print() statement.print(“Total=”+t)

4) Conditional statement: i. Simple if

If exp:ii. if else

if exp:--------

else--------


iii. elifif exp:

----elsif exp:

-----elif exp:

----else

---5) Looping statements.

Python For Loops

A for loop is used for iterating over a sequence (that is either a list, a tuple, a dictionary, a set, or a string). This is less like the for keyword in other programming languages, and works more like an iterator method as found in other object-orientated programming languages. With the for loop we can execute a set of statements, once for each item in a list, tuple, set etc.

ExamplePrint each fruit in a fruit list:

fruits = ["apple", "banana", "cherry"]for x in fruits: print(x)

The while Loop

With the while loop we can execute a set of statements as long as a condition is true.

Example

Print i as long as i is less than 6:

i = 1while i < 6: print(i) i += 1


16. Write a python program that accepts different datatypes values and print them.

Practical Work:

Write Code and out put


17. Write a program using all arithmetic operators.

Practical Work:



18. Write a program to calculate Simple interest.

Practical Work:



19. Write a program to calculate grade using elif.

Practical Work:



20. Write a program to print different series

Practical Work:



21. Project Work - Create a website having at least 5 webpage incorporating most of the concepts of the class X syllabus.

Project Work:

Attach Screen shot

Codes in a CD


Nested HTML Elementsdavkusmunda.org/File/67a4edda-e4b1-4dcf-b0dd... · Web viewMerits and Demerits...

Documents

Transcript of Nested HTML Elementsdavkusmunda.org/File/67a4edda-e4b1-4dcf-b0dd... · Web viewMerits and Demerits...