HTML PHP MySQL สำหรับเว็บโปรแกรมเมอร์มือใหม่

การเขียนโปรแกรมบนเว็บด้วย PHP 1

บทที่ 1 การติดตั้งโปรแกรมเพือจําลองเครื่องเป็ นเว็บ
่
เซอร์ ฟเวอร์ (Web Server)
ก่อนที่เราจะทําการเขียนโปรแกรมโดยใช้ภาษาพีเอชพีน้ นเราต้องทําการจําลองเครื่ อง
ั
เราเป็ นเซอร์ฟเวอร์เพื่อการทดสอบโปรแกรม เนื่องจากพีเอชพีเป็ นภาษาที่ทางานฝั่ง
ํ
เซอร์ฟเวอร์ (Server) ดังนั้นเราจึงต้องติดตั้งโปรแกรมที่ทางานในฝั่งเซอร์ฟเวอร์ นันก็คือ
ํ ่
โปรแกรม อาปาเช่(Apache) โปรแกรมพีเอชพี (PHP) โปรแกรมมายเอสคิวแอล (MySQL)
ปัจจุบนมีผที่นาทั้งสามโปรแกรมนี้มารวมกันแล้วติดตั้งเพียงครั้งเดียวก็จะมีโปรแกรม
ั ู้ ํ
ทังสามแล้ว เช่น AppServ, WAMP หรื อ XAMPP เป็ นต้น ในที่น้ ีจะเลือก WAMP เป็ นชุด
่
โปรแกรมสําหรับจําลองเครื่ องเราเนื่องจากโปรแกรมนี้มีส่วนสําหรับจัดการข้อมูลต่างๆ ของ
ทั้งสามโปรแกรมได้ง่ายดายมาก
1. ขั้นตอนการดาวน์ โหลด (Download)
เนื่องจาก WAMP มีการพัฒนาอย่างต่อเนื่องเพื่อรองรับกับการเปลี่ยนแปลงเวอร์ชน ั่
ของ PHP ดังนั้นเพื่อให้โปรแกรมอัพเดท ควรที่จะดาวน์โหลดอยูเ่ รื่ อยๆ เว็บไซต์ของ WAMP
Server นั้นคือ http://www.wampserver.com/ โดยขั้นตอนการดาวน์โหลดมีดงนี้ ั

เข้าเว็บไซต์ http://www.wampserver.com/ หากต้องการเปลี่ยนภาษาเป็ นภาษาอังกฤษ เพือให้
่
เข้าใจง่าย ให้คลิ๊กที่ไอค่อนรู ปธงชาติองกฤษ กดที่ DOWNLOAD เพือเข้าสู่หน้าสนหรับดาวน์
ั ่
โหลด

www.thicakephp.net มานพ กองอุ่น


เมื่อปรากฏหน้าสําหรับดาวน์โหลดแล้ว ให้คลิ๊กที่คาว่า DOWNLOAD WampServer 2.0
ํ



จากนั้นก็จะเป็ นการ Redirect ไปสู่เว็บไซต์ sourceforge.net ซึ่งเป็ นเว็บไซต์ที่เก็บไฟล์ที่เรา
ต้องการ หลังจากนั้นก็จะปรากฏหน้าต่างสําหรับดาวน์โหลดโดยอัตโนมัติ ให้คลิ๊กที่ปุ่ม Save
File



ํ
เมื่อกดปุ่ ม Save File แล้วก็จะปรากฏหน้าต่างที่กาลังดาวน์โหลดลงมาในเครื่ องของเรา

เมื่อดาวน์โหลดเสร็ จแล้วจะปรากฏไอค่อนในโฟลดอร์ท่ีเราได้ทาการบันทึกไฟล์ไว้ ก็เป็ นอัน
ํ
เสร็ จสิ้นขั้นตอนในการดาวน์โหลด



2. ขั้นตอนการติดตั้ง (Install)
หลังจากที่เราได้ดาวน์โหลดมาแล้ว ให้ทาการติดตั้งโปรแกรม WAMP ให้เรี ยบร้อย
ํ
โดย คลิ๊กเปิ ดไฟล์ WampServer2.0c.exe จะปรากฏกล่องโต้ตอบเตือนให้กดที่ปุ่ม Run

จากนั้นโปรแกรมจะแจ้งเตือนว่าห้ามอัพเกรดโปรแกรมจากเวอร์ชน WAMP5.1.x. หากติดตั้ง
ั่
เวอร์ชนดังกล่าวให้ทาการสํารองข้อมูลและลบโฟล์เดอร์เวอร์ชนเก่าออก ก่อนติดตั้ง คลิ๊กที่ปุ่ม
ั่ ํ ั่
Yes

หลังจากนั้นจะเข้าสู่ข้ นตอนของการติดตั้งแบบวิซาด (Wizard) ให้คลิ๊กปุ่ ม Next > เพื่อ
ั
ดําเนินการต่อ



เมื่อคลิ๊กปุ่ ม Next ก็จะปรากฏข้อตกลงในการใช้งานอ่านให้เข้าใจแล้วเลือก I accept the
agreement เพือยอมรับ หลังจากนั้นกดปุ่ ม Next >
่



จากนั้นก็จะปรากฏตําแหน่งสาหรับติดตั้งโปรแกรมและไฟล์ต่างๆ ของ WAMP คือ Apache,
MySQL, PHP, phpMyAdmin, SQLiteManager เป็ นต้น เพื่อป้ องกันข้อมูลสูญหายจาก
ข้อผิดพลาดของ Windows แนะนําให้ติดตั้งที่ไดร์ฟ d: คลิ๊ก Next > เพื่อเข้าสู่ข้ นตอนถัดไป
ั

เลือกส่วนเพิ่มเติมสําหรับการติดตั้งคือ Create a Quick Launch icon หมายถึง ให้ไอค่อนของ
โปรแกรมไปปรากฏใน Quick Launch ด้วย
Create a Desktop icon หมายถึง ให้ไอค่อนของโปรแกรมไปแสดงที่หน้าจอด้วย เลือกตามที่
ต้องการแล้วคลิ๊ก Next >



หลังจากนั้นจะพบหน้าต่างสรุ ปการตั้งต่าในตอนแรกก่อนที่จะทําการติดตั้งลงใน Windows
หากต้องการแก้ไข ให้คลิ๊กที่ปุ่ม < Back แต่หากตรงตามความต้องการแล้วให้คลิ๊กที่ Install



จะเห็นแถบสถานะ หรื อ Progress bar แสดงสถานะว่ากําลังติดตั้ง

เมื่อติดตั้งเสร็ จแล้วจะปรากฏหน้าต่างให้เลือกเพือให้โปรแกรมทํางานทันทีหลังจากคลิ๊กปุ่ ม
่
Finish



จากนั้นที่ Taskbar ก็จะปรากฏเห็นไอค่อนเป็ นรู ปมิเตอร์

ทดลองคลิ๊กที่ไอค่อนรู ปมิเตอร์จะพบ Control Panel เกิดขึ้น

หากต้องการเปลี่ยนภาษาให้ทาการคลิ๊กขวาตรงไอค่อนรู ปมิเตอร์แล้วทําการเลือกภาษาที่
ํ
ต้องการ ตามรายการที่มีให้



3. โครงสร้ างของ WAMP (Folder Structure)
โครงสร้างโฟลเดอร์ของโปรแกรม WAMP นั้นประกอบไปด้วย โฟลเดอร์ต่างๆ ดังนี้
wamp // โฟลเดอร์หลักของโปรแกรม WAMP
|_ alias // เป็ นโฟลเดอร์ที่เก็บไฟล์ต้ งค่าสําหรับ Alias เพื่อระบุให้รันใน
ั
loacalhost/โฟลเดอร์ ตามที่ตองการได้
้
|_ apps // เป็ นโฟลเดอร์ที่เก็บสคริ ปที่เขียนด้วยภาษา PHP
| |_ phpmyadmin2.11.6 // เป็ นโฟลเดอร์เก็บสคริ ป phpMyAdmin
เพื่อจัดการฐานข้อมูล MySQL
| |_ sqlitemanager1.2.0 // เป็ นโฟลเดอร์เก็บสคริ ป salitemanaget เพื่อ
จัดการฐานข้อมูล sqlite
|_ bin // เป็ นโฟลเดอร์ที่เก็บโปรแกรม apache, mysql, และ php
| |_ apache // เป็ นโปรแกรม Web Server
| |_ mysql // เป็ นโปรแกรมฐานข้อมูล
| |_ php // เป็ นโปรแกรม PHP
|_ help // เป็ นโฟลเดอร์เก็บไฟล์ช่วยเหลือของ WAMP
|_ lang // เป็ นโฟลเดอร์ที่เก็บไฟล์ภาษาใน WAMP
| |_ modules
|_ log // เป็ นโฟลเดอร์เก็บค่าต่างๆ ในการใช้งาน WAMP
|_ script // เป็ นโฟลเดอร์ที่เก็บสคริ ปเสริ มที่เขียนด้วยภาษา PHP
|_ tmp // เป็ นโฟลเดอร์สารองในการใช้งาน WAMP
ํ
|_ www // เป็ น Root Directory ของเว็บไซต์



4. ขั้นตอนการทดสอบ (Testing)
คลิ๊กที่ไอค่อนรู ปมิเตอร์แล้วเลือก Localhost

ก็จะปรากฏเว็บเพจหน้าหลัก คือ http://localhost/ หรื อ http://127.0.0.1/ หากแสดงผลตามภาพ
ด้านล่างแสดงว่าทุกอย่างถูกต้อง เป็ นอันเสร็ จสิ้นการติดตั้ง WAMP อย่างสมบูรณ์



บทที่ 2 ปูพนฐานภาษา HTML
ื้
ภาษาเอชทีเอ็มแอล (HTML) ย่อมาจาก Hyper Text Markup Language ซึ่งเป็ นภาษาที่
พัฒนามาตั้งแต่ช่วงปลายปี 1986 โดยทีมงานจากห้องปฏิบติการทางจุลภาคฟิ สิ กส์แห่งยุโรป
ั
(European Particle Physics Labs) หรื อที่รู้จกกันในนาม CERN (Conseil European la
ั
Recherche Nucleaire) ประเทศสวิตเซอร์แลนด์ โดยมีการพัฒนานําเสนอข้อมูลในระบบ
WWW (World Wide Web) ซึ่งพัฒนาภาษาที่ใช้สนับสนุนการเผยแพร่ เอกสารของนักวิจย ั
หรื อเอกสารเว็บ (Web Document) คือ ภาษา HTML (Hyper Text Markup Language)
ภาษา html จึงเป็ นภาษาที่ใช้ในการเขียนเว็บเพจ (Web Page) ซึ่งเป็ นไฟล์ที่เขียนขึ้น
เป็ นลักษณะที่มีขอความ มีนามสกุล (Extention) เป็ น .html หรื อ .htm และเว็บเพจนี้จะแสดง
้
ั
ผลได้กบเว็บเบราเซอร์ (Web Browser) หรื อโปรแกรมสําหรับเปิ ดดูเว็บเพจ เช่น Internet
Explorer, Mozilla Firefox หรื อ Opera เป็ นต้น
สําหรับในส่วน Server นั้นไฟล์แรกของเว็บไซต์เราจําเป็ นจะต้องตั้งชื่อให้เป็ นหลัก
สากล เนื่องจาก Server ทุกตัวค่าเริ่ มต้นที่มนจะรันไฟล์แรกคือไฟล์ท่ีมีช่ือว่า index หรื อ
ั
็ ่ ั
default เท่านั้น หากนอกเหนือจากนี้กข้ ึนอยูกบการตั้งค่าที่ตว Server ว่าต้องการให้รันไฟล์ช่ือ
ั
อะไรบ้างเป็ นไฟล์แรก
1. รู ปแบบของภาษา HTML
ภาษา HTML ประกอบไปด้วย Text หรื อข้อความธรรมดา และ Tag หรื อคําสังที่ใช้ใน
่
่
การกําหนดรู ปแบบ Text โดย Tag จะอยูในเครื่ องหมาย <>

This is a <b>bold</b> word.

This is a bold word. คือ Text
<b></b> คือ Tag

This is a <b>bold</b> word.

ผลลัพธ์
This is a bold word.



2. กฎการใช้ HTML

• Tag ต้องอยูในเครื่ องหมาย < > เท่านั้น
่
• Tag พิมพ์ดวยอักษรตัวเล็กตัวใหญ่กให้ความหมายเดียวกัน เช่น <body>
้ ็
กับ <BODY>
• Tag ส่วนใหญ่จะมี Tag เปิ ดและ Tag ปิ ด เช่น <body>…</body>
• บาง Tag ไม่มี Tag ปิ ด เช่น <br>
• จะพิมพ์ Tag และ Text ติดกัน หรื อเคาะช่องว่าง หรื อแยกบรรทัดกันก็ได้
• Tag ส่วนมากจะมี Attribute หรื อส่วนขยายในการกําหนดคุณสมบัติ
ั
ให้กบ Tag เช่น <body bgcolor= “red” เป็ นต้น
่
o อยูภายในเครื่ องหมาย < > ในส่วนของ Tag เปิ ดเท่านั้น
o Tag แต่ละ Tag จะมี Attribute แตกต่างกันไป
o ใช้ช่องว่างคันระหว่าง Attribute
่
เช่น Attribute ของ Tag ที่ใช้ในการกําหนดรู ปแบบตัวอักษร
<font size= “size”>text</font>

<font size= “3”>Hello</font>
เป็ นการกําหนดให้ขอความ Hello มีขนาด 3
้



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

<HTML>
<HEAD>

ส่ วนหัว ชื่อเรื่อง <TITLE> </TITLE>
ระบุเป็ น
เอกสาร <META NAME= “" CONTENT= “"> อธิบาย
เอกสาร
เว็บเพจ
HTML
</HEAD>

<BODY>
ขอบเขต
เนือหา
้
</BODY>

</HTML>
โครงสร้างของ html นั้นจะเปิ ด Tag ด้วย <html> และปิ ดด้วย </html> ซึ่งภายในจะ
ประกอบด้วยส่วน head และส่วน body
ส่วน Head จะเป็ นส่วนที่ไม่แสดงผลในเบราเซอร์ แต่มีความสําคัญในกรณี ท่ีจะทํา
SEO (Search Engine Optimization) หรื อปรับเว็บให้เหมาะกับเว็บที่เป็ นเครื่ องมือค้นหา
อย่างเช่น www.google.com

<head>…..</head>

การระบุส่วนหัวของเว็บเพจประกอบไปด้วย Tag ดังต่อไปนี้
Tag ความหมาย
<title>…</title> การระบุชื่อเรื่ องของเว็บเพจที่จะแสดงใน
ส่วนของ Title bar ของเบราเซอร์
<META NAME= "name" CONTENT = Name คือ ชื่อหัวข้อที่จะอธิบาย
"content" > Content คือ คําอธิบาย



ส่วน Body เป็ นส่วนที่ใช้ในการแสดงผลข้อมูล หรื อส่วนเนื้อหาข้อมูล ประกอบไป
ด้วยเนื้อหาในเว็บเพจและ Tag สําหรับการแสดงผล
<body>…..</body>

ตัวอย่าง ไฟล์ ex01.html

<html>
<head>
<title>ส่วนที่จะแสดงที่ Title bar</title>
</head>
<body>
This is my first page.
</body>
</html>


ตัวอย่าง ไฟล์ ex02.html

<HTML>
<HEAD>
<TITLE>ส่วนที่แสดงที่ Title bar</TITLE>
<META name= “description" content= “Everything
you wanted to know about stamps, from prices to
history.">
<META name= “keywords" content= “stamps, stamp
collecting,stamp history, prices,stamps for sale">
</HEAD>
<BODY>
</BODY>
</HTML>



4. การกําหนดสี พนหลังและสี ตวอักษร
ื้ ั
ั
การกําหนดสี ให้กบพื้นหลังและตัวอักษรนั้นสามารถกําหนดได้ 2 รู ปแบบดังนี้
แบบที่ 1 แบบระบุชื่อสี เช่น red, green, blue, yellow เป็ นต้น
แบบที่ 2 แบบระบุดวยเลขฐาน 16 หรื อ หลักการผสมสี แบบ RGB เช่น
้
ชื่อ รหัสของสี และสี ที่ได้ ชื่อ รหัสของสี และสี ที่ได้
ALICEBLUE ANTIQUEWHITE
#F0F8FF #FAEBD7
AQUA AQUAMARINE
#00FFFF #7FFFD4
AZURE BEIGE
#F0FFFF #F5F5DC
BISQUE BLACK
#FFE4C4 #000000
BLANCHEDALMOND BLUE
#FFEBCD #0000FF
BLUEVIOLET BROWN
#8A2BE2 #A52A2A
BURLYWOOD CADETBLUE
#DEB887 #5F9EA0
CHARTREUSE CHOCOLATE
#7FFF00 #D2691E
CORAL CORNFLOWERBLUE
#FF7F50 #6495ED
CORNSILK CRIMSON
#FFF8DC #DC143C
CYAN DARKBLUE
#00FFFF #00008B



DARKCYAN DARKGOLDENROD
#008B8B #B8860B
DARKGRAY DARKGREEN
#A9A9A9 #006400
DARKKHAKI DARKMAGENTA
#BDB76B #8B008B
DARKOLIVEGREEN DARKORANGE
#556B2F #FF8C00
DARKORCHID DARKRED
#9932CC #8B0000
DARKSALMON DARKSEAGREEN
#E9967A #8FBC8F
DARKSLATEBLUE DARKSLATEGRAY
#483D8B #2F4F4F
DARKTURQUOISE DARKVIOLET
#00CED1 #9400D3
DEEPPINK DEEPSKYBLUE
#FF1493 #00BFFF
DIMGRAY DODGERBLUE
#696969 #1E90FF
FIREBRICK FLORALWHITE
#B22222 #FFFAF0
FORESTGREEN FUCHSIA
#228B22 #FF00FF
GAINSBORO GHOSTWHITE
#DCDCDC #F8F8FF
GOLD GOLDENROD



#FFD700 #DAA520
GRAY GREEN
#808080 #008000
GREENYELLOW HONEYDEW
#ADFF2F #F0FFF0
HOTPINK INDIANRED
#FF69B4 #CD5C5C
INDIGO IVORY
#4B0082 #FFFFF0
KHAKI LAVENDER
#FOE68C #E6E6FA
LAVENDERBLUSH LEMONCHIFFON
#FFF0F5 #FFFACD
LIGHTBLUE LIGHTCORAL
#ADD8E6 #F08080
LIGHTCYAN LIGHTGOLDENRODYELLOW
#E0FFFF #FAFAD2
LIGHTGREEN LIGHTGREY
#90EE90 #D3D3D3
LIGHTPINK LIGHTSALMON
#FFB6C1 #FFA07A
LIGHTSEAGREEN LIGHTSKYBLUE
#20B2AA #87CEFA
LIGHTSLATEGRAY LIGHTSTEELBLUE
#778899 #B0C4DE
LIGHTYELLOW LIME
#FFFFE0 #00FF00



LIMEGREEN LINEN
#32CD32 #FAF0E6
MAGENTA MAROON
#FF00FF #800000
MEDIUMAQUAMARINE MEDIUMBLUE
#66CDAA #0000CD
MEDIUMORCHID MEDIUMPURPLE
#BA55D3 #9370D8
MEDIUMSEAGREEN MEDIUMSLATEBLUE
#3CB371 #7B68EE
MEDIUMSPRINGGREEN MEDIUMTURQUOISE
#00FA9A #48D1CC
MEDIUMVIOLETRED MIDNIGHTBLUE
#C71585 #191970
MINTCREAM MISTYROSE
#F5FFFA #FFE4E1
NAVAJOWHITE NAVY
#FFDEAD #000080
OLDLACE OLIVE
#FDF5E6 #808000
OLIVEDRAB ORANGE
#6B8E23 #FFA500
ORANGERED ORCHID
#FF4500 #DA70D6
PALEGOLDENROD PALEGREEN
#EEE8AA #98FB98
PALETURQUOISE PALEVIOLETRED



#AFEEEE #DB7093
PAPAYAWHIP PEACHPUFF
#FFEFD5 #FFDA89
PERU PINK
#CD853F #FFC0CB
PLUM POWDERBLUE
#DDA0DD #B0E0E6
PURPLE RED
#800080 #FF0000
ROSYBROWN ROYALBLUE
#BC8F8F #4169E1
SADDLEBROWN SALMON
#8B4513 #FA8072
SANDYBROWN SEAGREEN
#F4A460 #2E8B57
SEASHELL SIENNA
#FFF5EE #A0522D
SILVER SKYBLUE
#C0C0C0 #87CEEB
SLATEBLUE SLATEGRAY
#6A5ACD #708090
SNOW SPRINGGREEN
#FFFAFA #00FF7F
STEELBLUE TAN
#4682B4 #D2B48C
TEAL THISTLE
#008080 #D8BFD8



TOMATO TURQUOISE
#FF6347 #40E0D0
VIOLET WHEAT
#EE82EE #F5DEB3
WHITE WHITESMOKE
#FFFFFF #F5F5F5
YELLOW YELLOWGREEN
#FFFF00 #9ACD32

เช่นการกําหนดสี พ้ืนหลังของเว็บเพจเป็ นสี เขียวและกําหนดให้สีอกษรเป็ นสี แดง
ั
<body bgcolor= “green” text= “#FF0000” >…..</body>

ตัวอย่าง ex03.html
<html>
<head>
<title>ส่วนที่แสดงที่ Title bar</title>
<meta name= “description" content= “Everything
you wanted to know.">
<meta name= “keywords" content= “html, php,
mysql">
</head>
<body bgcolor= “green" text= “#FF0000">
</body>
</html>




5. หัวเรื่อง (Heading)
การกําหนดหัวเรื่ องนั้น เป็ นการกําหนดขนาดตัวอักษรที่จะแสดงในหน้าเว็บเพจ โดย
เป็ นการใส่ตวเลขในแต่ละหัวเรื่ อง โดยมีรูปแบบของการใช้งานดังนี้
ั
<Hn>…</Hn>

เมื่อ
n คือ ขนาดของตัวอักษรโดยมีขนาด 1-6
n=1 หมายถึง ขนาดตัวอักษรที่ใหญ่ท่ีสุด
n=2 หมายถึง ขนาดตัวอักษรที่เล็กที่สุด

<html>
<head>
<title>Head 1-6</title>
</head>
<body>
<h1>One</h1>
<h2>Two</h2>
<h3>Three</h3>
<h4>Four</h4>
<h5>Five</h5>
<h6>Six</h6>
</body>
</html>




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

การกําหนดตัวอักษรให้เป็ นตัวหนา
<b>ข้อความที่ตองการจัดรู ปแบบ</b>
้
หรื อ <strong>ข้อความที่ตองการจัดรปแบบ</strong>
้

การกําหนดตัวอักษรให้เป็ นตัวขีดเส้นใต้
<u>ข้อความที่ตองการจัดรู ปแบบ</u>
้

การกําหนดตัวอักษรให้เป็ นตัวเอียง
<i>ข้อความที่ตองการจัดรู ปแบบ</i>
้
หรื อ <em>ข้อความที่ตองการจัดรู ปแบบ</em>
้

<html>
<head>
</head>
<body>
<B>ข้อความที่เป็ นตัวหนา</B>
<U>ข้อความที่เป็ นตัวขีดเส้นใต้</U>
<I>ข้อความที่เป็ นตัวเอียง</I>
</body>
</html>




การกําหนดสี , ขนาด และรู ปร่ างตัวอักษร
<font face= “รู ปแบบตัวอักษร” color= “สี ตวอักษร” size= “ขนาดตัวอักษร”>ข้อความที่
ั
ต้องการจัดรู ปแบบ</font>

หมายเหตุ font ที่นิยมนํามาสร้างเว็บไซต์คือ Tahoma, MS Sans serif และ Verdana เป็ นต้น

<html>
<head>
</head>
<body>
<font face= “Tahoma" color= “#FF0000" size= “3">ข้อความสี แดง ขนาด
3 รู ปแบบ Tahoma</font>
</body>


การกําหนดขนาดตัวอักษรให้ลดลง 1 ขนาด โดยไม่ตองใช้ Tag <font size= “…”>
้
<small>ข้อความที่ตองการจัดรู ปแบบ</small>
้

การกําหนดขนาดตัวอักษรให้เพิ่มขึ้น 1 ขนาด โดยไม่ตองใช้ Tag <font size= “…”>
้
<big>ข้อความที่ตองการจัดรู ปแบบ</big>
้



การกําหนดขนาดตัวอักษรแบบตัวห้อย
<sub>ข้อความที่ตองการจัดรู ปแบบ</sub>
้

การกําหนดขนาดตัวอักษรแบบตัวยก
<sup>ข้อความที่ตองการจัดรู ปแบบ</sup>
้

<html>
<head>
</head>
<body>
<small>ลด 1 ขนาด</small>
<big>เพิ่ม 1 ขนาด</big>
<sub>ตัวห้อย</sub>
<sup>ตัวยก</sup>
</body>


การกําหนดขนาดตัวอักษรแบบเคลื่อนที่
<marquee scrollamount= “ความเร็ ว” behavior= “รู ปแบบ”>ข้อความที่ตองการทําให้
้
เคลื่อนไหว</marquee>



ความเร็ ว คือ ความเร็ วในการเลื่อน
รู ปแบบ คือ ลักษณะของการเลื่อน alternate/scroll/slide

การขึ้นบรรทัดใหม่
<br>

การกําหนดพารากราฟ
<p>ข้อความในพารากราฟ</p>

<html>
<head>
</head>
<body>
<marquee scrollamount= "10" behavior= “alternate”>ข้อความที่ตองการทํา
้
ให้เคลื่อนไหว</marquee>
บรรทัดแรก<br>
บรรทัดที่สอง
<p>ข้อความในพารากราฟ</p>
</body>




การกําหนดข้อความย่อหน้า
<blockquote>ข้อความในการย่อหน้า</blockquote>

<html>
<head>
</head>
<body>
<blockquote>ย่อหน้าแรก<blockquote>ย่อหน้าที่สอง
</blockquote></blockquote>
</body>




7. ตัวอักษรพิเศษ
่
ตัวอักษรพิเศษเป็ นอักษรที่อยูในรู ปแบบของโค๊ดเครื่ องหมาย ตัวอย่างเช่น
ตัวอักษร รู ปแบบการใช้ ตัวอักษร รู ปแบบการใช้
& & € €
“ "  
< < © ©
> > ™ ™

<html>
<head>
<title>Special Charecter</title>
</head>
<body>
© 2008 Cyber Zone™
</body>




8. อักขระตามรหัสแอสกี(ASCII - American Standard Code for
้
Information Interchange)

รู ปแบบการใช้งาน
#&ตัวแลขรหัสแอสกี้

ตัวอย่างการใช้งาน
ตัวอักขระ รู ปแบบการใช้ อักขระพิเศษ
© &#169 ©
“ &#34 "

> &#62 >



9. เส้ นตรงแนวนอน (Horizontal Rule)
เส้นตรงแนวนอนเป็ นเส้นตรง มีไว้เพื่อคันระหว่างข้อความ หรื อรู ปภาพได้ ทําให้เว็บ
่
เพจมีความสวยงามมากยิงขึ้น
่

<hr noshade size= “10” width= “40/80%” align= “center/right/left”>

<html>
<head>
<title>Special Charecter</title>
</head>
<body>
<hr align= “center" size= “1" width= “80%" color= “#FF0000">
</body>




10. การแทรกรู ปภาพ
รู ปภาพในเว็บเพจจะแยกเก็บไว้ขางนอกเว็บเพจซึ่งการใช้งานนั้นจะลิงค์เข้ามาสู่หน้า
้ ้
เว็บเพจโดยมี Tag เฉพาะทําให้เว็บเพจมีความสวยงามมากยิงขึ้น
่
<IMG SRC= “image_name" ALT= "alt" ALIGN= “top/middle/bottom/left/center/right"
WIDTH= “width" HEIGHT= “height" HSPACE= “hspace" VSPACE= “vspace"
BORDER= “border" >

image_name : ชื่อไฟล์รูปภาพ .jpg / .jpeg / .gif
รู ปแบบ / path/file_name.extention
alt : ข้อความอธิบาย
่ ้
top/middle/bottom : กําหนดข้อความที่อยูดานข้างชิดขอบบน / กลาง / ล่าง / ซ้าย / กลาง / ขวา
width : ความกว้างของรู ป
height : ความสูงของรู ป
hspace : ระยะห่างจากขอบด้านข้าง
vspace : ระยะห่างจากขอบด้านบน
border : ความหนาของกรอบรู ปภาพ

<html>
<head>
<title>image</title>
</head>
<body>
<img src= “exclam.gif" alt= “เมื่อเอาเมาส์มา Over" align= “center" width=
“300" height= “300" hspace= “2" vspace= “2" border= “0">
</body>




11. การเชื่อมโยงหรือลิงค์ (Link)
้
ในเอกสารเว็บเพจนั้นจะขาดไม่ได้เลยก็คือการคลิ๊กไปยังหน้าต่างๆ ซึ่งการคลิ๊ก
เชื่อมโยงไปยังหน้าเว็บเพจต่างๆ นั้นเราเรี ยกว่า ลิ้งค์ (Link) หรื อเรี ยกเต็มๆ ว่า ไฮเปอร์ลิ้งค์
(Hyperlink) ซึ่งมีการประกาศ Tag ดังนี้

<a href= “URL or File” target= “Window” title= “text>LinkText</a>

URL or File คือ เมื่อคลิ๊กเมาท์ให้ลิ้งไปที่ไฟล์หรื อ URL ที่ตองการ
้
Window คือ หน้าต่างเมื่อคลิ๊กแล้วให้ไปที่หน้าต่างไหน โดยมีค่าดังนี้
่
_blank/_parent/_self/_top โดยปกติจะเป็ น _self โดยปริ ยายอยูแล้ว
LinkText คือ ข้อความที่ตองการแสดงให้เห็นเพือให้สามารถกดลิ้งค์ไปได้
้ ่

ไฟล์หรื อ URL ที่ตองการทําลิ้งค์มี 2 แบบคือ
้
แบบลิงค์ภายในเว็บไซต์
้ โดยไม่ตองมี http:// นําหน้า เช่น ./index.html หรื อ
้
../index.html หรื อ index.html หรื อ /index.html
แบบลิ้งค์ภายนอกเว็บไซต์ โดยให้มี http:// นําหน้า เช่น http://www.sisaketlink.com
ลักษณะของการใช้พาธ (Path) จะแนะนําให้อีกทีในบทต่อไป

หากต้องการให้รูปภาพโดยให้นบไฟล์ที่เราต้องการทําลิ้งค์เป็ นหลักแล้วนับไปตามโฟลเดอร์
ั
ซ้อนลงไป (ดูรายละเอียดเพิ่มเติมเรื่ อง Path) ประกาศ Tag ลักษณะนี้

<a href= “URL or File” target= “Window” title= “text><img src= “ImageName” border=
“0”></a>

ImageName คือ ชื่อไฟล์รูปภาพ




<html>
<head>
<title>Hyper Link</title>
</head>
<body>
<a href= “index.html” target= “_blank” title= “รวมเรื่ องราวชาวศรี สะ
เกษ”>เข้าสู่เว็บไซต์ศรี สะเกษลิ้งค์ดอทคอม</a><br>
<a href= “http://www.sisaketlink.com” target= “_blank” title= “รวม
เรื่ องราวชาวศรี สะเกษ”><img src= “exclam.gif” border= “0”></a>
</body>


การเชื่อมโยงแบบอีเมลล์
การเชื่อมโยงแบบอีกเมลล์ เมื่อเราคลิ๊กแล้วจะปรากฏหน้าต่างสําหรับส่งอีเมลล์ โดย
เราสามารถกําหนดรายละเอียดต่างๆ ของการส่งอีเมลล์ได้ดงนี้
ั



<a href= “
mailto:EmailAddress?Subject=SubjectText&CC=CCEmail&BCC=BCCEmail&
amp;body=Message Text”>Text/ImageLink</a>

EmailAddress คือ ชื่ออีเมลล์ที่เราต้องการให้ส่ง
SubjectText คือ หัวข้ออีเมลล์
CCEmail คือ อีเมลล์สาเนาที่เราต้องการให้ส่งถึง
ํ
BCC คือ อีเมลล์สาเนาที่ตองการให้ตอบกลับ
ํ ้
Message Text คือ ข้อความในอีเมลล์
Text/ImageLink คือ ข้อความหรื อรู ปภาพที่ตองการทําลิ้งค์
้

<html>
<head>
<title>Email</title>
</head>
<body>
<a href=
“mailto:kongoon@hotmail.com?Subject=Subject&CC=CCEmail&BCC=BCCE
mail&body=Message Text">Link Text</a>
</body>
</html>


็
และเมื่อคลิ๊กลิ้งค์กจะปรากฏโปรแกรมสําหรับส่งอีเมลล์ ดังนี้



การเชื่อมโยงแบบดาวน์โหลด
้ ็
การเชื่อมโยงแบบดาวน์โหลดนั้นเมื่อผูใช้ทาการคลิ๊กเลือกลิงค์กจะปรากฏหน้าต่าง
้ ํ
สําหรับดาวน์โหลด โดยมีการกําหนด Tag ดังนี้
<a href= “FileName”>Text/ImageLink</a>

FileName คือ ชื่อไฟล์ที่ตองการให้ดาวน์โหลด โดยระบุเป็ น path/filename.extention
้

<html>
<head>
<title>Download</title>
</head>
<body>
<a href= “price.xls">ดาวโหลดใบเสนอราคา</a>
</body>




็
เมื่อคลิ๊กที่ลิ้งค์กจะปรากฏหน้าต่างสําหรับดาวน์โหลดไฟล์ดงนี้
ั



12. การแสดงข้ อมูลแบบลิสต์ รายการ
การแสดงข้อมูลแบบลิสต์รายการใช้ในกรณี ท่ีเราต้องการทํารายการเป็ นข้อๆ
เรี ยงลําดับ โดยสามารถกําหนดรายการแบบต่างๆ ได้ดงนี้ั

การแสดงรายการแบบมีลาดับกํากับ (Order List)
ํ
<ol type= “Type” start= “Start”>
<li value= “Value”>First Choice</li>
<li>Second Choice</li>
<li>Third Choice</li>
/l

Type คือ ประเภทของรายการ คือ 1/A/a/I/i
1 เป็ นลําดับตัวเลข ซึ่งเป็ นค่า Default ในกรณี ที่ไม่ระบุ Type
A เป็ นลําดับตัวอักษรตัวพิมพ์ใหญ่
a เป็ นลําดับตัวอักษรตัวพิม พ์เล็ก
I เป็ นลําดับตัวเลขโรมันใหญ่
i เป็ นลําดับตัวเลขโรมันเล็ก
Start คือ ลําดับเริ่ มต้น
Value คือ ลําดับที่ตองการให้แสดง เช่น 5
้




<html>
<head>
<title>Order List</title>
</head>
<body>
<ol start= “1”>
<li>First Choice</li>
</ol>
<ol type= “A” start= “1”>
</ol>
<ol type= “a” start= “1”>
</ol>
<ol type= “I” start= “1”>
</ol>
<ol type= “i” start= “1”>




ํ
การแสดงรายการแบบมีสญลักษณ์กากับ (Bulleted List)
ั
<ul type= “Type” start= “Start”>
<li value= “Value”>First Choice</li>
<li>Third Choice</li>
/l

Type คือ ประเภทของรายการ คือ disc/circle/square
่
disc เป็ นการกําหนดรายการแบบวงกลมทึบ โดย Default อยูแล้ว
circle เป็ นการกําหนดรายการแบบวงกลมกลวง
square เป็ นการกําหนดรายการแบบสี่ เหลี่ยมทึบ
Start คือ ลําดับเริ่ มต้น
Value คือ ลําดับที่ตองการให้แสดง เช่น 5
้




<html>
<head>
<title>Bulleted List</title>
</head>
<body>
<ul start= “1”>
</ul>
<ul type= “disc” start= “1”>
</ul>
<ul type= “circle” start= “1”>
</ul>
<ul type= “square” start= “1”>
/l




การแสดงรายการาแบบข้อมูลนิยาม (Definition List)
<dl>
<dt>Title Text</dt>
<dd>Detail Text</dd>

Title Text คือ ข้อความหัวเรื่ อง
Detail Text คือ ข้อความรายการย่อย




<html>
<head>
</head>
<body>
<dl>
<dt>Title 1</dt>
<dd>Sub Title1</dd>
<dd>Sub Title2</dd>
<dt>Title 2</dt>
<dd>Sub Title1</dd>
<dd>Sub Title2</dd>
</dl>
/b d




13. ตาราง (Table)
การใส่ตารางใน html นั้นสามารถที่จะแทรก Tag และกําหนด Attribute ต่างๆ ได้ดงนี้
ั
<table border= “Border” bgcolor= “TableBg” cellspacing= “CS” cellpadding= “CP”
width= “Width” height= “Height” background= “Background”>
<tr bgcolor= “TrBg”>
<th bgcolor= “ThBg”>Head Text</th>
<th>Head Text</th>
</tr>
<tr>
<td bgcolor= “TdBg” align= “Align” valign= “Valign” width= “Width”
height= “Height”>Body Text</td>
<td>Body Text</td>
</tr>

Border คือ ความหนาของเส้นขอบตาราง
TableBg คือ สี พ้ืนหลังของตาราง
Background คือ รู ปภาพพื้นหลังของตาราง
CS คือ ช่องว่างระหว่างเซลล์ของตาราง
CP คือ ระยะห่างจากเส้นขอบของตาราง
TrBg คือ สี พ้ืนหลังของแถว
ThBg คือ สี พ้ืนหลังของเซลล์ Header ของตาราง
TdBg คือ สี พ้ืนหลังของเซลล์ ของตาราง
Head Text คือ ข้อความหัวเรื่ องของตาราง
Body Text คือ ข้อความในตาราง
Align คือ การจัดตําแหน่งแนวนอน left/center/right/char/justify
Valign คือ การจัดตําแหน่งแนวตั้ง baseline/bottom/middle/top
Width คือ ความกว้าง
Height คือ ความสูง
<tr> คือ แถวของตาราง 1 แถว
<th>และ<td> คือข้อมูลในแนวคอลัมน์



14. ฟอร์ ม (Form)
ฟอร์ม (Form) เป็ นรู ปแบบของการกรอกข้อมูลเพื่อส่งข้อมูลเข้าไปประมวลผลในฝั่ง
Server โดยอาศัยภาษาที่ทางานในฝั่ง Server เป็ นตัวประมวลผลจากฟอร์ม ก่อนอื่นมาทําความ
ํ
รู้จกกับ Tag ของฟอร์มกันก่อนครับ
ั
<form id= “Id” name= “Name” method= “Method” action= “Action”>
.....
</form>

Id คือ Identify ของฟอร์ม
Name คือ ชื่อของฟอร์ม
Method คือ วิธีการส่งข้อมูล มี 2 แบบ คือ post กับ get
Action คือ ไฟล์ที่รับข้อมูลจากฟอร์มเพื่อไปประมวลผลที่ฝั่ง Server เช่น testProcess.php

โดยทัวไปแล้วฟอร์มจะมีออบเจ็คต่างๆ สําหรับรับข้อมูล ซึ่งจะแตกต่างกันไปตาม
่ ็
ประเภทของข้อมูล เช่น ข้อมูลที่เป็ นข้อความยาวๆ ข้อมูลที่เป็ นข้อความสั้น เป็ นปุ่ มกด เป็ น
ต้น ดังนั้นการเรี ยนรู้ออบเจ็คต่างๆ จึงมีความสําคัญก่อนการออกแบบฟอร์มสําหรับกรอก
็
ข้อมูลโดยมี
อ็อบเจ็คพร้อมกับแอททริ บิวพื้นฐานที่สาคัญ ดังนี้
ํ

กล่องข้อความ (Text Field)
<input type= “text” name= “Name” id= “Id” size= “Size”>

Name คือ ชื่อของ Text Field
Id คือ Identify ของ Text Field
Size คือ ขนาด ให้ระบุเป็ นตัวเลข เป็ นความยาวของ Text Field




<html>
<head>
<title>Form</title>
</head>
<body>
<form id= “test” name= “testForm” method= “post” action= “testProcess.php”>
<input type= “text” name= “fullname” id= “fullname” size= “20”>
</form>
</body>


ตัวรับข้อมูลแบบซ่อน (Hidden Field)
<input type= “hidden” name= “Name” id= “Id”>

Name คือ ชื่อของ Hidden Field
Id คือ Identify ของ Hidden Field




<html>
<head>
<title>Form</title>
</head>
<body>
<input type= “hidden” name= “memberId” id= “memberId” size= “20” value= “5”>
</form>
</body>

่
ผลลัพธ์ จะเห็นได้วา input แบบ hidden จะไม่แสดงให้เราเห็นใน Browser

กล่องรับข้อมูลจํานวนมาก (Text Area)
<input type= “textarea” name= “Name” id= “Id” cols= “Cols” rows= “Rows”></textarea>

Name คือ ชื่อของ Text Area
Id คือ Identify ของ Text Area
Cols คือ จํานวนตัวอักษรในแนวนอน หรื อขนาดความกว้างของ Text Area นันเอง
่
Rows คือ จํานวนแถวของอักษร หรื อขนาดความสูงของ Text Area




<html>
<head>
<title>Form</title>
</head>
<body>
<textarea name= “detail” id= “detail” cols= “45” rows= “5”></textarea>
</form>
</body>


ตัวเลือกแบบเลือกได้หลายข้อ (Checkbox)
<input type= “checkbox” name= “Name” id= “Id” checked= “checked”>

Name คือ ชื่อของ Checkbox
Id คือ Identify ของ Checkbox
checked คือ กําหนดให้มีการเลือกไว้ก่อน




<html>
<head>
<title>Form</title>
</head>
<body>
ชอบดนตรี <input name= “music" type= “checkbox" id= “music" checked= “checked"
/><br>
ชอบกีฬา <input name= “sport" type= “checkbox" id= “sport" /></form>
</body>


ตัวเลือกแบบเลือกได้ขอเดียวในแต่ละกลุ่ม (Radio Button)
้
<input type= “radio” name= “Name” id= “Id” checked= “checked”>

Name คือ ชื่อของ Radio Button
Id คือ Identify ของ Radio Button
checked คือ กําหนดให้มีการเลือกไว้ก่อน




<html>
<head>
<title>Form</title>
</head>
<body>
ชอบดนตรี <input name= “gender" type= “radio" id= “gender" checked= “checked"
/><br>
ชอบกีฬา <input name= “gender" type= “radio" id= “gender" />
</form>
</body>


รายการ (List/Menu)
<select name= “Name” id= “Id”>
<option value= “Value1" selected>Label1</option>
<option value= “Value2">Label2</option>
</ l t>

Name คือ ชื่อของ List/Menu
Id คือ Identify ของ List/Menu
Value1 คือ ค่าที่ตองการเมื่อถูกส่งข้อมูลไป
้
Label1 คือ ค่าที่ตองการให้เห็นใน List
้



<html>
<head>
<title>Form</title>
</head>
<body>
<form id= “test" name= “testForm" method= “post" action= “testProcess.php">
<select name= “mylike">
<option value= “sport">ชอบกีฬา</option>
<option value= “sport">ชอบดนตรี </option>
</select>
</form>
</body>
</ht l>


ปุ่ ม (Button)
<input type= “Type” name= “Name” id= “Id”>

Name คือ ชื่อของ Button
Id คือ Identify ของ Button
Type คือ ประเภทของ Button โดยกําหนดดังนี้ button/submit (แบบส่งข้อมูล) /reset (แบบลบ
ข้อมูล)



<html>
<head>
<title>Form</title>
</head>
<body>
<h2>กรุ ณากรอกข้อมูลให้ครบถ้วน</h2>
<form id= “form1" name= “form1" method= “post" action= “testProcess.php">
<label>ชื่ อ-นามสกุล
<input type= “text" name= “fullname" id= “fullname" />
</label>
<p>
<label>
<input type= “radio" name= “gender" id= “radio" value= “ชาย" />
ชาย</label>
<br />
<label>
<input type= “radio" name= “gender" id= “radio2" value= “หญิง" />
หญิง</label>
</p>
<p>
<label>
<input name= “sport" type= “checkbox" id= “sport" value= “ชอบเล่นกีฬา" />
<i>ชอบเล่นกีฬา</i></label>
<br />
<label>
<input name= “music" type= “checkbox" id= “music" value= “ชอบเล่นดนตรี " />
ชอบเล่นดนตรี </label>
</p>
<p>
<label>รายละเอียด
<textarea name= “detail" id= “detail" cols= “45" rows= “5"></textarea>
</label>
</p>
<p>
<input type= “submit" name= “button" id= “button" value= “ส่งข้อมูล" />
<input type= “reset" name= “button2" id= “button2" value= “ยกเลิก" />
</p>



บทที่ 3 Cascading Style Sheet (CSS)
CSS เป็ นรู ปแบบของการจัดการกับ Tag ใดๆ ของ HTML โดยสามารถกําหนด
ั
รู ปแบบ หรื อ Attribute ให้กบ Tag ต่างๆ ได้อย่างสวยงามและเป็ นรู ปแบบตามต้องการได้
อย่างง่ายดาย โดยการกําหนดเพียงครั้งเดียวเราก็สามารถเรี ยกใช้งานได้ตลอด ซึ่งทําให้ง่ายต่อ
การเรี ยกใช้งาน

1. การใช้ งาน CSS

การใส่ CSS แบบ Inline
รู ปแบบ
<tagname style= “attribute1:value1;attribute2:value2;…;attributeN:valueN;”>

Tagname คือ Tag ใดๆ ของ html
attribute1, attribute2, …, attributeN คือ ชื่อรู ปแบบ
value1, value2, …, valueN คือ ค่าของรู ปแบบ

<html>
<head>
<title>CSS</title>
</head>
<body>
<b>Line1</b>
<b style= “color:red;">Line2</b>
<b>Line3</b>
</body>




การใส่ CSS ที่ <head>
<HEAD>
<STYLE TYPE=text/css>
TAGNAME {
attribute1 : value1;
…
attribute n : value n;
}
</STYLE>
</ HEAD >

TAGNAME คือ ชื่อ Tag html ที่ไม่มี < >
attribute1, attribute2, …, attribute n คือ ชื่อรู ปแบบ
ํ
value1, value2, …, value n คือ ค่าที่กาหนดให้รูปแบบ




<html>
<head>
<title>CSS</title>
<style type= “text/css">
B{
color:red;
}
</style>
</head>
<body>
<b>Line1</b>
<b>Line2</b>
<b>Line3</b>
</b d >


การใส่ CSS แบบ Import File
ไฟล์ที่เป็ น CSS นั้น จะมีนามสกุล หรื อ Extension เป็ น .css ซึ่งโดยทัวไปแล้วจะสร้าง
่
ไฟล์ CSS แยกอิสระจากไฟล์ html เพือให้มีการจัดการได้ง่ายมากยิงขึ้น เช่น style.css
่ ่
style.css



TAGNAME {
…
}

TAGNAME คือ Tag html ที่ไม่มี < >
ํ

page.html
<link rel= “stylesheet” type= “text/css” href= “style.css”>

ตัวอย่าง mystyle.css และ ex31.html
mystyle.css
B{
color:red;
}

ex31.html



2. Class และ ID
การใช้งานแบบ Inline และ การใส่ CSS ที่ <head> นั้นทําให้รูปแบบของ html tag ถูก
กําหนดค่าใหม่ ในการเรี ยกใช้ทุกๆ ครั้งก็จะเป็ นค่าใหม่ เช่น เมื่อเราเรี ยก Tag <b> ก็จะพบว่า
เมื่อเรี ยก Tag <b> ทุกๆ ครั้งก็จะเป็ นการเรี ยกใช้ CSS ที่ถกกําหนดขึ้นทุกครั้ง ซึ่งหากเรา
ู
ต้องการให้ Tag <b> ตัวแรกมีสีเปลี่ยนไปจากตัวอื่นๆ จะทําไม่ได้ ดังนั้นเราจึงต้องมีการเรี ยก
แบบใหม่โดยใช้ class และ id เพื่อกําหนดรู ปแบบให้ตรงตามความต้องการมากขึ้น

Class
.className {
…

}

className คือ ชื่อของ Class ที่เรากําหนดขึ้น
ํ




<html>
<head>
<title>CSS</title>
<style type= “text/css”>
.mystyle{
color:red;
}
</style>
</head>
<body>
<b>Line1</b>
<b class= “mystyle”>Line2</b>
<b>Line3</b>


ID
#IdName {
…



IdName คือ ชื่อของ id ของ html Tag
ํ

<html>
<head>
<title>CSS</title>
<style type= “text/css”>
#mystyle{
color:red;
}
</style>
</head>
<body>
<b>Line1</b>
<b id= “mystyle”>Line2</b>
<b>Line3</b>




3. Pseudo Class
ั
เป็ นการกําหนดรู ปแบบให้กบการเชื่อมโยงหรื อลิงค์้
1. A:LINK การเชื่อมโยงที่ยงไม่ได้เรี ยกใช้
ั
ํ
2. A:ACTIVE การเชื่อมโยงที่กาลังเรี ยกใช้ กําลังเปิ ดเพจ
3. A:VISITED การเชื่อมโยงที่เรี ยกใช้แล้ว
4. A:HOVER การเชื่อมโยงที่เมาส์ช้ ี
รู ปแบบ
A:LINK{
}
A:ACTIVE{
}
A:VISITED{
}
A:HOVER{
}




<html>
<head>
<title>CSS</title>
<style type= “text/css">
A:LINK{
font-size:14pt;
color:red;
text-decoration: underline;
}
A:ACTIVE{
font-size:14pt;
color:BLUE;
text-decoration: none;
}
A:VISITED{
font-size:14pt;
color:GREEN;
}
A:HOVER{
font-size:14pt;
color:YELLOW;
}
</style>
</head>
<body>




บทที่ 4 ภาษา PHP: Hypertext Processor
ภาษาพีเอชพี ( PHP) ย่อมาจาก Hypertext Processor เป็ นภาษาที่ทางานในฝั่ง Server
ํ
โดยเราสามารถใช้โปรแกรม Text Editor ทัวไปในการสร้างไฟล์ เช่น Note Pad, EditPlus,
่
Dreamweaver หรื อ โปรแกรม Text Editor อื่นๆ

รู ป แสดง Client เรี ยกไฟล์ view.php

ปัจจุบนเวอร์ชนของ PHP เป็ นเวอร์ชน 5.2. โดยมีเวอร์ชน 6. ซึ่งกําลังพัฒนา โดยเวอร์
ั ั่ ั่ ั่
ชันตั้งแต่เวอร์ชน 5 ขึ้นไป เป็ นเวอร์ชนที่รองรับการเขียนโปรแกรมเชิงวัตถุ (Object Oriented
่ ั่ ่ั
Programming) เต็มรู ปแบบ โดยในคู่มือเล่มนี้พฒนาให้สามารถรองรับการทํางานได้ต้ งแต่
ั ั
เวอร์ชน 4 ขึ้นไป
ั่
ข้ อสํ าคัญของภาษา PHP คือ
• เป็ นภาษาที่ทางานในฝั่ง Server หรื อ Server Side Script ซึ่งเป็ นการทํางานที่ฝ่ัง
ํ
เซิร์ฟเวอร์แล้วส่งผลลัพธ์ไปแสดงที่ฝั่ง Client ในรู ปแบบของ HTML
• หลังจากประมวลผลที่ฝั่ง Server แล้วผลลัพธ์ที่เกิดขึ้นจะอยูในรู ปของ HTML
่
• เราสามารถเขียน PHP code ร่ วมกับ html ได้ โดย html ใช้ Tag < และ > ส่วน PHP ใช้
<?php และ ?> หรื อ <SCRIPT LANGUAGE=‘php’> และ </SCRIPT> เป็ นต้น แต่
ควรใช้ <?php และ ?> เพราะหากใช้ในรู ปแบบอื่นอาจต้องตั้งค่า Server เพิมเติม
่
• คําสังของ PHP ต้องปิ ดด้วย Semicolon (;) ยกเว้นคําสังสุดท้ายก่อนปิ ด PHP Tag อาจ
่ ่
ไม่ตองใส่ ; ก็ได้
้


HTML PHP MySQL สำหรับเว็บโปรแกรมเมอร์มือใหม่

HTML PHP MySQL สำหรับเว็บโปรแกรมเมอร์มือใหม่

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to HTML PHP MySQL สำหรับเว็บโปรแกรมเมอร์มือใหม่

Similar to HTML PHP MySQL สำหรับเว็บโปรแกรมเมอร์มือใหม่ (20)

HTML PHP MySQL สำหรับเว็บโปรแกรมเมอร์มือใหม่