Category Archives: PHP Scripts

HTML Tables

Tables are defined with the <table> tag. A table is divided into rows (<tr>), and each row is divided into cells (<td>). The cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

Example:

<table>
<tr>
<td>&nbsp;</td>
</tr>
</table>

Tables and the Attribute:

Border: If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.
To display a table with borders, you will have to use the border attribute:

<table border="1">
 <tr>
   <td>&nbsp;</td>
 </tr>
</table>

Width: You can specify the width of the table either in percentage or pixel.

<table border="1" width="100%" >
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

Cellspacing/ Cellpadding:

<table border="1" width="100%" 
cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

HTML Links

Hyperlinks in HTML

Html hyperlink  is use to jump to any other page or to any other location in the current page. You can add hyperlink to any word or group of words or images. On mouse over any hyperlink your mouse courser change to a little hand. Links are specified in HTML using the <a> tag. To assign style to ahyperlink please visit CSS Tutorial.

HTML Link Syntax:

<a href="index.php">Home</a>

HTML – Link Targets

The attribute target use to set weather you want to open the link in a new window or in the same window.

Target
_blank Opens page in a new browser window/ New tab
_self Opens the page in same window
_parent Opens the page in the parent frame
_top Opens the page in same window, canceling all frames
<a href="index.php" target="_blank">Home</a>
<a href="index.php" target="_self">Home</a>
<a href="index.php" target="_parent">Home</a>
<a href="index.php" target="_top">Home</a>

HTML Email Link

<a href="mailto:a2zwebhelp@gmail.com">Contact Us</a>

Assign Subject and Body to HTML Email Link

<a href="mailto:a2zwebhelp@gmail.com?subject=my Question&body=Test">
Contact Us</a>

Default Links/ Base Link

The base tag used in the head element to set a default URL for all links on a page.

<head>
<base href="http://www.a2zwebhelp.com/" />
</head>

 

HTML Video

Play Video in HTML Page

You can add audio or video to your html page. Either you can add video from www.youtube.com or you can add you own video by uploading the same to your own web server. But it is a bit tricky to show videos in your web page, and it is a little complicated to make it works in all browser.

Browser Supported Video Formats:

File Format
.swf or .flv Flash
.mov QuickTime
.rm or .ram Real Video
.avi AVI
.wmv WMV
.mpg or .mpeg MPEG
.mp4 Mpeg-4

Play Flash File in HTML Page

<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" 
id="obj1" border="0" width="160" height="160">
<param name="movie" value="myfile.swf">
<param name="quality" value="High">
<param name="wmode" value="transparent">
<embed src="myfile.swf" 
type="application/x-shockwave-flash" 
name="obj1" width="160" height="160" 
quality="High" wmode="transparent"></object>

Play QuickTime in HTML Page

<embed src="mymovie.mov" width="320" height="252" 
autoplay="true" controller="true" loop="false" 
pluginspage="http://www.apple.com/quicktime/">

Play RealVideo in HTML Page

<object id="id1" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" 
height="240" width="320">
<param name="controls" value="imagewindow">
<param name="autostart" value="true">
<param name="src" value="myvideo.rm">
<embed height="240" width="320" controls="imagewindow" src="myvideo.rm" 
type="audio/x-pn-realaudio-plugin" autostart=true>
</object>

Play MPEG Video in HTML Page

<embed src="myfile.mpeg" autostart="false" />

Play Youtube Video in HTML Page

<iframe width="420" height="315" 
src="http://www.youtube.com/embed/p9KjdYJ_gcc" 
frameborder="0" allowfullscreen></iframe>
<object width="420" height="315">
<param name="movie" 
value="http://www.youtube.com/v/p9KjdYJ_gcc?version=3&amp;hl=en_US">
</param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/p9KjdYJ_gcc?version=3&amp;hl=en_US" 
type="application/x-shockwave-flash" width="420" height="315" 
allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

 

HTML Audio

Play Audio in HTML Page

You can add audio or video to your html page. Either you can add video from www.youtube.com or you can add you own video by uploading the same to your own web server. But it is a bit tricky to show videos in your web page, and it is a little complicated to make it works in all browser.

Browser Supported Audio Formats:

File Format
.mid or .midi MIDI Musical Instrument Digital Interface
.mp3 or .mpga MP3 MPEG-1 or MPEG-2 Audio Layer 3
.WMA WMA Windows Media Audio
.wav WAVE Waveform audio format
.rm or .ram Real Audio

Play Background Music in HTML Page

<BGSOUND src="music.mid" 
 balance=0 
 delay=10
 loop = -1>

Play Audio in HTML

<audio controls="mycontrol" height="50" width="50">
 <source src="music.mp3" type="audio/mp3" />
 <source src="music.ogg" type="audio/ogg" />
<embed height="50" width="50" src="music.mp3" />
</audio>

Using the HTML5 “audio” Element

<audio controls="controls">
  <source src="music.mp3" type="audio/mp3" />
  <source src="music.ogg" type="audio/ogg" />
Your browser does not support this audio format.
</audio>

Click here to know more about .ogg file format.

Using “object” Element

<object width="100" height="100" data="music.mp3"></object>

Using “embed” Element

<embed width="100" height="100" src="music.mp3" />

The Yahoo Media Player

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>
<a href="music.mp3">Play Music</a>

For More detail about Yahoo audio player please visit http://webplayer.yahoo.com/

HTML Images

To show images in your HTML pages, you can use <img> tag. You can use .jpg, .gif, .png images in you web page. Always use compress image like jpg, gif and png images for faster loading and betterresults.

Img tag and it’s Attributes:

Src: This is used to define the path of the image file that you want to show in your web page.

<img src="path2yourfile.gif">

Align: You can set alignment of the image like leftright or center.

 <img src="path2yourfile.gif" align="left">

Alt: Alternate text. For any case if the image can’t display in the web browser the alt text will disply in place of the image. This is also required for SEO (Search Engine Optimization).

 <img src="path2yourfile.gif" alt="this is my image">

Border: This element used to define the border of the image. You can use border=”0″ (Zero) to display no border.

 <img src="path2yourfile.gif" border="0">

Class: You can also assign CSS class to any image with the help of class attribute.

 <img src="path2yourfile.gif">

Height: This attribute is used to define the height of an image.

 <img src="path2yourfile.gif" height="50px">

Id: You can set any unique id of an image for programming use with the help of ID attribute.

 <img src="path2yourfile.gif" id="uid3">

Width: This attribute is used to define the width of an image.

 <img src="path2yourfile.gif" width="100px">

Title: This attribute is used to define the Title of an image. On mouse over the image the title of the image will display. This is an optional option, but it is also helpfull for SEO.

 <img src="path2yourfile.gif" title="Image title here">

Hyperlink of an image

<a href="mypage.html"><img src="file.gif" border="0"></a>