เรียนรู้ HTML

Intro to html

ทำความเข้าใจ HTML

HTML เป็น Script ที่เรียงลำดับ Tag (คำสั่ง) ไว้เป็น file ไฟล์หนึ่ง เพื่อเป็นตัวบอก Browser ว่าจะต้องแสดงอะไร ลักษณะอย่างไร
Tag จะประกอบด้วยเครื่องหมาย < ตามด้วยชื่อ Tag และเครื่องหมาย > ซึ่งโดยทั่วไป Tag จะมีเป็นคู่ เพื่อเปิดและปิดคำสั่งโดย Tag เปิดจะมีลักษณะดังข้างต้น แต่ Tag ปิดจะเพิ่ม Slash (/) หน้า Tag เท่านั้น ตัวอย่างเช่น คำสั่ง Heading

Tag จะพิมพ์ด้วยตัวอักษรใหญ่ หรือเล็กก็ได้
(ข้อตกลง : ในเอกสารนี้ Tag จะใช้ตัวพิมพ์ใหญ่ตลอด)

โครงสร้างของ HTML

ลำดับ Tag ใน HTML Document
<HTML>…………..</HTML>
คือจุดเริ่มต้นและสิ้นสุดของโปรแกรม และแจ้งแก่ Browser ว่าเป็น HTML Document
<HEAD>…………...</HEAD>
หัวเรื่องแนะนำเรื่องราวของ Home Page

ส่วนภายใน <HEAD>
<TITLE>…………..</TITLE>
ข้อความจะปรากฎเป็นชื่อวินโดว์

ส่วนข้อความอื่น ๆ
<BODY>………….</BODY>
เนื้อความและ Tag อื่น ๆ อีกมากมายจะอยู่ภายในนี้
Internet โลก Cyberspace ที่ถูกเชื่อมโยงด้วย Computer นับร้อยล้านเครื่องและหลายล้ายเครือข่าย มันถูกเชื่อมโยงกันด้วยอะไร ?
World Wide Web หรือ WWW Site นับล้านรอให้เราแวะไปเยี่ยมชม ใน Web Site แต่ละแห่งประกอบไปด้วย หน้า Home Page ซึ่งบรรจุข่าวสาร และสาระบันเทิงที่หลากหลาย รอให้เราสัมผัสในระบบ Multimedia Interactive
Home page เป็นการรวมภาพ ตัวหนังสือ เสียง โปรแกรม และความสามารถในการเชื่อมโยง หรือที่รวมเรียกว่า Hypermedia มันถูกสร้างขึ้นมาได้อย่างไร ต่อไปนี้คือคำตอบ

HTML
HTML (Hypertext Markup Language) เป็น Script ที่ใช้สร้าง Home Page บน Web เป็น Script ที่มีความสามารถในการเชื่อมโยงข้อมูลใน Computer ระหว่าง Computer ในเครือข่าย และระหว่างเครือข่ายใน Internet โดยอ้างอิงจาก URL (Uniform Resource Locators) ด้วยโปรโตคอล HTTP ซึ่งเป็นโปรโตคอลของ WWW

การสร้าง HTML Document ต้องมีอะไรบ้าง

- Text editor อะไรก็ได้ เช่น Notepade เพื่อพิมพ์คำสั่ง (Tag) ของ HTML ซึ่งเป็น Text File แล้วจึง Save ให้ Extention เป็น .htm หรือ .html (สำหรับ os ตัวอื่น ๆ ที่ไม่ใช่ Dos หรือ Window)
- Browser ที่นิยมก็คือ Netscape หรือจะเป็นตัวอื่นก็ได้ เพื่อไว้อ่าน HTML Document แล้วแปลออกมาเป็นหน้าตาของ Home Page (Browser คนละบริษัทอาจให้ผลลัพท์แตกต่างกันเล็กน้อย)
- Server ที่ใช้เก็บ Home Page ซึ่งต้อง Support โปรโตคอล HTTP หรือ Run httpd แล้วนั่นเอง

Markup Tag

<p>Heading <Hn> ใช้แสดงข้อความหัวเรื่องหรือข้อเน้นต่าง ๆ มี 6 ระดับ
<H1>………………………..</H1> ใหญ่สุด </p><p><H1></H1> </p><p><H1>HTML <H1></p><p> <H2>………………………..</H2> รองลงมา
</p><p><H2>HTML</H2></p><p> <H6>……………………….</H6> เล็กสุด
</p><p> <H6>HTML</H6></p><p> Holizontal Rule <HR> ขีดเส้นขั้นหน้า
<HR>…………………….</HR> เช่น
</p><hr width="70%"><p> Paragraph <P> ใช้เมื่อขึ้นบรรทัดใหม่ โดยจะเว้นไป 1 บรรทัด
<P>………………………</P>
</p><p> Line Break <BR> ขึ้นบรรทัดใหม่ โดยไม่เว้นบรรทัด
<BR>……………………..</BR> </p><p> Tag เกี่ยวกับลักษณะตัวอักษร (Text Styles)
ตัวหนา   <B>…………………..</B>
ตัวเอียง   <I>……………………</I>
ขีดเส้นใต้ <U>…………………..</U>
กระพริบ <BLINK>…………………</BLINK> </p><p> กำหนดขนาด Font
<FONT SIZE=ตัวเลข>…………………….</FONT>
เช่น
<FONT SIZE=7>    Html    </FONT>
<FONT SIZE=6>    Html    </FONT>
<FONT SIZE=5>    Html    </FONT>
<FONT SIZE=4>    Html    </FONT>
<FONT SIZE=3>    Html    </FONT>
<FONT SIZE=2>    Html    </FONT>
<FONT SIZE=1>    Html    </FONT>
ขนาดใหญ่ที่สุดคือ 7 ไล่เล็กลงมาจนถึง 1
นิยมกำหนดขนาด Font ทั้งหมดด้วย Tag ที่ต้น Document
<BASEFONT SIZE=ตัวเลข>
โดยสั่งต่อจาก <BODY> </p><p> ตัวอักษรพิเศษ คือเครื่องหมาย   < , >, &, “ ซึ่งซ้ำกับส่วนหนึ่งของ Tag ถ้าต้องการแสดงบน Home Page ต้องแทนด้วยตัวอักษรเหล่านี้ (เรียกว่า Escape Sequence)
&lt: แทน <
&gt: แทน >
&amp:   แทน &
&quot: แทน “ </p><p>การจัดข้อความ
เพื่อกำหนดกำหนดของตัวหนังสือ หรือภาพบนหน้า Home Page HTML 3.0
<CENTER>……………..</CENTER> <P ALIGN=CENTER>……</P>
<LEFT>…………………</LEFT> <P ALIGN=LEFT>………..</P>
<RIGHT>……………….</RIGHT> <P ALIGN=RIGHT>………</P> </p><p>TAG เพิ่มเติม
ภาพ Background
<BODY BACKGROUNG=URL>
กำหนดสีพื้น (ต้องไว้บนสุด)
<BODY BGCOLOR=#nnnnnn>
กำหนดสีตัวหนังสือ
<BODY TEXT=#nnnnnn> </p><p>List Tag ต่าง ๆ ใช้แสดงข้อมูลในรูปแบบของรายการ เช่น </p><p> Numbered of Orclered List : เป็นตัวเลขนำ List
<OL>……………………</OL>    <OL> </p><p> Unnumbered List : เป็น Bullet นำ List    <LI> สีดำ
<UL>……………………</UL>    <UL> </p><p> Directory List : คล้าย UL ยาวไม่เกิน 20 ตัวอักษร   <LI> ดำปี้
<DIR>…………………..</DIR>    <LI> ดำด่าง ๆ </p><p> Menu List        </UL>
<MENU>……………….</MENU>   <LI> สีแดง
List Tag ข้างต้นจะมี <LI> เป็นข้อความหลัง Tag เพื่อแสดงข้อความที่ <LI> สีเขียว
เราต้องการเป็นรายการตามรูปแบบของ List    </OL></p><table border="0" width="70%" bgcolor="#993366"><tbody><tr><td>Image</td></tr></tbody></table><p>IMAGE นำรูปมาลงใน Home Page </p><p> รูปแบบคำสั่ง <IMG SRC=URL หรือ ชื่อภาพ>
ทำความเข้าใจ URL : สำหรับ Home Page แบบ Local จะหมายถึง ไดเรคเทอรีที่ File นั้นอยู่ ถ้าอยู่ในไดเรคเทอรีเดียวกับตัว Browser ก็ไม่ต้องใส่ URL ใส่แต่ชื่อ </p><p> สำหรับ Extention ของรูปภาพที่นิยมใช้บน Internet คือ
GIF สำหรับภาพสี 8 บิต JPEG สำหรับ 24 บิต Browser บางตัวรับแต่ GIF
Link ด้วย Image
<A HREF=URL><IMG SRC=URL หรือ ชื่อภาพ>………………….</A> </p><p>คำสั่งเพิ่มเติมในการจัดรูปแบบ
WIDTH=
HEIGHT=
และ ALIGN=TOP.MIDDLE.BOTTOM จะทำให้ข้อความอยู่ส่วนบน กลาง และล่างของรูปภาพตามลำดับ
</p><table border="0" width="70%" bgcolor="#993366"><tbody><tr><td>Iink การเชื่อมโยงข้อมูล</td></tr></tbody></table><p>การเชื่อมโยงข้อมูล (LINKS)
รูปแบบ    <A HREF=” URL “>………………………………</A>
URL Uniform Resource Location มีรูปแบบดังนี้
Protocal   http://hostname/filename
ตัวอย่าง      htp : //www.nectec.or.th/whats new.html
เช่น <A HREF=”http///www.cnn.com”> CNN News Online </A> </p><p> นอกจากนี้ยังสามารถ Link ไปที่ไฟล์ HTML อื่น หรือในไฟล์เดียวกันก็ได้ (Local Link) โดยกำหนด URL ให้เป็น path และไดเรคเทอรีที่ไฟล์นั้นอยู่ (กรณี Link ไปไฟล์อื่น) เช่น
<A HREF=”does/magazine.htm”> Magazines </A> </p><p> ในกรณี Link ไป ไฟล์เดียวกัน ต้องกำหนดชื่อตำแหน่งในเอกสารก่อนมี Anchor Tag ดังนี้
<A NAME=MARKING>MARKING_POSITION_NAME </A>
ชื่อตำแหน่ง หัวชื่อในเอกสารที่ Show ใน Home Page </p><p>การส่ง E-mail ตอบรับ
Mail
<A HREF=”:mailto……………..” >ส่ง E-mail ถึง………………….</A>
</p><table border="0" width="70%" bgcolor="#993366"><tbody><tr><td>Table</td></tr></tbody></table><p>Table Tag </p><p> <TABLE>…………………</TABLE>
โดยมี Tag ที่ใช้ประกอบภายในคือ
<CAPTION>…………………</CAPTION> ใช้กำหนดชื่อหรือหัวข้อของตาราง
<TH>…………………………</TH> เป็นตัวหนาอยู่กลางเพื่อเน้นในหัวตาราง
<TR>………………………….</TR> Row ของตาราง
<TD>…………………………</TD> Column ของตาราง </p><p> ลองสร้างตารางโดยใช้ร่วมกับคำสั่ง
ALIGN เพื่อจัดวางข้อความ
WIDTH เพื่อปรับขนาดตาราง
COLSPAN เพื่อแบ่งตารางย่อยตามคอลัมน์
POWSPAN เพื่อแบ่งตารางย่อยตามแถว
</p><table border="0" width="70%" bgcolor="#993366"><tbody><tr><td>Frame</td></tr></tbody></table><p>การทำเฟรมบน Home Page </p><p>       <FRAMESET COLS=”%ด้านซ้าย%ด้านขวา”>
                   <FRAME SRC=”ชื่อFile” NAME=”LIFT FRAME”>
                   <FRAME SRC=”ชื่อFile” NAME=”RIGHT FRAME”>
       </FRAMESET> </p><table border="0" width="70%" bgcolor="#993366"><tbody><tr><td>Form</td></tr></tbody></table><p> </p><p>การทำ FORM </p><p>รูปแบบคำสั่ง
<FORM ACTION=”URL” METHOD=GET หรือ POST> </p><p>          ต่อด้วย <INPUT TYPE=TEXT NAME=…….(ตัวแปร….>
                       ผลลัพธ์ที่ได้ </p><p>                      <INPUT TYPE=PASSWORD NAME=…….(ตัวแปร)….>
                       ผลลัพธ์ที่ได้ </p><p>                      <INPUT TYPE=CHECKBOX NAME=…….(ตัวแปร)….>
                       ผลลัพธ์ที่ได้ </p><p>                      <INPUT TYPE=RADIO NAME=…….(ตัวแปร)….>
                       ผลลัพธ์ที่ได้ </p><p>                       <TEXTAREA NAME= …….(ตัวแปร)…>
                       </TEXTAREA>
                        ผลลัพธ์ที่ได้

                       <SELECT NAME= …….(ชื่อตัวแปร)…>
                                   <OPTION VAVLUE=…….(ค่าตัวแปรที่1)…>ชื่อตัวแปร1
                                   <OPTION VAVLUE=…….(ค่าตัวแปรที่2)…>ชื่อตัวแปร2
                                   <OPTION VAVLUE=…….(ค่าตัวแปรที่3)…>ชื่อตัวแปร3
                       </SELECT >
                        ผลลัพธ์ที่ได้ ชื่อตัวแปร1 ชื่อตัวแปร2 ชื่อตัวแปร3 </p><p>                      <INPUT TYPE=SUBMIT>
                       ผลลัพธ์ที่ได้ </p><p>                       <INPUT TYPE=RESET >
                       ผลลัพธ์ที่ได้ </p><p> </FORM></p><table border="0" width="70%" bgcolor="#993366"><tbody><tr><td>Color Code</td></tr></tbody></table><p>      ค่าของสีข้างล่างนี้สามารถนำเอาไปใส่ใน Font, Background,Table ได้
</p><table border="0" width="70%"><tbody><tr>

Dark Slate Blue
MediumForest Green
Salmon
Dark Turquoise
Aquamarine
Medium Turquoise
Medium Slate Blue
Medium Spring Green
Firebrick
Maroon
Sienna
Light Steel Blue
Pale Green
Medium Orchid
Green Yellow
Dark Orchid
Yellow Green
Blue Violet
Khaki
Brown
Light Gray
Turquoise
Pink
Light Blue
Gray
Orange
Violet Red
Gold
Thistle
Wheat
Medium Violet Red
Orchid
Tan
Goldenrod
Plum
Medium Goldenrod
Sandy Brown
Red
Orange Red
Magenta
Coral
Yellow
White
Black
Blue
Slate Blue
Green
Spring Green
Cyan
Navy
Steel Blue
Forest Green
Sea Green
Midnight Blue
Dark Green
Dark Slate Gray
Medium Blue
Sky Blue
Lime Green
Medium Aquamarine
Cornflower Blue
Medium Sea Green
Indian Red
Violet
Dark Olive Green
Dim Gray
Cadet Blue

#6B238E
#6B8E23
#6F4242
#7093DB
#70DB93
#70DBDB
#7F00FF
#7FFF00
#8E2323
#8E236B
#8E6B23
#8F8FBC
#8FBC8F
#9370DB
#93DB70
#9932CC
#99CC32
#9F5F9F
#9F9F5F
#A52A2A
#A8A8A8
#ADEAEA
#BC8F8F
#BFD8D8
#C0C0C0
#CC3232
#CC3299
#CC7F32
#D8BFD8
#D8D8BF
#DB7093
#DB70DB
#DB9370
#DBDB70
#EAADEA
#EAEAAD
#F4A460
#FF0000
#FF007F
#FF00FF
#FF7F00
#FFFF00
#FFFFFF
#000000
#0000FF
#007FFF
#00FF00
#00FF7F
#00FFFF
#23238E
#236B8E
#238E23
#238E6B
#2F2F4F
#2F4F2F
#2F4F4F
#3232CC
#3299CC
#32CC32
#32CC99
#24226F
#426F42
#4F2F2F
#4F2F4F
#4F4F2F
#545454
#5F9F9F

</tr></tbody></table><p> </p>

ความเห็น

บทความในวันเดียวกัน