Friday, 7 July 2017

Lesson No. 1 Web Publishing - Cross Browser Testing

Chapter No. 1 Web Publishing

Cross Browser Testing

Introduction

With wide range of web browsers available, end users using different web browsers to access your web site/applications, it has now become crucial to test web site/applications on multiple browsers. On different browsers, client components like HTML, JavaScript, AJAX requests, Applets, Flash, etc. may behave differently.

Testing your website on different browsers is knows as Cross Browser Testing.

Cross Browser Testing is a process to test web applications across multiple browsers.

It involves checking compatibility of your application across multiple web browsers and ensures that your web application works correctly across different web browsers.

It involves testing both the client side and server side behavior of your Web application when it is accessed using different Web Browsers.

It shows limitation of the web site and functional features.

Some Popular Browsers:

In every browser and platform the website will look and work differently.

Every web browser comes with variations and differences in the way a web page is displayed and works.

Examples:

1. <bgsound> tag is only supported by Internet Explorer and not by Netscape Navigator, Chrome, Firefox, Opera, etc..

2. Broken image - an image in a web page whose path is not found or path is wrong or file name is given is wrong. Internet Explorer shows broken images with a red color sign along with alternative text. In Netscape Navigator, it shows 3 color dots with alternative text.

3. <hr> tag Horizontal rule - The appearance is different in browsers. In Internet Explorer it shows 3D effect, whereas in Netscape Navigator it show rule (line) in regular manner.

4. bordercolorlight and bordercolordark - attributes of <table> tag are supported in Internet Explorer but not supported in Netscape Navigator.

5. bgproperties=fixed - This attribute used in <body> tag makes background image water marked in Internet Explorer, but moves with text in Netscape Navigator.

6. Outset Border - Outset border style given to paragraph tag is shown in Internet Explorer and not in Netscape navigator.

7. <blink> tag is not supported in Internet Explorer and other browsers which blinks the text, but supported in Netscape Navigator.

Lesson No. 1 Web Publishing - Creation of Web Content using Indian Languages

Chapter No. 1 Web Publishing

Creation of Web Content using Indian Languages

By using Unicode and Indian language fonts Arial Unicode MS and Mangal

About Unicode:

Unicode is a computing industry standard for the consistent encoding, representation, and handling of text expressed in most of the world's writing systems.

It is a standard character set encoding developed and maintained by The Unicode Consortium.

It can support over one million characters.

It supports all characters from all scripts, as well as many symbols.

Unicode also knows as UTF-8 (Unicode Transformation Format-8) or the Universal Alphabet.

Today all the web browser and operating systems includes Unicode support.

Steps for language settings in Windows

1. Go to Control Panel

2. Click on Clock, Language and Regional.

3. Click on Change Keyboards or Other Input Methods options.

4. In "Keyboards and Languages" box click on Change keyboards option.

5. In the "Text Services and Input Languages" window, in the General tab, click on Add button.

6. In the Add Input Language window, Search for your required indian language and click the plus sign to open.

7. Now click the plus sign to open Keyboard option and click on Devnagari In script checkbox.

8. Click on the OK button.

9. Now in the Text Services and Input Languages, click the Default Input Languages option and click on the selected language e.g. Marathi - Devnagari Inscript option.

10. Click on the Apply button.

11. Now in Language bar, choose the option Docked in Taskbar to display the Language bar on Taskbar of Windows Desktop.

12. Click on the Apply button and Click OK.

13. Now you can type in the indian language by selection the option from the Language bar displayed on the Taskbar.

Open Notepad and Type the text in <body> section by changing the language from the language bar.

While saving the file, select encoding as UNICODE in the Save As dialog box.

Lesson No. 1 Web Publishing - Inserting Sound and Video into Web page

Chapter No. 1 Web Publishing

Inserting Sound and Video into Web page

Popular Sound/Audio formats:

.WAV - developed by Microsoft and IBM. It is the standard format for Windows.

.AIFF - (Audio Interchange File Format) developed by Apple for MAC platform

.Ra - (Real Audio Format) is lower quality audio format (smaller in size)

.MP3 - MP3 (MPEG-1 Audio Layer-3) is a standard technology and format for compressing a sound sequence into a very small file (about one-twelfth the size of the original file) while preserving the original level of sound quality when it is played. MP3 provides near CD quality audio.

.AU - (Audio) developed by Sun Microsystems for UNIX platform

.MIDI - (Musical Instrumental Digital Interface) - format used for instrumental music, very small in size
.RMF - It is a wrapper for audio formats like .wav, .au, .aiff, .mp3 and MIDI. The purpose of the format is to encrypt the data and to store MIDI and sounds together.

Linking to audio file

We can use <a> tag to link an audio resource on your computer or web.

E.g.

Click here to play

</a>

Adding sound/audio to web pages

<bgsound>

To add background sound to html pages <bgsound> tag is used.

It is supported by only Internet Explorer

It has no control attribute (play, stop, pause buttons)

e.g.

Attributes:

Src - specify the name of audio file

Loop - specifies the number of times the file must be played.

E.g. loop="infinite" or loop=-1

loop=2

<embed> tag

It is used to insert audio as well as video both.

It provides console for controlling.

E.g. <embed src="music/quit.mp3" height=100

Width=200>

Attributes of <embed> tag:

Src - Specifies the name of audio or video file.

Autostart - specifies whether audio should start on page load. It has two values true or false.

True value plays music when page is loaded.

False value will play music when user clicks play button.

Hidden - It is to hide the console. True value hides the console.

Volume - Sets the volume of music. Values from 1 to 100 can be set. Default is 50.

Width - specifies the width of the console.

Height - specifies the height of the console.

Controls - specifies console size Values - console or small consoles

Value console gives the complete console with play, stop and pause button.

Video formats

.AVI (Audio Video Interleave) - format developed by Microsoft for Windows platform.

.WMV (Windows Media video) - developed by Mircosoft

.QT (Quick Time) - format developed by Apple for MAC platform

.MPG / .MPEG / .MP4 - formats developed by Moving Picture experts group, popular format on web.

.flv - developed by Adobe Flash (low quality)

Adding video to the web page

<embed> tag is used to insert video on the web page.

E.g.

Adding video using <img> tag

<img> tag along with DYNSRC attribute is used to insert video in the web page.

E.g. <img DYNSRC="videos/sample.mp4" height=480 width=640>

Lesson No. 1 Web Publishing - Forms

Chapter No. 1 Web Publishing

FORMS

Forms are used to accept or input the data from user. The form consists of objects called form elements.

E.g. Text box, Password box, Radio button, List box, Command button, submit button, Drop list box, Check box, etc.

To create forms, <form> tag is used. All the elements are placed within <form> </form> tags.

<input> tag: Used to create the form fields.

Textbox or Text input field

Used to input text in a single line.

E.g. <input type=text name="fname">

Password field

Used to type password (displays * or . )

E.g. <input type=password name="pwd">

Submit button

Creates submit button, used to send form data to server for processing.

E.g. <input type=submit value="submit">

Example - Simple LOGIN form

<html>

<head>

<title>Login Form</title>

</head>

<body>

<h1> User Login</h1>

User ID: <input type=text name="loginid" size=15>

Password: <input type=password name="pwd">

</body>

</html>

Radio button

It's a toggle button and only one option can be selected from a group of radio buttons.

E.g. <input type=radio name=gender value="M">

Check box

Used to select one or more options from number of choices

E.g. <input type=checkbox name=hobby value="Cri">

Button field

It is used to display a command button to which we can assign a function (task).

Clicking the button will activate a function.

E.g. <input type=button name=button1 onclick="function();">

Attributes of <input> tag:

Name - assigns a name to form field.

Size - specifies the display size of a text box

Maxlength - limits the number of character that a user can enter in a text field.

Value - It is used to assign a default value to text box.

Type - It indicates the type of form objects like text (default), radio, submit, reset, checkbox, etc.

Checked - It is used to specify default selection for radio button and check box.

id - used to provide a id to the field (used in CSS)

Select list box or Drop down list box

The <select> tag is used to select an option from menu kind of drop-down list or scrolling list box.

E.g.

<option value=mum>Mumbai</option>

<option value=thn>Thane</option>

<option value=kyn>Kalyan</option>

</select>

Attributes of <select>:

Name - It is used to specify a name to the select box. Assigns a label to selection.

Size - Specifies the number of list items to be displayed at one time.

Multiple - Allows the user to select multiple options.

<textarea> tag

It is used to create multiline textbox or large editable area.

E.g.

</textarea>

Attributes of <textarea> tag:

Name - assigns a name to the text area

Rows - specifies the height of the text area in number of lines.

Cols - specifies the width of the text area in no. of columns /characters.

Hidden field

The purpose of the hidden field is to store the value that need to be sent to server along with form. The browser does not display these values.

E.g. <input type=hidden name=xyz value=256>

Attributes of <form> tag:

Method - It specifies the method of sending form data to the server.

There are two methods:

GET - It appends the data to the URL in name/value pairs.

POST - sends the form data hidden in HTTP headers not visible on the screen.

Action - It specifies the location/path or URL of the server where the form data is to be submitted.

Name - assigns a name to the form.

E.g.

Lesson No. 1 Web Publishing - Image Mapping

Lesson No. 1 Web Publishing

IMAGE MAPPING

It is a single graphic image that consists of number of hyperlinks incorporated within an image.

The specific areas mapped within an image are known as hotspots which are links to a resource.

Map is a text file that contains the information of an image and the mapped areas of an image.

These areas can be rectangles, circles or polygons defined in an image specified by coordinates in pixels of the image.

There are two ways to do image mapping

1) Client Side mapping - They are executed on client machine from web browser itself. All information is loaded along with the image. It executes quickly.

2) Server side mapping - In this the program that executes the links is placed on the server. The browser activates program on the server by sending x and y coordinates of the position where hyperlink was created.

Client Side mapping

In Client side mapping, the image map is mentioned by using USEMAP attribute in the <img> tag. The map is specified in the <map> and <area> tags, which defines the hotspot in an image.

For specifying the areas of the hotspot, the <area> tag is used within <map> tag.

The attributes for <area> tag are as follows:

shape :- specifies as values rect, circle and poly

rect - for defining rectangle area, upper left and right bottom (X,Y) coordinates.

circle - for defining circle area, coordinates of center point and radius is specified.

poly - for defining polygon area, 3 or more pair of coordinated to form polygon

coords :- specifies coordinates for rectangle, circle and polygon

href :- specifies path of html file or URL of website.

alt :- specifies alternate text given to hotspot

E.g. Client side image mapping

mapexample.html

<html>

<body>

</map>

</body>

</html>

The coordinates for the shape are found by opening the globe.jpg picture in Paint by placing the arrow over the points and note down the coordinates.

Server Side mapping

In Server side mapping the map details are placed on the server. The browser activates program on the server by sending x and y coordinates of the position where the hyperlink was created. On receiving the coordinates the program on the server looks at the map file for close match and then loads the file that is closet to coordinates.

In Server side mapping, the image map is mentioned by using ISMAP attribute in the <img> tag.

The map details are save in a text file with the extension .map and place this file in the same folder in which html document containing the image is placed.

E.g. Server side image mapping - the map is written in globe.map file which is placed on server

globe.map

Default http://exza.in/xyz.html

Rect http://exza.in/page1.html 22,37,123,97

Circle http://exza.in/page2.html 286, 90, 45

Poly http://exza.in/page3.html 48,169,142,234,50,248

mapexample.html

<html>

<body>

</body>

</html>

The href attribute of <a> tag specifies the location of external map file and server side image map program on the web server. The <img> tag is reference for the mapped file. The ISMAP attribute in the <img> tag specifies that the image is mapped file. ISMAP indicates a server side image map.

Monday, 8 May 2017

Lesson No.1 Web Publishing - Frames Practical

HTML - Frames Practical Practice

We will learn dividing the browser window in different ways.

Step 1: First Create these four web documents and save in a folder.

Step 2: Now create the frame file which will contain the <frameset> and <frame> tags and save it with the name frame.html. The frame file will not contain the <body> tag instead <frameset> tag.

Example 1: Dividing the window equally into two horizontal frames.

(for creating horizontal frames, we have to use rows attribute in the frameset tag and specify the value 50% for each frame)

Example 2: Dividing the window into three horizontal frames with middle frame larger.

(for creating horizontal frames, we have to use rows attribute in the frameset tag and specify the value 50% for middle frame, 25% for top frame and * symbol for the third frame (* stands for relative value))

Example 3: Dividing the window into three equal vertical frames.

(for creating horizontal frames, we have to use cols attribute in the frameset tag and specify the value * relative value)

Example 4: Dividing the window into two horizontal frames and then the bottom frame again into two vertical sections.

(for again dividing the frame we have to use nested frameset tags)

First we will divide the window into two frames. And then the bottom frame vertically into two sections.

Example 5: Dividing the window into four frames

(for again dividing the frame we have to use nested frameset tags)

First we will divide the window into two frames. And then the first frame vertically into two sections and same way bottom frame vertically into two sections.

Linking Frames

In linking there is menu/links on the left side of browser and the content is displayed on the right side while clicking on links.

Example: Linking websites using Frames.

Here we will create two files

1) frameslink.html - containing <frameset> tags, We will name the frames as “left” and “right”.

2) link.html – containing links to websites, in <a> tag use target attribute and specify the second frame’s name i.e. “right”

framelinks.html

link.html

Output:

Information Technology (IT) Notes for Std. 12th HSC Board Exam - Science

Pages

Pages

IT online Exam

Friday, 7 July 2017

Lesson No. 1 Web Publishing - Cross Browser Testing

Chapter No. 1 Web Publishing

Cross Browser Testing

Lesson No. 1 Web Publishing - Creation of Web Content using Indian Languages

Chapter No. 1 Web Publishing

Creation of Web Content using Indian Languages

Lesson No. 1 Web Publishing - Inserting Sound and Video into Web page

Chapter No. 1 Web Publishing

Lesson No. 1 Web Publishing - Forms

Chapter No. 1 Web Publishing

FORMS

Lesson No. 1 Web Publishing - Image Mapping

Lesson No. 1 Web Publishing

IMAGE MAPPING

Monday, 8 May 2017

Lesson No.1 Web Publishing - Frames Practical

Bitcoins