Está en la página 1de 19

HTML TUTORIALS

___________________________________________________
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>


HTML tags normally come in pairs like <b> and </b>
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:

OBM-INDIA

Page 1

HTML TUTORIALS
___________________________________________________
1.

SIMPLE HTML
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
2.

HTML HEADINGS
<html>
<body>

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>

OBM-INDIA

Page 2

HTML TUTORIALS
___________________________________________________
3.

PARAGRAPHS
<html>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

LINKS
<html>
<body>

<a href="http://www.obm-india.com">
This is a link</a>

</body>
</html>

INSERTING IMAGES
<html>

OBM-INDIA

Page 3

HTML TUTORIALS
___________________________________________________
<body>

<img src="obm.jpg" width="104" height="142" />

</body>
</html>
INSERTING COMMENTS
<html>
<body>

<img src="obm.jpg" width="104" height="142" />

</body>
</html>

HORIZONTAL RULE
<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />

OBM-INDIA

Page 4

HTML TUTORIALS
___________________________________________________
<p>This is a paragraph</p>
</body>
</html>
USE OF LINE BREAKS
<html>
<body>

<p>This is<br />a para<br />graph with line breaks</p>

</body>
</html>

TEXT FORMATTING
<html>
<body>

<p><b>This text is bold</b></p>


<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

OBM-INDIA

Page 5

HTML TUTORIALS
___________________________________________________
</body>
</html>

PRE-FORMATTED TEXT
<html>
<body>

<pre>
This is
preformatted text.
It preserves

both spaces

and line breaks.


</pre>

<p>The pre tag is good for displaying computer code:</p>

<pre>
for i = 1 to 10
print i
next i
</pre>

</body>

OBM-INDIA

Page 6

HTML TUTORIALS
___________________________________________________
</html>

CREATE A HYPERLINK
<html>
<body>

<p>
<a href="default.asp">HTML Tutorial</a> This is a link to a page on this website.
</p>

<p>
<a href="http://www.google.com/">Google</a> This is a link to a website on the World Wide Web.
</p>

</body>
</html>

OPEN LINK IN A NEW BROWSER/TAB WINDOW


<html>
<body>

OBM-INDIA

Page 7

HTML TUTORIALS
___________________________________________________
<a href="http://www.obm-india.com" target="_blank">Visit Obm.com!</a>

<p>If you set the target attribute to "_blank", the link will open in a new browser window/tab.</p>

</body>
</html>
AN IMAGE FROM ANOTHER FOLDER/SERVER
<html>
<body>

<p>An image from another folder:</p>


<img src="/images/chrome.gif" alt="Google Chrome" width="33" height="32" />

<p>An image from Obm:</p>


<img src="http://www.obm-india.com/images/obm_green.jpg" alt="Obm.com" width="104"
height="142" />

</body>
</html>

SIMPLE TABLES
<html>
<body>

OBM-INDIA

Page 8

HTML TUTORIALS
___________________________________________________
<p>
Each table starts with a table tag.
Each table row starts with a tr tag.
Each table data starts with a td tag.
</p>

<h4>One column:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>

<h4>One row and three columns:</h4>


<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>

<h4>Two rows and three columns:</h4>


<table border="1">

OBM-INDIA

Page 9

HTML TUTORIALS
___________________________________________________
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

</body>
</html>
TABLE HEADERS
<html>
<body>

<h4>Table headers:</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>

OBM-INDIA

Page 10

HTML TUTORIALS
___________________________________________________
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

<h4>Vertical headers:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>

OBM-INDIA

Page 11

HTML TUTORIALS
___________________________________________________
</body>
</html>

Cell padding (control the white space between cell content and the borders)

<html>
<body>

<h4>Without cellpadding:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>With cellpadding:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>First</td>

OBM-INDIA

Page 12

HTML TUTORIALS
___________________________________________________
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

</body>
</html>

CELL SPACING(DISTANCE BETWEEN CELLS)


<html>
<body>

<h4>Without cellspacing:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>

OBM-INDIA

Page 13

HTML TUTORIALS
___________________________________________________
</tr>
</table>

<h4>With cellspacing="0":</h4>
<table border="1" cellspacing="0">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>With cellspacing="10":</h4>
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>

OBM-INDIA

Page 14

HTML TUTORIALS
___________________________________________________
</tr>
</table>

</body>
</html>
UNORDERD LIST
<html>
<body>

<h4>An Unordered List:</h4>


<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

</body>
</html>
OREDERD LIST
<html>
<body>

<h4>An Ordered List:</h4>


<ol>

OBM-INDIA

Page 15

HTML TUTORIALS
___________________________________________________
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>
DIFFERENT TYPES OF OREDERED LIST
<html>
<body>

<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>

OBM-INDIA

Page 16

HTML TUTORIALS
___________________________________________________
<li>Oranges</li>
</ol>

<h4>Lowercase letters list:</h4>


<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

<h4>Roman numbers list:</h4>


<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

<h4>Lowercase Roman numbers list:</h4>


<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>

OBM-INDIA

Page 17

HTML TUTORIALS
___________________________________________________
<li>Oranges</li>
</ol>

</body>
</html>
DIFFERENT TYPES OF UNORDERED LIST
<html>
<body>

<h4>Disc bullets list:</h4>


<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

<h4>Circle bullets list:</h4>


<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

OBM-INDIA

Page 18

HTML TUTORIALS
___________________________________________________
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

</body>
</html>

OBM-INDIA

Page 19