HTML (Hyper Text Markup Language) Sample Code

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 is a regular paragraph
</body>
</html>
Example 3, Simple paragraph tag Go Top

<html>
<body>
<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>
<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>
<hr>
</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>
</p>
<p>
</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>
<h2>Chapter 3</h2>
<a name="C4"><h2>Chapter 4</h2></a>
<h2>Chapter 5</h2>
<h2>Chapter 6</h2>
<h2>Chapter 7</h2>
<h2>Chapter 8</h2>
<h2>Chapter 9</h2>
<h2>Chapter 10</h2>
<h2>Chapter 11</h2>
<h2>Chapter 12</h2>
<h2>Chapter 13</h2>
<h2>Chapter 14</h2>
<h2>Chapter 15</h2>
<h2>Chapter 16</h2>
<h2>Chapter 17</h2>
</body>
</html>
Example 24, How to link to a mail message Go Top

<html>
<body>
<p>
This is a mail link:
<a href="mailto:someone@microsoft.com?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 ( ) 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 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>
</tr>
<tr>
<td align="left">Make-Up</td>
</tr>
<tr>
<td align="left">Food</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 a</a><br>
<a href ="frameb.htm" target ="showframe">Frame b</a><br>
<a href ="framec.htm" target ="showframe">Frame c</a>
</body>
</html>


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


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


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

HTML (Hyper Text Markup Language) Sample Code

Încărcat de

Informații document

Descriere originală:

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML (Hyper Text Markup Language) Sample Code

Încărcat de

Drepturi de autor:

Formate disponibile

HTML (Hyper Text Markup Language)

Example 1, A very simple HTML document Go Top

Example 2, Giving comments Go Top

Example 3, Simple paragraph tag Go Top

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

Example 5, Problems with HTML Spacing Go Top

Example 6, Preformat tag Go Top

Example 8, HTML Headings Go Top

Example 9, Centralised heading Go Top

Example 10 Giving Horizontal Line on a web page Go Top

Example 12, Add a Background Color Go Top

Example 13, Add a Background Image Go Top

Example 14 Text formatting Go Top

Example 15 Insert Image Go Top

Example 16 Adjust Images to different Sizes Go Top

Example 17, Working with Images from Different Folder Go Top

Example 18, Working with Moving Images Go Top

Example 20, How to create Hyperlinks Go Top

Example 21, Set an Image as a Link Go Top

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

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

Example 25, Simple Unordered List Go Top

Example 26, Nested Unordered List Go Top

Example 27, Bulleted List Go Top

Example 28, An Ordered List Go Top

Example 30, A Definition List Go Top

Example 31, Simple Tables Go Top

Example 32, Different Table Borders Go Top

Example 33, Table with no borders Go Top

Example 34, Headings in a Table Go Top

Example 35, Table with Empty Cells Go Top

Example 36, Tags inside table Go Top

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

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

Example 41, How to Create Input Field Go Top

Example 42, How to Create Password Field Go Top

Example 43, How to Create MultiLine Input Field Go Top

Example 44, How to Use Check Boxes Go Top

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

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

Example 48, How to Create Push Buttons Go Top

Example 50, Source code of navigation frame Go Top

S-ar putea să vă placă și