Scribd
Upload
121 views

HTML (Hyper Text Markup Language) Sample Code

The document provides examples of various HTML elements for formatting text, images, and lists. It includes: 1) Basic text formatting examples using headings, paragraphs, comments, and preformatted text. 2) Examples of inserting images and adjusting image sizes. It also shows how to set images as links. 3) Examples of creating ordered and unordered lists, including nested lists and different bullet styles. Hyperlinks are also demonstrated.

Uploaded by

Rohit Sharma Kr
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
121 views

HTML (Hyper Text Markup Language) Sample Code

The document provides examples of various HTML elements for formatting text, images, and lists. It includes: 1) Basic text formatting examples using headings, paragraphs, comments, and preformatted text. 2) Examples of inserting images and adjusting image sizes. It also shows how to set images as links. 3) Examples of creating ordered and unordered lists, including nested lists and different bullet styles. Hyperlinks are also demonstrated.

Uploaded by

Rohit Sharma Kr
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 24

HTML (Hyper Text Markup Language)  

Sample Code
1 A very simple HTML document
2 Giving comments
3 Simple paragraph tag
4 Paragraph with multiple lines in the source code
5 Problems with HTML Spacing
6 Preformat tag
7 Line Breaks on web page
8 HTML Headings
9 Centralized heading
10 Giving Horizontal Line on a web page
11 Add a Background Color
12 Add a Background Color
13 Add a Background Image
14 Text formatting
15 Insert Image
16 Adjust Images to different Sizes
17 Working with Images from Different Folder
18 Working with Moving Images
19 Display an Alternate Text for an Image
20 How to create Hyperlinks
21 Set an Image as a Link
22 Open a Link in a new browser window
23 Jumping to another part of a document in the same page
24 How to link to a mail message
25 Simple Unordered List
26 Nested Unordered List
27 Bulleted List
28 An Ordered List
29 A Numbered List
30 A Definition List
31 Simple Tables
32 Different Table Borders
33 Table with no borders
34 Headings in a Table
35 Table with Empty Cells
36 Table cell spans more than one row or column-
36 Tags inside table
37 Cell padding the white space between cell content and the border
38 Cell Spacing - control the distance between cells
39 Align the Content in a Table Cell
40 Add a Background Color or a Background image to a Table Cell
41 How to Create Input Field
42 How to Create Password Field
43 How to Create MultiLine Input Field
44 How to Use Check Boxes
45 How to Use Radio Buttons on a Form
46 How to Create Simple Drop-Down List
47 How to Create Drop-Down box with pre-selected Value
48 How to Create Push Buttons
49 How to Draw a Border with a Caption Around Data
50 Source code of navigation frame
51 HTML file for creating frame for navigation
 

Example 1, A very simple HTML document     Go Top


<html>
<body>
The content of the body element is displayed in your browser.
</body>
</html>

Example 2, Giving comments    Go Top


<html>
<body>
<!--This comment will not be displayed-->
This is a regular paragraph
</body>
</html>

Example 3, Simple paragraph tag    Go Top


<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>Paragraph elements are defined by the p tag.</p> 
</body>
</html>

Example 4, Paragraph with mulitple lines in the source code    Go Top


<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser 
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser 
ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of your browser window. If you
resize the browser window, the number of lines in this paragraph will change.
</p>
</body>
</html>

Example 5, Problems with HTML Spacing    Go Top


<html>
<body>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
<p>Note that your browser simply ignores your formatting!</p>
</body>
</html>

Example 6, Preformat tag    Go Top


<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>
</html>
Example 7, Line Breaks on web page     Go Top
<html>
<body>
<p>
To break<br>lines<br>in a<br>paragraph,<br>use the br tag.
</p>
</body>
</html>

Example 8, HTML Headings     Go Top


<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>
<p>Use heading tags only for headings. Don't use them to make something big. Use
other tags for that.</p>
</body>
</html>

Example 9, Centralised heading     Go Top


<html>
<body>
<h1 align="center">This is heading 1</h1>
<p>The heading above is aligned to the center of this page. The heading above is aligned
to the center of this page. The heading above is aligned to the center of this page.</p>
</body>
</html>

Example 10 Giving Horizontal Line on a web page     Go Top


<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>
<p>This is a paragraph</p>
</body>
</html>
Example 11, Add a Background Color     Go Top
<html>
<body bgcolor="yellow">
<h3>Look: Colored Background!</h3>
</body>
</html>

Example 12, Add a Background Color     Go Top


<html>
<body bgcolor="#d0d0d0">
<p>
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is
a paragraph.
</p>
<p>
This is another paragraph. This is another paragraph. This is another paragraph. This is
another paragraph. 
</p>
</body>
</html>

Example 13, Add a Background Image     Go Top


<html>
<body background="background.jpg">
<h3>Look: Image Background!</h3>
<p>Both gif and jpg files can be used as HTML backgrounds.</p>
<p>If the image is smaller than the page, the image will repeat itself.</p>
</body>
</html>

Example 14 Text formatting     Go Top


<html>
<body>
<b>This text is bold</b>
<br>
<strong>
This text is strong
</strong>
<br>
<big>
This text is big
</big>
<br>
<em>
This text is emphasized
</em>
<br>
<i>
This text is italic
</i>
<br>
<small>
This text is small
</small>
<br>
This text contains
<sub>
subscript
</sub>
<br>
This text contains
<sup>
superscript
</sup>
</body>
</html>

Example 15 Insert Image     Go Top


<html>
<body>
<img src="../images/goleft.gif" alt="Go Left" width="32" height="32">
<p>
Text-only browsers will only display the text in the "alt" attribute, which is "Go Left".
Note that if you hold the mouse pointer over the image it will display the text.
</p>
</body>
</html>

Example 16 Adjust Images to different Sizes    Go Top


<html>
<body>
<p>
<img src="../images/hackanm.gif" width="20" height="20">
</p>
<p>
<img src="../images/hackanm.gif" width="45" height="45">
</p>
<p>
<img src="../images/hackanm.gif" width="70" height="70">
</p>
<p>
You can make a picture larger or smaller changing the values in the "height" and "width"
attributes of the <img> tag.
</p>
</body>
</html>

Example 17, Working with Images from Different Folder    Go Top


<html>
<body>
<p>
An image from another folder:
<img src="../images/netscape.gif" width="33" height="32">
</p>
<p>
An image from W3Schools:
<img src="http://www.w3schools.com/images/ie.gif" width="73" height="68">
</p>
</body>
</html>

Example 18, Working with Moving Images    Go Top


<html>
<body>
<p>
An image:
<img src="constr4.gif" width="144" height="50">
</p>
<p>
A moving image:
<img src="hackanm.gif" width="48" height="48">
</p>
<p>
Note that the syntax of inserting 
a moving image, is no different from 
a non-moving image.
</p>
</body>
</html>
Example 19, Display an Alternate Text for an Image    Go Top
<html>
<body>
<img src="../images/goleft.gif" alt="Go Left" width="32" height="32">
<p>
Text-only browsers will only display the text in the "alt" attribute, which is "Go Left".
Note that if you hold the mouse pointer over the image it will display the text.
</p>
</body>
</html>

Example 20, How to create Hyperlinks    Go Top


<html>
<body>
<p>
<a href="lastpage.htm">
This text</a> is a link to a page on 
this Web site.
</p>
<p>
<a href="http://www.microsoft.com/">
This text</a> is a link to a page on 
the World Wide Web.
</p>
</body>
</html>

Example 21, Set an Image as a Link    Go Top


<html>
<body>
<p>
You can also use an image as a link:
<a href="lastpage.htm">
<img border="0" src="buttonnext.gif" width="65" height="38">
</a>
</p>
</body>
</html>

Example 22, Open a Link in a new browser window    Go Top


<html>
<body>
<a href="lastpage.htm" target="_blank">Last Page</a> 
<p>
If you set the target attribute of a link to "_blank",
the link will open in a new window.
</p>
</body>
</html>

Example 23, Jumping to another part of a document in the same page    Go Top
<html>
<body>
<p>
<a href="#C4">
See also Chapter 4.
</a>
</p>
<p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<a name="C4"><h2>Chapter 4</h2></a>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>

Example 24, How to link to a mail message    Go Top


<html>
<body>
<p>
This is a mail link:
<a href="mailto:[email protected]?Subject=Hello again">
Send Mail</a>
</p>
</body>
</html>

Example 25, Simple Unordered List    Go Top


<html>
<body>
<h4>An Unordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>

Example 26, Nested Unordered List    Go Top


<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
<html>
<body>

Example 27, Bulleted List    Go Top


<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> 
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul> 
</body>
</html>

Example 28, An Ordered List    Go Top


<html>
<body>
<h4>An Ordered List:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Example 29, A Numbered List    Go Top
<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>
<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>
<li>Oranges</li>
</ol> 
</body>
</html>

Example 30, A Definition List    Go Top


<html>
<body>
<h4>A Definition List:</h4>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
</html>

Example 31, Simple Tables    Go Top


<html>
<body>
<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">
<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>

Example 32, Different Table Borders    Go Top


<html>
<body>
<h4>With a normal border:</h4> 
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr> 
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With a thick border:</h4> 
<table border="8">
<tr>
<td>First</td>
<td>Row</td>
</tr> 
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With a very thick border:</h4> 
<table border="15">
<tr>
<td>First</td>
<td>Row</td>
</tr> 
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>

Example 33, Table with no borders     Go Top


<html>
<body>
<h4>This table has no borders:</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>And this table has no borders:</h4>
<table border="0">
<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>

Example 34, Headings in a Table    Go Top


<html>
<body>
<h4>Table headers:</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</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>
</body>
</html>

Example 35, Table with Empty Cells    Go Top


<html>
<body>
<table border="1">
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td></td>
<td>Some text</td>
</tr>
</table>
<p>
As you can see, one of the cells has no border. That is because it is empty. Try to insert a
space in the cell. Still it has no border.
</p>
<p>
The trick is to insert a no-breaking space (&nbsp;) in the cell. No-breaking space is a
character entity. If you don't know what a character entity is, read the chapter about it.
</body>
</html>

Example 36, Table cell spans more than one row or column    Go Top
<html>
<body>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>

Example 36, Tags inside table    Go Top


<html>
<body>
<table border="1">
<tr>
<td>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td> </td>
</tr>
</table>
</body>
</html>

Example 37, Cell padding the white space between cell content and the border    Go
Top
<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>
<td>Row</td>
</tr> 
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>

Example 38, Cell Spacing - control the distance between cells    Go Top
<html>
<body>
<h4>Without cellspacing:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr> 
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellspacing:</h4>
<table border="1" 
cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr> 
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>

Example 39, Align the Content in a Table Cell    Go Top


<html>
<body>
<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>

Example 40, Add a Background Color or a Background image to a Table Cell    Go


Top
<html>
<body>
<h4>Cell backgrounds:</h4> 
<table border="1">
<tr>
<td bgcolor="red">First</td>
<td>Row</td>
</tr> 
<tr>
<td 
background="../images/bgdesert.jpg">
Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>

Example 41, How to Create Input Field    Go Top


<html>
<body>
<form>
First name: 
<input type="text" name="firstname">
<br>
Last name: 
<input type="text" name="lastname">
</form>
</body>
</html>

Example 42, How to Create Password Field    Go Top


<html>
<body>
<form>
Username: 
<input type="text" name="user">
<br>
Password: 
<input type="password" name="password">
</form>
<p>
Note that when you type characters in a password field, the browser displays asterisks or
bullets instead of the characters.
</p>
</body>
</html>

Example 43, How to Create MultiLine Input Field    Go Top


<html>
<body>
<p>
This example can not be edited
because our editor uses a textarea
for input,
and your browser does not allow
a textarea inside a textarea.
</p>
<textarea rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</body>
</html>

Example 44, How to Use Check Boxes    Go Top


<html>
<body>
<form>
I have a bike: 
<input type="checkbox" name="Bike">
<br>
I have a car: 
<input type="checkbox" name="Car">
</form>
</body>
</html>

Example 45, How to Use Radio Buttons on a Form    Go Top


<html>
<body>
<form>
Male: 
<input type="radio" checked name="Sex">
<br>
Female: 
<input type="radio" name="Sex">
</form>
<p>
When a user clicks on a radio-button, the button becomes checked, and all other buttons
with the same name becomes unchecked
</p>
</body>
</html>

Example 46, How to Create Simple Drop-Down List    Go Top


<html>
<body>
<form>
<select name="cars">
<option value="volvo">Volvo
<option value="saab">Saab
<option value="fiat">Fiat
<option value="audi">Audi
</select>
</form>
</body>
</html>

Example 47, How to Create Drop-Down box with pre-selected Value    Go Top
<html>
<body>
<form>
<select name="cars">
<option value="volvo">Volvo
<option value="saab">Saab
<option value="fiat" selected>Fiat
<option value="audi">Audi
</select>
</form>
</body>
</html>

Example 48, How to Create Push Buttons    Go Top


<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
Enter your first name: 
<input type="text" name="FirstName" value="Mickey">
<br>Enter your last name: 
<input type="text" name="LastName" value="Mouse">
<br>
<input type="submit" value="Submit">
</form> 
<p>
If you click the "Submit" button, you will send your input to a new page called
html_form_action.asp.
</p>
</body>
</html>

Example 49, How to Draw a Border with a Caption Around Data    Go Top
<html>
<body>
<fieldset>
<legend>
Health information:
</legend>
<form>
Height <input type="text" size="3">
Weight <input type="text" size="3">
</form>
</fieldset>
<p>
If there is no border around the input form, your browser is too old.
</p>
</body>
</html>

Example 50, Source code of navigation frame    Go Top


<html>
<body>
<a href ="framea.htm" target ="showframe">Frame&nbsp; a</a><br>
<a href ="frameb.htm" target ="showframe">Frame&nbsp; b</a><br>
<a href ="framec.htm" target ="showframe">Frame&nbsp; c</a>
</body>
</html>

<!--Code of Frame A -->


<html>
<body bgcolor="#8F8FBD">
<h3>Frame A</h3>
</body>
</html>

<!--Code of frameB -->


<html>
<body bgcolor="#EBC79E">
<h3>Frame B</h3>
</body>
</html>

<!--Source code of frame C -->


<html>
<body bgcolor="#FFFFCC">
<h3>Frame C</h3>
</body>
</html>

Example 51, HTML file for creating frame for navigation    Go Top
<html>
<frameset cols="120,*">
<frame src="framea.htm">
<frame src="frameb.htm" name="showframe">
</frameset>
</html>

You might also like