Monday, 24 July 2017

Lesson No. 1 Web Publishing - Web Server

What is Web Server?

A Web server is a program running on a Computer that uses HTTP (Hypertext Transfer Protocol) to serve the files that form Web pages to users, in response to their requests, which are forwarded by their computers' HTTP clients (Web Browsers).

Web server is a computer that hosts websites and web pages i.e. where the web content is stored.

A web server consists of a physical server, server operating system (OS) and software used to facilitate HTTP communication like IIS, Apache, etc.

When you type a Web site address into your browser, Web servers are doing the work of getting you the page you request.

Every Web server has an IP address and possibly a domain name.

Examples of Web Server Programs:

  • Microsoft Internet Information Services (IIS)
  • Microsoft Personal Web Server (PWS)
  • Apache HTTP Server
  • Sun Java System Web Server
  • Lighttpd

Lesson No. 1 Web Publishing - CSS

What is CSS?
  • CSS stands for Cascading Style Sheets
  • CSS describes how HTML elements are to be displayed on screen, paper, or in other media
  • CSS saves a lot of work. It can control the layout of multiple web pages all at once
  • CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes. 
  • External stylesheets are stored in CSS files

CSS Syntax

A CSS rule-set consists of a selector and a declaration block:
CSS rule syntax

  • The selector points to the HTML element you want to style.
  • The declaration block contains one or more declarations separated by semicolons.
  • Each declaration includes a CSS property name and a value, separated by a colon.
  • A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

p {
: red;
: center;

Three Ways to Insert CSS
There are three ways of inserting a style sheet:
  • External style sheet
  • Internal style sheet
  • Inline style

1.  External Style Sheet

With an external style sheet, you can change the look of an entire website by changing just one file!
Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:
An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension.
<link rel="stylesheet" type="text/css" href="mystyle.css">

Here is how the "myStyle.css" looks:
body {
: lightblue;

: navy;
: 20px;

Note: Do not add a space between the property value and the unit (such as margin-left:20 px;). The correct way is: margin-left:20px;

2.  Internal Style Sheet

An internal style sheet may be used if one single page has a unique style.
Internal styles are defined within the <style> element, inside the <head> section of an HTML page:
: linen;

: maroon;
: 40px;

3.  Inline Styles

An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.
The example below shows how to change the color and the left margin of a <h1> element:
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

Note: If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used. 

CSS Selectors

CSS selectors are used to "find" (or select) HTML elements based on their element name, id, class, attribute, and more.

The element Selector

The element selector selects elements based on the element name.

p {
: center;
: red;

The id Selector

·         The id selector uses the id attribute of an HTML element to select a specific element.
·         The id of an element should be unique within a page, so the id selector is used to select one unique element!
·         To select an element with a specific id, write a hash (#) character, followed by the id of the element.
#para1 {
: center;
: red;
<p id="para1">                            


The class Selector

·         The class selector selects elements with a specific class attribute.
·         To select elements with a specific class, write a period (.) character, followed by the name of the class.

.center  {
: center;
: red;

Grouping Selectors

If you have elements with the same style definitions, it will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
h1, h2, p {
: center;
: red;

Friday, 7 July 2017

Lesson No. 1 Web Publishing - Cross Browser Testing

Chapter No. 1 Web Publishing

Cross Browser Testing

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.


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)

.MP3MP3 (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.
<a href="music/background.mp3">
Click here to play

Adding sound/audio to web pages
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)
<bgsound  src="music/background.wav" loop=2>
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 
<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
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.
<embed  src="videos/sample.mp4" height=480 width=640>
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>