Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
13 views

html class notes

Uploaded by

vinisha wagh
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views

html class notes

Uploaded by

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

Image Tag: To insert in image into a Web Page, use the <IMG> element and set the

SRC attribute of the element equal to the URL(Uniform Resource Locator) of the image. The
URL may be either an absolute URL or a relative URL. Most likely, the image element will use a
relative URL to an image found locally. The SRC attribute must be included. Otherwise, browser
that supports images may display a placeholder or broken image icon and it will display a Text
specified in ALT attribute of image.

<img src=”path of image with file extension” alt=”Alternate Text”>


for example: Relative path example.
<img src=”Images/IIPS.jpg” alt = “Image of IIPS Department”>
Absolute path Example.
<img src=”http://www.iips.edu.in/Images/IIPS.jpg” alt = “Image of IIPS
Department”>
Some other attributes of <IMG> tag are as follows.
* Align Property: Possible Values
Top –Text is align to top of image
Middle – Text is align to middle of image
Bottom – Text is align to bottom of image
Left – Image is align to left side and text is flow around to Right side of image
Right- Image is align to right side and text is flow around to Left side of image

* Title Property
For Tooltip on image.
* Border Property:
Border =”3” it creates the border around the image with specified pixels.

* HSpace Property: Horizontal Space on both side of image (Left and Right)
HSpace = “50”

* VSpace Property: Vertical Space on both side of image (Top and Bottom)
HSpace = “50”

*Height and width Property: Set the Height and width of image in browser window.

Image Map -: An image map is an image that contains many hot spots that may result in a
different URL being loading depending on where the user clicks.

1) Client Side Image Map:-


In Client Side image map we put the map coding in the <head> or <body> section of
html file. So in client side image map there is only one file for map information and html
coding.
a) A sever doesn’t need to be visited to determine the destination, so links are
resolved faster.
b) Destination URL can be shown as the user’s pointer moves over the image.
Disadvantage:
a) Web page maintenance is difficult, if the same map information is used by many
web pages.

2) Server-side Image Map-:


In Server-Side image map we put the map coding in separate file, whose file extension
is .map. and make reference of this map file in html file. So in server side image map
there are 2 separate file, one for map information and other for html code, where <img>
tag uses the map file information.
a) The user clicks somewhere within the image.
b) The browser sends a request to the web server, asking for the URL of the
document associated with the area clicked. The coordinates clicked are sent to a
program on the server, called image map, which decodes the information.
c) After consulting a file that shows which coordinates map to which URL the server
sends back the information requested.
d) After receiving the response, the browser requests the new URL.
Disadvantage:
a) Users really don’t have a sense, URL-wise, where a particular click will take
them. All that users see as they run a mouse over image is a set of coordinates
showing the current x,y value
b) Server must be consulted to go to the next page. This will slow the process.

Client Side Image Map


<map name ="testMap">
<area shape="rect" coords="0,0,20,20" href=”http://www.yahoo.com”
title=”for yahoo site”>
<area shape="rect" coords="20,0,40,20" href=”http://www.google.com”
title=”for google site”>
<area shape="default" nohref>

</map>

<img src="loading.gif" usemap="#testMap">

Area Tag Attribute


Shape Values:
Rect –for rectangle left-x, top-y, right-x, bottom-y Coords=”0,0,100,50”
Circle- for circle center-x, center-y, radius coords=”0,0,10”
Poly- for polygon- x1,y1,x2,y2,x3,y3…..
Default- remaining area of image (coords not required.)

Href = URL (Path of the web page you want open)


Target = ”framename/_blank”
NoHREF = for no destination.

Server Side Image Map


This code is in shape.map file, which is stored in web server
where, the all other html and image files are stored.
<map name ="testMap">
<area shape="rect" coords="0,0,20,20" href=”http://www.yahoo.com” title=”for yahoo
site”>
<area shape="rect" coords="20,0,40,20" href=”http://www.google.com” title=”for
google site”>
<area shape="default" nohref>
</map>

<a href=”shape.map”>
<img src="loading.gif" ismap>
</a>
Table
Tables were initially intended as a means of displaying tabular data in a web page. It contains
row and column of information.

<table cellpadding=”50” cellspacing=”50” align="right"


border="2" width="70%">
<caption align="bottom"> Department List</caption>
<tr>
<th bgcolor="green">S.No.</th>
<th bgcolor="green">Department Name </th>
</tr>
<tr>
<td>1</td>
<td>IIPS </td>
</tr>
<tr>
<td>2</td>
<td>IMS </td>
</tr>
</table>

<td> Attribute
valign=top, middle, bottom (vertical alignment of text/image in a particular cell)
align =left, right, center, justify (horizontal alignment of text/image in a particular cell)
bgcolor= background color of Cell
width= width of column in pixel or %

Cell spacing and cell padding


It’s possible to change the amount of padding within a table’s cells, as well as the spacing
between all the cells in a table. This is done with the cellpadding and cellspacing attributes,
respectively. In the rather extreme example that follows, cellpadding is set to 20, cellspacing to
40, and border to 5, so that each can be differentiated with ease (see the subsequent screenshot).
As you can see, cellspacing not only affects the spacing between the cells, but also the distance
between the cells and the table’s edges.

<table cellpadding="20" cellspacing="40" border="5">


<tr><td>Cell one</td><td>Cell two</td></tr>
<tr><td>Cell three</td><td>Cell four</td></tr>
</table>
Cellspacing

cellpadding

Spanning rows and cells


It’s sometimes necessary for data to span multiple rows or columns. This is achieved via the
rowspan and colspan attributes, respectively. In the following table, the first row has three cells.
However, in the second row, the first cell spans two rows and the second cell spans two columns.
This means the second row lacks a third cell, and the third row also only has two cells (whose
contents align with the second and third cells of the top row). Rowspan and Colspan : Table
cells can span across more than one column or row. The attributes COLSPAN ("how many
across") and ROWSPAN ("how many down") indicate how many columns or rows a cell should
take up.

<table border="1" cellpadding="2">


<tr>
<td>A cell</td>
<td>Another cell</td>
<td>Yet another cell!</td>
</tr>
<tr>
<td rowspan="2">A cell that spans two rows</td>
<td colspan="2">A cell that spans two columns</td>
</tr>
<tr>
<td>Another cell</td>
<td>The last cell</td>
</tr>
</table>
Frames
With frames, you can display more than one HTML document in the same browser window.
Each HTML document is called a frame, and each frame is independent of the others. But in
Frame, there is no <body> tag. It will show only other html page inside it. If we want to create a
page that has, its own some information to display with other web page on it, then we have to use
iFrame instead. Frame only provide a place where we can display other web pages.

There is no need for <body>


<html>
<head>
<title>Frame Example</title>
</head>
<frameset rows="20%,60%,20%" frameborder ="1" >
<frame src=”header.html”>
<frameset cols=”20%,80%”>
<frame src="menu.html">
<frame name="target" src=”default.html”>
</frameset>
<frame src=”footer.html”>
<noframes>
Your browser does not support frame.
</noframes>
</frameset>
</html>
Attributes of <frameset> tag are as follows:

Attribute Value Description


cols % Specifies the number and size of columns in a frameset. Value
* could be in % or the remaining area is in *. i.e. cols=”30%,*”
rows % Specifies the number and size of rows in a frameset
*
frameborder Number/pixel Specifies the frame border width in pixels.

Attributes of <frame> tag are as follows:

Attribute Value Description


src Path of the Specifies the path of the web page which you want to show in this
Web Page particular frame.
name Any String Specifies the name of the name of this frame.
Value

IFrame
The iframe (Inline Frame) creates a "window" in a web page that can display a second
document within its border.
Here's the code for a very simple iframe:

<iframe src="path of file" width= “100%” height= “130px” name="FrameName">


Yours Browser doesn’t support iFrame.
</iframe>
The "src" is the name of the page you want displayed inside the iframe. The width and height can
be set to whatever size you need.
The name attribute is so you can target links to load into the iframe.
Lastly, where it says " Yours Browser doesn’t support iFrame " is where you
place content for browsers that do not support the iframe. They'll see whatever content you place
there. Often, a webmaster just links to the content he or she is trying to display in the iframe.
Syntax <iframe>...</iframe>
Attribute Specifications to Adjust Appearance and Behavior
 src="(URL of initial iframe content)"
 name="(name of frame, required for targeting)"
 width=(frame width, % or pixels)
 height=(frame height, % or pixels)
 frameborder=[ 1 | 0 ] [Yes/No](frame border, default is 1)
 scrolling=[ yes | no | auto ] (ability to scroll)

An example is shown here:

<iframe name="inlineframe" src="float.html" frameborder="0" scrolling="auto"


width="500" height="180" marginwidth="5" marginheight="5" ></iframe>

Another one
<table border="1" width="100%">
<tr>
<td width="33%"><a href="http://www.yahoo.com" target="window">Yahoo</a></td>
<td width="33%"><a href="http://www.google.com" target="window">Google</a></td>
<td width="34%"><a href="http://www.microsoft.com"
target="window">Microsoft</a></td>
</tr>
</table>
<iframe name="window" width="1000" height="200" scrolling="auto"></iframe>

<Marquee> Tag
You can create a scrolling marquee (i.e. scrolling text or scrolling images or any content) by
using the <marquee> tag. You can make the text/images scroll from right to left, left to right, top
to bottom, or bottom to top - it's your choice!

<marquee direction=”left” behavior=”scroll” scrolldelay=”100” >IIPS</marquee>

DIRECTION = LEFT | RIGHT|UP


BEHAVIOR = SCROLL | SLIDE | ALTERNATE
ScrollDelay =”1000” in millisecond
ScrollAmount=”5” -> No of Pixels it moves the content in particular ScrollDelay.

You might also like