HTML for bigginers 06-06-2011, 09:52 AM
#1
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
<html><head><title>Title of page</title></head><body>This is my first homepage. <b>This text is bold</b></body></html>
Basic HTML Tags
Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.
<h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3><h4>This is a heading</h4><h5>This is a heading</h5><h6>This is a heading</h6>
Paragraphs
Paragraphs are defined with the <p> tag.
<p>This is a paragraph</p><p>This is another paragraph</p>
Line Breaks
The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it.
HTML Text Formatting
<b>This text is bold</b>
<i>
This text is italic
</i>
This text contains
<sub>
subscript
</sub>
HTML Links
<a href="lastpage.htm">
<a href="http://www.microsoft.com/">
<a href="http://www.microsoft.com/">
· <a href="url">Text to be displayed</a>
HTML Tables
<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>
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2
<table border="1"><tr><td>Row 1, cell 1</td><td>Row 1, cell 2</td></tr></table>
Headings in a Table
Heading
Another Heading
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2
<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>
Empty Cells in a Table
Table 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
Cell Padding
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
A background color
<h4>A background color:</h4>
<table border="1"
bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
Text Align
<table width="400" border="1">
<tr>
<th align="left">Money spent on....</th>
<th align="right">January</th>
<th align="right">February</th>
</tr>
<tr>
<td align="left">Clothes</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">Make-Up</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
<tr>
<td align="left">Food</td>
<td align="right">$730.40</td>
<td align="right">$650.00</td>
</tr>
<tr>
<th align="left">Sum</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>
</body>
</html>
HTML Lists
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 <ul> tag. Each list item starts with the <li> tag.<ul>
<li>Coffee</li><li>Milk</li></ul>
Here is how it looks in a browser:
Coffee
Milk
Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
<ol><li>Coffee</li><li>Milk</li></ol>
Here is how it looks in a browser:
Coffee
Milk
HTML 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 <form> tag.
<form> <input> <input></form>
Forms and Input
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 Fields
Text 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:
First name:
Last name:
Radio Buttons
Radio 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:
Male
Female
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" /><br />I have an airplane: <input type="checkbox" name="vehicle" value="Airplane" /></form>
How it looks in a browser:
I have a bike:
I have a car:
I have an airplane:
HTML The Image Tag and the Src Attribute
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.
Images
<p>
An image:
<img src="constr4.gif"
width="144" height="50">
</p>
HTML<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>
<html>
<frameset rows="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>
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
<html><head><title>Title of page</title></head><body>This is my first homepage. <b>This text is bold</b></body></html>
Basic HTML Tags
Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.
<h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3><h4>This is a heading</h4><h5>This is a heading</h5><h6>This is a heading</h6>
Paragraphs
Paragraphs are defined with the <p> tag.
<p>This is a paragraph</p><p>This is another paragraph</p>
Line Breaks
The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it.
HTML Text Formatting
<b>This text is bold</b>
<i>
This text is italic
</i>
This text contains
<sub>
subscript
</sub>
HTML Links
<a href="lastpage.htm">
<a href="http://www.microsoft.com/">
<a href="http://www.microsoft.com/">
· <a href="url">Text to be displayed</a>
HTML Tables
<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>
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2
<table border="1"><tr><td>Row 1, cell 1</td><td>Row 1, cell 2</td></tr></table>
Headings in a Table
Heading
Another Heading
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2
<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>
Empty Cells in a Table
Table 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
Cell Padding
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
A background color
<h4>A background color:</h4>
<table border="1"
bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
Text Align
<table width="400" border="1">
<tr>
<th align="left">Money spent on....</th>
<th align="right">January</th>
<th align="right">February</th>
</tr>
<tr>
<td align="left">Clothes</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">Make-Up</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
<tr>
<td align="left">Food</td>
<td align="right">$730.40</td>
<td align="right">$650.00</td>
</tr>
<tr>
<th align="left">Sum</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>
</body>
</html>
HTML Lists
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 <ul> tag. Each list item starts with the <li> tag.<ul>
<li>Coffee</li><li>Milk</li></ul>
Here is how it looks in a browser:
Coffee
Milk
Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
<ol><li>Coffee</li><li>Milk</li></ol>
Here is how it looks in a browser:
Coffee
Milk
HTML 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 <form> tag.
<form> <input> <input></form>
Forms and Input
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 Fields
Text 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:
First name:
Last name:
Radio Buttons
Radio 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:
Male
Female
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" /><br />I have an airplane: <input type="checkbox" name="vehicle" value="Airplane" /></form>
How it looks in a browser:
I have a bike:
I have a car:
I have an airplane:
HTML The Image Tag and the Src Attribute
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.
Images
<p>
An image:
<img src="constr4.gif"
width="144" height="50">
</p>
HTML<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>
<html>
<frameset rows="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>
![[Image: Wfxdx.png]](http://i.imgur.com/Wfxdx.png)
![[+]](https://sinister.li/images/modern/collapse_collapsed.png)
