Docstoc

Practical no (DOC)

Document Sample
Practical no (DOC) Powered By Docstoc
					Roll no:10ce64                                                                        practical no:3
Date:


                                        Practical no:3

                 Aim: To study Html Font, Image and link
                                                 Tags:

       1. FONT<FONT>:

         Description: The <font> tag specifies the font face, font size and font color of the text.
         The <font> tag is used to add style, size, and color to the text on your site. Use the size,
         color, and face attributes to costimize your fonts. Use a <basefont> tag to set all of your
         text to the same size, face, and color.

         ATTRIBUTES:
         ATTRIBUTE            VALUE                        DESCRIPTION
         Face                 List of font names           Defines the font of the text in the font
                                                           element.
         Size                 A number from 1 to 7.        Defines the size of the text in the font
                              If basefont is specified     element.
                              you can specifiy a
                              number from -6 ti 6.
         Color                Rgb(x,x,x)                   Defines the color of the text in the
                              #vvvvvv                      font element.
                              Colorname

         Example:

                 <HTML>
                      <HEAD>
                           <TITLE>FONT TAG</TITLE>
                      </HEAD>
                      <BODY>
                           <CENTER>
                           <FONT SIZE=7 COLOR=red>
                           Tapan
                           </FONT>
                           </CENTER>
                      </BODY>
                 </HTML>


Ip-1                                                                                              page:1
Roll no:10ce64                                                                        practical no:3
Date:

          OUTPUT            Tapan

       2. BASEFONT <BASEFONT>

       Description: With the basefont tag you will be able to set the default font for your web page.
       We highly recommend specifying a basefont if you plan on using any font with HTML.
       Below is the correct way to set your basefont

                  The attributes are Basefont is same as <font> tag.

       3. IMAGE <IMG>:

          Description: Image are a staple of any web designer. Use <IMG> tag to place your
          image on the page.
                   The <IMG> tag is empty tag, which means that it contains attributes only it has
          no closing tag.
          ATTRIBUTES:
          Attributes          Values                       Description
          Scr                 URL of the image             The URL of the image to display
          Alt                 Text                         Defines a sort description of the image
          Align               Top,Bottom,                  Specifies how to align the image
                              Middle,Left,Right            according to surrounding text.
          Border              Pixels                       Defines a border around an image.
          Height              Pixels, %                    Defines the height of the image
          Hspace              Pixels                       Defines white space on the left and right
                                                           side of the image.
          Vspace              Pixels                       Defines white space on the top and
                                                           bottom side of the image.
          Width               Pixels,%                     Sets the width of an image.
                   The alt attribute is used to define an “alternative text” for an image. The value of
          the alt attribute is an author-define text. Which display if the image could not display due
          to some reasons.

          Example:
               <HTML>
                    <HEAD>
                         <TITLE>IMAGE TAG</TITLE>
                    </HEAD>
                    <BODY>
                         <IMG SRC=”IMAGE1.JPG” ALT=”FIRST IMAGE”>
                    </BODY>
               </HTML>

Ip-1                                                                                              page:1
Roll no:10ce64                                                                       practical no:3
Date:


       4. ANCHAR <A>

         Description: HTML allows linking to other HTML document as well as image. Clicking
         on a section of text or an image in one web page will open an entire web page or an
         image. The text or an image that provide such linkages is called Hypertext, a Hyperlink,
         or a Hotspot.
                 There are some attributes which are used in body tag to modify our link color.
         Attributes       Values              Description
         Link             Rgb(v,v,v),         Change the default color if a hyperlink to
                          #124a75,            whenever color specified with the tag.
                          Colorname

         Alink            Rgb(v,v,v),         Change the default color of a hyperlink that
                          #124a75,            active to whatever color is specified with the tag.
                          Colorname
         Vlink            Rgb(v,v,v),         Change the default color of a hyperlink that
                          #124a75,            visited to whatever color is specified with the tag.
                          Colorname

                Anything written between the <A>...</A> tags becomes a hyperlink. There are
         some attributes of <A> tag.

         ATTRIBUTE:
         Attributes Values                    Description
         Href       URL                       The target URL of the link
         Name       Section_name              Use this attribute to create a bookmark in a
                                              document.
         Target           _blank                  _blank- the target URL will open in new
                          _parent                    window.
                          _self                   _self-the target URL will open in the
                          _top                       same frame as it was created.
                                                  _parent-the target URL will open in the
                                                     parent frameset.
                                                  _top-the target URL will open in the full
                                                     body of the window.
         Type             Mine_name           Specifies the MINE (Multipurpose Internet Mail
                                              Extensions) type of the target.

                  There are three type of linking we can made in the document.
                      Internal Link
                      Local Link
                      Global link

Ip-1                                                                                             page:1
Roll no:10ce64                                                                     practical no:3
Date:

          Example:
          <html>
          <head>
          <title>
          Practical 3</title>
          </head>
          <body>
          <a href=”tapan.html”>tapan</a>
          </body>
          </html>

       5. MAP <MAP>
          Description: The technique that is implemented to achieve this is an IMAGE MAP.
          Image map can be created and applied to an image so specific portion of the image can be
          linked to a different file/image.
                  The image which you want to use as a map is written in between
          <MAP>.....</MAP> tags.

          Example:
          <html>
          <head>
          <title>
          4
          </title>
          <body>
          <img src="1.gif" usemap="#p">
          <map name="p">
          <area shape="rect" coords="63,59,260,223" href="ce.html">
          </body>
          </html>

       6. AREA <AREA>
          Description: The technique that the specific portion is been used as a hyperarea for that
          <AREA> tag is used...




Ip-1                                                                                           page:1
Roll no:10ce64                                                           practical no:3
Date:




                                      EXERCISE:
       1. Create a web page using href attributes of anchor tag & the attributes: alink,
          vlink, link


        Html Code:
<html>
<head>
<title>p3.1</title>
</head>
<body alink="red" link="purple">
<a href="C:\Documents and Settings\All Users\Documents\My Pictures\Sample
Pictures\s.gif">sunset</a>
</body>
</html>

       Output:




       2. Create a web page, when the user clicks on the link it should go to the
          bottom of page.



       Html Code:

Ip-1                                                                                 page:1
Roll no:10ce64                                                     practical no:3
Date:

<html>
<head>
<title>p3.2</title>
</head>
<body>
<a href=#bottom name=top>bottom</a>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<a name=bottom href=#top>top</a>
</body>

</html>

Output:




       3.Create a page to show different attributes of font tag.



Ip-1                                                                           page:1
Roll no:10ce64                                                        practical no:3
Date:


       Html Code:
<html>
<head>
<title>p3.3</title>
</head>
<body>
<font color=red >U V Patel college of engineering</font><br>
<font face=Arial >U V Patel college of engineering</font><br>
<font size=55 >U V Patel college of engineering</font>
</body>
</html>
       Output:




       3. Write a HTML code to place an image (image has six section CE, IT, EC, ME,
          MC, BM ) in document. Each section of image link a related .htm file)



       Html Code:
       <html>
       <head>

Ip-1                                                                              page:1
Roll no:10ce64                                                        practical no:3
Date:

       <title>4
       </title>
       <body>
       <img src="1.gif" usemap="#p">
       <map name="p">
       <area shape="rect" coords="63,59,260,223" href="ce.html">
       <area shape="rect" coords="261,60,494,224" href="it.html">
       <area shape="rect" coords="494,59,670,223" href="ec.html">
       <area shape="rect" coords="62,224,259,389" href="me.html">
       <area shape="rect" coords="260,224,492,389" href="mc.html">
       <area shape="rect" coords="494,224,670,388" href="bm.html">
       </body></html>

       output:




       5.Create a Web page with appropriate content and insert an image towards the
       left hand side of the page. When user clicks on the image, it should open
       another.


      Html code:
<html>

Ip-1                                                                              page:1
Roll no:10ce64                                         practical no:3
Date:

<head>
<title>p3-5
</title>
</head>
<body>
<a href="1.html" target="_blank">
<img src="blue hills.gif">
</a>
</body>
</html>
Output:




6.Write a HTML code to send a mail using anchor tag.
Html code:

<html>
<head>
<title>5
</title>
<body>
<a href="mailto:tg6615@gmail.com">mail
Ip-1                                                               page:1
Roll no:10ce64   practical no:3
Date:

</a>
</body>
</html>
Output:




Ip-1                         page:1
Roll no:10ce64                                             practical no:3
Date:




                     PRACTICAL –3


                                 Aim:


                 To study the HTML Font, Image and link.




Ip-1                                                                   page:1

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:4
posted:3/18/2012
language:
pages:11