Professional Documents
Culture Documents
School of Engineering
LAB MANUAL
For additional information concerning these six principles, please read below and check
out some of the Web sites listed at the end of this page.
The header is used to bring continuity to the various pages of the Web site, as well as
indicate the main topic of the particular Web page. Therefore, the header usually contains
a banner graphic which ties the various Web pages of the site together, the title of the
document, and navigational aids which link to other pages within the Web site.
The body contains the main textual content of the document, as well as hypertext links to
other related Web sites.
The footer is used to verify the origin and authorship of the Web page. Therefore, the
footer should contain the author or contact person of the site, as well as the institution
with which the author is affiliated (if any), navigational links to other pages within the
Web site, the date of last revision, and a statement of copyright. Other useful information
might also include the author's e-mail and mailing addresses, as well as the URL of the
document.
Black is traditionally used on Web pages for the main body of text because of its
legibility on a light background. Some colors are traditionally used to convey a particular
meaning. Red, for example, is often used to signify danger or warning, and thus should
be used sparingly to convey such meaning. Blue is traditionally used to indicate hypertext
links to other Web pages, and a shade of purple to indicate links which have already been
accessed by the current user. Altering these traditional color schemes will most likely
confuse the new viewer to the Web site.
You can recognize HTML tags because they are all enclosed in angle brackets, like these:
< >. Usually, tags come in pairs to indicate the beginning and ending of a specific
command. The begin tag looks like this: < > and the end tag looks like this: . So, to start a
paragraph, the HTML tag <p> is placed at the point in the text where a new paragraph
should begin. To end a paragraph, the HTML tag </p> is placed at the end of the text that
belongs in the paragraph.
So, an HTML document (or web page) is the combination of plain text and HTML tags
and, as such, HTML is a “universal” language for the internet. Who makes sure that
everyone uses the same tags to accomplish the same instructions?.As of 1996, all the
versions of HTML are maintained by the World Wide Web Consortium (W3C). The most
important HTML tags and their attributes are listed and defined below:
...
Href An attribute of the Anchor tag defining the destination of the hyperlink
whether it's to other text on the same page or to a completely different
web page.
body Body tag indicates everything that will appear on the page. All web
page attributes (text, links and graphics) are placed inside the start/end
body tag pairing.
<body></body>
Link Alink An attribute of the Body tag indicating the color of active links and the
Vlink color of active links after they've been visited.
Comments Tag used to insert comments on the web page that are not visible in the
web browser.
<!--Comment-->
Pointsize Attribute of the Font tag used to give explicit point size to the font and
recognized only by Netscape.
Form Tag used to create forms on a web page into which users can enter
data.
<form></form>
Frame Tag used to define individual frames that belong in a frameset so more
than one HTML document can be displayed on a single web page.
<frame />
Src An attribute of the Frame tag meaning “source” (the URL) of the
picture or HTML document to be displayed in a frame.
scrolling An attribute of the Frame tag used to specify whether scroll bars
should appear in a frame.
noresize An attribute of the Frame tag that preserves layout by preventing users
from resizing a frame.
marginwidth An attribute of the Frame tag that conveys how wide a page should be
by indicating the left and right margins.
marginheight An attribute of the Frame tag defining page height by indicating top
and bottom margins.
Cols Attribute of the Frameset tag used to specify column distance between
frames in pixels or percentage or proportions.
Rows Attribute of the Frameset tag used to specify row distance between
frames in pixels or percentage or proportions.
Frameborder Attribute of the Frameset tag used to specify if a border should appear
around a frame.
Framespacing Attribute of the Frameset tag defining the space between frames in
pixels.
Border Attribute of the Frameset tag defining the width of all frames.
bordercolor Attribute of the Frameset tag defining the border color of all frames.
H1-H6 Tag defining the heading style, where h1 is the largest header and h6 is
the smallest.
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
Head Header tag used at the beginning of a web page to contain information
about the page, such as its title.
<head></head>
size Attribute of the HR tag defining the thickness of the horizontal line in
pixels.
Width Attribute of the HR tag specifying the width of the horizontal line in
pixels or proportions.
Align Attribute of the HR tag defines the alignment of the line as left, right,
or center.
Color Attribute of the HR tag defining the color of the horizontal line.
HTML Tag used at the very beginning and very end of a document to define it
as an HTML document.
<html></html>
Src Attribute of the IMG tag specifying the URL of the image.
Justifications Tag defines how text should be aligned on the web page.
<left></left>
<center></center>
<right></right>
Ol Tag used to define an ordered list, which means items in the list will
be numbered.
<ol></ol>
P Tag to form a paragraph within web page text, leaving a line gap at the
top and bottom.
<p></p>
Border Attribute of the Table tag defining the table's border in pixels.
cellpadding Attribute of the Table tag defining the space between table text.
cellspacing Attribute of the Table tag defining spacing between table cells.
Align Attribute of the Table tag defining alignment of data in the cells.
bordercolorlight Attribute of the Table tag used to define the lighter color of a border
having a 3D effect.
bordercolordark Attribute of the Table tag used to define the darker color of a border
having a 3D effect.
Title Tag defining the title of the HTML document (web page).
<title></title>
ul Tag used to define an unordered list, which means items in the lift will
appear as bullet points.
<ul></ul>
Since my first attempt in 1996, I have compiled many top-10 lists of the biggest
mistakes in Web design. See links to all these lists at the bottom of this article.
This article presents the highlights: the very worst mistakes of Web design. 7.)
4. Non-Scannable Text
A wall of text is deadly for an interactive experience. Intimidating. Boring. Painful to
read.
To draw users into the text and support scannability, use well-documented tricks:
subheads
bulleted lists
highlighted keywords
short paragraphs
the inverted pyramid
a simple writing style, and
de-fluffed language devoid of marketese.
The more users' expectations prove right, the more they will feel in control of the system
and the more they will like it. And the more the system breaks users' expectations, the
more they will feel insecure. Oops, maybe if I let go of this apple, it will turn into a
tomato and jump a mile into the sky.
Jakob's Law of the Web User Experience states that "users spend most of their time
onother websites."
This means that they form their expectations for your site based on what's commonly
done on most other sites. If you deviate, your site will be harder to use and users will
leave.
Designers open new browser windows on the theory that it keeps users on their site. But
even disregarding the user-hostile message implied in taking over the user's machine,
the strategy is self-defeating since it disables the Back button which is the normal way
users return to previous sites. Users often don't notice that a new window has opened,
especially if they are using a small monitor where the windows are maximized to fill up
the screen. So a user who tries to return to the origin will be confused by a grayed
out Back button.
Links that don't behave as expected undermine users' understanding of their own system.
A link should be a simple hypertext reference that replaces the current page with new
content. Users hate unwarranted pop-up windows. When they want the destination to
appear in a new page, they can use their browser's "open in new window" command --
standard behavior.
Sometimes the answer is simply not there and you lose the sale because users
have to assume that your product or service doesn't meet their needs if you
don't tell them the specifics. Other times the specifics are buried under a thick
layer of marketese and bland slogans. Since users don't have time to read
everything, such hidden info might almost as well not be there.
The worst example of not answering users' questions is to avoid listing the
price of products and services. No B2C ecommerce site would make this
mistake, but it's rife in B2B, where most "enterprise solutions" are presented so
that you can't tell whether they are suited for 100 people or 100,000 people.
Even B2C sites often make the associated mistake of forgetting prices in
product lists, such ascategory pages or search results. Knowing the price is key
in both situations; it lets users differentiate among products and click through to
the most relevant ones.
CSS
Introduction
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files
CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:
DHTML
DHTML is NOT a Language
DHTML stands for Dynamic HTML.
DHTML is NOT a language or a web standard.
To most people DHTML means the combination of HTML, JavaScript, DOM and CSS.
According to the World Wide Web Consortium (W3C):
"Dynamic HTML is a term used by some vendors to describe the combination of HTML,
style sheets and scripts that allows documents to be animated."
CGI-PERL
The acronym stands for Common Gateway Interface, a rather misleading term to describe
a common format for sending data from a HTML form to a server. A CGI script takes
form data, manipulates it as required, then returns a HTML document 'on the fly' to the
browser.
CGI scripts are usually written in programming languages which are good at
manipulating text ('string handling', in programming jargon), such as Perl, Python, or C.
CGI scripts can be written in any programming language, as long as the program returns
a HTML document, although it's a brave programmer who'd write a CGI script in a
number-crunching language such as FORTRAN!
• By the way, if you use a "platform independent" language like Perl or Java to
write your CGI script, the exact same CGI script can be moved directly from one
platform to another without it breaking!
• Gateway - CGI's usefulness does not stem from what it can accomplish by itself,
but what it can accomplish by making partnerships with other resources. I often
see CGI as a middleman or a translator whose job it is to help more powerful
resources like databases, graphics generation programs, or network applications
talk to each other and work towards a common solution.
• CGI is the gateway between the lone web surfer with her trusty web browser and
the vast web of computers (each with their own specific language and protocols)
and computer programs (each with their own interfaces and methods of output).
CGI Scripts
The CGI script will be responsible for processing the form data and responding to the
client in the form of dynamically generated HTML.
Perl
• Another cool Perl trick is the use of the "." operator that "appends" a value to an
already existing scalar variable. Thus, the following code would print out "Selena
Sol":
• $name = "Selena" . " Sol"; print "$name"; An alternative shorthand for appending
to scalar variables is using the ".=" operator. For example, the following code
does the same thing as the code above.
“$name\n”;
• Fortunately, Perl provides an easy way to determine how many elements are
contained in an array. When used as a scalar, the list array name will be equal to
the number of elements it contains. Thus, if the list array @available_colors
contains the elements: red, green, blue and brown, then the following line would
set $number_of_colors equal to four.
• $number_of_colors = @available_colors;
• Likewise, you can add to or modify the values of an existing array by simply
referencing the array by number. For example, to add an element to
@available_colors, you might use the following line:
• $available_colors[4] = "orange"; Thus, @available_colors would include the
elements: red, green, blue, brown, and orange.
• You can also use this method to overwrite an element in a list array. To change a
value in @available_colors, you might use the syntax:
• $available_colors[0] = "yellow"; Now, the elements of @available_colors would
be: yellow, green, blue, brown, orange.
PHP
Introduction
PHP (recursive acronym for "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. PHP is a server side scripting language. Full
information about PHP is available on the WWW at http://www.php.net/. The PHP
language is strongly based on C (not C++) in the Unix environment. It has an significant
influence from perl and the Unix scripting language awk.
Example:
<html>
<head>
<title>Example</title>
</head>
<body>
MYSQL
Introduction to Database
A database is a separate application that stores a collection of data. Each database has one
or more distinct APIs for creating, accessing, managing, searching, and replicating the
data it holds.
Other kinds of data stores can be used, such as files on the file system or large hash tables
in memory but data fetching and writing would not be so fast and easy with those type of
systems.
So now a days we use relational database management systems (RDBMS) to store and
manager huge volume of data. This is called relational database because all the data is
stored into different tables and relations are established using primary keys or other keys
known as foreign keys.
RDBMS Terminology:
Before we proceed to explain MySQL database system, lets revise few definitions related
to database.
MySQL Database:
MySQL is a fast, easy-to-use RDBMS used being used for many small and big
businesses. MySQL is developed, marketed, and supported by MySQL AB, which is a
Swedish company. MySQL is becoming so popular because of many good reasons.
Editors
We have attempted to teach you some of the basic HTML tags in this tutorial. Many
people don't feel that it is important to learn HTML code anymore, since there are many
editors and document converters out there that don't require any knowledge of HTML.
Our experience has been that even with these tools there are often times when you still
need to edit the code to make things look right. There are four basic types of editors:
1. Make a very simple web page using a series of document.write() methods to display
image and simple text using JavaScript.
2. Create a web page prompt the user to enter his name and branch and display the
welcome message with the information entered by the user.
3. Write a script to take three numbers from the user and display the greatest number
out of three.
4. Write a script that contains a function that you can pass a letter grade as a parameter
and have it display a passed or failed condition. Demonstrate the functions by printing
out the pass/fail status for five students. This letter grade should be based on the
following:
1. Create a web page with a text box and a button. On click of a button a message box is
displayed with the text entered by the user in the textbox
2. Create a web page with some text in using some color. Change the color of the text on
click of a button or on mouse over.
3. Create a web page with changing text after a time interval.
4. Create a web page with a sliding menu on it.
5. Create a web page with a image and a button. On click of a button the image shuld
move horizontally.
6. Create a web page with a image on mouse over the size of the image should be
changed.
7. Create a dynamic page with moving window.
Books: