HTML Code Examples

 

 

 

Example 1: A simple page example shows basic structure of a HTML document or Web page.

 

<HTML>

<!-- basicshtmltruct.html -->

<HEAD>

<TITLE> Basic HTML Document Structure/Template </TITLE>

</HEAD>

<BODY>

<!-- Contents of HTML Document -->

<H1> Basic HTML Document Structure/Template </H1>

</BODY>

</HTML>

 

 

Example 2: A BASE tag example.

 

<HTML>

<!-- www.etcs.ipfw.edu/~lin/HTML/basehref.html -->

<TITLE> BASE HREF testing </TITLE>

<HEAD>

<BASE HREF="http://www.etcs.ipfw.edu/~lin/HTML/">

</HEAD>

<BODY>

<H1>

<A HREF="headers.html"> Header Example

<BR>

</H1>

</BODY>

</HTML>

 

Example 3: This example illustrates how to display the text in various font size.

 

<HTML>

<!-- www.etcs.ipfw.edu/~lin/HTML/headers.html -->

<!-- HTML headers -->

<HEAD>

<TITLE>Example; Header Levels</TITLE>

</HEAD>

<BODY>

<!-- Centers everything in the CENTER element -->

<CENTER>

<H1>Level 1 Header</H1> <!-- Level 1 header -->

<H2>Level 2 header</H2> <!-- Level 2 header -->

<H3>Level 3 header</H3> <!-- Level 3 header -->

<H4>Level 4 header</H4> <!-- Level 4 header -->

<H5>Level 5 header</H5> <!-- Level 5 header -->

<H6>Level 6 header</H6> <!-- Level 6 header -->

<P>Normal size</P>

</CENTER>

</BODY>

</HTML>

 

 

 

 

Example 4: Creating a slide show using <META> tag..

 

To create a slide show effect:

In showlin1.html contains

<META HTTP-EQUIV="refresh" CONTENT="5; URL=e:\html5\showlin2.html">

In showlin2.html contains

<META HTTP-EQUIV="refresh" CONTENT="5; URL=e:\html5\showlin3.html">

In showlin3.html contains

<META HTTP-EQUIV="refresh" CONTENT="5; URL=e:\html5\showlin4.html">

In showlin4.html contains

<META HTTP-EQUIV="refresh" CONTENT="5; URL=e:\html5\showlin1.html">

 

==========================================================

<HTML>

<!-- showlin1.html -->

<HEAD>

<TITLE> Client Pull -- showing Pictures </TITLE>

<META HTTP-EQUIV="refresh" CONTENT="10; URL=http://www.etcs.ipfw.edu/~lin/HTML/showlin2.html">

</HEAD>

<BODY>

<CENTER>

<IMG SRC="http://www.etcs.ipfw.edu/~lin/HTML/lin4799.jpg">

</CENTER>

</BODY>

</HTML>

==========================================================

 

<HTML>

<!-- showlin2.html -->

<HEAD>

<TITLE> Client Pull -- showing Pictures </TITLE>

<META HTTP-EQUIV="refresh" CONTENT="5; URL=http://www.etcs.ipfw.edu/~lin/HTML/showlin3.html">

</HEAD>

<BODY>

<CENTER>

<IMG SRC= "http://www.etcs.ipfw.edu/~lin/HTML/lin82499.jpg">

</CENTER>

</BODY>

</HTML>

 

==========================================================

<HTML>

<!-- showlin3.html -->

<HEAD>

<TITLE> Client Pull -- showing Pictures </TITLE>

<META HTTP-EQUIV="refresh" CONTENT="10; URL=http://www.etcs.ipfw.edu/~lin/HTML/showlin4.html">

</HEAD>

<BODY>

<CENTER>

<IMG SRC= "http://www.etcs.ipfw.edu/~lin/HTML/lin510_00.jpg">

</CENTER>

</BODY>

</HTML>

 

==========================================================

<HTML>

<!-- showlin4.html -->

<HEAD>

<TITLE> Client Pull -- showing Pictures </TITLE>

<META HTTP-EQUIV="refresh" CONTENT="10; URL=http://www.etcs.ipfw.edu/~lin/HTML/showlin1.html">

</HEAD>

<BODY>

<CENTER>

<IMG SRC= "http://www.etcs.ipfw.edu/~lin/HTML/lin4699.jpg">

</CENTER>

</BODY>

</HTML>

==========================================================

 

Example 5: This example shows how to create a Web page with different fonts, sizes, and colors.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<!-- <META> and <!DOCTYPE> tags -->

<!-- wordstyle.html -->

<HEAD>

<!-- <META> tags give search engines information they need -->

<!-- to catalog your site -->

<META NAME = "keywords" CONTENT = "Webpage, design, HTML, tutorial, personal, help, index, form, contact, feedback, list, links, frame">

 

<META NAME = "description" CONTENT = "This Web site will help you learn the basics of HTML and Webpage design through the use of interactive examples and instruction.">

 

<TITLE>ECET/ EET 499 - Welcome</TITLE>

</HEAD>

<BODY>

<H1 ALIGN = "center">Welcome! </H1>

<H2>This page will tell you how to write a HTML raw data to create a Font style (color, size, and face), Underline, Bold, and Italic.</H2>

<H3>***Click View at the Menu bar and Source to view the source code</H3>

<!--Creating Font Color -->

<P><FONT COLOR = "red">Font color </FONT><br>

<!--Creating Italic -->

<EM>Italic</EM><br>

<!-- Creating Underline -->

<U>Uderline</U><br>

<!--Creating Bold -->

<Strong>Bold</Strong><br>

<!--Creating Font color, size, face -->

<FONT COLOR = "purple" SIZE = "+2" FACE = "Verdana">This sentence has changed font color to purple, add font size (+2), and face (Verdana).</FONT><br>

<!--Creating Font Style -->

<FONT COLOR = "blue" SIZE = "+10" FACE = "Helvetica"><EM>This sentence has changed font color to blue, add font size (+10), face (Helvetica), and Italic.</EM></FONT>

<H2 ALIGN = "center">Have Fun With the Site!</H2></P>

</BODY>

</HTML>

 

 

 

Example 6: Showing equations on a Web page.

 

<!-- equations.html -->

 

<HTML>

<HEAD>

<TITLE>Equations with Superscripts and Subscripts</TITLE>

</HEAD>

<BODY BGCOLOR="WHITE">

<H1>Character Styles</H1>

<U>Underlined</U><BR>

<STRIKE>Underline</STRIKE><BR>

Subscripts: v = v<SUB>0</SUB> + v<SUB>1</SUB> + v<SUB>3</SUB><BR>

Superscripts: x<SUP>2</SUP> + y<SUP>2</SUP> + z<SUP>2</SUP><BR>

</BODY>

</HTML>

 

Example 7: This example shows how to add an email address for contacting other person; writing text in the subscript or superscript format; striking out the paragraph for collaborative editing; adding special signs such as greater than (>), less than (<), etc.

 

<HTML>

<!-- contact.html -->

<!-- Inserting special characters -->

<HEAD>

<TITLE>ECET/ EET 499 </TITLE>

</HEAD>

<BODY>

<!-- Creating e-mail link -->

<P>My email address is <A HREF = "mailto:eet499@hotmail.com"> eet499@hotmail.com</A>. Click on the address and your browser will automatically open an email message (Outlook).</P>

<!-- Special characters are entered using the form &code; -->

<P>All information on this site is <STRONG>&copy;</STRONG> ECET Department<STRONG>&nbsp;&amp;</STRONG> IPFW.</P>

<!-- Text can be struck out with a set of <DEL>...</DEL> -->

<!-- tags, it can be set in subscript with <SUB>...</SUB>, -->

<!-- and it can be set into superscript with <SUP...</SUP> -->

<DEL><P>Show cross line in this sentence</DEL><BR>

<font color = "Blue"> Square character, 10 <SUP>2</SUP> = 100. </font><br>

<font color = "red"> This is a normal sentence. </font>

<SUB> This sentence is below regular sentence.</SUB>

<font color = "red"> This is also a normal sentence.</font><br>

 

<!-- Onter special characters -->

Other special characters: <STRONG>1 &lt; &frac14;;&nbsp; a&gt;b; or b&lt;a</STRONG></P>

</BODY>

</HTML>

 

 

Example 8: This example shows how to create a Web page that links to other URL.

 

<HTML>

<!-- link.html -->

<!-- Unordered Lists -->

<HEAD> <TITLE>ECET/ EET 499 - Links</TITLE> </HEAD>

<BODY>

<CENTER>

<H2>Creating Links</H2>

<P><STRONG>Click on the address to go to that page. <br>

To see the source code by clicking View and Source at the Menu bar</STRONG></P>

 

<!-- <UL> creates a new unordered (bullet) list -->

<!-- <LI> inserts a new entry into the list -->

<UL>

<LI>IPFW: <A HREF = "http://www.ipfw.edu"> http://www.ipfw.edu</A></LI>

<LI>Word Style: <A HREF = "http://149.164.36.204/buttons/WordStyle.html"> http://Learn Word Style</A></LI>

<LI>Ask Jeeves: <A HREF = "http://www.askjeeves.com"> http://www.askjeeves.com</A> </LI>

 

<LI>WebCrawler: <A HREF = "http://www.webcrawler.com">

http://www.webcrawler.com</A></LI>

</UL>

</CENTER>

</BODY>

</HTML>

 

Example 9: This example shows how to create a Web document that use unordered lists and ordered lists.

 

<HTML>

<! File name: list1.html -->

<HEAD> <TITLE>ECET/ EET 499- List</TITLE> </HEAD>

<BODY>

<CENTER>

<H2><U>Example of Bullets List Style</U></H2>

</CENTER>

<!-- List Bullet style start with UL and follow by LI -->

<UL>

<LI>First List 1 </LI>

<LI>First List 2</LI>

<!-- This starts a nested list, which uses a modified -->

<!-- bullet. The list ends when you close the <UL> tag -->

<UL>

<LI> First Net List 1</LI>

<LI> First Net List 2</LI>

<!-- Another nested list, there is no nesting limit -->

<UL>

<LI>Second Net List 1</LI>

<LI>Second Net List 2</LI>

</UL> <!-- This ends the double nested list -->

 

<LI>First Net list 3</LI>

<LI>First Net list 4</LI>

<LI>First Net list 5</LI>

<LI>First Net list 6</LI>

 

<UL>

<LI>Second Net List 3</LI>

<LI>Second Net List 4</LI>

<LI>Second Net List 5</LI>

<LI>Second Net List 6</LI>

</UL>

</UL> <!-- This ends the first level nested list -->

<LI>First List 3</LI>

</UL> <!-- This ends the primary Bullet list -->

 

<BR><CENTER><H2><u>Numbering List Style </U></H2></CENTER>

 

<!-- Ordered lists are constructed in the same way as -->

<!-- Numbering list style, starting tag is <OL> -->

<OL>

<LI>First sentence</LI>

<OL>

<LI>First Net sentence</LI>

<OL>

<LI>Second Net sentence 1</LI>

<LI>Second Net sentence 2</LI>

</OL>

</ol>

<LI>Seconds Sentence</LI>

<LI>Third Sentence</LI>

</OL>

 

</BODY>

</HTML>

 

 

 

Example 10: Creating a Tic-Toc-Toe Table.

 

<!-- tictoctoe.html ->

<HTML>

<HEAD>

<TITLE>A Tic Toc Toe Table Example</TITLE>

</HEAD>

 

<BODY>

<CENTER>

<TABLE BORDER=1 FRAME="VOID">

<TR><TH>X<TH>O<TH>X

<TR><TH>X<TH>O<TH>X

<TR><TH>O<TH>X<TH>O

</TABLE>

</CENTER>

</BODY>

</HTML>

 

Example 11: This HTML page shows how to create some useful tables for business and industrial applications.

 

<html>

<!-- Sample and Advanced table design -->

<!-- table.html -->

 

<head>

<title>ECET/ EET 499 - Tables</title>

</head>

 

<body>

<h2 align="center">Table Example Page</h2>

<div align="center"><center>

<!-- Define table: Boder is the table line size, Width is the size of table; for example, 100%

Width is full screen size -->

 

<table BORDER="5" ALIGN="center" WIDTH="40%">

<caption>

<H3><FONT color=mediumblue>Here is a small sample table</FONT></H3> </caption>

<THEAD><!--first harizontal line -->

<tr><!--First table row -->

<th>This is the Head.</th> <!--Insert words into table block "TH" element to make words Bold and center -->

</tr>

 

<THEAD>

<TBODY> <!--Table body -->

<tr>

<td ALIGN="middle" >This is the Body.</td><!-- Insert word as regular text -->

</tr>

</TBODY> <!--End table body -->

</table> <!-- End table -->

 

</center></div>

<p align="center"><br>

<br>

</p>

<div align="center"><center>

<table BORDER="1" ALIGN="center"><!--Define another table -->

<caption>

<H3><FONT color=mediumblue>Here is a more complex sample

table</FONT></H3> </caption> <!--Table title -->

<!-- <COLGROUP ROWS=..> is used to format entire columns at -->

<!-- once. Add a <COL> for every column. You can include -->

<!-- formatting in any of the tags -->

<COLGROUP ALIGN="middle" SPAN="3">

<COL>

<COL>

<COL>

</COLGROUP>

<COLGROUP ALIGN="right" SPAN="2">

<COL>

<COL>

</COLGROUP>

 

<THEAD>

<!-- Rowspans and colspans combine the indicated number of -->

<!-- frames vertically or horizontally -->

<tr BGCOLOR="#00ee0">

<td ROWSPAN="2" ALIGN="middle" VALIGN="center"><img SRC="http://149.164.36.204/picture/acmotor.jpg"

ALT="AC Single Phase Motor" width="200" height="144"></td><!--define 4 columns -->

<th COLSPAN="4" ALIGN="middle" VALIGN="center"><h3>See the source code for more details</h3>

4 blocks below and this block are the smae levle as AC motor block.

THREAD element (first horizontal section) is used in the table element</th>

</tr>

 

<!-- 4 columns -->

<tr BGCOLOR="blue" VALIGN="bottom">

<th align="middle"><font color = "white">Columm 1</font></th>

<th align="middle"><font color = "white">Columm 2</font></th>

<th align="middle"><font color = "white">Columm 3</font></th>

<th align="middle"><font color = "white">Columm 4</font></th>

</tr>

</THEAD>

 

<TBODY>

<tr>

<th>Row 1. a</th>

<td><p align="center">Row 1. a and Column 1</p> </td> <!--rowspan (default) 1 -->

<td align="middle">Row 1. b and Column 2</td>

<td rowspan="2" align="middle">Row 1 and Column 3</td> <!--Reserve 2 row -->

<td rowspan="2" align="middle">Row 1 and Column 4</td>

</tr>

<tr>

<th>Row 1. b</th> <!--Add to row at column 1 and 2 -->

<td>Row 1. a and Column 1</td>

<td align="middle">Row 1. a and Column 2</td>

 

<!-- no need to add column 3 and 4 -->

</tr>

 

<!--the same syntax as privious -->

<tr>

<th>Row 2. a</th>

<td><p align="center">Row 2. a and Column 1</p> </td>

<td align="middle">Row 2. b and Column 2</td>

<td rowspan="2" align="middle">Row 2 and Column 3</td>

<td rowspan="2" align="middle">Row 2 and Column 4</td>

</tr>

<tr>

<th>Row 2. b</th>

<td>Row 2. a and Column 1</td>

<td align="middle">Row 2. a and Column 2</td>

</tr>

 

<!--every Rowspan is 1 and all columns are the same line -->

<tr>

<th>Row 3</th>

<td align="middle" >Row 3 and Column 1</td>

<td align="middle" >Row 3 and Column 2</td>

<td align="middle" >Row 3 and Column 3</td>

<td align="middle" >Row 3 and Column 4</td>

</tr>

<tr>

<th>Row 4</th>

<td align="middle" >Row 4 and Column 1</td>

<td align="middle" >Row 4 and Column 2</td>

<td align="middle" >Row 4 and Column 3</td>

<td align="middle" >Row 4 and Column 4</td>

</tr>

<tr BGCOLOR="red" VALIGN="bottom">

<th>Row 5</th>

<th align="middle"><font color = "white">Row 5, Columm 1</font></th>

<th align="middle"><font color = "white">Row 5, Columm 2</font></th>

<th align="middle"><font color = "white">Row 5, Columm 3</font></th>

<th align="middle"><font color = "white">Row 5, Columm 4</font></th>

</tr>

</TBODY>

</table>

 

<!--last sample table -->

<P>&nbsp;</P>

<table>

<div align="center"><center><!--define tabel as full screen --></div></table>

<table BORDER="1" ALIGN="center" WIDTH="100%">

<caption>

<H3><FONT color=mediumblue>Here is another sample table</FONT></H3> </caption>

<THEAD>

<tr BGCOLOR="#00ee0">

<td ROWSPAN="2" ALIGN="middle" VALIGN="center"><img SRC="http://149.164.36.204/picture/lmc4.jpg"

ALT="AC Single Phase Motor" width="200" height="200"></td>

<th COLSPAN="8" ALIGN="middle" VALIGN="center"><h3>See the source code for more details</h3>

This table is without define coloumn size; column width is depending on letter size</th>

</tr>

<tr BGCOLOR="blue" VALIGN="bottom">

<th align="middle"><font color = "white"> Column1</font></th>

<th align="middle"><font color = "white"> 2</font></th>

<th align="middle"><font color = "white"> Column 3</font></th>

<th align="middle"><font color = "white"> 4</font></th>

<th align="middle"><font color = "white"> Column 5</font></th>

<th align="middle"><font color = "white"> 6</font></th>

<th align="middle"><font color = "white"> Column 7</font></th>

<th align="middle"><font color = "white"> 8, the column will be large as this sentence</font></th>

</tr>

</THEAD>

<TBODY>

<tr BGCOLOR="red" VALIGN="bottom">

<th>Row 1</th>

<th align="middle"><font color = "white">Columm 1</font></th>

<th align="middle"><font color = "white">Columm 2</font></th>

<th align="middle"><font color = "white">Columm 3</font></th>

<th align="middle"><font color = "white">Columm 4</font></th>

<th align="middle"><font color = "white">Columm 5</font></th>

<th align="middle"><font color = "white">Columm 6</font></th>

<th align="middle"><font color = "white">Columm 7</font></th>

<th align="middle"><font color = "white">Columm 8</font></th>

</tr>

</TBODY>

</table></center></div></CENTER>

</body>

</html>

 

 

 

Example 12: A Search engine example.

 

<!SEngine.html-->

 

<HTML>

<HEAD>

<TITLE>My Search Engines</TITLE>

</HEAD>

 

<BODY>

<H1>My Search Engines</H1>

 

Try one of the search engines below for connecting

to other popular search sites:

<P>

<TABLE BORDER=1>

<TR BGCOLOR="RED"><TD><FORM ACTION="http://www.altavista.com/">

<INPUT TYPE="SUBMIT" VALUE="AltaVista">

</FORM>

<TD><FORM ACTION="http://www.excite.com/">

<INPUT TYPE="SUBMIT" VALUE="eXcite">

</FORM>

<TD><FORM ACTION="http://www.hotbot.com/">

<INPUT TYPE="SUBMIT" VALUE="HotBot">

</FORM>

<TR BGCOLOR="BLUE"><TD><FORM ACTION="http://www.infoseek.com/">

<INPUT TYPE="SUBMIT" VALUE="InfoSeek">

</FORM>

<TD><FORM ACTION="http://www.lycos.com/">

<INPUT TYPE="SUBMIT" VALUE="Lycos">

</FORM>

<TD><FORM ACTION="http://www.yahoo.com/">

<INPUT TYPE="SUBMIT" VALUE="Yahoo">

</FORM>

</TABLE>

 

</BODY>

</HTML>

 

 

Example 13: A Multiple Frame Example

 

<!-- FrameTableCont.html -->

<!-- Top Level HTML file -->

 

<HTML>

<HEAD>

<TITLE>IEEE IAS Industrial Automation and Control</TITLE>

</HEAD>

 

<FRAMESET ROWS="100,*">

<FRAME SRC="Topics.html" NAME="TOPICS">

<FRAME SRC="IntroIACC.html" NAME="Main">

<NOFRAMES>

<BODY>

For a non-Frames version, do this

<A HREF="IntroIACC.html">the introduction</A>.

</BODY>

</NOFRAMES>

</FRAMESET>

</HTML>

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

<!IntroIACC.html -->

<HTML>

<HEAD>

<TITLE>IAS MSDAD IAC Committee</TITLE>

</HEAD>

 

<BODY>

<H1>Institute of Electrical and Electronics Engineers </H1><BR>

<H2>Manufacturing Systems Development and Applications Department (MSDAD)</H2><BR>

<H3>- Appliance Industry Committee<BR>

- Electrostatic Process Committee<BR>

- Industrial Automation and Control Committee<BR>

- Production and Applications of Light Committee</H3><BR>

</BODY>

</HTML>

 

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

<!Officers.html -->

<HTML>

<HEAD>

<TITLE>Industrial Automation and Control Committee</TITLE>

</HEAD>

<BODY>

<H1> Officers of IACC </H1>

<H2>

Chairman: Muhammad H. rashid<BR>

Vice Chairman: Ahmed Rubaai<BR>

Secretary: Takoi Hamrita<BR>

Past Chairman: Donald S. Zinger<BR>

</H2>

</BODY>

</HTML>

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

<!Scope.html -->

<HTML>

<HEAD>

<TITLE>Industrial Automation and Control Committee</TITLE>

</HEAD>

 

<BODY>

<H1> Scopes of IACC </H1>

<H2>

The Industrial Automation and Control Committee is responsible for all metters

within the scope of the IAS in which the emphasis or dominant factor specifically

relates to the applications of industrial electrical and electronics devices, systems

and methods to the conversion, regulation and utilization of electricity for the

control of industrial processes, machinery and heating.

</H2>

</BODY>

</HTML>

 

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

<!Subcommittees.html -->

<HTML>

<HEAD>

<TITLE>Industrial Automation and Control Committee</TITLE>

</HEAD>

 

<BODY>

<H1> Subcommittees of IACC </H1>

<H2>

Executive Subcommittee: Chairman - Muhammad H. rashid<BR>

Electric Process Heating Subcommittee: Chairman - Adam Skorek<BR>

Papers Review and Prize Awards Sucommittee: Chairman- Ahmed Rubaai<BR>

Standards Subcommittee: Chairman - Ashfag Ahmed<BR>

</H2>

</BODY>

</HTML>

 

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

 

Example 14: Embedded JavaScript

 

<!-- hiieee.html -->

<HTML>

<HEAD>

<BODY BGCOLOR=WHITE>

<TITLE> FIRST JAVASCRIPT EXAMPLE </TITLE>

<H1>

<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">

document.write("Hello IEEE Members!")

</SCRIPT>

</H1>

</BODY>

</HTML>

 

 

Embedded Java Applet Programs

 

The APPLET tage enables us to embed a Java program into a page and send over to client computer.

 

<APPLET CODE=""

WIDTH= xxxx

HEIGHT=xxxx .>

</APPLET>

 

 

Embedding ActiveX Controls

 

<OBJECT CLASSID="clsid: "

WIDTH = xxx

HEIGHT = xxx

VPAGE = 0

ALIGN="LEFT"

>