PHP, MySql,Javascript , Jquery ,HTML,CSS,Android, iPhone , Drupal: Html Chapter

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:

<html>

<body>

<pre>

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>

<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.

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>

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-:

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">

This is my custom page.

</body></html>

(2). <body style="font:'Times New Roman' ; font-size:250px">

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)">

This is a paragraph <br />

It has a background <br />

Isn't is interesting.

</p>

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>

</body></html>

Images :-We can add images in a web page with <img /> tag.
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.

(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” />

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.

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>

</map>

</body></html>

Previous Chapter

Next Chapter

PHP, MySql,Javascript , Jquery ,HTML,CSS,Android, iPhone , Drupal

Pages

Thursday 26 December 2013

Html Chapter - 2

Html Chapter - 2

No comments:

Post a Comment