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.

Learn HTML online for beginners part 4 insert line comment and pre tag

HTML line

The <hr/> tag create a horizonal line in a HTML Pages.The hr element can be used to separate content.

Example
<p> this is a paragraph</p>
<hr/>
<p> this is a paragraph</p>
<hr/>
<p> this is a paragraph</p>

Preformatted text

with <pre> tag type where you want to and output look like your input.

HTML Comment

Comments can be inserted into the HTML code ti make. it more readable and understandable.comments are ignored by the browser and not displayed.


Note:- There are a exclamation point after the opening bracket, but not before the closing bracket . comment always show in green color.

Example

HTML text formatting

Tags Descriptions
<b> bold tag
<big> big text
<em> emphasized text
<i> italic
<small> small text
<strong> strong text
<sub> subscript text
<sup> superscript text
<ins> inserted text
<del> deleted text
<pre> preformatted text

Saturday, 18 October 2014

Learn HTML online for beginners part 3

HTML Links

you can insert another website or page link with link tag.
HTML links are defined with <a> tag.

Example

<a href="https://learncsshtmlonline.blogspot.com">go to this website</a>
This link address is specified in the href attribute.

HTML Images

You can insert any picture in our website with Image tag.

Example

img stands for image tag
src means source where your image save.
you must type .jpg/.jpeg with image name.

Learn HTML online for beginners part 2

HTML Heading

Heading
Heading are defined with the <h1> to <h6> tag. this h tag change the size and style of heading

Paragraphs

Paragraph are defined by <p> tag.
It starts with <p> tag and end with </p> tag.

Title

Title tags are use for insert title of the webpages. It is write in head tag Its starts like
<title>your title</title>

Example

<!DOCTYPE html>
<html>
<head>
<title>Learn Html and CSS online</title>
</head>
<body>
<h1>This is h1 heading</h1>
<h2>This is h2 heading</h2>
<h3>This is h3 heading</h3>
<h4>This is h4 heading</h4>
<h5>This is h5 heading</h5>
<h6>This is h6 heading</h6>
<p>Hello friends welcome to learncsshtmlonline.blogspot.com. In this blog learn html and css in simple ways </p>
</body>
</html>

Learn HTML online for beginners part 1

What is HTML?

HTML is a language for describing web pages. HTML stands fro Hyper Text Markup Language. HTML is not a programming language, it is a markup language. Markup language is a set of markup tags all the tags are describe page content.

We will learn HTML step by step.

Html tags
Html markup tags are mainly called HTML tags.
start and end tags are also called opening tags and closing tags.
HTML tags are keyword (tag name) Surrounded by angle brackets like <html>
HTML tag come in pair like <html> and </html>
the first tag in a pair is the start tag and the second tag is the end tag.
the end tag is written like the start tag with the forword slash before the tag name.

Use Notepad++ software for using HTML

Example

<!DOCTYPE html>
<html>
<body>
<h1>Welcome to learn html online</h1>
<p> learn html and css online</p>
</body>
</html>

the text between <html> describe the webpage.
the text between <body> is visible page content.
the text between <h1> is display heading.
the text between <p> is display as Paragraph.

Note:- <!DOCTYPE html> use for the latest Html 5.

Next

Tuesday, 21 October 2014

HTML frames

Example

iframe withour border

Monday, 20 October 2014

HTML form and Input

HTML forms

Example

Password feild

Radio Button

checkboxes

Submit Button

Table list

Example

HTML ordered list

more style

HTML table

example

Table caption

HTML STYLE- Background color

Example

HTML STYLE fonts, color and size

HTML Hyperlink (Links)

HTML link

Example

Example

HTML abbr tag

example

Text direction

Delected and inserted text

HTML line

Preformatted text

HTML Comment

Example

Saturday, 18 October 2014

HTML Links

Example

HTML Images

Example

HTML Heading

Paragraphs

Title

Example

Friday, 17 October 2014

What is HTML?

We will learn HTML step by step.