BasicHTML < Knowledge

r8 - 23 Jun 2006 - 23:17:57 - JaruTangpoonpholwiwatYou are here: SETEC Wiki >

Knowledge Web > WebTechnologyCategory > RubyOnRails > CodingOnRails > RubyOnRailsCourse1 > BasicHTML

-- CharinyaKlakhang - 24 May 2006

Slide 1: การเขียน Web Site ด้วย HTML

รู้จักกับ 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 เช่น Mozilla firefox , IE เพื่อไว้อ่าน HTML Document แล้วแปลออกมาเป็นหน้าตาของ Home Page (Browser คนละบริษัทอาจให้ผลลัพท์แตกต่างกันเล็กน้อย)
Server ที่ใช้เก็บ Home Page ซึ่งต้อง Support โปรโตคอล HTTP ถ้าเขียนและทดสอบบน Windows สามารถใช้ Apache ซึ่งเป็น web server ได้

Slide 2: โครงสร้างของ HTML

<HTML>
      <HEAD>
            <TITLE> ... </TITLE>
      </HEAD>
      <BODY>
        ...
      </BODY>
</HTML>

ลำดับ Tag ใน HTML Document

<HTML>...</HTML>คือจุดเริ่มต้นและสิ้นสุดของโปรแกรม และแจ้งแก่ Browser ว่าเป็น HTML Document
<HEAD>...</HEAD>หัวเรื่องแนะนำเรื่องราวของ Home Page
ส่วนภายใน <HEAD> มี <TITLE>...</TITLE> ข้อความจะปรากฎเป็นชื่อวินโดว์
ส่วนข้อความอื่น ๆ <BODY>...</BODY>จะใส่เนื้อความและ Tag อื่น ๆ อีกมากมายจะอยู่ภายในนี้

Slide 3: Syntax ต่างๆ

คำสั่งในการเริ่มต้นในการสร้างเว็บเพจ

คำสั่งเริ่มต้น

<HTML>...</HTML>

คำสั่ง <HTML> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรมและคำสั่ง </HTML> เป็นการสิ้นสุดโปรแกรม HTML คำสั่งนี้จะไม่แสดงผลในโปรแกรมเว็บเบราเซอร์ แต่ต้องเขียนเพื่อให้เกิดความเป็นระบบของงาน และเพื่อจะให้รู้ว่าเอกสารนี้เป็นเอกสารของภาษา HTML

ส่วนหัวของโปรแกรม

<HEAD>..........</HEAD>

คำสั่ง <HEAD> เป็นคำสั่งที่ใช้กำหนดข้อความในส่วนที่เป็นชื่อเรื่องของไฟล์ HTML และภายในคำสั่ง <HEAD>...</HEAD> จะมีคำสั่งย่อยอีกคำสั่งหนึ่งคือ <TITLE>........</TITLE>

กำหนดข้อความในส่วนหัวของโปรแกรมหรือไตเติลบาร์

<TITLE>..........</TITLE >

คำสั่ง <TITLE> เป็นคำสั่งที่แสดงชื่อของเอกสาร หรือชื่อเรื่องของไฟล์ HTML ซึ่งข้อความภายในคำสั่งจะปรากฎหรือแสดงผลในส่วนของไตเติลบาร์ (Title Bar) ของโปรแกรมเว็บเบราเซอร์ แต่จะไม่แสดงในส่วนของการแสดงผลในโปรแกรมเว็บเบราเซอร์

ส่วนเนื้อหาของโปรแกรม

<BODY>..........</BODY>

คำสั่งนี้เป็นส่วนที่สำคัญในการแสดงผลในเว็บเบราเซอร์ ซึ่งจะประกอบไปด้วยตัวอักษร รูปภาพกราฟิกต่างๆ

Slide 4: การปรับแต่งตัวอักษร และพื้นหลัง

ภาพ Background

<BODY  BACKGROUNG=URL>

กำหนดสีพื้น (ต้องไว้บนสุด)

<BODY BGCOLOR=#nnnnnn>

ตัวอย่าง เช่น

<HTML>
<HEAD>
   <TITLE>การกำหนดสีพื้นหลังโดยการกำหนดสี</TITLE>
</HEAD>
<BODY BGCOLOR="yellow">
   การกำหนดสีพื้นหลังโดยการกำหนดสี
</BODY>
</HTML>

กำหนดสีตัวหนังสือ

<BODY TEXT=#nnnnnn>

Slide 5: Tag ที่ใช้บ่อย

Paragraph

<P ALING="LEFT/RIGHT/CENTER">...</P>

ใช้เมื่อขึ้นบรรทัดใหม่ โดยจะเว้นไป 1 บรรทัด

Line Break ขึ้นบรรทัดใหม่ โดยไม่เว้นบรรทัด

<BR>...</BR>

Tag เกี่ยวกับลักษณะตัวอักษร

  ตัวหนา   <B>...</B>
  ตัวเอียง   <I>...</I>
  ขีดเส้นใต้ <U>...</U>
  กระพริบ <BLINK>...</BLINK>

กำหนดขนาด 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>

ตัวอักษรพิเศษ

ตัวอักษรพิเศษ คือเครื่องหมาย > , < , &amp, ซึ่งซ้ำกับส่วนหนึ่งของ Tag ถ้าต้องการแสดงบน Home Page ต้องแทนด้วยตัวอักษรเหล่านี้ (เรียกว่า Escape Sequence)

  &lt: แทน  <
  &gt: แทน  >
  &amp:   แทน  &
  &quot: แทน  "

การจัดข้อความ

เพื่อกำหนดกำหนดตำแหน่งของตัวหนังสือ

 <CENTER>...</CENTER>  <P ALIGN=CENTER>...</P>
 <LEFT>...</LEFT>  <P ALIGN=LEFT>...</P>
 <RIGHT>...</RIGHT>  <P ALIGN=RIGHT>...</P>

Slide 6: การสร้างตาราง

แท็ก < TABLE > ใช้สร้างตาราง ซึ่งในเว็บเพจส่วนใหญ่หรือเกือบทุกเว็บเพจมักใช้แท็กนี้กันทั้งนั้น ด้วยเหตุผลที่ว่าตารางสามารถประยุกต์ใช้งานได้หลาย แบบตั้งแต่ใช้เป็นตารางธรรมดาเพื่อแสดงค่าตัวเลขทางสถิติหรือตัวเลขที่มีความสัมพันธ์กัน ซึ่งการใช้ตารางนำเสนอข้อมูลแบบนี้ทำให้เห็นการเปรียบเทียบ ที่ชัดเจน ต่อมามีการประยุกต์ใช้ตารางกับข้อมูลประเภทอื่นๆ เช่น ข้อความ หรือรูปภาพเพื่อช่วยออกแบบโฮมเพจ (คือเว็บเพจแรกที่จะแสดงให้เห็นเมื่อเข้าสู่ เซิร์ฟเวอร์นั้น) หรือเว็บเพจทั่วๆ ไปด้วย จนบางครั้งดูไม่ออกว่าเป็นตาราง ในบทนี้จะค่อยๆ อธิบายจากการทำตารางง่ายๆ ไปจนถึงการใช้ตารางช่วยออกแบบเว็บเพจ

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

โครงสร้างตารางโดยทั่วไปจะประกอบไปด้วยแถวและคอลัมน์ โดยช่องข้อมูลที่อยู่ในแนวนอนเดียวกันก็คือแถว และช่องข้อมูลที่อยู่ตรงกันในแนวตั้งก็คือ คอลัมน์นั่นเอง

<TABLE>
    <CAPTION>.........</CAPTION>
        <TR>
              <TH>.........</TH>
              <TH>.........</TH>
        </TR>
        <TR>
                <TD>.........</TD>
                <TD>.........</TD>
        </TR>
        <TR>
                <TD>.........</TD>
                <TD>.........</TD>
        </TR>
<TABLE>

อธิบายการสร้างตาราง

<TABLE> กำหนดการสร้างตาราง และมีคำสั่งปิดคือ </TABLE>
<CAPTION> เป็นการกำหนดค่า หรือข้อความอธิบายตาราง และมีคำสั่งปิดคือ </CAPTION>
<TR> (Table Row) เป็นการกำหนดแถวของตาราง และมีคำสั่งปิดคือ </TR>
<TH> (Table Head) เป็นการกำหนดหัวเรื่องในคอลัมน์ และมีคำสั่งปิดคือ </TH>
<TD> (Table Data) เป็นการกำหนดข้อมูลในตาราง และมีคำสั่งปิดคือ </TD>

การกำหนดเส้นของตาราง

โดยทั่วไปแล้วข้อมูลในตารางจะถูกแบ่งออกเป็นส่วน ๆ อย่างชัดเจนโดยมีเส้นกรอบล้อมรอบแต่ละช่องข้อมูล แต่บางครั้งเพื่อความสวยงามแล้ว นักออกแบบเว็บเพจอาจเลือกที่จะไม่แสดงเส้นกรอบที่ทำให้รกหูรกตานั้นได้ โดยเฉพาะในกรณีที่นักออกแบบให้แท็ก

ในการตกแต่งเว็บเพจ การกำหนดว่าจะแสดงหรือไม่แสดงกรอบทำได้โดยใช้แอตทริบิวต์ BORDER และ BORDERCOLOR

<TABLE BORDER="ค่าตัวเลข" BORDERCOLOR="#RGB หรือชื่อสี" >
...
<TABLE>

กำหนดความกว้างและความสูงของตาราง

การใช้แอตทริบิวต์ HEIGHT และ WIDTH เพื่อกำหนดขนาดของช่องข้อมูลและตำแหน่งของข้อมูลในแต่ละช่อง

<TABLE WIDTH="ความกว้างของตาราง (เป็นพิกเซลหรือเปอร์เซ็น)" HEIGHT="ความสูงของตาราง (เป็นพิกเซลหรือเปอร์เซ็น)">
...
<TABLE>

Slide 7: การนำเสนอไฟล์รูปภาพ

< img src="ชื่อรูปภาพที่มีนามสกุลเป็น .gif หรือ .jpg" >

เราสามารถกำหนดคุณสมบัติของรูปภาพได้ โดยเราจะใส่ภายในคำสั่ง < IMG SRC > เพื่อที่จะทำให้รูปภาพสามารถใช้ร่วมกับข้อ ความหรือตัวอักษรและทำให้ เว็บเพจนั้นมีความน่าสนใจมากยิ่งขึ้น

< img src="ชื่อรูปภาพที่มีนามสกุลเป็น .gif หรือ .jpg" alt= "ข้อความอธิบาย" align="top/middle/bottom/left/right" width="ค่าตัวเลข" height="ค่าตัวเลข" hspace="ค่าตัวเลข" vspace="ค่าตัวเลข" border="กำหนดเป็นตัวเลข" >

อธิบาย Attribute ต่างๆ

Alt เป็นการกำหนดข้อความอธิบาย โดยจะปรากฎก็ต่อเมื่อนำเมาส์ลากมาที่รูปข้อความก็จะปรากฎ

Align = "top" เป็นการกำหนดข้อความที่อยู่ด้านบนของรูปภาพ

Align = "middle" เป็นการกำหนดข้อความที่อยู่กึ่งกลางของรูปภาพ

Align = "bottom" เป็นการกำหนดข้อความที่อยู่ด้านล่างของรูปภาพ

Align = "left" เป็นการกำหนดข้อความที่อยู่ด้านขวาของรูปภาพ

Align = "right" เป็นการกำหนดข้อความที่อยู่ด้านซ้ายของรูปภาพ

Width = ... การกำหนดขนาดความกว้างของรูปภาพ

Height = ... การกำหนดขนาดความสูงของรูปภาพ

Hspace = ... เป็นการกำหนดระยะเว้นขอบจากด้านซ้ายกับรูปภาพ - ในการแสดงข้อความล้อมรอบรูปนั้น

เป็นวิธีที่ใช้กันมาก กับรูปที่เป็นตัวสินค้าและมีคำอธิบายล้อมอยู่ข้างๆ แต่การที่ข้อความอยู่ใกล้กับรูปนั้นๆ มากไปอาจทำให้เพจนั้นดูแน่นไม่น่าอ่าน ดังนั้นแท็ก จึงถูกออกแบบให้มีแอตทริบิวต์ VSPACE และ HSPACE เพื่อใช้กำหนดระยะห่างระหว่างรูปและข้อความที่ล้อมรูป โดยค่าที่กำหนดนั้นอาจใช้หน่วยที่เป็นพิกเซล หรือ กำหนดเป็นเปอร์เซ็นต์ของหน้าจอแทนก็ได้

Vspace = ... เป็นการกำหนดระยะเว้นขอบจากด้านบนกับรูปภาพ - ในการแสดงข้อความล้อมรอบรูปนั้น เป็นวิธีที่ใช้กันมากกับรูปที่เป็นตัวสินค้าและมีคำอธิบายล้อมอยู่ข้างๆ แต่การที่ข้อความอยู่ใกล้กับรูปนั้นๆ มากไปอาจทำให้เพจนั้นดูแน่นไม่น่าอ่าน ดังนั้นแท็ก จึงถูกออกแบบให้มีแอตทริบิวต์ VSPACE และ HSPACE เพื่อใช้กำหนดระยะห่างระหว่างรูปและข้อความที่ล้อมรูป โดยค่าที่กำหนดนั้นอาจใช้หน่วยที่เป็นพิกเซล หรือ กำหนดเป็นเปอร์เซ็นต์ของหน้าจอแทนก็ได้

Border = ... เป็นการกำหนดเส้นกรอบของรูปภาพ - สำหรับการใส่เส้นขอบให้กับรูปใดๆ ให้ใช้แอตทริบิวต์ BORDER แล้วตามด้วยความหนาของเส้นขอบโดยมีหน่วยเป็นพิกเซล ซึ่งหากไม่กำหนดหรือกำหนดเป็นศูนย์ก็หมายความว่าไม่มีเส้นขอบนั่นเอง

ภาพที่เหมาะสมกับการใช้งาน

ภาพที่นำมาใช้ในการนำเสนอผ่านเครือข่ายอินเทอร์เน็ต ด้วยเอกสารเว็บ ควรใช้ภาพนามสกุล .GIF หรือ .JPG เท่านั้น โดยมีหลักการพิจารณาเลือก คือ ภาพที่มีสีน้อยๆ หรือภาพที่ต้องการทำพื้นให้โปร่งใส ควรจัดเก็บในฟอร์แมต .GIF และกำหนดค่าเพิ่มเติม (Option) เป็น Interlaced คือ ให้ภาพแสดงหยาบๆ แล้วค่อยๆ ละเอียด ในขณะที่ภาพที่ต้องการความคมชัด ความสดใส ควรจัดเก็บในฟอร์แมต .JPG และกำหนดคุณภาพ (Quality) ที่เหมาะสมกับภาพนั้นๆ ค่าแนะนำ คือ 4 - 6 หากต้องการให้ภาพแสดงหยาบๆ แล้วค่อยๆ ละเอียด ให้กำหนดค่าเพิ่มเติม (Option) เป็น Progressive ด้วย สำหรับความละเอียดของภาพ (Resolution) ควรใช้ค่า 72 dpi

ตัวอย่าง เปิดภาพตัวอย่างของ Photoshop 5.5 ชื่อ dune.tif มาจัดเก็บใหม่ด้วยฟอร์แมต และค่าต่างๆ ได้ผลดังนี้

ต้นฉบับ .TIF	1,061 KB
.JPG ค่า Quality = 8	44 KB
.JPG ค่า Quality = 3	17 KB
.GIF	102 KB

ดังนั้นภาพนี้ ซึ่งเป็นภาพสี ที่มีความคมชัด และสดใส ควรเก็บด้วยฟอร์แมต JPG เท่านั้น สำหรับค่า Quality กำหนดได้ โดยดูความเหมาะสมของการนำไปใช้งาน โดยหากกำหนดค่า Quality ไว้ต่ำ จะทำให้คุณภาพความคมชัดของภาพลดลงไปด้วย แม้ว่าจะได้ขนาดไฟล์เล็กก็ตาม

Slide 8: การเชื่องโยง (ลิงค์)

เป็นที่ทราบกันดีอยู่แล้วว่าการที่อินเทอร์เน็ตได้รับความนิยมอย่างกว้างขวางอยู่ทั่วโลกนั่น เป็นผลมาจากความสามรถในการเชื่อมโยงข้อมูล (Links) จากข้อมูลหนึ่งไปยังอีกข้อมูลหนึ่งได้อย่างรวดเร็ว โดยสามารถเชื่อมโยงข้อความได้ทั้งจากภายในแฟ้มเอกสารข้อมูลของตัวเอง และแฟ้มเอกสารข้อมูลภายนอกที่อยู่ต่างเว็บไซต์กัน

ข้อความที่ถูกกำหนดให้เชื่อมโยงกับฐานข้อมูลอื่น ๆ บนเว็บเบราเซอร์จะแสดงผลเป็นตัวอักษรที่มีสีแตกต่างจากตัวอักษรทั่วไป และอาจมีการขีดเส้นใต้ข้อความนั้นด้วย โดยทั่วไปตัวอักษรที่แสดงผลอยู่บนเว็บเบราเซอร์จะมีสีดำบนพื้นสีขาว (หรือสีเทา) แต่สำหรับข้อความที่ใช้เป็นตัวเชื่อมโยงข้อมูลนั้น จะมีตัวอักษรเป็นสีน้ำเงิน (หรือสีอื่นตามแต่ที่ผู้สร้างกำหนดขึ้นมา) เมื่อเลื่อนเมาส์ไปชี้ที่ข้อความซึ่งมีการเชื่อมโยง รูปแบบของตัวชี้จะเปลี่ยนจาก สัญลักษณ์ลูกศรไปเป็นรูปมือแทน และที่แถบที่แสดงสถานะด้านล่างจะแสดงถึง ตำแหน่งของจุดหมายปลายทางที่ข้อความเชื่อมโยงไปถึงให้เราได้เห็น

ประเภทของการเชื่อมโยง

HTML แบ่งการเชื่อมโยงออกเป็น 2 ประเภท ดังนี้

* การเชื่อมโยงภายในเว็บไซต์ * การเชื่อมโยงนอกเว็บไซต์

การเชื่อมโยงทั้ง 2 ประเภทนี้ ยังแบ่งออกได้เป็นอีก 2 ชนิด คือ การเชื่อมโยงข้อมูลภายในแฟ้มเอกสาร และการเชื่อมโยงข้อมูลต่างแฟ้มเอกสาร

ภายในแฟ้มเอกสาร

<a href="#ทำการตั้งชื่อตามความต้องการ">ข้อความ</a>

<a name="ชื่อที่ตั้งไว้เพื่อที่จะทำการเชื่อมโยงมาหา">ข้อความ</a>

ต่างแฟ้มเอกสาร

<a href="ไฟล์ที่จะทำการเชื่อมโยงที่มีนามสกุล .html หรือ .htm">ข้อความ</a>

การเชื่อมโยงนอกเว็บไซต์

<a href="http://URLที่ต้องการจะเชื่อมโยงไป">ข้อความ</a>

การเชื่อมโยงแบบ E-mail

<a href="mailto:ชื่อ E-mail address ของผู้ที่จะให้ส่ง E-mail กลับคืนมา">ข้อความ</a>

การเชื่อมโยงแบบ Download

ในเว็บเพจในปัจจุบันนี้มักจะนิยมนำเอาข้อมูลต่าง ๆ ลงสู่เว็บเพจ เพื่อจะทำให้เนื้อหาของเว็บเพจนั้นมีประโยชน์แก่ผู้เข้าเยี่ยมชม จึงทำให้มีการนำข้อมูลต่างที่จะทำการเผยแพร่ ไม่ว่าจะเป็น ข้อมูลที่เป็นไฟล์ Word ไฟล์ Power Point และไฟล์อื่นๆ อีกมากมาย ในการที่จะนำไฟล์ต่างๆ นี้ลงสู่เว็บเพจนั้นเราจะต้องทำการ zip ไฟล์ข้อมูลนั้น เพื่อเป็นการง่ายต่อการจะนำไฟล์ไปใช้โดยการ Download ไฟล์นั้น

<a href="ไฟล์พร้อมระบุนามสกุล">ข้อความ</a>

การเชื่อมโยงไฟล์ด้วยรูปภาพ

ในการเชื่อมโยงข้อมูลโดยใช้ตัวอักษรนั้น อาจจะทำให้เว็บเพจของเรานั้นไม่น่าสนใจ เราสามารถใช้รูปภาพมาทดแทนการเชื่อมโยงข้อมูลด้วยตัวอักษร

<a href="ไฟล์ที่มีนามสกุล .html"><img sre="ชื่อไฟล์รูปภาพ .gif หรือ .jpg" alt="การเชื่อมโยงโดยรูปภาพ"></a>

Slide 9: แนะนำ Web site

http://www.nectec.or.th/courseware/internet/html/0002.html

Knowledge

Reset Password

External Webs
Knowledge
Products
Pub
Internal Webs
Management
Projects
CMMI
Kampong School

Reset Password