CREATE WEB CONTENT USING HTML
Basic HTML Document
In its simplest form, following is an example of an HTML document:
<!-- This declaration specifies the version of HTML that the document is
written in -->
<!DOCTYPE html>
<!-- This is the root element of the document and encloses all other
elements -->
<html>
<!-- This element contains metadata about the document, such as the
title, author, and character set. It does not contain any visible content
on the page -->
<head>
<!-- This element is nested within the head element and specifies the
title of the web page, which appears in the browser's title bar -->
<title>This is document title</title>
</head>
<!-- This element contains all visible content on the page, such as text,
images, links, and other HTML elements -->
<body>
<h1>This is heading 1</h1>
<p>Document content goes here.....</p>
</body>
</html>
Let's save it in an HTML file test.htm using your favorite text editor. Finally
open it using a web browser like Internet Explorer or Google Chrome, or
Firefox etc.
Heading Tags Example:
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<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>
Paragraph Tag Example:
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
Line Break Tag Example:
<p>Hello<br />
You delivered your assignment on time.<br />
Thanks<br />
Kebede</p>
Centering Content Example:
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
Horizontal Lines Example:
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
Preserve Formatting Example:
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
Nonbreaking Spaces Example:
<p>An example of this technique appears in the movie
"12 Angry Men."</p>
Nested HTML Elements Example
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
Attribute names and attribute values Example:
<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>
The Id Attribute Example:
<p id="html">This para explains what is HTML</p>
<p id="css">This para explains what is Cascading Style Sheet</p>
The title Attribute Example:
<h3 title="Hello HTML!">Titled Heading Tag Example</h3>
The style Attribute Example:
<p style="font-family:arial; color:#FF0000;">Some text...</p>
The dir Attribute Example:
<html dir="rtl">
<head>
<title>Display Directions</title>
</head>
<body>
This is how IE 5 renders right-to-left directed text.
</body>
</html>
The lang Attribute Example:
<html lang="en">
<head>
<title>English Language Page</title>
</head>
<body>
This page is using English Language
</body>
</html>
Bold Text Example:
<p>The following word uses a <b>bold</b> typeface.</p>
Italic Text Example:
<p>The following word uses a <i>italicized</i> typeface.</p>
Underlined Text Example:
<p>The following word uses a <u>underlined</u> typeface.</p>
Strike Text Example:
<p>The following word uses a <strike>strikethrough</strike>
typeface.</p>
Monospaced Font Example:
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
Superscript Text Example:
<p>The following word uses a <sup>superscript</sup> typeface.</p>
Subscript Text Example:
<p>The following word uses a <sub>subscript</sub> typeface.</p>
Inserted Text Example:
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
Deleted Text Example:
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
Larger Text Example:
<p>The following word uses a <big>big</big> typeface.</p>
Smaller Text Example:
<p>The following word uses a <small>small</small> typeface.</p>
Grouping Content Example:
<div id="menu" align="middle" >
<a href="/index.htm">HOME</a> |
<a href="/about/contact_us.htm">CONTACT</a> |
<a href="/about/index.htm">ABOUT</a>
</div>
<div id="content" align="left" bgcolor="white">
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
The <span> element Example:
<p>This is the example of <span style="color:green">span tag</span>
and the <span
style="color:red">div tag</span> alongwith CSS</p>
Emphasized Text Example:
<p>The following word uses a <em>emphasized</em> typeface.</p>
Marked Text Example:
<p>The following word has been <mark>marked</mark>
with yellow</p>
Strong text Example:
<p>The following word uses a <strong>strong</strong>
typeface.</p>
Text Abbreviation Example:
<p>My best friend's name is <abbr
title="Abhishek">Abhy</abbr>.</p>
Acronym Element Example:
<p>This chapter covers marking up text in
<acronym>XHTML</acronym>.</p>
Text Direction Example:
<p>This text will go left to right.</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>
Special Terms Example:
<p>The following word is a <dfn>special</dfn> term.</p>
Quoting Text Example:
<p>The following description of XHTML is taken from the
W3C Web site:</p>
<blockquote>XHTML 1.0 is the W3C's first
Recommendation for XHTML, following on
from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and
HTML 2.0.</blockquote>
Short Quotations Example:
<p>Amit is in Spain, <q>I think I am wrong</q>.</p>
Text Citations Example:
<p>This HTML tutorial is derived from <cite>W3 Standard
for HTML</cite>.</p>
Computer Code Example:
<p>Regular text. <code>This is code.</code> Regular
text.</p>
Keyboard Text Example:
<p>Regular text. <kbd>This is inside kbd element</kbd>
Regular text.</p>
Insert Image Example:
<img src="test.png" alt="Test Image" />
Set Image Location Example:
<img src="images/test.png" alt="Test Image" />
Set Image Width/Height Example:
<img src="test.png" alt="Test Image" width="150"
height="100"/>
Set Image Border Example:
<img src="test.png" alt="Test Image" border="3"/>
Set Image Alignment Example:
<img src="test.png" alt="Test Image" border="3"
align="right"/>
Table Heading Example:
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
Cellpadding and Cellspacing Attributes Example:
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
Colspan and Rowspan Attributes
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell
2</td><td>Row 1 Cell
3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
Tables Backgrounds Example:
<table border="1" bordercolor="green" bgcolor="yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell
2</td><td>Row 1 Cell
3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
Table Height and Width Example:
<table border="1" width="400" height="150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
Table Caption Example:
<table border="1" width="100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, column 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, column 2</td>
</tr>
</table>
Table Header, Body, and Footer Example:
<table border="1" width="100%">
<thead>
<tr>
<td colspan="4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
HTML Unordered Lists Example:
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
The type Attribute Example:
<ul type="square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
<ul type="disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
<ul type="circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
HTML Ordered Lists Example:
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
The type Attribute Example:
<ol type="1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
<ol type="I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
<ol type="i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
<ol type="a">
<ol type="A">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
The start Attribute Example:
<ol type="1" start="4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
<ol type="I" start="4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
<ol type="i" start="4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
<ol type="a" start="4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
<ol type="A" start="4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
HTML Definition Lists Example:
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
Linking Documents Example:
<a href="http://www.tutorialspoint.com"
target="_self">Tutorials Point</a>
The target Attribute Example:
<a href="/html/index.htm" target="_blank">Opens in
New</a> |
<a href="/html/index.htm" target="_self">Opens in
Self</a> |
<a href="/html/index.htm" target="_parent">Opens in
Parent</a> |
<a href="/html/index.htm" target="_top">Opens in
Body</a>
Linking to a Page Section Example:
<a href="/html/html_text_links.htm#top">Go to the
Top</a>
Setting Link Colors Example:
<body alink="#54A250" link="#040404" vlink="#F40633">
<p>Click following link</p>
<a href="/html/index.htm" target="_blank" >HTML
Tutorial</a>
</body>
Download Links Example:
<a
href="http://www.tutorialspoint.com/page.pdf">Downloa
d PDF File</a>
Server-side image maps Example:
<a href="/cgi-bin/ismap.cgi" target="_self">
<img ismap src="/images/logo.png" alt="Tutorials Point"
border="0"/>
</a>
Client-Side Image Maps Example:
<img src=/images/html.gif alt="HTML Map" border="0"
usemap="#html"/>
<!-- Create Mappings -->
<map name="html">
<area shape="circle"
coords="80,80,20" href="/css/index.htm" alt="CSS Link"
target="_self" />
<area shape="rect"
coords="5,5,40,40" alt="jQuery Link"
href="/jquery/index.htm" target="_self"/>
HTML Email Tag Examples:
<a href= "mailto: abc@example.com">Send Email</a>
Creating Frames Example 1:
<frameset rows="10%,80%,10%">
<frame name="top" src="/html/top_frame.htm" />
<frame name="main" src="/html/main_frame.htm" />
<frame name="bottom" src="/html/bottom_frame.htm" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
Creating Frames Example 2:
<frameset cols="25%,50%,25%">
<frame name="left" src="/html/top_frame.htm" />
<frame name="center" src="/html/main_frame.htm" />
<frame name="right" src="/html/bottom_frame.htm" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
Frame's name and target attributes Example:
<frameset cols="200, *">
<frame src="/html/menu.htm" name="menu_page" />
<frame src="/html/main.htm" name="main_page" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
HTML Iframe Example:
<body>
<p>Document content goes here...</p>
<iframe src="/html/menu.htm" width="555" height="200">
Sorry your browser does not support inline frames.
</iframe>
<p>Document content also go here...</p>
</body>
The <div> tag Example:
<div style="color:red">
<h4>This is first group</h4>
<p>Following is a list of vegetables</p>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</div>
<!-- Second group of tags -->
<div style="color:green">
<h4>This is second group</h4>
<p>Following is a list of fruits</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</div>
Background of an HTML tag Example 1:
<table bgcolor="yellow" width="100%">
<tr><td>
This background is yellow
</td></tr>
</table>
Background of an HTML tag Example 2:
<table bgcolor="#6666FF" width="100%">
<tr><td>
This background is sky blue
</td></tr>
</table>
Background of an HTML tag Example 3:
<table bgcolor="rgb(255,0,255)" width="100%">
<tr><td>
This background is green
</td></tr>
</table>
Background images of a table Example:
<table background="/images/html.gif" width="100%"
height="100">
<tr><td>
This background is filled up with HTML image.
</td></tr>
</table>
Background pattern of a table Example:
<table background="/images/pattern1.gif" width="100%"
height="100">
<tr><td>
This background is filled up with a pattern image.
</td></tr>
</table>
<!-- Another example on table background using pattern -->
<table background="/images/pattern2.gif" width="100%"
height="100">
<tr><td>
This background is filled up with a pattern image.
</td></tr>
</table>
Background of an HTML tag by color name Example:
<table bgcolor="black">
<tr>
<td>
<font color="white">This text will appear white on black
background.</font>
</td>
</tr>
</table>
list of few colors using hexadecimal notation.
background of an HTML tag by color code in hexadecimal
Example:
<table bgcolor="#000000">
<tr>
<td>
<font color="#FFFFFF">This text will appear white on black
background.</font>
</td>
</tr>
</table>
Following is a list to show few colors using RGB values
Background of an HTML tag by color code using rgb() values
Example:
<table bgcolor="rgb(0,0,0)">
<tr>
<td>
<font color="rgb(255,255,255)">This text will appear white on
black
background.</font>
</td>
</tr>
</table>
Few Browser Safe Colors
Set Font Size Example:
<font size="1">Font size="1"</font><br />
<font size="2">Font size="2"</font><br />
<font size="3">Font size="3"</font><br />
<font size="4">Font size="4"</font><br />
<font size="5">Font size="5"</font><br />
<font size="6">Font size="6"</font><br />
<font size="7">Font size="7"</font>
Setting Font Face Example:
<font face="Times New Roman" size="5">Times New
Roman</font><br />
<font face="Verdana" size="5">Verdana</font><br />
<font face="Comic sans MS" size="5">Comic Sans
MS</font><br />
<font face="WildWest" size="5">WildWest</font><br />
<font face="Bedrock" size="5">Bedrock</font><br />
Setting Font Color Example:
<font color="#FF00FF">This text is in pink</font><br />
<font color="red">This text is red</font>
Single-line text input controls Example:
<form >
First name: <input type="text" name="first_name" />
<br>
Last name: <input type="text" name="last_name" />
</form>
Password Input controls Example:
<form >
User ID : <input type="text" name="user_id" />
<br>
Password: <input type="password" name="password" />
</form>
Multiple-Line Text Input Controls Example:
<form>
Description: <br />
<textarea rows="5" cols="50" name="description">
Enter description here...
</textarea>
</form>
Checkbox Control Example:
<form>
<input type="checkbox" name="maths" value="on"> Maths
<input type="checkbox" name="physics" value="on"> Physics
</form>
Radio Button Control Example:
<form>
<input type="radio" name="subject" value="maths"> Maths
<input type="radio" name="subject" value="physics"> Physics
</form>
Select Box Control Example:
<form>
<select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
</select>
</form>
File Upload Box Example:
<form>
<input type="file" name="fileupload" accept="image/*" />
</form>
Button Controls Example:
<form>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<input type="button" name="ok" value="OK" />
<input type="image" name="imagebutton"
src="/html/images/logo.png" />
</form>
Hidden Form Controls Example:
<input type="hidden" name="pagename" value="10" />
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form>
Background Audio Example:
<bgsound src="/html/yourfile.mid">
<noembed><img src="yourimage.gif" ></noembed>
</bgsound>
HTML document in an HTML document itself Example:
<object data="data/test.htm" type="text/html" width="300"
height="200">
alt : <a href="data/test.htm">test.htm</a>
</object>
PDF document in an HTML document Example:
<object data="data/test.pdf" type="application/pdf"
width="300" height="200">
alt : <a href="data/test.pdf">test.htm</a>
</object>
Document with the <param> tag Example:
<object data="data/test.wav" type="audio/x-wav"
width="200" height="20">
<param name="src" value="data/test.wav">
<param name="autoplay" value="false">
<param name="autoStart" value="0">
alt : <a href="data/test.wav">test.wav</a>
</object>
Marquee tag Example 1:
<marquee>This is basic example of marquee</marquee>
Marquee tag Example 2:
<marquee width="50%">This example will take only 50%
width</marquee>
Marquee tag Example 3:
<marquee direction="right">This text will scroll from left to
right</marquee>
Marquee tag Example 4:
<marquee direction="up">This text will scroll from bottom to
up</marquee>
Specifying Keywords Example:
<head>
<meta name="keywords" content="HTML, Meta Tags,
Metadata" />
</head>
Document Description Example:
<head>
<title>Meta Tags Example</title>
<meta name="description" content="Learning about Meta Tags."
/>
</head>
Document Revision Date Example:
<meta name="revised" content="Tutorialspoint, 3/7/2014"/>
Document Refreshing Example:
<meta http-equiv="refresh" content="5" />
Page Redirection Example:
<meta http-equiv="refresh" content="5;
url=http://www.tutorialspoint.com" />
Setting Cookies Example:
<meta http-equiv="cookie" content="userid=xyz;
expires=Wednesday, 08-Aug-15
23:59:59 GMT;" />
Setting Author Name Example:
<meta ame="author" content="Mahnaz Mohtashim" />
Specify Character Set Example:
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
The HTML <title> Tag Example:
<title>HTML Title Tag Example</title>
The HTML <meta> Tag Example:
<!-- Provide list of keywords -->
<meta name="keywords" content="C, C++, Java, PHP, Perl,
Python">
<!-- Provide description of the page -->
<meta name="description" content="Simply Easy Learning by
Tutorials Point">
<!-- Author information -->
<meta name="author" content="Tutorials Point">
<!-- Page content type -->
<meta http-equiv="content-type" content="text/html;
charset=UTF-8">
<!-- Page refreshing delay -->
<meta http-equiv="refresh" content="30">
<!-- Page expiry -->
<meta http-equiv="expires" content="Wed, 21 June 2006
14:25:27 GMT">
<!-- Tag to tell robots not to index the content of a page -->
<meta name="robots" content="noindex, nofollow">
The HTML <base> Tag Example:
<html>
<head>
<title>HTML Base Tag Example</title>
<base href="http://www.tutorialspoint.com/" />
</head>
<body>
<img src="/images/logo.png" alt="Logo Image"/>
<a href="/html/index.htm" title="HTML Tutorial"/>HTML
Tutorial</a>
</body>
</html>
The HTML <link> Tag Example:
<link rel="stylesheet" type="text/css" href="/css/style.css">
The HTML <style> Tag Example:
<head>
<title>HTML style Tag Example</title>
<base href="http://www.tutorialspoint.com/" />
<style type="text/css">
.myclass{
background-color: #aaa;
padding: 10px;
}
</style>
</head>
The HTML <script> Tag Example:
<title>HTML script Tag Example</title>
<base href="http://www.tutorialspoint.com/" />
<script type="text/JavaScript">
function Hello(){
alert("Hello, World");
}
</script>
</head>
