Sunday, December 23, 2012

html notes

HTML NOTES

With HTML you can create your own Web site. This tutorial teaches you everything about HTML. HTML is easy to learn - You will enjoy it.
FIRST PROGRAM



My First Heading



My first paragraph.



·       What is HTML?
HTML is a language for describing web pages.
  • HTML stands for Hyper Text Markup Language
  • HTML is not a programming language, it is a markup language
  • A markup language is a set of markup tags
  • HTML uses markup tags to describe web pages
·         HTML Tags
HTML markup tags are usually called HTML tags
  • HTML tags are keywords surrounded by angle brackets like
  • HTML tags normally come in pairs like and
  • The first tag in a pair is the start tag, the second tag is the end tag
  • Start and end tags are also called opening tags and closing tags


HTML Documents = Web Pages
  • HTML documents describe web pages
  • HTML documents contain HTML tags and plain text
  • HTML documents are also called web pages
The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:



My First Heading



My first paragraph.




What You Need
You don't need any tools to learn HTML at W3Schools.
  • You don't need an HTML editor
  • You don't need a web server
  • You don't need a web site
Editing HTML
HTML can be written and edited using many different editors like Dreamweaver and Visual Studio.
However, in this tutorial we use a plain text editor (like Notepad) to edit HTML. We believe using a plain text editor is the best way to learn HTML.

.HTM or .HTML File Extension?

When you save an HTML file, you can use either the .htm or the .html file extension. There is no difference, it is entirely up to you.

HTML Headings
HTML headings are defined with the

to

tags.
Example

This is a heading


This is a heading


This is a heading


Try it yourself »
H1 IS GREATER AND H6 IS SMALLER
HTML Paragraphs
HTML paragraphs are defined with the tag.
Example
This is a paragraph.

This is another paragraph.

Try it yourself »

HTML Links
HTML links are defined with the tag.
Example
This is a link

Try it yourself »
Note: The link address is specified in the href attribute.
(You will learn about attributes in a later chapter of this tutorial).
HTML Images
HTML images are defined with the tag.
Example

HTML Elements
An HTML element is everything from the start tag to the end tag:
Start tag *
Element content
End tag *
This is a paragraph
This is a link



* The start tag is often called the opening tag. The end tag is often called the closing tag.
HTML Element Syntax
  • An HTML element starts with a start tag / opening tag
  • An HTML element ends with an end tag / closing tag
  • The element content is everything between the start and the end tag
  • Some HTML elements have empty content
  • Empty elements are closed in the start tag
  • Most HTML elements can have attributes
HTML Attributes
  • HTML elements can have attributes
  • Attributes provide additional information about an element
  • Attributes are always specified in the start tag
  • Attributes come in name/value pairs like: name="value"

·         HTML Lines

·         The
tag creates a horizontal line in an HTML page.

The hr element can be used to separate content:
·         Example
·         This is a paragraph


This is a paragraph


This is a paragraph

HTML Comments
Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed.
Comments are written like this:
Example
\\ THIS IS A COMMENT

HTML Paragraphs
Paragraphs are defined with the tag.
Example
This is a paragraph

This is another paragraph

HTML Line Breaks
Use the
tag if you want a line break (a new line) without starting a new paragraph:
Example
This is
a para
graph with line breaks

HTML Formatting Tags
HTML uses tags like and for formatting output, like bold or italic text.
These HTML tags are called formatting tags (look at the bottom of this page for a complete reference).
Description: Remark
Often renders as , and renders as .

However, there is a difference in the meaning of these tags:

or defines bold or italic text only.

or means that you want the text to be rendered in a way that the user understands as "important". Today, all major browsers render strong as bold and em as italics. However, if a browser one day wants to make a text highlighted with the strong feature, it might be cursive for example and not bold!



The HTML Tag Should NOT be Used
The tag is deprecated in HTML 4, and removed from HTML5.
The World Wide Web Consortium (W3C) has removed the tag from its recommendations.
In HTML 4, style sheets (CSS) should be used to define the layout and display properties for many HTML elements. 
The example below shows how the HTML could look by using the tag:
Example


This paragraph is in Arial, size 5, and in red text color.






This paragraph is in Verdana, size 3, and in blue text color.


HTML Hyperlinks (Links)
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document.
When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
Links are specified in HTML using the tag.
The tag can be used in two ways:
  1. To create a link to another document, by using the href attribute
  2. To create a bookmark inside a document, by using the name attribute
HTML Link Syntax
The HTML code for a link is simple. It looks like this:
Link text
The href attribute specifies the destination of a link.
Example
Visit google
HTML Links - The target Attribute
The target attribute specifies where to open the linked document.
The example below will open the linked document in a new browser window or a new tab:
Example
Visit google!

HTML Images - The Tag and the Src Attribute
In HTML, images are defined with the tag. 
The tag is empty, which means that it contains attributes only, and has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.
Syntax for defining an image:
<i>some_text</i>

HTML 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 tag). td stands for "table data," and holds the content of a data cell. A tag can contain text, links, images, lists, forms, other tables, etc.
Table Example









row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
How the HTML code above looks in a browser:
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2

HTML Tables and the Border Attribute
If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be useful, but most of the time, we want the borders to show.
To display a table with borders, specify the border attribute:





Row 1, cell 1 Row 1, cell 2

HTML Table Headers
Header information in a table are defined with the tag.
All major browsers display the text in the element as bold and centered.













Header 1 Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
How the HTML code above looks in your browser:
Header 1
Header 2
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2


HTML Unordered Lists
An unordered list starts with the
    tag. Each list item starts with the
  • tag.
The list items are marked with bullets (typically small black circles).

  • Coffee

  • Milk

How the HTML code above looks in a browser:
  • Coffee
  • Milk
HTML Ordered Lists
An ordered list starts with the
    tag. Each list item starts with the
  1. tag.
The list items are marked with numbers.

  1. Coffee

  2. Milk

How the HTML code above looks in a browser:
  1. Coffee
  2. Milk

HTML Definition Lists
A definition list is a list of items, with a description of each item.
The
tag defines a definition list.
The
tag is used in conjunction with
(defines the item in the list) and
(describes the item in the list):

Coffee

- black hot drink

Milk

- white cold drink

How the HTML code above looks in a browser:
Coffee
- black hot drink
Milk
- white cold drink


HTML Forms
HTML forms are used to pass data to a server.
A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.
The
tag is used to create an HTML form:

.
input elements
.




HTML Forms - The Input Element
The most important form element is the input element.
The input element is used to select user information.
An input element can vary in many ways, depending on the type attribute. An input element can be of type text field, checkbox, password, radio button, submit button, and more.
The most used input types are described below.
Text Fields
defines a one-line input field that a user can enter text into:

First name:

Last name:
How the HTML code above looks in a browser:
Top of Form
First name:  
Last name: 
Bottom of Form
Note: The form itself is not visible. Also note that the default width of a text field is 20 characters. 
Password Field
defines a password field:

Password:
How the HTML code above looks in a browser:
Top of Form
Password: 
Bottom of Form
Note: The characters in a password field are masked (shown as asterisks or circles). 
Radio Buttons
defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:

Male

Female
How the HTML code above looks in a browser:
Top of Form
 Male
 Female
Bottom of Form
Checkboxes
defines a checkbox. Checkboxes let a user select ONE or MORE options of a limited number of choices.

I have a bike

I have a car
How the HTML code above looks in a browser:
Top of Form
 I have a bike
 I have a car
Bottom of Form
Submit Button
defines a submit button.
A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input:

Username:

How the HTML code above looks in a browser:
Top of Form
Username:  
Bottom of Form
If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_action.asp". The page will show you the received input.
HTML 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:
  • Frames are not expected to be supported in future versions of HTML
  • Frames are difficult to use. (Printing the entire page is difficult).
  • The web developer must keep track of more HTML documents
The HTML frameset Element
The frameset element holds one or more frame elements. Each frame element can hold a separate document.
The frameset element states HOW MANY columns or rows there will be in the frameset, and HOW MUCH percentage/pixels of space will occupy each of them.
The HTML frame Element
Frame head mein  lagta hai
The tag defines one particular window (frame) within a frameset.
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 document "frame_a.htm" is put into the first column, and the document "frame_b.htm" is put into the second column:

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

HTML Iframes

Syntax for adding an iframe:
The URL points to the location of the separate page.
Iframe - Set Height and Width
The height and width attributes are used to specify the height and width of the iframe.
The attribute values are specified in pixels by default, but they can also be in percent (like "80%").
Example

Try it yourself »

Iframe - Remove the Border
The frameborder attribute specifies whether or not to display a border around the iframe.
Set the attribute value to "0" to remove the border:
Example

Try it yourself »

Use iframe as a Target for a Link
An iframe can be used as the target frame for a link.
The target attribute of a link must refer to the name attribute of the iframe:
Example

Google.com


                                                            
                                                                        End of html



Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)