Html Chapter - 2
<br /> tag (Break Row):-
<body> Hey !,
What’s
going
on
here? </body>
The browser doesn’t recognize formatting, unless we tell it. Otherwise it displays the characters in a steady stream. If we want to start a new line we have to use a line break.
<body> Hey!, <br /> What’s <br /> going <br /> on here? </body>
<br /> basically tells the web browser to start a
new line.
Preformatted
text: Browser doesn’t understand formatting, but if we want to display
text as we type it we use <pre>
</pre> tag.
Example:
Example:
<html>
<body>
<pre>
1
121
12321
1234321
</pre>
</body>
</html>
Headings :-
HTML provides us six level of headings. We use heading tags (<h1> to
<h6>) to make a heading.
EX:-
<h1> This is a heading </h1>
EX:-
<h1> This is a heading </h1>
<h2> This is another heading </h2>
<h3> This is one more heading </h3>
Attributes:
(a) align:- This attribute is used to set alignment of a heading.
<h1 align=”center” > Center Aligned </h1>
Possible values for align attribute are center, left, right.
Attributes:
(a) align:- This attribute is used to set alignment of a heading.
<h1 align=”center” > Center Aligned </h1>
Possible values for align attribute are center, left, right.
Paragraphs:-
Paragraph is a block of text. We can create paragraph with <p></p>
tag.
<body> <p> This is a paragraph </p> </body>
attributes:-
(a). align:- This attribute is used to set alignment of our web page.
<p align=”right”> ……………………</p>
Possible values for align attribute are center, justify, left, right.
Center Tag:- We can center aligned our text with <center> </center> tag.
<center> This is centered </center>
<body> <p> This is a paragraph </p> </body>
attributes:-
(a). align:- This attribute is used to set alignment of our web page.
<p align=”right”> ……………………</p>
Possible values for align attribute are center, justify, left, right.
Center Tag:- We can center aligned our text with <center> </center> tag.
<center> This is centered </center>
Inserting
spaces and symbols:- Browser don’t recognize more than one space. To
insert more than one space we have to insert (non breaking space)
into html code in place of spaces. Similarly to insert other symbols we use
other codes.
symbols and their codes-:
symbols and their codes-:
Code
|
Description
|
|
Non-breaking
space
|
<
|
Less than symbol
(<)
|
>
|
Greater than
symbol (>)
|
&
|
Ampersand
(&)
|
"
|
Quotation mark (
“ )
|
¢
|
Cent sign ( ₵
)
|
£
|
Pound sign ( £
)
|
¤
|
General currency
sign ( ¤ )
|
¥
|
Yen sign ( ¥
)
|
©
|
Copy right sign
( © )
|
®
|
Registered sign
( ® )
|
°
|
Degree sign ( °
)
|
±
|
Plus minus sign
(±)
|
¶
|
Paragraph sing (¶)
|
µ
|
Micro sign (ยต)
|
¼
|
One-quarter ( ¼ )
|
½
|
One-half (½
)
|
¾
|
Three-quarters(¾)
|
Style
Attribute: Most of html tags support style attribute. Style attribute
specifies formatting style for that tag. We can change background-color,
background-image, border, color, font etc. of a tag with style attribute.
Example:
(1). <html><body style="background-color:yellow ; color:red">
Example:
(1). <html><body style="background-color:yellow ; color:red">
This
is my custom page.
This
is my custom page. </body>
(3). <h2 style="background-color:yellow ; border:dashed ; font-size:2cm"> My Heading </h2>
(4). <p style="background-image:url(images/flower.jpg)">
(3). <h2 style="background-color:yellow ; border:dashed ; font-size:2cm"> My Heading </h2>
(4). <p style="background-image:url(images/flower.jpg)">
This
is a paragraph <br />
It
has a background <br />
Isn't
is interesting.
</p>
Properties of style attribute:
Properties of style attribute:
Property name
|
Description
|
background-color
|
To change background
color of the tag. Ex- background-color:red
|
background-image
|
To change
background image of the tag. Ex- background-image : url(path)
|
border
|
To change/set
the border. Possible values- dashed, dotted, double, inset, outset, ridge,
solid etc.
Ex- border :
dashed.
|
border-color
|
To change the
color of border.
|
color
|
To set the color
of text.
|
font
|
To set the font
of text.
|
font-size
|
To change the
font size. We use px(pixel), cm, in(inch) with numeric values as suffix to
set the size.
Ex-
font-size:1in
Font-size:100px
|
background-repeat
|
It is used to
set that background should be repeat or not.
Possible values
are no-repeat, repeat, repeat-x, repeat-y
|
============================**************================================
Hyperlinking:-
We can link one html page to another through anchor (<a> </a> )
tag.
ex: <a href=”path\a.html”> go to a.html </a>
<a href=”http://www.yahoo.com”> yahoo </a>
Attributes:
(1) href:- this attribute specifies page-url (hyper-reference) to be linked.
(2) name:- This attribute specifies name of anchor. It is useful to self referring pages.
Ex: - <html><body>
ex: <a href=”path\a.html”> go to a.html </a>
<a href=”http://www.yahoo.com”> yahoo </a>
Attributes:
(1) href:- this attribute specifies page-url (hyper-reference) to be linked.
(2) name:- This attribute specifies name of anchor. It is useful to self referring pages.
Ex: - <html><body>
<a name="top"> This is top </a>
<br /><br /><br /><br /><br
/><br />………………………….<br />
<a href="#top" > back to top </a>
</body></html>
Images :-
We can add images in a web page with <img /> tag.
Ex - <img src=”images\flower.jpg” height=”200” width=”200” />
Ex - <img src=”images\flower.jpg” height=”200” width=”200” />
Attributes:-
(a) src :- This attribute specifies path of the image file to be displayed.
(b) height:- Specify height of the image.
(c) width :- specify width of the image.
(d) alt :- Specifies a text, which will be displayed when user point the image with mouse as a tool tip and if image cannot be displayed this text will displayed in place of image.
(a) src :- This attribute specifies path of the image file to be displayed.
(b) height:- Specify height of the image.
(c) width :- specify width of the image.
(d) alt :- Specifies a text, which will be displayed when user point the image with mouse as a tool tip and if image cannot be displayed this text will displayed in place of image.
(e) border:
specifies border width of the image.
EX: <img src="images/flower.jpg" height="300" width="300" border="2" alt="flower" />
(f)dynsrc :- Specify the path of video file that will run when the page is displayed.
EX: <img dynsrc="images/bailey.mpg" height="300" width="300" border="2" alt="movie" />
(g) usemap:- this attribute is used to specify map for image.
<img src=”path” width=”100” height=”100” usemap=”#mapname” />
EX: <img src="images/flower.jpg" height="300" width="300" border="2" alt="flower" />
(f)dynsrc :- Specify the path of video file that will run when the page is displayed.
EX: <img dynsrc="images/bailey.mpg" height="300" width="300" border="2" alt="movie" />
(g) usemap:- this attribute is used to specify map for image.
<img src=”path” width=”100” height=”100” usemap=”#mapname” />
Image Maps:
Image map is an active region on an image that is linked to other files or
locations. <map> </map>
and <area /> tags are used to
create image maps.
<map></map> tag:- <map> </map> tag is used to specify hyperlink regions for an image. With this tag we can link an image to different locations.
Attributes:
name: This attribute specifies name for the map.
<area /> tag: <area /> tag is used to specify linked areas on an image.
Attributes of <area /> tag:
(a) shape:- This attribute specifies shape of linked region. Possible values for this attribute is rect, circle, poly.
(b) cords:- This attribute specifies coordinates for linked region.
<map></map> tag:- <map> </map> tag is used to specify hyperlink regions for an image. With this tag we can link an image to different locations.
Attributes:
name: This attribute specifies name for the map.
<area /> tag: <area /> tag is used to specify linked areas on an image.
Attributes of <area /> tag:
(a) shape:- This attribute specifies shape of linked region. Possible values for this attribute is rect, circle, poly.
(b) cords:- This attribute specifies coordinates for linked region.
Shape
|
Cords
|
rect
|
x1,y1,x2,y2 { (x1,y1) upper left corner, (x2,y2) lower
right corner}
|
circle
|
x,y, radius
|
poly
|
x1,y1,x2,y2,x3,y3,x4,y4,………
|
(d) href:-
Hyper-reference to the linked file.
(e)alt:- Specifies a text, which will be displayed when user point the linked region with mouse as a tool tip.
Example:
<html><body>
(e)alt:- Specifies a text, which will be displayed when user point the linked region with mouse as a tool tip.
Example:
<html><body>
<img src="images/flower.jpg"
alt="flower" width="300" height="300"
border="2" usemap="#MyMap" />
<map name="MyMap">
<area
shape="rect" coords="50,50,150,150" href="a.html"
alt="go to a.html" />
<area
shape="circle" coords="80,250,44" href="b.html"
alt="go to b.html" />
<area
shape="poly"
coords="200,160,260,120,290,170,270,225,220,230"
href="c.html" alt="go to c.html" />
</map>
No comments:
Post a Comment