HTML5 Tags - audio

<audio>

• Provides a standard for playing audio files.
• Used to add audio to web pages.

            <audio src = "" controls > Audio </audio>

            <audio src = "jb.mp4" controls > Audio </audio>

• src attribute
• specifies the url of the audio file
• controls attribute
• specifies that audio controls should be displayed (such as a play/pause button etc)
• autoplay attribute
• specifies that the audio will start playing as soon as it is ready
• loop attribute
• specifies that the audio will start over again, every time it is finished

• if the browser not supported to the audio file type ,following is the method of specified the audio source files

               <audio controls autoplay loop>

<source src = "jb.mp4" type="audio/mpeg" >

<source src = "jb.ogg" type="audio/ogg">

Audio

</audio>

               

• <source> element 
• source elements are in between starting and ending audio tags.
• does not have a end tag.
• if the browser does not support for the first audio type then it contry the next one.
• ogg audio file is the latest version of chrome firefox and opera.
• Can have the attributes
• src (address)
• There are two type of addresses.
• relative address :- in the above example related to relative address
• absolute address :- when we used an audio in internet we used absolute address
• type
• optional attribute
• help the browser to specify the audio type





<video> 

• Provides a standard for playing video files.
• Used to add video to web pages.

       In here audio is replaced to video

                <video controls autoplay loop>
<source src = "jb.mp4" type="video/mp4" >
<source src = "jb.mp4" type="video/ogg">
Video
                </video>

HTML5 Tags - li , ul , ol

<li>

• Used to organized items in the browser window.
• There are two types of lists.
• ordered list  - <ol>
• unordered list  - <ul>
• <li> tag is used inside the <ol> and <ul> tags.

<ul>

• Used to define an unordered (bulleted) list.
• list items with no particular order.
• most popular list.
• eg :- bullets

In the following example you can see how <li> and <ul> tags are used in HTML document and what will be the output.

<ol>

• Used to define an ordered (numbered) list.
• eg :- numbers

In the following example you can see how <li> and <ol> tags are used in HTML document and what will be the output.

HTML5 Attributes - cellpadding ,cellspacing , align , valign

cellpadding

• Used to specified space between border and content
• it is in pixels

cellspacing

• Used to specified spaces between cell.
• it is in pixels

In the following example you can clarify cellpadding , cellspacing and difference between them.

align

• Used to set alignment
• Values for the align parameters are
• center (default)
• left 
• right 

In the following example you can see how to align whole table to center.

In the following example you can see how to align whole row to center and how to align specific column to center.

Like that you can align as you wish.

valign

• Used to set  vertical alignment
• Values for the valign parameters are
• center (default)
• top
• bottom

In the following example you can see how to align  vertically.You can do it as you wish.

HTML5 Attributes - width , height , bgcolor

width ,height

• height
• default it is in pixels.
• can give as a percentage of the window.
• width
• default it is in pixels.
• can give as a percentage of the window.
• If not specified, the table is only as wide as needed to display cell contents.

In the following example you can get an idea who to put those attributes in HTML code.

bgcolor

• background color 
• in HEX or as a name color

In the following example you can see , how to add same color to the whole table.

In the following example you can see , how to add colors for the rows.

In the following example you can see ,  how to add colors to columns.

HTML5 Attributes - rowspan , colspan

rowspan

• Used to merge rows

In the following example you can see how to merge two rows.

colspan

• Used to merge columns

In the following example you can see how to merge two columns.

This is an additional example to clarify colspan.

HTML5 Attribute - border

There are lost of table attributes.
To clarify those table attributes as well , first you must learn table elements.(in the previous post)

border

• defines which lines used to draw the table(in pixel)
• default no lines are drawn.

In the following example show default border which is no border of the table.

In the following example used to show , if we only put border attribute only (with out any value assign to the border parameter) , then it get default size as 1.

In the following example used to show , if we assign the value to the border parameter.Then it takes assign value as the border size.

In the following example used to show , what is mean by header cell in the table.By default it is bold and centered.

HTML5 Tags - table , thead , tr , th , td , tbody ,tfoot

<table>

• Used to define table. <table>
• Table consists following elements.
•  <th> ,<tr> , <td> ,<caption> ,<col> ,<colgroup> ,<thead> ,<tfoot> ,<tbody>
• Table consists following attributes.
• align
• can be "left" , "right" ,"center"
• border 
•  defines which lines used to draw the table(in pixel)
• default no lines are drawn.
• width
• default it is in pixels.
• can give as a percentage of the window.
• If not specified, the table is only as wide as needed to display cell contents.
• height
• default it is in pixels.
• can give as a percentage of the window.
• bgcolor
• background color 
• in HEX or as a name color
• cellpading
• it is in pixels(space) between content and its border
• cellspacing
• it is in pixels(space) between cells.

<thead>

• Used to group header content in the table.
• Browser can use these elements to enable scrolling of the table body independently of the header and footer.
• When printing a large table that spans multiple pages  , these elements can enable the table header and footer to be printed at the top and bottom for each page.
• header contain following elements
• as a child of <table>
• after any <colgroup> , <caption>
• before any <tbody> ,<tfoot> , <tr>
• <thead> element must have one or more <tr> tags inside.

<tr>

• Used to define row in the table.
• Contains one or more <th> or <td> elements.
• Row contains following attributes
• align
• controls horizontal alignment of text in cells.
• can be "left" , "right" ,"center"
• valign
• controls vertical alignment of text in cells.
• can be "top" , "bottom" ,"middle"
• nowrap
• instructs the browser not to wrap the text from within the cells.

<th>

• Used to define header cell in the table.
• Contains header information.
• Bold and centered by default.
• Called as header cell.

<td>

• Used to define standard cell in the table.
• Contains data.
• Regular and left-aligned by default.
• Called as standard cell.
• Column contains following attributes
• align
• controls horizontal alignment of text in cells.
• can be "left" , "right" ,"center"
• valign
• controls vertical alignment of text in cells.
• can be "top" , "bottom" ,"middle"
• nowrap
• instructs the browser not to wrap the text from within the cells.
• width
• can be given as percentage of the table width
• height
• gives minimum height for cell.
• colspan
• cell to span multiple columns
• rowspan
• cell to span multiple rows

<tbody>

• Used to group the body content in the table.
• Browser can use these elements to enable scrolling of the table body independently of the header and footer.
• When printing a large table that span multiple pages  , these elements can enable the table header and footer to be printed at the top and bottom for each page.
• header contain following elements
• as a child of <table>
• after any <colgroup> , <caption> , <thead>

<tfoot>

• Used to group footer content in the table.
• Browser can use these elements to enable scrolling of the table body independently of the header and footer.
• When printing a large table that span multiple pages  , these elements can enable the table header and footer to be printed at the top and bottom for each page.
• header contain following elements
• as a child of <table>
• after any <colgroup> , <caption> , <thead>
• before any <tbody> , <tr>

NOTE :- <thead> , <tbody> ,<tfoot> elements will not affect the layout of the table by default.

To clarify above elements use the following code.

     It describe subject marks of two students.

     Tharushi has got 100 for Maths and 95 for English , and Sum is 195

     Chamindi has got 90 for Maths and 80 for English, and Sum is 170.

<!DOCTYPE html>

<html lang = "eng">

<title>HTML5</title>

<body>

<h1> Marks of Students </h1>

<table>

 <thead>

 <tr>

<th>Student</th>

<th>Tharushi</th>

<th>Chamindi</th>

 </tr>

 </thead>

 

 <tbody>

 <tr>

<td>Maths</td>

<td>100</td>

<td>90</td>

 </tr>

 

 <tr>

 <td>English</td>

 <td>95</td>

 <td>80</td>

 

 </tr>

 </tbody>

 

 <tfoot>

 <tr>

 <td>Sum</td>

 <td>195</td>

 <td>170</td>

 </tr>

 </tfoot>

 

</table>

</body>

</html>          

Then the out put will be as follow.

HTML5 Tags - anchor

<a>

• Used to define a hyperlink.(use for linking)
• href is the most important attribute of <a> element.
• href indicates destination of the link.
• All the browsers , links will appear as
• unvisited link - underline and blue
• visited link  - underline and purple
• active link - underline and red 

• unvisited link

• visited link

• There are many types of links.
• absolute link
• hyper link
• relative link
• targeted link
• email link

Absolute link

• Links to another page outside of your web site.
• Specify the entire URL of the page.

     In the above example is relevant for absolute link.

Hyper link

• Highlighted and underlined text.
• When you click on the link , it takes to another page on the web.

Relative link

• Links to another page in your site.
• Do not have to specify the entire URL of the page.

There we mush have at least two html files.

As example I used first.html and second.html.

In the first.html file put the link to second.html file as , <a href = "second.html" >

When you run first.html file and click Next page then it runs second.html file.

Refer the following to clarify this.

Targeted link

• Include target attribute.
• If you specify target = "_blank" , a new browser window will be opened.

Refer the following example to clarify what is targeted link.

In here targeted link is appear in another tab.

Email link

Here we modify href as , <a href = "mailto:youmail@mail.com">

HTML5 Tags - br , hr , comment , link ,image

<br>

• Used to break the lines.(breaks the line and starts text at a new line).
• Insert a single line break.
• Is an empty tag / standalone tag. (because it only has start tag)
• If we used multiple <br> tag insert multiple line breaks.

<hr>

• Used to define a thematic change in the content.
• Used to separate content in the HTML page.
• Is an empty tag / standalone tag. (because it only has start tag)

<!--   -->

• Called as comment tag.
• Used to insert comments in the source code.
• Comments are not displayed in the browser.
• Used comments to explain your code.It is help you, when you want to edit the source at later ,then you can easily find the place.

<link>

• Used to link to external style sheet.(a link between a document and an external resource)
• Is an empty element.
• Contains only attributes.
• <link> element goes only head section.
• Can appear any number of times.

There we want both html and css files.

<img>

• Used to define an image in HTML page.
• Required  attributes :-
• src
• alt
• width
• heigth

First you must save an image file where you save the HTML file as ,