Tag Archives: Application Services

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

 

HTML Lists

To create bulleted lines of text you can use HTML lists. Unordered lists (bullets), ordered lists (numbers) and definition lists (think: dictionaries) are three different types of HTML Lists.
Click here to know how to styling List in CSS.

Unordered lists (bullets): The <ul> tag

<ul>
   <li>HTML</li>
   <li>CSS</li>
   <li>Java Script</li>
   <li>PHP</li>
</ul>

The different type of Unordered list are square, circle and disc.

<ul type="square">
<ul type="circle">
<ul type="disc">

Numbered/Ordered List: The <ol> tag

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>Java Script</li>
    <li>PHP</li>
</ol>

The different type of Numbered list are letters and Roman Numbers.

<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">

You can also change the start number

<ol start="7">

Definition Term Lists: The <dl> tag

<dl> – opening clause that defines the start of the list
<dt> – list item that defines the definition term
<dd> – definition of the list item

<dl>
   <dt>HTML</dt>
   <dd>- Hyper Text Markup Language</dd>
   <dt>CSS</dt>
   <dd>- Cascading Style Sheets</dd>
</dl>

HTML Attributes

Many HTML tags have a unique set of their own attributes. These attributes are divided into core attributesinternationalization attributes, and scripting events. Attributes are always specified in the start tag and come in name/value pairs like: name=”value”

Example

<a href="http://www.a2zwebhelp.com">Link to my website.</a>
<p id="firstp">This is my first paragraph.</p>
<h2 align="center" title="center text">Centered Heading</h2>

HTML Attributes with category

Category Attributes Name
Core Attributes id <p id=”myid”>My Text.</p>
class <div clsss=”newclass”> Text </div>
name <form name=”arup”></form>
style <span style=”font-family: arial”> Arial</span>
title <h1 title=”Heading”> Heading </h1>
alt <img src=”” alt=”my image”>
align <p align=”left”></p>
valign <td valign=”top”>&nbsp;</td>
bgcolor <td bgcolor=”#808080″>&nbsp;</td>
background <td background=”filepath”>&nbsp;</td>
width <img width=”100px”>
height <img width=”100px” height=”100px”>
Internationalization Attributes LANG <span lang=en>Welcome</span>
DIR
Common Scripting Events ONCLICK mouse button is clicked on an element.
ONDBLCLICK mouse button is double-clicked on an element
ONMOUSEDOWN mouse button is pressed over an element
ONMOUSEUP mouse button is released over an element
ONMOUSEOVER mouse is moved onto an element
ONMOUSEMOVE mouse is moved while over an element
ONMOUSEOUT mouse is moved away from an element
ONKEYPRESS a key is pressed and released over an element
ONKEYDOWN a key is pressed down over an element
ONKEYUP a key is released over an element