HTML
Introduction to 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.
- The text between <html> and </html> describes the web page.
- The text between <body> and </body> is the visible page content.
- The text between <h1> and </h1> is displayed as a heading.
- The text between <p> and </p> is displayed as a paragraph.
HTML Elements
In an HTML document, HTML elements are tags, as well as text, which act as indicators to a web browser as to how the document is to be interpreted by the browser and ultimately presented on the user's computer screen.
HTML is a structured markup language, and the HTML elements are SGML elements that meet the requirements of one or more of the HTML Document Type Definitions (DTDs). These elements have properties: both attributes and content, some of which are either allowable or required, according to the appropriate HTML DTD. If an element is unknown to the web browser, it will be ignored.
- Elements may represent headings, paragraphs, hypertext links, lists, embedded media, and a variety of other structures.
- 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.
- <p> is called as opening tag and </p> is called as closing tag.
HTML Examples
Note: Please copy and paste the given codes into your text editor like Notepad. Then save it as filename.html in your Desktop or anywhere. Then double click on the filename.html file to see the results in your browser.
How to create a simple HTML document
<html>
<head>
<title>My first webpage</title>
</head>
<body>
<p>My first webpage</p>
</body>
</html>
Inserting texts between paragraphs
<html>
<head>
<title>My first webpage</title>
</head>
<body>
<p>This is my first webpage</p>
<p>This is my second webpage</p>
<p>This is my third webpage</p>
</body>
</html>
Inserting line breaks in HTML
<html>
<head>
<title>My first webpage</title>
</head>
<body>
<p>This is my first <br/>webpage This is my second webpage
This is my <br/>third webpage</p>
</body>
</html>
Headings
<html>
<head>
<title>My first webpage</title>
</head>
<body>
<h1>h1 is used for heading 1.</h1>
<h2>h2 is used for heading 2.</h2>
<h3>h3 is used for heading 3.</h3>
<h4>h4 is used for heading 4.</h4>
<h5>h5 is used for heading 5.</h5>
<h6>h6 is used for heading 6.</h6>
</body>
</html>
Inserting comments in HTML
<html>
<body>
<!--comments will not be displayed-->
<p>My first webpage</p>
</body>
</html>
Inserting horizontal rule
<html>
<body>
<p>The tag below produces a horizontal rule: </p>
<hr/>
</body>
</html>
Adding a background color in HTML
<html>
<body>
<p bgcolor="yellow">This produces a yellow background color</p>
<p bgcolor="red">This produces a red background color</p>
</body>
</html>
Formatting of Text
<html>
<body>
<p><b>This makes text bold</b> </p>
<p><i>This makes text italics</i></p>
<p><strong>This makes text stront</strong></p>
</body>
</html>
Making hyperlink
<html>
<body>
<p><a href="http://www.google.com"" >This adds link to the Google </a>
</body>
</html>
Abbrevations and Acronyms
<html>
<body>
<abbr title="United States of America">USA</abbr><p>
<acronym title="British School of Languages">BSL</acronym>
</body>
</html>
Set an images as hyperlink
<html>
<body>
<p><a href="http://www.google.com"><img src="circle.gif"></a>
<p>This will create a link in the image</p>
</body>
</html>
Link to a e-mail address
<html>
<body>
<p><a href="mailto:someone@yahoo.co.in">Send mail</a>
</body>
</html>
Creating tables in HTML
<html>
<body>
<table border="1">
<tr>
<td>India</td>
<td>Sri Lanka</td>
</tr>
<tr>
<td>Japan</td>
<td>China</td>
</tr>
</table>
</body>
</html>
Tables with no border
<html>
<body>
<table border="0">
<tr>
<td>India</td>
<td>Sri Lanka</td>
</tr>
<tr>
<td>Japan</td>
<td>China</td>
</tr>
</table>
</body>
</html>
Table colspan and rowspan
<html>
<body>
<table border="1">
<tr>
<td>India</td>
<td>Sri Lanka</td>
</tr>
<tr>
<td>Japan</td>
<td>China</td>
</tr>
</table>
</body>
</html>
Nested Tables
<html>
<body>
<table border="1">
<tr>
<td>India</td>
<td>Sri Lanka</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>USA</td>
<td>UK</td>
</tr>
</table>
</td>
<td>China</td>
</tr>
</table>
</body>
</html>
Background color in Tables
<html>
<body>
<table border="1" bgcolor="blue" >
<tr>
<td>India</td>
<td>Sri Lanka</td>
</tr>
</table>
</body>
</html>
Background image in a table or cell
<html>
<body>
<table border="1" background="bg.gif" >
<tr>
<td background="bg.gif" >India</td>
<td>Sri Lanka</td>
</tr>
<tr>
<td>Japan</td>
<td>China</td>
</tr>
</table>
</body>
</html>
Aligning contents in cell
<html>
<body>
<table border="1">
<tr>
<td align="left" >India</td>
<td align="left" >Sri Lanka</td>
</tr>
<tr>
<td align="right" >USA</td>
<td align="right" >China</td>
</tr>
</table>
</body>
</html>
Inserting Images
<html>
<body>
<p>This is a image:<img src="plane.gif" width="100" height="100"/>
</body>
</html>
Background Images
<html>
<body>
<p background="plane.gif"> This paragraph has a background image.</p>
</body>
</html>
Inserting Images from another folder
<html>
<body>
<p>This is a image:<img src="/images/plane.gif" width="100" height="100"/>
</body>
</html>
Making ordered list in HTML
<html>
<body>
<ol>
<li>India</li>
<li>Sri Lanka</li>
<li>South Africa</li>
</ol>
</body>
</html>
Making unordered list in HTML
<html>
<body>
<ul>
<li>India</li>
<li>Sri Lanka</li>
<li>South Africa</li>
</ul>
</body>
</html>
Inserting Images
<html>
<body>
<p>This is a image:<img src="plane.gif" width="100" height="100"/>
</body>
</html>
Background Images
<html>
<body>
<p background="plane.gif"> This paragraph has a background image.</p>
</body>
</html>
Inserting Images from another folder
<html>
<body>
<p>This is a image:<img src="/images/plane.gif" width="100" height="100"/>
</body>
</html>
Labels: HTML Tutorial
posted by Ashok at
4:15 AM
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home