Home | About us | Activities | Alumni | Webboard | Download | Proceedings | Contact us
 

[ตั้งกระทู้ใหม่] [กระทู้สมัยนิยม] [ตอบกระทู้]
 
การทำโฮมเพจเบื้องต้น

ข้อความ: กระทู้พิเศษเพื่อสอนการทำโฮมเพจ เผื่อใครอยากจะทำโฮมเพจประกวดกับวิชาการดอทคอม (หรือเอาไปทำอย่างอื่นก็ได้)ครับ คิดว่าจะแบ่งเป็นสองส่วน คือส่วนเบื้องต้น อันได้แก่การเขียน HTML กับเบื้องไม่ต้น อันได้แก่การเขียน CGI โดยใช้ Perl (ภาษาอื่นเขียนไม่เป็น) รับรองว่าเขียนเป็นก่อนเส้นตายหมดเขตรับสมัครประกวดโฮมเพจแน่นอน ฮิๆ

โดย: webmaster3 อีเมล์ webmaster@dpst.net วันที่ Date: 25 Mar 2001 23:11:05 GMT IP: 195.92.67.67
1)
2)


ข้อความ: เริ่มเลยนะครับ

ประการแรก HTML คืออะไร -- HTML ก็คือการเขียน text file ที่มีนามสกุลเป็น .html หรือ .htm ที่เอาไว้ให้พวก Internet Explorer หรือ Netscape อ่านรู้เรื่อง แล้วเอามาทำเป็นหน้าเว็บเพจที่เราเห็น สามารถคลิ๊กไปคลิ๊กมาไปไหนมาไหนได้ (แค่นี้พอ)

เอาไปทำอะไรได้บ้าง -- ก็เอาไว้เขียนเว็บเพจน่ะสิครับ

เขียนอย่างไร -- เอาแค่ทดลองหอมปากหอมคอ..ก็ใช้แค่ notepad ซึ่งเป็น text editor สร้างไฟล์ แล้วเซฟให้มีนามสกุลเป็น html หรือ htm แล้วก็เปิด IE เลือก open file ที่ทำไว้...ในไฟล์จะเขียนอะไรก็ได้ เดี๋ยวเห็นผลเอง

โดย: webmaster3 อีเมล์ วันที่ Date: 26 Mar 2001 09:40:21 GMT IP: 194.82.103.42
3)
4)


ข้อความ: Hello World! -- โปรแกรมหากินของหนังสือสอนเขียนโปรแกรม..

เริ่มด้วยการเปิดโปรแกรม Notepad ขึ้นมา

พิมพ์คำว่า Hello World! ลงไปเฉยๆเลยครับ

เลือก Save as..

เปลี่ยน Save as type เป็น All file *.*

พิมพ์ชื่อไฟล์เป็น HelloWorld.html ในช่อง File name แล้วเคาะ Enter

เปิด IE ขึ้นมา เลือก Open file แล้วเลือกไฟล์ที่เพิ่งสร้างไว้เมื่อกี้ (อย่าบอกว่าหาไม่เจอนะครับ)

ดูผล... Hello World! ง่ายไหมเอ่ย?



โดย: webmaster3 อีเมล์ วันที่ Date: 26 Mar 2001 11:02:11 GMT IP: 194.82.103.35
5)
6)


ข้อความ: ขอกล่าวถึงของเล่นที่จะเอาไว้ใช้ในการเขียน HTML ครับ หากจะพอใจใช้โน็ตแพดผมก็ไม่ว่า หากจะบอกว่ากระบี่อยู่ที่ใจ แต่โปรแกรมที่ผมใช้คือ Thai-HTML Editor 2.5 ครับเป็นฟรีแวร์ของคนไทย ไม่ใช่แบบลากๆมาวางๆแล้วเสร็จเพราะต้องเขียนโค้ดเอง(ซึ่งนั่นเป็นข้อดี เพราะไม่แนะนำให้ใช้พวกลากๆวางๆ ในขั้นแรก) อีกข้อนึงโปรแกรมนี้ใช้ทำงานกับภาษาไทยได้ดีมากบนระบบปฏิบัติการที่ไม่ใช่ภาษาไทย .. อย่างที่ผมใช้อยู่นี้ เป็น Win98 Eng ไปเอาโปรแกรมนี้ได้ที่ http://thaihtml.hypermart.net ปล. ผมไม่ได้ค่าโฆษณานะครับ...อย่างน้อยก็สนับสนุนซอฟท์แวร์คนไทยล่ะน่า หึ หึ


โลโก้...น่ารักดี...เหมือนดูโลโก้เว็บ DPST Online ยุคบุกเบิก


นอกจากนี้ที่เว็บดังกล่าวยังสอนเขียน HTML แบบง่ายๆ พร้อม screenshot ตัวอย่างด้วย (อ๊ะ..แล้วจะเขียนกระทู้นี้ต่อไปทำไมล่ะเนี่ย )

ในกรณีที่ต้องการ Editor อันอื่น ก็ลอง CodeEdit ซึ่งก็ฟรีหาเอาจาก download.com แล้วกันนะครับ



โดย: webmaster อีเมล์ วันที่ Date: 27 Mar 2001 17:34:08 GMT IP: 194.82.103.39
7)
8)


ข้อความ: ในช่วงแรกเราสามารถทำการทดสอบโปรแกรมเราได้บนเครื่อง เหมือนกับที่ให้ทำการ Hello World ในตอนแรก บางโปรแกรมอย่าง Editor ที่ผมกล่าวถึง สามารถพรีวิวได้ (แต่ไม่เวิร์กสำหรับภาษาไทยตอนพรีวิวบนเครื่องวินโดว์สภาษาอังกฤษ)

เมื่อถึงเวลาต้องอัพโหลดขึ้นอินเตอร์เน็ต..บางเว็บที่ให้เราทำเว็บฟรี มักจะมีระบบให้อัพโหลดขึ้นไปทีละไฟล์ หรือห้าไฟล์ เป็นต้น ถ้าจะให้สะดวก ก็ใช้โปรแกรม FTP ในการอัพโหลด ที่ผมใช้คือ CuteFTP เป็นแชร์แวร์ที่ผมจ่ายตังค์ลงทะเบียนไปแล้ว (เพราะมหาลัยไม่ยอมให้มีโปรแกรมผิดกฎหมายบนคอมมหาลัย) แต่มีโปรแกรม FTP ฟรีๆอีกมากมายบนเน็ต ก็ลองไปดูที่ download.com อีกได้เช่นกัน

นอกจากนี้ยังมีของเล่นอื่นๆอีก แต่ไปหากันเองนะครับ



โดย: webmaster อีเมล์ วันที่ Date: 27 Mar 2001 17:43:56 GMT IP: 194.82.103.38
9)
10)


ข้อความ: เรื่องสุดท้ายสำหรับการอุ่นเครื่อง คือเรื่องเซิร์ฟเวอร์..แน่นอนเอาแบบฟรีๆ เท่าที่คิดออกก็มี

www.thai.net ครับไม่มีแบนเนอร์ แต่ก็ไม่มี CGI (ดูกระทู้ advance) และต้องอัพโหลดผ่าน browser ไม่มี FTP

ของ se-ed.net เป็นของไทยเช่นกัน แต่มี pop-up ซึ่งผมรำคาญมาก แต่ให้ใช้ได้ทั้ง CGI จาก Perl และ PHP มี FTP ด้วย ได้อีเมล์อีกต่างหาก

ของ hypermart.net จริงๆเขาให้คนเอาไว้ทำธุรกิจ แต่เอามาทำเล่นฟรีๆก็ได้ มี pop-up แต่มีวิธีทำให้มันเป็นแบนเนอร์บนเว็บแทนได้ ให้ทำ CGI ด้วย Perl ได้ มี FTP

เนื้อที่มักจะให้ฟรีๆกันประมาณ 10MB ถึง 25MB ซึ่งก็พอแล้ว...สำหรับเว็บแบบธรรมดาๆ ครับ




โดย: webmaster อีเมล์ วันที่ Date: 27 Mar 2001 17:50:07 GMT IP: 194.82.103.44
11)
12)


ข้อความ: แล้วต่อไปนี้เราจะเขียนไฟล์ HTML ที่มีโครงสร้างเป็นแบบนี้ครับ

<HTML>
<HEAD>
<TITLE>your title here</TITLE>
</HEAD>
<BODY>
some more html stuff
</BODY>
</HTML>




โดย: webmaster3 อีเมล์ วันที่ Date: 27 Mar 2001 18:00:21 GMT IP: 194.82.103.42
13)
14)


ข้อความ: สังเกตุดูว่าแต่ละ tag จะโผล่มาเป็นคู่ๆ เช่น <HTML>...</HTML> การเปิดแล้วลืมปิดสำหรับบาง tag อาจทำให้การแสดงผลเพี้ยนไป ฉนั้นก็ระวังให้ดี (หรือไม่ก็จะได้เอาไว้กลับมาแก้ได้)

โดย: webmaster3 อีเมล์ วันที่ Date: 27 Mar 2001 18:07:48 GMT IP: 194.82.103.39
15)
16)


ข้อความ: ไม่ค่อยว่าง กับไม่รู้จะเขียนอะไรดี...ลองไปดูเรื่องเกี่ยวกับ Cascading Style Sheet หรือ CSS กันดูครับ มีลูกเล่นอะไรให้เล่นเพิ่มมากขึ้น

http://www.dynamicdeezign.com/css/introduction.html

มี tutorial ให้ download มาดูเล่น offline ได้ด้วย

http://www.dynamicdeezign.com/css/css2tut.zip



โดย: webmaster3 อีเมล์ วันที่ Date: 31 Mar 2001 22:40:26 GMT IP: 195.92.67.70
17)
18)


ข้อความ: เฮ้อ..ไม่ได้เขียนต่อเลย

โดย: webmaster3 อีเมล์ วันที่ Date: 11 Apr 2001 22:33:51 GMT IP: 195.92.67.67
19)
20)


ข้อความ: มาเถอะนะมาเขียนต่อเถอะรู้เปล่าว่ามีคนตั้งใจเรียนอยู่หนึ่งคนสนใจอยากเขียนบ้างค่ะ

โดย: little sun อีเมล์ วันที่ Date: 13 Apr 2001 05:05:44 GMT IP: 203.144.239.146
21)
22)


ข้อความ: สวัสดี อยากทำ homepage แบบง่ายๆ แนะนำให้คุณใช้โปรแกรม dreamweaver เราก็ใช้ ทำตามหนังสือไปเรือยๆ มีพื้นฐาน html น้อยก็ทำได้

โดย: dexter อีเมล์ noisung@se-ed.net วันที่ Date: 14 Apr 2001 17:12:06 GMT IP: 203.155.35.89
23)
24)


ข้อความ: ขอบใจนะคุณเด๊กเตอร์

โดย: little sun อีเมล์ วันที่ Date: 17 Apr 2001 04:24:32 GMT IP: 203.144.239.146
25)
26) ข้อความ: ชายจองกวางไก่

โดย ชาย 061186115 26 มกราคม 2547

27) ข้อความ: ชายจองกวางไก่

โดย ชาย 061186115 26 มกราคม 2547

28) ข้อความ: ชายจองกวางไก่

โดย กิด 0611/86115 28 มกราคม 2547

29) ข้อความ: ยากจังคะแต่ก็ขอบคุนนะคะทำให้มีโฮมเพจเป็นของตัวเอง

ขอบคุน

โดย: นก nok200995@hotmail.com วันที่ 27 ตุลาคม 2552 07:42 น. IP:Unknown


แสดงความคิดเห็น
 
ข้อความ:
 
PIN: โปรดพิมพ์เลข สามเจ็ดเจ็ดแปด ในช่อง
ชื่อ:
อีเมล์:
 
 
 
คำสั่งพิเศษ:

ตัวหนาๆ = [b]ตัวหนาๆ[/b]

Gallus gallus domesticus = [i]Gallus gallus domesticus[/i]

WARNING! = [font color=#FF0000]WARNING![/font]

http://www.dpst.in.th = [url]http://www.dpst.in.th[/url]

scnop@mahidol.ac.th = [email]scnop@mahidol.ac.th[/email]

= //Angry

= //Grin

= //Kidding

= //Laugh

= //Sad

= //Wow

= //Smile

= //Cool

= //Huh

= :-D

แทรกรูปภาพ [img]http://www.somewhere.com/somefile.jpg[/img]

Go top...

โครงการพัฒนาและส่งเสริมผู้มีความสามารถพิเศษทางวิทยาศาสตร์และเทคโนโลยี (พสวท.)
Development and Promotion of Science and Technology talents project (DPST)
สถาบันส่งเสริมการสอนวิทยาศาสตร์และเทคโนโลยี (สสวท.)
924 ถนนสุขุมวิท แขวงพระโขนง เขตคลองเตย กรุงเทพฯ 10110
โทร. 02-392-4021 โทรสาร. 02-381-0750
Webmaster: scnop@mahidol.ac.th