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.
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 |
|
2014 |
|
2016 |
W3C Candidate Recommendation: HTML 5.1 |
2017 |
|
2017 |
|
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>
Heading 1
Heading 2
Heading 5
<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>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center> Hi Friends </center>
</body>
</html>
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>
<body>
<h2>HTML Image</h2>
<img src="abc.jpg" alt="abc image" width="460" height="345">
</body>
</html>
Some examples of unpaired/singular tags are :
1.<hr> - Used to create horizontal line.
2.
<img> -- Used to insert
the image.
3.
<br> - Used to break the line.
4.
<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
<img src="mypic.jpg" alt="photo" width="42" height="42">
HTML lists
allow web developers to group a set of related
items in lists.
An unordered HTML list:
·
Item
·
Item
·
Item
·
Item
An ordered HTML list:
1.
NEPAL
2. PAKISTAN
3.
CHINA
4. USA
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>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
OUTPUT
·
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:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
output
a.Coffee b.Tea c.Milk
HTML FORM
<form>
<label >Name</label><br>
<input type="text">
<label >phone</label><br>
<input type="number">
<input type="radio" value="HTML">
<label for="html">HTML</label><br>
<input type="radio">
<label>CSS</label><br>
<input type="radio">
<label for="javascript">JavaScript</label>
</form>
Type |
Description |
<input
type="text"> |
Displays
a single-line text input field |
<input
type="radio"> |
Displays
a radio button
(for selecting one of many
choices) |
<input
type="checkbox"> |
Displays
a checkbox (for
selecting zero or more of
many choices) |
<input type="submit"> |
Displays
a submit button
(for submitting the form) |
<input type="button"> |
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.
<iframe src="www.bbc.com"></iframe>
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.
<a href="url"> text </a>
1.
Text hyperlink:
<a href="www.bbc.com"> BBC
NEWS</a>
2.
Image hyperlink
<a href="www.bbc.com"> <img src="pic.jpg> </a>
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 Variables
A 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 Variables
In 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 Statements
echo
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 Types
Variables 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 String
A 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 SERVERXAMPP 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 truedo...while
- loops through a block of code once, and then repeats the loop as long as the specified condition is truefor
- loops through a block of code a specified number of timesforeach
- 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 trueif...else
statement - executes some code if a condition is true and another code if that condition is falseif...elseif...else
statement - executes different codes for more than two conditionsswitch
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 Statement
The if...elseif...else
statement executes different codes for more than two conditions.
Syntax
if (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;
}
Example
Output "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 Statement
Use the switch
statement to select one of many blocks of code to be executed.
Syntax
switch (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
i dont understand table tag please describe me about that....
ReplyDeletethis comment by sachina khatri.jpeg is a standard file format for compressing pictures so they can be stored or sent by email more easily. J
ReplyDelete