HTML NOTES

Poetry Welcome page KHANA KABAH SMS World Movie Songs HTML Notes Mobile Rates Fun Chinese Virus Download Naats Free Downloads Shortcut Keys Softwares/Notes Only For Girls Form for website Order My Photos Guest Book Contact

Salman zia www.salmanzia.20m.com (HTML Notes)
(Page #1) HTML NOTES www.salmanzia.20m.com Salman zia, B.com (IT)

What is a 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.
Definition:-
It is not a programming language, but it describes the web browser how the text should be displayed. We instruct the web browser by using tags <>.* Hyper is the opposite of linear. It used to be that computer programs

had to move in a linear fashion. This before this, this before this,

and so on. HTML does not hold to that pattern and allows the person

viewing the World Wide Web page to go anywhere, any time they want.

* Text is what you will use. Real, honest to goodness English letters.
* Mark up is what you will do. You will write in plain English and then

mark up what you wrote.

* Language because they needed something that started with "L" to

finish HTML and Hypertext Markup Louie didn't flow correctly. Because it's a language, really -- but the language is plain English.

◊TAGS ( , Label)
Clearly defined tasks, there are some sort of symbols to perform a specific task or purpose when displayed as webpage.
Kinds of Tags

¡ñ Container tags

Those tags who comes in pairs, i.e. starting & ending tag.

¡ñ Empty tags

Those tags that does not have ending tag. i.e. <br>.

◊ ATTRIBUTE ( ) They describe or explain a tag. We can say that these are the properties of a tag.
They r written inside the angular brackets < > of starting tags by separating with a space.
Salman zia (www.salmanzia.20m.com)
Written & composed BY: Salman zia
Salman zia www.salmanzia.20m.com (HTML Notes) (Page # 2)
Do You Want to Try It?
If you are running Windows, start Notepad. You will write the HTML document on the word processor, or Notepad, WordPad or Simple Text. When you are finished creating the HTML document, you’ll then save the file as "mypage.html".

And to open the document in a browser, like Netscape Navigator. The browser will interpret the HTML commands for you and display the Webpage.

▪ BASIC TAGS
Basic HTML Tags
Tags Description<html> Defines an HTML document
<head> Defines information about the document
<title> Defines the document title
<Body> Defines the document's body
<h1>to<h6> Defines header 1 to header 6
<p> Defines a paragraph
<Br> Inserts a single line break
<hr> Defines a horizontal rule <b> Defines as bold
<I> Defines as italic
<u> Defines as underline <Pre> Defines as care of spaces & tabs
<Center> // as places enclosed items in the center of the page.
▪ PARAGRAPH TAG :- <p> ……..</p> This tag indicates the beginning of the paragraph. There are some attributes of this tag.
→ Align="left": aligns the paragraph to the left, which is default.
→ Align="right": aligns the paragraph to the right on page.
→ Align="center": aligns the paragraph to the centre of the page.
→ Align="justify": justifies the paragraph contents on the page ALL RIGHTS RESERVED© Written & composed BY: Salman zia
Salman zia www.salmanzia.20m.com (HTML Notes) (page # 3)
▪ LINK TAG :- <A> ………</A>This tag generates links. There r two types of links in HTML 1^{st Internal links, 2nd external links. There r two attributes of this tag.}^{→ href="path" mce_href="path": Defines the reference path i.e. the path of destination in double quotes.→Name="name": Defines a name for a specified section of the same page.▪ LIST TAGWords or phrases which need to be set apart from the rest of the body of text can be emphasized with a "bullet" (a heavy dot used for calling attention to a particular section of text). In HTML there r three types of lists. ♣ Order lists.♥ Unordered lists.♠ Definition lists.►Order list
These lists r counting in counting numbers or even in alphabets.
¨ˆ <oL>……………</oL>
Defines the starting point of the list. There are further tags that comp, the list. Some attribute are written below.
☻Type="name": Defines the type of the list of indicators. i.e. 1, 2, 3…or a, b, c or even roman counting.☻Start="number": Defines the starting number of the list. Inner tag is given below.
▪<L1>: This tag is empty tag & indicates the beginning of the list item.►Unordered lists Lists, where the items are generally of equal importance and do not need to go in any particular order. Each item begins with a <LI> tag. Unordered lists may be nested inside unordered lists or inside any other types of lists (one list inside of another list inside of another list). There is further a tag to complete the tag.
▪ STYLE: Defines the bullet style of the list. It can be disc, square or circle. "Disc" → ¡ñ, "Square" → ¡ö, "Circle" → ¡ðNOTE: - In some browsers "disc" is a default & in some "circle" is default.
►Definition listThis list contains the data (definition) for every list item. Further tags
<dt>……..</dt> Desire the further item. <dd> contains the data to define the term. ALL RIGHTS RESERVED© Written & composed BY: Salman zia
Salman zia www.salmanzia.20m.com (HTML Notes)(Page # 4)
▪ FORM TAGS A form is an area that can contain form elements. Form elements are elements that allow the user to enter information (like text fields, text area fields, drop-down menus, radio buttons, checkboxes, etc.) in a form. A form is defined with the <form> tag. There are two attributes of this tag.
→METHOD="POST": Allows for more amounts of data to be sent. →METHOD="GET": Best use with single responses, like a single textbox.→ACTION="URL": It simply accepts the URL for the script that will process the data from your FORM.Form Tags}

^Tag	^Description
^<form>	^{Defines a form for user input}
^<input>	^{Defines an input field}
^<textarea>	^{Defines a text-area (a multi-line text input control)}
^<label>	^{Defines a label to a control}
^<fieldset>	^{Defines a fieldset}
^<legend>	^{Defines a caption for a fieldset}
^<select>	^{Defines a selectable list (a drop-down box)}
^<optgroup>	^{Defines an option group}
^<option>	^{Defines an option in the drop-down box}
^<button>	^{Defines a push button}

^{►Input
The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most commonly used input types are explained below.
Text FieldsText fields are used when you want the user to type letters, numbers, etc. in a form. <form>
First name:
<input type="text" name="first name">
<br>
Last name:
<input type="text" name="last name">
</form>How it looks in a browser:Top of FormFirst name:
Last name: ► Radio ButtonsRadio Buttons are used when you want the user to select one of a limited number of choices.<form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>
How it looks in a browser: Top of Form
Top of Form
Male
Female
Bottom of FormNote that only one option can be chosen.
ALL RIGHTS RESERVED© Written & composed BY: Salman zia
Salman zia www.salmanzia.20m.com (HTML Notes)( Page #5) ► Checkboxes Checkboxes are used when you want the user to select one or more options of a limited number of choices.<form>
I have a bike :< input type="checkbox" name="vehicle" value="Bike" />
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
</form>
How it looks in a browser:I have a bike:
I have a car: Top of Form 1►The Form's Action Attribute and the Submit ButtonWhen 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.<form name="input" action="html_form_action.asp"
method="get">
<input type="text" name="user">
<input type="submit" value="Submit">
</form>How it looks in a browser: Top of FormUsername: Bottom of Form
Bottom of Form 1
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. ▪ The Image Tag In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only and it has no closing tag.
►The Src Attribute 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 on your page. The syntax of defining an image: <img src="url" mce_src="url">
►The Alt Attribute The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text: <img src="boat.gif" mce_src="boat.gif" alt="Big Boat">Written & composed BY: Salman zia ALL RIGHTS RESERVED©Salman zia (www.salmanzia.20m.com)
Salman zia www.salmanzia.20m.com (HTML Notes) (page # 6)▪ Tables Tags:-Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> 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.<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr><td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>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:<table border="1">
<tr><td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr></table>Headings in a Table:-Headings in a table are defined with the <th> tag.<table border="1">
<tr><th>Heading</th>
<th>another Heading</th>
</tr>
<tr><td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr><td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
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}

^{Written & composed BY: Salman zia ALL RIGHTS RESERVED©Salman zia (www.salmanzia.20m.com)

Salman zia www.salmanzia.20m.com (HTML Notes)(Page # 7)
Empty Cells in a TableTable cells with no content are not displayed very well in most browsers.<table border="1">
<tr><td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr><td>row 2, cell 1</td>
<td></td></tr></table>How it looks in a browser:}

^{row 1, cell 1}	^{row 1, cell 2}
^{row 2, cell 1}

^{<table border="1">
<tr><td>row 1, cell 1</td>
<td>row 1, cell 2</td></tr>
<tr><td>row 2, cell 1</td>
<td> ;</td>
</tr></table>
How it looks in a browser:}

^{row 1, cell 1}	^{row 1, cell 2}
^{row 2, cell 1}

^{Table Tags}

^Tag	^Description
^<table>	^{Defines a table}
^<th>	^{Defines a table header}
^<tr>	^{Defines a table row}
^<td>	^{Defines a table cell}
^<caption>	^{Defines a table caption}
^<colgroup>	^{Defines groups of table columns}
^<col>	^{Defines the attribute values for one or more columns in a table}

^{Written & composed BY: Salman zia ALL RIGHTS RESERVED©Salman zia (www.salmanzia.20m.com)
If you feel any difficulty please contact me at my ID & MOBILE # (lalbulbul@yahoo.com) 0313-6206401Good Luck ===> For better future.}