lab manual...st. vincent pallotti college of engg. & technology , nagpur lab manual academic...

St. Vincent Pallotti College Of Engg. & Technology,

Nagpur

Lab Manual

Academic Year: 2020-2021

Semester: B.E. III Semester

Course Name: Computer Lab-I

Course Code:BECME307P

____________________________________________________

Department Of Computer Engineering

Practical No 1

AIM: Introduction to Web Design and HTML

What is an html File? HTML is a format that tells a computer how to display a web page. The documents themselves are plain text files with special "tags" or codes th at a web browser uses to interpret and display information on your computer screen.

• HTML stands for Hyper Text Markup Language. • An HTML file is a text file containing small markup tags. • The markup tags tell the Web browser how to display the page. • An HTML file must have an htm or html file extension.

Example

Open your text editor and type the following text: <html> <head> <title>My First Webpage</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html> Steps to be followed to save and execute HTML page: 1) Save the file as mypage.html. 2) Start your Internet browser. Select Open (or Open Page) in the File menu of your browser. A dialog box will appear. 3) Select Browse (or Choose File) and locate the html file you just created - mypage.html - select it and click Open. 4) Now you should see an address in the dialog box, for example C:\MyDocuments\mypage.html. 5) Click OK, and the browser will display the page. Example Explained: What you just made is a skeleton html document. This is the minimum required information for a web

document and all web documents should contain thes e basic components. The first tag in your html document is: <html>: <html>This tag tells your browser that this is the start of an html document. The last tag in your document is </html>This tag tells your browser that this is the end of the html document. The text between the <head>tag and the </head> tag is header information. Header information is not displayed in the browser window. <title>: The text between the <title> tags is the title of your document. The <title> tag is used to uniquely identify each document and is also displayed in the title bar of the browser window. <body>: The text between the <body> tags is the text that will be displayed in your browser. <b>: The text between the <b> and </b> tags will be displayed in a bold font. HTM or HTML Extension? When you save an HTML file, you can use either the .htm or the .html extension. The .htm extension comes from the past when some of the commonly used software only allowed three letter extensions. It is perfectly safe to use either.html or .htm, but be consistent. mypage.htm and mypage.html are treated as different files by the browser. How to View HTML Source A good way to learn HTML is to look at how other people have coded their ht ml pages. To find out, simply click on the View option in your browsers toolbar and select Source or Page Source. This will open a window that shows you the actual HTML of the page. Go ahea d and view the source html for this page. Logical vs. Physical Tags In HTML there are both logical tags and physical tags. Logical tags are designed to describe (to the browser) the enclosed text's meaning.An example of a logical tag is the <strong> </strong>tag. By placing text in between these tags you are telling the browser that the text has some greater importance. By default all browsers make the text appear bold when in between the <strong> and </strong> tags.

Practical 2

HTML Tags:-Develop and demonstrate a HTML document that illustrates a) the use of Formatting Text. b) Headings tags(H1,H2,H3,H4,H5,H6) c) Font Details (Font Size,Style, Type, Color) d) Setting Color(BG Color)

Heading Tags Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before and one line after that heading. <!DOCTYPE html> <html> <head> <title>Heading Example</title> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html>

Output:

Paragraph Tag The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening <p> and a closing </p> tag as shown below in the example:

Example

<!DOCTYPE html> <html> <head> <title>Paragraph Example</title> </head> <body> <p>Here is a first paragraph of text.</p>

<p>Here is a second paragraph of text.</p> <p>Here is a third paragraph of text.</p> </body> </html>

This will produce following result:

Here is a first paragraph of text.

Here is a second paragraph of text.

Here is a third paragraph of text.

Line Break Tag Whenever you use the <br /> element, anything following it starts from the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them.

The <br /> tag has a space between the characters br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break, while if you miss the forward slash character and just use <br> it is not valid in XHTML

Example

<!DOCTYPE html> <html> <head> <title>Line Break Example</title> </head> <body> <p>Hello<br /> You delivered your assignment ontime.<br /> Thanks<br /> Mahnaz</p> </body> </html>


Hello You delivered your assignment ontime. Thanks Mahnaz

Centering Content You can use <center> tag to put any content in the center of the page or any table cell.

Example

<!DOCTYPE html> <html> <head> <title>Centring Content Example</title> </head> <body> <p>This text is not in the center.</p> <center> <p>This text is in the center.</p> </center> </body> </html>


This text is not in the center.

This text is in the center.

Horizontal Lines Horizontal lines are used to visually break up sections of a document. The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly.

For example you may want to give a line between two paragraphs as in the given example below:

Example

<!DOCTYPE html> <html> <head> <title>Horizontal Line Example</title> </head> <body> <p>This is paragraph one and should be on top</p> <hr /> <p>This is paragraph two and should be at bottom</p> </body> </html>


This is paragraph one and should be on top

This is paragraph two and should be at bottom

Again <hr /> tag is an example of the empty element, where you do not need opening and closing tags, as there is nothing to go in between them.

The <hr /> element has a space between the characters hr and the forward slash. If you omit this space, older browsers will have trouble rendering the horizontak line, while if you miss the forward slash character and just use <hr> it is not valid in XHTML

Preserve Formatting Sometimes you want your text to follow the exact format of how it is written in the HTML document. In those cases, you can use the preformatted tag <pre>.

Any text between the opening <pre> tag and the closing </pre> tag will preserve the formatting of the source document.

Example

<!DOCTYPE html> <html> <head> <title>Preserve Formatting Example</title> </head> <body> <pre> function testFunction( strText ){ alert (strText) } </pre> </body> </html>


function testFunction( strText ){ alert (strText)

Practical No 3

AIM: Table & Lists:-Develop and demonstrate a HTML document that illustrates a) Unordered List(UL) b) Ordered List(OL) and Definition list (DL) c) Table Alignment (Cell Spacing, Cell Padding ,Height ,Width, Border, Rowspan , colspan) d) Setting Different Table Attributes(Color, Image)

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>

Output

An unordered HTML list • Coffee • Tea • Milk

Unordered HTML List - Choose List Item Marker The CSS list-style-type property is used to define the style of the list item marker:

Value Description disc Sets the list item marker to a bullet (default) circle Sets the list item marker to a circle square Sets the list item marker to a square none The list items will not be marked

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:

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

An ordered HTML list 1. Coffee 2. Tea 3. Milk

Ordered HTML List - The Type Attribute The type attribute of the <ol> tag, defines the type of the list item marker:

Type Description type="1" The list items will be numbered with numbers (default) type="A" The list items will be numbered with uppercase letters type="a" The list items will be numbered with lowercase letters type="I" The list items will be numbered with uppercase roman numbers type="i" The list items will be numbered with lowercase roman numbers

HTML Tables

Defining an 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>

output

Firstname Lastname Age Jill Smith 50 Eve Jackson 94 John Doe 80

HTML Table - Cells that Span Many Columns To make a cell span more than one column, use the colspan attribute:

Example <table style="width:100%"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>55577854</td> <td>55577855</td> </tr> </table> Output

Cell that spans two columns: Name Telephone Bill Gates 55577854 55577855

HTML Table - Cells that Span Many Rows

To make a cell span more than one row, use the rowspan attribute:

Example <table style="width:100%"> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>55577854</td> </tr> <tr> <td>55577855</td> </tr> </table>

HTML Table - Adding a Caption

To add a caption to a table, use the <caption> tag: <table style="width:100%"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table>

Specific Attributes The HTML <table> tag also supports following additional attributes:

Attribute Value Description abbr abbreviated_text Deprecated-Specifies an abbreviated

version of the content in a cell. align right, left,center,justify,char

Deprecated-Visual alignment.

bgcolor rgb(x,x,x) #hexcode colorname

Deprecated-Specifies the background color of the table.

border pixels Deprecated-Specifies the border width. A value of "0" means no border.

cellpadding pixels or % Deprecated-Specifies the space between the cell borders and their contents.

cellspacing pixels or % Deprecated-Specifies the space between cells.

Practical No 4

AIM: Image & Link:- Develop and demonstrate a HTML document that illustrates a) Image as a background b) Hyperlink using an image c) Hyperlink with another web page(A, Base, Href) d) Link to email address, FTP Websites

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

HTML Links - Hyperlinks 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.

HTML Links - Syntax In HTML, links are defined with the <a> tag:

<a href="url">link text</a> <a href="http://www.Google.com/html/

">Google Page</a>

The href attribute specifies the destination address of the link.

The link text is the visible part.

Clicking on the link text will send you to the specified address.

HTML <img> Tag The HTML <img> tag is used to put an image in an HTML document.

Example <!DOCTYPE html> <html> <head> <title>HTML Tag</title> </head> <body> <img src="https://www.google.com/images/html.gif" alt="Google page" height="150" width="140" /> </body> </html>

http://www.google.com/html/�




Practical No 5

AIM: Forms and Frames:- Develop and demonstrate a HTML document that illustrates a) Create “Website Login Form” which consists of following details User Name , Password Address, Ph no, Sex, Hobbies, Date Of Birth ,Country , along with submit and Reset Button. b) Create a Web page having Main Frame along with three Sub Frames(Windows) c) Create a Frame which will consider as a Main Frame along with other Sub Frame. when the particular link gets selected from the main frame it will displayed the output on target frame. d) Create a login form as above which will use the post method by sending data on another form. HTML Forms are required when you want to collect some data from the site visitor. For example during user registration you would like to collect information such as name, email address, credit card, etc. A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application.

There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.

The HTML <form> tag is used to create an HTML form and it has following syntax:

<form action="Script URL" method="GET|POST"> form elements like input, textarea etc. </form>

Form Attributes Apart from common attributes, following is a list of the most frequently used form attributes:

Attribute Description action Backend script ready to process your passed data. method Method to be used to upload data. The most frequently used are GET and

POST methods. target Specify the target window or frame where the result of the script will be

displayed. It takes values like _blank, _self, _parent etc. enctype You can use the enctype attribute to specify how the browser encodes the data

before it sends it to the server. Possible values are: • application/x-www-form-urlencoded - This is the standard method

most forms use in simple scenarios.

• mutlipart/form-data - This is used when you want to upload binary data in the form of files like image, word file etc.

HTML Form Controls There are different types of form controls that you can use to collect data using HTML form:

• Text Input Controls

• Checkboxes Controls

• Radio Box Controls

• Select Box Controls

• File Select boxes

• Hidden Controls

• Clickable Buttons

• Submit and Reset Button

Text Input Controls There are three types of text input used on forms:

• Single-line text input controls - This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML <input> tag.

• Password input controls - This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTMl <input> tag.

• Multi-line text input controls - This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag.

Single-line text input controls This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML <input> tag.

Example Here is a basic example of a single-line text input used to take first name and last name:

<!DOCTYPE html>

<html> <head> <title>Text Input Control</title> </head> <body> <form > First name: <input type="text" name="first_name" /> <br> Last name: <input type="text" name="last_name" /> </form> </body> </html>

Attributes

Following is the list of attributes for <input> tag for creating text field.

Attribute Description type Indicates the type of input control and for text input control it will be set to text.

name Used to give a name to the control which is sent to the server to be recognized and get the value.

value This can be used to provide an initial value inside the control. size Allows to specify the width of the text-input control in terms of characters. maxlength Allows to specify the maximum number of characters a user can enter into the text box.

Password input controls This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTML <input> tag but type attribute is set to password.

Example Here is a basic example of a single-line password input used to take user password:

<!DOCTYPE html> <html> <head> <title>Password Input Control</title> </head> <body> <form > User ID : <input type="text" name="user_id" /> <br> Password: <input type="password" name="password" /> </form> </body>

</html>

Attributes Following is the list of attributes for <input> tag for creating password field.

Attribute Description

type Indicates the type of input control and for password input control it will be set to password.

name Used to give a name to the control which is sent to the server to be recognized and get the value.

value This can be used to provide an initial value inside the control. size Allows to specify the width of the text-input control in terms of characters. maxlength Allows to specify the maximum number of characters a user can enter into the text box.

HTML Frames HTML frames are used to divide your browser window into multiple sections where each section can load a separate HTML document. A collection of frames in the browser window is known as a frameset. The window is divided into frames in a similar way the tables are organized: into rows and columns.

Disadvantages of Frames There are few drawbacks with using frames, so it's never recommended to use frames in your webpages:

• Some smaller devices cannot cope with frames often because their screen is not big enough to be divided up.

• Sometimes your page will be displayed differently on different computers due to different screen resolution.

• The browser's back button might not work as the user hopes. • There are still few browsers that do not support frame technology.

Creating Frames To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag defines how to divide the window into frames. The rows attribute of <frameset> tag defines horizontal frames and cols attribute defines vertical frames. Each frame is indicated by <frame> tag and it defines which HTML document shall open into the frame.

Example Following is the example to create three horizontal frames:

<!DOCTYPE html> <html> <head> <title>HTML Frames</title> </head> <frameset rows="10%,80%,10%"> <frame name="top" src="/html/top_frame.htm" /> <frame name="main" src="/html/main_frame.htm" /> <frame name="bottom" src="/html/bottom_frame.htm" /> <noframes> <body> Your browser does not support frames. </body> </noframes> </frameset> </html>

The <frameset> Tag Attributes

Following are important attributes of the <frameset> tag:

Attribute Description

cols

specifies how many columns are contained in the frameset and the size of each column. You can specify the width of each column in one of four ways:

• Absolute values in pixels. For example to create three vertical frames, use cols="100, 500,100".

• A percentage of the browser window. For example to create three vertical frames, use cols="10%, 80%,10%".

• Using a wildcard symbol. For example to create three vertical frames, use cols="10%, *,10%". In this case wildcard takes remainder of the window.

• As relative widths of the browser window. For example to create three vertical frames, use cols="3*,2*,1*". This is an alternative to percentages. You can use relative widths of the browser window. Here the window is divided into sixths: the first column takes up half of the window, the second takes one third, and the third takes one sixth.

rows

This attribute works just like the cols attribute and takes the same values, but it is used to specify the rows in the frameset. For example to create two horizontal frames, use rows="10%, 90%". You can specify the height of each row in the same way as explained above for columns.

border This attribute specifies the width of the border of each frame in pixels. For example

border="5". A value of zero means no border.

frameborder This attribute specifies whether a three-dimensional border should be displayed between frames. This attrubute takes value either 1 (yes) or 0 (no). For example frameborder="0" specifies no border.

framespacing

This attribute specifies the amount of space between frames in a frameset. This can take any integer value. For example framespacing="10" means there should be 10 pixels spacing between each frames.

Practical No 6

AIM: Multimedia:- a) Develop a web page to play audio file using <a> Tag. b) Develop a web page to play video file using <Embed> Tag.

Audio file using <a> Tag.

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> Element

To 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> How it Works

The controls attribute adds video controls, like play, pause, and volume.

It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads.

The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.

The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.

HTML Video - Methods, Properties, and Events

HTML5 defines DOM methods, properties, and events for the <video> element.

This allows you to load, play, and pause videos, as well as setting duration and volume.

There are also DOM events that can notify you when a video begins to play, is paused, etc.

HTML <audio> Tag

Before HTML5, audio files could only be played in a browser with a plug-in (like flash).

The HTML5 <audio> element specifies a standard way to embed audio in a web page.

The HTML <audio> tag is used to embed audio in web pages.

<!DOCTYPE html>

<html> <head> <title>HTML audio Tag</title> </head> <body> <p>Click on Play button...</p> <p>(Song: Kalimba which is provided as a Sample Music in Windows)</p> <audio controls> <source src="/html/Kalimba.mp3" type="audio/mpeg"> </audio> </body> </html>

Practical No 7

AIM: DHTML: a) Create a CSS document on Internal style sheet

b) Create a CSS document on External style sheet

c) Create a CSS document on In line style sheet

d) Create a CSS document on placing Images at different position

DHTML

DHTML allows scripting languages to change variables in a web page's definition language, which in turn affects the look and function of otherwise "static" HTML page content, after the page has been fully loaded and during the viewing process. Thus the dynamic characteristic of DHTML is the way it functions while a page is viewed, not in its ability to generate a unique page with each page load

Dynamic HTML or DHTML, is a collection of technologies used together to create interactive and animated web sites by using a combination of a HTML and CSS or JavaScript.

DHTML allows authors to add effects to their pages that are otherwise difficult to achieve. For example, DHTML allows the page author to:

» Animate text and images in their document, independently moving each element from any starting point to any ending point, following a predetermined path or one chosen by the user.

» Embed a ticker that automatically refreshes its content with the latest news, stock quotes, or other data.

» Use a form to capture user input, and then process and respond to that data without having to send data back to the server.

» Include rollover buttons or drop-down menus.

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.

To most people DHTML means the combination of HTML, JavaScript, DOM, and CSS.