3.5.3 Definition lists

Definition  lists  are  used  to  generate  a  list  of  terms  and  their  definitions.  Definition   lists   are enclosed    within <DL>... </DL> tag  is  used   to  specify  the  definition  term,  while  the  <DD>tag  is  used  to  specify  the  definition  itself.

                              Figure 3. 11   of Example 11

3.6 Using Horizontal Tag: <HR>

The  <HR> (horizontal  rule ) tag  is used  to  draw  a  horizontal  line  across  the   page . The following   attributes help to control the horizontal line. It  has  a  start  tag ,  forbids    an  end  tag  and  contains  no  content.

Figure 3.12: Output of Example 12

3.7 Using Font

The   <FONT> tag is used   to control the display of the text to the Web page. We can specify attributes   like size, color and so on.

We can  set the FONT  attributes  for the  entire document  by  placing  the element  within  the  BODY  tag.  In  addition, the  FONT  attribute  can  be  specified  for  the  individual  words, sections  and  elements  on  the  page.

               The  attributes  of  the  FONT  can  be  combined  in the  same  tag

                                                    Figure 3.13: Output Example 13

3. 8   Using   Color

  We  can  add color  to  the  page  and  to  elements  on  the  page. COLOR   is  an attribute  that  can  be   used   with  several    elements  such  as  FONT  and  BODY.

Figure 3.14:  Output of Example 14

The color is specified in terms of three   primary colors red, green, and blue.  Each primary color is defined as   a two-digit hexadecimal number.

#RRGGBB

Hexadecimal 00 indicates 0% of the color while hexadecimal FF indicates   100% of the color. The final value is a six – digit code that indicates the color.

3.9 Using Images in HTML Documents

“A picture  is  worth  thousand  words”, certainly  quite  applicable  for  a  Web page . The images  that  are  inserted  into  a  web  page  are  called  In-line  images. Images can be icons, bullets, photographs, a company logo, and many more.

There are several graphic formats that are in   use today. However,   on   the Web, things are a little different. The three common graphics formats   that can be   displayed in most browsers are:

Ø  GIF (Graphics  Interchange  Format) images (.GIF)

GIF is the most common format that is used   in HTML documents.  GIF files have a platform- independent format and support up to 255 colors. The  advantage  of .gif files  is   that   they  are  considerably  easier  to  transfer  even low – speed  modem lines.

There   are two   standards   for.gif files – 87a and   87a (supports transparency).

·         Interlaced GIF format:  A normal   GIF  image file  displays  the  image files displayed   one  line  at  a  time , the   sequence  has   changed.

·         Transparent GIF images:  A pixel can be either transparent or opaque. A  transparent  GIF image  is  one  in  which  the   background   of  the   image  is  the   same   color  as the   Web  page . For  example,  icons  and  bullets  have  transparent  background  so  that   they  blend  with  the  background  color  of  the  document.

Ø  JPEG(Joint  Photographic  Expert Group) images (.JPEG)

JPEG compression    is a loss compression scheme.  This means that the resulting   compressed image is not exactly   like the original image. However, during playback the image is almost as good as   the original.  When  a  file  is  save  in  JPEG  format,  the  compression  ratio   can be  specified.  The higher the ratio, the image will look like the original.

JPEG  supports  over  16 million  colors  and  is  typically   used  for  truecolor  images.

Both  JPEG  (.jpg  filename  extension) and  GIF  file  format  compress  the  images  to  ensure  faster  rate  of  transfer  over  the  Internet .  JPEG  images  can  be  compressed   to   a  larger  extent  but  they  are  slower  during  display  as  compared  to  a  .GLF  image.  That  is  probably  the  reason  why .GIF images are  more  popular  with  HTML  documents.

Ø  PNG (Portable  Network Graphics)

The format for a PNG file is “lossless”.  In “lossless” compression, the image   data is   compressed without    removing the detail. The PNG files support    grayscale and truecolor images. PNG files   can also be compressed for transfer over networks.

When  deciding  on  a  graphics   format,  there  are  a  few  factors  that  should   be  kept  in mind:

Ø   Quality  of  the  image – Is  the  quality  of  the  image  important  during  display?

Ø  Data size – The larger the file size the longer the transfer time.

Ø  Display  requirement- should  the image  support  transparency,  streaming  display,  or  progressive  rendering?

3.9.1 Inserting Images

The IMG tag is used   to insert images into an HTML document.  We  can  place  the  IMG tag  at   the  position  where the  image  is  to  be  displayed.  The  IMG  tag  no  content; it  displays  the  content  specified  in  the  SRC attribute. The syntax is:

<IMG SRC = “URL”>

where, the  SRC  (source) is the  attribute  and  the  value   is  a URL  which  specifies   the  exact location  of  the  image  file.

Sometimes   graphics may not say it all. We  may  require  giving  the  user  some  clue  about  the  purpose  of  the  graphic.  In this case, the images can be aligned with the text.

The ALIGN  attribute   of  the  IMG  tag  can  be  used  to  adjust  the  alignment  of  the   image  in  relation  to  the  surrounding  text. The syntax is:

<IMG ALIGN = position SRC= “PICTURE.GIF”>

Where, position is TOP, BOTTOM, MIDDLE, LEFT or RIGHT.

Note Flowers.jpg file is the same folder as the HTML source file. Also, in place of Flowers.jpg any other.gif or. Jpg file can be used.

Create a folder and copy your flower into that folder

Make sure  the image  and  the program  will   be in one  folder, if  not  that   the  image will  not  show after  running  the program

                                            So you see I have change the name is change

                    Figure 3.15: Output of Example 15

Note  that  some  browser do  not  display  graphical  images  in  that  case , we need  to  specify  an  alternative  in  the  HTML document. The ALT parameter is used to state the image contents.

Figure  3.16: Output  of  Example   16 (The  alternative  text  is  displayed when the  mouse points  to  the  image)

The background   of a page is as important   as the text.  In  most  pages  a  colored background   is  used,  the   objective is  to  highlight   the  content  on the  page.  We can also use images as a background.  To  do  so,  we  need   to  use  the  BACKGROUND  attribute  of   the  BODY tag

<BODY BACKGROUND=bgimage.gif> (specify the complete URL of the image)

If  the  image   is   smaller  than   the  display   area    of   the   document then  the  image  is   tiled  to  fill  the  entire  display .

Typically,  the  image  scrolls   with   the  text   as  the  user  scrolls  the   page  in  the browser.  If  we  want  to  avoid  this   and create  a watermark  effect  instead,  where  the  image   remains  static  and  the   text  scrolls,  set  the  BGPROPERTIES   attribute     of   the  BODY  tag  to  FIXED.

<BODY BACKGROUND=bgimage.gif BGPROPERTIES=FIXED> 

The images that are inserted into   the HTML document can   also serve as   hyperlinks. Such images are called as hyperimages.  When   the  user  click  the  image,  the  document   or  file  specified  in  the URL   is   displayed. To   do   this, the image is nested within the anchor tag.

SUMMARY

Ø  The  Header  element   are  used  to  provide  a  heading  for  the   content  displayed   on  the  Web  page

Ø  The  <ADDRESS> element   is  used  to  display  information   such as  the author, address  and  signature  for  the HTML document.

Ø  We  can   indicate  quoted  text  in  the  document    using  the  BLOCKQUQTE  element

Ø  If  we  want  the  text  to  be  displayed  with  predefined  formatting,  we  can  make  use of  the  PRE element

Ø  The  SPAN element   is  used  to define  in-line content while the  DIV  element  is  used    to   define  block-level content

Ø  Lists are used to group data logically.  They  can  be added   to  the  HTML  document  to   group   related  information  together

Ø  The  <HR> (horizontal  rule) tag  is  used  to   draw  a  horizontal  line   across  the  page

Ø  The <FONT>  tag   is  used  to  control  the   display  of  the  text  on  the   Web page

Ø  We can  set  the  FONT  attribute   for  the  entire  document  by   placing   the  element  within  the  BODY  tag

Ø  Color  can  be  added  to  the  page  and  to   elements  on   the page using   COLOR  attribute 

Ø  The color is specified in terms of   three   primary colors: red, green, and blue. Each

Primary color is defined as a two-digit   hexadecimal number

Ø  The image  that  are inserted  into   a web page  are  called   In-line images  can  be  icons, bullets, photographs, a  company logo an HTML document

Ø  The IMG tag  is  used   to  insert images  into an   HTML document

Ø  The ALIGN  attribute  of  the  IMG tag  can  be  used  to  adjust  the  alignment  of  the   image   in  relation  to  the  surrounding  text

Ø  The  BACKROUND  attribute  of  the  BODY tag  can  be  used  to  use   an  image  as  a background 

Ø  The images that are inserted   into the HTML document can also serve as hyperlinks.

Such images are called as hyperimages