Scribd
Upload
3K views

Chapter 1 HTML Webpublishing / Notes On Webpublishing and HTML Class 12 IT

Frames allow dividing the screen into multiple independent windows. The <frameset> tag is used to create frames, defining how to divide the window into rows and columns. The <frame> tag is used to create individual frames and link content pages. Forms are used to accept user input data and submit it to a server. Common form elements include text fields, checkboxes, radio buttons, dropdown lists, and textareas. Image maps allow breaking an image into clickable regions linked to different URLs.

Uploaded by

PranavPillai
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3K views

Chapter 1 HTML Webpublishing / Notes On Webpublishing and HTML Class 12 IT

Frames allow dividing the screen into multiple independent windows. The <frameset> tag is used to create frames, defining how to divide the window into rows and columns. The <frame> tag is used to create individual frames and link content pages. Forms are used to accept user input data and submit it to a server. Common form elements include text fields, checkboxes, radio buttons, dropdown lists, and textareas. Image maps allow breaking an image into clickable regions linked to different URLs.

Uploaded by

PranavPillai
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 19

Chapter 1

Web Publishing
Introduction
Frame
Frames can help to display more than one window at a same time.
Frame divide the screen in to separate window s are totally independent of each other.
<Frameset> tag to create a frame this tag is written in place of <body> tag. This tag is closed
with </frameset> tag. The <frameset> tag defines how to divide the window into frames.
Attributes of <frameset> tag1. Rows/cols- sets the number of rows or columns required to create a frame. It indicate the
amount of screen area each row/column, which will occupy.
a. The total area of all the rows and columns must be either defined in terms of
percentage. E.g. <20%,30%,50%> means first frame 20% of total size and third
frame 50% of total size.
OR
b. Relative value by using (*) sign e.g. 50%, * means first frame 50% of total size
and * means the remaining second.
OR
c. In terms of Pixels e.g. <50, *> means 50 pixels to the first frame and the
remaining space to the second frame.
<Frame> tag- is used to create frame in a frameset.
Attributes1. Src- the URL of the document to be displayed in the frame.
2. Name- it is used to assign the name to the frame.
3. Border- shows the border around the frame specifies in pixels.
4. Margin height/width- specifies height (top and bottom margin) and width (left and right
margin) in pixels.
5. Scrolling- yes scroll bars
No- no scroll bars
Auto- let the browser choose
6. No resize- prevents the user from resizing the frame window.
Programs- 1)
<html><head>

This is

This is

Frame1.html

Frame2.html

<title> vertical frames </title> </head>


<frameset cols=50, 50>
<frame src=frame1.html>
<frame src=frame2.html>
</frameset></html>
2)

This is

<html><head>

Frame1.html

<title> Horizontal frames

</title> </head>

<frameset rows=50, 50>


<frame

This is

src=frame1.html>

<frame

Frame2.html

src=frame2.html>

</frameset>
</html>
3)
<html><head>
<title> frames </title> </head>

This is

This is

Frame1.html

Frame2.html

<frameset rows=60, 40>

This is

<frameset cols=50, 50>

Frame3.html

<frame src=frame1.html>
<frame src=frame2.html>
</frameset>
<frame src=frame3.html>
Top

</frameset></html>
4)

Left

Right

<html>

Bottom

<head>
<title> frames </title> </head>
<frameset rows=20,60,20>
<frame src=Top.html> </frameset>
<frameset cols=50, 50>
<frame src=Left.html>
<frame src=Right.html>
</frameset>
<frame src=Bottom.html>
</frameset>
</html>
5)
<html>

Page1

Page2

Page3

Page4

<head>
<title> frames </title> </head>
<frameset cols=50, 50>
<frame src=Page1.html>
<frame src=Page2.html>
</frameset>
<frameset rows=50, 50>
<frame src=Page3.html>
<frame src=Page4.html>
</frameset></html>
Linking FrameFor linking name and target attributes are used. In linking there is links on the left side of
browser and content is displayed on the right side while clicking on links.

StepsFirst create a frameset with 2 frames. Give name to the frames using the name attribute.
<frame src=left.html
<frame src=right.html name=abc>
The hyperlink when clicked should be displayed in the right frame which is target name.
<a href=software.html target=abc>Software</a>
<a href=hardware.html target=abc>Hardware</a>
<html>
<head>
<title>linking frames

Left page

<frameset cols=40, 60>

Software

<frame src=left.html>

Hardware

Right page

<frame src=right.html

</title> </head>

name=abc>

</frameset></html>
Left Page
<html>
<head>
<title> left </title> </head>
<body>
<a href =software.html target=abc>Software</a>
<a href=hardware.html target=abc>Hardware</a>
</body></html>
There are some target names that will open the link in different frames.
Target=_self
Target=_blank
Target=_top

This will open the page in the same window as link


This will open the page in new window.
This will open the page in top frame.

Target=_parent

This will open the page in the main frame.

Inline or Floating frame<iframe> tag is used to create inline frame. It displays frame along with the text and graphics on
html page. </iframe> is closing tag. It appears within <body> tag.
Attributes1. Src= the URL of the page to be displayed in the inline frame.
2. Height/ width- Sets
inline frame.
3. Name= used to
inline frame.

Inline frame

the height/width of the


assign the name to the

Text1.html

4. Border= displays the


frame.

border around the inline

5. Scrolling- yes scroll

bars

No- no scroll bars


Auto- let the browser choose
<html><head>
<title>inline frame </title> </head>
<body>
<p>Inline frame </p><br>
<iframe src=Text1.html height=100 width=150></iframe>
</body></html>
Image Mapping
Image map are single graphic image that can be used for multiple links.
I.e. image map allows taking a single image and breaking it down into multiple sections of
varying shape. Each of those sections than can be linked to different URLs or files. These
regions are called hotspot or image hyperlinks.
Image maps are of two types-

1. Client side image maps- they are executed on client machine, this processing is done in the
browser which increases the speed. And they are not dependant on server. To mention that
image map in an image, use USEMAP attribute of the <img>.
a. <Map> tag- used to define hotspot in an image. It has name attribute.
b. <Area> tag-used to define the shape on map. Attributes arei. Shape- specifies as rectangle, circle and polygon.
ii. Cords- specifies coordinates for rectangle, circle and polygon.
iii. Href- specifies path of html file or URL of website.
iv. Alt- specifies alternative text given to hotspot.
Program (Practical No. 3)
<html>
<head>
<title>client-side image mapping</title>
</head>
<body>
<img src="Sunset.jpg" usemap="#mymap" border="3"></img>
<map name="mymap">
<area shape="circle" coords="577,133,110 " href="http://www.yahoo.com"
alt="yahoo"></area>
<area shape="rectangle" coords="64,52,256,153" href="http://www.google.com"
alt="google"></area>
<area shape="polygon" coords="248,262,248,347,334,395,421,348,422,270,314,216"
href="http://www.rediff.com" alt="rediff"></area>
</map>
</body></html>
2. Server side image maps- in server side image mapping browser with server interprets data.
ISMAP is used in server side image mapping with <img> tag.
Create an external text file with the extension (.map) place this file in the folder which contains
image.
<html><body>

<a href=text.map>
<img src=Sunset.jpg ISMAP></img>
</a></body><html>
Text.map
circle 577,133,110 http://www.yahoo.com
rectangle 64,52,256,153 http://www.google.com
polygon 248,262,248,347,334,395,421,348,422,270,314,216 http://www.rediff.com
Combining client and server side image mapsIt contains elements of both client and server side image maps.
<html><body>
<a href=text.map>
<img src=Sunset.jpg ISMAP></img></a>
<map name="mymap">
<area shape="circle" coords="577,133,110 " href=http://www.yahoo.com>
<area shape="rectangle" coords="64,52,256,153" href=http://www.google.com>
<area shape="polygon" coords="248,262,248,347,334,395,421,348
href="http://www.rediff.com" >
</map></body><html>
Text.map
Circle 577,133,110 http://www.yahoo.com
Rectangle 64, 52,256,153 http://www.google.com
Polygon 248,262,248,347,334,395,421,348,422,270,314,216 http://www.rediff.com
Forms
Forms are used to accept the data from user and send it for processing.
<Form> ..</form>tag is used to insert form on the web page.

Attributes-

1. Method-is used to send the data to the server for processing. It has two values GET or POST.
The GET is the default method.
2. Action-this attribute is used to specify the URL of the server where form information is to be
submitted.
3. Name- this attribute is used to assign the name to form.
The <input> tag
The <input> tag allows users to input data to your web server.
Attributes of <input>tag1.
2.
3.
4.
5.
6.

Type- it defines the type of input field such as text, password, checkbox, radio button,
submit, reset etc.
Name- Specifies the name of an <input> element.
Value-Specifies the value of an <input> element.
Size- it defines the maximum characters that can be entered in to text type.
Src-Specifies the URL of an image.
Maxlength- it defines the maximum characters that can be entered in to text or password
type input field.

1. Textbox- used to create text feild.


<input type="text"
name-

name="firstname" size="15" > output- first

2. Password- used to create password text field.


<input type="password"

*****

name="pswd" size="10" > Output-Password-

3. Radio-used to create set of radio buttons.


<input type="radio" name="Gender value="Male" checked>Male Output-

4. Checkbox- used for creating set of checkboxes.


<input type="checkbox" name="Subject" value="IT">IT Output5. Submit-used to sends the data of form to the server.
<input type="submit value="submit" > Output-

submit

6. Reset- used to clear contents of form.


<input type="reset value="reset" > Output-

reset

7. Hidden- It indicates a form field that does not appear visibly in the document.

submit

<input type="hidden name="Hidden1" value="hiddenvalue1">


The <select> tagThe <select> tag is used to create a drop-down list.
Attributes1. Multiple-Specifies that multiple options can be selected at once.
2. Size-Defines the number of visible options in a drop-down list.
3. Name-Defines a name for the drop-down list.
4. Selected- It will define default selection within selection list.
The <Option> tagThe <option> tags inside the <select> tag define the available options in the list.
e.g. <select name="state" size=4>
<Option value="1">Maharashtra
<Option value="2">Goa
<Option value="3">Gujrat
<Option value="4">Karnataka
</select>
The <textarea> TagThe <textarea> tag used to create multi-line text input.
The size of a text area is specified by the cols and rows attributes.
Attributes1.
2.

name- Specifies the name for a text area


Rows and cols- specify how many columns and rows you want in a text area.

Syntax<textarea name="add" rows=5 cols=10>


Program- (Practical No-1 Page-3)
<html><head>

<title>Feedback Form</title></head>
<body bgcolor="green">
<h1>Feedback Form</h1>
<form name="Registration form" method="Post" action=" ">
Name:<input type="text" Name="First name" maxlength="30" size="15"><br>
Address:<textarea name="Add" Rows="4" cols="15"></textarea> <br>
State:<select name="state" size="0">
<option value="0"> Maharashtra
<option value="1"> Delhi
<option value="2"> Goa
<option value="3"> Gujrat
</select><br>
Gender:<Input type="Radio" name="Gender" value="Male"> Male
<Input type="Radio" name="Gender" value="Female" checked> Female<br>
Your interest:<Input type="Checkbox" name="Interest" value="German"> German
<Input type="Checkbox" name="Interest" value="French"> French
<Input type="Checkbox" name="Interest" value="I.T."checked> I.T.<br>
Submit:<input type="submit" value="submit">
Reset:<input type="reset" value="reset"></form>
</body></html>
Inserting Sound and VideoAudio-An audio file format is a file format for storing digital audio data on a computer system
User can insert sound or video file on mouse click or as background.
File formats for sound files1).wav (wave)-It is standard sound format developed by Microsoft.

2) .ra (real) - It is real audio file format.


3) .mp3-(moving picture experts group layer3)
4) .midi- (musical instrument digital interface)
5) au (Audio)- is a sun Microsystems format.
6) AIFF (Audio interchange file format) - developed apple.
Adding sound to web pages using <bgsound> and <embed> tag1. <bgsound> tag-This tag is used to specify a backrground sound for a web page.This tag is for
Internet Explorer documents only.(control is not in users hands)
Attributes1) Src-Specifies the location of the sound file.
2) Loop-The loop attribute is used to define how many times the sound will repeat itself. Setting
loop to "infinite" or "-1" will cause the sound to repeat continuously.
<bgsound src="saregama.mp3" loop="-1">
2. <embed> tag-<embed> tag is used for adding different audio as well as video formats on the
web page with control.
Attributes1) src- Specifies the location of the audio/ video file.
2) Height and width-Specifies the height and width of the embedded file.
3) Controller=true/false specifies whether to show the media controller bar or not.
5) Hidden= true/false -causes the display box to be entirely invisible. values are true/false.
6) autostart- It allows the sound to begin playing automatically when page is loaded. Values are
true/ false. (Default is false)

Program- (practical No. 5)


AUDIO WITH CONTROL

<html><head>
<title>AUDIO WITH CONTROL</title></head>
<body>
<embed src="chord.wav" loop="true" width="100" height="100" autoplay="true"><br>
<img src="J0300520.gif" width="100" height="100">
</img></embed>
</body></html>
AUDIO WITHOUT CONTROL
<html><head>
<title>AUDIO WITHOUT CONTROL</title></head>
<body>
<bgsound src="chord.wav" loop="true" width="100" height="100" autoplay="true"><br>
<img src="J0300520.gif" width="100" height="100">
</img></bgsound>
</body></html>
Adding video to web pages using <dynsrc> tag1) DYNSRC (Dynamic Source) attribute helps to add video file on webpage without control.
<img> tag is used to add image on the web page.
e. g. <img dynsrc="clock.avi">
2) Start=FILEOPEN, which is the default value, makes the movie start when the file is opened
or start=MOUSEOVER starts the movie start when you put your mouse over it
2) Loop=LOOP states how many times the movie should repeat itself.

Formats- 1) .avi- (Audio Video Interleave)


2) .swf (shock wave flash)
3) .mov (movie)

4) .mpeg (moving picture experts group)


5) .wmv (windows media video
Program- (Practical No. 6)
video with control
<html>
<head><title>video with control</title>
</head><body>
<embed src="clock.avi" loop="3" height="200" width="100" >
</embed></body></html>
video without control
<html>
<head><title>video without control</title></head>
<body>
<img dynsrc="clock.avi" height="100" width="150" loop="3" start="mouseover">
</img></body></html>
Creation of web pages using Indian Language (Unicode)-Unicode is a standard character set
encoding developed and maintained by the Unicode consortium. Unicode, also known as UTF-8
(Unicode Transformation Format-8) or the Universal Alphabet. Unicode is unique code for
each character. Using this we can easily type in any regional language.
Cross Browser Testing- Testing your website on different browser is known as Cross Browser
Testing. Once a web page is created the page will be tested for validation and accessibility on
different browser types versions (6.0, 8.0), and platforms. (Windows, Linux etc). In every
browser and platform the website will look and work differently.The different browser supports
different tag i.e the tag supported by one browser may or may not be supported by another
browser. Two main browsers i.e. Internet Explorer and Netscape Navigator having different
functionality. Also other browsers i.e.Opera, Mozilla, Firefox works differently.
e. g. <comment>, <bgsound> and <marquee> tag works only on Internet explorer
Program- (Practical No. 8)
<html>

<head>

<title>cross browser testing</title>

</head>

<body>
<h4><marquee loop="2" direction="right">input devices</h4></marquee></br>
<table border="2" bordercolordark="red" bordercolorlight="green">
<tr>

<th>name</th>
<th>price</th>

<tr>

<td>keyboard</td>
<td>250</td>

<tr>

</tr>

</tr>

<td>mouse</td>
<td>400</td>

</tr>

</table>
<blink>buy</blink>
<img src="abc.jpg" alt="broken image" height=100 width=75></img>
</body>

</html>

Cascading Style Sheet


CSS stands for cascading style sheet. Css is a simple mechanism for adding styles to the web
documents. Using css we can change the appearance and layout of the page. Style can change
Font name, style, color, align, background, margins etc.
SyntaxSelector {property: value}
H1 {color: blue; font-size: 12}
The selector is the html element/tag which you want to define. Property and value separated by
colon (:). Each property has a value. A CSS declaration always ends with a semicolon (;).
CSS can be inline, internal and external.
1. Inline Style Sheet-STYLE attribute may be applied to any tag.
<body>
<p style=font-family: Ariel; font-size: 7pt; color: pink>Welcome </p>

</body>
An inline style affects only the element for which the style is defined. i.e. <p> tag
2. Internal Style Sheet-internal style sheet should be used only when single document has
unique style. To define CSS into html code <style> tag is used within <head> tag.
<html>
<head>
<title> CSS</title>
<style>
Body{background:yellow}
P{colr:blue;align:center}
</style></head>
<body>
<p>Ness Wadia College </p>
</body></html>
3. External Style Sheet-external style sheet is mainly used when the style is applied to many
pages. In this type styles are stored in a separate file with a .css extension. Link the file
with the html document using <link> tag.
<Link> tag- is used to link style sheet to an html document.
Attributes of <link> tag1. REL- this attribute is used to define relationship between the linked file and the html
document.
2. TYPE- this attribute is used to specify a media type= text/css for a CSS
3. HREF- specifies the css file name to be linked.
Steps1. First create file text.css external file that stores style definitions.
2. The second file, style.html, is html document that uses the style definitions stored in the
file text.css.
Text.css
H1 {color: blue; align: center; background: yellow}
P {font-family: Ariel; font-size: 7pt; color: pink} (save this file with text.css)
Style.html
<html><head>
<title>external css </title>
<link rel=stylesheet type=text/css href=text.css></head>

<body>
<h1> Welcome</h1>
<p>Ness Wadia College </p>
</body></html>
Classes and IDsClasses- are a very effective method of applying styles to the web documents. With the class
selector you can define different styles for the same type of HTML tag or element. A class
always starts with a (.) Dot which is followed by class name.
<html>
<head><title>Classes</title>
<Style>
.ABC {color: lime; background: aqua; font-family: comic sans ms}
</style> </head>
<body>
<p class=ABC>Ness Wadia College</p>
<h1 class=ABC>Welcome </h1>
</body>
In the Above example, .ABC is a class name. <h1> and <p> share the same styles defined in the
class .ABC.
The id attributeThe id attribute is used to specify a unique style for the element. The functionality of both class
and ID attributes is same.

The id attribute uses the HTML element, and is defined as#" followed by name.
E.g. #S12 {font-size: 18pt}
<p ID=S12> Welcome to web designing</p>
Each ID must have a unique value. The value must be an initial letter followed by letters/digits.

Letters may be A to Z, a to z and digits.


Contexual selectorA contextual selector selects a HTML tag that is nested inside another specified tag. Contextual
selectors are specified with two tags separated with a space like (outer tag inner tag).
e.g. P{font-size:20pt}
All elements within <p> will get font size 20pt.
b {font-size: 30pt}
All elements within <b> will get font size 30pt.
P b {font-size: 30pt}
Now selector will search a <b> inside <p>tag and such type of selector is called contextual
selector.
Group SelectorWhen several selectors share the same declarations, they may be grouped into a commaseparated list.
ExampleIn this example, we condense three rules with identical declarations into one. Thus,
h1 {font-family: Ariel}
h2 {font-family: Ariel}
h3 {font-family: Ariel}
is equivalent to:
h1, h2, h3 {font-family: Ariel}
In above example the h1, h2, h3 tags are having common style and hence declared as group
selector.
Positioning using CSSUsing CSS positioning we can set exact position of an element on the web page.
There are two types of positioning-

1) Absolute-An absolute positioning defines the exact pixel value where the specified HTML
element will appear. Values are left, right, top, and bottom.
Example
<Style>
h2 {position: absolute; left: 100px; top: 150px ;}
</style>
2) Relative Positioning-it is the distance from previous element of the web page. A relative
positioned element is positioned relative to its normal position.
Example
<style>
h2 {position: relative; left:-20px}
</style>
3D LayersThe layer is created by assigning the position attribute to the style. The position can be either
absolute or relative. Z-index is a property that is used to specify layer. Z-index has numeric value
start from 1. Z-index=1 means an object is placed first on the web page.
e.g. <img src=sunset.jpg height=100 width=100 style=position: absolute; top: 50px; left:
64px></img>
<img src=Blue hills.jpg height=100 width=100 style=position: absolute; top: 50px; left:
60px></img>
In the above example first image is covered by the second image. But now user can change this
effect using z-index property.
<img src=sunset.jpg height=100 width=100 style=position: absolute; top: 50px; left: 64px; zindex=2></img>
<img src=Blue hills.jpg height=100 width=100style=position: absolute; top: 50px; left: 60px;
z-index=1></img>
Above example shows overlapping of second image on first image.
Letter SpacingThe letter spacing property defines an amount of space between characters. The value must be in
the length format.

<html><head><title> Letter Spacing</title></head>


File Edit view
<body><p> <b> Ness
Address:
</b> <br>
<div style=font-size:
30px>

Ness Wadia College


W e l c o m

wadia college </p>

30pt; Letter-spacing:

Welcome</div>
</body></html>
Text-alignThe text align property aligns the text in an element. The possible values are-left, right, centre
and justify.
<div style=font-size: 30pt; text-align: center>Welcome</div>
Text-DecorationThe text decoration property sets effect to the text such as blink, line-through, over line,
underline or no line.
e.g. <div style=font-size: 30pt; text-decoration: underline>Text decoration</div>
Web ServerAfter creation of web pages, it needs to be transferred to server; we can access these web pages
through the internet.
To avoid cost and space related some problems we can create our own web server.
Various web servers are IIS (Internet Information Server), PWS (Personal Web Server), UNIX,
apache etc.

You might also like