Thursday 3 July 2014

HTML Division !!


The Division is define <div> tag, the <div> tag defines a division or a section in an HTML document file.
The Division is the child of Body:
(
<body>
<div>
<p>This is my first HTML paragraph.</p>
</div>
</body>)
The Division tag has a start or opening tag <div> and an end or closing tag </div>. Div tag is very import for your web desingning or development.
This is support all HTML version, and support all Browser.

Example:
<p>This is some HTML text.</p>

<div style="color:#0000FF">
  <h3>This is a heading in a HTML div element</h3>
  <p>This is some text in a HTML div element.</p>
</div>

<p>This is some HTML text.</p>

Output:
This is some HTML text.

This is a heading in a HTML div element

This is some text in a HTML div element.
This is some HTML text.

HTML Body Tag !!


The <body> tag defines the document's body. The body tag child of html tag.
The Body tag has a start or opening tag <body> and an end or closing tag </body>.
This is support all HTML version, and support all Browser.

Example:
<body>
<p>This is my first HTML paragraph.</p>
</body>

HTML html Tag !!


HTML means Hyper Text Markup Language or
H = Hyper, T = Text, M = Markup, L = Language.
The <html> tag tells the browser that this is an HTML document.
The <html> tag represents the root of an HTML document.
The HTML tag has a start or opening tag <html> and an end or closing tag </html>.
This is support all HTML version, and support all Browser.

Example:
<html>
<body>
<p>This is my first HTML paragraph.</p>
</body>
</html>

HTML Horizontal Rule (hr) !!


The Horizontal Rule is define <hr> tag, hr separate you line content with border.
The <hr> tag is an empty tag which means that it has no end or closing tag, this is the single tag.
This is support all HTML version, and support all Browser.

Example:
<p>Online <hr>Webcoach</p>

Output:
Online

Webcoach

HTML Line Break !!


The Line Break is define <br> tag, br separate your line content with margin.
The <br> tag is an empty tag which means that it has no end or closing tag, this is the single tag.
This is support all HTML version, and support all Browser.

Example:
<p>Online <br>Webcoach</p>

Output:
Online
Webcoach

HTML Subscript !!


Subscript is define by <sub> tag, and this normaly used for mathematical term.
The Subscript tag has a start or opening tag <sub> and an end or closing tag </sub>.

Example:
<p>The symble of wateris H<sub>2</sub>O</p>

Output:
The symble of water is H2O

HTML Superscript !!


Superscript is define by <sup> tag, and this normaly used for mathematical term.
The Superscript tag has a start or opening tag <sup> and an end or closing tag </sup>.

Example:
<p>The (a+b)(a+b)=(a+b)<sup>2</sup></p>

Output:
The (a+b)(a+b)=(a+b)2

HTML Audio!!


If you want to share your Sounds / Audio on your website you must put your Sounds / Audio on your Host site.
You can add your Sounds / Audio in website bacground music.
You three way can share your audio.
1. HTML- Using <embed> : <embed height="50" width="100" src="horse.mp3">
2. HTML- Using <object> : <object height="50" width="100" data="horse.mp3"></object>
3. The HTML5 <audio> :
<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
  <source src="horse.ogg" type="audio/ogg">
  Your browser does not support this audio format.
</audio>

HTML Audio is The Best Solution:
<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
  <source src="horse.ogg" type="audio/ogg">
  <embed height="50" width="100" src="horse.mp3">
</audio>

TML audio Using A Hyperlink on your website:
<a href="horse.mp3">Play the sound</a>

HTML Videos !!


If you want to share your video on your website you must put your video on your Host site.
Playing videos in HTML on your site isn't easy!

Example:

HTML 5 + <object> + <embed>

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  <object data="video.mp4" width="320" height="240">
    <embed src="video.swf" width="320" height="240">
  </object>
</video>

HTML Video Using A Hyperlink on your website:

Example:
<a href="video.swf">Play a video file</a>

HTML YouTube Videos !!


If you want to share your YouTube Videos in your Web or Blog, two way you share your video on your website.
First way share your YouTube Videos with Iframe.
1. Open your YouTube Video and click "Share" Button
2. Now click "Embed" Button
3. Copy the code and paste it on your website.

Example:
<iframe width="560" height="315" src="//www.youtube.com/embed/CIYxWMAtBig" frameborder="0" allowfullscreen></iframe>

Output:

Second way share your YouTube Videos Embedded.

Example:
<embed width="420" height="345" src="//www.youtube.com/embed/CIYxWMAtBig" type="application/x-shockwave-flash">

HTML Article !!


The <article> tag specifies independent, self-contained content on your website.
An article should make sense on its own and it should be possible to distribute it independently from the rest of the site or blog.
Article tags define <article>,  the article tag has a start or opening tag <article> and an end or closing tag </article>.
Potential sources for the <article> element:

Forum posting.
Blog posting.
News story.
Comment.

This is support all HTML version, and support all Browser.

Example:
<article>
  <h1>Online Webcoach</h1>
  <p>Online Webcoach is a free online tutorial website, this open and copyriht by 2014.</p>
</article>

Output:



Online Webcoach

Online Webcoach is a free online tutorial website, this open and copyriht by 2014.

HTML Address !!


The address defines the contact information for the author or owner of a document or an article on the website.
Address tags define <address>,  the address tag has a start or opening tag <address> and an end or closing tag </address>.
This is (address) support all HTML version, and support all Browser.

Example:

<address>
Written by <a href="mailto:onlinewebcoach.bd@yahoo.com">Online Webcoach</a>.<br>
Visit us at: onlinewebcoach.blogspot.com/<br>
Box 1205, Dhanmondi<br>
BD
</address>

Output:
Written by Online Webcoach.
Visit us at: onlinewebcoach.blogspot.com/
Box 1205, Dhanmondi
BD

HTML Object !!


Object is use to embed multimedia (eg audio, video, Java applets, ActiveX, PDF, and Flash, Web page) in your web pages or file.
Object is define <object>, the object tag has a start or opening tag <object> and an end or closing tag </object>.

Example:

<object width="400" height="400" data="http://onlinewebcoach.blogspot.com/"></object>

This is (Object) support all HTML version, and support all Browser.

HTML Basefont !!


Basefont define a default font size, font face and color of text on your website.
The font tag has a start or opening tag <font> and an end or closing tag </font>.

Example:

<!DOCTYPE html>
<html>
<head>
<basefont color="green" size="5">
</head>

<body>
<h1>This is a HTML heading</h1>
<p>This is a HTML paragraph.</p>
</body>
</html>

This Basefont isn't support HTML5, and support all Browser.

HTML Font !!


You can customize your font size, font face and color of text on your website.
The font tag has a start or opening tag <font> and an end or closing tag </font>.

Example:
<p><font size="3" color="red">This is my text!</font></p>
<p><font size="4" color="black">This is my text!</font></p>
<p><font face="verdana" color="pink">This is my text!</font></p>

Output:
This is my text!
This is my text!
This is my text!

This Font isn't support HTML5, and support all Browser.

HTML insert!


A text with a deleted part, and a new inserted part on your line.

Example:
<p>My favorite book is <del>Bangla</del> <ins>English</ins>!</p>
Output:
My favorite book is
BanglaEnglish!

The insert tag defines that  inserted into a document or line.
The insert tag has a start or opening tag <ins> and an end or closing tag </ins>.
This is (insert) support all HTML version, and support all Browser.

HTML Delete !!


A text with a deleted part, and a new inserted part on your line.

Example:
<p>My favorite book is <del>Bangla</del> <ins>English</ins>!</p>

The del tag defines that deleted from a document or line.
The Del tag has a start or opening tag <del> and an end or closing tag </del>.
This is (Del) support all HTML version, and support all Browser.

Output:
My favorite book is
BanglaEnglish!

Wednesday 2 July 2014

HTML Big !!


The Big tag is define <small>, and this usually displayed in Big on your text.
The Big tag has a start or opening tag <small> and an end or closing tag </small>.
This Big isn't support HTML5, and support all Browser.

Example:
<p>This is normal text - <big>and this is big text</big> on my website.</p>

HTML Small !!


The Small tag is define <small>, and this usually displayed in Small on your text.
The Small tag has a start or opening tag <small> and an end or closing tag </small>.
This is (Small) support all HTML version, and support all Browser.

Example:
<p>This is normal text - <small>and this is small text</small> on my website.</p>

HTML Italic Tag !!


The Italic tag is define <i>, and this usually displayed in Italic on your text.
The Italic tag has a start or opening tag <i> and an end or closing tag </i>.
This is (Italic) support all HTML version, and support all Browser.

Example:
<p>This is normal text - <i>and this is Italic text</i> on my website.</p>

HTML Bold Tag !!


The bold tag is define <b>, and this usually displayed in bold on your text.
The bold tag has a start or opening tag <b> and an end or closing tag </b>.
This is support all HTML version, and support all Browser.

Example:
<p>This is normal text - <b>and this is bold text</b> on my website.</p>

HTML Frame!!


You can divided a Web page into two or more with HTML frames. Every part of page you can upload a page.
Even if you want you ccan use reload. If have more frame that's called frameset.
You must write frame tag in frameset "<frameset><frame></frame></frameset>".

Example:

<!DOCTYPE html>
<html>
<head>
<title>Online Webcoach Frame Tutorial </title>
</head>
<frameset rows=”200,100>
<frame src="http://onlinewebcoach.blogspot.com/" />
<frame src="http://muktotunes.blogspot.com/" />
<noframes>
 <body>
Unfortunately, your browser does not support this frame tag.
</body> 
</noframes>
</frameset>
</html>

Here, <frameset rows=”200,100> understanding to you the "http://onlinewebcoach.blogspot.com/" height 200px and "http://muktotunes.blogspot.com/" height 100px.

Frame isn't supprt on the HTML5. HTML% support only "Iframe".

HTML Iframes !!


Iframe is used for display a web page within a web page or Video.
The element has a start or opening tag <iframe> and an end or closing tag </iframe>.
iframe mean "inline frame".

Syntax for adding an iframe on your web page:

<iframe src="URL of web page"></iframe>
The URL points to the location of the separate page or Video.

Iframe - Height and Width Set:
The attribute values are specified in pixels by default, but they can also be in percent (like "80%").

Example:
<iframe src="http://onlinewebcoach.blogspot.com/" width="500" height="400"></iframe>

Iframe Border:
If you want to doesn't display iframe border (frameborder attribute specifies whether or not to display a border around the iframe) just frameborder="0".

Example:

<iframe src="http://onlinewebcoach.blogspot.com/" frameborder="0" width="500" height="400"></iframe>

Iframe Target Link:
You can used iframe target frame for a link.

when you click the link then the show your page in iframe.

Example:
<iframe src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMj99B-JvSWlAYFzTf7dYDR9KlkBiTRC_8QzZ9adjmV048NcDH1pButKJanEovUOr0WFx26ydinQGETECmHMtFOcMoOIYmWBFXZAi0xPdcCvaj_ULrrqOxbq7hMvGp6NGpFWvM75chbeE/s1600/iframe.jpg" name="iframe_a" frameborder="0" width="500" height="400"></iframe>
<p><a href="http://onlinewebcoach.blogspot.com/" target="iframe_a">Online Webcoach</a></p>
Output:

 
Online Webcoach
If your need help please watch this video: 

Monday 30 June 2014

HTML Lists!!


1. Unordered list
2. Ordered list
3. Description Lists

HTML Unordered Lists:
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The element has a start tag <ul> and an end or closing tag </ul>.
The element has a start tag <li> and an end or closing tag </li>.

Example:
<ul>
<li>Online</li>
<li>Web Coach</li>
</ul>

Output:
  • Online
  • Web Coach


HTML Ordered Lists:
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The element has a start tag <ol> and an end or closing tag </ol>.
The list items are marked with numbers.

Example:
<ol>
<li>Online</li>
<li>Web Coach</li>
</ol>

Output:
  1. Online
  2. Web Coach


HTML Description Lists:
A description list is a list of terms/names, with a description of each term/name.

The <dl> tag defines a description list it's start tag <dl> and an end or closing tag </dl>.

<dt> defines terms or names start tag <dt> and an end or closing tag </dt> and <dd> describes each term or name start tag <dd> and an end or closing tag </dd>:

Example:
<dl>
<dt>Online</dt>
<dd>- Web Coach</dd>
<dt>HTML</dt>
<dd>- p, a, b</dd>
</dl>

Output:
Online
- Web Coach
HTML
- p, a, b




If your need help please watch this video:

HTML Tables!!


Tables are defined with the <table> tag.
The element has a start tag <table> and an end or closing tag </table>.
A table is divided into rows with the <tr> tag. (tr stands for table row)
The element has a start tag <tr> and an end or closing tag </tr>.
A row can also be divided into headings of the table with the <th> tag. (th stands for table heading)
The element has a start tag <th> and an end or closing tag </th>.
A row is divided into data cells/column with the <td> tag. (td stands for table data)
The element has a start tag <td> and an end or closing tag </td>.
The <td> elements are the data containers in the table.
The <td> elements can contain all sorts of HTML elements like text, images, lists, link, images, HTML form, other tables, etc.

[The width of a table can be defined using CSS or defined in table tag inner]

Example:
<table border="1" width="200">
<tr>
  <td>Mukto</td>
  <td>Online</td> 
  <td>100</td>
</tr>
<tr>
  <td>Tunes</td>
  <td>Web</td> 
  <td>100</td>
</tr>
</table>

Output:
Mukto Online 100
Tunes Web 100

If your need help please watch this video:

HTML Images!!


In HTML images are defined with the <img> tag.

Syntax for defining an image tag:

simple example: <img src="url/location">

HTML Images - with Alt Attribute:
The required alt attribute specifies an alternate text for an image, if the image cannot be displayed then show the "alt" text ("alt" text is very important for on page SEO).

The value of the alt attribute is an author-defined text:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwSn7l-BEulSheIYUMvoNuW8uXazcDDW7ASCLPcr-txeTxQfnxLoXoIVToDGw9FULgAk6Ef1R0-8pAOs5rXb4RnjIXzDKZ2Clpnw30ZoyFHy7BVnGm3l_qSyTOoW-zXGglX8x9xSDpvcM/s1600/webcoach.png" alt="Online Web coach">

Output:
Online Web coach

HTML Images - Set Height and Width of an Image tag:
The height and width attributes are used to specify the height and width of an image ( Height and Width is defined in pixle).

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwSn7l-BEulSheIYUMvoNuW8uXazcDDW7ASCLPcr-txeTxQfnxLoXoIVToDGw9FULgAk6Ef1R0-8pAOs5rXb4RnjIXzDKZ2Clpnw30ZoyFHy7BVnGm3l_qSyTOoW-zXGglX8x9xSDpvcM/s1600/webcoach.png" alt="Online Web coach" width="180" height="42">

HTML Images - Set with Link:
You can connected your image Hyperlink or Link, for example:
<a href="http://onlinewebcoach.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwSn7l-BEulSheIYUMvoNuW8uXazcDDW7ASCLPcr-txeTxQfnxLoXoIVToDGw9FULgAk6Ef1R0-8pAOs5rXb4RnjIXzDKZ2Clpnw30ZoyFHy7BVnGm3l_qSyTOoW-zXGglX8x9xSDpvcM/s1600/webcoach.png" alt="Online Web coach" width="180" height="42"></a>

Output:
Online Web coach

If your need help please watch this video:

HTML Links!!


Links are found in nearly all Web pages. Links allow users to click their way from page to page (Connected another page or link or image).

Hyperlink or Link By default style, links will appear as follows in all browsers:

An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red

HTML Link Syntax
The HTML code for a link is simple. It looks like this:

<a href="http://onlinewebcoach.blogspot.com/">Link text (My Link)</a>
<a href="http://onlinewebcoach.blogspot.com/">Online Web Coach</a>
Output:
Link text (My Link)
Online Web Coach

HTML Links - target Attribute:
The target attribute specifies where to open the linked document (page or link or image).

The example below will open the linked document in a new browser window or a new tab:
Example Code:
<a href="http://onlinewebcoach.blogspot.com/" target="_blank">Online Web Coach</a>

Output:
Online Web Coach
If your need help please watch this video:

HTML Comments!!


HTML comments is the very important for Web designer. You can add comments to your HTML source page by using the following syntax:

<!-- Write your comments here --> right comment.
<!-- Write your comments here --> wrong comment.

Comments never display on your browser (Comment use designer for understanding your source file when see it after long time).

Conditional Comments:
You might stumble upon conditional comments in HTML:

<!--[if IE 8]>
    .... some HTML here ....
<![endif]-->

HTML Paragraphs TAG !!


Paragraphs are defined with the <p> tag in the HTML document.
Example:
<p>This is a HTML paragraph</p>
<p>This is another HTML paragraph</p>

Output:
This is a HTML paragraph
This is another HTML paragraph

HTML Headings Tag!!


Headings are defined with the <h1> to <h6> tags.

Example:

<h1>MY HTML Size 36</h1>
 <h2>MY HTML Size 30</h2>
 <h3>MY HTML Size 24</h3>
<h4>MY HTML Size 18 </h4>
<h5>MY HTML Size 16</h5>
 <h6>MY HTML Size 12/14</h6>

Output:

MY HTML Size 36

MY HTML Size 30

MY HTML Size 24

MY HTML Size 18

MY HTML Size 16
MY HTML Size 12/14


Most important <h1> tag, this use for your website Heading for on page SEO.

HTML Elements !!

HTML elements is everything from the start tag to the end tag.

HTML have tow type of tags, one: start tag is often is called the opening tag, and second: end tag is often called the closing tag.

HTML Element tag:
HTML element starts with a start tag or opening tag and ends with an end tag or closing tag.
The element content is everything between the start and the end tag or opening / closing tag.
Some HTML elements have empty content.
Empty elements are closed in the start tag.

HTML Element Explained:
<p>My first HTML paragraph.</p>

The <p> element:
<p>This is my first HTML paragraph.</p>
The <p> element defines a paragraph in the HTML document.
The element has a start tag <p> and an end or closing tag </p>.
The element content is: This is my first HTML paragraph.

The <body> element:
<body>
<p>This is my first HTML paragraph.</p>
</body>

<body>
<p>This is my first HTML paragraph.</p>
</body>
The <body> element defines the body of the HTML document.
The element has a start tag <body> and an end or closing tag </body>.
The element content is another HTML element (a p element).

The <html> element:

<html>
<body>
<p>This is my first HTML paragraph.</p>
</body>
</html>

The <html> element defines the whole HTML document.
The element has a start tag <html> and an end or closing tag </html>.
The element content is another HTML element (the body element).

Don't Forget the End or Closing Tag:
Some HTML elements might display correctly even if you forget the end tag:

<p>This is a HTML paragraph
The example above works in most browsers, because the closing tag is considered optional.

Never rely on this. Many HTML elements will produce unexpected results and/or errors if you forget the end tag .
[Never forget use End or Closing Tag, must use End or Closing Tag.]

Empty HTML Elements:
HTML elements with no content it's called empty elements.

<br> and <hr/> is an empty element without a closing tag (the <br> tag defines a line break and <hr/> tag defines a line border).

Tip: In XHTML, all elements must be closed. Adding a slash inside the start tag, like <br />, is the proper way of closing empty elements in XHTML.

HTML Editors for make your web page !!

You can edited HTML by using a professional HTML editor like:

1. Notepad++
2. Adobe Dreamweaver
3. Notepad

However, for learning HTML we recommend a text editor like Notepad (Windows) or TextEdit (Mac).

Now I present with Notepad how to create your first HTML page.

Step 1: 
To open Notepad in Windows 7:
Click Start (bottom left on your screen). Click All Programs. Click Accessories. Click Notepad.
To open Notepad in Windows 8 or Windows 8.1:
Open the search bar and Type Notepad.

Or, Just click your Mouse right button now go "New> Text Document".

Step 2: 
Write HTML documents.
Write or copy some HTML into Notepad. For example:

<!DOCTYPE html>
<html>
<body>

<header>
<h1>My First HTML page</h1>
</header>

<p>My first HTML paragraph.</p>

<footer>My first HTML footer</footer>

</body>
</html>
[you can use this code for create your first HTML page ]

Step 3: 
Save the file on your folder or file.
Select File -> Save as in the Notepad menu.
When saving an HTML file, use either the .htm or the .html file extension. There is no difference, it is entirely up to you.
for example your HTML file name "index.html".

Step 4:
View HTML Page in Your Browser and the result will look much like this page:


If your need help please watch this video:

Basic HTML !!

What is HTML?
HTML is a language it's describing for web pages.

HTML means Hyper Text Markup Language or
H = Hyper, T = Text, M = Markup, L = Language.
A markup language is a set of markup tags.
The tags describe document inner contents.
For eample:

<!DOCTYPE html>
<html>
<body>

<header>
<h1>My First HTML page</h1>
</header>

<p>My first HTML paragraph.</p>

<footer>My first HTML footer</footer>

</body>
</html>

Example Describe:
DOCTYPE is defines the document type of HTML.
The tags between <html> and </html> describes the web page.
The tags between <body> and </body> is the visible page inner contents.
The tags <header> and </header> top position on your web page.
The tags between <h1> and </h1> is displayed as a heading on your web page.
The tags between <p> and </p> is displayed as a paragraph on your web page.
The tags between <footer> and </footer> is displayed as a document or section.