Tag Archives: download

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/

HTML5 Elements

In the previous chapter we have discussed about some of the basic HTML 4 elements. Apart form those HTML 5 has introduced some other useful elements and tags and also some of the old elements removed in HTML 5. Let’s discuss those in detail.

HTML 5 New Elements

<canvas>
<details>
<datagrid>
<menu>
<summary> Defines a visible heading for a <details> element
<mark>  to indicate content that is marked in some fashion
<time>  to indicate content that is a time or date
<meter>  to indicate content that is a fraction of a known range – such as disk usage
<progress>  to indicate the progress of a task towards completion
<wbr>

HTML 5 Media Elements

<audio>
<video>
<source>
<embed>
<track>

HTML 5 Form Input Type

datetime
datetime-local
date
month
week
time
number
range

email
url

(Click here for more detail about HTML 5 form elements and input types)

Some elements removed in HTML 5

  • acronym
  • applet
  • basefont
  • big
  • center
  • dir
  • font
  • frame
  • frameset
  • isindex
  • noframes
  • noscript
  • strike
  • tt

HTML Elements

What is HTML Elements?

Elements are the basic structure for HTML markup. Elements have two basic properties: attributes and content. Each attribute and each element’s content has certain restrictions that must be followed for an HTML document to be considered valid. An element usually has a start tag (e.g. <element-name>) and an end tag (e.g. </element-name>). The element’s attributes are contained in the start tag and content is located between the tags (e.g. <element-name attribute=”value”> Content </element-name>). Some elements, such as <br>, do not have any content and have no closing tag.

Example

<span id="myId" style="color:blue;" 
title="a2zwebhelp">A2ZWebHelp </span>

Head elements

<title>…</title>: Define a document title. This element is required in every HTML document. Web browsers usually display the title in a window’s title bar when the window is open, and in the task bar when the window is minimized.

<title> My Home Page </title>

<link>: Specifies links to other documents. To Link an external stylesheets you can write:

<link rel="stylesheet" type="text/css" href="path to file">

<script>…</script>: Used to add JavaScript or other scripts to the document.

<script language="javascript" >…</script>

<style>…</style>: Specifies a style for the document.

<style type="text/css">…</style>

<meta>: Can be used to specify additional metadata about a document, such as author, publication date, expiration date, page description, keywords, or other information not provided through the other header elements and attributes. Because of their generic nature, meta elements specify associative key-value pairs. Meta elements can specify HTTP headers which should be sent before the actual content when the HTML page is served from Web server to client: for example,

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

HTML Elements with category

Category Element Name
Top-level Elements HTML
HEAD
BODY
FRAMESET
Head Elements BASE
ISINDEX Removed in HTML 5
LINK
META
SCRIPT
STYLE
TITLE
Generic Block-level Elements ADDRESS
BLOCKQUOTE
CENTER Removed in HTML 5
DELDIV
H1
H2
H3
H4
H5
H6
HR
INS
ISINDEX
NOSCRIPT * Removed in HTML 5
P
PRE
Lists DIR Removed in HTML 5
DL
DT
DD
LI
Tables TABLE
CAPTION
COLGROUP
COL
THEAD
TFOOT
TBODY
TR
TD
TH
Forms FORM
BUTTON
FIELDSET
— LEGEND
INPUT
LABEL
SELECT
— OPTGROUP
— OPTION
 
TEXTAREA
Special Inline Elements A
APPLET Removed in HTML 5
BASEFONT Removed in HTML 5
BDO
BR
FONT Removed in HTML 5
IFRAME Removed in HTML 5
IMG
MAP
— AREA
OBJECT
PARAM
Q
SCRIPT
SPAN
SUB
SUP
Phrase Elements ABBR
ACRONYM Removed in HTML 5
CITE
CODE
DEL
DFN
EM
INS
KBD
SAMP
STRONG
VAR
Font Style Elements B
BIG Removed in HTML 5
I
S
SMALL
STRIKE Removed in HTML 5
TT Removed in HTML 5
U
Frames FRAMESET – Frameset Removed in HTML 5
FRAME – Frame Removed in HTML 5
NOFRAMES – Frames alternate content Removed in HTML 5

 

Responsive Table Design

Responsive HTML Table

Lets create our first responsive table. Here we will discuss about two type of table design, one is when the screen width reduce the scroll bar will display and another one is the table will increase row wise. The following image shows how it change on resolution change. We have used bootstrap.css to designthe table.

Table With Scrollbar:

The same table in small resolution

Here you can see the scroll.

Table Structure – 2

The same table in small resolution

Download File from here

Free Distance Calculator ( Chrome Extension )

This extension easily calculates the distance between multiple parameters and show the respective map with directions.
Enter parameters, get distance and search map.

Easy GUI, search suggestions and many more.

If you like this extension please help us by joining us on facebook.
Download link : https://chrome.google.com/webstore/detail/mkmdpdliefhnnfnfmpdlanfbmeofaklk?utm_source=chrome-ntp-icon