model questions

Long question 2*10

1)What is computer graphics ? Explain the different image types used in graphics

2)Write about the attributes used in Table Tag.

3) What is HTML ? Write about the types of hyperlink

Short Question 10*6

1) What is the difference between raster and vector graphic ?

2) Write about the HTML head tag with example

3)Write the basic structure of html.

4) Writr short notes about form and frame

5) What is CSS ? Write with example of password field

6) What is layer ? Desrcibe the timeline.

7) What is PHP ? Write with characteristics.

What is HTML?

· HTML stands for Hyper Text Markup Language

· HTML is the standard markup language for creating Web pages

· 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 label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

- HTML is the foundation of a website it contains the information that tells the browser what is on the page in terms of text, links, where to find images.

- HTML marks up the content of a site. Basically it tells the user's computer what things are. It also provides access to an incredible amount of functionality that's already built directly into the browser.

HTML History

Since the early days of the World Wide Web, there have been many versions of HTML:

Year

Version

1989

Tim Berners-Lee invented www

1991

Tim Berners-Lee invented HTML

1993

Dave Raggett drafted HTML+

1995

HTML Working Group defined HTML 2.0

1997

W3C Recommendation: HTML 3.2

1999

W3C Recommendation: HTML 4.01

2000

W3C Recommendation: XHTML 1.0

2008

WHATWG HTML5 First Public Draft

2012

WHATWG HTML5 Living Standard

2014

W3C Recommendation: HTML5

2016

W3C Candidate Recommendation: HTML 5.1

2017

W3C Recommendation: HTML5.1 2nd Edition

2017

W3C Recommendation: HTML5.2

Types of Tags in HTML

1. Paired tags

2. Un-paired

1. Paired

HTML tags gerenally come in pair an opening tag and a closing tag. Example <p> (opening tag) and </p> (closing tag).

For example:

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

A) HTML Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<html>

<body>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

</body>

</html>

B) HTML Paragraphs

The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.

<html>

<body>

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

</body>

</html>

C ) HTML <center> Tag

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>Welcome to My page</h2>

<center> Hi Friends </center>

</body>

</html>

2. Unpaired Tags

An HTML tag is called an unpaired tag when the tag only has an opening tag and does not have a closing tag or a companion tag. The Unpaired HTML tag does not require a closing tag; an opening tag is sufficient in this type.

Unpaired tags are sometimes also named as Standalone Tags or Singular Tags since they do not require a companion tag

<html>

<head>

</head>

<body>

<h2>HTML Image</h2>

</body>

</html>

Some examples of unpaired/singular tags are :

1.<hr> - Used to create horizontal line.1

2. <img> -- Used to insert the image.

3. <br> - Used to break the line.

Text Box: All the HTML tags (introduced here!)
In order of appearance.
All the paired tags must have a closing tag with a slash at the end of whatever it is. All the tags can be written in upper or lower case.
The escape sequences are not tags and the case makes a difference.

<html>	begins html file	paired
<head>	first section of html file	paired
<body>	second, main section of html file	paired
<title>	within HEAD - title goes in top bar	paired
<p>	paragraph	paired
<br>	line break	single
<hr>	horizontal rule	single
<h1> <h2>	headings	paired
<a href=" ">	link	paired
<img src=" ">	image	single
<pre>	preformatted - displayed like the source	paired
<blockquote>	separate, indented text	paired
<!-- -->	comments	single
<i>	italic physical style	paired
<b>	bold physical style	paired
<tt>	teletype physical style	paired

<em>	emphasis logical style	paired
<strong>	strong logical style	paired
<tt>	code logical style	paired
<cite>	citation logical style	paired
<ol>	ordered list	paired
<ul>	unordered list	paired
<li>	list item	can be paired
<dl>	definition list	paired
<dt>	term name (left aligned)	can be paired
<dd>	term definition (indented)	can be paired
<a name=" ">	anchor	paired
&...;	escape sequences	single
<table>	table	paired
<tr>	table row	paired
<td>	table cell	paired

IMG TAG

The <img> tag is used to embed an image in an HTML page.

Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.

The <img> tag has two required attributes:

· src - Specifies the path to the image

· alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed

HTML Lists

HTML lists allow web developers to group a set of related items in lists.

An unordered HTML list:

· Item

An ordered HTML list:

1. NEPAL

2. PAKISTAN

3. CHINA

4. USA

Tag

Description

<ul>

Defines an unordered list

<ol>

Defines an ordered list

<li>

Defines a list item

<dl>

Defines a description list

<dt>

Defines a term in a description list

<dd>

Describes the term in a description list

A) 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:

<body>

<h2>An unordered HTML list</h2>

<ul>

<li>Coffee</li>

</ul>

</body>

OUTPUT

An unordered HTML list

· Coffee

· Tea

· Milk

B) 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:

<li>Coffee</li>

</ol>

output

a.Coffee b.Tea c.Milk

HTML FORM

<form>

<label >phone</label><br>

<label for="javascript">JavaScript</label>

</form>

Type

Description

Displays a single-line text input field

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

Displays a checkbox (for selecting zero or more of many choices)

Displays a submit button (for submitting the form)

Displays a clickable button

Elements of form:-

· 1) <input>

The <input> Element

One of the most used form element is the <input> element.

The <input> element can be displayed in several ways, depending on the type attribute.

· 2) <label>

The <label> Element

The <label> element defines a label for several form elements.

The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focus on the input element.

· 3) <select>

The <select> Element

The <select> element defines a drop-down list:

· 4) <textarea>

The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):

Example

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

· 5) <button>

The <button> Element

The <button> element defines a clickable button:

Example

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

· 6) <fieldset>

· 7) <legend>

· 8) <datalist>

HTML Tables

HTML tables allow web developers to arrange data into rows and columns

<table border="1">

<tr>

<th>Company</th>

<th>Contact</th>

<th>Country</th>

</tr>

<tr>

<td>Alfreds Futterkiste</td>

<td>Maria Anders</td>

<td>Germany</td>

</tr>

<tr>

<td>Centro comercial Moctezuma</td>

<td>Francisco Chang</td>

<td>Mexico</td>

</tr>

</table>

HTML Table Attributes

Table attributes in HTML are used to customize table such as changing it's background color, alignment, width, border, etc.

let's have a look at list of table attributes and tags

IFRAME

HTML Frames are used to divide the web browser window into multiple sections where each section can be loaded separately. A frameset tag is the collection of frames in the browser window.

HTML Links – Hyperlinks

Links are found in nearly all web pages. Links allow users to click their way from page to page.

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.

1. Text hyperlink:

2. Image hyperlink

3 . Email hyperlink

<a href = "mailto: abc@example.com">Send Email</a>

PHP NOTES👈👈👈👈

What is PHP?

PHP (Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML.

Basic PHP Syntax

A PHP script can be placed anywhere in the document.

A PHP script starts with <?php and ends with ?>

<?php // PHP code goes here ?>

The default file extension for PHP files is ".php".

Example

<?php
echo "Hello World!";
?>

PHP VariablesA variable can have a short name (like x and y) or a more descriptive name (age, carname, total_volume).
Rules for PHP variables:
A variable starts with the $ sign, followed by the name of the variable
A variable name must start with a letter or the underscore character
A variable name cannot start with a number
A variable name can only contain alpha-numeric characters and underscores (A-z, 0-9, and _ )
Variable names are case-sensitive ($age and $AGE are two different variables)
Remember that PHP variable names are case-sensitive!

Creating (Declaring) PHP VariablesIn PHP, a variable starts with the $ sign, followed by the name of the variable:
Example 1<?php
$txt = "Hello world!";
$x = 5;
$y = 10.5;
?>

Example 2

<?php
$txt = "Nepal";
echo "I love $txt";
?>

Output = I love Nepal

Example 3

<?php
$x = 5;
$y = 4;
echo $x + $y;
?>

Output= 9

PHP echo and print Statementsecho and print are more or less the same. They are both used to output data to the screen.
The differences are small: echo has no return value while print has a return value of 1 so it can be used in expressions. echo can take multiple parameters (although such usage is rare) while print can take one argument. echo is marginally faster than print.


PHP Data TypesVariables can store data of different types, and different data types can do different things.
PHP supports the following data types:
String
Integer
Float (floating point numbers - also called double)

PHP StringA string is a sequence of characters, like "Hello world!".
A string can be any text inside quotes. You can use single or double quotes:
Example<?php
$x = "Hello world!";
$y = 'Hello world!';

echo $x;
echo "<br>";
echo $y;
?>

PHP Integer

An integer data type is a non-decimal number between -2,147,483,648 and 2,147,483,647.

Rules for integers:

An integer must have at least one digit
An integer must not have a decimal point
An integer can be either positive or negative
Integers can be specified in: decimal (base 10), hexadecimal (base 16), octal (base 8), or binary (base 2) notation

In the following example $x is an integer. The PHP var_dump() function returns the data type and value:

Example

<?php
$x = 5985;

echo $x;

?>

PHP Float

A float (floating point number) is a number with a decimal point or a number in exponential form.

In the following example $x is a float. The PHP var_dump() function returns the data type and value:

Example

<?php
$x = 10.365;
echo $x;
?>

XAMPP SERVER

XAMPP is a free and open-source cross-platform web server solution , consisting mainly of the Apache HTTP Server, MariaDB database, and interpreters for scripts written in the PHP and Perl programming languages.

-We need to open the Xampp server to run the php programs.

- We have to "START" Apache server and My sql server to run the php programs.

The given location is the place where we can save php files

C:\xampp\htdocs

PHP Loops

Often when you write code, you want the same block of code to run over and over again a certain number of times. So, instead of adding several almost equal code-lines in a script, we can use loops.

Loops are used to execute the same block of code again and again, as long as a certain condition is true.

In PHP, we have the following loop types:

while - loops through a block of code as long as the specified condition is true
do...while - loops through a block of code once, and then repeats the loop as long as the specified condition is true
for - loops through a block of code a specified number of times
foreach - loops through a block of code for each element in an array

The PHP while Loop

The while loop executes a block of code as long as the specified condition is true.

Syntax

while (condition is true) {
  code to be executed;
}

The example below displays the numbers from 1 to 5:

Example

<?php
$x = 1;

while($x <= 5) {
  echo "The number is: $x <br>";
  $x++;
}
?>

The PHP do...while Loop

The do...while loop will always execute the block of code once, it will then check the condition, and repeat the loop while the specified condition is true.

Syntax

do {
  code to be executed;
} while (condition is true);

Example

<?php
$x = 1;

do {
  echo "The number is: $x <br>";
  $x++;
} while ($x <= 5);
?>

The PHP for Loop

The for loop is used when you know in advance how many times the script should run.

Syntax

for (init counter; test counter; increment counter) {
  code to be executed for each iteration;
}

Example

<?php
for ($x = 0; $x <= 10; $x++) {
  echo "The number is: $x <br>";
}
?>

PHP Conditional Statements

Very often when you write code, you want to perform different actions for different conditions. You can use conditional statements in your code to do this.

In PHP we have the following conditional statements:

if statement - executes some code if one condition is true
if...else statement - executes some code if a condition is true and another code if that condition is false
if...elseif...else statement - executes different codes for more than two conditions
switch statement - selects one of many blocks of code to be executed

PHP - The if Statement

The if statement executes some code if one condition is true.

Syntax

if (condition) {
  code to be executed if condition is true;
}

Example
<?php
$t = 15;

if ($t < "20") {
  echo "Have a good day!";
}
?>

PHP - The if...else Statement

The if...else statement executes some code if a condition is true and another code if that condition is false.

Syntax

if (condition) {
  code to be executed if condition is true;
} else {
  code to be executed if condition is false;
}

Example
<?php
$t = 15;

if ($t < "20") {
  echo "Have a good day!";
} else {
  echo "Have a good night!";
}
?>




PHP - The if...elseif...else StatementThe if...elseif...else statement executes different codes for more than two conditions.
Syntaxif (condition) {
  code to be executed if this condition is true;
} elseif (condition) {
  code to be executed if first condition is false and this condition is true;
} else {
  code to be executed if all conditions are false;
}







ExampleOutput "Have a good morning!" if the current time is less than 10, and "Have a good day!" if the current time is less than 20. Otherwise it will output "Have a good night!":
<?php
$t = 15;

if ($t < "10") {
  echo "Have a good morning!";
} elseif ($t < "20") {
  echo "Have a good day!";
} else {
  echo "Have a good night!";
}
?>



The PHP switch StatementUse the switch statement to select one of many blocks of code to be executed.
Syntaxswitch (n) {
  case label1:
    code to be executed if n=label1;
    break;
  case label2:
    code to be executed if n=label2;
    break;
  case label3:
    code to be executed if n=label3;
    break;
    ...
  default:
    code to be executed if n is different from all labels;
}









Example<?php
$favcolor = "red";

switch ($favcolor) {
  case "red":
    echo "Your favorite color is red!";
    break;
  case "blue":
    echo "Your favorite color is blue!";
    break;
  case "green":
    echo "Your favorite color is green!";
    break;
  default:
    echo "Your favorite color is neither red, blue, nor green!";
}
?>

COMPUTER GRAPHICS

1. What is computer graphics? What are the types of images in computer graphics ?

Ans. Computer graphics is a core technology in digital photography, film, video game, cell phone and computer displays, many specialization. A good deal of specialized hardware and software has been developed, with the displays of most devices being driven by computer graphics hardware. It is vast and recently developed area of computer science. For example: Photographics, Image designs, etc. There are two types of computer graphics:-

1.Vector graphics. For example:-PSD, SVG,PDF etc

a)PSD(Photoshop Document):- PSD is an image editing friendly format that supports multiple image layers and various imaging option and used for containing high quality graphics data.

b)Scalable Vector Graphics (SVG):- is a web-friendly vector file format. As opposed to pixel-based raster files like JPEGs, vector files store images via mathematical formulas based on points and lines on a grid.

c)PDF(Portable Document Format):-PDF is an abbreviation that stands for Portable Document Format. It's a versatile file format created by Adobe that gives people an easy, reliable way to present and exchange documents - regardless of the software, hardware, or operating systems being used by anyone who views the document.

2. Raster graphics. For example:-PNG, GIF, JPEG, etc

a)Jpg(Joint photographic Experts Group):- JPEG is an group develops and maintains standard for a suite of compression algorithms for computer image files. A JPG should be used in any situation when it's important to have a small file.

b) PNG(Portable Network Graphic):- PNG is particularly popular file type with web designers because it can handle graphics with transparent backgrounds. The PNG file format is widely used on websites to display high-quality digital images.

c) GIF(Graphics Interchange Format):- It is a mean of reducing the size of image and short animations.

2.Differences between raster and vector graphics

Ans:-

Raster	Vector
· Pixel-based	· Mathematical curves and lines
· Best for photographs	· Best for logos, type, and geometric designs
· More accessible and shareable	· Less accessible and shareable
· Large file size	· Smaller file sizes

3.Application of computer graphics.

· Presentation Graphics: ...

· Entertainment: ...

· Education: ...

· Training: ...

· Visualisation: ...

· Image Processing

4.Write some of selection tools in Adobe Photoshop with uses

· Rectangular Marquee: You can select rectangular portions of an image with this tool.

· Lasso: This selection tool allows you to draw your own freeform outline of what you wish to select. This works best for those areas that don't qualify as shapes.

· Quick Selection: This tool is used like the lasso tool except it works best on an area with clearly defined edges. You drag the mouse and the outline "snaps" to the edges.

· Crop: This tool allows you to select a portion of the image and get rid of everything not included in the selection. It is useful for getting rid of backdrops you don't want, such as photobombers.

· Eyedropper: This tool samples a color in the image you are working on and matches it to one in Photoshop. It is useful if you want to retouch part of an image but can't tell which color to use

5. What is the advantage of using layer in Adobe Photoshop?

a. You can take anything back anytime

b. You can try different edits to a photo and decide on the best ones by turning off layers

c. You can play with transparency and layer blending

d. You can edit your added text, shapes, or pictures later at any time

e. A new road to multi-exposures

25 December 2022

Computer graphics and web design notes

What is HTML?

1. Paired tags

2. Un-paired

1. Paired

Heading 1

Heading 2

Heading 5

Some examples of unpaired/singular tags are :

An unordered HTML list:

An ordered HTML list:

A) Unordered HTML List

OUTPUT

B) Ordered HTML List

output

HTML FORM

The <label> Element

The <select> Element

The <textarea> Element

Example

The <button> Element

Example

HTML Table Attributes

1. Text hyperlink:

2. Image hyperlink

What is PHP?

Basic PHP Syntax

Example

PHP Variables

Creating (Declaring) PHP Variables

Example 1

Example 2

Example 3

PHP echo and print Statements

PHP Data Types

PHP String

Example

PHP Integer

Example

PHP Float

Example

PHP Loops

The PHP while Loop

Syntax

Example

The PHP do...while Loop

Syntax

Example

The PHP for Loop

Syntax

Example

PHP Conditional Statements

PHP - The if Statement

Syntax

Example

PHP - The if...else Statement

Syntax

Example

PHP - The if...elseif...else Statement

Syntax

Example

The PHP switch Statement

Syntax

Example

FEATURED POST

DBMS NOTES

Most viewed