c058972307
git-svn-id: https://svn.code.sf.net/p/lazarus-ccr/svn@1405 8e941d3f-bd1b-0410-a28a-d453659cc2b4
305 lines
11 KiB
HTML
305 lines
11 KiB
HTML
<HTML>
|
|
|
|
<HEAD>
|
|
<TITLE>HTML Samples</TITLE>
|
|
<link rel="stylesheet" type="text/css" href="demo.css">
|
|
<STYLE TYPE="text/css"> <!--
|
|
-->
|
|
</STYLE>
|
|
|
|
</HEAD>
|
|
|
|
<BODY class="indent">
|
|
<p CLASS="heading"><A NAME="Highlighting">Character Highlighting</A></p>
|
|
<UL>
|
|
<LI><B>Bold Text</B><BR>
|
|
</LI>
|
|
<LI><I>Italicized Text</I><BR>
|
|
</LI>
|
|
<LI><U>Underlined Text</U><BR>
|
|
</LI>
|
|
<LI><EM>Emphasized Text</EM><BR>
|
|
</LI>
|
|
<LI><STRONG>Strong Text</STRONG><BR>
|
|
</LI>
|
|
<LI><CODE>Code Text</CODE><BR>
|
|
</LI>
|
|
<LI><CITE>Citation Text</CITE><BR>
|
|
</LI>
|
|
<LI><KBD>Keyboard Text</KBD><BR>
|
|
</LI>
|
|
<LI><SAMP>Sample Text</SAMP><BR>
|
|
</LI>
|
|
<LI><TT>Teletype Text</TT><BR>
|
|
</LI>
|
|
<LI><VAR>Variable Element Text</VAR><BR>
|
|
</LI>
|
|
<LI><B><I>Bold and Italicized Text</I></B><BR>
|
|
</LI>
|
|
<LI><STRIKE>Struck Out Text</STRIKE><BR>
|
|
</LI>
|
|
</UL>
|
|
|
|
<p CLASS="heading"><A NAME="Headings">Headings</A></p>
|
|
<H1>Heading 1</H1>
|
|
<H2>Heading 2</H2>
|
|
<H3>Heading 3</H3>
|
|
<H4>Heading 4</H4>
|
|
<H5>Heading 5</H5>
|
|
<H6>Heading 6</H6>
|
|
|
|
<p CLASS="heading"><A NAME="Fonts">Fonts</A></p>
|
|
<P>Font control (Face names, color, size) may be achieved by setting VCL properties or through the use of tags in
|
|
the HTML document. </P>
|
|
|
|
<UL>
|
|
<LI><B>Font Faces</B> <UL>
|
|
<LI><FONT FACE="Times New Roman">Times New Roman</FONT> </LI>
|
|
<LI><FONT FACE="Arial">Arial</FONT> </LI>
|
|
<LI><FONT SIZE="5" FACE="Wingdings">ñ¸(6</FONT> (Wingdings) </LI>
|
|
</UL>
|
|
</LI>
|
|
<LI><B>Font Sizes</B> <FONT SIZE="1">1</FONT> <FONT SIZE="2">2</FONT> <FONT SIZE="3">3</FONT> <FONT
|
|
SIZE="4">4</FONT> <FONT SIZE="5">5</FONT> <FONT SIZE="6">6</FONT> <FONT SIZE="7">7</FONT> <FONT SIZE="6">6</FONT>
|
|
<FONT SIZE="5">5</FONT> <FONT SIZE="4">4</FONT> <FONT SIZE="3">3</FONT> <FONT SIZE="2">2</FONT> <FONT
|
|
SIZE="1">1</FONT> </LI>
|
|
<LI><B><FONT COLOR="#800000">F</FONT><FONT COLOR="#FFFFFF">O</FONT><FONT COLOR="#000080">N</FONT><FONT
|
|
COLOR="#008000">T</FONT> <FONT COLOR="#00FFFF">C</FONT><FONT COLOR="#FF0000">O</FONT><FONT
|
|
COLOR="#000080">L</FONT><FONT COLOR="#800080">O</FONT><FONT COLOR="#FFFF00">R</FONT><FONT COLOR="#0000FF">S</FONT>
|
|
</B><P> </P>
|
|
</LI>
|
|
<LI><B>Subscripts and Superscripts</B> <UL>
|
|
<LI>H<SUB>2</SUB>SO<SUB>4</SUB> </LI>
|
|
<LI>R<SUP>2</SUP> = X<SUP>2</SUP> + Y<SUP>2</SUP> </LI>
|
|
</UL>
|
|
</LI>
|
|
</UL>
|
|
|
|
<p CLASS="heading"><A NAME="Lists" CLASS="heading">Lists</A></p>
|
|
<P><B>Ordered List</B><BR>
|
|
</P>
|
|
<OL>
|
|
<LI>Line 1 </LI>
|
|
<LI>Line 2 </LI>
|
|
</OL>
|
|
<P><B>Ordered List (Lettered)</B><BR>
|
|
</P>
|
|
<OL TYPE="a">
|
|
<LI>Line 1 </LI>
|
|
<LI>Line 2 </LI>
|
|
</OL>
|
|
<P><B>Unordered List</B><BR>
|
|
</P>
|
|
<UL>
|
|
<LI>Line 1 </LI>
|
|
<LI>Line 2 </LI>
|
|
</UL>
|
|
<P><B>Definition List</B><BR>
|
|
</P>
|
|
<DL>
|
|
<DT>Term 1</DT>
|
|
<DD>Term 1's definition </DD>
|
|
<DT>Term 2</DT>
|
|
<DD>Term 2's definition </DD>
|
|
</DL>
|
|
<P><B>Directory List</B> (looks just like unordered list) </P>
|
|
<DIR>
|
|
<LI>Item 1 </LI>
|
|
<LI>Item 2 </LI>
|
|
</DIR>
|
|
<P><B>Menu List</B> (looks just like unordered list) <MENU>
|
|
<LI>Item 1 </LI>
|
|
<LI>Item 2 </LI>
|
|
</MENU>
|
|
</P>
|
|
<P><B>Lists can be nested in various ways</B> </P>
|
|
<OL>
|
|
<LI>First Item <UL>
|
|
<LI>First Sub Item <UL>
|
|
<LI>First Sub Sub Item </LI>
|
|
<LI>Second Sub Sub Item </LI>
|
|
</UL>
|
|
</LI>
|
|
<LI>Second Sub Item </LI>
|
|
</UL>
|
|
</LI>
|
|
<LI>Second Item </LI>
|
|
</OL>
|
|
|
|
<p CLASS="heading"><A NAME="Images">HTML Graphics</A></p>
|
|
<P><B>Inline</B> images are placed directly in text like this one.
|
|
<IMG SRC="glass.bmp" ALT="glass.bmp" WIDTH="48" HEIGHT="54"> Inline Images may be aligned so that text is at the
|
|
bottom (default), at the top, <IMG SRC="glass.bmp" ALIGN="TOP" WIDTH="48" HEIGHT="54"> or in the middle.
|
|
<IMG SRC="glass.bmp" ALIGN="MIDDLE" WIDTH="48" HEIGHT="54">. The image error symbol <IMG SRC="foo.bmp"> is
|
|
displayed if an error is encountered when displaying an image. </P>
|
|
<P> Images can be used as hotspots <A HREF="#HighLighting"><IMG SRC="contents.bmp" ALT="Contents" WIDTH="106"
|
|
HEIGHT="41"></A> and work just like text links. </P>
|
|
<P> <A NAME="Up"><B>Transparent</B></A> images like these <IMG SRC="glass.bmp" Alt="glass.bmp" WIDTH="48" HEIGHT="54"><!--transp-->
|
|
<IMG SRC="note.gif" Alt="note.gif" WIDTH="32" HEIGHT="32"> allow the background to show through. </P>
|
|
<P> <A NAME="FloatImage"> <IMG SRC="pengbrew.png" ALT="pengbrew.png" ALIGN="left" HEIGHT="160" WIDTH="160"></A>
|
|
<A HREF="#No Connection"><IMG SRC="pyramids.jpg" ALT="Pyramids" ALIGN="right" ISMAP="ISMAP" WIDTH="138"
|
|
HEIGHT="109"></A> Left and right <B>floating</B> images, shown here, are appropriate for large images as text can
|
|
flow around them automatically. </P>
|
|
<P> The image on the right has the <A NAME="IsMap"><B>IsMap</B></A> attribute set. When used as a link, the pixel
|
|
coordinates of the click spot are transmitted with the URL. These can be used to direct the link to a target
|
|
appropriate for that area of the image. </P>
|
|
<P><A NAME="UseMap"> <IMG ALIGN="right" SRC="arrows.gif" USEMAP="ArrowMap" WIDTH="84" HEIGHT="46"
|
|
ALT="arrows.gif"> </A>The image with the arrows demonstrates client side image mapping. The <B>UseMap</B>
|
|
attribute points to an image map definition describing the hot areas of the image. <BR CLEAR="all">
|
|
<MAP NAME="ArrowMap">
|
|
<AREA Title="Up" SHAPE="Polygon" HREF="#Images" COORDS="6,40,21,3,36,39,21,36">
|
|
<AREA Title="Down" SHAPE="Polygon" HREF="#Special Chars" COORDS="47,5,62,7,78,5,62,41">
|
|
</MAP>
|
|
</P>
|
|
<P> <A NAME="Sizing"> <IMG SRC="pyramids.jpg" ALT="Pyramids" ALIGN="left" WIDTH="69" HEIGHT="55"></A>
|
|
<IMG SRC="pyramids.jpg" ALT="Pyramids" ALIGN="left" WIDTH="35" HEIGHT="27"> Images may be sized using the
|
|
<B>height</B> and <B>width</B> attributes. <BR CLEAR="all">
|
|
</P>
|
|
|
|
<p CLASS="heading"><A NAME="MouseOver">MouseOver Images</A></p>
|
|
<p>A <A HREF="Things.htm#ActiveImages" Target="RightWin">special syntax</a> allows for two and three state MouseOver images.</p>
|
|
<p align="center"><img Src="ugly.gif" Active>
|
|
<p align="center"><img Src="mail5a.gif" Active>
|
|
|
|
<p CLASS="heading"><A NAME="Special Chars">Special Characters</A></p>
|
|
<P>In an HTML document, some characters must be specially entered. </P>
|
|
<P></P>
|
|
<UL>
|
|
<LI>The characters <, >, &, and " have special significance in the HTML language. They can be
|
|
entered as <B>&lt;</B>, <B>&gt;</B>, <B>&amp;</B>, and <B>&quot;</B> respectively. (Note the
|
|
semicolon in the syntax).<P> </P>
|
|
</LI>
|
|
<LI>Non keyboard characters may be entered in the form <B>&#NNN;</B> where NNN is the decimal number
|
|
representing the character. For instance, the <B>©</B> copyright symbol may be entered as <B>&#169;</B>
|
|
(<B>&copy;</B> also works). <P> </P>
|
|
</LI>
|
|
<LI>Some characters in the Latin entity set also have special symbols by which they may be entered. For example, A
|
|
with a grave accent, <B>À</B>, is entered as <B>&Agrave;</B>. </LI>
|
|
</UL>
|
|
|
|
<div style="page-break-inside: avoid;">
|
|
<p CLASS="heading"><A NAME="Address1">Address Text</A></p>
|
|
<ADDRESS> L. David Baldwin<BR>
|
|
22 Fox Den Road<BR>
|
|
Hollis, NH 03049<BR>
|
|
</ADDRESS>
|
|
</div>
|
|
|
|
<p CLASS="heading"><A NAME="Preformated">Preformated Text</A></p>
|
|
<PRE>This is preformated text, <B><pre></B>. Multiple spaces and
|
|
carriage returns are recognized. Preformated text won't
|
|
wrap. It can have <A HREF="#Preformated">hot spots too.</A>
|
|
</PRE>
|
|
|
|
<p CLASS="heading"><A NAME="BlockQuote">Blockquote Text</A></p>
|
|
<BLOCKQUOTE> This is blockquote text. It is used to indicate text quoted from another source. Here it is rendered
|
|
as indented plain text. </BLOCKQUOTE>
|
|
|
|
<p CLASS="heading"><A NAME="Centered">Centered Text</A></p>
|
|
<p align="CENTER">
|
|
Here is a line of centered text.
|
|
</p>
|
|
|
|
<p class="heading"><a name="SpecialEvents">Special Events</a></p>
|
|
<p>Events allow interaction with the user's application.
|
|
<ul>
|
|
<li>OnInclude event allows HTML text insertion at load time.
|
|
<p align="center"><b>Today's date is <!--#date--></b>
|
|
<br><b>Loaded at <!--#time--></b>
|
|
<li><p>OnImageClick, OnImageOver events for images.
|
|
<p align="center"><b>Right Click on these Thumbnails</b>
|
|
<p align="center"><img src="arizona.jpg" height="75">
|
|
<img src="pyramids.jpg" height="75">
|
|
<img src="windmill.jpg" transp height="75">
|
|
<li><p>OnObjectClick event for Buttons, Radiobutton, and Checkboxes
|
|
<p align="center"><b>Click on these</b>
|
|
|
|
<table align="center" cellpadding="5">
|
|
<tr valign="bottom">
|
|
<td width="50%" nowrap>
|
|
<input type="radio" name="Series1" value="Radio 1" OnClick="display" checked> Radio 1<br>
|
|
<input type="radio" name="Series1" value="Radio 2" OnClick="display"> Radio 2
|
|
<td nowrap><input type="checkbox" name="Series2" value="Checkbox 1" OnClick="display"> Checkbox 1<br>
|
|
<input type="checkbox" name="Series2" value="Checkbox 2" OnClick="display"> Checkbox 2
|
|
</table>
|
|
<p align="center"><input type="button" value="Push Me" OnClick="Thank You!">
|
|
</ul>
|
|
|
|
<p CLASS="heading"><A NAME="Tables">Tables</A></p>
|
|
<CENTER>
|
|
<TABLE BORDER="1" CELLPADDING="5">
|
|
<TR>
|
|
<TH BGCOLOR="#FFD0D0">Weight</TH>
|
|
<TH BGCOLOR="#FFD0D0">Fee</TH>
|
|
</TR>
|
|
<TR>
|
|
<TD BGCOLOR="#FFFFE0">Not over 10 pounds</TD>
|
|
<TD BGCOLOR="#FFFFE0">$1.80</TD>
|
|
</TR>
|
|
<TR>
|
|
<TD BGCOLOR="#FFFFE0">Over 10 pounds</TD>
|
|
<TD BGCOLOR="#FFFFE0">$2.50</TD>
|
|
</TR>
|
|
</TABLE>
|
|
</CENTER>
|
|
<P> Many other variations of Tables are shown in the <A HREF="tabltut1.htm" TARGET="RightWin"> Table Tutorial.</A>
|
|
</P>
|
|
|
|
<div style="page-break-inside: avoid;">
|
|
<p CLASS="heading"><A NAME="Forms">HTML Forms</A></p>
|
|
<FORM ACTION="Dummy.htm" METHOD="Get">
|
|
<TABLE BORDER="1" ALIGN="center">
|
|
<!--This table for outside border only-->
|
|
<TR>
|
|
<TD BGCOLOR="#d0d0d0">
|
|
<TABLE ALIGN="center" border=0 width=360>
|
|
<TR>
|
|
<TH COLSPAN="4">Pizza Order</TH>
|
|
</TR>
|
|
<TR>
|
|
<TH ALIGN="right" WIDTH="33%">Name:</TH>
|
|
<TD WIDTH="67%" COLSPAN="3"><INPUT SIZE="27" NAME="Name"></TD>
|
|
</TR>
|
|
<TR>
|
|
<TH ALIGN="right">Address:</TH>
|
|
<TD COLSPAN="3"><INPUT SIZE="27" NAME="Address"></TD>
|
|
</TR>
|
|
<TR VALIGN="top" BGCOLOR="#d0d0d0">
|
|
<TD NoWrap><B>Topping</B><BR>
|
|
 <INPUT TYPE="checkbox" NAME="Topping" VALUE="Cheese" CHECKED="CHECKED"> Cheese<BR>
|
|
 <INPUT TYPE="checkbox" NAME="Topping" VALUE="Pepperoni"> Pepperoni<BR>
|
|
 <INPUT TYPE="checkbox" NAME="Topping" VALUE="Onion"> Onion<BR>
|
|
</TD>
|
|
<TD COLSPAN="2"><B>Size</B><BR>
|
|
 <INPUT TYPE="radio" NAME="Size" VALUE="10in"> 10 in<BR>
|
|
 <INPUT TYPE="radio" NAME="Size" VALUE="12in" CHECKED="CHECKED"> 12 in<BR>
|
|
 <INPUT TYPE="radio" NAME="Size" VALUE="16in"> 16 in<BR>
|
|
</TD>
|
|
<TD WIDTH="40%"><B>Payment Method</B> <BR>
|
|
  <SELECT NAME="PaymentMethod" SIZE="1"> <OPTION SELECTED="SELECTED">Cash </OPTION><OPTION>Visa
|
|
</OPTION><OPTION>M/C </OPTION><OPTION>Check </OPTION> </SELECT>
|
|
</TD>
|
|
</TR>
|
|
<TR>
|
|
<TH COLSPAN="4" ALIGN="left"> Special Instructions<BR>
|
|
<TEXTAREA NAME="Special" style="width:100%" ROWS="3" WRAP="soft">No Special Instructions</TEXTAREA>
|
|
|
|
</TH>
|
|
</TR>
|
|
<TR ALIGN="center">
|
|
<TD COLSPAN="2" WIDTH="50%" ALIGN="RIGHT" VALIGN="MIDDLE">
|
|
<INPUT TYPE="Image" SRC="Order1.gif" NAME="Order" Active>
|
|
</TD>
|
|
<TD COLSPAN="2" width="50%" VALIGN="middle" ALIGN="left">  <INPUT TYPE="reset" VALUE="Reset"></TD>
|
|
</TR>
|
|
</TABLE>
|
|
</TD>
|
|
</TR>
|
|
</TABLE>
|
|
<P> </P>
|
|
</FORM>
|
|
</div>
|
|
</BODY>
|
|
</HTML>
|
|
|