<HEAD> <TITLE> Basic of HTML </TITLE>

ตัวอย่างที่ 1

<HTML>

</HEAD>

<BODY>

The following is an example of HTML markup codes: <P>

Markup codes usually come in pairs, enclosing the text which they format. The entire file is bracketed by HTML codes. Within this are two main sections, the "TITLE" and "BODY" blocks. Paragraphs in the body text are enclosed within "P" codes, and so on. Linear whitespace is ignored; any number of blank lines may be left between codes to make it easier to read the raw HTML file.

Links are easy to code, though they have been omitted from the above example for simplicity.

</BODY>

</HTML>

ตัวอย่างที่ 2

<HTML>

<HEAD<TITLE>BODY TAG </TITLE</HEAD>

This is BODY Section of Document.

</BODY>

</HTML>

ตัวอย่างที่ 3

<HTML>

<HEAD> <TITLE> Heading Size </TITLE</HEAD>

<BODY>

<H1> This is HEADING Lever-1 </H1>

<H3> This is HEADING Lever-3 </H3>

<H6> This is HEADING Lever-6 </H6>

<H2 Align = “center”> This is HEADING Lever-2 </H2>

</BODY>

</HTML>

ตัวอย่างที่4

<HTML>

<HEAD> <TITLE> Without Paragraph </TITLE</HEAD>

<BODY>

At a bar in New York, the man to Ah Beng's left tells the bartender,
"JOHNNIE WALKER, SINGLE" and his companion says,
"JACK DANIELS, SINGLE".The bartender approaches Ah Beng and asks,
"AND YOU, SIR?"
Ah Beng replies: "Tan Ah Beng, MARRIED."

</BODY>

</HTML>

ตัวอย่างที่.4

<HTML>

<BODY>

<PRE>

Ah Beng to a long-distance telephone operator :

"COULD YOU PLEASE TELL ME THE TIME DIFFERENCE BETWEEN Taipei AND Las Vegas?"

Operator:"JUST A MINUTE..."

Ah Beng: "THANK YOU," AND PUTS DOWN THE PHONE.

</PRE>

</BODY>

</HTML>

ตัวอย่างที่ 5.1

<HTML>

<HEAD<TITLE>Logical Style</TITLE>

</HEAD>

<BODY>

<EM>Emphasized characters</EM<BR>

<STRONG>Strong Characters</STRONG<BR>

<CODE>Programing Code</CODE<BR>

<SAMP>Sample Output</SAMP<BR>

<KBD>User Typing-Keyboard</KBD<BR>

<DFN>Definition</DFN>

<BLOCKQUOTE> Referrenced Information </BLOCKQUOTE>

<CITE>Referrenced Note</CITE>

</BODY>

</HTML>

ตัวอย่างที่ 5.2

<HTML>

<HEAD> <TITLE> Physical Styles </TITLE>

</HEAD>

<BODY>

<I>Italic Text</I<BR>

<TT>TeleType or Monospace</TT<BR>

<U>Underlined Text</U<BR>

<BLINK>Binking Text</BLINK<BR>

<SUB> Supscripts </SUB>9<BR>

<SUP> Superscripts </SUP>9<BR>

<STRIKE>Strike-Through Text</STRIKE<BR>

</BODY>

</HTML>

ตัวอย่างที่ 6

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

ตัวอย่างที่ 7

<HTML>

<BODY>

<FONT FACE = “AngsanaUPC”> ฟอนต์แบบ AnsanaUPC </FONT> <BR>

<FONT FACE = “Arial, AngsanaUPC”> ถ้าหากเบราเซอร์หาฟอนต์ Aril ไม่พบก็ใช้AnsanaUPC </FONT> <BR>

</BODY>

</HTML>

ตัวอย่างที่ 8

<HTML>

<HEAD> <TITLE> Font color </TITLE</HEAD>

<BODY>

<FONT Color = #rrggbb> After completing a jigsaw puzzle he'd been working on for quite sometime, Ah Beng proudly shows off the finished puzzle to a friend</FONT<P>

<FONT COLOR #FF0000> "It took me ONLY 5 MONTHS TO DO IT," Ah Beng brags. </FONT<P>

<FONT COLOR = Red> "FIVE MONTHS? THAT'S TOO LONG." the friend exclaims. </FONT<P>

<FONT COLOR = green> "YOU ARE A FOOL". Ah Beng replies, SEE THIS BOX, IT IS WRITTEN "FOR 4-7 YRS".</FONT>

</BODY>

</HTML>

ตัวอย่างที่ 9

<HTML>

<HEAD> <TITLE> BackGround Color </TITLE</HEAD>

Ah Beng with two red ears went to his doctor. <P>

The doctor asked him what had happened to his ears<P>

and he answered, "I was ironing a shirt and the phone ring<P>

but instead of picking up the phone,I accidentally picked up the <P>

iron and stuck it to my ear. ? <P>

Oh Dear!"the doctor exclaimed in disbelief. <P>

"But what happened to the other ear?" That stupid dumb called back!"

</BODY>

</HTML>

ตัวอย่างที่ 10

<HTML>

<HEAD<TITLE>Marquee </TITLE</HEAD>

Howdy !

Ah Bang

</MARQUEE>

</FONT>

</BODY>

</HTML>

ตัวอย่างที่ 11

<HTML>

<HEAD<TITLE> Special Characters</TITLE</HEAD>

<BODY>

Yen Symbol &yen <BR>

CopyRight Symbol &#169 <BR>

Less Than <<BR>

Greater Than > <BR>

Double Quot " <BR>

Symbol "<©®>" <BR>

Symbol     " <  ©  ®

 >  " <BR>

</BODY>

</HTML>

ตัวอย่างที่ 12

<HTML>

<HEAD<TITLE>Big and SMALL </TITLE</HEAD>

<BODY>

<SMALL>Why did Ah Beng go to a movie with his 18 friends?</SMALL<P>

<BIG>Because below 18 was not allowed.</BIG>

</BODY>

</HTML>

ตัวอย่างที่ 13

<HTML>

<HEAD<TITLE>Horizontal Rule Line</TITLE</HEAD>

<BODY>

<HR>

This is the line without any Attribute. <BR> <BR>

This is the line with Size = 15%, Width = 50% and ALIGN = left<BR> <BR>

This is the line with Size = 15 pixels , Width = 190 pixels and Noshade.

</BODY>

</HTML>

ตัวอย่างที่14

<HTML>

<HEAD>

<TITLE>Unordered Lists </TITLE>

</HEAD>

<BODY>

<H3> Colors of the Rainbow </H3>

<LH> Color of the Rainbow </LH>

<LI> RED

<LI> Orange

<LI> Yellow

<LI> Green

<LI> Blue

<LI> Violet

</UL>

</BODY>

</HTML>

ตัวอย่างที่ 15

<HTML>

<HEAD> <TITLE> Ordered List</TITLE</HEAD>

<BODY>

There are many kinds of Browser, but only the first two are most popular.

<LI> INTERNET EXPLORER

<LI> NETSCAPE NAVIGATOR

<LI> MOSAIC

</OL>

</BODY</HTML>

ตัวอย่างที่ 16

<HTML>

<HEAD<TITLE> Definition List </TITLE>

</HEAD>

<BODY>

<H1> Definition List </H1>

<DL>

<DT> MPEG <DD> Motion Picture Experts Group

<DT> MIDI <DD> Musical Instrument Digital Interface

<DT> MIME <DD> Multipurpose Internet Mail Extensions

</DL>

</BODY>

ตัวอย่างที่ 17

<HTML>

<HEAD> <TITLE> Menu Lists </TITLE>

</HEAD>

<BODY>

รายการอาหารจานเด็ด

<MENU>

<LI> ปลาหิมะย่างซีอิ๊ว

<LI> หอยเชลล์เจี๋ยนน้ำมันหอย

</MENU>

รายการเครื่องดื่ม

<MENU>

<LI> ชาร้อน

<LI> น้ำอัดลม

</MENU>

</BODY>

</HTML>

ตัวอย่างที่ 18

<HTML>

<HEAD>

<TITLE> Directory Lists </TITLE>

</HEAD>

<BODY>

การแสดงรายการ 5 รูปแบบ

<DIR>

<LI> Unordered Lists

<LI> Ordered Lists

<LI> Definition Lists

<LI> Menu Lists

<LI> Directory Lists

</DIR>

</BODY>

</HTML>

ตัวอย่างที่ 16

<HTML>

<HEAD>

<TITLE>Nested Lists </TITLE>

</HEAD>

<BODY>

<H2> Nested Ordered and Unordered Lists </H2>

<HR>

<H3> How to Load A PEZ dispenser </H3>

<OL> <LI> Gather the necessary items.

<UL>

<LI> PEZ dispenser.

<LI> Package of PEZ candy.

</UL>

<LI> Unwrap PEZ candy

<LI> Grasp stack of candy between thumb and forefinger.

<LI> Fully extend dispenser.

<LI> Load candy into dispenser.

<LI> Enjoy!

</OL<HR>

</BODY>

</HTML>

ตัวอย่างที่ 17

<HTML>

<HEAD<TITLE>Graphic </TITLE</HEAD>

<BODY>

</BODY</HTML>

ตัวอย่างที่ 18

<HTML>

<HEAD<TITLE>Align-Graphic</TITLE</HEAD>

<BODY>

สกาวใจ (Align-Left)

</BODY>

</HTML>

ตัวอย่างที่ 19

<HTML>

<HEAD>

<TITLE> Link to WebSite </TITLE>

</HEAD>

<BODY>

<H3> This is the Sample Page for HyperLink </H3>

</BODY>

</HTML>

ตัวอย่างที่ 20

<HTML>

<HEAD<TITLE> Link within the Page </TITLE</HEAD>

<BODY>

Read About <A HREF = #Label_1> Section_1 </A> <BR>

Read About <A HREF = #Label_2> Section_2 </A> <BR>

Read About <A HREF = #Label_3> Section_3 </A> <BR>

<HR>

<A NAME = Label_1> section 1 <P</A>

Ah Beng with two red ears went to his doctor. <P>

The doctor asked him what had happened to his ears<P>

and he answered, "I was ironing a shirt and the phone ring<P>

but instead of picking up the phone,I accidentally picked up the <P>

iron and stuck it to my ear. ? <P>

Oh Dear!"the doctor exclaimed in disbelief. <P>

"But what happened to the other ear?" That stupid dumb called back!"

<HR>

<A NAME = Label_2> section 2 </A<P>

Ah Beng to a long-distance telephone operator : <P>

"COULD YOU PLEASE TELL ME THE TIME DIFFERENCE BETWEEN Taipei AND Las Vegas?" <P>

Operator:"JUST A MINUTE..." <P>

Ah Beng: "THANK YOU," AND PUTS DOWN THE PHONE. <P>

<HR>

<A NAME = Label_3> section 3 </A> <P>At a bar in New York, the man to Ah Beng's left tells the bartender,
"JOHNNIE WALKER, SINGLE" and his companion says, <P>

"JACK DANIELS, SINGLE".The bartender approaches Ah Beng and asks, <P>

"AND YOU, SIR?" <P>

Ah Beng replies: "Tan Ah Beng, MARRIED."<P>

<HR>

</BODY>

</HTML>

ตัวอย่างที่ 21

<HTML>

<HEAD>

<TITLE> Link to another File </TITLE>

</HEAD>

<BODY>

Goto <A HREF = Ex1.html> Exercise 1 </A> <BR>

Goto <A HREF = Ex2.html> Exercise 2 </A>

</BODY>

</HTML>

ตัวอย่างที่ 22

<TABLE>

<CAPTION> Caption Text

<TR>

<TH> Heading_1 <TH> Heading_2

</TR>

<TR>

<TD> Data_1 <TD> Data_2

</TR>

</TABLE>

ตัวอย่างที่ 23

<HTML>

<HEAD>

<TITLE> TABLE </TITLE>

</HEAD>

<BODY>

<CAPTION> <H3> Vehicle Information </H3>

<TR<TH> Drive Plate<TH> Car Color<TH> Owner</TR>

<TR<TD> 78-westernTD> Blue<TD> John</TR>

<TR<TD> 60-AB-5<TD> Red<TD> Henry</TR>

</TABLE>

<P>

<CAPTION> <H3> Vehicle Information </H3>

<TR<TH> Drive Plate <TD> 78-western <TD>60-AB-5</TR>

<TR<TH> Car Color <TD> Blue<TD> Red</TR>

<TR<TH> Owner<TD> John<TD> Henry</TR>

</TABLE>

</BODY>

</HTML>

ตัวอย่างที่ 24

<HTML>

<HEAD>

<TITLE>Attribute of TABLE </TITLE>

</HEAD>

<BODY>

<CAPTION ALIGN = BOTTOM> <B> ROUTINE </B>

<TR> <TH> Saturday<TH> Sunday</TR>

<TR> <TD> Shopping<TD> Fishing</TR>

</TABLE>

</BODY>

</HTML>

ตัวอย่างที่ 25

<HTML>

<HEAD<TITLE> Cell of TABLE</TITLE</HEAD>

<BODY>

<CAPTION ALIGN = BOTTOM> <b> DEFAULT Cellspacing & Cellpading

<TR>

<TH> Heading 1<TH> Heading2

</TR>

<TR>

<TD> CELL 1 <TD> CELL2

</TR>

</TABLE>

<CAPTION ALIGN = BOTTOM> <B> Cellspacing = 5 Cellpadding = 1

<TR>

<TH> Heading 1<TH> Heading2

</TR>

<TR>

<TD> CELL 1<TD> CELL 2

</TR>

</TABLE>

<CAPTION ALIGN = BOTTOM> <B> Cellspacing = 2 Cellpadding = 5

<TR>

<TH> Heading 1<TH> Heading 2

</TR>

<TR>

<TD> CELL 1<TD> CELL 2

</TR>

</TABLE>

</BODY</HTML>

ตัวอย่างที่ 28

<HTML>

<HEAD> <TITLE> Align & Vallign of TR </TITLE</HEAD>

<BODY>

<TR>

<TH> Heading 1 <TH> Heading2

</TR>

<TD> CELL1

<LI> Monday

<LI> Tuesday

</OL>

<TD> CELL 2

</TR>

</TABLE>

</BODY>

</HTML>

ตัวอย่างที่29 การใช้ค่าเสริม Colspan & Rowspan

<HTML>

<HEAD>

<TITLE> Colspan & Rowspan </TITLE>

</HEAD>

<BODY>

<CAPTION> Normal Table

</TABLE>

<P>

<CAPTION> Table with Colspan = 2

</TABLE>

<P>

<CAPTION> Table with Rowospan = 2

</TABLE>

</BODY>

</HTML>

ตัวอย่างที่ 29

<HTML>

<HEAD> <TITLE> frameSet </TITLE</HEAD>

</FRAMESET>

</HTML>

ตัวอย่างที่ 30

<HTML>

<HEAD>

<TITLE> FrameSet </TITLE>

</HEAD>

</FRAMESET>

</HTML>

ตัวอย่างที่ 31

<HTML>

<HEAD>

<TITLE> Simple frame </TITLE>

/HEAD>

</FRAMESET>

</HTML>

ตัวอย่างที่ 31 การสร้างหลาย Frame บน Page เดียวกัน

<HTML>

<HEAD>

<TITLE> Fancy Frame </TITLE>

</HEAD>

</FrameSet>

</FrameSet>

</ FrameSet >

</FRAMESET>

</HTML>

ตัวอย่างที่ 32

สร้างเฟรมขึ้น 2 เฟรมตั้งชื่อว่า left และ right

<HTML>

<HEAD> <TITLE> Nameing Frame </TITLE</HEAD>

</FrameSet>

</HTML>

ไฟล์ Left.html

<HTML>

<H3> Make a Selection </H3>

<UL>

<LI<A HREF = "Agenda.html" Target = "right">Agenda </A</LI>

<LI<A HREF = "Minutes.html" Target = "right">Minutes </A</LI>

<LI<A HREF = "Mainmenu.html" Target = "_self">Return to Main Menu </A</LI>

</BODY>

</HTML>

ไฟล์ Agenda.html

<HTML>

<HEAD> <TITLE> Agenda </TITLE> </HEAD>

This is Agenda page.

</BODY>

</HTML>

ตัวอย่างที่ 33แก้ไขไฟล์ Left.html โดยเพิ่ม <BASE TARGET> ลงไปและลบ taget ออก

ไฟล์ left_modi.html

<HTML>

<BASE TARGET = "right">

</HEAD>

<H3> Make a Selection </H3>

<UL>

<LI<A HREF = "Agenda.html">Agenda </A</LI>

<LI<A HREF = "Minutes.html">Minutes </A</LI>

<LI<A HREF = "Mainmenu.html" Target = "_self">Return to Main Menu </A</LI>

</BODY>

</HTML>

exeHtml1