learn html and css online for begineers

Tuesday, 21 October 2014

Learn HTML online for beginners part 11 html frame

HTML frames

An iframe is used to display a web page in a web pages.

<iframe src="url"></iframe>

Example

iframe withour border

Monday, 20 October 2014

Learn HTML online for beginners part 10 insert form and input, password box, radio button, checkbox, submit button

HTML form and Input

HTML forms

HTML forms are used to pass data to a server

A form can contain input element like text feild, check boxes, radio-button, submit buttons and more.

The <form> tag is used to create an HTML form.

Example

<form>
First name:<input type="text"/><br/> last name:<input type="text"/>
</form>

Password feild

<form>
password:<input type="password" name="pwd"/>
</form>

Radio Button

<form>
<input type="radio" name="sex" value="male"/>male</br>
<input type="radio" name="sex" value="female"/>female
</form>

checkboxes

Submit Button

<form>
<form name="input" action="html_form_action.asp" method="get">
username:<input type="text" name="user"/>
<input type="submit" value="submit"/>
</form>

Learn HTML online for beginners part 9 inset un order list and list style

Table list

An unordered list start with <ul> tag. list item start with <li> tag.
the list are marked with bullet.

Example

<ul>
<li>water</li>
<li>milk</li>
</ul>

water
milk

HTML ordered list

<ol>

<li>water</li>

<li>milk</li>

</ol>

water
milk

more style

<ol type="A">

<li>water</li>

<li>milk</li>

</ol>

<ol type="i">

<li>water</li>

<li>milk</li>

</ol>

<ol type="I">

<li>water</li>

<li>milk</li>

</ol>

<ul type="circle">

<li>water</li>

<li>milk</li>

</ul>

<ul type="square">

<li>water</li>

<li>milk</li>

</ul>

Learn HTML online for beginners part 8 html insert table

HTML table

Tables are defined with the <table> tag.
a table is divided into Row (<tr> tag) and each row is divided into cells (<td> tag) td stands for "table data" and hold the content of a data cell. A <td> tag can contain text, link, images, lists, forms, other tables etc.

example

<table border="1">
<tr>
<td>Serial no</td>
<td>Name</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>

</tr>

<tr>
<td>2</td>
<td>smith</td>

</tr>

Table caption

<table border="1">

<caption>your text</caption>

Learn HTML online for beginners part 7 html formatiing style fonts, color and size

HTML STYLE- Background color

Change your background color by using background color tag this tag use in body.

Example

<body style="background-color: yellow;">

<h2 style="background-color: red;">this is heading</h2>

<p style="background-color:green;">this is paragraph</p>

HTML STYLE fonts, color and size

<h1 style="font-family:verdana;"> this is heading</h1>

<p style="font-family:arial;color:red; font-size:20px;"> this is paragraph</p>

Learn HTML online for beginners part 6 hyperlink tutorial

HTML Hyperlink (Links)

A hyperlink (links) is a word, group to words, or image that you can click on to jump to a new document or a new section with in the current document.

when you move the cursor over a link in a webpages, the arrow will trun into a hand.
Link are specified in HTML using the <a> tag.

the <a> tag can be used in two ways.
1. to create a link to another document by using the href attributes.
2. to create a bookmark inside a document by using the name attribute.

HTML link

Example

<a href="http://www.google.com"> Go to google</a>

If you use "_blank" the link will open in a new window or tab.

Example

<a href="http://www.google.com" target="_blank">Go to google</a>

Learn HTML online for beginners part 5 html abbr tag, text direction and delete and insert tag

HTML abbr tag

This attribute is used to show the spalled out version when holding the mouse pointer over the abbreviation.

example

<p>the<abbr title="world health organization">WHO</abbr> was founded in 1948.</p>

Text direction

The next line will be written from the right to the left.
<b do dir="rtl">
hello
</bdo>

Output :- olleh

Delected and inserted text

<p> my favourite color is <del>blue</del> <ins>Red</ins></p>

Browsers will strike through deleted text and underline inserted text.