AllPresentIntroWebAppFramework < Knowledge

r2 - 18 Nov 2006 - 14:06:18 - CharinyaKlakhangYou are here: SETEC Wiki >

Knowledge Web > WebTechnologyCategory > RubyOnRails > CodingOnRails > RubyOnRailsCourse1 > AllPresentIntroWebAppFramework

Slide 1: ความรู้เบื้องต้นเกี่ยวกับ web programming

ภาพรวมของการพัฒนา Web site มีส่วนประกอบหลัก 3 ส่วน อยู่ในรูปแบบของ "3-tier architecture" ดังภาพด้านล่าง

ประกอบด้วย

1. Web browser
2. Web server
3. Database server

Slide 2: คำศัพท์ที่ควรรู้

เว็บบราวเซอร์ (Web Browser) – เว็บบราวเซอร์ คือ โปรแกรมที่ทำหน้าที่แสดงเนื้อหาเว็บไซต์ โดยแปลง ภาษา script เป็น html script เว็บบราวเซอร์ที่ได้รับความนิยม ได้แก่ Internet Explorer, Netscape Mozilla Firefox

Web server : คือ เครื่องคอมพิวเตอร์ที่ทำหน้าที่ให้บริการ HTTP(HyperText^? Transfer Protocol) เพื่อให้ผู้ใช้สามารถอ่านข้อมูล ทั้งภาพ และเสียง ผ่าน Web

Browser เช่นบริการ http://www.nectec.or.th หรือ http://localhost เป็นต้น โปรแกรมที่ทำงานเป็น web server เช่น

- Apache เป็นโปรแกรมเว็บเซิร์ฟเวอร์ที่มีความสามารถสูงและเป็นที่นิยมใช้มากที่สุดในปัจจุบัน สามารถทำงานได้หลายระบบปฏิบัติการ เช่น ระบบ Unix, Linux, FreeBSD, Windows ดูรายละเอียดเพิ่มเติมได้ที่ www.apache.org
- IIS (Internet Information Server) เป็นเว็บเซิร์ฟเวอร์ที่พัฒนาโดยบริษัทไมโครซอฟต์ ทำงานบนระบบปฏิบัติการ Windows NT 4.0, Windows 2000, Windows XP และ Windows Server 2003 ดูรายละเอียดเพิ่มเติมได้ที่ www.microsoft.com
- Jakata Tomcat เป็นเว็บเซิร์ฟเวอร์ที่ใช้ทดสอบสริปต์ JSP(JavaCourseKasetsart Server Page)

Database server : คือ เครื่องบริการข้อมูล ทำหน้าที่จัดการกับฐานข้อมูล เพื่อจัดเก็บข้อมูลอย่างเป็นระบบ สำหรับระบบฐานข้อมูลที่นิยมใช้ ได้แก่ MYSQL ,Microsoft Access,!PostgreSQL,SQL Server เป็นต้น โดยผู้ใช้ต้องเขียนโปรแกรมสั่งประมวลผล ปรับปรุงข้อมูล หรือนำข้อมูลในส่วนที่ตนเองมีสิทธิ์ ไปใช้ตามต้องการ

เว็บเพจ (WebPage) : เอกสารที่เปิดดูผ่าน Web browser มีชื่อเรียกสั้น ๆ ว่า “ เว็บเพจ” ซึ่งส่วนใหญ่จะถูกสร้างขึ้นจากภาษา์ที่เรียกว่า HTML World Wide Web (www)

เว็บไซต์ (Web Site) – เว็บไซต์ คือ ที่รวม Web Page หลายๆ หน้า โดยสามารถเปิดเว็บไซต์ ด้วยการพิมพ์ url ของเว็บไซต์ที่ต้องการ

โฮมเพจ (Home Page) – แต่ละเว็บไซต์จะประกอบด้วยหน้าเว็บเพจจำนวนหลายหน้า แต่อย่างไรก็ตาม จะมีอยู่หน้าหนึ่งที่ถูกตั้งให้เป็นโฮมเพจ หรือหน้าแรกของเว็บไซต์ เป็นหน้าแรกที่ทุกคนที่เข้ามาใช้บริการ Website นั้นจะได้พบเจอก่อนหน้าอื่น ถ้าจะเปรียบไปก็เหมือนกับหน้าปกหนังสือนั้นเอง กล่าวคือ โฮมเพจเป็นทางเข้าของเว็บเพจทั้งหมดในเว็บไซต์นั้น เมื่อเราเปิดดูโฮมเพจ เราจะพบกับคำแนะนำการใช้งาน และสรุปสิ่งที่น่าสนใจในเว็บไซต์ไปจนถึงหัวข้อที่เชื่อมต่อไปยังเว็บเพจอื่น

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

URL – (URL : Uniform Resource Location) คือ ตำแหน่งของเว็บไซตปลายทาง เช่น www.google.co.th

Slide 3: แนะนำเครื่องมือ

เครื่องมือที่ใช้ในการพัฒนา web site

WMServerTools ภายในบรรจุด้วย Apache, php, perl, mysql, phpMyAdmin, smtp ดูรายละเอียดเพิ่มเติมได้ที่ www.wmcreation.it

AppServ ภายในบรรจุด้วย Apache, php, mysql, phpMyAdmin ดูรายละเอียดเพิ่มเติมได้ที่ www.apservnetwork.com

InstantRails ภายในบรรจุด้วย Apache,Ruby, mysql, phpMyAdmin ดูรายละเอียดเพิ่มเติมได้ที่ http://rubyforge.org/projects/instantrails/

เครื่องมือสำหรับเขียนโปรแกรม

1. เครื่องมือประเภท Text Editor เครื่องมือประเภทนี้ผู้สร้างเว็บเพจจะต้องรู้ไวยากรณ์ของภาษา ที่จะนำมาพัฒนา ตัวอย่างเครื่องมือประเภทนี้ เช่น

ระบบ Windows : Notepad, EditPlus ,Rad Rails * เป็นต้น
ระบบ Unix : Pico, Vi , Emace เป็นต้น

2. เครื่องมือช่วยสร้างเว็บแบบสำเร็จรูป (Web Builder) เครื่องมือประเภทนี้ผู้สร้างเว็บไม่จำเป็นต้องรู้แท็ก HTML ก็สามารถพัฒนาเว็บเพจ เป็นของตัวเองได้ ด้วยเวลาอันรวดเร็ว ตัวอย่างเครื่องมือประเภทนี้

Macromedia Dreamweaver

โปรแกรมอื่นๆ ที่จำเป็นต้องใช้

FileZilla โปรแกรมใช้ในการ Upload งานจากเครื่อง ไปที่ web server

-- 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

การติดตั้ง Instant Rails

Instant Rails เป็น Package Tools ที่ใช้สำหรับพัฒนา ruby โดยเฉพาะ ซึ่งจะประกอบด้วย Ruby, Rails, Apache และ MySQL^?? ทุก component จะถูก config เข้าด้วยกัน พร้อมที่จะทำงาน โดยไม่ต้องมีการติดตั้งใดๆ จึงไม่มีการเข้าไปแก้ไข environment ของระบบบนเครื่องที่ใช้ในการพัฒนา ปัจจุบัน Instant Rails จะถูกพัฒนามาเพื่อใช้งานบน Windows เท่านั้น แต่ในอนาคตจะสามารถใช้งานได้ใน Linux, BSD, และ OSX

Instant Rails เป็น tool สำหรับผู้พัฒนางาน Ruby On Rails เนื่องจากสิ่งที่จำเป็นในการพัฒนา Ruby On Rails ทุกอย่าง ได้บรรจุอยู่ภายในนี้ทั้งหมด ได้แก่ Ruby, Rails, Apache, MySQL^? ทุกอย่างมีการ set up เบื้องต้นทุกอย่างเอาไว้แล้ว จึงง่ายต่อการนำเอาไปใช้ เพียงแค่นำงานที่จะรัน ไปวางในไดเรกทอรี ที่อยู่ภายใน instant Rails

ขั้นตอนที่ 1: ดาวน์โหลด Instant Rails (Window version)

สามารถดาวโหลด Instant Rail เวอร์ชั่นล่าสุดได้ essay writing service (ปัจจุบัน Instant Rails 1.3)
แตกไฟล์ InstantRails-1.3a-win.zip ในที่ที่ี่ต้องการ
ภายในไดเรกทอรีของ Instant Rails จะมีไดเรกทอรีต่างๆ ดังภาพ

ภาพที่ 6: Directories in Instant Rails

ขั้นตอนที่ 2: การติดตั้ง Instant Rails

เข้าไปในไดเรกทอรีของ InstantRails จะเห็นไดเรกทอรีย่อยมากมาย ดังภาพด้านบน
ดับเบิ้ลคลิ้กที่ InstantRails.exe เพื่อติดตั้ง
จะเห็นตัวอักษร "I" สีแดงขึ้นบน toolbar ด้านล่างขวามือ
หลังจากติดตั้งเสร็จ จะแสดง Instant Rails interface มาให้เพื่อ setup

ภาพที่ 7: Run InstantRails.exe

ขั้นตอนที่ 3:การ Config Instant Rails

คลิ้กไปที่ปุ่มตัว "I" ที่อยู่บน Instant Rails interface
ไปที่ "I" > configure จะเห็นหัวข้อต่างๆ ดังนี้
- Instant Rails เป็นการตั้งค่าให้ Instant Rail
- Apache แก้ไขไฟล์ http.conf
- Database (via PhpMyAdmin^?) จัดการฐานข้อมูล MySQL^?
- Window host file แก้ไขไฟล์ host สำหรับตั้งชื่อแทนการเรียกจาก IP
ไปที่ "I" > Rails Applications > Mange Rails Applications จะมีหน้าต่างขึ้นมาให้เลือก application ที่ต้องการ แล้วจึงกดปุ่ม Run WEBrick

ภาพที่ 8: Configure Instant Rails

ภาพที่ 9: Configure Instant Rails

ภาพที่ 10: Mange Rails Applications

ภาพที่ 11: Choose application and start WEBrick

จะมีหน้าต่างของ command ที่แสดงการ Run ที่พอร์ต 3000

ภาพที่ 12: Pop up command

4.พิมพ์ URL : http://127.0.0.1:3000/ ถ้าติดตั้งสำเร็จจะพบหน้าแรกของ Ruby On Rails

ภาพที่ 12: Ruby On Rails page

-- CharinyaKlakhang - 24 May 2006

การใช้ Rad Rails Editor

การติดตั้ง

สิ่งที่ต้องมีก่อน การติดตั้ง

Ruby installed (1.8.4) (ใน Instant Rails)
Rails framework installed (1.1) (ใน Instant Rails)
Java 1.4+ installed

ดาวน์โหลด Rad Rails tool เวอร์ชันล่าสุด 0.6.3 ที่นี่ หรือ http://www.radrails.org/
เมื่อดาวน์โหลด และแตก Zip เรียบร้อยแล้ว
ติดตั้ง Rad Rails โดยคลิ้กทีไอคอน ดังภาพ