Scribd
Upload
72 views

803 Web Application Class XI Chap 2 Section 2

Uploaded by

daivik7909
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
72 views

803 Web Application Class XI Chap 2 Section 2

Uploaded by

daivik7909
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 34

<html>

<head>
<title>My First Webpage</title>
</head>
<body>
<h1 align="center">My First Web page</h1>
<p>Welcome
>Welcome to my first webpage. I am writing this page using a text editor and plain
old html.</p>
<p>By learning html, I’ll be able to create web pages like a programmer<br>
which I am of course.
<!-- Who would have guessed how easy this would be :) -->
<imgsrc="C:\Users\IPWS\\Desktop\graphics\chef.jpg"
chef.jpg" align="bottom" width=130
height=101 alt="Smiling Happy Chef">
<p align="center"> This is my Chef. </p>
</body>
</html>

OUTPUT

You can try inserting images of different types such as PNG, JPEG, GIF, BMP etc.
with all the attributes of img tag.

1.7 Tables

Tables are defined with the <table> tag. A table is divided into rows (with the <tr>
tag),and each row is divided into data cells (with the <td> tag). The letters td stands
fortable data, which is the content of a data cell. A data cell can contain text, images,
lists,paragraphs, forms, horizontal rules, tables, etc.

Tables and the Border Attribute

To display a table with borders, you will use the border attribute.

1.8 Inserting Audio and Video

There are various tag, which help us in enhancing the appearance of a web page. Using
<audio> and <video> tags, you will be able to incorporate Multimedia in your webpage and
can make your webpage more alive.

Inserting Audio

To insert an audio<AUDIO>tag is used in a web page.It can be used for any file format like .
MP3 e,.ogg, .wav etc.

Syntax:

<Audio controls src= “ filename ” ></Audio>

The attributes of <audio> tag are as follows:

Src : Specifies the URL of the audio file.


Controls : Display the controls on the web page.
Autoplay : Place the audio file automatically when the webpage is loaded.
Loop : Replays the audio file.
Try it!
<HTML>
<Head>
<Title> Adding audioclip </title>
</Head>
<Body>
This is my first musical web page.
<Audio controlssrc= “ C:\Users\Desktop\PPT WORK\InspirationalPop.mp3” >
Check your browser setting </Audio>
</Body>
</ HTML>

Inserting Video

To insert video in the HTML pages video tag is used it supports file formats like .MP4,
.webm, .ogg etc.

Syntax

<video controls src = “ filename “ width = height= autoplay></video>

The attributes of <video> Tag are as follows:

Src : Specifies the URL of the video file.


Controls : Displays the controls on the web page
Autoplay : The place the audio file automatically when the webpage is loaded
Height : Specifies the height of the video player displayed
Width : Specifies the width of the video player displayed

Try it!

<HTML>
<Head>
<Title> My first page </Title>
</Head>

<Body>
Check the video clip.
<video controls src = “ videofilename.mp4 “ width = 720 height= 540 autoplay>
please check your browser settings </video>
</Body>
</HTML>

Note:

If the browser does not support audio in video tag, then any text placed between
<audio></audio> and <video></video> tag will be displayed in the browser.
1.8 Frames

Frames allows multiple HTML documents to be displayed as independent Windows within


one browser window. It divides into multiple Windows in which each window displays the
separate HTML page or web page.

Syntax

<iframe src= “ “ height=200 width = 200 style= “ border- width: ;border- style:
, Border- color: “></iframe>

Example

<HTML>

<Head>

<Title> Frame page </title>

<Body>

<h1>WebPage Containing Three Frames </h1>

<iframe src="file:///C:/Users/Desktop/frame1.html" height= 400 width=400 ></iframe>

<iframe src="file:///C:/Users/Desktop/FORM1.HTML" height=400 width =400 style="border-


width:5px; border-style:solid, Border-color:green"></iframe>

<iframe src="file:///C:/Users/Desktop/frame1.html" border:none></iframe>

</Body>

</HTML>

Output:
1.9 Forms

It is a container element started by <FORM>tag and ended by</FORM>tag. It is


used to create a form on a web page.

Syntax:

<FORM NAME="FormName" ACTION = "URL" METHOD =


"method">

Attributes of FORM element are discussed below:

1. NAME -This specifies the name of the form. But this name will not be displayed on
the
form. As there can be more than one FORMs in an HTML document, a name is
required to differentiate one form from another. The NAME attribute is
optional if there is only one FORM on the web page.

NAME = "FormName"

2. ACTION - This specifies the URL where the form-data is sent when the form is
submitted.This URL is also called the destination of the form.

ACTION = "URL"

3. METHOD - This specifies how the form-data is submitted. Form-data can be


submitted
using the methods get or post. With METHOD = "get", the form-data is
submitted as URL variables, and with METHOD = "post", the form-data is
submitted as HTTP post.
METHOD = "method"

INPUT element - It is an empty element specified by <INPUT> tag. It is used to


provide an input field in a form where the user can enter the data. An input field may
be a text field, a checkbox, a radio button, a button, and more. INPUT element is
always used within the FORM element. Thus, INPUT element defines an object on
the FORM which can receive user input.

Syntax:

<INPUT TYPE = “FIELD TYPE” NAME = “FIELD NAME” VALUE = “FIELD TEXT”>
Attributes of INPUT element are discussed below:

Attribute:

TYPE

Use: The TYPE attribute determines the field type of input field to be provided in the
form.

Field type can be one of the following:

TEXT, PASSWORD, RADIO, CHECKBOX, SUBMIT, RESET, BUTTON,

IMAGE, HIDDEN, FILE.

Syntax:TYPE = "FieldType"

NAME

Use: Specifies the name of the field. This name does not appear on the FORM. It is
required for the identification/ differentiation as there can be more than one fields in a single
FORM.

Syntax: NAME = "FieldName"

VALUE

Use: Specifies the text to be displayed on the field.

Syntax: VALUE = "FieldText"

We will now discuss different field types (values of TYPE attribute) relevant to our syllabus.

1. FieldType: TEXT

Use: It provides a single line text input field where the user can enter text. Additional

Attributes:SIZE = "n" - Sets the visible size of the text field to n characters.
MAXLENGTH = "n" - Set the maximum number of characters that
can be input in the text field to n.
2. FieldType: PASSWORD

Use: It provides a single line text input field where the user can enter password.
A password field is different from a text field because a text field displays
whatever characters are entered by the user whereas a password field shows
one dot for each character input by the user. This is to prevent others from seeing the
password.

Additional Attributes: Same as those for TEXT field.

3. FieldType: RADIO

Use: It provides a radio button on the form. More than one radio buttons can have
(and in general have) the same name. All the radio buttons that have the same name
constitute a radio group. Only one radio button of a group can be selected at one
time. That is, from a group of radio buttons, if the user selects a button, all the other
buttons in the set are deselected. When a form is submitted, selected radio button's
value (specified by the VALUE attribute) is submitted to the destination.

Additional Attributes:

CHECKED - Indicates that the radio button is selected, which can be deselected
when another choice is made. At one time, only one radio button in a radio group can
be specified as CHECKED.

4. FieldType: CHECKBOX

Use: It provides a check box on the form. With checkboxes, we can give the users a
list of items to choose from. The user can choose more than one items from the list.
We can make a group of checkboxes, by giving them the same name. When a form
is submitted, selected cheboxes' values (specified by the
VALUE attribute) are submitted to the destination.

Additional Attributes:

CHECKED - Indicates that the checkbox is to be displayed with a tick mark to show
selection. This attribute is optional.

5. FieldType: SUBMIT

Use: This provides a button on the form. When this button is clicked, the form is
submitted to the destination.

6. FieldType: RESET

Use: This provides a button on the form. When this button is clicked, the input fields
on the form are reset to their default state.

Example:

TRY IT!
<html>

<head><title> My page </title></Head><body>

<H1><U>ADMISSSION ENQUIRY FORM </u></h1>

<Form method=Post action= "maoilto:[email protected]"><b>Name </b><Input


type=Text name="st_name"><br>

<b>Gender </b>

<Input type=Radio name="gender" value="Male"> Male

<Input type=Radio name="gender" value="Female"> Female <Br>

<b>E- mail </B><Input type=Text Name ="email"><br>

SELECT SUBJECTS: <BR>

<Input type=CHECKBOX value="Science"> Science <Input type=CHECKBOX


value="Commerce"> Commerce <Input type=CHECKBOX value="Arts"> Arts

<Br>

Comment<Br>

<TextAREA name="comment" Rows=5 cols=50></TEXTAREA><br>

<INPUT Type=Submit Value ="Send">

<INPUT Type=Reset Value ="Clear">

</Form>

</body>

</html>

Points to Remember:

Exercise

1: What are the pre requisites to learn the basics of HTML?


2: How do you define a HTML file?
3: What is the tag for making a comment?
4: What dose <cite> and <pre> tag mean?
5: What is the syntax to define background color in HTML?
6: Explain the procedure to view source code in Mozilla Firefox, Google Chrome
&Internet Explorer?
7: List out any three popular web browsers?
8: What do you mean by an anchor tag?
9: How do you insert an image and create a table in the HTML page?
10: What is the tag to insert a single line break?
11: What does W3C stand for?
12: Fill in the blanks:

(a) Word processors like ................. should be avoided.


(b) The ................. tells the web browser how to display the page
(c) ................. is the tag used for defining the Sample computer code
(d) Acronym for HTTP ................
(e) Acronym for HTML ................

Practical Work:
1. Create a website for “Tour and Travel” company.
2. Create a website on the topic – “Digital India”.
3. Create a website on famous Sports of the World.
Note: A website must contain at least 4-5 webpages.
Section-2: Basics About CSS

Cascading Style Sheets (CSS) describe how documents are presented on screens,
in print, or perhaps how they are pronounced. W3C has actively promoted the use of
style sheets on the Web since the Consortium was founded in 1994. Cascading
Style Sheets (CSS) provide easy and effective alternatives to specify various
attributes for the HTML tags. Using CSS, you can specify a number of style
properties for a given HTML element. Each property has a name and a value,
separated by a colon (:). Each property declaration is separated by a semi-colon (;).

2.1 Advantages of CSS


 CSS saves time – You can write CSS once and then reuse same sheet in
multipleHTML pages. You can define a style for each HTML element and
apply it to asmany Web pages as you want.

 Pages load faster – If you are using CSS, you do not need to write HTMLtag
attributes every time. Just write one CSS rule of a tag and apply to all the
occurrences of that tag. So less code means faster download times.

 Easy maintenance – To make a global change, simply change the style, and
all elements in all the web pages will be updated automatically.

 Superior styles to HTML – CSS has a much wider array of attributes than
HTML so you can give far better look to your HTML page in comparison of
HTML attributes.

 Multiple Device Compatibility – Style sheets allow content to be optimized


for more than one type of device. By using the same HTML document,
different versions of a website can be presented for handheld devices such as
PDAs and cell phones or for printing.

 Global web standards – Now HTML attributes are being deprecated and it is
being recommended to use CSS. So it’s a good idea to start using CSS in all
the HTML pages to make them compatible to future browsers.

Example First let’s consider an example of HTML document which makes use of
<font> tag and associated attributes to specify text color and font size:

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p><font color=“green”size=“5”>Hello, world!</font></p>
</body>
</html>
We can re-write above example with the help of Style Sheet as follows:

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p style=“color:green;font-size:24px;”>Hello, World!</p>
</body>
</html>

This will produce following result:

Hello, World!

You can use CSS in three ways in your HTML document:


 External Style Sheet – Define style sheet rules in a separate .css file and
then include that file in your HTML document using HTML <link> tag.

 Internal Style Sheet – Define style sheet rules in header section of the HTML
document using <style> tag.

 Inline Style Sheet – Define style sheet rules directly along with the HTML
elements using style attribute. Let’s see all the three cases one by one with
the help of suitable examples.

2.2 External Style Sheet

If you need to use your style sheet to various pages, then it’s always recommended
todefine a common style sheet in a separate file. A cascading style sheet file will
have extension as css and it will be included in HTML files using <link> tag.

Example
Consider we define a style sheet file style.css which has following rules:
.red{
color: red;
}
.thick{
font-size:20px;
}
.green{
color:green;
}

Here we defined three CSS rules which will be applicable to three different classes
defined for the HTML tags. I suggest you should not bother about how these rules
arebeing defined because you will learn them while studying CSS.

<!DOCTYPE html>
<html>
<head>
<title>HTML External
CSS</title>
<link rel=“stylesheet”
type=“text/css”href=“/html/stml
/style.css”>
/head>
<body>
<p class=“red”>This is red</p>
<p class=“thick”>This is
thick</p>
<p class=“green”>This is
green<p>
<p class=“thick green”>This is
thick and green</p>
</body>
</html>

This will produce following result:


2.3 Internal Style Sheet

If you want to apply Style Sheet rules to a single document only then you can include
those rules in header section of the HTML document using <style> tag.
Rules defined in internal style sheet override the rules defined in an external CSS
file.
Example
Let’s re-write above example once again, but here we will write style sheet rules in
the same HTML document using <style> tag:

<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<style type=“text/css”>
.red{
color: red;
}
.thick{
font-size:20px;
}
.green{
color:green;
}
</style>
</head>
<body>
<p class=“red”>This is red</p>
<p class=“thick”>This is thick</p>
<p class=“green”>This is green</p>
<p class=“thick green”>This is thick and green</p>
</body>
</html>

This will produce following result:

This is red

This is thick
This is green

This is thick and green


2.4 Inline Style Sheet

You can apply style sheet rules directly to any HTML element using style attribute of
the relevant tag. This should be done only when you are interested to make a
particular change in any HTML element only.

Rules defined inline with the element overrides the rules defined in an external CSS
fileas well as the rules defined in <style> element.

Example

Let’s re-write above example once again, but here we will write style sheet rules
alongwith the HTML elements using style attribute of those elements.
<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style=“color:red;”>This is red</p>
<p style=“font-size:20px;”>This is thick</p>
<p style=“color:green;”>This is green</p>
<p style=“color:green;font-size:20px;”>This is thick and green</p>
</body>
</html>

This will produce following result:

This is red
This is thick
This is green
This is thick and green

CSS Properties: border, box, font, margin, padding


CSS classes

CSS Syntax – Selectors

A CSS comprises of style rules that are interpreted by the browser and then applied
to the corresponding elements in your document. A style rule is made of three parts:
 Selector: A selector is an HTML tag at which style will be applied. This could
be any tag like <h1> or <table> etc.
 Property: A property is a type of attribute of HTML tag. Put simply, all the
HTML attributes are converted into CSS properties. They could be color or
border etc.
 Value: Values are assigned to properties. For example, color property can
have value either red or #F1F1F1 etc.

You can put CSS Style Rule Syntax as follows:

selector { property: value }

Example: You can define a table border as follows:

table{ border :1px solid #C00; }

Here table is a selector and border are a property and given value 1px solid #C00 is
the value of that property. You can define selectors in various simple ways based on
your comfort. Let me put these selectors one by one.

The Type Selectors


This is the same selector we have seen above. Again one more example to give a
colorto all level 1 headings:

h1 {
color: #36CFFF;
}

The Universal Selectors


Rather than selecting elements of a specific type, the universal selector quite simply
matches the name of any element type :

{
color: #000000;
}

This rule renders the content of every element in our document in black.

The Descendant Selectors


Suppose you want to apply a style rule to a particular element only when it lies inside
a particular element. As given in the following example, style rule will apply to <em>
element only when it lies inside <ul> tag.

ul em {
color: #000000;
}
The Class Selectors

You can define style rules based on the class attribute of the elements. All the
elements having that class will be formatted according to the defined rule.

.black {
color: #000000;
}

This rule renders the content in black for every element with class attribute set to
blackin our document. You can make it a bit more particular.

For example:

h1.black {
color: #000000;}

The ID Selectors
You can define style rules based on the id attribute of the elements. All the elements
having that id will be formatted according to the defined rule.

#black {
color: #000000;
}

The Child Selectors

You have seen descendant selectors. There is one more type of selectors which is
very similar to descendants but have different functionality. Consider the following
example:

body > p {
color: #000000;
}

This rule will render all the paragraphs in black if they are direct child of <body>
element.
Other paragraphs put inside other elements like <div> or <td> etc. would not have
any effect of this rule.

The Attribute Selectors


You can also apply styles to HTML elements with particular attributes. The style rule
below will match all input elements that has a type attribute with a value of text:

input[type=“text”]{
color: #000000;
}
The advantage to this method is that the <input type=“submit” /> element is un
affected, and the color is applied only to the desired text fields.

There are following rules applied to attribute selector.


 p[lang] - Selects all paragraph elements with a lang attribute.

 p[lang=“fr”] - Selects all paragraph elements whose lang attribute has a value
ofexactly “fr”.

 p[lang =“fr”] - Selects all paragraph elements whose lang attribute contains
the word“fr”.

 p[lang=“en”] - Selects all paragraph elements whose lang attribute contains


valuesthat are exactly

 “en”, or begin with “en-”.

Multiple Style Rules

You may need to define multiple style rules for a single element. You can define
these rules to combine multiple properties and corresponding values into a single
block as defined in the following example:

h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}

Here all the properties and value pairs are separated by a semi colon (;). You can
keep them in a single line or multiple lines. For better readability we keep them into
separate lines.

Grouping Selectors

You can apply a style to many selectors if you like. Just separate the selectors with a
comma as given in the following example:

h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
This define style rule will be applicable to h1, h2 and h3 element as well. The order
of the list is irrelevant. All the elements in the selector will have the corresponding
declaration sapplied to them.

CSS Rules Overriding

We have discussed four ways to include style sheet rules in a HTML document. Here
is the rule to override any Style Sheet Rule.

 Any inline style sheet takes highest priority. So, it will override any rule
defined in<style>...</style> tags or rules defined in any external style sheet
file.

 Any rule defined in <style>...</style>tags will override rules defined in any


external style sheet file.

 Any rule defined in external style sheet file takes lowest priority and rules
defined in this file will be applied only when above two rules are not
applicable.

CSS Comments

Many a times you may need to put additional comments in your style sheet blocks.
So, it is very easy to comment any part in style sheet. You simply put your comments
inside /*this is a comment in style sheet*/.

You can use /* ....*/ to comment multi-line blocks in similar way you do in C and C++
programming languages.

Example

/* This is an external style sheet file */


h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
/* end of style rules. */
CSS Colors - Hex Codes

A hexadecimal is a 6 digit representation of a color. The first two digits(RR)


represent a red value, the next two are represent a green value(GG), and the last
are represent the blue value(BB).

A hexadecimal value can be taken from any graphics software like Adobe
Photoshop, Jasc Paintshop Pro or even using Advanced Paint Brush.
Each hexadecimal code will be preceded by a pound or hash sign #. Following are
the examples to use Hexadecimal notation.

CSS Colours - Short Hex Codes

This is a shorter form of the six


six-digit
digit notation. In this format, each digit is replicated to
arrive at an equivalent six-digit
digit value; For example: #6A7 becomes #66AA77.
A hexadecimal value can be taken from any graphics software like Adobe
Photoshop, Jasc Paintshop Pro or even using Advanced Paint Brush. Each
hexadecimal code will be preceded by a pound or hash sign #.

CSS Colours - RGB Values

This colourr value is specified using the RGB(( ) property. This property takes three
values, one each for red, green, and blue. The value can be an integer between 0
and 255 or a percentage.
Note: All the browsers do not support RGB() () property of color so it is recommended
not to use it. Following is the example to show few colors using RGB values.

Set the background image

Following is the example which demonstrates how to set the background image for
an element.

<table style=“background
style=“background-image:url(/https/www.scribd.com/images/pattern1.gif);”>
<tr><td>
This
Set thetable has background
background image set.
image position
</td></tr>
</table>is the example which demonstrates how to set the background image
Following
position 100 pixels away from the left side.

<table style=“background
style=“background-image:url(/https/www.scribd.com/images/pattern1.gif);
background-position:100px;”>
position:100px;”>
<tr><td>
Background image positioned 100 pixels away from the left.
</td></tr>
</table>
Set the background attachment

Background attachment determines whether a background image is fixed or scrolls


with the rest of the page.
Following is the example which demonstrates how to set the fixed background
image.

<p style=“background-image:url(/https/www.scribd.com/images/pattern1.gif);
background-attachment:scroll;”>
This parapgraph has scrolling background image.
</p>

Setting Fonts using CSS

This will teach you how to set fonts of a content available in an HTML element. You
can set following font properties of an element:
 The font-family property is used to change the face of a font.
 The font-style property is used to make a font italic or oblique.
 The font-variant property is used to create a small-caps effect.
 The font-weight property is used to increase or decrease how bold or light a
font appears.
 The font-size property is used to increase or decrease the size of a font.
 The font property is used as shorthand to specify a number of other font
properties.

Set the font family

Following is the example which demonstrates how to set the font family of an
element.
Possible value could be any font family name.

<p style=“font-family:georgia,garamond,serif;”>
This text is rendered in either georgia, garamond, or the default
serif font depending on which font you have at your system.
</p>

Set the font style

Following is the example which demonstrates how to set the font style of an element.
Possible values are normal, italic and oblique.

<p style=“font-style:italic;”>
This text will be rendered in italic style
</p>
Set the font variant

Following is the example which demonstrates how to set the font variant of an
element.

Possible values are normal and small-caps.

<p style=“font-variant:small-caps;”>
This text will be rendered as small caps
</p>

Set the font size

Following is the example which demonstrates how to set the font size of an element.
The font size property is used to control the size of fonts. Possible values could be
xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, size in
pixels or in %.

<p style=“font-size:20px;”>
This font size is 20 pixels
</p>
<p style=“font-size:small;”>
This font size is small
</p>
<p style=“font-size:large;”>
This font size is large
</p>

This will produce following result:

This font size is 20 pixels


This font size is small
This font size is large

Manipulating Text using CSS

This tutorial will teach you how to manipulate text using CSS properties. You can set
following text properties of an element:

 The color property is used to set the color of a text.


 The direction property is used to set the text direction.
 The letter-spacing property is used to add or subtract space between the
letters that make up a word.
 The word-spacing property is used to add or subtract space between the
words of a sentence.
 The text-align property is used to align the text of a document.
 The text-decoration property is used to underline, overline, and strikethrough
text.
 The text-transform property is used to capitalize text or convert text to
uppercase or lowercase letters.
 The white-space property is used to control the flow and formatting of text.
 the text-shadow property is used to set the text shadow around a text.

Set the Text Color

Following is the example which demonstrates how to set the text color. Possible
value could be any color name in any valid format.

<p style=“color:red;”>
This text will be written in red.
</p>

Set the text direction

Following is the example which demonstrates how to set the direction of a text.
Possible values are ltr or rtl.

<p style=“direction:rtl;”>
This text will be renedered from right to left </p>

Set the space between characters

Following is the example which demonstrates how to set the space between
characters. Possible values are normal or a number specifying space.

<p style=“letter-spacing:5px;”>
This text is having space between letters.
</p>

Set the text alignment

Following is the example which demonstrates how to align a text. Possible values
are left, right, center, justify.

<p style=“text-align:right;”>
This will be right aligned.
</p>
<p style=“text-align:center;”>
This will be center aligned.
</p>
<p style=“text-align:left;”>
This will be left aligned.
</p>
CSS – Images

Images are very important part of any Web Page. Though it is not recommended to
include lot of images but it is still important to use good images wherever it is
required.

CSS plays a good role to control image display. You can set following image
properties using CSS.

 The border property is used to set the width of an image border.


 The height property is used to set the height of an image.
 The width property is used to set the width of an image.
 The -moz-opacity
opacity property is used to set the opacity of an image.

The image border Property

The border property of an image is used to set the width of an image border. This
property can have a value in length or in %. A width of zero pixels means no border.
Here is the example:

<img style=“border:0px;” src=“/images/css.gif” />


<br />
<img style=“border:3px dashed red;” src=“/images/css.gif” />

This will produce following result:


Points to Remember:

Exercise Question

1. Why do we use CSS? What are its basic advantages?

2. What are the ways in which you can use CSS in your HTML document?

3. What are inline style sheets?

4. How are internal style sheets used?

5. Does the use of CSS saves time?

6. How are external style sheets used?

7. State difference between inline, internal & external style sheets?

8. Why are universal and type selectors used?

9. What do we do when we have to apply style rule to a particular element only


when it lies inside a particular element?

10. Explain the id selector.

11.Can we define multiple style rules?

12. What are the rules to override any style sheet?

13. How are the color codes represented in a style sheet?

14. How do we select a background attachment?

15. Can we set the text direction? If yes then how?

16. Is RGB() property supported by all browsers?

6. Fill in the blanks:

(a) ____________ Defines style sheet rules in a separate .css file and then include

that file in your HTML document using HTML <link> tag.

(b) The ____________ property is used to create a small-caps effect

(c) A cascading style sheet file will have extension as __________ and it will be
included in HTML files using ____________ tag.

(d) Each property declaration is separated by a ______________ .


(e) The ________________ property is used to set the text shadow around a text.

(f) The text-indent property is used to indent the text of a paragraph

(g) The-moz-opacity property is used to set the ___________ of an image.

Practical Work:

1. Create a website on the topic – “Transforming Education on Digital Media”.


2. Create a website on “Heritage of India”.
3. Create a website on “Artificial Intelligence”.
Section-3: Publishing Your website or webpages
DOMAIN NAME SYSTEM
3.1 Introduction
The heart of how the Internet works is the Domain Name System (DNS), the way in
which computers can contact each other and do things such as exchange email or
display Web pages.

When Someone on (he/she Internet wants to contact a location—for example, to visit


a Web site—he or she will type in an address, such as www.education.com. The
Internet Protocol (IP) uses Internet address information and the DNS to deliver mail
and other information from computer to computer.

The Domain Name System (DNS) is the directory that maps domain names to IP
addresses. DNS is built around the hierarchical domain namespace that we dis-
cussed earlier. DNS is a distributed directory and serves as enabling infrastructure
for a single, global directory of domain names. This directory is built from
thousands of servers owned by thousands of organizations around the world.

3.2 DNS Services:

Host aliasing:

A host with complicated hostname can have one or more alias names. DNS can be
invoked by an application to obtain the canonical hostname for a supplied alias
hostname as well as the IP address of the host.

Mail server aliasing:

DNS can be invoked by a mail application to obtain the hostname for a supplied alias
hostname as well as the IP address of the host.

Load distribution i DNS is also used to perform load distribution among


replicated servers.
3.3 Types of Name Servers

Name spaces are of two types: Flat name spaces and Hierarchical Names. The
name assigned to machines must be carefully selected from a namespace with
complete control over the binding between the names and IPaddresses.

Flat name space:


The original set of machines on the Internet used flat namespaces, These
namespaces consisted of sequence of characters with no further structure. A name
is assigned to an address.

Hierarchical names:
The partitioning of a namespace must be defined in such a way that it: Supports
efficient name mapping and Guarantees autonomous control of name assignment.
Hierarchical namespaces provides a simple yet flexible naming structure. The
namespace is partitioned at the top level. Authority for names in each partition are
passed to each designated agent The names are designed in an inverted-tree
structure with the root at the top.

3.4 Hierarchy of Name Servers


Computers called name servers are responsible for keeping track of such changes
and translating them between IP address and domain addresses. Name servers also
work with the DNS to ensure that mail is delivered to the right person. They make
sure that when you type in a Web URL you are sent to the proper location. They are
responsible for properly routing all messages and traffic on the Internet.

• To distribute the information among many computers, DNS servers are


used.
Creates many domains as there are first level nodes.
• In zone, server is responsible and have some authority. The server makes
database called zone file and keeps all the information for every node under
that domain.
• A root sever is a server whose zone consists of the whole tree. A root
server
usually does not store any information about domains but delegates its
authority to other servers.
• Primary server: It stores a file about the zone for which it is an authority. It
is responsible for creating, maintaining and updating the zone file.
• Secondary server: It transfers the complete information about a zone from
another server and stores the files on its local disk. These servers neither
creates nor updates the zone files.
3.5 Domain Resolution Process

When a machine needs to resolve domain name into an IP address, it queries a


DNS server, looking to one of a few, usually local, servers for the answer The local
server may know the answer because the query regards a local machine or because
it regards a machine that the DNS server has recently looked up. If it does not, the
hierarchical structure of the name is used to arrive at an answer.
Suppose that a distant machine is looking for mww.education.com. The
machine contacts its local server, but that server does not know the answer. The
local
server contacts what is known as the root server for the top-level domain (TLD), in
this case .com. The root server docs not know' the mapping the
mww.education.com, butit does know' the addresses of every' DNS server for the
domains in its TLD. The rootServer refers the local server to the DNS server
handling www.education.com and the local server contacts the mww.education.com
DNS server, Since that server knowstheaddressformww.education.com, the address
is returned to the local server, cached, and sent to the original requestor. Of course,
domain namespaces can be more than three deepandso can the associated servers.
This process just goes on longer in those cases, but an answer is eventually
returned as long as the mapping exists and die servers are properly configured and
registered

Domain Registration Process

The Doman Name System (DNS) is used to map a name to a static IP address.
Computers use these to communicate with themselves using aa name. When a
computer requests a URL the DNS translates that name into the corresponding IP
address.
When you sign up for a Web site, one of the first things you ’il have to do is determine
a domain name for your site. Then, you register your domain name with n domain
registrar.

Domain registrars register your domain name and hook you up to the Internet by
making sure your domain name is added to a huge database of domain names that
are mapped to specific IP addresses.

The process takes place in the order as follows:

1. You visit one of the accredited registrars.


2. You use the registrar's site to check and see if the domain name you wish to use
is unclaimed. For example, if you wanted to start a Web site using the name
ebay.com, you’d find that someone is already using that domain name. Most
registrar sites maintain an easy-to-use search interface that allows you to check
if the domain you want Is in use, and helps you find alternative names If It Is
3. After you have successfully chosen a name, you submit It to the
ICANN through the registrar's site.
4. The registrar then usually’ 'parks" your site by assigning you an IP address on
one of its servers for a small tree. You can also provide an IP address, which
your hosting company should have given you when you signed up with them.
5. Have your credit card handy, because next you’ll be asked to pay for the
service provided by the registrar
6. The registrar then maps the domain name to either the IP address you
provided or the IP address on its server that it used to park your domain
name. The mapping is then is forwarded to ICANN and it goes into a massive
database containing all the world’s IP addresses and corresponding domain
names.

Some Web hosting companies actually take care of this process for you, so you
may be able to skip these steps. Some registrars also act as hosting services, and
will try to sell you a hosting plan. Keep in mind that you’re under no obligation to host
your site using the services of the registrar you use to register your site.

PUBLISHING THE WEBSITES

The Final phase of creating a web site is publishing your pages. To place your pages
on the web you need a web server. Commonly called hosts, web servers allow you
to transfer and store files including HTML documents, images and multimedia files.
Unless you have your own web server, you need to find a server to host your pages.

Some examples of webhost are:

http://www.godaddy.com/
http://www.1and1.com
http://www.virtualempre.com

But of course there are many more, Make sure you choose a webhost which
supports FTP, which makes it much easier to publish your pages from web builder.

 Page to publish

In this section of the publish window you can select which pages to publish.

 Entire website

Publishes all pages of the website (except the pages which have enabled ‘Don’t
publish this page’ in page properties)

 Select Page Only

Publish the select page, click ‘select’ to specify the page to be published. Note
that you can also select a folder.

 Select page and sub pages


Publish the select page and all of its subpages (if any).
The ‘FILES’ selection specifies which files will be published.

 Publish all files

All files of the selected page(s) will be published

 Publish HTML files only

Select this option if you do not want to upload images or other components along
with the HTML file.

 Publish changed files only

Select this option if you want to publish the files that were changed since the last
time you’ve published your web site.
What to do in case of publishing errors?

 Make sure your ftp address (host), username and password is valid.
 Use ‘Test connection’ to verify the specified data.
 Make sure you the remote folder is correct! Consult the documentation of your
host for this value!
 Use of ‘Explore’ button to browser to the remote folder.
 If the pages don’t show up on your website you’ve probably specified the
wrong remote folder.
 Does your firewall block the FTP connection of WYSIWYG Web Builder?
 Enable ‘Use passive mode for transfers’
 If the transfer takes a long time then you’ve probably used very large images.
More details.
 Increase the connection timeout to 120 seconds or longer (Menu(Menu->Tools-
>Options->publish)
 If you website doesn’t look to be updated, select ‘Refresh’ in your browser
multiple times!
 Enable the publish log in Menu
Menu->Tools->Options->Publish
>Publish and make
mak note of
the error message.
 For a list of all possible error codes and their descriptions go
here : http://support.microsoft.com/default.aspx?scid=kb;EN
http://support.microsoft.com/default.aspx?scid=kb;EN-US;193625
US;193625
 May be there is a temporary problem with your host? Check if you can
connect using a FTP client.
 99.99% of all publishing errors are the result of an invalid configuration,
please verify the specified Data!
Points to Remember:

Exercise Questions
 Q. 1: What do you understand by website and webpage publishing?
 Q. 2: Explain webpage, website and webserver?
 Q. 3: In how many ways you can publish your web pages?
 Q. 4: How many types of files you can publish on webserver?
 Q. 5: State five errors which are commonly occur during publishing of any
website?

Further Readings
 Book-1 Kogent Learning Solutions, “HTML BLACK BOOK,” 4th Edition,
DreamtechPress, 2012
 Book-2 Elisabeth R, Eric F, “Eric f, “Head first HTML and CSS,” 2nd Edition,
O’REILLY ,2013
 Website 1: www.w3schools.com
 Website 2: www.thenewboston.com
 Website 3: www.godaddv.com
 Website 4: www.freeserver.com

You might also like