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:


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:


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.