অয়নওব্লগ › বিস্তারিত পোস্টঃ

Learning HTML

২৪ শে ডিসেম্বর, ২০১০ রাত ৮:২৬

You must learn html to make website yourself

Subject:

HTML HOME,HTML Introduction,HTML Elements,HTML Basic Tags,HTML Attributes

HTML Formatting

HTML Entities

HTML Links

HTML Frames

HTML Tables

HTML Lists

HTML Forms

HTML Images

HTML Background

HTML Colors

HTML Colorvalues

HTML Colornames

HTML Quick List

[email protected]

Get,set,go

What is an HTML File?

HTML stands for Hyper Text Markup Language

An HTML file is a text file containing small markup tags

The markup tags tell the Web browser how to display the page

An HTML file must have an htm or html file extension

An HTML file can be created using a simple text editor

Do You Want to Try It?

If you are running Windows, start Notepad.

If you are on a Mac, start SimpleText.

In OSX start TextEdit and change the following preferences: Open the "Format" menu and select "Plain text" instead of "Rich text". Then open the "Preferences" window under the "Text Edit" menu and select "Ignore rich text commands in HTML files". Your HTML code will probably not work if you do not change the preferences above!

Type in the following text:

Save the file as "mypage.htm".

Start your Internet browser. Select "Open" (or "Open Page") in the File menu of your browser. A dialog box will appear. Select "Browse" (or "Choose File") and locate the HTML file you just created - "mypage.htm" - select it and click "Open". Now you should see an address in the dialog box, for example "C:MyDocumentsmypage.htm". Click OK, and the browser will display the page

Example Explained

The first tag in your HTML document is . This tag tells your browser that this is the start of an HTML document. The last tag in your document is . This tag tells your browser that this is the end of the HTML document.

The text between the tag and the tag is header information. Header information is not displayed in the browser window.

The text between the tags is the title of your document. The title is displayed in your browser's caption.<br /> <br/><br /> <br/>The text between the <body> tags is the text that will be displayed in your browser.<br /> <br/><br /> <br/>The text between the <b> and </b> tags will be displayed in a bold font.<br /> <br/><br /> <br/><br /> <br/>HTM or HTML Extension?<br /> <br/><br /> <br/>When you save an HTML file, you can use either the .htm or the .html extension. We have used .htm in our examples. It might be a bad habit inherited from the past when some of the commonly used software only allowed three letter extensions.<br /> <br/><br /> <br/>With newer software we think it will be perfectly safe to use .html.<br /> <br/>Note on HTML Editors:<br /> <br/><br /> <br/>You can easily edit HTML files using a WYSIWYG (what you see is what you get) editor like FrontPage or Dreamweaver, instead of writing your markup tags in a plain text file.<br /> <br/><br /> <br/>However, if you want to be a skillful Web developer, we strongly recommend that you use a plain text editor to learn your primer HTML.<br /> <br/>Frequently Asked Questions<br /> <br/><br /> <br/>Q: After I have edited an HTML file, I cannot view the result in my browser. Why?<br /> <br/>A: Make sure that you have saved the file with a proper name and extension like "c:mypage.htm". Also make sure that you use the same name when you open the file in your browser. <br /> <br/><br /> <br/>Q: I have edited an HTML file, but the changes don't show in the browser. Why?<br /> <br/>A: A browser caches pages so it doesn't have to read the same page twice. When you have modified a page, the browser doesn't know that. Use the browser's refresh/reload button to force the browser to reload the page. <br /> <br/><br /> <br/>Q: What browser should I use?<br /> <br/>A: You can do all the training with all of the well-known browsers, like Internet Explorer, Firefox, Netscape, or Opera. However, some of the examples in our advanced classes require the latest versions of the browsers.<br /> <br/><br /> <br/>Q: Does my computer have to run Windows? What about a Mac?<br /> <br/>A: You can do all your training on a non-Windows computer like a Mac.<br /> <br/><br /> <br/>HTML Elements<br /> <br/> <br /> <br/><br /> <br/>HTML documents are text files made up of HTML elements.<br /> <br/><br /> <br/>HTML elements are defined using HTML tags.<br /> <br/>HTML Tags<br /> <br/>HTML tags are used to mark-up HTML elements<br /> <br/>HTML tags are surrounded by the two characters < and ><br /> <br/>The surrounding characters are called angle brackets<br /> <br/>HTML tags normally come in pairs like <b> and </b><br /> <br/>The first tag in a pair is the start tag, the second tag is the end tag<br /> <br/>The text between the start and end tags is the element content<br /> <br/>HTML tags are not case sensitive, <b> means the same as <B><br /> <br/>HTML Elements<br /> <br/><br /> <br/>Remember the HTML example from the previous page:<html><br /> <br/><head><br /> <br/><title>Title of page

This is my first homepage. This text is bold

This is an HTML element:This text is bold

The HTML element starts with a start tag:

The content of the HTML element is: This text is bold

The HTML element ends with an end tag:

The purpose of the tag is to define an HTML element that should be displayed as bold.

This is also an HTML element:

This is my first homepage. This text is bold

This HTML element starts with the start tag , and ends with the end tag .

The purpose of the tag is to define the HTML element that contains the body of the HTML document.

Why do We Use Lowercase Tags?

We have just said that HTML tags are not case sensitive: means the same as . If you surf the Web, you will notice that plenty of web sites use uppercase HTML tags in their source code. We always use lowercase tags. Why?

If you want to follow the latest web standards, you should always use lowercase tags. The World Wide Web Consortium (W3C) recommends lowercase tags in their HTML 4 recommendation, and XHTML (the next generation HTML) demands lowercase tags.

Basic HTML Tags

The most important tags in HTML are tags that define headings, paragraphs and line breaks.

The best way to learn HTML is to work with examples. We have created a very nice HTML editor for you. With this editor, you can edit the HTML source code if you like, and click on a test button to view the result.

Try it Yourself - Examples

A very simple HTML document

This example is a very simple HTML document, with only a minimum of HTML tags. It demonstrates how the text inside a body element is displayed in the browser.

Simple paragraphs

This example demonstrates how the text inside paragraph elements is displayed in the browser.

(You can find more examples at the bottom of this page)

Headings

Headings are defined with the

to
tags.
defines the largest heading.
defines the smallest heading.
This is a heading

This is a heading

This is a heading

This is a heading

This is a heading

This is a heading

HTML automatically adds an extra blank line before and after a heading.

Paragraphs

Paragraphs are defined with the
tag.
This is a paragraph

This is another paragraph

HTML automatically adds an extra blank line before and after a paragraph.

Don't Forget the Closing Tag

You might have noticed that paragraphs can be written without end tags
:
This is a paragraph

This is another paragraph

The example above will work in most browsers, but don't rely on it. Future version of HTML will not allow you to skip ANY end tags.

Closing all HTML elements with an end tag is a future-proof way of writing HTML. It also makes the code easier to understand (read and browse) when you mark both where an element starts and where it ends.

Line Breaks

The
tag is used when you want to break a line, but don't want to start a new paragraph. The
tag forces a line break wherever you place it.
This
is a para
graph with line breaks

Try it yourself

The
tag is an empty tag. It has no end tag like
, since a closing tag doesn't make any sense.

or

More and more often you will see the
tag written like this:

Because the
tag has no end tag (or closing tag), it breaks one of the rules for future HTML (the XML based XHTML), namely that all elements must be closed.

Writing it like
is a future proof way of closing (or ending) the tag inside the opening tag, accepted by both HTML and XML.

Comments in HTML

The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.

Note that you need an exclamation point after the opening bracket, but not before the closing bracket.

Recap on HTML Elements

Each HTML element has an element name (body, h1, p, br)

The start tag is the name surrounded by angle brackets:

The end tag is a slash and the name surrounded by angle brackets

The element content occurs between the start tag and the end tag

Some HTML elements have no content

Some HTML elements have no end tag

Basic Notes - Useful Tips

When you write HTML text, you can never be sure how the text is displayed in another browser. Some people have large computer displays, some have small. The text will be reformatted every time the user resizes his window. Never try to format the text in your editor by adding empty lines and spaces to the text.

HTML will truncate the spaces in your text. Any number of spaces count as one. Some extra information: In HTML a new line counts as one space.

Using empty paragraphs
to insert blank lines is a bad habit. Use the
tag instead. (But don't use the
tag to create lists. Wait until you have learned about HTML lists.)

HTML automatically adds an extra blank line before and after some elements, like before and after a paragraph, and before and after a heading.

We use a horizontal rule (the
tag), to separate the sections in our tutorials.

More Examples

More paragraphs

This example demonstrates some of the default behaviors of paragraph elements.

Line breaks

This example demonstrates the use of line breaks in an HTML document.

Poem problems

This example demonstrates some problems with HTML formatting.

Headings

This example demonstrates the tags that display headings in an HTML document.

Horizontal rule

This example demonstrates how to insert a horizontal rule.

Hidden comments

This example demonstrates how to insert a hidden comment in the HTML source code.

Basic HTML Tags

If you lookup the basic HTML tags in the reference below, you will see that the reference contains additional information about tag attributes.

You will learn more about HTML tag attributes in the next chapter of this tutorial.Tag Description

HTML Attributes

Attributes provide additional information to an HTML element.

HTML Tag Attributes

HTML tags can have attributes. Attributes provide additional information to an HTML element.

Attributes always come in name/value pairs like this: name="value".

Attributes are always specified in the start tag of an HTML element.

Attributes Example 1:

defines the start of a heading.

has additional information about the alignment.

Try it yourself: Center aligned heading

Attributes Example 2:

defines the body of an HTML document.

has additional information about the background color.

Try it yourself: Background color

Attributes Example 3:

defines an HTML table. (You will learn more about HTML tables later)

has additional information about the border around the table.

Use Lowercase Attributes

Attributes and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation, and XHTML demands lowercase attributes/attribute values.

Always Quote Attribute Values

Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single style quotes are also allowed.

In some rare situations, like when the attribute value itself contains quotes, it is necessary to use single quotes:

name='John "ShotGun" Nelson'

HTML Text Formatting

HTML defines a lot of elements for formatting output, like bold or italic text.

Below are a lot of examples that you can try out yourself:

Examples

Text formatting

This example demonstrates how you can format text in an HTML document.

Preformatted text

This example demonstrates how you can control the line breaks and spaces with the pre tag.

"Computer output" tags

This example demonstrates how different "computer output" tags will be displayed.

Address

This example demonstrates how to write an address in an HTML document.

Abbreviations and acronyms

This example demonstrates how to handle an abbreviation or an acronym.

Text direction

This example demonstrates how to change the text direction.

Quotations

This example demonstrates how to handle long and short quotations.

Deleted and inserted text

This example demonstrates how to mark a text that is deleted or inserted to a document.

How to View HTML Source

Have you ever seen a Web page and wondered "Hey! How did they do that?"

To find out, click the VIEW option in your browser's toolbar and select SOURCE or PAGE SOURCE. This will open a window that shows you the HTML code of the page.

Text Formatting Tags.

"Computer Output" Tags

Citations, Quotations, and Definition Tags

HTML Character Entities

Some characters like the < character, have a special meaning in HTML, and therefore cannot be used in the text.

To display a less than sign (<) in HTML, we have to use a character entity.

Character Entities

Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of an HTML tag. If we want the browser to actually display these characters we must insert character entities in the HTML source.

A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (.

To display a less than sign in an HTML document we must write: < or <

The advantage of using a name instead of a number is that a name is easier to remember. The disadvantage is that not all browsers support the newest entity names, while the support for entity numbers is very good in almost all browsers.

Note that the entities are case sensitive.

This example lets you experiment with character entities: Character Entities

Non-breaking Space

The most common character entity in HTML is the non-breaking space.

Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will remove 9 of them. To add spaces to your text, use the character entity.

The Most Common Character Entities:

Some Other Commonly Used Character Entities:

Take a cup of tea

Link

Examples

Create hyperlinks

This example demonstrates how to create links in an HTML document.

An image as a link

This example demonstrates how to use an image as a link.

You can also use an image as a link:

(You can find more examples at the bottom of this page)

The Anchor Tag and the Href Attribute

HTML uses the (anchor) tag to create a link to another document.

An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.

The syntax of creating an anchor: Text to be displayed

The tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.

This anchor defines a link to google:Visit W3Schools!

The line above will look like this in a browser:

Visit google!

The Target Attribute

With the target attribute, you can define where the linked document will be opened.

The line below will open the document in a new browser window:
target="_blank">Visit google!

The Anchor Tag and the Name Attribute

The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for.

Below is the syntax of a named anchor:Text to be displayed

The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use.

The line below defines a named anchor:Useful Tips Section

You should notice that a named anchor is not displayed in a special way.

To link directly to the "tips" section, add a # sign and the name of the anchor to the end of a URL, like this:

Jump to the Useful Tips Section

A hyperlink to the Useful Tips Section from WITHIN the file "html_links.asp" will look like this: Jump to the Useful Tips Section

Basic Notes - Useful Tips

Always add a trailing slash to subfolder references. If you link like this: href="http://www.w3schools.com/html", you will generate two HTTP requests to the server, because the server will add a slash to the address and create a new request like this: href="http://www.google.com/html/"

Named anchors are often used to create "table of contents" at the beginning of a large document. Each chapter within the document is given a named anchor, and links to each of these anchors are put at the top of the document.

If a browser cannot find a named anchor that has been specified, it goes to the top of the document. No error occurs.

More Examples

Open a link in a new browser window

This example demonstrates how to link to another page by opening a new window, so that the visitor does not have to leave your Web site.

Last Page

If you set the target attribute of a link to "_blank",

the link will open in a new window.

Link to a location on the same page

This example demonstrates how to use a link to jump to another part of a document.

See also Chapter 4.

Chapter 1

This chapter explains ba bla bla

Chapter 2

This chapter explains ba bla bla

Break out of a frame

This example demonstrates how to break out of a frame, if your site is locked in a frame.

Locked in a frame?

target="_top">Click here!

Create a mailto link

This example demonstrates how to link to a mail message (will only work if you have mail installed).

This is a mail link:

[email protected]?subject=Hello%20again">

Send Mail

Note: Spaces between words should be replaced by %20 to ensure that the browser will display your text properly.

Create a mailto link 2

This example demonstrates a more complicated mailto link.

Link Tags

HTML Frames

Examples

Vertical frameset

This example demonstrates how to make a vertical frameset with three different documents.

Horizontal frameset

This example demonstrates how to make a horizontal frameset with three different documents.

(You can find more examples at the bottom of this page)

Frames

With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others.

The disadvantages of using frames are:

The web developer must keep track of more HTML documents

It is difficult to print the entire page

The Frameset Tag

The tag defines how to divide the window into frames

Each frameset defines a set of rows or columns

The values of the rows/columns indicate the amount of screen area each row/column will occupy

The Frame Tag

The tag defines what HTML document to put into each frame

In the example below we have a frameset with two columns. The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window. The HTML document "frame_a.htm" is put into the first column, and the HTML document "frame_b.htm" is put into the second column:

Note: The frameset column size value can also be set in pixels (cols="200,500"), and one of the columns can be set to use the remaining space (cols="25%,*").

Basic Notes - Useful Tips

If a frame has visible borders, the user can resize it by dragging the border. To prevent a user from doing this, you can add noresize="noresize" to the tag.

Add the

Mixed frameset

This example demonstrates how to make a frameset with three documents, and how to mix them in rows and columns.

Frameset with noresize="noresize"

This example demonstrates the noresize attribute. The frames are not resizable. Move the mouse over the borders between the frames and notice that you can not move the borders.

Navigation frame

This example demonstrates how to make a navigation frame. The navigation frame contains a list of links with the second frame as the target. The file called "tryhtml_contents.htm" contains three links. The source code of the links:

Frame a

Frame b

Frame c

The second frame will show the linked document.

name="showframe">

Inline frame

This example demonstrates how to create an inline frame (a frame inside an HTML page).

Some older browsers don't support iframes.

If they don't, the iframe will not be visible.

Jump to a specified section within a frame

This example demonstrates two frames. One of the frames has a source to a specified section in a file. The specified section is made with in the "link.htm" file.

Jump to a specified section with frame navigation

This example demonstrates two frames. The navigation frame (content.htm) to the left contains a list of links with the second frame (link.htm) as a target. The second frame shows the linked document. One of the links in the navigation frame is linked to a specified section in the target file. The HTML code in the file "content.htm" looks like this: Link without Anchor
Link with Anchor.

Frame Tags

HTML Tables

With HTML you can create tables.

Examples

Tables

This example demonstrates how to create tables in an HTML document.

Table borders

This example demonstrates different table borders.

(You can find more examples at the bottom of this page)

Tables

Tables are defined with the

tag. A table is divided into rows (with the tag), and each row is divided into data cells (with the , and elements are seldom used, because of bad browser support. Expect this to change in future versions of XHTML. If you have Internet Explorer 5.0 or newer, you can view a working example in our XML tutorial.

More Examples

Table with no border

This example demonstrates a table with no borders.

Headings in a table

This example demonstrates how to display table headers.

Empty cells

This example demonstrates how to use " " to handle cells that have no content.

Table with a caption

This example demonstrates a table with a caption.

Table cells that span more than one row/column

This example demonstrates how to define table cells that span more than one row or one column.

Tags inside a table

This example demonstrates how to display elements inside other elements.

tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

How it looks in a browser:

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

Tables and the Border Attribute

If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.

To display a table with borders, you will have to use the border attribute:

Row 1, cell 1 Row 1, cell 2

Headings in a Table

Headings in a table are defined with the tag.

Heading Another Heading

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

How it looks in a browser:

Heading Another Heading

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

Empty Cells in a Table

Table cells with no content are not displayed very well in most browsers.

row 1, cell 1 row 1, cell 2

row 2, cell 1

How it looks in a browser:

row 1, cell 1 row 1, cell 2

row 2, cell 1

Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border).

To avoid this, add a non-breaking space ( ) to empty data cells, to make the borders visible:

row 1, cell 1 row 1, cell 2

row 2, cell 1

How it looks in a browser:

Same

Basic Notes - Useful Tips

The

This is a paragraph

This is another paragraph

This cell contains a table:

A B

C D

This cell contains a list

apples

bananas

pineapples

HELLO

Cell padding

This example demonstrates how to use cellpadding to create more white space between the cell content and its borders.

Without cellpadding:

First Row

Second Row

With cellpadding:

cellpadding="10">

First Row

Second Row

Cell spacing

This example demonstrates how to use cellspacing to increase the distance between the cells.

Add a background color or a background image to a table

This example demonstrates how to add a background to a table.

Add a background color or a background image to a table cell

This example demonstrates how to add a background to one or more table cells.

Cell backgrounds:

First Row

background="bgdesert.jpg">

Second Row

Align the content in a table cell

This example demonstrates how to use the "align" attribute to align the content of cells, to create a "nice-looking" table.

Money spent on.... January February

Clothes $241.10 $50.20

Make-Up $30.00 $44.45

Food $730.40 $650.00

Sum $1001.50 $744.65

The frame attribute

This example demonstrates how to use the "frame" attribute to control the borders around the table.

Visit http://www.w3schools.com

The frame and border attributes

How to use the "frame" and "border" attributes to control the borders around the table.

Table Tags

**Take a rest

HTML Lists

HTML supports ordered, unordered and definition lists.

Examples

An unordered list

This example demonstrates an unordered list.

An ordered list

This example demonstrates an ordered list.

(You can find more examples at the bottom of this page)

Unordered Lists

An unordered list is a list of items. The list items are marked with bullets (typically small black circles).

An unordered list starts with the
tag. Each list item starts with the
tag.

Coffee

Milk

Here is how it looks in a browser:

Coffee

Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Ordered Lists

An ordered list is also a list of items. The list items are marked with numbers.

An ordered list starts with the
tag. Each list item starts with the
tag.

Coffee

Milk

Here is how it looks in a browser:

1.Coffee

2.Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Definition Lists

A definition list is not a list of items. This is a list of terms and explanation of the terms.

A definition list starts with the
tag. Each definition-list term starts with the
tag. Each definition-list definition starts with the
tag.

Coffee

Black hot drink

Milk

White cold drink

Here is how it looks in a browser:

Coffee

Black hot drink

Milk

White cold drink

Inside a definition-list definition (the
tag) you can put paragraphs, line breaks, images, links, other lists, etc.

More Examples

Different types of ordered lists

This example demonstrates different types of ordered lists.

Different types of unordered Lists

This example demonstrates different types of unordered lists.

Numbered list:

Apples

Bananas

Lemons

Oranges

Letters list:

Apples

Bananas

Lemons

Oranges

Lowercase letters list:

Apples

Bananas

Lemons

Oranges

Roman numbers list:

Apples

Bananas

Lemons

Oranges

Lowercase Roman numbers list:

Apples

Bananas

Lemons

Oranges

Nested list

This example demonstrates how you can nest lists.

A nested List:

Coffee

Tea

Black tea

Green tea

Milk

Nested list 2

This example demonstrates a more complicated nested list.

Definition list

This example demonstrates a definition list.

List Tags

HTML Forms and Input

HTML Forms are used to select different kinds of user input.

Examples

Text fields

This example demonstrates how to create text fields on an HTML page. A user can write text in a text field.

First name:

Last name:

Password fields

This example demonstrates how to create a password field on an HTML page.

Username:

Password:

Note that when you type characters in a password field, the browser displays asterisks or bullets instead of the characters.

(You can find more examples at the bottom of this page)

Forms

A form is an area that can contain form elements.

Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.

A form is defined with the
tag.

Input

The most used form tag is the tag. The type of input is specified with the type attribute. The most commonly used input types are explained below.

Text Fields

Text fields are used when you want the user to type letters, numbers, etc. in a form.

First name:

Last name:

How it looks in a browser:

First name:

Last name:

Note that the form itself is not visible. Also note that in most browsers, the width of the text field is 20 characters by default.

Radio Buttons

Radio Buttons are used when you want the user to select one of a limited number of choices.

Male

Female

How it looks in a browser:

Male

Female

Note that only one option can be chosen.

Checkboxes

Checkboxes are used when you want the user to select one or more options of a limited number of choices.

I have a bike:

I have a car:

I have an airplane:

How it looks in a browser:

I have a bike: *

I have a car: *

I have an airplane:*

The Form's Action Attribute and the Submit Button

When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.

method="get">

Username:

How it looks in a browser:

Username:_

If you type some characters in the text field above, and click the "Submit" button, you will send your input to a page called "html_form_action.asp". That page will show you the received input.

More Examples

Checkboxes

This example demonstrates how to create check-boxes on an HTML page. A user can select or unselect a checkbox.

I have a bike:

I have a car:

I have an airplane:

Radio buttons

This example demonstrates how to create radio-buttons on an HTML page.

Male:

name="Sex" value="male">

Female:

name="Sex" value="female">

When a user clicks on a radio-button, the button becomes checked, and all other buttons with the same name become unchecked

Simple drop down box

This example demonstrates how to create a simple drop-down box on an HTML page. A drop-down box is a selectable list.

Another drop down box

This example demonstrates how to create a simple drop-down box with a pre-selected value.

Textarea

This example demonstrates how to create a text-area (a multi-line text input control). A user can write text in the text-area. In a text-area you can write an unlimited number of characters.

This example cannot be edited

because our editor uses a textarea

for input,

and your browser does not allow

a textarea inside a textarea.

<br /> <br/>The cat was playing in the garden.<br /> <br/></p> <h3><img class="cbubble" src="http://www.somewhereinblog.net/gui/mobile/cbubble.gif" width="18" height="16" alt="মন্তব্য" /> <a href='#comments'>০ টি</a> <img class="rateicon" src="http://www.somewhereinblog.net/gui/mobile/rateicon.gif" width="18" height="16" alt="রেটিং" /> <a href='#rating'>+০/-০</a></h3> </div> <div class="postbrief"> </div> </div> <script async src="//"></script>  <ins class="adsbygoogle" style="display:inline-block;width:320px;height:50px" data-ad-client="ca-pub-3882859248182565" data-ad-slot="1121788522"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="csection"> <h4>মন্তব্য (০) <a href='#commentform'>মন্তব্য লিখুন</a></h4> <a name="commentform"></a> <div class="csection" id='commentform'> <h4>আপনার মন্তব্য লিখুনঃ</h4> <div class="notifications"> মন্তব্য করতে <a title="login" href="/mobile/login">লগ ইন</a> করুন </div> </div> <h4>আলোচিত ব্লগ</h4> <div class="csection"><ul class="optlist"><li><a href="/mobile/blog/rajib128/30378583">প্রিয় কন্যা আমার- ৮০</a></li><li><a href="/mobile/blog/shahaziz1957/30378594"><strong>শাহ সাহেবের ডায়রি ।। ১৬ বছরে রাজনৈতিক স্পেস না পাওয়া জামায়াতের এমন সমাবেশ ‘অবিশ্বাস্য’:</strong></a></li><li><a href="/mobile/blog/Opolokpolok/30378599">নিয়মিত জোয়ার ভাটার ঢেউ আর সুনামির ঢেউ আলাদা</a></li><li><a href="/mobile/blog/smksabuj/30378603">“নুহাশ পল্লীর যাদুকর“</a></li><li><a href="/mobile/blog/Kutub009/30378611">এনসিপি: 'ন্যাশনাল ক্যাচাল পার্টি'-র অসঙ্গতিপূর্ণ পদযাত্রা ।</a></li></ul></div><br> <script type="text/javascript"> var post_id= 29295444; </script>  <div class="csection"> <ul class="optlist"> <li><a href='/mobile/onlineusers'>অনলাইনে আছেনঃ <span id="bloger">১৬</span> জন ব্লগার ও <span id="visitor">২২৭</span> জন ভিজিটর (২১৭ জন মোবাইল থেকে)</a></li> <li><a href='/mobile/recentcomments'>সাম্প্রতিক মন্তব্য</a></li>  <li><a href='/mobile/blog/noticeblog'>নোটিশবোর্ড ব্লগ</a></li> </ul> </div> <div class="csection" align="center" style="font-size: 80%">  <p><a href="/mobile/fullversion/on" onclick="ga('send', 'event', 'link', 'click', 'full version link clicked');">full version</a> </p> <p>©somewhere in net ltd.</p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(document).ready(function(){ var request = $.post("/mobile/insert_visitors",{"mobile":"yes"}), chained = request.then(function( ) { return $.post('/mobile/visitors', {mobile:'yes'} ); }); chained.done(function( data ) { $('#bloger').html(data.user_loggedin); $('#visitor').html(data.visitor); }); }) </script> <script type="text/javascript"> $(function () { $.ajax({ type: "POST", url: "/api/increase_post_num_view/", data: { post_id: post_id } }); }); </script> <script type="text/javascript"> var tb_pathToImage = "http://www.somewhereinblog.net//images/loadingAnimation.gif"; function changeKeyBoard(kbselector) { var kb = kbselector; if (kb=="unijoy"){ isEnglishOn = "false"; setCookie('phonetic','false',3); setCookie('bijoykb','false',3); setCookie('english','false',3); } else if(kb=="phonetic"){ isEnglishOn = "false"; setCookie('phonetic','true',3); setCookie('bijoykb','false',3); setCookie('english','false',3); } else if(kb=="bijoy"){ isEnglishOn = "false"; setCookie('phonetic','false',3); setCookie('bijoykb','true',3); setCookie('english','false',3); } else if(kb=="english"){ isEnglishOn = "true"; setCookie('phonetic','false',3); setCookie('bijoykb','false',3); setCookie('english','true',3); } } propagate(); </script> </body> </html>


	নির্বাচিত পোস্ট \| লগইন \| রেজিস্ট্রেশন করুন \| রিফ্রেস

Money spent on....	January	February
Clothes	$241.10	$50.20
Make-Up	$30.00	$44.45
Food	$730.40	$650.00
Sum	$1001.50	$744.65